@planningcenter/tapestry 3.1.0-rc.10 → 3.1.0-rc.11

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 +932 -932
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +932 -932
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,1164 +1,1164 @@
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,
11
+ .tds-sidenav{
12
+ --tds-sidenav-indent:12px;
13
+ --tds-sidenav-item-depth:0;
25
14
 
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);
15
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
28
16
 
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);
17
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
18
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
19
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
20
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
32
21
 
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);
22
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
23
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
24
+ --tds-sidenav-item-nested-background-selected:transparent;
35
25
 
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);
26
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
27
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
28
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
39
29
 
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);
30
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
31
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
45
32
  }
46
33
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
34
+ .tds-sidenav--theme-gray{
35
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
36
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
37
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
38
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
39
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
49
40
  }
41
+ }
50
42
 
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
- }
43
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
44
+ display:flex;
56
45
  }
57
46
 
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
- }
47
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
48
+ flex-direction:column;
49
+ gap:var(--t-spacing-half);
50
+ width:100%;
76
51
  }
52
+
53
+ .tds-sidenav-section-list{
54
+ width:100%;
55
+ padding:0;
56
+ margin:0;
57
+ list-style:none;
77
58
  }
78
59
 
79
- .tds-page-header{
60
+ .tds-sidenav-section-header{
80
61
  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);
62
+ align-items:baseline;
63
+ justify-content:space-between;
64
+ padding-top:var(--t-spacing-2);
86
65
  }
87
66
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
90
- }
67
+ .tds-sidenav-section-header h2{
68
+ margin:0;
69
+ font-size:var(--t-font-size-sm);
70
+ font-weight:var(--t-font-weight-semibold);
71
+ line-height:1.35;
72
+ color:var(--t-text-color-secondary);
73
+ text-transform:uppercase;
74
+ }
91
75
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
94
- }
76
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
77
+ padding-top:0;
78
+ }
95
79
 
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
- }
80
+ .tds-sidenav-section-header [slot="label-actions"]{
81
+ display:flex;
82
+ gap:var(--t-spacing-half);
83
+ align-items:center;
84
+ }
104
85
 
105
- .tds-page-header--profile > .tds-page-header__title-bar{
86
+ .tds-sidenav-section [slot="section-actions"]{
87
+ display:flex;
88
+ gap:12px;
106
89
  align-items:center;
90
+ min-height:42px;
91
+ padding:var(--t-spacing-1) 0;
107
92
  }
108
93
 
109
- .tds-page-header__primary{
94
+ .tds-sidenav-section-list,
95
+ .tds-sidenav-item{
110
96
  width:100%;
111
- }
112
-
113
- .tds-page-header__primary h1{
97
+ padding:0;
114
98
  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
99
  }
121
100
 
122
- .tds-page-header [slot="actions"],
123
- .tds-page-header .tds-page-header__actions{
124
- width:100%;
125
- }
101
+ .tds-sidenav-item :is(a,button){
102
+ position:relative;
103
+ display:flex;
104
+ gap:12px;
105
+ align-items:center;
106
+ width:100%;
107
+ padding:12px;
108
+ overflow:hidden;
109
+ font-size:var(--t-font-size-sm);
110
+ line-height:18px;
111
+ color:var(--t-text-color-headline);
112
+ white-space:nowrap;
113
+ text-decoration:none;
114
+ -webkit-appearance:none;
115
+ -moz-appearance:none;
116
+ appearance:none;
117
+ cursor:pointer;
118
+ background-color:var(--tds-sidenav-item-background, transparent);
119
+ border:0;
120
+ border-radius:var(--t-border-radius);
121
+ transition:var(--tds-sidenav-item-transition);
122
+ }
126
123
 
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
- }
124
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
125
+ display:block;
126
+ flex:1;
127
+ overflow:hidden;
128
+ text-overflow:ellipsis;
129
+ text-align:left;
130
+ white-space:nowrap;
131
+ }
136
132
 
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
- }
133
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
134
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
135
+ color:var(--t-text-color-headline);
136
+ text-decoration:none;
137
+ }
149
138
 
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
- }
139
+ :is(.tds-sidenav-item :is(a,button)):active{
140
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
141
+ }
173
142
 
174
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
175
- position:relative;
176
- }
143
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
144
+ overflow:hidden;
145
+ color:var(--tds-sidenav-item-icon-color);
146
+ }
177
147
 
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
- }
210
-
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
- }
219
-
220
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
221
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
222
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
223
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
224
- background-color:var(--tds-page-header-nav-item-background-color-active);
225
- border-color:var(--tds-page-header-nav-item-border-color-active);
226
- }
227
-
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
- }
237
-
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%;
244
- }
245
-
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;
251
- }
252
-
253
- .tds-page-header [slot="actions"],
254
- .tds-page-header .tds-page-header__actions{
255
- width:auto;
256
- }
257
-
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
- }
148
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
149
+ display:block;
150
+ width:var(--tds-sidenav-item-icon-size);
151
+ height:var(--tds-sidenav-item-icon-size);
152
+ }
263
153
 
264
- .tds-page-header-phone,
265
- .tds-page-header-email{
266
- color:var(--tds-page-header-color);
267
- white-space:nowrap;
268
- }
154
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
155
+ --tds-sidenav-indent:19px;
156
+ }
269
157
 
270
- .tds-page-header-email{
271
- max-width:100%;
272
- overflow:hidden;
273
- text-overflow:ellipsis;
274
- }
158
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
159
+ visibility:visible;
160
+ block-size:auto;
161
+ opacity:1;
162
+ }
275
163
 
276
- @keyframes indicator-pulse{
277
- 0%{
278
- opacity:.3;
279
- transform:scale(.9);
280
- }
164
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
165
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
166
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
281
167
 
282
- 100%{
283
- opacity:0;
284
- transform:scale(1.75);
168
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
169
+ font-weight:var(--t-font-weight-semibold);
285
170
  }
286
- }
287
-
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;
293
-
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-form-border-color);
297
- --tds-radio-input-border-width:var(--t-form-border-width);
298
- --tds-radio-input-background-color:transparent;
299
171
 
300
- --tds-radio-label-color:var(--t-form-color);
301
-
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);
305
-
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;
316
- }
317
-
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);
172
+ .tds-sidenav-item:has(.tds-sidenav-section){
173
+ display:flex;
174
+ flex-direction:column;
175
+ gap:var(--t-spacing-half);
324
176
  }
325
177
 
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);
178
+ .tds-sidenav-item .tds-sidenav-section-list{
179
+ --tds-sidenav-item-depth:1;
180
+ gap:0;
343
181
  }
344
182
 
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:var(--t-focus-ring-outline);
352
- outline-offset:var(--t-focus-ring-offset);
183
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
184
+ visibility:hidden;
185
+ block-size:0;
186
+ overflow-y:clip;
187
+ opacity:0;
188
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
353
189
  }
354
190
 
355
- :is(.tds-radio input[type="radio"]):disabled{
356
- pointer-events:none;
191
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
192
+ --tds-sidenav-item-depth:2;
357
193
  }
358
194
 
359
- @media (prefers-reduced-motion: reduce){
360
-
361
- .tds-radio input[type="radio"]{
362
- --tds-radio-transition-property:none;
363
- }
195
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
196
+ min-height:var(--t-element-size-2xl);
197
+ padding-block:9px;
198
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
199
+ line-height:1;
200
+ background-color:transparent;
364
201
  }
