@planningcenter/tapestry 2.10.0 → 2.10.1-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 (5) hide show
  1. package/dist/reactRender.css +596 -596
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +596 -596
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,746 +1,746 @@
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
- }
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;
279
+ }
358
280
 
359
- @media (prefers-reduced-motion: reduce){
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;
289
+ }
360
290
 
361
- .tds-radio input[type="radio"]{
362
- --tds-radio-transition-property:none;
291
+ .tds-sidenav-item :is(a, button) :is(.prefix){
292
+ display:none;
363
293
  }
294
+ @supports selector(:popover-open){
295
+ .tds-sidenav-collapse:popover-open{
296
+ display:flex;
364
297
  }
365
-
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;
370
298
  }
371
-
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);
299
+ @supports not selector(:popover-open){
300
+ .tds-sidenav-collapse.\:popover-open{
301
+ display:flex;
375
302
  }
303
+ }
304
+ }
376
305
 
377
- .tds-radio:has(input:user-invalid){
378
- --tds-radio-input-border-color:var(--t-border-color-control-error);
306
+ @media (min-width: 720px){
307
+ .tds-sidenav-responsive-header{
308
+ display:none;
379
309
  }
310
+ }
380
311
 
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);
312
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
313
+ display:none;
384
314
  }
385
315
 
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
- }
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);
316
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
317
+ display:block;
398
318
  }
399
319
 
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;
410
- }
320
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
321
+ display:flex;
322
+ flex-direction:column;
323
+ }
411
324
 
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;
325
+ @layer t-critical{
326
+ tds-page-header:not(.hydrated){
327
+ display:none;
328
+ }
418
329
  }
419
330
 
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;
420
349
 
421
- @media (prefers-reduced-motion: no-preference){
422
-
423
- :root{
424
- interpolate-size:allow-keywords;
425
- }
426
- }
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);
427
352
 
428
- @layer tds-component{
429
- tds-sidenav, .tds-sidenav{
430
- --tds-sidenav-indent:12px;
431
- --tds-sidenav-item-depth:0;
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);
432
356
 
433
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
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);
434
359
 
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);
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);
439
363
 
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;
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);
369
+ }
443
370
 
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);
371
+ .tds-page-header--profile{
372
+ --tds-page-header-padding-y:20px;
373
+ }
447
374
 
448
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
449
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
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
+ }
450
380
  }
451
381
 
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);
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
+ }
458
400
  }
459
401
  }
460
402
 
461
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
462
- display:flex;
463
- }
403
+ .tds-page-header{
404
+ display:flex;
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);
410
+ }
464
411
 
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%;
469
- }
412
+ .tds-page-header:not(.has-nav){
413
+ padding-bottom:var(--tds-page-header-padding-y);
414
+ }
470
415
 
471
- .tds-sidenav-section-list{
472
- width:100%;
473
- padding:0;
474
- margin:0;
475
- list-style:none;
416
+ .tds-page-header.inactive{
417
+ background:var(--tds-page-header-background-color-inactive);
476
418
  }
477
419
 
478
- .tds-sidenav-section-header{
420
+ .tds-page-header__title-bar{
479
421
  display:flex;
480
- align-items:baseline;
422
+ flex-direction:column;
423
+ gap:var(--t-spacing-2) var(--t-spacing-1);
424
+ align-items:flex-start;
481
425
  justify-content:space-between;
482
- padding-top:var(--t-spacing-2);
426
+ padding:0 var(--tds-page-header-padding-x);
483
427
  }
484
428
 
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
- }
429
+ .tds-page-header--profile > .tds-page-header__title-bar{
430
+ align-items:center;
431
+ }
493
432
 
494
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
495
- padding-top:0;
496
- }
433
+ .tds-page-header__primary{
434
+ width:100%;
435
+ }
497
436
 
498
- .tds-sidenav-section-header [slot="label-actions"]{
499
- display:flex;
500
- gap:var(--t-spacing-half);
501
- align-items:center;
502
- }
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
+ }
503
445
 
