@planningcenter/tapestry 3.4.1-rc.3 → 3.4.1-rc.4

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 +1041 -1041
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1041 -1041
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -1,302 +1,664 @@
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:transparent;
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-nav-item-background-color);
15
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
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-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
+ --tds-sidenav-collapse-closed-opacity:0;
20
+ --tds-sidenav-collapse-open-opacity:1;
21
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
+ --tds-sidenav-collapse-open-transform:translateY(0);
32
23
 
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);
24
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
35
28
 
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
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
+ --tds-sidenav-item-nested-background-selected:transparent;
39
32
 
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);
45
- }
33
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
46
36
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
37
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
49
39
  }
50
40
 
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));
41
+ @media (prefers-reduced-motion: reduce){
42
+ tds-sidenav,
43
+ .tds-sidenav{
44
+ --tds-sidenav-collapse-transition-enter:none;
45
+ --tds-sidenav-collapse-transition-exit:none;
46
+ --tds-sidenav-collapse-closed-transform:none;
47
+ --tds-sidenav-collapse-open-transform:none;
48
+ }
55
49
  }
50
+
51
+ .tds-sidenav--theme-gray{
52
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
56
57
  }
58
+ }
57
59
 
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-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
76
- }
60
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
+ display:flex;
62
+ }
63
+
64
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
+ flex-direction:column;
66
+ gap:var(--t-spacing-half);
67
+ width:100%;
77
68
  }
69
+
70
+ .tds-sidenav-section-list{
71
+ width:100%;
72
+ padding:0;
73
+ margin:0;
74
+ list-style:none;
78
75
  }
79
76
 
80
- .tds-page-header{
77
+ .tds-sidenav-section-header{
81
78
  display:flex;
82
- flex-direction:column;
83
- padding-top:var(--tds-page-header-padding-y);
84
- color:var(--tds-page-header-color);
85
- background:var(--tds-page-header-background-color);
86
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
79
+ align-items:baseline;
80
+ justify-content:space-between;
81
+ padding-top:var(--t-spacing-2);
87
82
  }
88
83
 
89
- .tds-page-header:not(.has-nav){
90
- padding-bottom:var(--tds-page-header-padding-y);
84
+ .tds-sidenav-section-header h2{
85
+ margin:0;
86
+ font-size:var(--t-font-size-sm);
87
+ font-weight:var(--t-font-weight-semibold);
88
+ line-height:1.35;
89
+ color:var(--t-text-color-secondary);
90
+ text-transform:uppercase;
91
91
  }
92
92
 
93
- .tds-page-header.inactive{
94
- background:var(--tds-page-header-background-color-inactive);
93
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
+ padding-top:0;
95
95
  }
96
96
 
97
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
- width:100%;
97
+ .tds-sidenav-section-header [slot="label-actions"]{
98
+ display:flex;
99
+ gap:var(--t-spacing-half);
100
+ align-items:center;
99
101
  }
100
102
 
101
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
103
+ .tds-sidenav-section [slot="section-actions"]{
104
+ display:flex;
105
+ gap:12px;
106
+ align-items:center;
107
+ min-height:42px;
108
+ padding:var(--t-spacing-1) 0;
109
+ }
110
+
111
+ .tds-sidenav-section-list,
112
+ .tds-sidenav-item{
113
+ width:100%;
114
+ padding:0;
115
+ margin:0;
116
+ }
117
+
118
+ .tds-sidenav-item :is(a,button){
119
+ position:relative;
102
120
  display:flex;
103
- flex-flow:row wrap;
104
- gap:var(--t-spacing-half) var(--t-spacing-1);
105
- align-items:flex-start;
106
- justify-content:flex-start;
107
- min-width:0;
121
+ gap:12px;
122
+ align-items:center;
123
+ width:100%;
124
+ padding:12px;
125
+ overflow:hidden;
126
+ font-size:var(--t-font-size-sm);
127
+ line-height:18px;
128
+ color:var(--t-text-color-headline);
129
+ white-space:nowrap;
130
+ text-decoration:none;
131
+ -webkit-appearance:none;
132
+ -moz-appearance:none;
133
+ appearance:none;
134
+ cursor:pointer;
135
+ background-color:var(--tds-sidenav-item-background, transparent);
136
+ border:0;
137
+ border-radius:var(--t-border-radius);
138
+ transition:var(--tds-sidenav-item-transition);
108
139
  }
109
140
 
110
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
111
- display:flex;
112
- gap:var(--tds-page-header-nav-gap);
113
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
- margin:0 0 -1px;
115
- overflow:auto;
116
- list-style:none;
117
- background:var(--tds-page-header-nav-background);
141
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
+ display:block;
143
+ flex:1;
144
+ overflow:hidden;
145
+ text-overflow:ellipsis;
146
+ text-align:left;
147
+ white-space:nowrap;
118
148
  }
119
149
 
120
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
- position:relative;
122
- display:inline-flex;
123
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
- font-size:var(--t-font-size-sm);
125
- line-height:22px;
126
- color:var(--tds-page-header-nav-item-color);
127
- white-space:nowrap;
150
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
+ color:var(--t-text-color-headline);
128
153
  text-decoration:none;
129
- -webkit-appearance:none;
130
- -moz-appearance:none;
131
- appearance:none;
132
- cursor:pointer;
133
- outline-offset:-2px;
134
- background-color:var(--tds-page-header-nav-item-background-color);
135
- background-clip:padding-box;
136
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
154
  }
140
155
 
141
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
156
+ :is(.tds-sidenav-item :is(a,button)):active{
157
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
+ }
159
+
160
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
+ overflow:hidden;
162
+ color:var(--tds-sidenav-item-icon-color);
163
+ }
164
+
165
+ :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{
166
+ display:block;
167
+ width:var(--tds-sidenav-item-icon-size);
168
+ height:var(--tds-sidenav-item-icon-size);
146
169
  }
147
170
 
148
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
- }
171
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
+ --tds-sidenav-indent:19px;
173
+ }
154
174
 
155
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
- background-color:var(--tds-page-header-nav-item-background-color-active);
157
- border-color:var(--tds-page-header-nav-item-border-color-active);
158
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
- }
175
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
+ visibility:visible;
177
+ block-size:auto;
178
+ opacity:1;
179
+ }
160
180
 
161
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
- color:var(--tds-page-header-nav-item-color-disabled);
164
- cursor:not-allowed;
165
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
- opacity:1;
167
- }
181
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
168
184
 
169
- @media (min-width: 600px){
170
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
- position:absolute;
172
- inset:auto -1px -1px;
173
- height:1px;
174
- pointer-events:none;
175
- content:"";
176
- background-color:var(--tds-page-header-bottom-border-color);
177
- }
178
- }
185
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
+ font-weight:var(--t-font-weight-semibold);
187
+ }
179
188
 
180
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
- position:relative;
189
+ .tds-sidenav-item:has(.tds-sidenav-section){
190
+ display:flex;
191
+ flex-direction:column;
192
+ gap:var(--t-spacing-half);
193
+ }
194
+
195
+ .tds-sidenav-item .tds-sidenav-section-list{
196
+ --tds-sidenav-item-depth:1;
197
+ gap:0;
198
+ }
199
+
200
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
+ visibility:hidden;
202
+ block-size:0;
203
+ overflow-y:clip;
204
+ opacity:0;
205
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
182
206
  }
183
207
 
184
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
+ --tds-sidenav-item-depth:2;
210
+ }
211
+
212
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
+ min-height:var(--t-element-size-2xl);
214
+ padding-block:9px;
215
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
+ line-height:1;
217
+ background-color:transparent;
218
+ }
219
+
220
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
+ position:absolute;
222
+ top:0;
223
+ bottom:0;
224
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
+ width:2px;
226
+ content:"";
227
+ background-color:var(--tds-sidenav-item-nested-border-color);
228
+ transition:var(--tds-sidenav-item-transition);
187
229
  }
188
230
 
189
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
190
232
  position:absolute;
191
- top:-5px;
192
- right:-2px;
193
- width:10px;
194
- height:10px;
233
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
+ z-index:-1;
235
+ height:100%;
195
236
  content:"";