365
202
 
366
- .tds-radio:has(input:checked){
367
- --tds-radio-input-background-color:var(--t-form-background-color);
368
- --tds-radio-input-border-color:var(--t-border-color-control-info);
369
- --tds-radio-input-border-width:4px;
370
- }
371
-
372
- .tds-radio:has(input:checked) input:hover:not(:disabled){
373
- --tds-radio-input-background-color:var(--t-form-background-color);
374
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
375
- }
203
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
204
+ position:absolute;
205
+ top:0;
206
+ bottom:0;
207
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
208
+ width:2px;
209
+ content:"";
210
+ background-color:var(--tds-sidenav-item-nested-border-color);
211
+ transition:var(--tds-sidenav-item-transition);
212
+ }
376
213
 
377
- .tds-radio:has(input:user-invalid){
378
- --tds-radio-input-border-color:var(--t-form-border-color-error);
379
- }
214
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
215
+ position:absolute;
216
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
217
+ z-index:-1;
218
+ height:100%;
219
+ content:"";
220
+ background-color:var(--tds-sidenav-item-nested-background);
221
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
222
+ transition:var(--tds-sidenav-item-transition);
223
+ }
380
224
 
381
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
382
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
383
- --tds-radio-input-background-color:var(--t-form-background-color-error);
384
- }
225
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
226
+ display:block;
227
+ text-align:left;
228
+ white-space:normal;
229
+ }
385
230
 
386
- .tds-radio:has(input:disabled){
387
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
388
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
232
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
233
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
234
+ }
389
235
 
390
- --tds-radio-label-color:var(--t-form-color-disabled);
391
- --tds-radio-description-color:var(--t-form-color-disabled);
392
- --tds-radio-cursor:not-allowed;
393
- }
236
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
237
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
238
+ }
394
239
 
395
- .tds-radio:has(input:disabled) input:checked{
396
- --tds-radio-input-background-color:var(--t-form-background-color);
397
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
240
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
241
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
242
+ font-weight:var(--t-font-weight-medium);
398
243
  }
399
244
 
400
- .tds-radio-description{
245
+ .tds-sidenav-responsive-header{
401
246
  display:flex;
402
- grid-area:2 / 2;
403
- gap:var(--t-spacing-half);
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
- }
411
-
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;
418
- }
419
-
420
- .tds-checkbox{
421
- --tds-checkbox-font-size:var(--t-font-size-md);
422
- --tds-checkbox-cursor:pointer;
423
- --tds-checkbox-line-height:1.4;
424
- --tds-checkbox-transition-property:background-color, border-color;
425
-
426
- --tds-checkbox-input-size:var(--t-element-size-md);
427
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
428
- --tds-checkbox-input-border-color:var(--t-form-border-color);
429
- --tds-checkbox-input-background-color:transparent;
430
-
431
- --tds-checkbox-input-icon:none;
432
- --tds-checkbox-input-icon-visibility:hidden;
433
- --tds-checkbox-input-icon-opacity:0;
434
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
435
-
436
- --tds-checkbox-label-color:var(--t-form-color);
437
-
438
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
439
- --tds-checkbox-description-line-height:1.35;
440
- --tds-checkbox-description-color:var(--t-text-color-secondary);
441
- --tds-checkbox-description-invalid-icon-display:none;
442
-
443
- position:relative;
444
- display:inline-grid;
445
- grid-template-columns:auto;
446
- grid-auto-columns:1fr;
447
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
448
- line-height:var(--tds-checkbox-line-height);
449
- cursor:var(--tds-checkbox-cursor);
450
- -webkit-user-select:none;
451
- -moz-user-select:none;
452
- user-select:none;
247
+ gap:var(--t-spacing-2);
248
+ align-items:center;
249
+ width:100%;
453
250
  }
454
251
 
455
- .tds-checkbox label{
456
- grid-area:1 / 2;
457
- font-size:var(--tds-checkbox-font-size);
458
- font-weight:var(--t-font-weight-normal);
459
- color:var(--tds-checkbox-label-color);
460
- cursor:var(--tds-checkbox-cursor);
252
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
253
+ order:0;
461
254
  }
462
255
 
463
- .tds-checkbox input[type="checkbox"]{
464
- position:relative;
465
- width:1em;
466
- height:1em;
467
- margin:calc((1lh - 1em) / 2) 0 0;
468
- font-size:var(--tds-checkbox-font-size);
469
- line-height:inherit;
470
- -webkit-appearance:none;
471
- -moz-appearance:none;
472
- appearance:none;
473
- cursor:var(--tds-checkbox-cursor);
474
- background-color:var(--tds-checkbox-input-background-color);
475
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
476
- border-radius:var(--tds-checkbox-input-border-radius);
477
- transition-timing-function:ease-in-out;
478
- transition-duration:180ms;
479
- transition-property:var(--tds-checkbox-transition-property);
256
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
257
+ flex:1;
258
+ order:1;
259
+ margin:0;
260
+ font-size:var(--t-font-size-lg);
261
+ font-weight:var(--t-font-weight-medium);
262
+ color:var(--t-text-color-headline);
480
263
  }
481
264
 
482
- :is(.tds-checkbox input[type="checkbox"])::before{
483
- position:absolute;
484
- top:50%;
485
- left:50%;
486
- visibility:var(--tds-checkbox-input-icon-visibility);
487
- width:100%;
488
- height:100%;
489
- content:"";
490
- background-color:var(--tds-checkbox-input-icon-fill);
491
- border-radius:var(--tds-checkbox-input-border-radius);
492
- opacity:var(--tds-checkbox-input-icon-opacity);
493
- -webkit-mask-image:var(--tds-checkbox-input-icon);
494
- mask-image:var(--tds-checkbox-input-icon);
495
- -webkit-mask-repeat:no-repeat;
496
- mask-repeat:no-repeat;
497
- -webkit-mask-size:contain;
498
- mask-size:contain;
499
- transform:translate(-50%, -50%);
500
- }
265
+ @media (max-width: 719px){
266
+ .tds-sidenav-collapse{
267
+ z-index:10001;
268
+ display:none;
269
+ max-width:min(448px, calc(100vw - 48px));
270
+ padding:0;
271
+ margin:12px 0;
272
+ overflow:hidden;
273
+ outline:0;
274
+ background:var(--t-surface-color-card);
275
+ border:0;
276
+ border-radius:6px;
277
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
278
+ will-change:transform;
279
+ position-area:bottom span-right;
280
+ }
501
281
 
502
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
503
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
504
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
505
- }
282
+ .tds-sidenav-scroll-container{
283
+ --webkit-overflow-scrolling:touch;
284
+ display:block;
285
+ width:100%;
286
+ height:-moz-fit-content;
287
+ height:fit-content;
288
+ padding:var(--t-spacing-2);
289
+ overflow-y:auto;
290
+ }
506
291
 