504
- .tds-sidenav-section [slot="section-actions"]{
446
+ .tds-page-header [slot="actions"],
447
+ .tds-page-header .tds-page-header__actions{
448
+ width:100%;
449
+ }
450
+
451
+ .has-multi-actions.tds-page-header [slot="actions"],
452
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
505
453
  display:flex;
506
- gap:12px;
507
- align-items:center;
508
- min-height:42px;
509
- padding:var(--t-spacing-1) 0;
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;
510
459
  }
511
460
 
512
- .tds-sidenav-section-list,
513
- .tds-sidenav-item{
514
- width:100%;
515
- padding:0;
516
- margin:0;
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);
517
472
  }
518
473
 
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
- }
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
+ }
541
497
 
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
- }
498
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
499
+ position:relative;
500
+ }
550
501
 
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
- }
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
+ }
556
506
 
557
- :is(.tds-sidenav-item :is(a,button)):active{
558
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
559
- }
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
+ }
560
518
 
561
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
562
- overflow:hidden;
563
- color:var(--tds-sidenav-item-icon-color);
564
- }
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
+ }
565
524
 
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
- }
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
+ }
571
534
 
572
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
573
- --tds-sidenav-indent:19px;
574
- }
535
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
536
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
537
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
538
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
539
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
540
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
541
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
542
+ }
575
543
 
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
- }
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
+ }
581
551
 
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);
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
+ }
585
561
 
586
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
587
- font-weight:var(--t-font-weight-semibold);
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%;
588
568
  }
589
569
 
590
- .tds-sidenav-item:has(.tds-sidenav-section){
591
- display:flex;
592
- flex-direction:column;
593
- gap:var(--t-spacing-half);
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;
594
575
  }
595
576
 
596
- .tds-sidenav-item .tds-sidenav-section-list{
597
- --tds-sidenav-item-depth:1;
598
- gap:0;
577
+ .tds-page-header [slot="actions"],
578
+ .tds-page-header .tds-page-header__actions{
579
+ width:auto;
599
580
  }
600
581
 
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
- }
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;
585
+ }
586
+ }
608
587
 
609
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
610
- --tds-sidenav-item-depth:2;
611
- }
588
+ .tds-page-header-phone,
589
+ .tds-page-header-email{
590
+ color:var(--tds-page-header-color);
591
+ white-space:nowrap;
592
+ }
612
593
 
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
- }
594
+ .tds-page-header-email{
595
+ max-width:100%;
596
+ overflow:hidden;
597
+ text-overflow:ellipsis;
598
+ }
620
599
 
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
- }
600
+ @keyframes indicator-pulse{
601
+ 0%{
602
+ opacity:.3;
603
+ transform:scale(.9);
604
+ }
631
605
 
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
- }
606
+ 100%{
607
+ opacity:0;
608
+ transform:scale(1.75);
609
+ }
610
+ }
642
611
 
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
- }
612
+ .tds-radio{
613
+ --tds-radio-font-size:var(--t-font-size-md);
614
+ --tds-radio-cursor:pointer;
615
+ --tds-radio-line-height:1.4;
616
+ --tds-radio-transition-property:border-width;
648
617
 
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
- }
618
+ --tds-radio-input-size:var(--t-element-size-md);
619
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
620
+ --tds-radio-input-border-color:var(--t-border-color-control-neutral);
621
+ --tds-radio-input-border-width:var(--t-border-width);
622
+ --tds-radio-input-background-color:transparent;
653
623
 
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
- }
624
+ --tds-radio-label-color:var(--t-text-color);
657
625
 
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
- }
626
+ --tds-radio-description-font-size:var(--t-font-size-sm);
627
+ --tds-radio-description-line-height:1.35;
628
+ --tds-radio-description-color:var(--t-text-color-secondary);
662
629
 
663
- .tds-sidenav-responsive-header{
664
- display:flex;
665
- gap:var(--t-spacing-2);
666
- align-items:center;
667
- width:100%;
630
+ position:relative;
631
+ display:inline-grid;
632
+ grid-template-columns:auto;
633
+ grid-auto-columns:1fr;
634
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
635
+ line-height:var(--tds-radio-line-height);
636
+ cursor:var(--tds-radio-cursor);
637
+ -webkit-user-select:none;
638
+ -moz-user-select:none;
639
+ user-select:none;
668
640
  }
669
641
 
