@planningcenter/tapestry 3.0.1 → 3.1.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/select/SelectOptions.d.ts.map +1 -1
  2. package/dist/components/select/SelectPopover.d.ts +5 -4
  3. package/dist/components/select/SelectPopover.d.ts.map +1 -1
  4. package/dist/reactRender.css +608 -608
  5. package/dist/reactRender.css.map +1 -1
  6. package/dist/reactRenderLegacy.css +608 -608
  7. package/dist/reactRenderLegacy.css.map +1 -1
  8. package/dist/utilities/keyboardUtils.d.ts +27 -0
  9. package/dist/utilities/keyboardUtils.d.ts.map +1 -0
  10. package/dist/utilities/selectUtils.d.ts +1 -0
  11. package/dist/utilities/selectUtils.d.ts.map +1 -1
  12. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -1,327 +1,289 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
7
4
  }
5
+ }
8
6
 
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
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;
14
25
 
15
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
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);
16
28
 
17
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
18
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
19
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
20
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
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);
21
32
 
22
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
23
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
24
- --tds-sidenav-item-nested-background-selected:transparent;
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);
25
35
 
26
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
27
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
28
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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);
29
39
 
30
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
31
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
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);
32
45
  }
33
46
 
34
- .tds-sidenav--theme-gray{
35
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
36
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
37
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
38
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
39
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
40
49
  }
41
- }
42
50
 
43
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
44
- display:flex;
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
+ }
45
56
  }
46
57
 
47
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
48
- flex-direction:column;
49
- gap:var(--t-spacing-half);
50
- width:100%;
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
+ }
51
76
  }
52
-
53
- .tds-sidenav-section-list{
54
- width:100%;
55
- padding:0;
56
- margin:0;
57
- list-style:none;
58
77
  }
59
78
 
60
- .tds-sidenav-section-header{
79
+ .tds-page-header{
61
80
  display:flex;
62
- align-items:baseline;
63
- justify-content:space-between;
64
- padding-top:var(--t-spacing-2);
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);
65
86
  }
66
87
 
67
- .tds-sidenav-section-header h2{
68
- margin:0;
69
- font-size:var(--t-font-size-sm);
70
- font-weight:var(--t-font-weight-semibold);
71
- line-height:1.35;
72
- color:var(--t-text-color-secondary);
73
- text-transform:uppercase;
74
- }
75
-
76
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
77
- padding-top:0;
78
- }
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
90
+ }
79
91
 
80
- .tds-sidenav-section-header [slot="label-actions"]{
81
- display:flex;
82
- gap:var(--t-spacing-half);
83
- align-items:center;
84
- }
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
94
+ }
85
95
 
86
- .tds-sidenav-section [slot="section-actions"]{
96
+ .tds-page-header__title-bar{
87
97
  display:flex;
88
- gap:12px;
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
+ }
104
+
105
+ .tds-page-header--profile > .tds-page-header__title-bar{
89
106
  align-items:center;
90
- min-height:42px;
91
- padding:var(--t-spacing-1) 0;
92
107
  }
93
108
 
94
- .tds-sidenav-section-list,
95
- .tds-sidenav-item{
109
+ .tds-page-header__primary{
96
110
  width:100%;
97
- padding:0;
111
+ }
112
+
113
+ .tds-page-header__primary h1{
98
114
  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;
99
120
  }
100
121
 
101
- .tds-sidenav-item :is(a,button){
102
- position:relative;
103
- display:flex;
104
- gap:12px;
105
- align-items:center;
106
- width:100%;
107
- padding:12px;
108
- overflow:hidden;
109
- font-size:var(--t-font-size-sm);
110
- line-height:18px;
111
- color:var(--t-text-color-headline);
112
- white-space:nowrap;
113
- text-decoration:none;
114
- -webkit-appearance:none;
115
- -moz-appearance:none;
116
- appearance:none;
117
- cursor:pointer;
118
- background-color:var(--tds-sidenav-item-background, transparent);
119
- border:0;
120
- border-radius:var(--t-border-radius);
121
- transition:var(--tds-sidenav-item-transition);
122
- }
122
+ .tds-page-header [slot="actions"],
123
+ .tds-page-header .tds-page-header__actions{
124
+ width:100%;
125
+ }
123
126
 
124
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
125
- display:block;
126
- flex:1;
127
- overflow:hidden;
128
- text-overflow:ellipsis;
129
- text-align:left;
130
- white-space:nowrap;
131
- }
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
+ }
132
136
 