507
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
508
- outline:var(--t-focus-ring-outline);
509
- outline-offset:var(--t-focus-ring-offset);
292
+ .tds-sidenav-item :is(a, button) :is(.prefix){
293
+ display:none;
294
+ }
295
+ @supports selector(:popover-open){
296
+ .tds-sidenav-collapse:popover-open{
297
+ display:flex;
510
298
  }
511
-
512
- :is(.tds-checkbox input[type="checkbox"]):disabled{
513
- pointer-events:none;
299
+ }
300
+ @supports not selector(:popover-open){
301
+ .tds-sidenav-collapse.\:popover-open{
302
+ display:flex;
514
303
  }
304
+ }
305
+ }
515
306
 
516
- @media (prefers-reduced-motion: reduce){
517
-
518
- .tds-checkbox input[type="checkbox"]{
519
- --tds-checkbox-transition-property:none;
307
+ @media (min-width: 720px){
308
+ .tds-sidenav-responsive-header{
309
+ display:none;
520
310
  }
311
+ }
312
+
313
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
314
+ display:none;
521
315
  }
522
316
 
523
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
524
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
525
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
526
- --tds-checkbox-input-icon-visibility:visible;
527
- --tds-checkbox-input-icon-opacity:1;
528
- }
317
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
318
+ display:block;
319
+ }
529
320
 
530
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
531
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
532
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
321
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
322
+ display:flex;
323
+ flex-direction:column;
533
324
  }
534
325
 
535
- .tds-checkbox:has(input:checked){
536
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
326
+ @layer t-critical{
327
+ tds-page-header:not(.hydrated){
328
+ display:none;
537
329
  }
330
+ }
538
331
 
539
- .tds-checkbox:has(input:indeterminate){
540
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
332
+ @layer t-component{
333
+ .tds-page-header{
334
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
335
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
336
+ --tds-page-header-color:var(--t-text-color);
337
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
338
+ --tds-page-header-headline-color:var(--t-text-color-headline);
339
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
340
+ --tds-page-header-padding-x:var(--t-spacing-2);
341
+ --tds-page-header-padding-y:var(--t-spacing-2);
342
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
343
+ --tds-page-header-nav-gap:var(--t-spacing-1);
344
+ --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%);
345
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
346
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
347
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
348
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
349
+ --tds-page-header-nav-item-border-width:1px;
350
+
351
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
352
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
353
+
354
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
355
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
356
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
357
+
358
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
359
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
360
+
361
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
362
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
363
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
364
+
365
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
366
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
367
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
368
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
369
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
541
370
  }
542
371
 
543
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
544
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
545
- --tds-checkbox-description-color:var(--t-text-color-status-error);
546
- --tds-checkbox-description-invalid-icon-display:inline-block;
372
+ .tds-page-header--profile{
373
+ --tds-page-header-padding-y:20px;
547
374
  }
548
375
 
549
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
550
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
551
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
376
+ @supports (color: light-dark(#fff, #000)){
377
+ .tds-page-header{
378
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
379
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
552
380
  }
381
+ }
553
382
 
554
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
555
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
556
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
383
+ @media (min-width: 600px){
384
+ .tds-page-header{
385
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
386
+ --tds-page-header-color:var(--t-text-color-secondary);
387
+ --tds-page-header-bottom-border-color:var(--t-border-color);
388
+ --tds-page-header-padding-x:var(--t-spacing-3);
389
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
390
+ --tds-page-header-nav-gap:var(--t-spacing-half);
391
+ --tds-page-header-nav-background:transparent;
392
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
393
+ --tds-page-header-nav-item-border-width:1px;
394
+ --tds-page-header-nav-item-color:var(--t-text-color);
395
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
396
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
397
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
398
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
399
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
557
400
  }
401
+ }
402
+ }
558
403
 
559
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
560
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
561
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
562
- }
404
+ .tds-page-header{
405
+ display:flex;
406
+ flex-direction:column;
407
+ padding-top:var(--tds-page-header-padding-y);
408
+ color:var(--tds-page-header-color);
409
+ background:var(--tds-page-header-background-color);
410
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
411
+ }
563
412
 
564
- .tds-checkbox:has(input:required) label::after{
565
- margin-left:.25ch;
566
- color:var(--t-text-color-status-error);
567
- content:"*";
568
- }
413
+ .tds-page-header:not(.has-nav){
414
+ padding-bottom:var(--tds-page-header-padding-y);
415
+ }
569
416
 
570
- .tds-checkbox:has(input:disabled){
571
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
572
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
417
+ .tds-page-header.inactive{
418
+ background:var(--tds-page-header-background-color-inactive);
419
+ }
573
420
 
574
- --tds-checkbox-label-color:var(--t-form-color-disabled);
575
- --tds-checkbox-description-color:var(--t-form-color-disabled);
576
- --tds-checkbox-cursor:not-allowed;
577
- }
421
+ .tds-page-header__title-bar{
422
+ display:flex;
423
+ flex-direction:column;
424
+ gap:var(--t-spacing-2) var(--t-spacing-1);
425
+ align-items:flex-start;
426
+ justify-content:space-between;
427
+ padding:0 var(--tds-page-header-padding-x);
428
+ }
429
+
430
+ .tds-page-header--profile > .tds-page-header__title-bar{
431
+ align-items:center;
432
+ }
433
+
434
+ .tds-page-header__primary{
435
+ width:100%;
436
+ }
437
+
438
+ .tds-page-header__primary h1{
439
+ margin:0;
440
+ font-size:var(--tds-page-header-headline-font-size);
441
+ font-weight:var(--t-font-weight-normal);
442
+ line-height:32px;
443
+ color:var(--tds-page-header-headline-color);
444
+ overflow-wrap:break-word;
445
+ }
578
446
 
579
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
580
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
581
- }
447
+ .tds-page-header [slot="actions"],
448
+ .tds-page-header .tds-page-header__actions{
449
+ width:100%;
450
+ }
582
451
 
583
- .tds-checkbox-description{
452
+ .has-multi-actions.tds-page-header [slot="actions"],
453
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
584
454
  display:flex;
585
- grid-area:2 / 2;
586
- gap:var(--t-spacing-half);
455
+ flex-flow:row wrap;
456
+ gap:var(--t-spacing-half) var(--t-spacing-1);
587
457
  align-items:flex-start;
588
- margin:0;
589
- font-size:var(--tds-checkbox-description-font-size);
590
- line-height:var(--tds-checkbox-description-line-height);
591
- color:var(--tds-checkbox-description-color);
592
- cursor:text;
458
+ justify-content:flex-start;
459
+ min-width:0;
593
460
  }
594
461
 
