@planningcenter/tapestry 2.9.0-rc.0 → 2.9.0-rc.2

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 (7) hide show
  1. package/dist/reactRender.css +502 -501
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +502 -501
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/unstable.css +5 -4
  6. package/dist/unstable.css.map +1 -1
  7. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,613 +1,613 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
1
+
2
+ @media (prefers-reduced-motion: no-preference){
3
+
4
+ :root{
5
+ interpolate-size:allow-keywords;
5
6
  }
7
+ }
6
8
 
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
9
+ @layer tds-component{
10
+ tds-sidenav, .tds-sidenav{
11
+ --tds-sidenav-indent:12px;
12
+ --tds-sidenav-item-depth:0;
25
13
 
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
14
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
28
15
 
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
16
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
17
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
18
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
19
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
32
20
 
33
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
21
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
22
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
23
+ --tds-sidenav-item-nested-background-selected:transparent;
35
24
 
36
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
25
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
26
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
27
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
39
28
 
40
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
29
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
30
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
45
31
  }
46
32
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
33
+ .tds-sidenav--theme-gray{
34
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
35
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
36
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
37
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
38
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
49
39
  }
40
+ }
50
41
 
51
- @supports (color: light-dark(#fff, #000)){
52
- .tds-page-header{
53
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
- }
42
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
43
+ display:flex;
56
44
  }
57
45
 
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
- }
46
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
47
+ flex-direction:column;
48
+ gap:var(--t-spacing-half);
49
+ width:100%;
76
50
  }
51
+
52
+ .tds-sidenav-section-list{
53
+ width:100%;
54
+ padding:0;
55
+ margin:0;
56
+ list-style:none;
77
57
  }
78
58
 
79
- .tds-page-header{
59
+ .tds-sidenav-section-header{
80
60
  display:flex;
81
- flex-direction:column;
82
- padding-top:var(--tds-page-header-padding-y);
83
- color:var(--tds-page-header-color);
84
- background:var(--tds-page-header-background-color);
85
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
61
+ align-items:baseline;
62
+ justify-content:space-between;
63
+ padding-top:var(--t-spacing-2);
86
64
  }
87
65
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
90
- }
66
+ .tds-sidenav-section-header h2{
67
+ margin:0;
68
+ font-size:var(--t-font-size-sm);
69
+ font-weight:var(--t-font-weight-semibold);
70
+ line-height:1.35;
71
+ color:var(--t-text-color-secondary);
72
+ text-transform:uppercase;
73
+ }
91
74
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
94
- }
75
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
76
+ padding-top:0;
77
+ }
95
78
 
96
- .tds-page-header__title-bar{
97
- display:flex;
98
- flex-direction:column;
99
- gap:var(--t-spacing-2) var(--t-spacing-1);
100
- align-items:flex-start;
101
- justify-content:space-between;
102
- padding:0 var(--tds-page-header-padding-x);
103
- }
79
+ .tds-sidenav-section-header [slot="label-actions"]{
80
+ display:flex;
81
+ gap:var(--t-spacing-half);
82
+ align-items:center;
83
+ }
104
84
 
