@planningcenter/tapestry 2.10.1 → 2.10.2-rc.0

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