595
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
596
- display:var(--tds-checkbox-description-invalid-icon-display);
597
- flex-shrink:0;
598
- margin-top:calc(.5lh - .5em);
599
- line-height:var(--tds-checkbox-description-line-height);
600
- }
601
-
602
- .tds-checkbox--sm{
603
- --tds-checkbox-line-height:1.35;
604
- --tds-checkbox-input-size:var(--t-element-size-sm);
605
- --tds-checkbox-font-size:var(--t-font-size-sm);
606
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
607
- --tds-checkbox-description-line-height:1.3;
462
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
463
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
464
+ .tds-page-header nav[slot="navigation"] ul,
465
+ .tds-page-header nav.tds-page-header__nav ul{
466
+ display:flex;
467
+ gap:var(--tds-page-header-nav-gap);
468
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
469
+ margin:0 0 -1px;
470
+ overflow:auto;
471
+ list-style:none;
472
+ background:var(--tds-page-header-nav-background);
608
473
  }
609
474
 
610
- .tds-radio-group{
611
- --tds-radio-group-font-size:var(--t-font-size-md);
612
- --tds-radio-group-line-height:1.4;
613
- --tds-radio-group-gap:var(--t-spacing-1);
475
+ .tds-page-header nav[slot="navigation"] a,
476
+ .tds-page-header nav[slot="navigation"] button,
477
+ .tds-page-header nav.tds-page-header__nav a,
478
+ .tds-page-header nav.tds-page-header__nav button{
479
+ position:relative;
480
+ display:inline-flex;
481
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
482
+ font-size:var(--t-font-size-sm);
483
+ line-height:22px;
484
+ color:var(--tds-page-header-nav-item-color);
485
+ white-space:nowrap;
486
+ text-decoration:none;
487
+ -webkit-appearance:none;
488
+ -moz-appearance:none;
489
+ appearance:none;
490
+ cursor:pointer;
491
+ outline-offset:-2px;
492
+ background-color:var(--tds-page-header-nav-item-background-color);
493
+ background-clip:padding-box;
494
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
495
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
496
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
497
+ }
614
498
 
615
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
499
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
500
+ position:relative;
501
+ }
616
502
 
617
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
618
- --tds-radio-group-description-line-height:1.35;
619
- --tds-radio-group-description-color:var(--t-text-color-secondary);
620
- --tds-radio-group-description-invalid-icon-display:none;
621
- display:flex;
622
- flex-direction:column;
623
- gap:var(--tds-radio-group-gap);
624
- padding:0;
625
- margin:0;
503
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
504
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
505
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
506
+ }
626
507
 
627
- font-size:var(--tds-radio-group-font-size);
628
- line-height:var(--tds-radio-group-line-height);
629
- border:0;
508
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
509
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
510
+ position:absolute;
511
+ top:-5px;
512
+ right:-2px;
513
+ width:10px;
514
+ height:10px;
515
+ content:"";
516
+ background:var(--tds-page-header-nav-item-indicator-color);
517
+ border-radius:50%;
630
518
  }
631
519
 
632
- .tds-radio-group legend{
633
- padding:0;
634
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
520
+ @media (prefers-reduced-motion: no-preference){
521
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
522
+ animation:indicator-pulse 1.25s ease infinite;
635
523
  }
524
+ }
636
525
 
637
- .tds-radio-group:has(.tds-radio-group-description){
638
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
639
- }
526
+ .tds-page-header nav[slot="navigation"] a.selected,
527
+ .tds-page-header nav[slot="navigation"] button.selected,
528
+ .tds-page-header nav.tds-page-header__nav a.selected,
529
+ .tds-page-header nav.tds-page-header__nav button.selected{
530
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
531
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
532
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
533
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
534
+ }
640
535
 
641
- .tds-radio-group[aria-invalid="true"]{
642
- --tds-radio-group-description-color:var(--t-text-color-status-error);
643
- --tds-radio-group-description-invalid-icon-display:inline-block;
644
- }
536
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
537
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
538
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
539
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
540
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
541
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
542
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
543
+ }
645
544
 
646
- .tds-radio-group[aria-invalid="true"] .tds-radio{
647
- --tds-radio-input-border-color:var(--t-form-border-color-error);
648
- }
545
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
546
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
547
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
548
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
549
+ background-color:var(--tds-page-header-nav-item-background-color-active);
550
+ border-color:var(--tds-page-header-nav-item-border-color-active);
551
+ }
649
552
 
650
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
651
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
652
- --tds-radio-input-background-color:var(--t-form-background-color-error);
653
- }
553
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
554
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
555
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
556
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
557
+ color:var(--tds-page-header-nav-item-color-disabled);
558
+ cursor:not-allowed;
559
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
560
+ opacity:1;
561
+ }
654
562
 
655
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
656
- --tds-radio-input-background-color:var(--t-form-background-color);
657
- }
563
+ @media (min-width: 960px){
564
+ .tds-page-header__primary{
565
+ flex:1 1 max-content;
566
+ width:auto;
567
+ min-width:0;
568
+ max-width:100%;
569
+ }
658
570
 
659
- .tds-radio-group:has(input:required) legend::after{
660
- margin-left:.25ch;
661
- color:var(--t-text-color-status-error);
662
- content:"*";
663
- }
571
+ .tds-page-header__title-bar,
572
+ .tds-page-header--profile .tds-page-header__title-bar{
573
+ flex-flow:row nowrap;
574
+ row-gap:12px;
575
+ align-items:flex-start;
576
+ }
664
577
 
665
- .tds-radio-group-fields{
666
- display:flex;
667
- flex-direction:column;
668
- gap:var(--tds-radio-group-gap);
669
- align-items:flex-start;
578
+ .tds-page-header [slot="actions"],
579
+ .tds-page-header .tds-page-header__actions{
580
+ width:auto;
581
+ }
582
+
583
+ .has-multi-actions.tds-page-header [slot="actions"],
584
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
585
+ justify-content:flex-end;
586
+ }
670
587
  }
671
588
 