133
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
134
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
135
- color:var(--t-text-color-headline);
136
- text-decoration:none;
137
- }
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
+ }
138
149
 
139
- :is(.tds-sidenav-item :is(a,button)):active{
140
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
141
- }
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
+ }
142
173
 
143
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
144
- overflow:hidden;
145
- color:var(--tds-sidenav-item-icon-color);
146
- }
174
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
175
+ position:relative;
176
+ }
147
177
 
148
- :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{
149
- display:block;
150
- width:var(--tds-sidenav-item-icon-size);
151
- height:var(--tds-sidenav-item-icon-size);
152
- }
153
-
154
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
155
- --tds-sidenav-indent:19px;
156
- }
157
-
158
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
159
- visibility:visible;
160
- block-size:auto;
161
- opacity:1;
162
- }
163
-
164
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
165
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
166
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
167
-
168
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
169
- font-weight:var(--t-font-weight-semibold);
170
- }
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
+ }
171
182
 
172
- .tds-sidenav-item:has(.tds-sidenav-section){
173
- display:flex;
174
- flex-direction:column;
175
- gap:var(--t-spacing-half);
176
- }
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
+ }
177
194
 
178
- .tds-sidenav-item .tds-sidenav-section-list{
179
- --tds-sidenav-item-depth:1;
180
- gap:0;
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;
181
198
  }
199
+ }
182
200
 
183
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
184
- visibility:hidden;
185
- block-size:0;
186
- overflow-y:clip;
187
- opacity:0;
188
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
189
- }
190
-
191
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
192
- --tds-sidenav-item-depth:2;
193
- }
194
-
195
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
196
- min-height:var(--t-element-size-2xl);
197
- padding-block:9px;
198
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
199
- line-height:1;
200
- background-color:transparent;
201
- }
202
-
203
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
204
- position:absolute;
205
- top:0;
206
- bottom:0;
207
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
208
- width:2px;
209
- content:"";
210
- background-color:var(--tds-sidenav-item-nested-border-color);
211
- transition:var(--tds-sidenav-item-transition);
212
- }
213
-
214
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
215
- position:absolute;
216
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
217
- z-index:-1;
218
- height:100%;
219
- content:"";
220
- background-color:var(--tds-sidenav-item-nested-background);
221
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
222
- transition:var(--tds-sidenav-item-transition);
223
- }
224
-
225
- :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)){
226
- display:block;
227
- text-align:left;
228
- white-space:normal;
229
- }
230
-
231
- :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{
232
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
233
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
234
- }
235
-
236
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
237
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
238
- }
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
+ }
239
210
 
240
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
241
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
242
- font-weight:var(--t-font-weight-medium);
243
- }
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
+ }
244
219
 
245
- .tds-sidenav-responsive-header{
246
- display:flex;
247
- gap:var(--t-spacing-2);
248
- align-items:center;
249
- width:100%;
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
+ background-color:var(--tds-page-header-nav-item-background-color-active);
225
+ border-color:var(--tds-page-header-nav-item-border-color-active);
250
226
  }
251
227
 
252
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
253
- order:0;
254
- }
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;
236
+ }
255
237
 
256
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
257
- flex:1;
258
- order:1;
259
- margin:0;
260
- font-size:var(--t-font-size-lg);
261
- font-weight:var(--t-font-weight-medium);
262
- color:var(--t-text-color-headline);
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%;
263
244
  }
264
245
 