105
- .tds-page-header--profile > .tds-page-header__title-bar{
85
+ .tds-sidenav-section [slot="section-actions"]{
86
+ display:flex;
87
+ gap:12px;
106
88
  align-items:center;
89
+ min-height:42px;
90
+ padding:var(--t-spacing-1) 0;
107
91
  }
108
92
 
109
- .tds-page-header__primary{
93
+ .tds-sidenav-section-list,
94
+ .tds-sidenav-item{
110
95
  width:100%;
111
- }
112
-
113
- .tds-page-header__primary h1{
96
+ padding:0;
114
97
  margin:0;
115
- font-size:var(--tds-page-header-headline-font-size);
116
- font-weight:var(--t-font-weight-normal);
117
- line-height:32px;
118
- color:var(--tds-page-header-headline-color);
119
- overflow-wrap:break-word;
120
98
  }
121
99
 
122
- .tds-page-header [slot="actions"],
123
- .tds-page-header .tds-page-header__actions{
124
- width:100%;
125
- }
100
+ .tds-sidenav-item :is(a,button){
101
+ position:relative;
102
+ display:flex;
103
+ gap:12px;
104
+ align-items:center;
105
+ width:100%;
106
+ padding:12px;
107
+ overflow:hidden;
108
+ font-size:var(--t-font-size-sm);
109
+ line-height:18px;
110
+ color:var(--t-text-color-headline);
111
+ white-space:nowrap;
112
+ text-decoration:none;
113
+ -webkit-appearance:none;
114
+ -moz-appearance:none;
115
+ appearance:none;
116
+ cursor:pointer;
117
+ background-color:var(--tds-sidenav-item-background, transparent);
118
+ border:0;
119
+ border-radius:var(--t-border-radius);
120
+ transition:var(--tds-sidenav-item-transition);
121
+ }
126
122
 
127
- .has-multi-actions.tds-page-header [slot="actions"],
128
- .has-multi-actions.tds-page-header .tds-page-header__actions{
129
- display:flex;
130
- flex-flow:row wrap;
131
- gap:var(--t-spacing-half) var(--t-spacing-1);
132
- align-items:flex-start;
133
- justify-content:flex-start;
134
- min-width:0;
135
- }
123
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
124
+ display:block;
125
+ flex:1;
126
+ overflow:hidden;
127
+ text-overflow:ellipsis;
128
+ text-align:left;
129
+ white-space:nowrap;
130
+ }
136
131
 
137
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
138
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
139
- .tds-page-header nav[slot="navigation"] ul,
140
- .tds-page-header nav.tds-page-header__nav ul{
141
- display:flex;
142
- gap:var(--tds-page-header-nav-gap);
143
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
144
- margin:0 0 -1px;
145
- overflow:auto;
146
- list-style:none;
147
- background:var(--tds-page-header-nav-background);
148
- }
132
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
133
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
134
+ color:var(--t-text-color-headline);
135
+ text-decoration:none;
136
+ }
149
137
 
150
- .tds-page-header nav[slot="navigation"] a,
151
- .tds-page-header nav[slot="navigation"] button,
152
- .tds-page-header nav.tds-page-header__nav a,
153
- .tds-page-header nav.tds-page-header__nav button{
154
- position:relative;
155
- display:inline-flex;
156
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
157
- font-size:var(--t-font-size-sm);
158
- line-height:22px;
159
- color:var(--tds-page-header-nav-item-color);
160
- white-space:nowrap;
161
- text-decoration:none;
162
- -webkit-appearance:none;
163
- -moz-appearance:none;
164
- appearance:none;
165
- cursor:pointer;
166
- outline-offset:-2px;
167
- background-color:var(--tds-page-header-nav-item-background-color);
168
- background-clip:padding-box;
169
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
170
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
171
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
172
- }
138
+ :is(.tds-sidenav-item :is(a,button)):active{
139
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
140
+ }
173
141
 
174
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
175
- position:relative;
176
- }
142
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
143
+ overflow:hidden;
144
+ color:var(--tds-sidenav-item-icon-color);
145
+ }
177
146
 
178
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
179
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
180
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
181
- }
147
+ :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{
148
+ display:block;
149
+ width:var(--tds-sidenav-item-icon-size);
150
+ height:var(--tds-sidenav-item-icon-size);
151
+ }
182
152
 
183
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
184
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
185
- position:absolute;
186
- top:-5px;
187
- right:-2px;
188
- width:10px;
189
- height:10px;
190
- content:"";
191
- background:var(--tds-page-header-nav-item-indicator-color);
192
- border-radius:50%;
193
- }
153
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
154
+ --tds-sidenav-indent:19px;
155
+ }
194
156
 
195
- @media (prefers-reduced-motion: no-preference){
196
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
197
- animation:indicator-pulse 1.25s ease infinite;
157
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
158
+ visibility:visible;
159
+ block-size:auto;
160
+ opacity:1;
161
+ }
162
+
163
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
164
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
165
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
166
+
167
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
168
+ font-weight:var(--t-font-weight-semibold);
198
169
  }