672
- .tds-radio-group-description{
673
- display:flex;
674
- gap:var(--t-spacing-half);
675
- align-items:flex-start;
676
- margin:0;
677
- font-size:var(--tds-radio-group-description-font-size);
678
- line-height:var(--tds-radio-group-description-line-height);
679
- color:var(--tds-radio-group-description-color);
680
- cursor:text;
589
+ .tds-page-header-phone,
590
+ .tds-page-header-email{
591
+ color:var(--tds-page-header-color);
592
+ white-space:nowrap;
681
593
  }
682
594
 
683
- .tds-radio-group-description-invalid-icon{
684
- display:var(--tds-radio-group-description-invalid-icon-display);
685
- flex-shrink:0;
686
- margin-top:calc(.5lh - .5em);
687
- line-height:var(--tds-radio-group-description-line-height);
595
+ .tds-page-header-email{
596
+ max-width:100%;
597
+ overflow:hidden;
598
+ text-overflow:ellipsis;
688
599
  }
689
600
 
690
- .tds-radio-group--sm{
691
- --tds-radio-group-line-height:1.35;
692
- --tds-radio-group-font-size:var(--t-font-size-sm);
693
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
694
- --tds-radio-group-description-line-height:1.3;
601
+ @keyframes indicator-pulse{
602
+ 0%{
603
+ opacity:.3;
604
+ transform:scale(.9);
605
+ }
606
+
607
+ 100%{
608
+ opacity:0;
609
+ transform:scale(1.75);
610
+ }
695
611
  }
696
612
 
697
- .tds-toggle-switch{
698
- --tds-toggle-switch-font-size:var(--t-font-size-md);
699
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
700
- --tds-toggle-switch-cursor:pointer;
701
- --tds-toggle-switch-display:inline-grid;
702
- --tds-toggle-switch-line-height:1.4;
613
+ .tds-checkbox{
614
+ --tds-checkbox-font-size:var(--t-font-size-md);
615
+ --tds-checkbox-cursor:pointer;
616
+ --tds-checkbox-line-height:1.4;
617
+ --tds-checkbox-transition-property:background-color, border-color;
703
618
 
704
- --tds-toggle-switch-label-color:var(--t-form-color);
619
+ --tds-checkbox-input-size:var(--t-element-size-md);
620
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
621
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
622
+ --tds-checkbox-input-background-color:transparent;
705
623
 
706
- --tds-toggle-switch-track-width:var(--t-container-size-md);
707
- --tds-toggle-switch-track-outline:none;
708
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
709
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
710
- --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
624
+ --tds-checkbox-input-icon:none;
625
+ --tds-checkbox-input-icon-visibility:hidden;
626
+ --tds-checkbox-input-icon-opacity:0;
627
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
711
628
 
712
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
713
- --tds-toggle-switch-thumb-transform:translateX(0);
714
- --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
629
+ --tds-checkbox-label-color:var(--t-form-color);
715
630
 
716
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
717
- --tds-toggle-switch-description-line-height:1.35;
718
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
719
- position:relative;
631
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
632
+ --tds-checkbox-description-line-height:1.35;
633
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
634
+ --tds-checkbox-description-invalid-icon-display:none;
720
635
 
721
- display:var(--tds-toggle-switch-display);
636
+ position:relative;
637
+ display:inline-grid;
722
638
  grid-template-columns:auto;
723
639
  grid-auto-columns:1fr;
724
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
640
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
641
+ line-height:var(--tds-checkbox-line-height);
642
+ cursor:var(--tds-checkbox-cursor);
725
643
  -webkit-user-select:none;
726
644
  -moz-user-select:none;
727
645
  user-select:none;
728
646
  }
729
647
 
730
- .tds-toggle-switch input[type="checkbox"]{
731
- position:absolute;
732
- width:var(--tds-toggle-switch-track-width);
733
- height:var(--tds-toggle-switch-track-height);
734
- margin:0;
648
+ .tds-checkbox label{
649
+ grid-area:1 / 2;
650
+ font-size:var(--tds-checkbox-font-size);
651
+ font-weight:var(--t-font-weight-normal);
652
+ color:var(--tds-checkbox-label-color);
653
+ cursor:var(--tds-checkbox-cursor);
654
+ }
655
+
656
+ .tds-checkbox input[type="checkbox"]{
657
+ position:relative;
658
+ width:1em;
659
+ height:1em;
660
+ margin:calc((1lh - 1em) / 2) 0 0;
661
+ font-size:var(--tds-checkbox-font-size);
662
+ line-height:inherit;
735
663
  -webkit-appearance:none;
736
664
  -moz-appearance:none;
737
665
  appearance:none;
738
- cursor:var(--tds-toggle-switch-cursor);
739
- outline:var(--tds-toggle-switch-track-outline);
740
- outline-offset:var(--t-focus-ring-offset);
741
- background-color:transparent;
742
- border:0;
743
- border-radius:var(--t-border-radius-round);
666
+ cursor:var(--tds-checkbox-cursor);
667
+ background-color:var(--tds-checkbox-input-background-color);
668
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
669
+ border-radius:var(--tds-checkbox-input-border-radius);
670
+ transition-timing-function:ease-in-out;
671
+ transition-duration:180ms;
672
+ transition-property:var(--tds-checkbox-transition-property);
744
673
  }
745
674
 
746
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
747
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
675
+ :is(.tds-checkbox input[type="checkbox"])::before{
676
+ position:absolute;
677
+ top:50%;
678
+ left:50%;
679
+ visibility:var(--tds-checkbox-input-icon-visibility);
680
+ width:100%;
681
+ height:100%;
682
+ content:"";
683
+ background-color:var(--tds-checkbox-input-icon-fill);
684
+ border-radius:var(--tds-checkbox-input-border-radius);
685
+ opacity:var(--tds-checkbox-input-icon-opacity);
686
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
687
+ mask-image:var(--tds-checkbox-input-icon);
688
+ -webkit-mask-repeat:no-repeat;
689
+ mask-repeat:no-repeat;
690
+ -webkit-mask-size:contain;
691
+ mask-size:contain;
692
+ transform:translate(-50%, -50%);
748
693
  }
749
694
 
750
- .tds-toggle-switch label{
751
- display:inline-flex;
752
- grid-area:1 / 2;
753
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
754
- column-gap:var(--tds-toggle-switch-column-gap);
755
- margin-top:-.09375em;
756
- font-size:var(--tds-toggle-switch-font-size);
757
- font-weight:var(--t-font-weight-normal);
758
- line-height:var(--tds-toggle-switch-line-height);
759
- color:var(--tds-toggle-switch-label-color);
760
- cursor:var(--tds-toggle-switch-cursor);
761
- }
695
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
696
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
697
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
698
+ }
762
699
 
763
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
764
- --tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
765
- }
700
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
701
+ outline:var(--t-focus-ring-outline);
702
+ outline-offset:var(--t-focus-ring-offset);
703
+ }
766
704
 
767
- .tds-toggle-switch:has(input:checked){
768
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control);
769
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
770
- }
705
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
706
+ pointer-events:none;
707
+ }
771
708
 
772
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
773
- --tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
709
+ @media (prefers-reduced-motion: reduce){
710
+
711
+ .tds-checkbox input[type="checkbox"]{
712
+ --tds-checkbox-transition-property:none;
713
+ }
774
714
  }
775
715
 
776
- .tds-toggle-switch:has(input:disabled){
777
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
778
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
779
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
780
- --tds-toggle-switch-cursor:not-allowed;
716
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
717
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
718
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
719
+ --tds-checkbox-input-icon-visibility:visible;
720
+ --tds-checkbox-input-icon-opacity:1;
781
721
  }
782
722
 
783
- .tds-toggle-switch-track{
784
- position:relative;
785
- flex-shrink:0;
786
- width:var(--tds-toggle-switch-track-width);
787
- height:var(--tds-toggle-switch-track-height);
788
- background-color:var(--tds-toggle-switch-track-background-color);
789
- border-radius:var(--t-border-radius-round);
790
- transition:var(--tds-toggle-switch-track-transition);
791
- }
723
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
724
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
725
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
726
+ }
792
727
 
793
- .tds-toggle-switch-track::before{
794
- position:absolute;
795
- top:var(--t-spacing-fourth);
796
- left:var(--t-spacing-fourth);
797
- width:var(--tds-toggle-switch-thumb-size);
798
- height:var(--tds-toggle-switch-thumb-size);
799
- content:"";
800
- background-color:#fff;
801
- border-radius:var(--t-border-radius-round);
802
- transform:var(--tds-toggle-switch-thumb-transform);
803
- transition:var(--tds-toggle-switch-thumb-transition);
728
+ .tds-checkbox:has(input:checked){
729
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
804
730
  }
805
731
 
806
- @media (prefers-reduced-motion: reduce){
732
+ .tds-checkbox:has(input:indeterminate){
733
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
734
+ }
807
735
 
808
- .tds-toggle-switch-track{
809
- --tds-toggle-switch-track-transition:none;
810
- --tds-toggle-switch-thumb-transition:none;
811
- }
736
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
737
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
738
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
739
+ --tds-checkbox-description-invalid-icon-display:inline-block;
812
740
  }
813
741
 
814
- .tds-toggle-switch-description{
815
- display:flex;
816
- grid-area:2 / 2;
817
- align-items:flex-start;
818
- margin:0;
819
- font-size:var(--tds-toggle-switch-description-font-size);
820
- line-height:var(--tds-toggle-switch-description-line-height);
821
- color:var(--tds-toggle-switch-description-color);
822
- cursor:text;
823
- }
742
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
743
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
744
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
745
+ }
824
746
 
