@planningcenter/tapestry 2.10.0 → 2.10.1-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +676 -676
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +676 -676
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,745 +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
- }
182
-
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
- }
194
-
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;
198
- }
199
- }
200
-
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
- }
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
+ }
210
152
 
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
- }
153
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
154
+ --tds-sidenav-indent:19px;
155
+ }
219
156
 
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
- }
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
+ }
227
162
 
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
- }
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);
237
166
 
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%;
167
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
168
+ font-weight:var(--t-font-weight-semibold);
244
169
  }
245
170
 
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;
171
+ .tds-sidenav-item:has(.tds-sidenav-section){
172
+ display:flex;
173
+ flex-direction:column;
174
+ gap:var(--t-spacing-half);
251
175
  }
252
176
 
253
- .tds-page-header [slot="actions"],
254
- .tds-page-header .tds-page-header__actions{
255
- width:auto;
177
+ .tds-sidenav-item .tds-sidenav-section-list{
178
+ --tds-sidenav-item-depth:1;
179
+ gap:0;
256
180
  }
257
181
 
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;
261
- }
262
- }
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
+ }
263
189
 
264
- .tds-page-header-phone,
265
- .tds-page-header-email{
266
- color:var(--tds-page-header-color);
267
- white-space:nowrap;
268
- }
190
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
191
+ --tds-sidenav-item-depth:2;
192
+ }
269
193
 
270
- .tds-page-header-email{
271
- max-width:100%;
272
- overflow:hidden;
273
- text-overflow:ellipsis;
274
- }
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
+ }
275
201
 
276
- @keyframes indicator-pulse{
277
- 0%{
278
- opacity:.3;
279
- transform:scale(.9);
280
- }
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
+ }
281
212
 
282
- 100%{
283
- opacity:0;
284
- transform:scale(1.75);
285
- }
286
- }
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
+ }
287
223
 
288
- .tds-radio{
289
- --tds-radio-font-size:var(--t-font-size-md);
290
- --tds-radio-cursor:pointer;
291
- --tds-radio-line-height:1.4;
292
- --tds-radio-transition-property:border-width;
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
+ }
293
229
 
294
- --tds-radio-input-size:var(--t-element-size-md);
295
- --tds-radio-input-border-radius:var(--t-border-radius-round);
296
- --tds-radio-input-border-color:var(--t-border-color-control-neutral);
297
- --tds-radio-input-border-width:var(--t-border-width);
298
- --tds-radio-input-background-color:transparent;
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
+ }
299
234
 
300
- --tds-radio-label-color:var(--t-text-color);
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
+ }
301
238
 
302
- --tds-radio-description-font-size:var(--t-font-size-sm);
303
- --tds-radio-description-line-height:1.35;
304
- --tds-radio-description-color:var(--t-text-color-secondary);
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
+ }
305
243
 
306
- position:relative;
307
- display:inline-grid;
308
- grid-template-columns:auto;
309
- grid-auto-columns:1fr;
310
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
311
- line-height:var(--tds-radio-line-height);
312
- cursor:var(--tds-radio-cursor);
313
- -webkit-user-select:none;
314
- -moz-user-select:none;
315
- user-select:none;
244
+ .tds-sidenav-responsive-header{
245
+ display:flex;
246
+ gap:var(--t-spacing-2);
247
+ align-items:center;
248
+ width:100%;
316
249
  }
317
250
 
318
- .tds-radio label{
319
- grid-area:1 / 2;
320
- font-size:var(--tds-radio-font-size);
321
- font-weight:var(--t-font-weight-normal);
322
- color:var(--tds-radio-label-color);
323
- cursor:var(--tds-radio-cursor);
251
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
252
+ order:0;
324
253
  }
325
254
 