265
- @media (max-width: 719px){
266
- .tds-sidenav-collapse{
267
- z-index:10001;
268
- display:none;
269
- max-width:min(448px, calc(100vw - 48px));
270
- padding:0;
271
- margin:12px 0;
272
- overflow:hidden;
273
- outline:0;
274
- background:var(--t-surface-color-card);
275
- border:0;
276
- border-radius:6px;
277
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
278
- will-change:transform;
279
- position-area:bottom span-right;
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;
280
251
  }
281
252
 
282
- .tds-sidenav-scroll-container{
283
- --webkit-overflow-scrolling:touch;
284
- display:block;
285
- width:100%;
286
- height:-moz-fit-content;
287
- height:fit-content;
288
- padding:var(--t-spacing-2);
289
- overflow-y:auto;
253
+ .tds-page-header [slot="actions"],
254
+ .tds-page-header .tds-page-header__actions{
255
+ width:auto;
290
256
  }
291
257
 
292
- .tds-sidenav-item :is(a, button) :is(.prefix){
293
- display:none;
294
- }
295
- @supports selector(:popover-open){
296
- .tds-sidenav-collapse:popover-open{
297
- display:flex;
298
- }
299
- }
300
- @supports not selector(:popover-open){
301
- .tds-sidenav-collapse.\:popover-open{
302
- display:flex;
303
- }
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;
304
261
  }
305
262
  }
306
263
 
307
- @media (min-width: 720px){
308
- .tds-sidenav-responsive-header{
309
- display:none;
310
- }
264
+ .tds-page-header-phone,
265
+ .tds-page-header-email{
266
+ color:var(--tds-page-header-color);
267
+ white-space:nowrap;
311
268
  }
312
269
 
313
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
314
- display:none;
315
- }
270
+ .tds-page-header-email{
271
+ max-width:100%;
272
+ overflow:hidden;
273
+ text-overflow:ellipsis;
274
+ }
316
275
 
317
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
318
- display:block;
319
- }
276
+ @keyframes indicator-pulse{
277
+ 0%{
278
+ opacity:.3;
279
+ transform:scale(.9);
280
+ }
320
281
 
321
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
322
- display:flex;
323
- flex-direction:column;
324
- }
282
+ 100%{
283
+ opacity:0;
284
+ transform:scale(1.75);
285
+ }
286
+ }
325
287
 
326
288
  .tds-radio{
327
289
  --tds-radio-font-size:var(--t-font-size-md);
@@ -455,292 +417,330 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
455
417
  --tds-radio-description-line-height:1.3;
456
418
  }
457
419
 