825
- .tds-toggle-switch--sm{
826
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
827
- --tds-toggle-switch-line-height:1.35;
828
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
829
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
830
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
831
- --tds-toggle-switch-description-line-height:1.3;
832
- }
747
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
748
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
749
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
750
+ }
833
751
 
834
- .tds-toggle-switch--hide-label{
835
- --tds-toggle-switch-display:inline-flex;
836
- }
752
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
753
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
754
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
755
+ }
837
756
 
757
+ .tds-checkbox:has(input:required) label::after{
758
+ margin-left:.25ch;
759
+ color:var(--t-text-color-status-error);
760
+ content:"*";
761
+ }
838
762
 
839
- @media (prefers-reduced-motion: no-preference){
763
+ .tds-checkbox:has(input:disabled){
764
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
765
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
840
766
 
841
- :root{
842
- interpolate-size:allow-keywords;
843
- }
767
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
768
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
769
+ --tds-checkbox-cursor:not-allowed;
844
770
  }
845
771
 
846
- @layer tds-component{
847
- tds-sidenav,
848
- .tds-sidenav{
849
- --tds-sidenav-indent:12px;
850
- --tds-sidenav-item-depth:0;
851
-
852
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
853
-
854
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
855
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
856
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
857
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
858
-
859
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
860
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
861
- --tds-sidenav-item-nested-background-selected:transparent;
772
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
773
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
774
+ }
862
775
 
863
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
864
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
865
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
776
+ .tds-checkbox-description{
777
+ display:flex;
778
+ grid-area:2 / 2;
779
+ gap:var(--t-spacing-half);
780
+ align-items:flex-start;
781
+ margin:0;
782
+ font-size:var(--tds-checkbox-description-font-size);
783
+ line-height:var(--tds-checkbox-description-line-height);
784
+ color:var(--tds-checkbox-description-color);
785
+ cursor:text;
786
+ }
866
787
 
867
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
868
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
788
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
789
+ display:var(--tds-checkbox-description-invalid-icon-display);
790
+ flex-shrink:0;
791
+ margin-top:calc(.5lh - .5em);
792
+ line-height:var(--tds-checkbox-description-line-height);
869
793
  }
870
794
 
871
- .tds-sidenav--theme-gray{
872
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
873
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
874
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
875
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
876
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
877
- }
795
+ .tds-checkbox--sm{
796
+ --tds-checkbox-line-height:1.35;
797
+ --tds-checkbox-input-size:var(--t-element-size-sm);
798
+ --tds-checkbox-font-size:var(--t-font-size-sm);
799
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
800
+ --tds-checkbox-description-line-height:1.3;
878
801
  }
879
802
 
880
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
881
- display:flex;
882
- }
803
+ .tds-radio-group{
804
+ --tds-radio-group-font-size:var(--t-font-size-md);
805
+ --tds-radio-group-line-height:1.4;
806
+ --tds-radio-group-gap:var(--t-spacing-1);
883
807
 
884
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
885
- flex-direction:column;
886
- gap:var(--t-spacing-half);
887
- width:100%;
888
- }
808
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
889
809
 
890
- .tds-sidenav-section-list{
891
- width:100%;
810
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
811
+ --tds-radio-group-description-line-height:1.35;
812
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
813
+ --tds-radio-group-description-invalid-icon-display:none;
814
+ display:flex;
815
+ flex-direction:column;
816
+ gap:var(--tds-radio-group-gap);
892
817
  padding:0;
893
818
  margin:0;
894
- list-style:none;
895
- }
896
819
 
897
- .tds-sidenav-section-header{
898
- display:flex;
899
- align-items:baseline;
900
- justify-content:space-between;
901
- padding-top:var(--t-spacing-2);
820
+ font-size:var(--tds-radio-group-font-size);
821
+ line-height:var(--tds-radio-group-line-height);
822
+ border:0;
902
823
  }
903
824
 
904
- .tds-sidenav-section-header h2{
905
- margin:0;
906
- font-size:var(--t-font-size-sm);
907
- font-weight:var(--t-font-weight-semibold);
908
- line-height:1.35;
909
- color:var(--t-text-color-secondary);
910
- text-transform:uppercase;
825
+ .tds-radio-group legend{
826
+ padding:0;
827
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
911
828
  }
912
829
 
913
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
914
- padding-top:0;
830
+ .tds-radio-group:has(.tds-radio-group-description){
831
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
915
832
  }
916
833
 
917
- .tds-sidenav-section-header [slot="label-actions"]{
918
- display:flex;
919
- gap:var(--t-spacing-half);
920
- align-items:center;
834
+ .tds-radio-group[aria-invalid="true"]{
835
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
836
+ --tds-radio-group-description-invalid-icon-display:inline-block;
921
837
  }
922
838
 
923
- .tds-sidenav-section [slot="section-actions"]{
839
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
840
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
841
+ }
842
+
843
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
844
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
845
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
846
+ }
847
+
848
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
849
+ --tds-radio-input-background-color:var(--t-form-background-color);
850
+ }
851
+
852
+ .tds-radio-group:has(input:required) legend::after{
853
+ margin-left:.25ch;
854
+ color:var(--t-text-color-status-error);
855
+ content:"*";
856
+ }
857
+
858
+ .tds-radio-group-fields{
924
859
  display:flex;
925
- gap:12px;
926
- align-items:center;
927
- min-height:42px;
928
- padding:var(--t-spacing-1) 0;
860
+ flex-direction:column;
861
+ gap:var(--tds-radio-group-gap);
862
+ align-items:flex-start;
929
863
  }
930
864
 