196
- background:var(--tds-page-header-nav-item-indicator-color);
197
- border-radius:50%;
237
+ background-color:var(--tds-sidenav-item-nested-background);
238
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
+ transition:var(--tds-sidenav-item-transition);
198
240
  }
199
241
 
200
- @media (prefers-reduced-motion: no-preference){
201
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
- animation:indicator-pulse 1.25s ease infinite;
203
- }
242
+ :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)){
243
+ display:block;
244
+ text-align:left;
245
+ white-space:normal;
204
246
  }
205
247
 
206
- .tds-page-header__title-bar{
207
- display:flex;
208
- flex-direction:column;
209
- gap:var(--t-spacing-2) var(--t-spacing-1);
210
- align-items:flex-start;
211
- justify-content:space-between;
212
- padding:0 var(--tds-page-header-padding-x);
213
- }
248
+ :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{
249
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
251
+ }
214
252
 
215
- .tds-page-header--profile > .tds-page-header__title-bar{
216
- align-items:center;
217
- }
253
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
255
+ }
218
256
 
219
- .tds-page-header__primary{
257
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
+ font-weight:var(--t-font-weight-medium);
260
+ }
261
+
262
+ .tds-sidenav-responsive-header{
263
+ display:flex;
264
+ gap:var(--t-spacing-2);
265
+ align-items:center;
220
266
  width:100%;
221
267
  }
222
268
 
223
- .tds-page-header__primary h1{
269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
+ order:0;
271
+ }
272
+
273
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
+ flex:1;
275
+ order:1;
224
276
  margin:0;
225
- font-size:var(--tds-page-header-headline-font-size);
226
- font-weight:var(--t-font-weight-normal);
227
- line-height:32px;
228
- color:var(--tds-page-header-headline-color);
229
- overflow-wrap:break-word;
277
+ font-size:var(--t-font-size-lg);
278
+ font-weight:var(--t-font-weight-medium);
279
+ color:var(--t-text-color-headline);
230
280
  }
231
281
 
232
- @media (min-width: 960px){
233
- .tds-page-header__primary{
234
- flex:1 1 max-content;
235
- width:auto;
236
- min-width:0;
237
- max-width:100%;
282
+ @media (max-width: 719px){
283
+ .tds-sidenav-collapse{
284
+ z-index:10001;
285
+ display:none;
286
+ max-width:min(448px, calc(100vw - 48px));
287
+ padding:0;
288
+ margin:12px 0;
289
+ position-area:bottom span-right;
290
+ overflow:hidden;
291
+ outline:0;
292
+ background:var(--t-surface-color-card);
293
+ border:0;
294
+ border-radius:6px;
295
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
+ opacity:var(--tds-sidenav-collapse-open-opacity);
297
+ transform:var(--tds-sidenav-collapse-open-transform);
298
+ transition:var(--tds-sidenav-collapse-transition-enter);
299
+ will-change:transform;
238
300
  }
239
301
 
240
- .tds-page-header__title-bar,
241
- .tds-page-header--profile .tds-page-header__title-bar{
242
- flex-flow:row nowrap;
243
- row-gap:12px;
244
- align-items:flex-start;
302
+ .tds-sidenav-scroll-container{
303
+ --webkit-overflow-scrolling:touch;
304
+ display:block;
305
+ width:100%;
306
+ height:-moz-fit-content;
307
+ height:fit-content;
308
+ padding:var(--t-spacing-2);
309
+ overflow-y:auto;
245
310
  }
246
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
- width:auto;
248
- }
249
311
 
250
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
- justify-content:flex-end;
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
314
+ }
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
252
318
  }
253
- }
254
-
255
- .tds-page-header-phone,
256
- .tds-page-header-email{
257
- color:var(--tds-page-header-color);
258
- white-space:nowrap;
259
- }
260
319
 
261
- .tds-page-header-email{
262
- max-width:100%;
263
- overflow:hidden;
264
- text-overflow:ellipsis;
265
- }
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
266
324
 
267
- @keyframes indicator-pulse{
268
- 0%{
269
- opacity:.3;
270
- transform:scale(.9);
325
+ @starting-style{
326
+ .tds-sidenav-collapse:popover-open{
327
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
328
+ transform:var(--tds-sidenav-collapse-closed-transform);
329
+ }
330
+ }
271
331
  }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
335
+ }
272
336
 
273
- 100%{
274
- opacity:0;
275
- transform:scale(1.75);
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
276
341
  }
277
342
  }
278
343
 
279
- .tds-checkbox-group{
280
- --tds-checkbox-group-font-size:var(--t-font-size-md);
281
- --tds-checkbox-group-line-height:1.4;
282
- --tds-checkbox-group-gap:var(--t-spacing-1);
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
347
+ }
348
+ }
283
349
 
284
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
285
- --tds-checkbox-group-description-line-height:1.35;
286
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
287
- --tds-checkbox-group-description-invalid-icon-display:none;
288
- display:flex;
289
- flex-direction:column;
290
- gap:0;
291
- padding:0;
292
- margin:0;
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
293
353
 
294
- font-size:var(--tds-checkbox-group-font-size);
295
- line-height:var(--tds-checkbox-group-line-height);
296
- border:0;
297
- }
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
298
357
 