670
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
671
- order:0;
642
+ .tds-radio label{
643
+ grid-area:1 / 2;
644
+ font-size:var(--tds-radio-font-size);
645
+ font-weight:var(--t-font-weight-normal);
646
+ color:var(--tds-radio-label-color);
647
+ cursor:var(--tds-radio-cursor);
672
648
  }
673
649
 
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);
650
+ .tds-radio input[type="radio"]{
651
+ position:relative;
652
+ width:1em;
653
+ height:1em;
654
+ margin:calc((1lh - 1em) / 2) 0 0;
655
+ font-size:var(--tds-radio-font-size);
656
+ line-height:inherit;
657
+ -webkit-appearance:none;
658
+ -moz-appearance:none;
659
+ appearance:none;
660
+ cursor:var(--tds-radio-cursor);
661
+ background-color:var(--tds-radio-input-background-color);
662
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
663
+ border-radius:var(--tds-radio-input-border-radius);
664
+ transition-timing-function:ease-in-out;
665
+ transition-duration:180ms;
666
+ transition-property:var(--tds-radio-transition-property);
681
667
  }
682
668
 
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;
698
- }
669
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
670
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
671
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
672
+ }
699
673
 
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;
708
- }
674
+ :is(.tds-radio input[type="radio"]):focus-visible{
675
+ outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
676
+ outline-offset:var(--t-spacing-fourth);
677
+ }
709
678
 
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;
679
+ :is(.tds-radio input[type="radio"]):disabled{
680
+ pointer-events:none;
716
681
  }
682
+
683
+ @media (prefers-reduced-motion: reduce){
684
+
685
+ .tds-radio input[type="radio"]{
686
+ --tds-radio-transition-property:none;
717
687
  }
718
- @supports not selector(:popover-open){
719
- .tds-sidenav-collapse.\:popover-open{
720
- display:flex;
721
688
  }
722
- }
723
- }
724
689
 
725
- @media (min-width: 720px){
726
- .tds-sidenav-responsive-header{
727
- display:none;
690
+ .tds-radio:has(input:checked){
691
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
692
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
693
+ --tds-radio-input-border-width:4px;
728
694
  }
729
- }
730
695
 
731
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
732
- display:none;
696
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
697
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
698
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
733
699
  }
734
700
 
735
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
736
- display:block;
701
+ .tds-radio:has(input:user-invalid){
702
+ --tds-radio-input-border-color:var(--t-border-color-control-error);
703
+ }
704
+
705
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
706
+ --tds-radio-input-border-color:var(--t-border-color-control-error);
707
+ --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
737
708
  }
738
709
 
739
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
740
- display:flex;
741
- flex-direction:column;
710
+ .tds-radio:has(input:disabled){
711
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-070);
712
+ --tds-radio-input-border-color:var(--t-border-color-control-disabled);
713
+
714
+ --tds-radio-label-color:var(--t-text-color-disabled);
715
+ --tds-radio-description-color:var(--t-text-color-disabled);
716
+ --tds-radio-cursor:not-allowed;
717
+ }
718
+
719
+ .tds-radio:has(input:disabled) input:checked{
720
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
721
+ --tds-radio-input-border-color:var(--t-border-color-control-disabled);
742
722
  }
743
723
 
724
+ .tds-radio-description{
725
+ display:flex;
726
+ grid-area:2 / 2;
727
+ gap:4px;
728
+ align-items:flex-start;
729
+ margin:0;
730
+ font-size:var(--tds-radio-description-font-size);
731
+ line-height:var(--tds-radio-description-line-height);
732
+ color:var(--tds-radio-description-color);
733
+ cursor:text;
734
+ }
735
+
736
+ .tds-radio--sm{
737
+ --tds-radio-line-height:1.35;
738
+ --tds-radio-input-size:var(--t-element-size-sm);
739
+ --tds-radio-font-size:var(--t-font-size-sm);
740
+ --tds-radio-description-font-size:var(--t-font-size-xs);
741
+ --tds-radio-description-line-height:1.3;
742
+ }
743
+
744
744
  .tds-checkbox{
745
745
  --tds-checkbox-font-size:var(--t-font-size-md);
746
746
  --tds-checkbox-cursor:pointer;