458
- @layer t-critical{
459
- tds-page-header:not(.hydrated){
460
- display:none;
461
- }
420
+
421
+ @media (prefers-reduced-motion: no-preference){
422
+
423
+ :root{
424
+ interpolate-size:allow-keywords;
462
425
  }
426
+ }
463
427
 
464
- @layer t-component{
465
- .tds-page-header{
466
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
467
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
468
- --tds-page-header-color:var(--t-text-color);
469
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
470
- --tds-page-header-headline-color:var(--t-text-color-headline);
471
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
472
- --tds-page-header-padding-x:var(--t-spacing-2);
473
- --tds-page-header-padding-y:var(--t-spacing-2);
474
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
475
- --tds-page-header-nav-gap:var(--t-spacing-1);
476
- --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%);
477
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
478
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
479
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
480
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
481
- --tds-page-header-nav-item-border-width:1px;
428
+ @layer tds-component{
429
+ tds-sidenav,
430
+ .tds-sidenav{
431
+ --tds-sidenav-indent:12px;
432
+ --tds-sidenav-item-depth:0;
482
433
 
483
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
484
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
434
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
485
435
 
486
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
487
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
488
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
436
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
437
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
438
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
439
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
489
440
 
490
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
491
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
441
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
442
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
443
+ --tds-sidenav-item-nested-background-selected:transparent;
492
444
 
493
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
494
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
495
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
445
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
446
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
447
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
496
448
 
497
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
498
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
499
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
500
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
501
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
449
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
450
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
502
451
  }
503
452
 
504
- .tds-page-header--profile{
505
- --tds-page-header-padding-y:20px;
453
+ .tds-sidenav--theme-gray{
454
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
455
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
456
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
457
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
458
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
506
459
  }
460
+ }
507
461
 
508
- @supports (color: light-dark(#fff, #000)){
509
- .tds-page-header{
510
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
511
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
512
- }
462
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
463
+ display:flex;
513
464
  }
514
465
 
515
- @media (min-width: 600px){
516
- .tds-page-header{
517
- --tds-page-header-background-color:var(--t-surface-color-canvas);
518
- --tds-page-header-color:var(--t-text-color-secondary);
519
- --tds-page-header-bottom-border-color:var(--t-border-color);
520
- --tds-page-header-padding-x:var(--t-spacing-3);
521
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
522
- --tds-page-header-nav-gap:var(--t-spacing-half);
523
- --tds-page-header-nav-background:transparent;
524
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
525
- --tds-page-header-nav-item-border-width:1px;
526
- --tds-page-header-nav-item-color:var(--t-text-color);
527
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
528
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
529
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
530
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
531
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
532
- }
466
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
467
+ flex-direction:column;
468
+ gap:var(--t-spacing-half);
469
+ width:100%;
533
470
  }
471
+
472
+ .tds-sidenav-section-list{
473
+ width:100%;
474
+ padding:0;
475
+ margin:0;
476
+ list-style:none;
534
477
  }
535
478
 
536
- .tds-page-header{
479
+ .tds-sidenav-section-header{
537
480
  display:flex;
538
- flex-direction:column;
539
- padding-top:var(--tds-page-header-padding-y);
540
- color:var(--tds-page-header-color);
541
- background:var(--tds-page-header-background-color);
542
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
481
+ align-items:baseline;
482
+ justify-content:space-between;
483
+ padding-top:var(--t-spacing-2);
543
484
  }
544
485
 
545
- .tds-page-header:not(.has-nav){
546
- padding-bottom:var(--tds-page-header-padding-y);
547
- }
486
+ .tds-sidenav-section-header h2{
487
+ margin:0;
488
+ font-size:var(--t-font-size-sm);
489
+ font-weight:var(--t-font-weight-semibold);
490
+ line-height:1.35;
491
+ color:var(--t-text-color-secondary);
492
+ text-transform:uppercase;
493
+ }
548
494
 
549
- .tds-page-header.inactive{
550
- background:var(--tds-page-header-background-color-inactive);
551
- }
495
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
496
+ padding-top:0;
497
+ }
552
498
 
553
- .tds-page-header__title-bar{
554
- display:flex;
555
- flex-direction:column;
556
- gap:var(--t-spacing-2) var(--t-spacing-1);
557
- align-items:flex-start;
558
- justify-content:space-between;
559
- padding:0 var(--tds-page-header-padding-x);
560
- }
499
+ .tds-sidenav-section-header [slot="label-actions"]{
500
+ display:flex;
501
+ gap:var(--t-spacing-half);
502
+ align-items:center;
503
+ }
561
504
 
562
- .tds-page-header--profile > .tds-page-header__title-bar{
505
+ .tds-sidenav-section [slot="section-actions"]{
506
+ display:flex;
507
+ gap:12px;
563
508
  align-items:center;
509
+ min-height:42px;
510
+ padding:var(--t-spacing-1) 0;
564
511
  }
565
512
 
566
- .tds-page-header__primary{
513
+ .tds-sidenav-section-list,
514
+ .tds-sidenav-item{
567
515
  width:100%;
568
- }
569
-
570
- .tds-page-header__primary h1{
516
+ padding:0;
571
517
  margin:0;
572
- font-size:var(--tds-page-header-headline-font-size);
573
- font-weight:var(--t-font-weight-normal);
574
- line-height:32px;
575
- color:var(--tds-page-header-headline-color);
576
- overflow-wrap:break-word;
577
518
  }
578
519
 
579
- .tds-page-header [slot="actions"],
580
- .tds-page-header .tds-page-header__actions{
581
- width:100%;
582
- }
520
+ .tds-sidenav-item :is(a,button){
521
+ position:relative;
522
+ display:flex;
523
+ gap:12px;
524
+ align-items:center;
525
+ width:100%;
526
+ padding:12px;
527
+ overflow:hidden;
528
+ font-size:var(--t-font-size-sm);
529
+ line-height:18px;
530
+ color:var(--t-text-color-headline);
531
+ white-space:nowrap;
532
+ text-decoration:none;
533
+ -webkit-appearance:none;
534
+ -moz-appearance:none;
535
+ appearance:none;
536
+ cursor:pointer;
537
+ background-color:var(--tds-sidenav-item-background, transparent);
538
+ border:0;
539
+ border-radius:var(--t-border-radius);
540
+ transition:var(--tds-sidenav-item-transition);
541
+ }
583
542
 
584
- .has-multi-actions.tds-page-header [slot="actions"],
585
- .has-multi-actions.tds-page-header .tds-page-header__actions{
586
- display:flex;
587
- flex-flow:row wrap;
588
- gap:var(--t-spacing-half) var(--t-spacing-1);
589
- align-items:flex-start;
590
- justify-content:flex-start;
591
- min-width:0;
592
- }
543
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
544
+ display:block;
545
+ flex:1;
546
+ overflow:hidden;
547
+ text-overflow:ellipsis;
548
+ text-align:left;
549
+ white-space:nowrap;
550
+ }
593
551
 
594
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
595
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
596
- .tds-page-header nav[slot="navigation"] ul,
597
- .tds-page-header nav.tds-page-header__nav ul{
598
- display:flex;
599
- gap:var(--tds-page-header-nav-gap);
600
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
601
- margin:0 0 -1px;
602
- overflow:auto;
603
- list-style:none;
604
- background:var(--tds-page-header-nav-background);
605
- }
552
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
553
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
554
+ color:var(--t-text-color-headline);
555
+ text-decoration:none;
556
+ }
606
557
 
607
- .tds-page-header nav[slot="navigation"] a,
608
- .tds-page-header nav[slot="navigation"] button,
609
- .tds-page-header nav.tds-page-header__nav a,
610
- .tds-page-header nav.tds-page-header__nav button{
611
- position:relative;
612
- display:inline-flex;
613
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
614
- font-size:var(--t-font-size-sm);
615
- line-height:22px;
616
- color:var(--tds-page-header-nav-item-color);
617
- white-space:nowrap;
618
- text-decoration:none;
619
- -webkit-appearance:none;
620
- -moz-appearance:none;
621
- appearance:none;
622
- cursor:pointer;
623
- outline-offset:-2px;
624
- background-color:var(--tds-page-header-nav-item-background-color);
625
- background-clip:padding-box;
626
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
627
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
628
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
629
- }
558
+ :is(.tds-sidenav-item :is(a,button)):active{
559
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
560
+ }
630
561
 
631
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
632
- position:relative;
633
- }
562
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
563
+ overflow:hidden;
564
+ color:var(--tds-sidenav-item-icon-color);
565
+ }
634
566
 
635
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
636
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
637
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
638
- }
567
+ :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{
568
+ display:block;
569
+ width:var(--tds-sidenav-item-icon-size);
570
+ height:var(--tds-sidenav-item-icon-size);
571
+ }
639
572
 
640
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
641
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
642
- position:absolute;
643
- top:-5px;
644
- right:-2px;
645
- width:10px;
646
- height:10px;
647
- content:"";
648
- background:var(--tds-page-header-nav-item-indicator-color);
649
- border-radius:50%;
650
- }
573
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
574
+ --tds-sidenav-indent:19px;
575
+ }
651
576
 