299
- .tds-checkbox-group legend{
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
361
+ }
362
+
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
366
+ }
367
+ }
368
+
369
+ @layer t-component{
370
+ .tds-page-header{
371
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
+ --tds-page-header-color:var(--t-text-color);
374
+ --tds-page-header-bottom-border-color:transparent;
375
+ --tds-page-header-headline-color:var(--t-text-color-headline);
376
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
+ --tds-page-header-padding-x:var(--t-spacing-2);
378
+ --tds-page-header-padding-y:var(--t-spacing-2);
379
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
+ --tds-page-header-nav-gap:var(--t-spacing-1);
381
+ --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%);
382
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
+ --tds-page-header-nav-item-border-width:1px;
387
+
388
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
390
+
391
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
394
+
395
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
397
+
398
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
401
+
402
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
407
+ }
408
+
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
411
+ }
412
+
413
+ @supports (color: light-dark(#fff, #000)){
414
+ .tds-page-header{
415
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
417
+ }
418
+ }
419
+
420
+ @media (min-width: 600px){
421
+ .tds-page-header{
422
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
423
+ --tds-page-header-color:var(--t-text-color-secondary);
424
+ --tds-page-header-bottom-border-color:var(--t-border-color);
425
+ --tds-page-header-padding-x:var(--t-spacing-3);
426
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
+ --tds-page-header-nav-gap:var(--t-spacing-half);
428
+ --tds-page-header-nav-background:transparent;
429
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
+ --tds-page-header-nav-item-border-width:1px;
431
+ --tds-page-header-nav-item-color:var(--t-text-color);
432
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
434
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
435
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
436
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
437
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
438
+ }
439
+ }
440
+ }
441
+
442
+ .tds-page-header{
443
+ display:flex;
444
+ flex-direction:column;
445
+ padding-top:var(--tds-page-header-padding-y);
446
+ color:var(--tds-page-header-color);
447
+ background:var(--tds-page-header-background-color);
448
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
449
+ }
450
+
451
+ .tds-page-header:not(.has-nav){
452
+ padding-bottom:var(--tds-page-header-padding-y);
453
+ }
454
+
455
+ .tds-page-header.inactive{
456
+ background:var(--tds-page-header-background-color-inactive);
457
+ }
458
+
459
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
460
+ width:100%;
461
+ }
462
+
463
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
464
+ display:flex;
465
+ flex-flow:row wrap;
466
+ gap:var(--t-spacing-half) var(--t-spacing-1);
467
+ align-items:flex-start;
468
+ justify-content:flex-start;
469
+ min-width:0;
470
+ }
471
+
472
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
473
+ display:flex;
474
+ gap:var(--tds-page-header-nav-gap);
475
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
476
+ margin:0 0 -1px;
477
+ overflow:auto;
478
+ list-style:none;
479
+ background:var(--tds-page-header-nav-background);
480
+ }
481
+
482
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
483
+ position:relative;
484
+ display:inline-flex;
485
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
486
+ font-size:var(--t-font-size-sm);
487
+ line-height:22px;
488
+ color:var(--tds-page-header-nav-item-color);
489
+ white-space:nowrap;
490
+ text-decoration:none;
491
+ -webkit-appearance:none;
492
+ -moz-appearance:none;
493
+ appearance:none;
494
+ cursor:pointer;
495
+ outline-offset:-2px;
496
+ background-color:var(--tds-page-header-nav-item-background-color);
497
+ background-clip:padding-box;
498
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
499
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
500
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
501
+ }
502
+
503
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
504
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
505
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
506
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
507
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
508
+ }
509
+
510
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
511
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
512
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
513
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
514
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
515
+ }
516
+
517
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
518
+ background-color:var(--tds-page-header-nav-item-background-color-active);
519
+ border-color:var(--tds-page-header-nav-item-border-color-active);
520
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
521
+ }
522
+
523
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
524
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
525
+ color:var(--tds-page-header-nav-item-color-disabled);
526
+ cursor:not-allowed;
527
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
528
+ opacity:1;
529
+ }
530
+
531
+ @media (min-width: 600px){
532
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
533
+ position:absolute;
534
+ inset:auto -1px -1px;
535
+ height:1px;
536
+ pointer-events:none;
537
+ content:"";
538
+ background-color:var(--tds-page-header-bottom-border-color);
539
+ }
540
+ }
541
+
542
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
543
+ position:relative;
544
+ }
545
+
546
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
547
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
548
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
549
+ }
550
+
551
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
552
+ position:absolute;
553
+ top:-5px;
554
+ right:-2px;
555
+ width:10px;
556
+ height:10px;
557
+ content:"";
558
+ background:var(--tds-page-header-nav-item-indicator-color);
559
+ border-radius:50%;
560
+ }
561
+
562
+ @media (prefers-reduced-motion: no-preference){
563
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
564
+ animation:indicator-pulse 1.25s ease infinite;
565
+ }
566
+ }
567
+
568
+ .tds-page-header__title-bar{
569
+ display:flex;
570
+ flex-direction:column;
571
+ gap:var(--t-spacing-2) var(--t-spacing-1);
572
+ align-items:flex-start;
573
+ justify-content:space-between;
574
+ padding:0 var(--tds-page-header-padding-x);
575
+ }
576
+
577
+ .tds-page-header--profile > .tds-page-header__title-bar{
578
+ align-items:center;
579
+ }
580
+
581
+ .tds-page-header__primary{
582
+ width:100%;
583
+ }
584
+
585
+ .tds-page-header__primary h1{
586
+ margin:0;
587
+ font-size:var(--tds-page-header-headline-font-size);
588
+ font-weight:var(--t-font-weight-normal);
589
+ line-height:32px;
590
+ color:var(--tds-page-header-headline-color);
591
+ overflow-wrap:break-word;
592
+ }
593
+
594
+ @media (min-width: 960px){
595
+ .tds-page-header__primary{
596
+ flex:1 1 max-content;
597
+ width:auto;
598
+ min-width:0;
599
+ max-width:100%;
600
+ }
601
+
602
+ .tds-page-header__title-bar,
603
+ .tds-page-header--profile .tds-page-header__title-bar{
604
+ flex-flow:row nowrap;
605
+ row-gap:12px;
606
+ align-items:flex-start;
607
+ }
608
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
609
+ width:auto;
610
+ }
611
+
612
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
613
+ justify-content:flex-end;
614
+ }
615
+ }
616
+
617
+ .tds-page-header-phone,
618
+ .tds-page-header-email{
619
+ color:var(--tds-page-header-color);
620
+ white-space:nowrap;
621
+ }
622
+
623
+ .tds-page-header-email{
624
+ max-width:100%;
625
+ overflow:hidden;
626
+ text-overflow:ellipsis;
627
+ }
628
+
629
+ @keyframes indicator-pulse{
630
+ 0%{
631
+ opacity:.3;
632
+ transform:scale(.9);
633
+ }
634
+
635
+ 100%{
636
+ opacity:0;
637
+ transform:scale(1.75);
638
+ }
639
+ }
640
+
641
+ .tds-checkbox-group{
642
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
643
+ --tds-checkbox-group-line-height:1.4;
644
+ --tds-checkbox-group-gap:var(--t-spacing-1);
645
+
646
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
647
+ --tds-checkbox-group-description-line-height:1.35;
648
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
649
+ --tds-checkbox-group-description-invalid-icon-display:none;
650
+ display:flex;
651
+ flex-direction:column;
652
+ gap:0;
653
+ padding:0;
654
+ margin:0;
655
+
656
+ font-size:var(--tds-checkbox-group-font-size);
657
+ line-height:var(--tds-checkbox-group-line-height);
658
+ border:0;
659
+ }
660
+
661
+ .tds-checkbox-group legend{
300
662
  float:left;
301
663
  padding:0;
302
664
  margin:0;
@@ -350,188 +712,6 @@
350
712
  --tds-checkbox-group-description-line-height:1.3;
351
713
  }
352
714
 