199
- }
200
170
 
201
- .tds-page-header nav[slot="navigation"] a.selected,
202
- .tds-page-header nav[slot="navigation"] button.selected,
203
- .tds-page-header nav.tds-page-header__nav a.selected,
204
- .tds-page-header nav.tds-page-header__nav button.selected{
205
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
206
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
207
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
208
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
209
- }
171
+ .tds-sidenav-item:has(.tds-sidenav-section){
172
+ display:flex;
173
+ flex-direction:column;
174
+ gap:var(--t-spacing-half);
175
+ }
210
176
 
211
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
212
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
213
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
214
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
215
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
216
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
217
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
218
- }
177
+ .tds-sidenav-item .tds-sidenav-section-list{
178
+ --tds-sidenav-item-depth:1;
179
+ gap:0;
180
+ }
219
181
 
220
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
221
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
222
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
223
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
224
- border-color:var(--tds-page-header-nav-item-border-color-active);
225
- background-color:var(--tds-page-header-nav-item-background-color-active);
226
- }
182
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
183
+ visibility:hidden;
184
+ block-size:0;
185
+ overflow-y:clip;
186
+ opacity:0;
187
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
188
+ }
227
189
 
228
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
229
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
230
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
231
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
232
- color:var(--tds-page-header-nav-item-color-disabled);
233
- cursor:not-allowed;
234
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
235
- opacity:1;
190
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
191
+ --tds-sidenav-item-depth:2;
192
+ }
193
+
194
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
195
+ min-height:var(--t-element-size-2xl);
196
+ padding-block:9px;
197
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
198
+ line-height:1;
199
+ background-color:transparent;
200
+ }
201
+
202
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
203
+ position:absolute;
204
+ top:0;
205
+ bottom:0;
206
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
207
+ width:2px;
208
+ content:"";
209
+ background-color:var(--tds-sidenav-item-nested-border-color);
210
+ transition:var(--tds-sidenav-item-transition);
211
+ }
212
+
213
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
214
+ position:absolute;
215
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
216
+ z-index:-1;
217
+ height:100%;
218
+ content:"";
219
+ background-color:var(--tds-sidenav-item-nested-background);
220
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
221
+ transition:var(--tds-sidenav-item-transition);
222
+ }
223
+
224
+ :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)){
225
+ display:block;
226
+ text-align:left;
227
+ white-space:normal;
228
+ }
229
+
230
+ :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{
231
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
232
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
233
+ }
234
+
235
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
236
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
237
+ }
238
+
239
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
240
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
241
+ font-weight:var(--t-font-weight-medium);
242
+ }
243
+
244
+ .tds-sidenav-responsive-header{
245
+ display:flex;
246
+ gap:var(--t-spacing-2);
247
+ align-items:center;
248
+ width:100%;
236
249
  }
237
250
 