652
- @media (prefers-reduced-motion: no-preference){
653
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
654
- animation:indicator-pulse 1.25s ease infinite;
577
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
578
+ visibility:visible;
579
+ block-size:auto;
580
+ opacity:1;
581
+ }
582
+
583
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
584
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
585
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
586
+
587
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
588
+ font-weight:var(--t-font-weight-semibold);
655
589
  }
656
- }
657
590
 
658
- .tds-page-header nav[slot="navigation"] a.selected,
659
- .tds-page-header nav[slot="navigation"] button.selected,
660
- .tds-page-header nav.tds-page-header__nav a.selected,
661
- .tds-page-header nav.tds-page-header__nav button.selected{
662
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
663
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
664
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
665
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
666
- }
591
+ .tds-sidenav-item:has(.tds-sidenav-section){
592
+ display:flex;
593
+ flex-direction:column;
594
+ gap:var(--t-spacing-half);
595
+ }
667
596
 
668
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
669
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
670
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
671
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
672
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
673
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
674
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
675
- }
597
+ .tds-sidenav-item .tds-sidenav-section-list{
598
+ --tds-sidenav-item-depth:1;
599
+ gap:0;
600
+ }
676
601
 
677
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
678
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
679
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
680
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
681
- background-color:var(--tds-page-header-nav-item-background-color-active);
682
- border-color:var(--tds-page-header-nav-item-border-color-active);
683
- }
602
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
603
+ visibility:hidden;
604
+ block-size:0;
605
+ overflow-y:clip;
606
+ opacity:0;
607
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
608
+ }
684
609
 