326
- .tds-radio input[type="radio"]{
327
- position:relative;
328
- width:1em;
329
- height:1em;
330
- margin:calc((1lh - 1em) / 2) 0 0;
331
- font-size:var(--tds-radio-font-size);
332
- line-height:inherit;
333
- -webkit-appearance:none;
334
- -moz-appearance:none;
335
- appearance:none;
336
- cursor:var(--tds-radio-cursor);
337
- background-color:var(--tds-radio-input-background-color);
338
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
339
- border-radius:var(--tds-radio-input-border-radius);
340
- transition-timing-function:ease-in-out;
341
- transition-duration:180ms;
342
- transition-property:var(--tds-radio-transition-property);
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);
343
262
  }
344
263
 
345
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
346
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
347
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
348
- }
349
-
350
- :is(.tds-radio input[type="radio"]):focus-visible{
351
- outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
352
- outline-offset:var(--t-spacing-fourth);
353
- }
354
-
355
- :is(.tds-radio input[type="radio"]):disabled{
356
- pointer-events:none;
357
- }
358
-
359
- @media (prefers-reduced-motion: reduce){
360
-
361
- .tds-radio input[type="radio"]{
362
- --tds-radio-transition-property:none;
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;
363
279
  }
364
- }
365
280
 
366
- .tds-radio:has(input:checked){
367
- --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
368
- --tds-radio-input-border-color:var(--t-border-color-control-info);
369
- --tds-radio-input-border-width:4px;
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;
370
289
  }
371
290
 
372
- .tds-radio:has(input:checked) input:hover:not(:disabled){
373
- --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
374
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
375
- }
376
-
377
- .tds-radio:has(input:user-invalid){
378
- --tds-radio-input-border-color:var(--t-border-color-control-error);
291
+ .tds-sidenav-item :is(a, button) :is(.prefix){
292
+ display:none;
379
293
  }
380
-
381
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
382
- --tds-radio-input-border-color:var(--t-border-color-control-error);
383
- --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
294
+ @supports selector(:popover-open){
295
+ .tds-sidenav-collapse:popover-open{
296
+ display:flex;
384
297
  }
385
-
386
- .tds-radio:has(input:disabled){
387
- --tds-radio-input-background-color:var(--t-fill-color-neutral-070);
388
- --tds-radio-input-border-color:var(--t-border-color-control-disabled);
389
-
390
- --tds-radio-label-color:var(--t-text-color-disabled);
391
- --tds-radio-description-color:var(--t-text-color-disabled);
392
- --tds-radio-cursor:not-allowed;
393
298
  }
394
-
395
- .tds-radio:has(input:disabled) input:checked{
396
- --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
397
- --tds-radio-input-border-color:var(--t-border-color-control-disabled);
299
+ @supports not selector(:popover-open){
300
+ .tds-sidenav-collapse.\:popover-open{
301
+ display:flex;
398
302
  }
399
-
400
- .tds-radio-description{
401
- display:flex;
402
- grid-area:2 / 2;
403
- gap:4px;
404
- align-items:flex-start;
405
- margin:0;
406
- font-size:var(--tds-radio-description-font-size);
407
- line-height:var(--tds-radio-description-line-height);
408
- color:var(--tds-radio-description-color);
409
- cursor:text;
303
+ }
410
304
  }
411
305
 
412
- .tds-radio--sm{
413
- --tds-radio-line-height:1.35;
414
- --tds-radio-input-size:var(--t-element-size-sm);
415
- --tds-radio-font-size:var(--t-font-size-sm);
416
- --tds-radio-description-font-size:var(--t-font-size-xs);
417
- --tds-radio-description-line-height:1.3;
306
+ @media (min-width: 720px){
307
+ .tds-sidenav-responsive-header{
308
+ display:none;
309
+ }
418
310
  }
419
311
 
312
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
313
+ display:none;
314
+ }
420
315
 
421
- @media (prefers-reduced-motion: no-preference){
316
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
317
+ display:block;
318
+ }
422
319
 
423
- :root{
424
- interpolate-size:allow-keywords;
425
- }
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;
426
328
  }
329
+ }
427
330
 
428
- @layer tds-component{
429
- tds-sidenav, .tds-sidenav{
430
- --tds-sidenav-indent:12px;
431
- --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;
432
349
 
433
- --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);
434
352
 
435
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
436
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
437
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
438
- --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);
439
356
 
440
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
441
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
442
- --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);
443
359
 