238
- @media (min-width: 960px){
239
- .tds-page-header__primary{
240
- flex:1 1 max-content;
241
- width:auto;
242
- min-width:0;
243
- max-width:100%;
251
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
252
+ order:0;
244
253
  }
245
254
 
246
- .tds-page-header__title-bar,
247
- .tds-page-header--profile .tds-page-header__title-bar{
248
- flex-flow:row nowrap;
249
- row-gap:12px;
250
- align-items:flex-start;
255
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
256
+ flex:1;
257
+ order:1;
258
+ margin:0;
259
+ font-size:var(--t-font-size-lg);
260
+ font-weight:var(--t-font-weight-medium);
261
+ color:var(--t-text-color-headline);
251
262
  }
252
263
 
253
- .tds-page-header [slot="actions"],
254
- .tds-page-header .tds-page-header__actions{
255
- width:auto;
264
+ @media (max-width: 719px){
265
+ .tds-sidenav-collapse{
266
+ z-index:10001;
267
+ display:none;
268
+ max-width:min(448px, calc(100vw - 48px));
269
+ padding:0;
270
+ margin:12px 0;
271
+ overflow:hidden;
272
+ outline:0;
273
+ background:var(--t-surface-color-card);
274
+ border:0;
275
+ border-radius:6px;
276
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
277
+ will-change:transform;
278
+ position-area:bottom span-right;
256
279
  }
257
280
 
258
- .has-multi-actions.tds-page-header [slot="actions"],
259
- .has-multi-actions.tds-page-header .tds-page-header__actions{
260
- justify-content:flex-end;
281
+ .tds-sidenav-scroll-container{
282
+ --webkit-overflow-scrolling:touch;
283
+ display:block;
284
+ width:100%;
285
+ height:-moz-fit-content;
286
+ height:fit-content;
287
+ padding:var(--t-spacing-2);
288
+ overflow-y:auto;
261
289
  }
262
- }
263
-
264
- .tds-page-header-phone,
265
- .tds-page-header-email{
266
- color:var(--tds-page-header-color);
267
- white-space:nowrap;
268
- }
269
-
270
- .tds-page-header-email{
271
- max-width:100%;
272
- overflow:hidden;
273
- text-overflow:ellipsis;
274
- }
275
290
 
276
- @keyframes indicator-pulse{
277
- 0%{
278
- opacity:.3;
279
- transform:scale(.9);
291
+ .tds-sidenav-item :is(a, button) :is(.prefix){
292
+ display:none;
293
+ }
294
+ @supports selector(:popover-open){
295
+ .tds-sidenav-collapse:popover-open{
296
+ display:flex;
297
+ }
280
298
  }
299
+ @supports not selector(:popover-open){
300
+ .tds-sidenav-collapse.\:popover-open{
301
+ display:flex;
302
+ }
303
+ }
304
+ }
281
305
 
282
- 100%{
283
- opacity:0;
284
- transform:scale(1.75);
306
+ @media (min-width: 720px){
307
+ .tds-sidenav-responsive-header{
308
+ display:none;
285
309
  }
286
310
  }
287
311
 
312
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
313
+ display:none;
314
+ }
288
315
 
289
- @media (prefers-reduced-motion: no-preference){
316
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
317
+ display:block;
318
+ }
290
319
 
291
- :root{
292
- interpolate-size:allow-keywords;
293
- }
320
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
321
+ display:flex;
322
+ flex-direction:column;
323
+ }
324
+
325
+ @layer t-critical{
326
+ tds-page-header:not(.hydrated){
327
+ display:none;
294
328
  }
329
+ }
295
330
 
296
- @layer tds-component{
297
- tds-sidenav, .tds-sidenav{
298
- --tds-sidenav-indent:12px;
299
- --tds-sidenav-item-depth:0;
331
+ @layer t-component{
332
+ .tds-page-header{
333
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
334
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
335
+ --tds-page-header-color:var(--t-text-color);
336
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
337
+ --tds-page-header-headline-color:var(--t-text-color-headline);
338
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
339
+ --tds-page-header-padding-x:var(--t-spacing-2);
340
+ --tds-page-header-padding-y:var(--t-spacing-2);
341
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
342
+ --tds-page-header-nav-gap:var(--t-spacing-1);
343
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
344
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
345
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
346
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
347
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
348
+ --tds-page-header-nav-item-border-width:1px;
300
349
 
301
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
350
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
351
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
302
352
 
303
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
304
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
305
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
306
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
353
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
354
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
355
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
307
356
 
308
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
309
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
310
- --tds-sidenav-item-nested-background-selected:transparent;
357
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
358
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
311
359
 
312
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
313
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
314
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
360
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
361
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
362
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
315
363
 
316
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
317
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
364
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
365
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
366
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
367
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
368
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
318
369
  }
319
370
 
320
- .tds-sidenav--theme-gray{
321
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
322
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
323
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
324
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
325
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
371
+ .tds-page-header--profile{
372
+ --tds-page-header-padding-y:20px;
326
373
  }
327
- }
328
374
 
329
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
330
- display:flex;
375
+ @supports (color: light-dark(#fff, #000)){
376
+ .tds-page-header{
377
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
378
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
379
+ }
331
380
  }
332
381
 
333
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
334
- flex-direction:column;
335
- gap:var(--t-spacing-half);
336
- width:100%;
382
+ @media (min-width: 600px){
383
+ .tds-page-header{
384
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
385
+ --tds-page-header-color:var(--t-text-color-secondary);
386
+ --tds-page-header-bottom-border-color:var(--t-border-color);
387
+ --tds-page-header-padding-x:var(--t-spacing-3);
388
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
389
+ --tds-page-header-nav-gap:var(--t-spacing-half);
390
+ --tds-page-header-nav-background:transparent;
391
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
392
+ --tds-page-header-nav-item-border-width:1px;
393
+ --tds-page-header-nav-item-color:var(--t-text-color);
394
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
395
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
396
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
397
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
398
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
399
+ }
337
400
  }
338
-
339
- .tds-sidenav-section-list{
340
- width:100%;
341
- padding:0;
342
- margin:0;
343
- list-style:none;
344
401
  }
345
402
 
346
- .tds-sidenav-section-header{
403
+ .tds-page-header{
347
404
  display:flex;
348
- align-items:baseline;
349
- justify-content:space-between;
350
- padding-top:var(--t-spacing-2);
405
+ flex-direction:column;
406
+ padding-top:var(--tds-page-header-padding-y);
407
+ color:var(--tds-page-header-color);
408
+ background:var(--tds-page-header-background-color);
409
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
351
410
  }
352
411
 
353
- .tds-sidenav-section-header h2{
354
- margin:0;
355
- font-size:var(--t-font-size-sm);
356
- font-weight:var(--t-font-weight-semibold);
357
- line-height:1.35;
358
- color:var(--t-text-color-secondary);
359
- text-transform:uppercase;
360
- }
361
-
362
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
363
- padding-top:0;
364
- }
412
+ .tds-page-header:not(.has-nav){
413
+ padding-bottom:var(--tds-page-header-padding-y);
414
+ }
365
415
 
366
- .tds-sidenav-section-header [slot="label-actions"]{
367
- display:flex;
368
- gap:var(--t-spacing-half);
369
- align-items:center;
370
- }
416
+ .tds-page-header.inactive{
417
+ background:var(--tds-page-header-background-color-inactive);
418
+ }
371
419
 
372
- .tds-sidenav-section [slot="section-actions"]{
420
+ .tds-page-header__title-bar{
373
421
  display:flex;
374
- gap:12px;
422
+ flex-direction:column;
423
+ gap:var(--t-spacing-2) var(--t-spacing-1);
424
+ align-items:flex-start;
425
+ justify-content:space-between;
426
+ padding:0 var(--tds-page-header-padding-x);
427
+ }
428
+
429
+ .tds-page-header--profile > .tds-page-header__title-bar{
375
430
  align-items:center;
376
- min-height:42px;
377
- padding:var(--t-spacing-1) 0;
378
431
  }
379
432
 
380
- .tds-sidenav-section-list,
381
- .tds-sidenav-item{
433
+ .tds-page-header__primary{
382
434
  width:100%;
383
- padding:0;
384
- margin:0;
385
435
  }
386
436
 
387
- .tds-sidenav-item :is(a,button){
388
- position:relative;
389
- display:flex;
390
- gap:12px;
391
- align-items:center;
392
- width:100%;
393
- padding:12px;
394
- overflow:hidden;
395
- font-size:var(--t-font-size-sm);
396
- line-height:18px;
397
- color:var(--t-text-color-headline);
398
- white-space:nowrap;
399
- text-decoration:none;
400
- -webkit-appearance:none;
401
- -moz-appearance:none;
402
- appearance:none;
403
- cursor:pointer;
404
- background-color:var(--tds-sidenav-item-background, transparent);
405
- border:0;
406
- border-radius:var(--t-border-radius);
407
- transition:var(--tds-sidenav-item-transition);
408
- }
409
-
410
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
411
- display:block;
412
- flex:1;
413
- overflow:hidden;
414
- text-overflow:ellipsis;
415
- text-align:left;
416
- white-space:nowrap;
417
- }
418
-
419
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
420
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
421
- color:var(--t-text-color-headline);
422
- text-decoration:none;
423
- }
424
-
425
- :is(.tds-sidenav-item :is(a,button)):active{
426
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
427
- }
428
-
429
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
430
- overflow:hidden;
431
- color:var(--tds-sidenav-item-icon-color);
432
- }
433
-
434
- :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{
435
- display:block;
436
- width:var(--tds-sidenav-item-icon-size);
437
- height:var(--tds-sidenav-item-icon-size);
438
- }
439
-
440
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
441
- --tds-sidenav-indent:19px;
442
- }
443
-
444
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
445
- visibility:visible;
446
- block-size:auto;
447
- opacity:1;
448
- }
449
-
450
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
451
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
452
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
453
-
454
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
455
- font-weight:var(--t-font-weight-semibold);
456
- }
457
-
458
- .tds-sidenav-item:has(.tds-sidenav-section){
459
- display:flex;
460
- flex-direction:column;
461
- gap:var(--t-spacing-half);
462
- }
437
+ .tds-page-header__primary h1{
438
+ margin:0;
439
+ font-size:var(--tds-page-header-headline-font-size);
440
+ font-weight:var(--t-font-weight-normal);
441
+ line-height:32px;
442
+ color:var(--tds-page-header-headline-color);
443
+ overflow-wrap:break-word;
444
+ }
463
445
 
464
- .tds-sidenav-item .tds-sidenav-section-list{
465
- --tds-sidenav-item-depth:1;
466
- gap:0;
467
- }
446
+ .tds-page-header [slot="actions"],
447
+ .tds-page-header .tds-page-header__actions{
448
+ width:100%;
449
+ }
468
450
 
469
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
470
- visibility:hidden;
471
- block-size:0;
472
- overflow-y:clip;
473
- opacity:0;
474
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
475
- }
451
+ .has-multi-actions.tds-page-header [slot="actions"],
452
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
453
+ display:flex;
454
+ flex-flow:row wrap;
455
+ gap:var(--t-spacing-half) var(--t-spacing-1);
456
+ align-items:flex-start;
457
+ justify-content:flex-start;
458
+ min-width:0;
459
+ }
476
460
 
477
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
478
- --tds-sidenav-item-depth:2;
479
- }
461
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
462
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
463
+ .tds-page-header nav[slot="navigation"] ul,
464
+ .tds-page-header nav.tds-page-header__nav ul{
465
+ display:flex;
466
+ gap:var(--tds-page-header-nav-gap);
467
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
468
+ margin:0 0 -1px;
469
+ overflow:auto;
470
+ list-style:none;
471
+ background:var(--tds-page-header-nav-background);
472
+ }
480
473
 