353
- .tds-combo-box{
354
- --tds-combo-box-button-offset:4px;
355
- }
356
-
357
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
358
- transform:rotate(.5turn);
359
- }
360
-
361
- .tds-combo-box--lg{
362
- --tds-combo-box-button-offset:5px;
363
- }
364
-
365
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
366
- display:none;
367
- }
368
-
369
- .tds-combo-box-input{
370
- display:flex;
371
- flex:1;
372
- align-items:center;
373
- padding-block:var(--tds-field-padding-block);
374
- padding-inline:var(--tds-field-padding-inline);
375
- font-family:inherit;
376
- font-size:inherit;
377
- color:inherit;
378
- outline:0;
379
- background:transparent;
380
- border:0;
381
- }
382
-
383
- .tds-combo-box-input:has( + .tds-combo-box-button){
384
- padding-inline-end:0;
385
- }
386
-
387
- .tds-combo-box-input::-moz-placeholder{
388
- color:var(--tds-field-placeholder-color);
389
- -moz-user-select:none;
390
- user-select:none;
391
- }
392
-
393
- .tds-combo-box-input::placeholder{
394
- color:var(--tds-field-placeholder-color);
395
- -webkit-user-select:none;
396
- -moz-user-select:none;
397
- user-select:none;
398
- }
399
-
400
- .tds-combo-box-button{
401
- flex-shrink:0;
402
- align-self:center;
403
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
404
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
405
- padding:0;
406
- margin-inline-end:var(--tds-combo-box-button-offset);
407
- }
408
-
409
- .tds-combo-box-button > svg{
410
- inline-size:var(--tds-field-font-size);
411
- block-size:var(--tds-field-font-size);
412
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
413
- }
414
-
415
- .tds-combo-box-popover{
416
- width:var(--trigger-width);
417
- max-block-size:inherit;
418
- padding:var(--t-spacing-1);
419
- overflow:auto;
420
- scroll-behavior:smooth;
421
- overscroll-behavior:none;
422
- -webkit-user-select:none;
423
- -moz-user-select:none;
424
- user-select:none;
425
- outline:0;
426
- scrollbar-color:#0004 var(--t-surface-color-card);
427
- scrollbar-width:thin;
428
- background:var(--t-surface-color-card);
429
- background-clip:padding-box;
430
- border:1px solid var(--t-border-color);
431
- border-radius:var(--t-border-radius);
432
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
433
- }
434
-
435
- .tds-combo-box-popover[data-entering]{
436
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
437
- }
438
-
439
- .tds-combo-box-popover[data-exiting]{
440
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
441
- }
442
-
443
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
444
- will-change:opacity, transform;
445
- }
446
-
447
- @keyframes tds-combo-box-popover{
448
- from{
449
- opacity:0;
450
- transform:translateY(-8px);
451
- }
452
- }
453
-
454
- @media (prefers-reduced-motion: reduce){
455
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
456
- animation:none;
457
- }
458
-
459
- .tds-combo-box-button > svg{
460
- transition:none;
461
- }
462
- }
463
-
464
- .tds-combo-box-list{
465
- padding:0;
466
- margin:0;
467
- }
468
-
469
- .tds-combo-box-list-item{
470
- display:block;
471
- padding-block:var(--t-spacing-1);
472
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
473
- overflow:hidden;
474
- text-overflow:ellipsis;
475
- font-size:1rem;
476
- color:var(--t-text-color);
477
- white-space:nowrap;
478
- cursor:default;
479
- border-radius:var(--t-border-radius);
480
- }
481
-
482
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
483
- background:var(--t-fill-color-neutral-070);
484
- }
485
-
486
- .tds-combo-box-list-item[data-selected]{
487
- background:var(--t-fill-color-button-interaction-ghost-active);
488
- }
489
-
490
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
491
- background:var(--t-fill-color-neutral-060);
492
- }
493
-
494
- .tds-combo-box-list-item[data-disabled]{
495
- color:var(--t-form-color-disabled);
496
- cursor:not-allowed;
497
- }
498
-
499
- .tds-combo-box-list-item[data-disabled][data-hovered]{
500
- background:transparent;
501
- }
502
-
503
- .tds-combo-box-empty-state{
504
- position:relative;
505
- min-block-size:var(--t-spacing-3);
506
- padding-block:var(--t-spacing-1);
507
- padding-inline:var(--t-spacing-2);
508
- font-size:var(--t-font-size-md);
509
- color:var(--t-text-color-secondary);
510
- }
511
-
512
- .tds-combo-box-load-more{
513
- position:relative;
514
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
515
- }
516
-
517
- .tds-combo-box-empty-state,
518
- .tds-combo-box-load-more{
519
- --tds-loading-spinner-visibility:visible;
520
- --tds-loading-spinner-animation-play-state:running;
521
- }
522
-
523
- .tds-combo-box-list-section:not(:first-child){
524
- margin-block-start:var(--t-spacing-half);
525
- }
526
-
527
- .tds-combo-box-section-header{
528
- padding-block:var(--t-spacing-1);
529
- padding-inline:var(--t-spacing-1);
530
- font-size:var(--t-font-size-sm);
531
- font-weight:var(--t-font-weight-semibold);
532
- color:var(--t-text-color-secondary);
533
- }
534
-
535
715
  .tds-checkbox{
536
716
  --tds-checkbox-font-size:var(--t-font-size-md);
537
717
  --tds-checkbox-cursor:pointer;
@@ -724,371 +904,215 @@
724
904
  --tds-checkbox-input-size:var(--t-element-size-sm);
725
905
  --tds-checkbox-font-size:var(--t-font-size-sm);
726
906
  --tds-checkbox-description-font-size:var(--t-font-size-xs);
727
- --tds-checkbox-description-line-height:1.3;
728
- }
729
-
730
-
731
- @media (prefers-reduced-motion: no-preference){
732
-
733
- :root{
734
- interpolate-size:allow-keywords;
735
- }
736
- }
737
-
738
- @layer tds-component{
739
- tds-sidenav,
740
- .tds-sidenav{
741
- --tds-sidenav-indent:12px;
742
- --tds-sidenav-item-depth:0;
743
-
744
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
745
-
746
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
747
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
748
- --tds-sidenav-collapse-closed-opacity:0;
749
- --tds-sidenav-collapse-open-opacity:1;
750
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
751
- --tds-sidenav-collapse-open-transform:translateY(0);
752
-
753
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
754
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
755
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
756
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
757
-
758
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
759
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
760
- --tds-sidenav-item-nested-background-selected:transparent;
761
-
762
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
763
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
764
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
765
-
766
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
767
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
768
- }
769
-
770
- @media (prefers-reduced-motion: reduce){
771
- tds-sidenav,
772
- .tds-sidenav{
773
- --tds-sidenav-collapse-transition-enter:none;
774
- --tds-sidenav-collapse-transition-exit:none;
775
- --tds-sidenav-collapse-closed-transform:none;
776
- --tds-sidenav-collapse-open-transform:none;
777
- }
778
- }
779
-
780
- .tds-sidenav--theme-gray{
781
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
782
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
783
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
784
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
785
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
786
- }
907
+ --tds-checkbox-description-line-height:1.3;
787
908
  }
788
909
 
789
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
790
- display:flex;
791
- }
910
+ .tds-combo-box{
911
+ --tds-combo-box-button-offset:4px;
912
+ }
792
913
 
793
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
794
- flex-direction:column;
795
- gap:var(--t-spacing-half);
796
- width:100%;
914
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
915
+ transform:rotate(.5turn);
797
916
  }
798
917
 
799
- .tds-sidenav-section-list{
800
- width:100%;
801
- padding:0;
802
- margin:0;
803
- list-style:none;
918
+ .tds-combo-box--lg{
919
+ --tds-combo-box-button-offset:5px;
804
920
  }
805
921
 
806
- .tds-sidenav-section-header{
922
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
923
+ display:none;
924
+ }
925
+
926
+ .tds-combo-box-input{
807
927
  display:flex;
808
- align-items:baseline;
809
- justify-content:space-between;
810
- padding-top:var(--t-spacing-2);
928
+ flex:1;
929
+ align-items:center;
930
+ padding-block:var(--tds-field-padding-block);
931
+ padding-inline:var(--tds-field-padding-inline);
932
+ font-family:inherit;
933
+ font-size:inherit;
934
+ color:inherit;
935
+ outline:0;
936
+ background:transparent;
937
+ border:0;
811
938
  }
812
939
 
813
- .tds-sidenav-section-header h2{
814
- margin:0;
815
- font-size:var(--t-font-size-sm);
816
- font-weight:var(--t-font-weight-semibold);
817
- line-height:1.35;
818
- color:var(--t-text-color-secondary);
819
- text-transform:uppercase;
940
+ .tds-combo-box-input:has( + .tds-combo-box-button){
941
+ padding-inline-end:0;
820
942
  }
821
943
 
822
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
823
- padding-top:0;
944
+ .tds-combo-box-input::-moz-placeholder{
945
+ color:var(--tds-field-placeholder-color);
946
+ -moz-user-select:none;
947
+ user-select:none;
824
948
  }
825
949
 
826
- .tds-sidenav-section-header [slot="label-actions"]{
827
- display:flex;
828
- gap:var(--t-spacing-half);
829
- align-items:center;
950
+ .tds-combo-box-input::placeholder{
951
+ color:var(--tds-field-placeholder-color);
952
+ -webkit-user-select:none;
953
+ -moz-user-select:none;
954
+ user-select:none;
830
955
  }
831
956
 
832
- .tds-sidenav-section [slot="section-actions"]{
833
- display:flex;
834
- gap:12px;
835
- align-items:center;
836
- min-height:42px;
837
- padding:var(--t-spacing-1) 0;
838
- }
839
-
840
- .tds-sidenav-section-list,
841
- .tds-sidenav-item{
842
- width:100%;
957
+ .tds-combo-box-button{
958
+ flex-shrink:0;
959
+ align-self:center;
960
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
961
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
843
962
  padding:0;
844
- margin:0;
963
+ margin-inline-end:var(--tds-combo-box-button-offset);
845
964
  }
846
965
 
847
- .tds-sidenav-item :is(a,button){
848
- position:relative;
849
- display:flex;
850
- gap:12px;
851
- align-items:center;
852
- width:100%;
853
- padding:12px;
854
- overflow:hidden;
855
- font-size:var(--t-font-size-sm);
856
- line-height:18px;
857
- color:var(--t-text-color-headline);
858
- white-space:nowrap;
859
- text-decoration:none;
860
- -webkit-appearance:none;
861
- -moz-appearance:none;
862
- appearance:none;
863
- cursor:pointer;
864
- background-color:var(--tds-sidenav-item-background, transparent);
865
- border:0;
866
- border-radius:var(--t-border-radius);
867
- transition:var(--tds-sidenav-item-transition);
966
+ .tds-combo-box-button > svg{
967
+ inline-size:var(--tds-field-font-size);
968
+ block-size:var(--tds-field-font-size);
969
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
868
970
  }
869
971
 
870
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
871
- display:block;
872
- flex:1;
873
- overflow:hidden;
874
- text-overflow:ellipsis;
875
- text-align:left;
876
- white-space:nowrap;
877
- }
878
-
879
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
880
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
881
- color:var(--t-text-color-headline);
882
- text-decoration:none;
883
- }
884
-
885
- :is(.tds-sidenav-item :is(a,button)):active{
886
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
887
- }
888
-
889
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
890
- overflow:hidden;
891
- color:var(--tds-sidenav-item-icon-color);
892
- }
893
-
894
- :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{
895
- display:block;
896
- width:var(--tds-sidenav-item-icon-size);
897
- height:var(--tds-sidenav-item-icon-size);
898
- }
899
-
900
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
901
- --tds-sidenav-indent:19px;
902
- }
903
-
904
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
905
- visibility:visible;
906
- block-size:auto;
907
- opacity:1;
908
- }
909
-
910
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
911
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
912
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
972
+ .tds-combo-box-popover{
973
+ width:var(--trigger-width);
974
+ max-block-size:inherit;
975
+ padding:var(--t-spacing-1);
976
+ overflow:auto;
977
+ scroll-behavior:smooth;
978
+ overscroll-behavior:none;
979
+ -webkit-user-select:none;
980
+ -moz-user-select:none;
981
+ user-select:none;
982
+ outline:0;
983
+ scrollbar-color:#0004 var(--t-surface-color-card);
984
+ scrollbar-width:thin;
985
+ background:var(--t-surface-color-card);
986
+ background-clip:padding-box;
987
+ border:1px solid var(--t-border-color);
988
+ border-radius:var(--t-border-radius);
989
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
990
+ }
913
991
 