444
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
445
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
446
- --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);
447
363
 
448
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
449
- --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);
450
369
  }
451
370
 
452
- .tds-sidenav--theme-gray{
453
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
454
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
455
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
456
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
457
- --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;
458
373
  }
459
- }
460
374
 
461
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
462
- 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
+ }
463
380
  }
464
381
 
465
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
466
- flex-direction:column;
467
- gap:var(--t-spacing-half);
468
- 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
+ }
469
400
  }
470
-
471
- .tds-sidenav-section-list{
472
- width:100%;
473
- padding:0;
474
- margin:0;
475
- list-style:none;
476
401
  }
477
402
 
478
- .tds-sidenav-section-header{
403
+ .tds-page-header{
479
404
  display:flex;
480
- align-items:baseline;
481
- justify-content:space-between;
482
- 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);
483
410
  }
484
411
 
485
- .tds-sidenav-section-header h2{
486
- margin:0;
487
- font-size:var(--t-font-size-sm);
488
- font-weight:var(--t-font-weight-semibold);
489
- line-height:1.35;
490
- color:var(--t-text-color-secondary);
491
- text-transform:uppercase;
492
- }
493
-
494
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
495
- padding-top:0;
496
- }
412
+ .tds-page-header:not(.has-nav){
413
+ padding-bottom:var(--tds-page-header-padding-y);
414
+ }
497
415
 
498
- .tds-sidenav-section-header [slot="label-actions"]{
499
- display:flex;
500
- gap:var(--t-spacing-half);
501
- align-items:center;
502
- }
416
+ .tds-page-header.inactive{
417
+ background:var(--tds-page-header-background-color-inactive);
418
+ }
503
419
 
504
- .tds-sidenav-section [slot="section-actions"]{
420
+ .tds-page-header__title-bar{
505
421
  display:flex;
506
- 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{
507
430
  align-items:center;
508
- min-height:42px;
509
- padding:var(--t-spacing-1) 0;
510
431
  }
511
432
 
512
- .tds-sidenav-section-list,
513
- .tds-sidenav-item{
433
+ .tds-page-header__primary{
514
434
  width:100%;
515
- padding:0;
516
- margin:0;
517
435
  }
518
436
 
519
- .tds-sidenav-item :is(a,button){
520
- position:relative;
521
- display:flex;
522
- gap:12px;
523
- align-items:center;
524
- width:100%;
525
- padding:12px;
526
- overflow:hidden;
527
- font-size:var(--t-font-size-sm);
528
- line-height:18px;
529
- color:var(--t-text-color-headline);
530
- white-space:nowrap;
531
- text-decoration:none;
532
- -webkit-appearance:none;
533
- -moz-appearance:none;
534
- appearance:none;
535
- cursor:pointer;
536
- background-color:var(--tds-sidenav-item-background, transparent);
537
- border:0;
538
- border-radius:var(--t-border-radius);
539
- transition:var(--tds-sidenav-item-transition);
540
- }
541
-
542
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
543
- display:block;
544
- flex:1;
545
- overflow:hidden;
546
- text-overflow:ellipsis;
547
- text-align:left;
548
- white-space:nowrap;
549
- }
550
-
551
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
552
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
553
- color:var(--t-text-color-headline);
554
- text-decoration:none;
555
- }
556
-
557
- :is(.tds-sidenav-item :is(a,button)):active{
558
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
559
- }
560
-
561
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
562
- overflow:hidden;
563
- color:var(--tds-sidenav-item-icon-color);
564
- }
565
-
566
- :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{
567
- display:block;
568
- width:var(--tds-sidenav-item-icon-size);
569
- height:var(--tds-sidenav-item-icon-size);
570
- }
571
-
572
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
573
- --tds-sidenav-indent:19px;
574
- }
575
-
576
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
577
- visibility:visible;
578
- block-size:auto;
579
- opacity:1;
580
- }
581
-
582
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
583
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
584
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
585
-
586
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
587
- font-weight:var(--t-font-weight-semibold);
588
- }
589
-
590
- .tds-sidenav-item:has(.tds-sidenav-section){
591
- display:flex;
592
- flex-direction:column;
593
- gap:var(--t-spacing-half);
594
- }
595
-
596
- .tds-sidenav-item .tds-sidenav-section-list{
597
- --tds-sidenav-item-depth:1;
598
- gap:0;
599
- }
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
+ }
600
445
 