685
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
686
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
687
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
688
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
689
- color:var(--tds-page-header-nav-item-color-disabled);
690
- cursor:not-allowed;
691
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
692
- opacity:1;
610
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
611
+ --tds-sidenav-item-depth:2;
612
+ }
613
+
614
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
615
+ min-height:var(--t-element-size-2xl);
616
+ padding-block:9px;
617
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
618
+ line-height:1;
619
+ background-color:transparent;
620
+ }
621
+
622
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
623
+ position:absolute;
624
+ top:0;
625
+ bottom:0;
626
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
627
+ width:2px;
628
+ content:"";
629
+ background-color:var(--tds-sidenav-item-nested-border-color);
630
+ transition:var(--tds-sidenav-item-transition);
631
+ }
632
+
633
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
634
+ position:absolute;
635
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
636
+ z-index:-1;
637
+ height:100%;
638
+ content:"";
639
+ background-color:var(--tds-sidenav-item-nested-background);
640
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
641
+ transition:var(--tds-sidenav-item-transition);
642
+ }
643
+
644
+ :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)){
645
+ display:block;
646
+ text-align:left;
647
+ white-space:normal;
648
+ }
649
+
650
+ :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{
651
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
652
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
653
+ }
654
+
655
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
656
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
657
+ }
658
+
659
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
660
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
661
+ font-weight:var(--t-font-weight-medium);
662
+ }
663
+
664
+ .tds-sidenav-responsive-header{
665
+ display:flex;
666
+ gap:var(--t-spacing-2);
667
+ align-items:center;
668
+ width:100%;
693
669
  }
694
670
 