914
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
915
- font-weight:var(--t-font-weight-semibold);
992
+ .tds-combo-box-popover[data-entering]{
993
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
916
994
  }
917
995
 
918
- .tds-sidenav-item:has(.tds-sidenav-section){
919
- display:flex;
920
- flex-direction:column;
921
- gap:var(--t-spacing-half);
996
+ .tds-combo-box-popover[data-exiting]{
997
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
922
998
  }
923
999
 
924
- .tds-sidenav-item .tds-sidenav-section-list{
925
- --tds-sidenav-item-depth:1;
926
- gap:0;
1000
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1001
+ will-change:opacity, transform;
927
1002
  }
928
1003
 
929
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
930
- visibility:hidden;
931
- block-size:0;
932
- overflow-y:clip;
933
- opacity:0;
934
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
935
- }
936
-
937
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
938
- --tds-sidenav-item-depth:2;
939
- }
1004
+ @keyframes tds-combo-box-popover{
1005
+ from{
1006
+ opacity:0;
1007
+ transform:translateY(-8px);
1008
+ }
1009
+ }
940
1010
 
941
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
942
- min-height:var(--t-element-size-2xl);
943
- padding-block:9px;
944
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
945
- line-height:1;
946
- background-color:transparent;
1011
+ @media (prefers-reduced-motion: reduce){
1012
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1013
+ animation:none;
947
1014
  }
948
1015
 
949
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
950
- position:absolute;
951
- top:0;
952
- bottom:0;
953
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
954
- width:2px;
955
- content:"";
956
- background-color:var(--tds-sidenav-item-nested-border-color);
957
- transition:var(--tds-sidenav-item-transition);
958
- }
959
-
960
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
961
- position:absolute;
962
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
963
- z-index:-1;
964
- height:100%;
965
- content:"";
966
- background-color:var(--tds-sidenav-item-nested-background);
967
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
968
- transition:var(--tds-sidenav-item-transition);
969
- }
970
-
971
- :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)){
972
- display:block;
973
- text-align:left;
974
- white-space:normal;
975
- }
976
-
977
- :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{
978
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
979
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
980
- }
981
-
982
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
983
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
984
- }
1016
+ .tds-combo-box-button > svg{
1017
+ transition:none;
1018
+ }
1019
+ }
985
1020
 
986
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
987
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
988
- font-weight:var(--t-font-weight-medium);
989
- }
1021
+ .tds-combo-box-list{
1022
+ padding:0;
1023
+ margin:0;
1024
+ }
990
1025
 
991
- .tds-sidenav-responsive-header{
992
- display:flex;
993
- gap:var(--t-spacing-2);
994
- align-items:center;
995
- width:100%;
1026
+ .tds-combo-box-list-item{
1027
+ display:block;
1028
+ padding-block:var(--t-spacing-1);
1029
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1030
+ overflow:hidden;
1031
+ text-overflow:ellipsis;
1032
+ font-size:1rem;
1033
+ color:var(--t-text-color);
1034
+ white-space:nowrap;
1035
+ cursor:default;
1036
+ border-radius:var(--t-border-radius);
996
1037
  }
997
1038
 
998
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
999
- order:0;
1039
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1040
+ background:var(--t-fill-color-neutral-070);
1000
1041
  }
1001
1042
 
1002
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1003
- flex:1;
1004
- order:1;
1005
- margin:0;
1006
- font-size:var(--t-font-size-lg);
1007
- font-weight:var(--t-font-weight-medium);
1008
- color:var(--t-text-color-headline);
1043
+ .tds-combo-box-list-item[data-selected]{
1044
+ background:var(--t-fill-color-button-interaction-ghost-active);
1009
1045
  }
1010
1046
 
1011
- @media (max-width: 719px){
1012
- .tds-sidenav-collapse{
1013
- z-index:10001;
1014
- display:none;
1015
- max-width:min(448px, calc(100vw - 48px));
1016
- padding:0;
1017
- margin:12px 0;
1018
- position-area:bottom span-right;
1019
- overflow:hidden;
1020
- outline:0;
1021
- background:var(--t-surface-color-card);
1022
- border:0;
1023
- border-radius:6px;
1024
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1025
- opacity:var(--tds-sidenav-collapse-open-opacity);
1026
- transform:var(--tds-sidenav-collapse-open-transform);
1027
- transition:var(--tds-sidenav-collapse-transition-enter);
1028
- will-change:transform;
1047
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1048
+ background:var(--t-fill-color-neutral-060);
1029
1049
  }
1030
1050
 
1031
- .tds-sidenav-scroll-container{
1032
- --webkit-overflow-scrolling:touch;
1033
- display:block;
1034
- width:100%;
1035
- height:-moz-fit-content;
1036
- height:fit-content;
1037
- padding:var(--t-spacing-2);
1038
- overflow-y:auto;
1051
+ .tds-combo-box-list-item[data-disabled]{
1052
+ color:var(--t-form-color-disabled);
1053
+ cursor:not-allowed;
1039
1054
  }
1040
1055
 
1041
- .tds-sidenav-item :is(a, button) :is(.prefix){
1042
- display:none;
1043
- }
1044
- @supports selector(:popover-open){
1045
- .tds-sidenav-collapse:popover-open{
1046
- display:flex;
1056
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1057
+ background:transparent;
1047
1058
  }
1048
1059
 
1049
- .tds-sidenav-collapse:not(:popover-open){
1050
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1051
- transition:var(--tds-sidenav-collapse-transition-exit);
1052
- }
1060
+ .tds-combo-box-empty-state{
1061
+ position:relative;
1062
+ min-block-size:var(--t-spacing-3);
1063
+ padding-block:var(--t-spacing-1);
1064
+ padding-inline:var(--t-spacing-2);
1065
+ font-size:var(--t-font-size-md);
1066
+ color:var(--t-text-color-secondary);
1067
+ }
1053
1068
 
1054
- @starting-style{
1055
- .tds-sidenav-collapse:popover-open{
1056
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1057
- transform:var(--tds-sidenav-collapse-closed-transform);
1058
- }
1059
- }
1060
- }
1061
- @supports not selector(:popover-open){
1062
- .tds-sidenav-collapse.\:popover-open{
1063
- display:flex;
1064
- }
1069
+ .tds-combo-box-load-more{
1070
+ position:relative;
1071
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1072
+ }
1065
1073
 
1066
- .tds-sidenav-collapse:not(.\:popover-open){
1067
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1068
- transition:var(--tds-sidenav-collapse-transition-exit);
1069
- }
1070
- }
1074
+ .tds-combo-box-empty-state,
1075
+ .tds-combo-box-load-more{
1076
+ --tds-loading-spinner-visibility:visible;
1077
+ --tds-loading-spinner-animation-play-state:running;
1071
1078
  }
1072
1079
 
1073
- @media (min-width: 720px){
1074
- .tds-sidenav-responsive-header{
1075
- display:none;
1080
+ .tds-combo-box-list-section:not(:first-child){
1081
+ margin-block-start:var(--t-spacing-half);
1076
1082
  }
1083
+
1084
+ .tds-combo-box-section-header{
1085
+ padding-block:var(--t-spacing-1);
1086
+ padding-inline:var(--t-spacing-1);
1087
+ font-size:var(--t-font-size-sm);
1088
+ font-weight:var(--t-font-weight-semibold);
1089
+ color:var(--t-text-color-secondary);
1077
1090
  }
1078
1091
 
1079
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1080
- display:none;
1081
- }
1082
1092
 
1083
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1084
- display:block;
1093
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1094
+ -webkit-appearance:none;
1095
+ appearance:none;
1085
1096
  }
1086
1097
 
1087
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1088
- display:flex;
1089
- flex-direction:column;
1098
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1099
+ inline-size:1em;
1100
+ block-size:2em;
1090
1101
  }
1091
1102
 
1103
+ @supports (field-sizing: content){
1104
+ .tds-input--auto-width{
1105
+ inline-size:-moz-fit-content;
1106
+ inline-size:fit-content;
1107
+ min-inline-size:min(100%, 122px);
1108
+ }
1109
+
1110
+ .tds-input--auto-width input{
1111
+ field-sizing:content;
1112
+ inline-size:auto;
1113
+ }
1114
+ }
1115
+
1092
1116
  .tds-date-picker{
1093
1117
  --tds-date-picker-button-offset:4px;
1094
1118
  }
@@ -1440,168 +1464,61 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1440
1464
  .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1441
1465
  outline-offset:var(--t-focus-ring-offset);
1442
1466
  }