601
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
602
- visibility:hidden;
603
- block-size:0;
604
- overflow-y:clip;
605
- opacity:0;
606
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
607
- }
446
+ .tds-page-header [slot="actions"],
447
+ .tds-page-header .tds-page-header__actions{
448
+ width:100%;
449
+ }
608
450
 
609
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
610
- --tds-sidenav-item-depth:2;
611
- }
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
+ }
612
460
 
613
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
614
- min-height:var(--t-element-size-2xl);
615
- padding-block:9px;
616
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
617
- line-height:1;
618
- background-color:transparent;
619
- }
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
+ }
620
473
 
621
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
622
- position:absolute;
623
- top:0;
624
- bottom:0;
625
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
626
- width:2px;
627
- content:"";
628
- background-color:var(--tds-sidenav-item-nested-border-color);
629
- transition:var(--tds-sidenav-item-transition);
630
- }
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
+ }
631
497
 
632
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
633
- position:absolute;
634
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
635
- z-index:-1;
636
- height:100%;
637
- content:"";
638
- background-color:var(--tds-sidenav-item-nested-background);
639
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
640
- transition:var(--tds-sidenav-item-transition);
641
- }
498
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
499
+ position:relative;
500
+ }
642
501
 
643
- :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)){
644
- display:block;
645
- text-align:left;
646
- white-space:normal;
647
- }
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
+ }
648
506
 
649
- :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{
650
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
651
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
652
- }
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
+ }
653
518
 
654
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
655
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
656
- }
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
+ }
657
524
 
658
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
659
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
660
- font-weight:var(--t-font-weight-medium);
661
- }
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
+ }
662
534
 
663
- .tds-sidenav-responsive-header{
664
- display:flex;
665
- gap:var(--t-spacing-2);
666
- align-items:center;
667
- width:100%;
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);
668
542
  }
669
543
 
670
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
671
- order:0;
672
- }
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);
550
+ }
673
551
 
674
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
675
- flex:1;
676
- order:1;
677
- margin:0;
678
- font-size:var(--t-font-size-lg);
679
- font-weight:var(--t-font-weight-medium);
680
- color:var(--t-text-color-headline);
681
- }
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
+ }
682
561
 
683
- @media (max-width: 719px){
684
- .tds-sidenav-collapse{
685
- z-index:10001;
686
- display:none;
687
- max-width:min(448px, calc(100vw - 48px));
688
- padding:0;
689
- margin:12px 0;
690
- overflow:hidden;
691
- outline:0;
692
- background:var(--t-surface-color-card);
693
- border:0;
694
- border-radius:6px;
695
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
696
- will-change:transform;
697
- position-area:bottom span-right;
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%;
698
568
  }
699
569
 
700
- .tds-sidenav-scroll-container{
701
- --webkit-overflow-scrolling:touch;
702
- display:block;
703
- width:100%;
704
- height:-moz-fit-content;
705
- height:fit-content;
706
- padding:var(--t-spacing-2);
707
- overflow-y:auto;
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;
708
575
  }
709
576
 
710
- .tds-sidenav-item :is(a, button) :is(.prefix){
711
- display:none;
712
- }
713
- @supports selector(:popover-open){
714
- .tds-sidenav-collapse:popover-open{
715
- display:flex;
716
- }
577
+ .tds-page-header [slot="actions"],
578
+ .tds-page-header .tds-page-header__actions{
579
+ width:auto;
717
580
  }
718
- @supports not selector(:popover-open){
719
- .tds-sidenav-collapse.\:popover-open{
720
- display:flex;
721
- }
581
+
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;
722
585
  }
723
586
  }
724
587
 
725
- @media (min-width: 720px){
726
- .tds-sidenav-responsive-header{
727
- display:none;
728
- }
588
+ .tds-page-header-phone,
589
+ .tds-page-header-email{
590
+ color:var(--tds-page-header-color);
591
+ white-space:nowrap;
729
592
  }
730
593
 
731
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
732
- display:none;
733
- }
594
+ .tds-page-header-email{
595
+ max-width:100%;
596
+ overflow:hidden;
597
+ text-overflow:ellipsis;
598
+ }
734
599
 
735
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
736
- display:block;
737
- }
600
+ @keyframes indicator-pulse{
601
+ 0%{
602
+ opacity:.3;
603
+ transform:scale(.9);
604
+ }
738
605
 
739
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
740
- display:flex;
741
- flex-direction:column;
742
- }
606
+ 100%{
607
+ opacity:0;
608
+ transform:scale(1.75);
609
+ }
610
+ }
743
611
 