931
- .tds-sidenav-section-list,
932
- .tds-sidenav-item{
933
- width:100%;
934
- padding:0;
865
+ .tds-radio-group-description{
866
+ display:flex;
867
+ gap:var(--t-spacing-half);
868
+ align-items:flex-start;
935
869
  margin:0;
870
+ font-size:var(--tds-radio-group-description-font-size);
871
+ line-height:var(--tds-radio-group-description-line-height);
872
+ color:var(--tds-radio-group-description-color);
873
+ cursor:text;
936
874
  }
937
875
 
938
- .tds-sidenav-item :is(a,button){
876
+ .tds-radio-group-description-invalid-icon{
877
+ display:var(--tds-radio-group-description-invalid-icon-display);
878
+ flex-shrink:0;
879
+ margin-top:calc(.5lh - .5em);
880
+ line-height:var(--tds-radio-group-description-line-height);
881
+ }
882
+
883
+ .tds-radio-group--sm{
884
+ --tds-radio-group-line-height:1.35;
885
+ --tds-radio-group-font-size:var(--t-font-size-sm);
886
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
887
+ --tds-radio-group-description-line-height:1.3;
888
+ }
889
+
890
+ .tds-radio{
891
+ --tds-radio-font-size:var(--t-font-size-md);
892
+ --tds-radio-cursor:pointer;
893
+ --tds-radio-line-height:1.4;
894
+ --tds-radio-transition-property:border-width;
895
+
896
+ --tds-radio-input-size:var(--t-element-size-md);
897
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
898
+ --tds-radio-input-border-color:var(--t-form-border-color);
899
+ --tds-radio-input-border-width:var(--t-form-border-width);
900
+ --tds-radio-input-background-color:transparent;
901
+
902
+ --tds-radio-label-color:var(--t-form-color);
903
+
904
+ --tds-radio-description-font-size:var(--t-font-size-sm);
905
+ --tds-radio-description-line-height:1.35;
906
+ --tds-radio-description-color:var(--t-text-color-secondary);
907
+
908
+ position:relative;
909
+ display:inline-grid;
910
+ grid-template-columns:auto;
911
+ grid-auto-columns:1fr;
912
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
913
+ line-height:var(--tds-radio-line-height);
914
+ cursor:var(--tds-radio-cursor);
915
+ -webkit-user-select:none;
916
+ -moz-user-select:none;
917
+ user-select:none;
918
+ }
919
+
920
+ .tds-radio label{
921
+ grid-area:1 / 2;
922
+ font-size:var(--tds-radio-font-size);
923
+ font-weight:var(--t-font-weight-normal);
924
+ color:var(--tds-radio-label-color);
925
+ cursor:var(--tds-radio-cursor);
926
+ }
927
+
928
+ .tds-radio input[type="radio"]{
939
929
  position:relative;
940
- display:flex;
941
- gap:12px;
942
- align-items:center;
943
- width:100%;
944
- padding:12px;
945
- overflow:hidden;
946
- font-size:var(--t-font-size-sm);
947
- line-height:18px;
948
- color:var(--t-text-color-headline);
949
- white-space:nowrap;
950
- text-decoration:none;
930
+ width:1em;
931
+ height:1em;
932
+ margin:calc((1lh - 1em) / 2) 0 0;
933
+ font-size:var(--tds-radio-font-size);
934
+ line-height:inherit;
951
935
  -webkit-appearance:none;
952
936
  -moz-appearance:none;
953
937
  appearance:none;
954
- cursor:pointer;
955
- background-color:var(--tds-sidenav-item-background, transparent);
956
- border:0;
957
- border-radius:var(--t-border-radius);
958
- transition:var(--tds-sidenav-item-transition);
938
+ cursor:var(--tds-radio-cursor);
939
+ background-color:var(--tds-radio-input-background-color);
940
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
941
+ border-radius:var(--tds-radio-input-border-radius);
942
+ transition-timing-function:ease-in-out;
943
+ transition-duration:180ms;
944
+ transition-property:var(--tds-radio-transition-property);
959
945
  }
960
946
 
961
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
962
- display:block;
963
- flex:1;
964
- overflow:hidden;
965
- text-overflow:ellipsis;
966
- text-align:left;
967
- white-space:nowrap;
968
- }
969
-
970
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
971
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
972
- color:var(--t-text-color-headline);
973
- text-decoration:none;
974
- }
975
-
976
- :is(.tds-sidenav-item :is(a,button)):active{
977
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
978
- }
979
-
980
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
981
- overflow:hidden;
982
- color:var(--tds-sidenav-item-icon-color);
947
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
948
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
949
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
983
950
  }
984
951
 
985
- :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{
986
- display:block;
987
- width:var(--tds-sidenav-item-icon-size);
988
- height:var(--tds-sidenav-item-icon-size);
989
- }
990
-
991
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
992
- --tds-sidenav-indent:19px;
952
+ :is(.tds-radio input[type="radio"]):focus-visible{
953
+ outline:var(--t-focus-ring-outline);
954
+ outline-offset:var(--t-focus-ring-offset);
993
955
  }
994
956
 
995
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
996
- visibility:visible;
997
- block-size:auto;
998
- opacity:1;
957
+ :is(.tds-radio input[type="radio"]):disabled{
958
+ pointer-events:none;
999
959
  }
1000
960
 
1001
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1002
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1003
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1004
-
1005
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1006
- font-weight:var(--t-font-weight-semibold);
1007
- }
961
+ @media (prefers-reduced-motion: reduce){
1008
962
 
1009
- .tds-sidenav-item:has(.tds-sidenav-section){
1010
- display:flex;
1011
- flex-direction:column;
1012
- gap:var(--t-spacing-half);
963
+ .tds-radio input[type="radio"]{
964
+ --tds-radio-transition-property:none;
1013
965
  }
966
+ }
1014
967
 
1015
- .tds-sidenav-item .tds-sidenav-section-list{
1016
- --tds-sidenav-item-depth:1;
1017
- gap:0;
968
+ .tds-radio:has(input:checked){
969
+ --tds-radio-input-background-color:var(--t-form-background-color);
970
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
971
+ --tds-radio-input-border-width:4px;
1018
972
  }
1019
973
 
1020
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1021
- visibility:hidden;
1022
- block-size:0;
1023
- overflow-y:clip;
1024
- opacity:0;
1025
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
974
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
975
+ --tds-radio-input-background-color:var(--t-form-background-color);
976
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1026
977
  }
1027
978
 
1028
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1029
- --tds-sidenav-item-depth:2;
979
+ .tds-radio:has(input:user-invalid){
980
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
981
+ }
982
+
983
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
984
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
985
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1030
986
  }
1031
987
 
1032
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1033
- min-height:var(--t-element-size-2xl);
1034
- padding-block:9px;
1035
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1036
- line-height:1;
1037
- background-color:transparent;
988
+ .tds-radio:has(input:disabled){
989
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
990
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
991
+
992
+ --tds-radio-label-color:var(--t-form-color-disabled);
993
+ --tds-radio-description-color:var(--t-form-color-disabled);
994
+ --tds-radio-cursor:not-allowed;
995
+ }
996
+
997
+ .tds-radio:has(input:disabled) input:checked{
998
+ --tds-radio-input-background-color:var(--t-form-background-color);
999
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1038
1000
  }
1039
1001
 
1040
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1041
- position:absolute;
1042
- top:0;
1043
- bottom:0;
1044
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1045
- width:2px;
1046
- content:"";
1047
- background-color:var(--tds-sidenav-item-nested-border-color);
1048
- transition:var(--tds-sidenav-item-transition);
1049
- }
1002
+ .tds-radio-description{
1003
+ display:flex;
1004
+ grid-area:2 / 2;
1005
+ gap:var(--t-spacing-half);
1006
+ align-items:flex-start;
1007
+ margin:0;
1008
+ font-size:var(--tds-radio-description-font-size);
1009
+ line-height:var(--tds-radio-description-line-height);
1010
+ color:var(--tds-radio-description-color);
1011
+ cursor:text;
1012
+ }
1050
1013
 
1051
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1052
- position:absolute;
1053
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1054
- z-index:-1;
1055
- height:100%;
1056
- content:"";
1057
- background-color:var(--tds-sidenav-item-nested-background);
1058
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1059
- transition:var(--tds-sidenav-item-transition);
1060
- }
1014
+ .tds-radio--sm{
1015
+ --tds-radio-line-height:1.35;
1016
+ --tds-radio-input-size:var(--t-element-size-sm);
1017
+ --tds-radio-font-size:var(--t-font-size-sm);
1018
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1019
+ --tds-radio-description-line-height:1.3;
1020
+ }
1061
1021
 