1443
-
1444
- .tds-date-picker-popover--lg{
1445
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1446
- }
1447
-
1448
- .tds-number-stepper{
1449
- --tds-number-stepper-button-offset:4px;
1450
- --tds-number-stepper-button-gap:2px;
1451
- }
1452
-
1453
- .tds-number-stepper--lg{
1454
- --tds-number-stepper-button-offset:5px;
1455
- --tds-number-stepper-button-gap:4px;
1456
- }
1457
-
1458
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1459
- display:none;
1460
- }
1461
-
1462
- .tds-number-stepper-input{
1463
- display:flex;
1464
- flex:1;
1465
- align-items:center;
1466
- min-inline-size:0;
1467
- padding-block:var(--tds-field-padding-block);
1468
- padding-inline:var(--tds-field-padding-inline);
1469
- font-family:inherit;
1470
- font-size:inherit;
1471
- color:inherit;
1472
- outline:0;
1473
- background:transparent;
1474
- border:0;
1475
- }
1476
-
1477
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1478
- margin:0;
1479
- -webkit-appearance:none;
1480
- appearance:none;
1481
- }
1482
-
1483
- .tds-number-stepper-button{
1484
- flex-shrink:0;
1485
- align-self:center;
1486
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1487
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1488
- padding:0;
1489
- }
1490
-
1491
- .tds-number-stepper-button + .tds-number-stepper-button{
1492
- margin-inline-start:var(--tds-number-stepper-button-gap);
1493
- }
1494
-
1495
- .tds-number-stepper-button:last-of-type{
1496
- margin-inline-end:var(--tds-number-stepper-button-offset);
1497
- }
1498
-
1499
- .tds-radio-group{
1500
- --tds-radio-group-font-size:var(--t-font-size-md);
1501
- --tds-radio-group-line-height:1.4;
1502
- --tds-radio-group-gap:var(--t-spacing-1);
1503
-
1504
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1505
- --tds-radio-group-description-line-height:1.35;
1506
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1507
- --tds-radio-group-description-invalid-icon-display:none;
1508
- display:flex;
1509
- flex-direction:column;
1510
- gap:0;
1511
- padding:0;
1512
- margin:0;
1513
-
1514
- font-size:var(--tds-radio-group-font-size);
1515
- line-height:var(--tds-radio-group-line-height);
1516
- border:0;
1517
- }
1518
-
1519
- .tds-radio-group legend{
1520
- float:left;
1521
- padding:0;
1522
- margin:0;
1523
- }
1524
-
1525
- .tds-radio-group[aria-invalid="true"]{
1526
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1527
- --tds-radio-group-description-invalid-icon-display:inline-block;
1528
- }
1529
-
1530
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1531
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1532
- }
1533
-
1534
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1535
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1536
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1537
- }
1538
-
1539
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1540
- --tds-radio-input-background-color:var(--t-form-background-color);
1541
- }
1542
-
1543
- .tds-radio-group:has(input:required) legend::after{
1544
- margin-left:.25ch;
1545
- color:var(--t-text-color-status-error);
1546
- content:"*";
1547
- }
1548
-
1549
- .tds-radio-group-fields{
1550
- display:flex;
1551
- flex-direction:column;
1552
- gap:var(--tds-radio-group-gap);
1553
- align-items:flex-start;
1554
- margin-top:var(--t-spacing-1);
1467
+
1468
+ .tds-date-picker-popover--lg{
1469
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1555
1470
  }
1556
1471
 
1557
- .tds-radio-group-description{
1558
- display:flex;
1559
- gap:var(--t-spacing-half);
1560
- align-items:flex-start;
1561
- margin:var(--t-spacing-fourth) 0 0;
1562
- font-size:var(--tds-radio-group-description-font-size);
1563
- line-height:var(--tds-radio-group-description-line-height);
1564
- color:var(--tds-radio-group-description-color);
1565
- cursor:text;
1472
+ .tds-number-stepper{
1473
+ --tds-number-stepper-button-offset:4px;
1474
+ --tds-number-stepper-button-gap:2px;
1566
1475
  }
1567
1476
 
1568
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1569
- display:var(--tds-radio-group-description-invalid-icon-display);
1570
- flex-shrink:0;
1571
- margin-top:calc(.5lh - .5em);
1572
- line-height:var(--tds-radio-group-description-line-height);
1573
- }
1477
+ .tds-number-stepper--lg{
1478
+ --tds-number-stepper-button-offset:5px;
1479
+ --tds-number-stepper-button-gap:4px;
1480
+ }
1574
1481
 
1575
- .tds-radio-group--sm{
1576
- --tds-radio-group-line-height:1.35;
1577
- --tds-radio-group-font-size:var(--t-font-size-sm);
1578
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1579
- --tds-radio-group-description-line-height:1.3;
1482
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1483
+ display:none;
1580
1484
  }
1581
1485
 
1486
+ .tds-number-stepper-input{
1487
+ display:flex;
1488
+ flex:1;
1489
+ align-items:center;
1490
+ min-inline-size:0;
1491
+ padding-block:var(--tds-field-padding-block);
1492
+ padding-inline:var(--tds-field-padding-inline);
1493
+ font-family:inherit;
1494
+ font-size:inherit;
1495
+ color:inherit;
1496
+ outline:0;
1497
+ background:transparent;
1498
+ border:0;
1499
+ }
1582
1500
 
1583
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1584
- -webkit-appearance:none;
1585
- appearance:none;
1586
- }
1501
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1502
+ margin:0;
1503
+ -webkit-appearance:none;
1504
+ appearance:none;
1505
+ }
1587
1506
 
1588
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1589
- inline-size:1em;
1590
- block-size:2em;
1591
- }
1507
+ .tds-number-stepper-button{
1508
+ flex-shrink:0;
1509
+ align-self:center;
1510
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1511
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1512
+ padding:0;
1513
+ }
1592
1514
 