744
612
  .tds-checkbox{
745
613
  --tds-checkbox-font-size:var(--t-font-size-md);
@@ -931,91 +799,136 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
931
799
  --tds-checkbox-description-line-height:1.3;
932
800
  }
933
801
 
934
- .tds-radio-group{
935
- --tds-radio-group-font-size:var(--t-font-size-md);
936
- --tds-radio-group-line-height:1.4;
937
- --tds-radio-group-gap:var(--t-spacing-1);
802
+ .tds-radio{
803
+ --tds-radio-font-size:var(--t-font-size-md);
804
+ --tds-radio-cursor:pointer;
805
+ --tds-radio-line-height:1.4;
806
+ --tds-radio-transition-property:border-width;
938
807
 
939
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
808
+ --tds-radio-input-size:var(--t-element-size-md);
809
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
810
+ --tds-radio-input-border-color:var(--t-border-color-control-neutral);
811
+ --tds-radio-input-border-width:var(--t-border-width);
812
+ --tds-radio-input-background-color:transparent;
940
813
 
941
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
942
- --tds-radio-group-description-line-height:1.35;
943
- --tds-radio-group-description-color:var(--t-text-color-secondary);
944
- --tds-radio-group-description-invalid-icon-display:none;
814
+ --tds-radio-label-color:var(--t-text-color);
945
815
 
946
- font-size:var(--tds-radio-group-font-size);
947
- line-height:var(--tds-radio-group-line-height);
948
- border:0;
949
- padding:0;
950
- margin:0;
951
- display:flex;
952
- flex-direction:column;
953
- gap:var(--tds-radio-group-gap);
816
+ --tds-radio-description-font-size:var(--t-font-size-sm);
817
+ --tds-radio-description-line-height:1.35;
818
+ --tds-radio-description-color:var(--t-text-color-secondary);
819
+
820
+ position:relative;
821
+ display:inline-grid;
822
+ grid-template-columns:auto;
823
+ grid-auto-columns:1fr;
824
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
825
+ line-height:var(--tds-radio-line-height);
826
+ cursor:var(--tds-radio-cursor);
827
+ -webkit-user-select:none;
828
+ -moz-user-select:none;
829
+ user-select:none;
954
830
  }
955
831
 
956
- .tds-radio-group legend{
957
- padding:0;
958
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
832
+ .tds-radio label{
833
+ grid-area:1 / 2;
834
+ font-size:var(--tds-radio-font-size);
835
+ font-weight:var(--t-font-weight-normal);
836
+ color:var(--tds-radio-label-color);
837
+ cursor:var(--tds-radio-cursor);
959
838
  }
960
839
 
961
- .tds-radio-group:has(.tds-radio-group-description){
962
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
840
+ .tds-radio input[type="radio"]{
841
+ position:relative;
842
+ width:1em;
843
+ height:1em;
844
+ margin:calc((1lh - 1em) / 2) 0 0;
845
+ font-size:var(--tds-radio-font-size);
846
+ line-height:inherit;
847
+ -webkit-appearance:none;
848
+ -moz-appearance:none;
849
+ appearance:none;
850
+ cursor:var(--tds-radio-cursor);
851
+ background-color:var(--tds-radio-input-background-color);
852
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
853
+ border-radius:var(--tds-radio-input-border-radius);
854
+ transition-timing-function:ease-in-out;
855
+ transition-duration:180ms;
856
+ transition-property:var(--tds-radio-transition-property);
963
857
  }
964
858
 
965
- .tds-radio-group[aria-invalid="true"]{
966
- --tds-radio-group-description-color:var(--t-text-color-status-error);
967
- --tds-radio-group-description-invalid-icon-display:inline-block;
859
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
860
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
861
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
862
+ }
863
+
864
+ :is(.tds-radio input[type="radio"]):focus-visible{
865
+ outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
866
+ outline-offset:var(--t-spacing-fourth);
867
+ }
868
+
869
+ :is(.tds-radio input[type="radio"]):disabled{
870
+ pointer-events:none;
871
+ }
872
+
873
+ @media (prefers-reduced-motion: reduce){
874
+
875
+ .tds-radio input[type="radio"]{
876
+ --tds-radio-transition-property:none;
968
877
  }
878
+ }
969
879
 
970
- .tds-radio-group[aria-invalid="true"] .tds-radio{
880
+ .tds-radio:has(input:checked){
881
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
882
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
883
+ --tds-radio-input-border-width:4px;
884
+ }
885
+
886
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
887
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
888
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
889
+ }
890
+
891
+ .tds-radio:has(input:user-invalid){
892
+ --tds-radio-input-border-color:var(--t-border-color-control-error);
893
+ }
894
+
895
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
971
896
  --tds-radio-input-border-color:var(--t-border-color-control-error);
897
+ --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
972
898
  }
973
899
 
974
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
975
- --tds-radio-input-border-color:hsl(9 60% 40%);
976
- --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
977
- }
900
+ .tds-radio:has(input:disabled){
901
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-070);
902
+ --tds-radio-input-border-color:var(--t-border-color-control-disabled);
978
903
 
979
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
980
- --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
981
- }
904
+ --tds-radio-label-color:var(--t-text-color-disabled);
905
+ --tds-radio-description-color:var(--t-text-color-disabled);
906
+ --tds-radio-cursor:not-allowed;
907
+ }
982
908
 