481
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
482
- min-height:var(--t-element-size-2xl);
483
- padding-block:9px;
484
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
485
- line-height:1;
486
- background-color:transparent;
487
- }
474
+ .tds-page-header nav[slot="navigation"] a,
475
+ .tds-page-header nav[slot="navigation"] button,
476
+ .tds-page-header nav.tds-page-header__nav a,
477
+ .tds-page-header nav.tds-page-header__nav button{
478
+ position:relative;
479
+ display:inline-flex;
480
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
481
+ font-size:var(--t-font-size-sm);
482
+ line-height:22px;
483
+ color:var(--tds-page-header-nav-item-color);
484
+ white-space:nowrap;
485
+ text-decoration:none;
486
+ -webkit-appearance:none;
487
+ -moz-appearance:none;
488
+ appearance:none;
489
+ cursor:pointer;
490
+ outline-offset:-2px;
491
+ background-color:var(--tds-page-header-nav-item-background-color);
492
+ background-clip:padding-box;
493
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
494
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
495
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
496
+ }
488
497
 
489
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
490
- position:absolute;
491
- top:0;
492
- bottom:0;
493
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
494
- width:2px;
495
- content:"";
496
- background-color:var(--tds-sidenav-item-nested-border-color);
497
- transition:var(--tds-sidenav-item-transition);
498
- }
498
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
499
+ position:relative;
500
+ }
499
501
 