1593
- @supports (field-sizing: content){
1594
- .tds-input--auto-width{
1595
- inline-size:-moz-fit-content;
1596
- inline-size:fit-content;
1597
- min-inline-size:min(100%, 122px);
1515
+ .tds-number-stepper-button + .tds-number-stepper-button{
1516
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1598
1517
  }
1599
1518
 
1600
- .tds-input--auto-width input{
1601
- field-sizing:content;
1602
- inline-size:auto;
1519
+ .tds-number-stepper-button:last-of-type{
1520
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1603
1521
  }
1604
- }
1605
1522
 
1606
1523
  .tds-radio{
1607
1524
  --tds-radio-font-size:var(--t-font-size-md);
@@ -1736,6 +1653,89 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1736
1653
  --tds-radio-description-line-height:1.3;
1737
1654
  }
1738
1655
 
1656
+ .tds-radio-group{
1657
+ --tds-radio-group-font-size:var(--t-font-size-md);
1658
+ --tds-radio-group-line-height:1.4;
1659
+ --tds-radio-group-gap:var(--t-spacing-1);
1660
+
1661
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1662
+ --tds-radio-group-description-line-height:1.35;
1663
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1664
+ --tds-radio-group-description-invalid-icon-display:none;
1665
+ display:flex;
1666
+ flex-direction:column;
1667
+ gap:0;
1668
+ padding:0;
1669
+ margin:0;
1670
+
1671
+ font-size:var(--tds-radio-group-font-size);
1672
+ line-height:var(--tds-radio-group-line-height);
1673
+ border:0;
1674
+ }
1675
+
1676
+ .tds-radio-group legend{
1677
+ float:left;
1678
+ padding:0;
1679
+ margin:0;
1680
+ }
1681
+
1682
+ .tds-radio-group[aria-invalid="true"]{
1683
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1684
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1685
+ }
1686
+
1687
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1688
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1689
+ }
1690
+
1691
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1692
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1693
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1694
+ }
1695
+
1696
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1697
+ --tds-radio-input-background-color:var(--t-form-background-color);
1698
+ }
1699
+
1700
+ .tds-radio-group:has(input:required) legend::after{
1701
+ margin-left:.25ch;
1702
+ color:var(--t-text-color-status-error);
1703
+ content:"*";
1704
+ }
1705
+
1706
+ .tds-radio-group-fields{
1707
+ display:flex;
1708
+ flex-direction:column;
1709
+ gap:var(--tds-radio-group-gap);
1710
+ align-items:flex-start;
1711
+ margin-top:var(--t-spacing-1);
1712
+ }
1713
+
1714
+ .tds-radio-group-description{
1715
+ display:flex;
1716
+ gap:var(--t-spacing-half);
1717
+ align-items:flex-start;
1718
+ margin:var(--t-spacing-fourth) 0 0;
1719
+ font-size:var(--tds-radio-group-description-font-size);
1720
+ line-height:var(--tds-radio-group-description-line-height);
1721
+ color:var(--tds-radio-group-description-color);
1722
+ cursor:text;
1723
+ }
1724
+
1725
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1726
+ display:var(--tds-radio-group-description-invalid-icon-display);
1727
+ flex-shrink:0;
1728
+ margin-top:calc(.5lh - .5em);
1729
+ line-height:var(--tds-radio-group-description-line-height);
1730
+ }
1731
+
1732
+ .tds-radio-group--sm{
1733
+ --tds-radio-group-line-height:1.35;
1734
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1735
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1736
+ --tds-radio-group-description-line-height:1.3;
1737
+ }
1738
+
1739
1739
  .tds-input:has(textarea){
1740
1740
  --tds-input-padding-block:6px;
1741
1741
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1800,52 +1800,192 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1800
1800
  border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1801
1801
  }
1802
1802
 
1803
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1804
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1803
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1804
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1805
+ }
1806
+
1807
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1808
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1809
+ }
1810
+
1811
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1812
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1813
+ }
1814
+
1815
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1816
+ background:var(--tds-input-scrollbar-surface-color);
1817
+ }
1818
+
1819
+ :is(.tds-input textarea)::-webkit-resizer{
1820
+ background:var(--tds-input-resizer-icon) no-repeat;
1821
+ background-position:right bottom;
1822
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1823
+ }
1824
+
1825
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1826
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1827
+ cursor:default;
1828
+ }
1829
+
1830
+ @supports (-moz-appearance: none){
1831
+ :is(.tds-input textarea){
1832
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1833
+ scrollbar-width:thin;
1834
+ }
1835
+
1836
+ @media (hover){
1837
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1838
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1839
+ }
1840
+ }
1841
+ }
1842
+ }
1843
+
1844
+ .tds-time-field-input{
1845
+ --tds-field-date-segment-padding-inline:1px;
1846
+ padding-block:var(--tds-field-padding-block);
1847
+ padding-inline:var(--tds-field-padding-inline);
1848
+ font-variant-numeric:tabular-nums;
1849
+ }
1850
+
1851
+ .tds-toggle-switch{
1852
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1853
+ --tds-toggle-switch-cursor:pointer;
1854
+ --tds-toggle-switch-display:inline-grid;
1855
+ --tds-toggle-switch-line-height:1.4;
1856
+
1857
+ --tds-toggle-switch-label-color:var(--t-form-color);
1858
+
1859
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1860
+ --tds-toggle-switch-track-outline:none;
1861
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1862
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1863
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1864
+
1865
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1866
+ --tds-toggle-switch-thumb-transform:translateX(0);
1867
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1868
+
1869
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1870
+ --tds-toggle-switch-description-line-height:1.35;
1871
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1872
+ position:relative;
1873
+
1874
+ display:var(--tds-toggle-switch-display);
1875
+ grid-template-columns:auto;
1876
+ grid-auto-columns:1fr;
1877
+ gap:var(--t-spacing-fourth) 0;
1878
+ -webkit-user-select:none;
1879
+ -moz-user-select:none;
1880
+ user-select:none;
1881
+ }
1882
+
1883
+ .tds-toggle-switch input[type="checkbox"]{
1884
+ position:absolute;
1885
+ width:var(--tds-toggle-switch-track-width);
1886
+ height:var(--tds-toggle-switch-track-height);
1887
+ margin:0;
1888
+ -webkit-appearance:none;
1889
+ -moz-appearance:none;
1890
+ appearance:none;
1891
+ cursor:var(--tds-toggle-switch-cursor);
1892
+ outline:var(--tds-toggle-switch-track-outline);
1893
+ outline-offset:var(--t-focus-ring-offset);
1894
+ background-color:transparent;
1895
+ border:0;
1896
+ border-radius:var(--t-border-radius-round);
1897
+ }
1898
+
1899
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1900
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1805
1901
  }
1806
1902
 
1807
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1808
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1809
- }
1903
+ .tds-toggle-switch label{
1904
+ display:inline-flex;
1905
+ grid-area:1 / 2;
1906
+ padding-inline-start:var(--t-spacing-1);
1907
+ margin-top:-.09375em;
1908
+ font-size:var(--tds-toggle-switch-font-size);
1909
+ font-weight:var(--t-font-weight-normal);
1910
+ line-height:var(--tds-toggle-switch-line-height);
1911
+ color:var(--tds-toggle-switch-label-color);
1912
+ cursor:var(--tds-toggle-switch-cursor);
1913
+ }
1810
1914
 
1811
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1812
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1813
- }
1915
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1916
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1917
+ }
1814
1918
 
1815
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1816
- background:var(--tds-input-scrollbar-surface-color);
1817
- }
1919
+ .tds-toggle-switch:has(input:checked){
1920
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1921
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1922
+ }
1818
1923
 
1819
- :is(.tds-input textarea)::-webkit-resizer{
1820
- background:var(--tds-input-resizer-icon) no-repeat;
1821
- background-position:right bottom;
1822
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1924
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1925
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1823
1926
  }
1824
1927
 
1825
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1826
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1827
- cursor:default;
1828
- }
1928
+ .tds-toggle-switch:has(input:disabled){
1929
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1930
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1931
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1932
+ --tds-toggle-switch-cursor:not-allowed;
1933
+ }
1829
1934
 