983
- .tds-radio-group:has(input:required) legend::after{
984
- margin-left:.25ch;
985
- color:var(--t-text-color-status-error);
986
- content:"*";
909
+ .tds-radio:has(input:disabled) input:checked{
910
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
911
+ --tds-radio-input-border-color:var(--t-border-color-control-disabled);
987
912
  }
988
913
 
989
- .tds-radio-group-fields{
990
- display:flex;
991
- flex-direction:column;
992
- gap:var(--tds-radio-group-gap);
993
- align-items:flex-start;
994
- }
995
-
996
- .tds-radio-group-description{
914
+ .tds-radio-description{
997
915
  display:flex;
998
- gap:var(--t-spacing-half);
916
+ grid-area:2 / 2;
917
+ gap:4px;
999
918
  align-items:flex-start;
1000
919
  margin:0;
1001
- font-size:var(--tds-radio-group-description-font-size);
1002
- line-height:var(--tds-radio-group-description-line-height);
1003
- color:var(--tds-radio-group-description-color);
920
+ font-size:var(--tds-radio-description-font-size);
921
+ line-height:var(--tds-radio-description-line-height);
922
+ color:var(--tds-radio-description-color);
1004
923
  cursor:text;
1005
924
  }
1006
925
 
1007
- .tds-radio-group-description-invalid-icon{
1008
- display:var(--tds-radio-group-description-invalid-icon-display);
1009
- flex-shrink:0;
1010
- margin-top:calc(.5lh - .5em);
1011
- line-height:var(--tds-radio-group-description-line-height);
1012
- }
1013
-
1014
- .tds-radio-group--sm{
1015
- --tds-radio-group-line-height:1.35;
1016
- --tds-radio-group-font-size:var(--t-font-size-sm);
1017
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1018
- --tds-radio-group-description-line-height:1.3;
926
+ .tds-radio--sm{
927
+ --tds-radio-line-height:1.35;
928
+ --tds-radio-input-size:var(--t-element-size-sm);
929
+ --tds-radio-font-size:var(--t-font-size-sm);
930
+ --tds-radio-description-font-size:var(--t-font-size-xs);
931
+ --tds-radio-description-line-height:1.3;
1019
932
  }
1020
933
 
1021
934
  .tds-toggle-switch{
@@ -1158,6 +1071,93 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1158
1071
  --tds-toggle-switch-display:inline-flex;
1159
1072
  }
1160
1073
 
1074
+ .tds-radio-group{
1075
+ --tds-radio-group-font-size:var(--t-font-size-md);
1076
+ --tds-radio-group-line-height:1.4;
1077
+ --tds-radio-group-gap:var(--t-spacing-1);
1078
+
1079
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1080
+
1081
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1082
+ --tds-radio-group-description-line-height:1.35;
1083
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1084
+ --tds-radio-group-description-invalid-icon-display:none;
1085
+
1086
+ font-size:var(--tds-radio-group-font-size);
1087
+ line-height:var(--tds-radio-group-line-height);
1088
+ border:0;
1089
+ padding:0;
1090
+ margin:0;
1091
+ display:flex;
1092
+ flex-direction:column;
1093
+ gap:var(--tds-radio-group-gap);
1094
+ }
1095
+
1096
+ .tds-radio-group legend{
1097
+ padding:0;
1098
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1099
+ }
1100
+
1101
+ .tds-radio-group:has(.tds-radio-group-description){
1102
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1103
+ }
1104
+
1105
+ .tds-radio-group[aria-invalid="true"]{
1106
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1107
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1108
+ }
1109
+
1110
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1111
+ --tds-radio-input-border-color:var(--t-border-color-control-error);
1112
+ }
1113
+
1114
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1115
+ --tds-radio-input-border-color:hsl(9 60% 40%);
1116
+ --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
1117
+ }
1118
+
1119
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1120
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
1121
+ }
1122
+
1123
+ .tds-radio-group:has(input:required) legend::after{
1124
+ margin-left:.25ch;
1125
+ color:var(--t-text-color-status-error);
1126
+ content:"*";
1127
+ }
1128
+
1129
+ .tds-radio-group-fields{
1130
+ display:flex;
1131
+ flex-direction:column;
1132
+ gap:var(--tds-radio-group-gap);
1133
+ align-items:flex-start;
1134
+ }
1135
+
1136
+ .tds-radio-group-description{
1137
+ display:flex;
1138
+ gap:var(--t-spacing-half);
1139
+ align-items:flex-start;
1140
+ margin:0;
1141
+ font-size:var(--tds-radio-group-description-font-size);
1142
+ line-height:var(--tds-radio-group-description-line-height);
1143
+ color:var(--tds-radio-group-description-color);
1144
+ cursor:text;
1145
+ }
1146
+
1147
+ .tds-radio-group-description-invalid-icon{
1148
+ display:var(--tds-radio-group-description-invalid-icon-display);
1149
+ flex-shrink:0;
1150
+ margin-top:calc(.5lh - .5em);
1151
+ line-height:var(--tds-radio-group-description-line-height);
1152
+ }
1153
+
1154
+ .tds-radio-group--sm{
1155
+ --tds-radio-group-line-height:1.35;
1156
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1157
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1158
+ --tds-radio-group-description-line-height:1.3;
1159
+ }
1160
+
1161
1161
  .tds-loading-spinner{
1162
1162
  --tds-loading-spinner-size:1.25em;
1163
1163