695
- @media (min-width: 960px){
696
- .tds-page-header__primary{
697
- flex:1 1 max-content;
698
- width:auto;
699
- min-width:0;
700
- max-width:100%;
671
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
672
+ order:0;
701
673
  }
702
674
 
703
- .tds-page-header__title-bar,
704
- .tds-page-header--profile .tds-page-header__title-bar{
705
- flex-flow:row nowrap;
706
- row-gap:12px;
707
- align-items:flex-start;
675
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
676
+ flex:1;
677
+ order:1;
678
+ margin:0;
679
+ font-size:var(--t-font-size-lg);
680
+ font-weight:var(--t-font-weight-medium);
681
+ color:var(--t-text-color-headline);
708
682
  }
709
683
 
710
- .tds-page-header [slot="actions"],
711
- .tds-page-header .tds-page-header__actions{
712
- width:auto;
684
+ @media (max-width: 719px){
685
+ .tds-sidenav-collapse{
686
+ z-index:10001;
687
+ display:none;
688
+ max-width:min(448px, calc(100vw - 48px));
689
+ padding:0;
690
+ margin:12px 0;
691
+ overflow:hidden;
692
+ outline:0;
693
+ background:var(--t-surface-color-card);
694
+ border:0;
695
+ border-radius:6px;
696
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
697
+ will-change:transform;
698
+ position-area:bottom span-right;
713
699
  }
714
700
 
715
- .has-multi-actions.tds-page-header [slot="actions"],
716
- .has-multi-actions.tds-page-header .tds-page-header__actions{
717
- justify-content:flex-end;
701
+ .tds-sidenav-scroll-container{
702
+ --webkit-overflow-scrolling:touch;
703
+ display:block;
704
+ width:100%;
705
+ height:-moz-fit-content;
706
+ height:fit-content;
707
+ padding:var(--t-spacing-2);
708
+ overflow-y:auto;
709
+ }
710
+
711
+ .tds-sidenav-item :is(a, button) :is(.prefix){
712
+ display:none;
713
+ }
714
+ @supports selector(:popover-open){
715
+ .tds-sidenav-collapse:popover-open{
716
+ display:flex;
717
+ }
718
+ }
719
+ @supports not selector(:popover-open){
720
+ .tds-sidenav-collapse.\:popover-open{
721
+ display:flex;
722
+ }
718
723
  }
719
724
  }
720
725
 
721
- .tds-page-header-phone,
722
- .tds-page-header-email{
723
- color:var(--tds-page-header-color);
724
- white-space:nowrap;
726
+ @media (min-width: 720px){
727
+ .tds-sidenav-responsive-header{
728
+ display:none;
729
+ }
725
730
  }
726
731
 
727
- .tds-page-header-email{
728
- max-width:100%;
729
- overflow:hidden;
730
- text-overflow:ellipsis;
731
- }
732
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
733
+ display:none;
734
+ }
732
735
 
733
- @keyframes indicator-pulse{
734
- 0%{
735
- opacity:.3;
736
- transform:scale(.9);
737
- }
736
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
737
+ display:block;
738
+ }
738
739
 
739
- 100%{
740
- opacity:0;
741
- transform:scale(1.75);
742
- }
743
- }
740
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
741
+ display:flex;
742
+ flex-direction:column;
743
+ }
744
744
 
745
745
  .tds-checkbox{
746
746
  --tds-checkbox-font-size:var(--t-font-size-md);
@@ -932,6 +932,93 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
932
932
  --tds-checkbox-description-line-height:1.3;
933
933
  }
934
934
 
935
+ .tds-radio-group{
936
+ --tds-radio-group-font-size:var(--t-font-size-md);
937
+ --tds-radio-group-line-height:1.4;
938
+ --tds-radio-group-gap:var(--t-spacing-1);
939
+
940
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
941
+
942
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
943
+ --tds-radio-group-description-line-height:1.35;
944
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
945
+ --tds-radio-group-description-invalid-icon-display:none;
946
+ display:flex;
947
+ flex-direction:column;
948
+ gap:var(--tds-radio-group-gap);
949
+ padding:0;
950
+ margin:0;
951
+
952
+ font-size:var(--tds-radio-group-font-size);
953
+ line-height:var(--tds-radio-group-line-height);
954
+ border:0;
955
+ }
956
+
957
+ .tds-radio-group legend{
958
+ padding:0;
959
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
960
+ }
961
+
962
+ .tds-radio-group:has(.tds-radio-group-description){
963
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
964
+ }
965
+
966
+ .tds-radio-group[aria-invalid="true"]{
967
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
968
+ --tds-radio-group-description-invalid-icon-display:inline-block;
969
+ }
970
+
971
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
972
+ --tds-radio-input-border-color:var(--t-border-color-control-error);
973
+ }
974
+
975
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
976
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
977
+ --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
978
+ }
979
+
980
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
981
+ --tds-radio-input-background-color:var(--t-form-background-color);
982
+ }
983
+
984
+ .tds-radio-group:has(input:required) legend::after{
985
+ margin-left:.25ch;
986
+ color:var(--t-text-color-status-error);
987
+ content:"*";
988
+ }
989
+
990
+ .tds-radio-group-fields{
991
+ display:flex;
992
+ flex-direction:column;
993
+ gap:var(--tds-radio-group-gap);
994
+ align-items:flex-start;
995
+ }
996
+
997
+ .tds-radio-group-description{
998
+ display:flex;
999
+ gap:var(--t-spacing-half);
1000
+ align-items:flex-start;
1001
+ margin:0;
1002
+ font-size:var(--tds-radio-group-description-font-size);
1003
+ line-height:var(--tds-radio-group-description-line-height);
1004
+ color:var(--tds-radio-group-description-color);
1005
+ cursor:text;
1006
+ }
1007
+
1008
+ .tds-radio-group-description-invalid-icon{
1009
+ display:var(--tds-radio-group-description-invalid-icon-display);
1010
+ flex-shrink:0;
1011
+ margin-top:calc(.5lh - .5em);
1012
+ line-height:var(--tds-radio-group-description-line-height);
1013
+ }
1014
+
1015
+ .tds-radio-group--sm{
1016
+ --tds-radio-group-line-height:1.35;
1017
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1018
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1019
+ --tds-radio-group-description-line-height:1.3;
1020
+ }
1021
+
935
1022
  .tds-toggle-switch{
936
1023
  --tds-toggle-switch-font-size:var(--t-font-size-md);
937
1024
  --tds-toggle-switch-column-gap:var(--t-spacing-2);
@@ -1072,93 +1159,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1072
1159
  --tds-toggle-switch-display:inline-flex;
1073
1160
  }
1074
1161
 