1830
- @supports (-moz-appearance: none){
1831
- :is(.tds-input textarea){
1832
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1833
- scrollbar-width:thin;
1834
- }
1935
+ .tds-toggle-switch-track{
1936
+ position:relative;
1937
+ flex-shrink:0;
1938
+ width:var(--tds-toggle-switch-track-width);
1939
+ height:var(--tds-toggle-switch-track-height);
1940
+ background-color:var(--tds-toggle-switch-track-background-color);
1941
+ border-radius:var(--t-border-radius-round);
1942
+ transition:var(--tds-toggle-switch-track-transition);
1943
+ }
1835
1944
 
1836
- @media (hover){
1837
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1838
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1839
- }
1840
- }
1841
- }
1945
+ .tds-toggle-switch-track::before{
1946
+ position:absolute;
1947
+ top:var(--t-spacing-fourth);
1948
+ left:var(--t-spacing-fourth);
1949
+ width:var(--tds-toggle-switch-thumb-size);
1950
+ height:var(--tds-toggle-switch-thumb-size);
1951
+ content:"";
1952
+ background-color:#fff;
1953
+ border-radius:var(--t-border-radius-round);
1954
+ transform:var(--tds-toggle-switch-thumb-transform);
1955
+ transition:var(--tds-toggle-switch-thumb-transition);
1842
1956
  }
1843
1957
 
1844
- .tds-time-field-input{
1845
- --tds-field-date-segment-padding-inline:1px;
1846
- padding-block:var(--tds-field-padding-block);
1847
- padding-inline:var(--tds-field-padding-inline);
1848
- font-variant-numeric:tabular-nums;
1958
+ @media (prefers-reduced-motion: reduce){
1959
+
1960
+ .tds-toggle-switch-track{
1961
+ --tds-toggle-switch-track-transition:none;
1962
+ --tds-toggle-switch-thumb-transition:none;
1963
+ }
1964
+ }
1965
+
1966
+ .tds-toggle-switch-description{
1967
+ display:flex;
1968
+ grid-area:2 / 2;
1969
+ align-items:flex-start;
1970
+ padding-inline-start:var(--t-spacing-1);
1971
+ margin:0;
1972
+ font-size:var(--tds-toggle-switch-description-font-size);
1973
+ line-height:var(--tds-toggle-switch-description-line-height);
1974
+ color:var(--tds-toggle-switch-description-color);
1975
+ cursor:text;
1976
+ }
1977
+
1978
+ .tds-toggle-switch--sm{
1979
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1980
+ --tds-toggle-switch-line-height:1.35;
1981
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1982
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1983
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1984
+ --tds-toggle-switch-description-line-height:1.3;
1985
+ }
1986
+
1987
+ .tds-toggle-switch--hide-label{
1988
+ --tds-toggle-switch-display:inline-flex;
1849
1989
  }
1850
1990
 
1851
1991
  .tds-input{
@@ -2132,146 +2272,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2132
2272
  color:var(--tds-field-color);
2133
2273
  }
2134
2274
 
2135
- .tds-toggle-switch{
2136
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2137
- --tds-toggle-switch-cursor:pointer;
2138
- --tds-toggle-switch-display:inline-grid;
2139
- --tds-toggle-switch-line-height:1.4;
2140
-
2141
- --tds-toggle-switch-label-color:var(--t-form-color);
2142
-
2143
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2144
- --tds-toggle-switch-track-outline:none;
2145
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2146
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2147
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2148
-
2149
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2150
- --tds-toggle-switch-thumb-transform:translateX(0);
2151
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2152
-
2153
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2154
- --tds-toggle-switch-description-line-height:1.35;
2155
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2156
- position:relative;
2157
-
2158
- display:var(--tds-toggle-switch-display);
2159
- grid-template-columns:auto;
2160
- grid-auto-columns:1fr;
2161
- gap:var(--t-spacing-fourth) 0;
2162
- -webkit-user-select:none;
2163
- -moz-user-select:none;
2164
- user-select:none;
2165
- }
2166
-
2167
- .tds-toggle-switch input[type="checkbox"]{
2168
- position:absolute;
2169
- width:var(--tds-toggle-switch-track-width);
2170
- height:var(--tds-toggle-switch-track-height);
2171
- margin:0;
2172
- -webkit-appearance:none;
2173
- -moz-appearance:none;
2174
- appearance:none;
2175
- cursor:var(--tds-toggle-switch-cursor);
2176
- outline:var(--tds-toggle-switch-track-outline);
2177
- outline-offset:var(--t-focus-ring-offset);
2178
- background-color:transparent;
2179
- border:0;
2180
- border-radius:var(--t-border-radius-round);
2181
- }
2182
-
2183
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2184
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2185
- }
2186
-
2187
- .tds-toggle-switch label{
2188
- display:inline-flex;
2189
- grid-area:1 / 2;
2190
- padding-inline-start:var(--t-spacing-1);
2191
- margin-top:-.09375em;
2192
- font-size:var(--tds-toggle-switch-font-size);
2193
- font-weight:var(--t-font-weight-normal);
2194
- line-height:var(--tds-toggle-switch-line-height);
2195
- color:var(--tds-toggle-switch-label-color);
2196
- cursor:var(--tds-toggle-switch-cursor);
2197
- }
2198
-
2199
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2200
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2201
- }
2202
-
2203
- .tds-toggle-switch:has(input:checked){
2204
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2205
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2206
- }
2207
-
2208
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2209
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2210
- }
2211
-
2212
- .tds-toggle-switch:has(input:disabled){
2213
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2214
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2215
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2216
- --tds-toggle-switch-cursor:not-allowed;
2217
- }
2218
-
2219
- .tds-toggle-switch-track{
2220
- position:relative;
2221
- flex-shrink:0;
2222
- width:var(--tds-toggle-switch-track-width);
2223
- height:var(--tds-toggle-switch-track-height);
2224
- background-color:var(--tds-toggle-switch-track-background-color);
2225
- border-radius:var(--t-border-radius-round);
2226
- transition:var(--tds-toggle-switch-track-transition);
2227
- }
2228
-
2229
- .tds-toggle-switch-track::before{
2230
- position:absolute;
2231
- top:var(--t-spacing-fourth);
2232
- left:var(--t-spacing-fourth);
2233
- width:var(--tds-toggle-switch-thumb-size);
2234
- height:var(--tds-toggle-switch-thumb-size);
2235
- content:"";
2236
- background-color:#fff;
2237
- border-radius:var(--t-border-radius-round);
2238
- transform:var(--tds-toggle-switch-thumb-transform);
2239
- transition:var(--tds-toggle-switch-thumb-transition);
2240
- }
2241
-
2242
- @media (prefers-reduced-motion: reduce){
2243
-
2244
- .tds-toggle-switch-track{
2245
- --tds-toggle-switch-track-transition:none;
2246
- --tds-toggle-switch-thumb-transition:none;
2247
- }
2248
- }
2249
-
2250
- .tds-toggle-switch-description{
2251
- display:flex;
2252
- grid-area:2 / 2;
2253
- align-items:flex-start;
2254
- padding-inline-start:var(--t-spacing-1);
2255
- margin:0;
2256
- font-size:var(--tds-toggle-switch-description-font-size);
2257
- line-height:var(--tds-toggle-switch-description-line-height);
2258
- color:var(--tds-toggle-switch-description-color);
2259
- cursor:text;
2260
- }
2261
-
2262
- .tds-toggle-switch--sm{
2263
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2264
- --tds-toggle-switch-line-height:1.35;
2265
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2266
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2267
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2268
- --tds-toggle-switch-description-line-height:1.3;
2269
- }
2270
-
2271
- .tds-toggle-switch--hide-label{
2272
- --tds-toggle-switch-display:inline-flex;
2273
- }
2274
-
2275
2275
  .tds-select{
2276
2276
  --tds-select-border-color:var(--t-form-border-color);
2277
2277
  --tds-select-border-color-hover:var(--t-form-border-color-hover);