500
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
501
- position:absolute;
502
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
503
- z-index:-1;
504
- height:100%;
505
- content:"";
506
- background-color:var(--tds-sidenav-item-nested-background);
507
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
508
- transition:var(--tds-sidenav-item-transition);
509
- }
502
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
503
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
504
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
505
+ }
510
506
 
511
- :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)){
512
- display:block;
513
- text-align:left;
514
- white-space:normal;
515
- }
507
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
508
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
509
+ position:absolute;
510
+ top:-5px;
511
+ right:-2px;
512
+ width:10px;
513
+ height:10px;
514
+ content:"";
515
+ background:var(--tds-page-header-nav-item-indicator-color);
516
+ border-radius:50%;
517
+ }
516
518
 
517
- :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{
518
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
519
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
520
- }
519
+ @media (prefers-reduced-motion: no-preference){
520
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
521
+ animation:indicator-pulse 1.25s ease infinite;
522
+ }
523
+ }
521
524
 
522
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
523
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
524
- }
525
+ .tds-page-header nav[slot="navigation"] a.selected,
526
+ .tds-page-header nav[slot="navigation"] button.selected,
527
+ .tds-page-header nav.tds-page-header__nav a.selected,
528
+ .tds-page-header nav.tds-page-header__nav button.selected{
529
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
530
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
531
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
532
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
533
+ }
525
534
 
