@planningcenter/tapestry 3.1.0-rc.12 → 3.1.0-rc.13

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