1062
- :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)){
1063
- display:block;
1064
- text-align:left;
1065
- white-space:normal;
1066
- }
1022
+ .tds-toggle-switch{
1023
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1024
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1025
+ --tds-toggle-switch-cursor:pointer;
1026
+ --tds-toggle-switch-display:inline-grid;
1027
+ --tds-toggle-switch-line-height:1.4;
1067
1028
 
1068
- :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{
1069
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1070
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1071
- }
1029
+ --tds-toggle-switch-label-color:var(--t-form-color);
1072
1030
 
1073
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1074
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1075
- }
1031
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1032
+ --tds-toggle-switch-track-outline:none;
1033
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1034
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
1035
+ --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
1076
1036
 
1077
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1078
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1079
- font-weight:var(--t-font-weight-medium);
1080
- }
1037
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1038
+ --tds-toggle-switch-thumb-transform:translateX(0);
1039
+ --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
1081
1040
 
1082
- .tds-sidenav-responsive-header{
1083
- display:flex;
1084
- gap:var(--t-spacing-2);
1085
- align-items:center;
1086
- width:100%;
1087
- }
1041
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1042
+ --tds-toggle-switch-description-line-height:1.35;
1043
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1044
+ position:relative;
1088
1045
 
1089
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1090
- order:0;
1091
- }
1046
+ display:var(--tds-toggle-switch-display);
1047
+ grid-template-columns:auto;
1048
+ grid-auto-columns:1fr;
1049
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1050
+ -webkit-user-select:none;
1051
+ -moz-user-select:none;
1052
+ user-select:none;
1053
+ }
1092
1054
 
1093
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1094
- flex:1;
1095
- order:1;
1055
+ .tds-toggle-switch input[type="checkbox"]{
1056
+ position:absolute;
1057
+ width:var(--tds-toggle-switch-track-width);
1058
+ height:var(--tds-toggle-switch-track-height);
1096
1059
  margin:0;
1097
- font-size:var(--t-font-size-lg);
1098
- font-weight:var(--t-font-weight-medium);
1099
- color:var(--t-text-color-headline);
1100
- }
1101
-
1102
- @media (max-width: 719px){
1103
- .tds-sidenav-collapse{
1104
- z-index:10001;
1105
- display:none;
1106
- max-width:min(448px, calc(100vw - 48px));
1107
- padding:0;
1108
- margin:12px 0;
1109
- overflow:hidden;
1110
- outline:0;
1111
- background:var(--t-surface-color-card);
1060
+ -webkit-appearance:none;
1061
+ -moz-appearance:none;
1062
+ appearance:none;
1063
+ cursor:var(--tds-toggle-switch-cursor);
1064
+ outline:var(--tds-toggle-switch-track-outline);
1065
+ outline-offset:var(--t-focus-ring-offset);
1066
+ background-color:transparent;
1112
1067
  border:0;
1113
- border-radius:6px;
1114
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1115
- will-change:transform;
1116
- position-area:bottom span-right;
1068
+ border-radius:var(--t-border-radius-round);
1117
1069
  }
1118
1070
 
1119
- .tds-sidenav-scroll-container{
1120
- --webkit-overflow-scrolling:touch;
1121
- display:block;
1122
- width:100%;
1123
- height:-moz-fit-content;
1124
- height:fit-content;
1125
- padding:var(--t-spacing-2);
1126
- overflow-y:auto;
1071
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1072
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1073
+ }
1074
+
1075
+ .tds-toggle-switch label{
1076
+ display:inline-flex;
1077
+ grid-area:1 / 2;
1078
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1079
+ column-gap:var(--tds-toggle-switch-column-gap);
1080
+ margin-top:-.09375em;
1081
+ font-size:var(--tds-toggle-switch-font-size);
1082
+ font-weight:var(--t-font-weight-normal);
1083
+ line-height:var(--tds-toggle-switch-line-height);
1084
+ color:var(--tds-toggle-switch-label-color);
1085
+ cursor:var(--tds-toggle-switch-cursor);
1127
1086
  }
1128
1087
 
1129
- .tds-sidenav-item :is(a, button) :is(.prefix){
1130
- display:none;
1088
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1089
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
1131
1090
  }
1132
- @supports selector(:popover-open){
1133
- .tds-sidenav-collapse:popover-open{
1134
- display:flex;
1135
- }
1091
+
1092
+ .tds-toggle-switch:has(input:checked){
1093
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control);
1094
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1136
1095
  }
1137
- @supports not selector(:popover-open){
1138
- .tds-sidenav-collapse.\:popover-open{
1139
- display:flex;
1096
+
1097
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1098
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
1140
1099
  }
1100
+
1101
+ .tds-toggle-switch:has(input:disabled){
1102
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
1103
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1104
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1105
+ --tds-toggle-switch-cursor:not-allowed;
1141
1106
  }
1107
+
1108
+ .tds-toggle-switch-track{
1109
+ position:relative;
1110
+ flex-shrink:0;
1111
+ width:var(--tds-toggle-switch-track-width);
1112
+ height:var(--tds-toggle-switch-track-height);
1113
+ background-color:var(--tds-toggle-switch-track-background-color);
1114
+ border-radius:var(--t-border-radius-round);
1115
+ transition:var(--tds-toggle-switch-track-transition);
1142
1116
  }
1143
1117
 
1144
- @media (min-width: 720px){
1145
- .tds-sidenav-responsive-header{
1146
- display:none;
1118
+ .tds-toggle-switch-track::before{
1119
+ position:absolute;
1120
+ top:var(--t-spacing-fourth);
1121
+ left:var(--t-spacing-fourth);
1122
+ width:var(--tds-toggle-switch-thumb-size);
1123
+ height:var(--tds-toggle-switch-thumb-size);
1124
+ content:"";
1125
+ background-color:#fff;
1126
+ border-radius:var(--t-border-radius-round);
1127
+ transform:var(--tds-toggle-switch-thumb-transform);
1128
+ transition:var(--tds-toggle-switch-thumb-transition);
1147
1129
  }
1130
+
1131
+ @media (prefers-reduced-motion: reduce){
1132
+
1133
+ .tds-toggle-switch-track{
1134
+ --tds-toggle-switch-track-transition:none;
1135
+ --tds-toggle-switch-thumb-transition:none;
1148
1136
  }
1137
+ }
1149
1138
 
1150
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1151
- display:none;
1152
- }
1139
+ .tds-toggle-switch-description{
1140
+ display:flex;
1141
+ grid-area:2 / 2;
1142
+ align-items:flex-start;
1143
+ margin:0;
1144
+ font-size:var(--tds-toggle-switch-description-font-size);
1145
+ line-height:var(--tds-toggle-switch-description-line-height);
1146
+ color:var(--tds-toggle-switch-description-color);
1147
+ cursor:text;
1148
+ }
1153
1149
 
1154
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1155
- display:block;
1156
- }
1150
+ .tds-toggle-switch--sm{
1151
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1152
+ --tds-toggle-switch-line-height:1.35;
1153
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1154
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1155
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1156
+ --tds-toggle-switch-description-line-height:1.3;
1157
+ }
1157
1158
 
1158
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1159
- display:flex;
1160
- flex-direction:column;
1161
- }
1159
+ .tds-toggle-switch--hide-label{
1160
+ --tds-toggle-switch-display:inline-flex;
1161
+ }
1162
1162
 
1163
1163
  .tds-loading-spinner{
1164
1164
  --tds-loading-spinner-size:1.25em;