526
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
527
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
528
- font-weight:var(--t-font-weight-medium);
529
- }
535
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
536
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
537
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
538
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
539
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
540
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
541
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
542
+ }
530
543
 
531
- .tds-sidenav-responsive-header{
532
- display:flex;
533
- gap:var(--t-spacing-2);
534
- align-items:center;
535
- width:100%;
544
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
545
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
546
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
547
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
548
+ border-color:var(--tds-page-header-nav-item-border-color-active);
549
+ background-color:var(--tds-page-header-nav-item-background-color-active);
536
550
  }
537
551
 
538
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
539
- order:0;
540
- }
552
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
553
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
554
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
555
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
556
+ color:var(--tds-page-header-nav-item-color-disabled);
557
+ cursor:not-allowed;
558
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
559
+ opacity:1;
560
+ }
541
561
 
542
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
543
- flex:1;
544
- order:1;
545
- margin:0;
546
- font-size:var(--t-font-size-lg);
547
- font-weight:var(--t-font-weight-medium);
548
- color:var(--t-text-color-headline);
562
+ @media (min-width: 960px){
563
+ .tds-page-header__primary{
564
+ flex:1 1 max-content;
565
+ width:auto;
566
+ min-width:0;
567
+ max-width:100%;
549
568
  }
550
569
 
551
- @media (max-width: 719px){
552
- .tds-sidenav-collapse{
553
- z-index:10001;
554
- display:none;
555
- max-width:min(448px, calc(100vw - 48px));
556
- padding:0;
557
- margin:12px 0;
558
- overflow:hidden;
559
- outline:0;
560
- background:var(--t-surface-color-card);
561
- border:0;
562
- border-radius:6px;
563
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
564
- will-change:transform;
565
- position-area:bottom span-right;
570
+ .tds-page-header__title-bar,
571
+ .tds-page-header--profile .tds-page-header__title-bar{
572
+ flex-flow:row nowrap;
573
+ row-gap:12px;
574
+ align-items:flex-start;
566
575
  }
567
576
 
568
- .tds-sidenav-scroll-container{
569
- --webkit-overflow-scrolling:touch;
570
- display:block;
571
- width:100%;
572
- height:-moz-fit-content;
573
- height:fit-content;
574
- padding:var(--t-spacing-2);
575
- overflow-y:auto;
577
+ .tds-page-header [slot="actions"],
578
+ .tds-page-header .tds-page-header__actions{
579
+ width:auto;
576
580
  }
577
581
 
578
- .tds-sidenav-item :is(a, button) :is(.prefix){
579
- display:none;
580
- }
581
- @supports selector(:popover-open){
582
- .tds-sidenav-collapse:popover-open{
583
- display:flex;
584
- }
585
- }
586
- @supports not selector(:popover-open){
587
- .tds-sidenav-collapse.\:popover-open{
588
- display:flex;
589
- }
582
+ .has-multi-actions.tds-page-header [slot="actions"],
583
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
584
+ justify-content:flex-end;
590
585
  }
591
586
  }
592
587
 
593
- @media (min-width: 720px){
594
- .tds-sidenav-responsive-header{
595
- display:none;
596
- }
588
+ .tds-page-header-phone,
589
+ .tds-page-header-email{
590
+ color:var(--tds-page-header-color);
591
+ white-space:nowrap;
597
592
  }
598
593
 
599
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
600
- display:none;
601
- }
594
+ .tds-page-header-email{
595
+ max-width:100%;
596
+ overflow:hidden;
597
+ text-overflow:ellipsis;
598
+ }
602
599
 
603
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
604
- display:block;
605
- }
600
+ @keyframes indicator-pulse{
601
+ 0%{
602
+ opacity:.3;
603
+ transform:scale(.9);
604
+ }
606
605
 
607
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
608
- display:flex;
609
- flex-direction:column;
610
- }
606
+ 100%{
607
+ opacity:0;
608
+ transform:scale(1.75);
609
+ }
610
+ }
611
611
 
612
612
  .tds-loading-spinner{
613
613
  --tds-loading-spinner-size:1.25em;
@@ -2074,7 +2074,6 @@ a[class="tds-btn"]{
2074
2074
 
2075
2075
  .tds-checkbox{
2076
2076
  --tds-checkbox-font-size:var(--t-font-size-md);
2077
- --tds-checkbox-column-gap:var(--t-spacing-1);
2078
2077
  --tds-checkbox-cursor:pointer;
2079
2078
  --tds-checkbox-line-height:1.4;
2080
2079
  --tds-checkbox-transition-property:background-color, border-color;
@@ -2100,7 +2099,7 @@ a[class="tds-btn"]{
2100
2099
  display:inline-grid;
2101
2100
  grid-template-areas:"checkbox label" ". description";
2102
2101
  grid-template-columns:auto 1fr;
2103
- gap:var(--t-spacing-fourth) var(--tds-checkbox-column-gap);
2102
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
2104
2103
  line-height:var(--tds-checkbox-line-height);
2105
2104
  cursor:var(--tds-checkbox-cursor);
2106
2105
  -webkit-user-select:none;
@@ -2240,7 +2239,7 @@ a[class="tds-btn"]{
2240
2239
  display:flex;
2241
2240
  grid-area:description;
2242
2241
  gap:4px;
2243
- align-items:center;
2242
+ align-items:flex-start;
2244
2243
  margin:0;
2245
2244
  margin-top:var(--t-spacing-fourth);
2246
2245
  font-size:var(--tds-checkbox-description-font-size);
@@ -2251,10 +2250,12 @@ a[class="tds-btn"]{
2251
2250
 
2252
2251
  .tds-checkbox-description-invalid-icon{
2253
2252
  display:var(--tds-checkbox-description-invalid-icon-display);
2253
+ flex-shrink:0;
2254
+ margin-top:calc((var(--tds-checkbox-description-line-height) - 1) * .5em);
2255
+ line-height:var(--tds-checkbox-description-line-height);
2254
2256
  }
2255
2257
 
2256
2258
  .tds-checkbox--sm{
2257
- --tds-checkbox-column-gap:6px;
2258
2259
  --tds-checkbox-line-height:1.35;
2259
2260
  --tds-checkbox-input-size:var(--t-element-size-sm);
2260
2261
  --tds-checkbox-font-size:var(--t-font-size-sm);