1075
- .tds-radio-group{
1076
- --tds-radio-group-font-size:var(--t-font-size-md);
1077
- --tds-radio-group-line-height:1.4;
1078
- --tds-radio-group-gap:var(--t-spacing-1);
1079
-
1080
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1081
-
1082
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1083
- --tds-radio-group-description-line-height:1.35;
1084
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1085
- --tds-radio-group-description-invalid-icon-display:none;
1086
- display:flex;
1087
- flex-direction:column;
1088
- gap:var(--tds-radio-group-gap);
1089
- padding:0;
1090
- margin:0;
1091
-
1092
- font-size:var(--tds-radio-group-font-size);
1093
- line-height:var(--tds-radio-group-line-height);
1094
- border:0;
1095
- }
1096
-
1097
- .tds-radio-group legend{
1098
- padding:0;
1099
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1100
- }
1101
-
1102
- .tds-radio-group:has(.tds-radio-group-description){
1103
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1104
- }
1105
-
1106
- .tds-radio-group[aria-invalid="true"]{
1107
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1108
- --tds-radio-group-description-invalid-icon-display:inline-block;
1109
- }
1110
-
1111
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1112
- --tds-radio-input-border-color:var(--t-border-color-control-error);
1113
- }
1114
-
1115
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1116
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1117
- --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
1118
- }
1119
-
1120
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1121
- --tds-radio-input-background-color:var(--t-form-background-color);
1122
- }
1123
-
1124
- .tds-radio-group:has(input:required) legend::after{
1125
- margin-left:.25ch;
1126
- color:var(--t-text-color-status-error);
1127
- content:"*";
1128
- }
1129
-
1130
- .tds-radio-group-fields{
1131
- display:flex;
1132
- flex-direction:column;
1133
- gap:var(--tds-radio-group-gap);
1134
- align-items:flex-start;
1135
- }
1136
-
1137
- .tds-radio-group-description{
1138
- display:flex;
1139
- gap:var(--t-spacing-half);
1140
- align-items:flex-start;
1141
- margin:0;
1142
- font-size:var(--tds-radio-group-description-font-size);
1143
- line-height:var(--tds-radio-group-description-line-height);
1144
- color:var(--tds-radio-group-description-color);
1145
- cursor:text;
1146
- }
1147
-
1148
- .tds-radio-group-description-invalid-icon{
1149
- display:var(--tds-radio-group-description-invalid-icon-display);
1150
- flex-shrink:0;
1151
- margin-top:calc(.5lh - .5em);
1152
- line-height:var(--tds-radio-group-description-line-height);
1153
- }
1154
-
1155
- .tds-radio-group--sm{
1156
- --tds-radio-group-line-height:1.35;
1157
- --tds-radio-group-font-size:var(--t-font-size-sm);
1158
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1159
- --tds-radio-group-description-line-height:1.3;
1160
- }
1161
-
1162
1162
  .tds-loading-spinner{
1163
1163
  --tds-loading-spinner-size:1.25em;
1164
1164
 
@@ -2538,29 +2538,6 @@ a[class="tds-btn"]{
2538
2538
  }
2539
2539
  }
2540
2540
 
2541
-
2542
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
2543
- -webkit-appearance:none;
2544
- appearance:none;
2545
- }
2546
-
2547
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2548
- inline-size:1em;
2549
- block-size:2em;
2550
- }
2551
-
2552
- @supports (field-sizing: content){
2553
- .tds-input--auto-width{
2554
- inline-size:-moz-fit-content;
2555
- inline-size:fit-content;
2556
- }
2557
-
2558
- .tds-input--auto-width input{
2559
- field-sizing:content;
2560
- inline-size:auto;
2561
- }
2562
- }
2563
-
2564
2541
  .tds-input:has(textarea){
2565
2542
  --tds-input-padding-block:var(--t-spacing-half);
2566
2543
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -2667,6 +2644,29 @@ a[class="tds-btn"]{
2667
2644
  }
2668
2645
  }
2669
2646
 
2647
+
2648
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
2649
+ -webkit-appearance:none;
2650
+ appearance:none;
2651
+ }
2652
+
2653
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
2654
+ inline-size:1em;
2655
+ block-size:2em;
2656
+ }
2657
+
2658
+ @supports (field-sizing: content){
2659
+ .tds-input--auto-width{
2660
+ inline-size:-moz-fit-content;
2661
+ inline-size:fit-content;
2662
+ }
2663
+
2664
+ .tds-input--auto-width input{
2665
+ field-sizing:content;
2666
+ inline-size:auto;
2667
+ }
2668
+ }
2669
+
2670
2670
  .tds-input{
2671
2671
  --tds-input-border-color:var(--t-form-border-color);
2672
2672
  --tds-input-border-color-hover:var(--t-form-border-color-hover);