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

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 +1889 -1889
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1889 -1889
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -1,378 +1,279 @@
1
- .tds-checkbox{
2
- --tds-checkbox-font-size:var(--t-font-size-md);
3
- --tds-checkbox-cursor:pointer;
4
- --tds-checkbox-line-height:1.4;
5
- --tds-checkbox-transition-property:background-color, border-color;
6
-
7
- --tds-checkbox-input-size:var(--t-element-size-md);
8
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
- --tds-checkbox-input-border-color:var(--t-form-border-color);
10
- --tds-checkbox-input-background-color:var(--t-form-background-color);
11
-
12
- --tds-checkbox-input-icon:none;
13
- --tds-checkbox-input-icon-visibility:hidden;
14
- --tds-checkbox-input-icon-opacity:0;
15
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
16
-
17
- --tds-checkbox-label-color:var(--t-form-color);
18
-
19
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
- --tds-checkbox-description-line-height:1.35;
21
- --tds-checkbox-description-color:var(--t-text-color-secondary);
22
- --tds-checkbox-description-invalid-icon-display:none;
23
-
24
- position:relative;
25
- display:inline-grid;
26
- grid-template-columns:auto;
27
- grid-auto-columns:1fr;
28
- gap:var(--t-spacing-fourth) 0;
29
- line-height:var(--tds-checkbox-line-height);
30
- -webkit-user-select:none;
31
- -moz-user-select:none;
32
- user-select:none;
33
- }
34
-
35
- .tds-checkbox label{
36
- grid-area:1 / 2;
37
- padding-inline-start:var(--t-spacing-1);
38
- font-size:var(--tds-checkbox-font-size);
39
- font-weight:var(--t-font-weight-normal);
40
- color:var(--tds-checkbox-label-color);
41
- cursor:var(--tds-checkbox-cursor);
42
- }
43
-
44
- .tds-checkbox tds-indeterminate{
45
- display:flex;
46
- }
47
-
48
- .tds-checkbox input[type="checkbox"]{
49
- position:relative;
50
- width:1em;
51
- height:1em;
52
- margin:calc((1lh - 1em) / 2) 0 0;
53
- font-size:var(--tds-checkbox-font-size);
54
- line-height:inherit;
55
- -webkit-appearance:none;
56
- -moz-appearance:none;
57
- appearance:none;
58
- cursor:var(--tds-checkbox-cursor);
59
- background-color:var(--tds-checkbox-input-background-color);
60
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
- border-radius:var(--tds-checkbox-input-border-radius);
62
- transition-timing-function:var(--t-ease-in-out);
63
- transition-duration:var(--t-duration-200);
64
- transition-property:var(--tds-checkbox-transition-property);
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
65
4
  }
5
+ }
66
6
 
67
- :is(.tds-checkbox input[type="checkbox"])::before{
68
- position:absolute;
69
- top:50%;
70
- left:50%;
71
- visibility:var(--tds-checkbox-input-icon-visibility);
72
- width:100%;
73
- height:100%;
74
- content:"";
75
- background-color:var(--tds-checkbox-input-icon-fill);
76
- border-radius:var(--tds-checkbox-input-border-radius);
77
- opacity:var(--tds-checkbox-input-icon-opacity);
78
- -webkit-mask-image:var(--tds-checkbox-input-icon);
79
- mask-image:var(--tds-checkbox-input-icon);
80
- -webkit-mask-repeat:no-repeat;
81
- mask-repeat:no-repeat;
82
- -webkit-mask-size:contain;
83
- mask-size:contain;
84
- transform:translate(-50%, -50%);
85
- }
86
-
87
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
- }
91
-
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
- outline:var(--t-focus-ring-outline);
94
- outline-offset:var(--t-focus-ring-offset);
95
- }
96
-
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
99
- }
100
-
101
- @media (prefers-reduced-motion: reduce){
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;
102
25
 
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
- }
106
- }
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);
107
28
 
108
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
- --tds-checkbox-input-icon-visibility:visible;
112
- --tds-checkbox-input-icon-opacity:1;
113
- }
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);
114
32
 
115
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
- }
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);
119
35
 
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
- }
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);
123
39
 
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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);
126
45
  }
127
46
 
128
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
- --tds-checkbox-description-color:var(--t-text-color-status-error);
131
- --tds-checkbox-description-invalid-icon-display:inline-block;
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
132
49
  }
133
50
 
134
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
137
- }
138
-
139
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
140
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
142
- }
143
-
144
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
145
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
147
- }
148
-
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
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));
153
55
  }
154
-
155
- .tds-checkbox:has(input:disabled){
156
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
158
-
159
- --tds-checkbox-label-color:var(--t-form-color-disabled);
160
- --tds-checkbox-description-color:var(--t-form-color-disabled);
161
- --tds-checkbox-cursor:not-allowed;
162
56
  }
163
57
 
164
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
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);
166
76
  }
167
-
168
- .tds-checkbox-description{
169
- display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
172
- align-items:flex-start;
173
- padding-inline-start:var(--t-spacing-1);
174
- margin:0;
175
- font-size:var(--tds-checkbox-description-font-size);
176
- line-height:var(--tds-checkbox-description-line-height);
177
- color:var(--tds-checkbox-description-color);
178
- cursor:text;
179
- }
180
-
181
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
182
- display:var(--tds-checkbox-description-invalid-icon-display);
183
- flex-shrink:0;
184
- margin-top:calc(.5lh - .5em);
185
- line-height:var(--tds-checkbox-description-line-height);
186
77
  }
187
-
188
- .tds-checkbox--sm{
189
- --tds-checkbox-line-height:1.35;
190
- --tds-checkbox-input-size:var(--t-element-size-sm);
191
- --tds-checkbox-font-size:var(--t-font-size-sm);
192
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
193
- --tds-checkbox-description-line-height:1.3;
194
78
  }
195
79
 
196
- .tds-combo-box{
197
- --tds-combo-box-button-offset:4px;
80
+ .tds-page-header{
81
+ 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);
198
87
  }
199
88
 
200
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
201
- transform:rotate(.5turn);
89
+ .tds-page-header:not(.has-nav){
90
+ padding-bottom:var(--tds-page-header-padding-y);
202
91
  }
203
92
 
204
- .tds-combo-box--lg{
205
- --tds-combo-box-button-offset:5px;
206
- }
207
-
208
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
209
- display:none;
210
- }
211
-
212
- .tds-combo-box-input{
213
- display:flex;
214
- flex:1;
215
- align-items:center;
216
- padding-block:var(--tds-field-padding-block);
217
- padding-inline:var(--tds-field-padding-inline);
218
- font-family:inherit;
219
- font-size:inherit;
220
- color:inherit;
221
- outline:0;
222
- background:transparent;
223
- border:0;
224
- }
225
-
226
- .tds-combo-box-input:has( + .tds-combo-box-button){
227
- padding-inline-end:0;
93
+ .tds-page-header.inactive{
94
+ background:var(--tds-page-header-background-color-inactive);
228
95
  }
229
96
 
230
- .tds-combo-box-input::-moz-placeholder{
231
- color:var(--tds-field-placeholder-color);
232
- -moz-user-select:none;
233
- user-select:none;
97
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
+ width:100%;
234
99
  }
235
100
 
236
- .tds-combo-box-input::placeholder{
237
- color:var(--tds-field-placeholder-color);
238
- -webkit-user-select:none;
239
- -moz-user-select:none;
240
- user-select:none;
101
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
102
+ 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;
241
108
  }
242
109
 
243
- .tds-combo-box-button{
244
- flex-shrink:0;
245
- align-self:center;
246
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
247
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
248
- padding:0;
249
- margin-inline-end:var(--tds-combo-box-button-offset);
250
- }
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);
118
+ }
251
119
 
252
- .tds-combo-box-button > svg{
253
- inline-size:var(--tds-field-font-size);
254
- block-size:var(--tds-field-font-size);
255
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
256
- }
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;
128
+ 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
+ }
257
140
 
258
- .tds-combo-box-popover{
259
- width:var(--trigger-width);
260
- max-block-size:inherit;
261
- padding:var(--t-spacing-1);
262
- overflow:auto;
263
- scroll-behavior:smooth;
264
- overscroll-behavior:none;
265
- -webkit-user-select:none;
266
- -moz-user-select:none;
267
- user-select:none;
268
- outline:0;
269
- scrollbar-color:#0004 var(--t-surface-color-card);
270
- scrollbar-width:thin;
271
- background:var(--t-surface-color-card);
272
- background-clip:padding-box;
273
- border:1px solid var(--t-border-color);
274
- border-radius:var(--t-border-radius);
275
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
276
- }
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);
146
+ }
277
147
 
278
- .tds-combo-box-popover[data-entering]{
279
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
280
- }
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
+ }
281
154
 
282
- .tds-combo-box-popover[data-exiting]{
283
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
284
- }
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
+ }
285
160
 
286
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
287
- will-change:opacity, transform;
288
- }
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
+ }
289
168
 
290
- @keyframes tds-combo-box-popover{
291
- from{
292
- opacity:0;
293
- transform:translateY(-8px);
294
- }
295
- }
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
+ }
296
179
 
297
- @media (prefers-reduced-motion: reduce){
298
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
299
- animation:none;
180
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
+ position:relative;
300
182
  }
301
183
 
302
- .tds-combo-box-button > svg{
303
- transition:none;
304
- }
305
- }
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);
187
+ }
306
188
 
307
- .tds-combo-box-list{
308
- padding:0;
309
- margin:0;
310
- }
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{
190
+ position:absolute;
191
+ top:-5px;
192
+ right:-2px;
193
+ width:10px;
194
+ height:10px;
195
+ content:"";
196
+ background:var(--tds-page-header-nav-item-indicator-color);
197
+ border-radius:50%;
198
+ }
311
199
 
312
- .tds-combo-box-list-item{
313
- display:block;
314
- padding-block:var(--t-spacing-1);
315
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
316
- overflow:hidden;
317
- text-overflow:ellipsis;
318
- font-size:1rem;
319
- color:var(--t-text-color);
320
- white-space:nowrap;
321
- cursor:default;
322
- border-radius:var(--t-border-radius);
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
+ }
204
+ }
205
+
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);
323
213
  }
324
214
 
325
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
326
- background:var(--t-fill-color-neutral-070);
215
+ .tds-page-header--profile > .tds-page-header__title-bar{
216
+ align-items:center;
327
217
  }
328
218
 
329
- .tds-combo-box-list-item[data-selected]{
330
- background:var(--t-fill-color-button-interaction-ghost-active);
331
- }
219
+ .tds-page-header__primary{
220
+ width:100%;
221
+ }
332
222
 
333
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
334
- background:var(--t-fill-color-neutral-060);
223
+ .tds-page-header__primary h1{
224
+ 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;
335
230
  }
336
231
 
337
- .tds-combo-box-list-item[data-disabled]{
338
- color:var(--t-form-color-disabled);
339
- cursor:not-allowed;
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%;
340
238
  }
341
239
 
342
- .tds-combo-box-list-item[data-disabled][data-hovered]{
343
- background:transparent;
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;
245
+ }
246
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
+ width:auto;
344
248
  }
345
249
 
346
- .tds-combo-box-empty-state{
347
- position:relative;
348
- min-block-size:var(--t-spacing-3);
349
- padding-block:var(--t-spacing-1);
350
- padding-inline:var(--t-spacing-2);
351
- font-size:var(--t-font-size-md);
352
- color:var(--t-text-color-secondary);
250
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
+ justify-content:flex-end;
252
+ }
353
253
  }
354
254
 
355
- .tds-combo-box-load-more{
356
- position:relative;
357
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
255
+ .tds-page-header-phone,
256
+ .tds-page-header-email{
257
+ color:var(--tds-page-header-color);
258
+ white-space:nowrap;
358
259
  }
359
260
 
360
- .tds-combo-box-empty-state,
361
- .tds-combo-box-load-more{
362
- --tds-loading-spinner-visibility:visible;
363
- --tds-loading-spinner-animation-play-state:running;
261
+ .tds-page-header-email{
262
+ max-width:100%;
263
+ overflow:hidden;
264
+ text-overflow:ellipsis;
364
265
  }
365
266
 
366
- .tds-combo-box-list-section:not(:first-child){
367
- margin-block-start:var(--t-spacing-half);
267
+ @keyframes indicator-pulse{
268
+ 0%{
269
+ opacity:.3;
270
+ transform:scale(.9);
368
271
  }
369
272
 
370
- .tds-combo-box-section-header{
371
- padding-block:var(--t-spacing-1);
372
- padding-inline:var(--t-spacing-1);
373
- font-size:var(--t-font-size-sm);
374
- font-weight:var(--t-font-weight-semibold);
375
- color:var(--t-text-color-secondary);
273
+ 100%{
274
+ opacity:0;
275
+ transform:scale(1.75);
276
+ }
376
277
  }
377
278
 
378
279
  .tds-checkbox-group{
@@ -403,1139 +304,1198 @@
403
304
 
404
305
  .tds-checkbox-group[aria-invalid="true"]{
405
306
  --tds-checkbox-group-description-color:var(--t-text-color-status-error);
406
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
407
- }
408
-
409
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
410
- margin-left:.25ch;
411
- color:var(--t-text-color-status-error);
412
- content:"*";
413
- }
414
-
415
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
416
- content:none;
417
- }
418
-
419
- .tds-checkbox-group-fields{
420
- display:flex;
421
- flex-direction:column;
422
- gap:var(--tds-checkbox-group-gap);
423
- align-items:flex-start;
424
- margin-top:var(--t-spacing-1);
425
- }
426
-
427
- .tds-checkbox-group-description{
428
- display:flex;
429
- gap:var(--t-spacing-half);
430
- align-items:flex-start;
431
- margin:var(--t-spacing-fourth) 0 0;
432
- font-size:var(--tds-checkbox-group-description-font-size);
433
- line-height:var(--tds-checkbox-group-description-line-height);
434
- color:var(--tds-checkbox-group-description-color);
435
- cursor:text;
436
- }
437
-
438
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
439
- display:var(--tds-checkbox-group-description-invalid-icon-display);
440
- flex-shrink:0;
441
- margin-top:calc(.5lh - .5em);
442
- line-height:var(--tds-checkbox-group-description-line-height);
443
- }
444
-
445
- .tds-checkbox-group--sm{
446
- --tds-checkbox-group-line-height:1.35;
447
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
448
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
449
- --tds-checkbox-group-description-line-height:1.3;
450
- }
451
-
452
- .tds-number-stepper{
453
- --tds-number-stepper-button-offset:4px;
454
- --tds-number-stepper-button-gap:2px;
455
- }
456
-
457
- .tds-number-stepper--lg{
458
- --tds-number-stepper-button-offset:5px;
459
- --tds-number-stepper-button-gap:4px;
460
- }
461
-
462
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
463
- display:none;
464
- }
465
-
466
- .tds-number-stepper-input{
467
- display:flex;
468
- flex:1;
469
- align-items:center;
470
- min-inline-size:0;
471
- padding-block:var(--tds-field-padding-block);
472
- padding-inline:var(--tds-field-padding-inline);
473
- font-family:inherit;
474
- font-size:inherit;
475
- color:inherit;
476
- outline:0;
477
- background:transparent;
478
- border:0;
479
- }
480
-
481
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
482
- margin:0;
483
- -webkit-appearance:none;
484
- appearance:none;
485
- }
486
-
487
- .tds-number-stepper-button{
488
- flex-shrink:0;
489
- align-self:center;
490
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
491
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
492
- padding:0;
493
- }
494
-
495
- .tds-number-stepper-button + .tds-number-stepper-button{
496
- margin-inline-start:var(--tds-number-stepper-button-gap);
497
- }
498
-
499
- .tds-number-stepper-button:last-of-type{
500
- margin-inline-end:var(--tds-number-stepper-button-offset);
501
- }
502
-
503
- .tds-date-picker{
504
- --tds-date-picker-button-offset:4px;
505
- }
506
-
507
- .tds-date-picker--lg{
508
- --tds-date-picker-button-offset:5px;
509
- }
510
-
511
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
512
- outline-color:transparent;
513
- outline-offset:0;
514
- border-color:var(--tds-field-border-color);
515
- }
516
-
517
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
518
- display:none;
519
- }
520
-
521
- .tds-date-picker-input{
522
- flex:1;
523
- padding-block:var(--tds-field-padding-block);
524
- padding-inline:var(--tds-field-padding-inline);
525
- overflow:auto clip;
526
- font-variant-numeric:tabular-nums;
527
- text-wrap:nowrap;
528
- scrollbar-width:none;
529
- }
530
-
531
- .tds-date-picker-input:has( + .tds-date-picker-button){
532
- padding-inline-end:0;
533
- }
534
-
535
- .tds-date-picker-button{
536
- flex-shrink:0;
537
- align-self:center;
538
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
539
- block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
540
- padding:0;
541
- margin-inline-end:var(--tds-date-picker-button-offset);
542
- }
543
-
544
- .tds-date-picker-popover{
545
- --tds-date-picker-popover-font-size:var(--t-font-size-md);
546
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
547
- --tds-date-picker-popover-background-color:var(--t-surface-color-card);
548
- --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
549
- --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
550
- --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
551
- --tds-date-picker-popover-interactive-property:color, background-color, border-color;
552
-
553
- position:relative;
554
- overflow:hidden;
555
- background-color:var(--tds-date-picker-popover-background-color);
556
- border:var(--t-border-width) solid var(--t-border-color);
557
- border-radius:var(--t-border-radius);
558
- box-shadow:var(--tds-date-picker-popover-shadow);
559
- }
560
-
561
- .tds-date-picker-popover[data-entering]{
562
- animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
563
- }
564
-
565
- .tds-date-picker-popover[data-exiting]{
566
- animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
567
- }
568
-
569
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
570
- will-change:opacity, transform;
571
- }
572
-
573
- @keyframes tds-date-picker-popover{
574
- from{
575
- opacity:0;
576
- transform:translateY(-8px);
307
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
577
308
  }
578
- }
579
309
 
580
- @media (prefers-reduced-motion: reduce){
581
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
582
- animation:none;
310
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
311
+ margin-left:.25ch;
312
+ color:var(--t-text-color-status-error);
313
+ content:"*";
583
314
  }
584
- }
585
315
 
586
- .tds-date-picker-overlay{
587
- position:absolute;
588
- inset:0;
589
- z-index:1;
316
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
317
+ content:none;
318
+ }
319
+
320
+ .tds-checkbox-group-fields{
590
321
  display:flex;
591
- background-color:var(--tds-date-picker-popover-background-color);
322
+ flex-direction:column;
323
+ gap:var(--tds-checkbox-group-gap);
324
+ align-items:flex-start;
325
+ margin-top:var(--t-spacing-1);
592
326
  }
593
327
 
594
- .tds-date-picker-overlay-list{
595
- display:grid;
596
- flex:1;
597
- grid-template-columns:repeat(3, 1fr);
328
+ .tds-checkbox-group-description{
329
+ display:flex;
598
330
  gap:var(--t-spacing-half);
599
- padding-inline:var(--tds-date-picker-popover-padding);
600
- outline:0;
601
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
602
- scrollbar-width:thin;
331
+ align-items:flex-start;
332
+ margin:var(--t-spacing-fourth) 0 0;
333
+ font-size:var(--tds-checkbox-group-description-font-size);
334
+ line-height:var(--tds-checkbox-group-description-line-height);
335
+ color:var(--tds-checkbox-group-description-color);
336
+ cursor:text;
603
337
  }
604
338
 
605
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
606
- grid-template-rows:repeat(4, 1fr);
607
- padding-bottom:var(--tds-date-picker-popover-padding);
339
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
340
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
341
+ flex-shrink:0;
342
+ margin-top:calc(.5lh - .5em);
343
+ line-height:var(--tds-checkbox-group-description-line-height);
344
+ }
345
+
346
+ .tds-checkbox-group--sm{
347
+ --tds-checkbox-group-line-height:1.35;
348
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
349
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
350
+ --tds-checkbox-group-description-line-height:1.3;
608
351
  }
609
352
 
610
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
611
- grid-auto-rows:var(--t-container-size-xl);
612
- padding-right:var(--t-spacing-1);
613
- overflow-y:auto;
614
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
353
+ .tds-combo-box{
354
+ --tds-combo-box-button-offset:4px;
615
355
  }
616
356
 
617
- .tds-date-picker-overlay-cell{
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{
618
370
  display:flex;
371
+ flex:1;
619
372
  align-items:center;
620
- justify-content:center;
373
+ padding-block:var(--tds-field-padding-block);
374
+ padding-inline:var(--tds-field-padding-inline);
621
375
  font-family:inherit;
622
- font-size:var(--tds-date-picker-popover-font-size);
623
- color:var(--t-text-color);
624
- cursor:pointer;
376
+ font-size:inherit;
377
+ color:inherit;
625
378
  outline:0;
626
- background-color:transparent;
379
+ background:transparent;
627
380
  border:0;
628
- border-radius:var(--t-border-radius-md);
629
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
630
- transition-duration:var(--t-duration-100);
631
- transition-property:var(--tds-date-picker-popover-interactive-property);
632
381
  }
633
382
 
634
- .tds-date-picker-overlay-cell[data-hovered]{
635
- background-color:var(--t-fill-color-button-neutral-outline-hover);
383
+ .tds-combo-box-input:has( + .tds-combo-box-button){
384
+ padding-inline-end:0;
636
385
  }
637
386
 
638
- .tds-date-picker-overlay-cell[data-pressed]{
639
- background-color:var(--t-fill-color-button-neutral-outline-active);
387
+ .tds-combo-box-input::-moz-placeholder{
388
+ color:var(--tds-field-placeholder-color);
389
+ -moz-user-select:none;
390
+ user-select:none;
640
391
  }
641
392
 
642
- .tds-date-picker-overlay-cell[data-selected]{
643
- font-weight:var(--t-font-weight-semibold);
644
- color:var(--t-text-color-inverted);
645
- background-color:var(--t-fill-color-interaction);
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;
646
398
  }
647
399
 
648
- .tds-date-picker-overlay-cell[data-focus-visible]{
649
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
650
- }
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
+ }
651
408
 
652
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
653
- outline-offset:var(--t-focus-ring-offset);
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);
654
413
  }
655
414
 
656
- .tds-date-picker-calendar-heading{
657
- display:flex;
658
- flex:1;
659
- gap:var(--t-spacing-1);
660
- align-items:center;
661
- justify-content:flex-start;
662
- padding-inline-start:4px;
663
- }
664
-
665
- .tds-date-picker-calendar-overlay-trigger{
666
- --_background-color:transparent;
667
- position:relative;
668
- padding:0;
669
- font-family:inherit;
670
- font-size:var(--tds-date-picker-popover-font-size);
671
- font-weight:var(--t-font-weight-semibold);
672
- font-feature-settings:"ss01", "ss02";
673
- color:var(--t-text-color);
674
- cursor:pointer;
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;
675
425
  outline:0;
676
- background-color:transparent;
677
- border:0;
678
- border-radius:var(--t-border-radius-md);
679
- isolation:isolate;
680
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
681
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
682
- transition-property:var(--tds-date-picker-popover-interactive-property);
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);
683
433
  }
684
434
 
685
- .tds-date-picker-calendar-overlay-trigger::before{
686
- position:absolute;
687
- inset:calc(var(--t-spacing-half) * -1);
688
- z-index:-1;
689
- pointer-events:inherit;
690
- content:"";
691
- background-color:var(--_background-color);
692
- border-radius:inherit;
435
+ .tds-combo-box-popover[data-entering]{
436
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
693
437
  }
694
438
 
695
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
696
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
439
+ .tds-combo-box-popover[data-exiting]{
440
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
697
441
  }
698
442
 
699
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
700
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
443
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
444
+ will-change:opacity, transform;
701
445
  }
702
446
 
703
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
704
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
705
- outline-offset:var(--t-focus-ring-offset);
447
+ @keyframes tds-combo-box-popover{
448
+ from{
449
+ opacity:0;
450
+ transform:translateY(-8px);
706
451
  }
707
-
708
- .tds-date-picker-calendar{
709
- inline-size:-moz-fit-content;
710
- inline-size:fit-content;
711
- font-size:var(--tds-date-picker-popover-font-size);
712
452
  }
713
453
 
714
- .tds-date-picker-calendar-body{
715
- position:relative;
716
- padding:var(--tds-date-picker-popover-padding);
717
- padding-block-start:0;
718
- }
454
+ @media (prefers-reduced-motion: reduce){
455
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
456
+ animation:none;
457
+ }
719
458
 
720
- .tds-date-picker-calendar-header{
721
- display:flex;
722
- align-items:center;
723
- justify-content:space-between;
724
- padding:var(--tds-date-picker-popover-padding);
459
+ .tds-combo-box-button > svg{
460
+ transition:none;
461
+ }
725
462
  }
726
463
 
727
- .tds-date-picker-calendar-title{
728
- padding:var(--t-spacing-half) var(--t-spacing-1);
729
- font-size:var(--tds-date-picker-popover-font-size);
730
- font-weight:var(--t-font-weight-semibold);
464
+ .tds-combo-box-list{
465
+ padding:0;
466
+ margin:0;
731
467
  }
732
468
 
733
- .tds-date-picker-calendar-nav{
734
- display:flex;
735
- align-items:center;
736
- justify-content:center;
737
- padding:var(--t-spacing-half);
738
- font-size:.875em;
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;
739
476
  color:var(--t-text-color);
740
- cursor:pointer;
741
- outline:0;
742
- background-color:transparent;
743
- border:0;
744
- border-radius:var(--t-border-radius-md);
745
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
746
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
747
- transition-property:var(--tds-date-picker-popover-interactive-property);
477
+ white-space:nowrap;
478
+ cursor:default;
479
+ border-radius:var(--t-border-radius);
748
480
  }
749
481
 
750
- .tds-date-picker-calendar-nav[data-hovered]{
751
- background-color:var(--t-fill-color-button-neutral-outline-hover);
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);
752
484
  }
753
485
 
754
- .tds-date-picker-calendar-nav[data-pressed]{
755
- background-color:var(--t-fill-color-button-neutral-outline-active);
486
+ .tds-combo-box-list-item[data-selected]{
487
+ background:var(--t-fill-color-button-interaction-ghost-active);
756
488
  }
757
489
 
758
- .tds-date-picker-calendar-nav[data-focus-visible]{
759
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
760
- outline-offset:var(--t-focus-ring-offset);
490
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
491
+ background:var(--t-fill-color-neutral-060);
761
492
  }
762
493
 
763
- .tds-date-picker-calendar-nav[data-disabled]{
764
- color:var(--t-text-color-disabled);
494
+ .tds-combo-box-list-item[data-disabled]{
495
+ color:var(--t-form-color-disabled);
765
496
  cursor:not-allowed;
766
497
  }
767
498
 
768
- .tds-date-picker-calendar-grid{
769
- font-feature-settings:"ss01", "ss02";
770
- border-collapse:collapse;
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);
771
510
  }
772
511
 
773
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
774
- padding:0;
775
- border:0;
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);
776
525
  }
777
526
 
778
- .tds-date-picker-calendar-header-cell{
779
- padding-block-end:var(--t-spacing-1);
780
- font-size:.875em;
781
- font-weight:var(--t-font-weight-medium);
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);
782
532
  color:var(--t-text-color-secondary);
783
- text-align:center;
784
- -webkit-user-select:none;
785
- -moz-user-select:none;
786
- user-select:none;
787
533
  }
788
534
 
789
- .tds-date-picker-calendar-cell-button{
535
+ .tds-checkbox{
536
+ --tds-checkbox-font-size:var(--t-font-size-md);
537
+ --tds-checkbox-cursor:pointer;
538
+ --tds-checkbox-line-height:1.4;
539
+ --tds-checkbox-transition-property:background-color, border-color;
540
+
541
+ --tds-checkbox-input-size:var(--t-element-size-md);
542
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
543
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
544
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
545
+
546
+ --tds-checkbox-input-icon:none;
547
+ --tds-checkbox-input-icon-visibility:hidden;
548
+ --tds-checkbox-input-icon-opacity:0;
549
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
550
+
551
+ --tds-checkbox-label-color:var(--t-form-color);
552
+
553
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
554
+ --tds-checkbox-description-line-height:1.35;
555
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
556
+ --tds-checkbox-description-invalid-icon-display:none;
557
+
790
558
  position:relative;
791
- display:flex;
792
- align-items:center;
793
- justify-content:center;
794
- inline-size:2.25em;
795
- block-size:2.25em;
796
- color:var(--t-text-color);
797
- cursor:pointer;
559
+ display:inline-grid;
560
+ grid-template-columns:auto;
561
+ grid-auto-columns:1fr;
562
+ gap:var(--t-spacing-fourth) 0;
563
+ line-height:var(--tds-checkbox-line-height);
798
564
  -webkit-user-select:none;
799
565
  -moz-user-select:none;
800
566
  user-select:none;
801
- outline:0;
802
567
  }
803
568
 
804
- .tds-date-picker-calendar-cell-button::before{
805
- position:absolute;
806
- inset:0;
807
- z-index:-1;
808
- content:"";
809
- background-color:var(--_background-color);
810
- border-radius:50%;
569
+ .tds-checkbox label{
570
+ grid-area:1 / 2;
571
+ padding-inline-start:var(--t-spacing-1);
572
+ font-size:var(--tds-checkbox-font-size);
573
+ font-weight:var(--t-font-weight-normal);
574
+ color:var(--tds-checkbox-label-color);
575
+ cursor:var(--tds-checkbox-cursor);
811
576
  }
812
577
 
813
- .tds-date-picker-calendar-cell-button[data-today]::before{
814
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
815
- }
816
-
817
- .tds-date-picker-calendar-cell-button[data-outside-month]{
818
- display:none;
578
+ .tds-checkbox tds-indeterminate{
579
+ display:flex;
819
580
  }
820
581
 
821
- .tds-date-picker-calendar-cell-button[data-hovered]{
822
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
582
+ .tds-checkbox input[type="checkbox"]{
583
+ position:relative;
584
+ width:1em;
585
+ height:1em;
586
+ margin:calc((1lh - 1em) / 2) 0 0;
587
+ font-size:var(--tds-checkbox-font-size);
588
+ line-height:inherit;
589
+ -webkit-appearance:none;
590
+ -moz-appearance:none;
591
+ appearance:none;
592
+ cursor:var(--tds-checkbox-cursor);
593
+ background-color:var(--tds-checkbox-input-background-color);
594
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
595
+ border-radius:var(--tds-checkbox-input-border-radius);
596
+ transition-timing-function:var(--t-ease-in-out);
597
+ transition-duration:var(--t-duration-200);
598
+ transition-property:var(--tds-checkbox-transition-property);
823
599
  }
824
600
 
825
- .tds-date-picker-calendar-cell-button[data-pressed]{
826
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
601
+ :is(.tds-checkbox input[type="checkbox"])::before{
602
+ position:absolute;
603
+ top:50%;
604
+ left:50%;
605
+ visibility:var(--tds-checkbox-input-icon-visibility);
606
+ width:100%;
607
+ height:100%;
608
+ content:"";
609
+ background-color:var(--tds-checkbox-input-icon-fill);
610
+ border-radius:var(--tds-checkbox-input-border-radius);
611
+ opacity:var(--tds-checkbox-input-icon-opacity);
612
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
613
+ mask-image:var(--tds-checkbox-input-icon);
614
+ -webkit-mask-repeat:no-repeat;
615
+ mask-repeat:no-repeat;
616
+ -webkit-mask-size:contain;
617
+ mask-size:contain;
618
+ transform:translate(-50%, -50%);
619
+ }
620
+
621
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
622
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
623
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
624
+ }
625
+
626
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
627
+ outline:var(--t-focus-ring-outline);
628
+ outline-offset:var(--t-focus-ring-offset);
629
+ }
630
+
631
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
632
+ pointer-events:none;
633
+ }
634
+
635
+ @media (prefers-reduced-motion: reduce){
636
+
637
+ .tds-checkbox input[type="checkbox"]{
638
+ --tds-checkbox-transition-property:none;
827
639
  }
640
+ }
828
641
 
829
- .tds-date-picker-calendar-cell-button[data-selected]{
830
- --_background-color:var(--t-fill-color-interaction);
831
- font-weight:var(--t-font-weight-semibold);
832
- color:var(--t-text-color-inverted);
833
- border-color:transparent;
642
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
643
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
644
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
645
+ --tds-checkbox-input-icon-visibility:visible;
646
+ --tds-checkbox-input-icon-opacity:1;
834
647
  }
835
648
 
836
- .tds-date-picker-calendar-cell-button[data-unavailable]{
837
- color:var(--t-text-color-disabled);
838
- text-decoration:line-through;
839
- cursor:not-allowed;
649
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
650
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
651
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
652
+ }
653
+
654
+ .tds-checkbox:has(input:checked){
655
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
840
656
  }
841
657
 
842
- .tds-date-picker-calendar-cell-button[data-disabled]{
843
- color:var(--t-text-color-disabled);
658
+ .tds-checkbox:has(input:indeterminate){
659
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
844
660
  }
845
661
 
846
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
847
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
848
- outline-offset:-2px;
662
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
663
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
664
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
665
+ --tds-checkbox-description-invalid-icon-display:inline-block;
849
666
  }
850
667
 
851
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
852
- outline-offset:var(--t-focus-ring-offset);
668
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
669
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
670
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
671
+ }
672
+
673
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
674
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
675
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
676
+ }
677
+
678
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
679
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
680
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
681
+ }
682
+
683
+ .tds-checkbox:has(input:required) label::after{
684
+ margin-left:.25ch;
685
+ color:var(--t-text-color-status-error);
686
+ content:"*";
687
+ }
688
+
689
+ .tds-checkbox:has(input:disabled){
690
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
691
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
692
+
693
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
694
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
695
+ --tds-checkbox-cursor:not-allowed;
853
696
  }
854
697
 
855
- .tds-date-picker-popover--lg{
856
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
698
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
699
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
700
+ }
701
+
702
+ .tds-checkbox-description{
703
+ display:flex;
704
+ grid-area:2 / 2;
705
+ gap:var(--t-spacing-half);
706
+ align-items:flex-start;
707
+ padding-inline-start:var(--t-spacing-1);
708
+ margin:0;
709
+ font-size:var(--tds-checkbox-description-font-size);
710
+ line-height:var(--tds-checkbox-description-line-height);
711
+ color:var(--tds-checkbox-description-color);
712
+ cursor:text;
857
713
  }
858
714
 
715
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
716
+ display:var(--tds-checkbox-description-invalid-icon-display);
717
+ flex-shrink:0;
718
+ margin-top:calc(.5lh - .5em);
719
+ line-height:var(--tds-checkbox-description-line-height);
720
+ }
721
+
722
+ .tds-checkbox--sm{
723
+ --tds-checkbox-line-height:1.35;
724
+ --tds-checkbox-input-size:var(--t-element-size-sm);
725
+ --tds-checkbox-font-size:var(--t-font-size-sm);
726
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
727
+ --tds-checkbox-description-line-height:1.3;
728
+ }
859
729
 
860
- :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{
861
- -webkit-appearance:none;
862
- appearance:none;
863
- }
864
730
 
865
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
866
- inline-size:1em;
867
- block-size:2em;
868
- }
731
+ @media (prefers-reduced-motion: no-preference){
869
732
 
870
- @supports (field-sizing: content){
871
- .tds-input--auto-width{
872
- inline-size:-moz-fit-content;
873
- inline-size:fit-content;
874
- min-inline-size:min(100%, 122px);
733
+ :root{
734
+ interpolate-size:allow-keywords;
735
+ }
875
736
  }
876
737
 
877
- .tds-input--auto-width input{
878
- field-sizing:content;
879
- inline-size:auto;
880
- }
881
- }
738
+ @layer tds-component{
739
+ tds-sidenav,
740
+ .tds-sidenav{
741
+ --tds-sidenav-indent:12px;
742
+ --tds-sidenav-item-depth:0;
882
743
 
883
- @layer t-critical{
884
- tds-page-header:not(.hydrated){
885
- display:none;
886
- }
887
- }
744
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
888
745
 
889
- @layer t-component{
890
- .tds-page-header{
891
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
892
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
893
- --tds-page-header-color:var(--t-text-color);
894
- --tds-page-header-bottom-border-color:transparent;
895
- --tds-page-header-headline-color:var(--t-text-color-headline);
896
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
897
- --tds-page-header-padding-x:var(--t-spacing-2);
898
- --tds-page-header-padding-y:var(--t-spacing-2);
899
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
900
- --tds-page-header-nav-gap:var(--t-spacing-1);
901
- --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%);
902
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
903
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
904
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
905
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
906
- --tds-page-header-nav-item-border-width:1px;
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);
907
752
 
908
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
909
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
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);
910
757
 
911
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
912
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
913
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
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;
914
761
 
915
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
916
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
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);
917
765
 
918
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
919
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
920
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
766
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
767
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
768
+ }
921
769
 
922
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
923
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
924
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
925
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
926
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
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;
927
777
  }
778
+ }
928
779
 
929
- .tds-page-header--profile{
930
- --tds-page-header-padding-y:20px;
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);
931
786
  }
787
+ }
932
788
 
933
- @supports (color: light-dark(#fff, #000)){
934
- .tds-page-header{
935
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
936
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
937
- }
789
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
790
+ display:flex;
938
791
  }
939
792
 
940
- @media (min-width: 600px){
941
- .tds-page-header{
942
- --tds-page-header-background-color:var(--t-surface-color-canvas);
943
- --tds-page-header-color:var(--t-text-color-secondary);
944
- --tds-page-header-bottom-border-color:var(--t-border-color);
945
- --tds-page-header-padding-x:var(--t-spacing-3);
946
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
947
- --tds-page-header-nav-gap:var(--t-spacing-half);
948
- --tds-page-header-nav-background:transparent;
949
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
950
- --tds-page-header-nav-item-border-width:1px;
951
- --tds-page-header-nav-item-color:var(--t-text-color);
952
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
953
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
954
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
955
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
956
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
957
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
958
- }
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%;
959
797
  }
798
+
799
+ .tds-sidenav-section-list{
800
+ width:100%;
801
+ padding:0;
802
+ margin:0;
803
+ list-style:none;
960
804
  }
961
805
 
962
- .tds-page-header{
806
+ .tds-sidenav-section-header{
963
807
  display:flex;
964
- flex-direction:column;
965
- padding-top:var(--tds-page-header-padding-y);
966
- color:var(--tds-page-header-color);
967
- background:var(--tds-page-header-background-color);
968
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
808
+ align-items:baseline;
809
+ justify-content:space-between;
810
+ padding-top:var(--t-spacing-2);
969
811
  }
970
812
 
971
- .tds-page-header:not(.has-nav){
972
- padding-bottom:var(--tds-page-header-padding-y);
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;
973
820
  }
974
821
 
975
- .tds-page-header.inactive{
976
- background:var(--tds-page-header-background-color-inactive);
822
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
823
+ padding-top:0;
977
824
  }
978
825
 
979
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
980
- width:100%;
826
+ .tds-sidenav-section-header [slot="label-actions"]{
827
+ display:flex;
828
+ gap:var(--t-spacing-half);
829
+ align-items:center;
981
830
  }
982
831
 
983
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
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%;
843
+ padding:0;
844
+ margin:0;
845
+ }
846
+
847
+ .tds-sidenav-item :is(a,button){
848
+ position:relative;
984
849
  display:flex;
985
- flex-flow:row wrap;
986
- gap:var(--t-spacing-half) var(--t-spacing-1);
987
- align-items:flex-start;
988
- justify-content:flex-start;
989
- min-width:0;
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);
990
868
  }
991
869
 
992
- :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{
993
- display:flex;
994
- gap:var(--tds-page-header-nav-gap);
995
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
996
- margin:0 0 -1px;
997
- overflow:auto;
998
- list-style:none;
999
- background:var(--tds-page-header-nav-background);
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;
1000
902
  }
1001
903
 
1002
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1003
- position:relative;
1004
- display:inline-flex;
1005
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1006
- font-size:var(--t-font-size-sm);
1007
- line-height:22px;
1008
- color:var(--tds-page-header-nav-item-color);
1009
- white-space:nowrap;
1010
- text-decoration:none;
1011
- -webkit-appearance:none;
1012
- -moz-appearance:none;
1013
- appearance:none;
1014
- cursor:pointer;
1015
- outline-offset:-2px;
1016
- background-color:var(--tds-page-header-nav-item-background-color);
1017
- background-clip:padding-box;
1018
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1019
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1020
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
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;
1021
908
  }
1022
909
 
1023
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1024
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1025
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1026
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1027
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1028
- }
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);
1029
913
 
1030
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1031
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1032
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1033
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1034
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
1035
- }
914
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
915
+ font-weight:var(--t-font-weight-semibold);
916
+ }
1036
917
 
1037
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1038
- background-color:var(--tds-page-header-nav-item-background-color-active);
1039
- border-color:var(--tds-page-header-nav-item-border-color-active);
1040
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
1041
- }
918
+ .tds-sidenav-item:has(.tds-sidenav-section){
919
+ display:flex;
920
+ flex-direction:column;
921
+ gap:var(--t-spacing-half);
922
+ }
1042
923
 
1043
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1044
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
1045
- color:var(--tds-page-header-nav-item-color-disabled);
1046
- cursor:not-allowed;
1047
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1048
- opacity:1;
1049
- }
924
+ .tds-sidenav-item .tds-sidenav-section-list{
925
+ --tds-sidenav-item-depth:1;
926
+ gap:0;
927
+ }
1050
928
 
1051
- @media (min-width: 600px){
1052
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
1053
- position:absolute;
1054
- inset:auto -1px -1px;
1055
- height:1px;
1056
- pointer-events:none;
1057
- content:"";
1058
- background-color:var(--tds-page-header-bottom-border-color);
1059
- }
1060
- }
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
+ }
1061
936
 
1062
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1063
- position:relative;
937
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
938
+ --tds-sidenav-item-depth:2;
1064
939
  }
1065
940
 
1066
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1067
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1068
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1069
- }
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;
947
+ }
1070
948
 
1071
- :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{
949
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1072
950
  position:absolute;
1073
- top:-5px;
1074
- right:-2px;
1075
- width:10px;
1076
- height:10px;
951
+ top:0;
952
+ bottom:0;
953
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
954
+ width:2px;
1077
955
  content:"";
1078
- background:var(--tds-page-header-nav-item-indicator-color);
1079
- border-radius:50%;
956
+ background-color:var(--tds-sidenav-item-nested-border-color);
957
+ transition:var(--tds-sidenav-item-transition);
1080
958
  }
1081
959
 
1082
- @media (prefers-reduced-motion: no-preference){
1083
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1084
- animation:indicator-pulse 1.25s ease infinite;
1085
- }
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);
1086
969
  }
1087
970
 
1088
- .tds-page-header__title-bar{
1089
- display:flex;
1090
- flex-direction:column;
1091
- gap:var(--t-spacing-2) var(--t-spacing-1);
1092
- align-items:flex-start;
1093
- justify-content:space-between;
1094
- padding:0 var(--tds-page-header-padding-x);
1095
- }
1096
-
1097
- .tds-page-header--profile > .tds-page-header__title-bar{
1098
- align-items:center;
1099
- }
1100
-
1101
- .tds-page-header__primary{
1102
- width:100%;
1103
- }
1104
-
1105
- .tds-page-header__primary h1{
1106
- margin:0;
1107
- font-size:var(--tds-page-header-headline-font-size);
1108
- font-weight:var(--t-font-weight-normal);
1109
- line-height:32px;
1110
- color:var(--tds-page-header-headline-color);
1111
- overflow-wrap:break-word;
1112
- }
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
+ }
1113
976
 
1114
- @media (min-width: 960px){
1115
- .tds-page-header__primary{
1116
- flex:1 1 max-content;
1117
- width:auto;
1118
- min-width:0;
1119
- max-width:100%;
1120
- }
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
+ }
1121
981
 
1122
- .tds-page-header__title-bar,
1123
- .tds-page-header--profile .tds-page-header__title-bar{
1124
- flex-flow:row nowrap;
1125
- row-gap:12px;
1126
- align-items:flex-start;
1127
- }
1128
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1129
- width:auto;
1130
- }
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
+ }
1131
985
 
1132
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1133
- justify-content:flex-end;
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);
1134
989
  }
1135
- }
1136
-
1137
- .tds-page-header-phone,
1138
- .tds-page-header-email{
1139
- color:var(--tds-page-header-color);
1140
- white-space:nowrap;
1141
- }
1142
990
 
1143
- .tds-page-header-email{
1144
- max-width:100%;
1145
- overflow:hidden;
1146
- text-overflow:ellipsis;
991
+ .tds-sidenav-responsive-header{
992
+ display:flex;
993
+ gap:var(--t-spacing-2);
994
+ align-items:center;
995
+ width:100%;
1147
996
  }
1148
997
 
1149
- @keyframes indicator-pulse{
1150
- 0%{
1151
- opacity:.3;
1152
- transform:scale(.9);
998
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
999
+ order:0;
1153
1000
  }
1154
1001
 
1155
- 100%{
1156
- opacity:0;
1157
- transform:scale(1.75);
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);
1158
1009
  }
1159
- }
1160
-
1161
- .tds-input:has(textarea){
1162
- --tds-input-padding-block:6px;
1163
- --tds-input-resizer-size:var(--t-element-size-sm);
1164
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1165
- }
1166
-
1167
- @supports (x: attr(x type(*))){
1168
1010
 
1169
- .tds-input textarea{
1170
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1171
- }
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;
1172
1029
  }
1173
1030
 
1174
- .tds-input.tds-textarea--resize-vertical textarea{
1175
- resize:vertical;
1176
- }
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;
1039
+ }
1177
1040
 
1178
- .tds-input.tds-textarea--resize-none textarea{
1179
- resize:none;
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;
1180
1047
  }
1181
1048
 
1182
- .tds-input.tds-textarea--resize-auto textarea{
1183
- resize:vertical;
1049
+ .tds-sidenav-collapse:not(:popover-open){
1050
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1051
+ transition:var(--tds-sidenav-collapse-transition-exit);
1184
1052
  }
1185
1053
 
1186
- @supports (field-sizing: content){
1187
- .tds-input.tds-textarea--resize-auto textarea{
1188
- field-sizing:content;
1189
- resize:none;
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);
1190
1058
  }
1191
1059
  }
1192
-
1193
- .tds-input textarea{
1194
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1195
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1196
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1197
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1198
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1199
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1200
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1201
- --tds-input-scrollbar-thumb-border-radius:999px;
1202
- --tds-input-scrollbar-thumb-border-width:3px;
1203
- --tds-input-scrollbar-track-margin-block:.125rem;
1204
- scrollbar-color:initial;
1205
- transition-timing-function:var(--t-ease-in-out);
1206
- transition-duration:var(--t-duration-200);
1207
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1208
- }
1209
-
1210
- @media (pointer: fine){
1211
- :is(.tds-input textarea)::-webkit-scrollbar{
1212
- width:12px;
1213
- height:12px;
1214
- cursor:default;
1060
+ }
1061
+ @supports not selector(:popover-open){
1062
+ .tds-sidenav-collapse.\:popover-open{
1063
+ display:flex;
1215
1064
  }
1216
1065
 
1217
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1218
- cursor:default;
1219
- background:var(--tds-input-scrollbar-thumb-color);
1220
- background-clip:content-box;
1221
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1222
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1066
+ .tds-sidenav-collapse:not(.\:popover-open){
1067
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1068
+ transition:var(--tds-sidenav-collapse-transition-exit);
1223
1069
  }
1070
+ }
1071
+ }
1224
1072
 
1225
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1226
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1227
- }
1073
+ @media (min-width: 720px){
1074
+ .tds-sidenav-responsive-header{
1075
+ display:none;
1076
+ }
1077
+ }
1228
1078
 
1229
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1230
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1079
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1080
+ display:none;
1231
1081
  }
1232
1082
 
1233
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1234
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1083
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1084
+ display:block;
1235
1085
  }
1236
1086
 
1237
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1238
- background:var(--tds-input-scrollbar-surface-color);
1087
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1088
+ display:flex;
1089
+ flex-direction:column;
1239
1090
  }
1240
1091
 
1241
- :is(.tds-input textarea)::-webkit-resizer{
1242
- background:var(--tds-input-resizer-icon) no-repeat;
1243
- background-position:right bottom;
1244
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1245
- }
1092
+ .tds-date-picker{
1093
+ --tds-date-picker-button-offset:4px;
1094
+ }
1246
1095
 
1247
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1248
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1249
- cursor:default;
1250
- }
1096
+ .tds-date-picker--lg{
1097
+ --tds-date-picker-button-offset:5px;
1098
+ }
1251
1099
 
1252
- @supports (-moz-appearance: none){
1253
- :is(.tds-input textarea){
1254
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1255
- scrollbar-width:thin;
1256
- }
1100
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1101
+ outline-color:transparent;
1102
+ outline-offset:0;
1103
+ border-color:var(--tds-field-border-color);
1104
+ }
1257
1105
 
1258
- @media (hover){
1259
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1260
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1261
- }
1262
- }
1263
- }
1264
- }
1106
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1107
+ display:none;
1108
+ }
1265
1109
 
1266
- .tds-radio{
1267
- --tds-radio-font-size:var(--t-font-size-md);
1268
- --tds-radio-cursor:pointer;
1269
- --tds-radio-line-height:1.4;
1270
- --tds-radio-transition-property:border-width;
1110
+ .tds-date-picker-input{
1111
+ flex:1;
1112
+ padding-block:var(--tds-field-padding-block);
1113
+ padding-inline:var(--tds-field-padding-inline);
1114
+ overflow:auto clip;
1115
+ font-variant-numeric:tabular-nums;
1116
+ text-wrap:nowrap;
1117
+ scrollbar-width:none;
1118
+ }
1271
1119
 
1272
- --tds-radio-input-size:var(--t-element-size-md);
1273
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1274
- --tds-radio-input-border-color:var(--t-form-border-color);
1275
- --tds-radio-input-border-width:var(--t-form-border-width);
1276
- --tds-radio-input-background-color:var(--t-form-background-color);
1120
+ .tds-date-picker-input:has( + .tds-date-picker-button){
1121
+ padding-inline-end:0;
1122
+ }
1277
1123
 
1278
- --tds-radio-label-color:var(--t-form-color);
1124
+ .tds-date-picker-button{
1125
+ flex-shrink:0;
1126
+ align-self:center;
1127
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1128
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1129
+ padding:0;
1130
+ margin-inline-end:var(--tds-date-picker-button-offset);
1131
+ }
1279
1132
 
1280
- --tds-radio-description-font-size:var(--t-font-size-sm);
1281
- --tds-radio-description-line-height:1.35;
1282
- --tds-radio-description-color:var(--t-text-color-secondary);
1133
+ .tds-date-picker-popover{
1134
+ --tds-date-picker-popover-font-size:var(--t-font-size-md);
1135
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
1136
+ --tds-date-picker-popover-background-color:var(--t-surface-color-card);
1137
+ --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1138
+ --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
1139
+ --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
1140
+ --tds-date-picker-popover-interactive-property:color, background-color, border-color;
1283
1141
 
1284
1142
  position:relative;
1285
- display:inline-grid;
1286
- grid-template-columns:auto;
1287
- grid-auto-columns:1fr;
1288
- gap:var(--t-spacing-fourth) 0;
1289
- line-height:var(--tds-radio-line-height);
1290
- -webkit-user-select:none;
1291
- -moz-user-select:none;
1292
- user-select:none;
1143
+ overflow:hidden;
1144
+ background-color:var(--tds-date-picker-popover-background-color);
1145
+ border:var(--t-border-width) solid var(--t-border-color);
1146
+ border-radius:var(--t-border-radius);
1147
+ box-shadow:var(--tds-date-picker-popover-shadow);
1293
1148
  }
1294
1149
 
1295
- .tds-radio label{
1296
- grid-area:1 / 2;
1297
- padding-inline-start:var(--t-spacing-1);
1298
- font-size:var(--tds-radio-font-size);
1299
- font-weight:var(--t-font-weight-normal);
1300
- color:var(--tds-radio-label-color);
1301
- cursor:var(--tds-radio-cursor);
1150
+ .tds-date-picker-popover[data-entering]{
1151
+ animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
1302
1152
  }
1303
1153
 
1304
- .tds-radio input[type="radio"]{
1305
- position:relative;
1306
- width:1em;
1307
- height:1em;
1308
- margin:calc((1lh - 1em) / 2) 0 0;
1309
- font-size:var(--tds-radio-font-size);
1310
- line-height:inherit;
1311
- -webkit-appearance:none;
1312
- -moz-appearance:none;
1313
- appearance:none;
1314
- cursor:var(--tds-radio-cursor);
1315
- background-color:var(--tds-radio-input-background-color);
1316
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1317
- border-radius:var(--tds-radio-input-border-radius);
1318
- transition-timing-function:var(--t-ease-in-out);
1319
- transition-duration:var(--t-duration-200);
1320
- transition-property:var(--tds-radio-transition-property);
1154
+ .tds-date-picker-popover[data-exiting]{
1155
+ animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
1321
1156
  }
1322
1157
 
1323
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1324
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1325
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1158
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1159
+ will-change:opacity, transform;
1160
+ }
1161
+
1162
+ @keyframes tds-date-picker-popover{
1163
+ from{
1164
+ opacity:0;
1165
+ transform:translateY(-8px);
1166
+ }
1167
+ }
1168
+
1169
+ @media (prefers-reduced-motion: reduce){
1170
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1171
+ animation:none;
1326
1172
  }
1173
+ }
1174
+
1175
+ .tds-date-picker-overlay{
1176
+ position:absolute;
1177
+ inset:0;
1178
+ z-index:1;
1179
+ display:flex;
1180
+ background-color:var(--tds-date-picker-popover-background-color);
1181
+ }
1182
+
1183
+ .tds-date-picker-overlay-list{
1184
+ display:grid;
1185
+ flex:1;
1186
+ grid-template-columns:repeat(3, 1fr);
1187
+ gap:var(--t-spacing-half);
1188
+ padding-inline:var(--tds-date-picker-popover-padding);
1189
+ outline:0;
1190
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
1191
+ scrollbar-width:thin;
1192
+ }
1193
+
1194
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
1195
+ grid-template-rows:repeat(4, 1fr);
1196
+ padding-bottom:var(--tds-date-picker-popover-padding);
1197
+ }
1198
+
1199
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
1200
+ grid-auto-rows:var(--t-container-size-xl);
1201
+ padding-right:var(--t-spacing-1);
1202
+ overflow-y:auto;
1203
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
1204
+ }
1205
+
1206
+ .tds-date-picker-overlay-cell{
1207
+ display:flex;
1208
+ align-items:center;
1209
+ justify-content:center;
1210
+ font-family:inherit;
1211
+ font-size:var(--tds-date-picker-popover-font-size);
1212
+ color:var(--t-text-color);
1213
+ cursor:pointer;
1214
+ outline:0;
1215
+ background-color:transparent;
1216
+ border:0;
1217
+ border-radius:var(--t-border-radius-md);
1218
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1219
+ transition-duration:var(--t-duration-100);
1220
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1221
+ }
1327
1222
 
1328
- :is(.tds-radio input[type="radio"]):focus-visible{
1329
- outline:var(--t-focus-ring-outline);
1330
- outline-offset:var(--t-focus-ring-offset);
1331
- }
1223
+ .tds-date-picker-overlay-cell[data-hovered]{
1224
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1225
+ }
1332
1226
 
1333
- :is(.tds-radio input[type="radio"]):disabled{
1334
- pointer-events:none;
1335
- }
1227
+ .tds-date-picker-overlay-cell[data-pressed]{
1228
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1229
+ }
1336
1230
 
1337
- @media (prefers-reduced-motion: reduce){
1231
+ .tds-date-picker-overlay-cell[data-selected]{
1232
+ font-weight:var(--t-font-weight-semibold);
1233
+ color:var(--t-text-color-inverted);
1234
+ background-color:var(--t-fill-color-interaction);
1235
+ }
1338
1236
 
1339
- .tds-radio input[type="radio"]{
1340
- --tds-radio-transition-property:none;
1237
+ .tds-date-picker-overlay-cell[data-focus-visible]{
1238
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1341
1239
  }
1342
- }
1343
1240
 
1344
- .tds-radio:has(input:checked){
1345
- --tds-radio-input-background-color:var(--t-form-background-color);
1346
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1347
- --tds-radio-input-border-width:4px;
1241
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
1242
+ outline-offset:var(--t-focus-ring-offset);
1348
1243
  }
1349
1244
 
1350
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1351
- --tds-radio-input-background-color:var(--t-form-background-color);
1352
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1353
- }
1245
+ .tds-date-picker-calendar-heading{
1246
+ display:flex;
1247
+ flex:1;
1248
+ gap:var(--t-spacing-1);
1249
+ align-items:center;
1250
+ justify-content:flex-start;
1251
+ padding-inline-start:4px;
1252
+ }
1354
1253
 
1355
- .tds-radio:has(input:user-invalid){
1356
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1254
+ .tds-date-picker-calendar-overlay-trigger{
1255
+ --_background-color:transparent;
1256
+ position:relative;
1257
+ padding:0;
1258
+ font-family:inherit;
1259
+ font-size:var(--tds-date-picker-popover-font-size);
1260
+ font-weight:var(--t-font-weight-semibold);
1261
+ font-feature-settings:"ss01", "ss02";
1262
+ color:var(--t-text-color);
1263
+ cursor:pointer;
1264
+ outline:0;
1265
+ background-color:transparent;
1266
+ border:0;
1267
+ border-radius:var(--t-border-radius-md);
1268
+ isolation:isolate;
1269
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1270
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1271
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1272
+ }
1273
+
1274
+ .tds-date-picker-calendar-overlay-trigger::before{
1275
+ position:absolute;
1276
+ inset:calc(var(--t-spacing-half) * -1);
1277
+ z-index:-1;
1278
+ pointer-events:inherit;
1279
+ content:"";
1280
+ background-color:var(--_background-color);
1281
+ border-radius:inherit;
1357
1282
  }
1358
1283
 
1359
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1360
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1361
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1362
- }
1284
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1285
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1286
+ }
1363
1287
 
1364
- .tds-radio:has(input:disabled){
1365
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1366
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1288
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1289
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1290
+ }
1367
1291
 
1368
- --tds-radio-label-color:var(--t-form-color-disabled);
1369
- --tds-radio-description-color:var(--t-form-color-disabled);
1370
- --tds-radio-cursor:not-allowed;
1292
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1293
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1294
+ outline-offset:var(--t-focus-ring-offset);
1371
1295
  }
1372
1296
 
1373
- .tds-radio:has(input:disabled) input:checked{
1374
- --tds-radio-input-background-color:var(--t-form-background-color);
1375
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1376
- }
1297
+ .tds-date-picker-calendar{
1298
+ inline-size:-moz-fit-content;
1299
+ inline-size:fit-content;
1300
+ font-size:var(--tds-date-picker-popover-font-size);
1301
+ }
1377
1302
 
1378
- .tds-radio-description{
1303
+ .tds-date-picker-calendar-body{
1304
+ position:relative;
1305
+ padding:var(--tds-date-picker-popover-padding);
1306
+ padding-block-start:0;
1307
+ }
1308
+
1309
+ .tds-date-picker-calendar-header{
1379
1310
  display:flex;
1380
- grid-area:2 / 2;
1381
- gap:var(--t-spacing-half);
1382
- align-items:flex-start;
1383
- padding-inline-start:var(--t-spacing-1);
1384
- margin:0;
1385
- font-size:var(--tds-radio-description-font-size);
1386
- line-height:var(--tds-radio-description-line-height);
1387
- color:var(--tds-radio-description-color);
1388
- cursor:text;
1311
+ align-items:center;
1312
+ justify-content:space-between;
1313
+ padding:var(--tds-date-picker-popover-padding);
1389
1314
  }
1390
1315
 
1391
- .tds-radio--sm{
1392
- --tds-radio-line-height:1.35;
1393
- --tds-radio-input-size:var(--t-element-size-sm);
1394
- --tds-radio-font-size:var(--t-font-size-sm);
1395
- --tds-radio-description-font-size:var(--t-font-size-xs);
1396
- --tds-radio-description-line-height:1.3;
1316
+ .tds-date-picker-calendar-title{
1317
+ padding:var(--t-spacing-half) var(--t-spacing-1);
1318
+ font-size:var(--tds-date-picker-popover-font-size);
1319
+ font-weight:var(--t-font-weight-semibold);
1397
1320
  }
1398
1321
 
1399
- .tds-toggle-switch{
1400
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1401
- --tds-toggle-switch-cursor:pointer;
1402
- --tds-toggle-switch-display:inline-grid;
1403
- --tds-toggle-switch-line-height:1.4;
1322
+ .tds-date-picker-calendar-nav{
1323
+ display:flex;
1324
+ align-items:center;
1325
+ justify-content:center;
1326
+ padding:var(--t-spacing-half);
1327
+ font-size:.875em;
1328
+ color:var(--t-text-color);
1329
+ cursor:pointer;
1330
+ outline:0;
1331
+ background-color:transparent;
1332
+ border:0;
1333
+ border-radius:var(--t-border-radius-md);
1334
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1335
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1336
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1337
+ }
1404
1338
 
1405
- --tds-toggle-switch-label-color:var(--t-form-color);
1339
+ .tds-date-picker-calendar-nav[data-hovered]{
1340
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1341
+ }
1406
1342
 
1407
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1408
- --tds-toggle-switch-track-outline:none;
1409
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1410
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1411
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1343
+ .tds-date-picker-calendar-nav[data-pressed]{
1344
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1345
+ }
1412
1346
 
1413
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1414
- --tds-toggle-switch-thumb-transform:translateX(0);
1415
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1347
+ .tds-date-picker-calendar-nav[data-focus-visible]{
1348
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1349
+ outline-offset:var(--t-focus-ring-offset);
1350
+ }
1416
1351
 
1417
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1418
- --tds-toggle-switch-description-line-height:1.35;
1419
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1420
- position:relative;
1352
+ .tds-date-picker-calendar-nav[data-disabled]{
1353
+ color:var(--t-text-color-disabled);
1354
+ cursor:not-allowed;
1355
+ }
1421
1356
 
1422
- display:var(--tds-toggle-switch-display);
1423
- grid-template-columns:auto;
1424
- grid-auto-columns:1fr;
1425
- gap:var(--t-spacing-fourth) 0;
1357
+ .tds-date-picker-calendar-grid{
1358
+ font-feature-settings:"ss01", "ss02";
1359
+ border-collapse:collapse;
1360
+ }
1361
+
1362
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1363
+ padding:0;
1364
+ border:0;
1365
+ }
1366
+
1367
+ .tds-date-picker-calendar-header-cell{
1368
+ padding-block-end:var(--t-spacing-1);
1369
+ font-size:.875em;
1370
+ font-weight:var(--t-font-weight-medium);
1371
+ color:var(--t-text-color-secondary);
1372
+ text-align:center;
1426
1373
  -webkit-user-select:none;
1427
1374
  -moz-user-select:none;
1428
1375
  user-select:none;
1429
1376
  }
1430
1377
 
1431
- .tds-toggle-switch input[type="checkbox"]{
1378
+ .tds-date-picker-calendar-cell-button{
1379
+ position:relative;
1380
+ display:flex;
1381
+ align-items:center;
1382
+ justify-content:center;
1383
+ inline-size:2.25em;
1384
+ block-size:2.25em;
1385
+ color:var(--t-text-color);
1386
+ cursor:pointer;
1387
+ -webkit-user-select:none;
1388
+ -moz-user-select:none;
1389
+ user-select:none;
1390
+ outline:0;
1391
+ }
1392
+
1393
+ .tds-date-picker-calendar-cell-button::before{
1432
1394
  position:absolute;
1433
- width:var(--tds-toggle-switch-track-width);
1434
- height:var(--tds-toggle-switch-track-height);
1435
- margin:0;
1436
- -webkit-appearance:none;
1437
- -moz-appearance:none;
1438
- appearance:none;
1439
- cursor:var(--tds-toggle-switch-cursor);
1440
- outline:var(--tds-toggle-switch-track-outline);
1441
- outline-offset:var(--t-focus-ring-offset);
1442
- background-color:transparent;
1443
- border:0;
1444
- border-radius:var(--t-border-radius-round);
1395
+ inset:0;
1396
+ z-index:-1;
1397
+ content:"";
1398
+ background-color:var(--_background-color);
1399
+ border-radius:50%;
1445
1400
  }
1446
1401
 
1447
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1448
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1402
+ .tds-date-picker-calendar-cell-button[data-today]::before{
1403
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1449
1404
  }
1450
1405
 
1451
- .tds-toggle-switch label{
1452
- display:inline-flex;
1453
- grid-area:1 / 2;
1454
- padding-inline-start:var(--t-spacing-1);
1455
- margin-top:-.09375em;
1456
- font-size:var(--tds-toggle-switch-font-size);
1457
- font-weight:var(--t-font-weight-normal);
1458
- line-height:var(--tds-toggle-switch-line-height);
1459
- color:var(--tds-toggle-switch-label-color);
1460
- cursor:var(--tds-toggle-switch-cursor);
1406
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
1407
+ display:none;
1408
+ }
1409
+
1410
+ .tds-date-picker-calendar-cell-button[data-hovered]{
1411
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1461
1412
  }
1462
1413
 
1463
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1464
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1414
+ .tds-date-picker-calendar-cell-button[data-pressed]{
1415
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1465
1416
  }
1466
1417
 
1467
- .tds-toggle-switch:has(input:checked){
1468
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1469
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1418
+ .tds-date-picker-calendar-cell-button[data-selected]{
1419
+ --_background-color:var(--t-fill-color-interaction);
1420
+ font-weight:var(--t-font-weight-semibold);
1421
+ color:var(--t-text-color-inverted);
1422
+ border-color:transparent;
1470
1423
  }
1471
1424
 
1472
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1473
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1474
- }
1425
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
1426
+ color:var(--t-text-color-disabled);
1427
+ text-decoration:line-through;
1428
+ cursor:not-allowed;
1429
+ }
1475
1430
 
1476
- .tds-toggle-switch:has(input:disabled){
1477
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1478
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1479
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1480
- --tds-toggle-switch-cursor:not-allowed;
1431
+ .tds-date-picker-calendar-cell-button[data-disabled]{
1432
+ color:var(--t-text-color-disabled);
1481
1433
  }
1482
1434
 
1483
- .tds-toggle-switch-track{
1484
- position:relative;
1485
- flex-shrink:0;
1486
- width:var(--tds-toggle-switch-track-width);
1487
- height:var(--tds-toggle-switch-track-height);
1488
- background-color:var(--tds-toggle-switch-track-background-color);
1489
- border-radius:var(--t-border-radius-round);
1490
- transition:var(--tds-toggle-switch-track-transition);
1491
- }
1435
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
1436
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1437
+ outline-offset:-2px;
1438
+ }
1492
1439
 
1493
- .tds-toggle-switch-track::before{
1494
- position:absolute;
1495
- top:var(--t-spacing-fourth);
1496
- left:var(--t-spacing-fourth);
1497
- width:var(--tds-toggle-switch-thumb-size);
1498
- height:var(--tds-toggle-switch-thumb-size);
1499
- content:"";
1500
- background-color:#fff;
1501
- border-radius:var(--t-border-radius-round);
1502
- transform:var(--tds-toggle-switch-thumb-transform);
1503
- transition:var(--tds-toggle-switch-thumb-transition);
1440
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1441
+ outline-offset:var(--t-focus-ring-offset);
1504
1442
  }
1505
1443
 
1506
- @media (prefers-reduced-motion: reduce){
1444
+ .tds-date-picker-popover--lg{
1445
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1446
+ }
1507
1447
 
1508
- .tds-toggle-switch-track{
1509
- --tds-toggle-switch-track-transition:none;
1510
- --tds-toggle-switch-thumb-transition:none;
1448
+ .tds-number-stepper{
1449
+ --tds-number-stepper-button-offset:4px;
1450
+ --tds-number-stepper-button-gap:2px;
1511
1451
  }
1512
- }
1513
1452
 
1514
- .tds-toggle-switch-description{
1515
- display:flex;
1516
- grid-area:2 / 2;
1517
- align-items:flex-start;
1518
- padding-inline-start:var(--t-spacing-1);
1519
- margin:0;
1520
- font-size:var(--tds-toggle-switch-description-font-size);
1521
- line-height:var(--tds-toggle-switch-description-line-height);
1522
- color:var(--tds-toggle-switch-description-color);
1523
- cursor:text;
1453
+ .tds-number-stepper--lg{
1454
+ --tds-number-stepper-button-offset:5px;
1455
+ --tds-number-stepper-button-gap:4px;
1524
1456
  }
1525
1457
 
1526
- .tds-toggle-switch--sm{
1527
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1528
- --tds-toggle-switch-line-height:1.35;
1529
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1530
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1531
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1532
- --tds-toggle-switch-description-line-height:1.3;
1458
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1459
+ display:none;
1533
1460
  }
1534
1461
 
1535
- .tds-toggle-switch--hide-label{
1536
- --tds-toggle-switch-display:inline-flex;
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;
1537
1489
  }
1538
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
+
1539
1499
  .tds-radio-group{
1540
1500
  --tds-radio-group-font-size:var(--t-font-size-md);
1541
1501
  --tds-radio-group-line-height:1.4;
@@ -1558,512 +1518,334 @@
1558
1518
 
1559
1519
  .tds-radio-group legend{
1560
1520
  float:left;
1561
- padding:0;
1562
- margin:0;
1563
- }
1564
-
1565
- .tds-radio-group[aria-invalid="true"]{
1566
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1567
- --tds-radio-group-description-invalid-icon-display:inline-block;
1568
- }
1569
-
1570
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1571
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1572
- }
1573
-
1574
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1575
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1576
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1577
- }
1578
-
1579
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1580
- --tds-radio-input-background-color:var(--t-form-background-color);
1581
- }
1582
-
1583
- .tds-radio-group:has(input:required) legend::after{
1584
- margin-left:.25ch;
1585
- color:var(--t-text-color-status-error);
1586
- content:"*";
1587
- }
1588
-
1589
- .tds-radio-group-fields{
1590
- display:flex;
1591
- flex-direction:column;
1592
- gap:var(--tds-radio-group-gap);
1593
- align-items:flex-start;
1594
- margin-top:var(--t-spacing-1);
1595
- }
1596
-
1597
- .tds-radio-group-description{
1598
- display:flex;
1599
- gap:var(--t-spacing-half);
1600
- align-items:flex-start;
1601
- margin:var(--t-spacing-fourth) 0 0;
1602
- font-size:var(--tds-radio-group-description-font-size);
1603
- line-height:var(--tds-radio-group-description-line-height);
1604
- color:var(--tds-radio-group-description-color);
1605
- cursor:text;
1606
- }
1607
-
1608
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1609
- display:var(--tds-radio-group-description-invalid-icon-display);
1610
- flex-shrink:0;
1611
- margin-top:calc(.5lh - .5em);
1612
- line-height:var(--tds-radio-group-description-line-height);
1613
- }
1614
-
1615
- .tds-radio-group--sm{
1616
- --tds-radio-group-line-height:1.35;
1617
- --tds-radio-group-font-size:var(--t-font-size-sm);
1618
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1619
- --tds-radio-group-description-line-height:1.3;
1620
- }
1621
-
1622
- .tds-time-field-input{
1623
- --tds-field-date-segment-padding-inline:1px;
1624
- padding-block:var(--tds-field-padding-block);
1625
- padding-inline:var(--tds-field-padding-inline);
1626
- font-variant-numeric:tabular-nums;
1627
- }
1628
-
1629
- .tds-select{
1630
- --tds-select-border-color:var(--t-form-border-color);
1631
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1632
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1633
- --tds-select-background-color:var(--t-form-background-color);
1634
- --tds-select-color:var(--t-form-color);
1635
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1636
- --tds-select-font-size:var(--t-font-size-md);
1637
- --tds-select-min-height:var(--t-container-size-md);
1638
- --tds-select-padding-block:0;
1639
- --tds-select-description-color:var(--t-text-color-secondary);
1640
- --tds-select-description-invalid-icon-display:none;
1641
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1642
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1643
- --tds-select-caret-size:1em;
1644
- --tds-select-caret-inline-offset:.75em;
1645
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1646
-
1647
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
1648
- --tds-select-dropdown-border:1px solid var(--t-border-color);
1649
- --tds-select-dropdown-padding:var(--t-spacing-1);
1650
- --tds-select-dropdown-margin-block:5px;
1651
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
1652
- --tds-select-dropdown-scrollbar-width:thin;
1653
- --tds-select-dropdown-border-radius:var(--t-border-radius);
1654
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1655
- --tds-select-dropdown-scroll-behavior:smooth;
1656
- --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1657
- --tds-select-dropdown-closed-opacity:0;
1658
- --tds-select-dropdown-open-opacity:1;
1659
- --tds-select-dropdown-closed-translate:0 -8px;
1660
- --tds-select-dropdown-open-translate:0 0;
1661
-
1662
- --tds-select-option-gap:var(--t-spacing-1);
1663
- --tds-select-option-padding-block:var(--t-spacing-1);
1664
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1665
- --tds-select-option-font-size:1rem;
1666
- --tds-select-option-color:var(--t-text-color);
1667
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1668
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1669
- --tds-select-option-border-radius:var(--t-border-radius);
1670
-
1671
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1672
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1673
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
1674
- --tds-select-group-label-font-size:var(--t-font-size-sm);
1675
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1676
- --tds-select-group-label-letter-spacing:0;
1677
- --tds-select-group-label-color:var(--t-text-color-secondary);
1678
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1679
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1680
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1681
-
1682
- position:relative;
1683
- display:flex;
1684
- flex-direction:column;
1685
- gap:var(--t-spacing-half);
1686
- }
1687
-
1688
- .tds-select :is(label,.tds-select-label){
1689
- font-size:var(--t-font-size-md);
1690
- font-weight:var(--t-font-weight-normal);
1691
- color:var(--t-text-color);
1692
- cursor:default;
1521
+ padding:0;
1522
+ margin:0;
1693
1523
  }
1694
1524
 
1695
- .tds-select :is(select,button){
1696
- position:relative;
1697
- place-items:center;
1698
- inline-size:100%;
1699
- min-block-size:var(--tds-select-min-height);
1700
- padding-block:var(--tds-select-padding-block);
1701
- padding-inline:var(--t-spacing-1);
1702
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1703
- font-family:inherit;
1704
- font-size:var(--tds-select-font-size);
1705
- line-height:1.15;
1706
- color:var(--tds-select-color);
1707
- text-align:left;
1708
- -webkit-appearance:none;
1709
- -moz-appearance:none;
1710
- appearance:none;
1711
- cursor:var(--tds-select-cursor, default);
1712
- outline:var(--t-focus-ring-width) solid transparent;
1713
- outline-offset:0;
1714
- background-color:var(--tds-select-background-color);
1715
- background-image:var(--tds-select-background-image);
1716
- background-repeat:no-repeat;
1717
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
1718
- background-size:var(--tds-select-caret-size);
1719
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
1720
- border-radius:var(--t-form-border-radius);
1721
- transition-timing-function:var(--t-ease-in-out);
1722
- transition-duration:var(--t-duration-300);
1723
- transition-property:var(--tds-select-transition-property);
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;
1724
1528
  }
1725
1529
 
1726
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1727
- border-color:var(--tds-select-border-color-hover);
1728
- }
1729
-
1730
- :is(.tds-select :is(select,button)):focus{
1731
- outline-color:var(--t-focus-ring-color);
1732
- outline-offset:var(--t-focus-ring-offset);
1733
- border-color:var(--tds-select-border-color-active);
1530
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1531
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1734
1532
  }
1735
1533
 
1736
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1737
- color:var(--tds-select-placeholder-color);
1738
- }
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
+ }
1739
1538
 
1740
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1741
- --tds-select-border-color:var(--t-form-border-color-error);
1742
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1743
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1744
- --tds-select-background-color:var(--t-form-background-color-error);
1745
- --tds-select-description-color:var(--t-text-color-status-error);
1746
- --tds-select-description-invalid-icon-display:inline-block;
1747
- }
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
+ }
1748
1542
 
1749
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1543
+ .tds-radio-group:has(input:required) legend::after{
1750
1544
  margin-left:.25ch;
1751
1545
  color:var(--t-text-color-status-error);
1752
1546
  content:"*";
1753
1547
  }
1754
1548
 
1755
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1756
- --tds-select-border-color:var(--t-form-border-color-disabled);
1757
- --tds-select-background-color:var(--t-form-background-color-disabled);
1758
- --tds-select-color:var(--t-form-color-disabled);
1759
- --tds-select-cursor:not-allowed;
1760
- }
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);
1555
+ }
1761
1556
 
1762
- .tds-select:has( > [popover]:popover-open) > button{
1763
- border-color:var(--tds-select-border-color-active);
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;
1566
+ }
1567
+
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);
1764
1573
  }
1765
1574
 
1766
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1767
- transform:rotate(.5turn);
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;
1580
+ }
1581
+
1582
+
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;
1768
1586
  }
1769
1587
 
1770
- .tds-select :is(hr,li[role="separator"]){
1771
- margin-block:var(--t-spacing-half);
1772
- color:var(--tds-select-border-color);
1773
- border:0;
1774
- border-top:1px solid;
1588
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1589
+ inline-size:1em;
1590
+ block-size:2em;
1591
+ }
1592
+
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);
1775
1598
  }
1776
1599
 
1777
- .tds-select :is(li[role="option"],option:not([hidden])){
1778
- display:block;
1779
- padding-block:var(--tds-select-option-padding-block);
1780
- padding-inline:var(--tds-select-option-padding-inline);
1781
- overflow:hidden;
1782
- text-overflow:ellipsis;
1783
- font-size:var(--tds-select-option-font-size);
1784
- line-height:1;
1785
- color:var(--tds-select-option-color);
1786
- white-space:nowrap;
1787
- cursor:default;
1788
- border-radius:var(--tds-select-option-border-radius);
1600
+ .tds-input--auto-width input{
1601
+ field-sizing:content;
1602
+ inline-size:auto;
1789
1603
  }
1604
+ }
1790
1605
 
1791
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1792
- outline:0;
1793
- }
1606
+ .tds-radio{
1607
+ --tds-radio-font-size:var(--t-font-size-md);
1608
+ --tds-radio-cursor:pointer;
1609
+ --tds-radio-line-height:1.4;
1610
+ --tds-radio-transition-property:border-width;
1794
1611
 
1795
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1796
- background:var(--tds-select-option-background-hover);
1797
- }
1612
+ --tds-radio-input-size:var(--t-element-size-md);
1613
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1614
+ --tds-radio-input-border-color:var(--t-form-border-color);
1615
+ --tds-radio-input-border-width:var(--t-form-border-width);
1616
+ --tds-radio-input-background-color:var(--t-form-background-color);
1798
1617
 
1799
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1800
- background:var(--tds-select-option-background-active);
1801
- }
1618
+ --tds-radio-label-color:var(--t-form-color);
1802
1619
 
1803
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1804
- color:var(--t-form-color-disabled);
1805
- cursor:not-allowed;
1806
- }
1620
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1621
+ --tds-radio-description-line-height:1.35;
1622
+ --tds-radio-description-color:var(--t-text-color-secondary);
1807
1623
 
1808
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1809
- background:transparent;
1810
- }
1624
+ position:relative;
1625
+ display:inline-grid;
1626
+ grid-template-columns:auto;
1627
+ grid-auto-columns:1fr;
1628
+ gap:var(--t-spacing-fourth) 0;
1629
+ line-height:var(--tds-radio-line-height);
1630
+ -webkit-user-select:none;
1631
+ -moz-user-select:none;
1632
+ user-select:none;
1633
+ }
1811
1634
 
1812
- .tds-select :is(li[role="presentation"],legend){
1813
- position:sticky;
1814
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1815
- z-index:1;
1816
- float:inline-start;
1817
- inline-size:100%;
1818
- padding-block:var(--tds-select-group-label-padding-block);
1819
- padding-inline:var(--tds-select-group-label-padding-inline);
1820
- container-type:scroll-state;
1821
- font-size:var(--tds-select-group-label-font-size);
1822
- font-weight:var(--tds-select-group-label-font-weight);
1823
- letter-spacing:var(--tds-select-group-label-letter-spacing);
1824
- background:var(--tds-select-group-label-background);
1825
- text-box:trim-both cap alphabetic;
1635
+ .tds-radio label{
1636
+ grid-area:1 / 2;
1637
+ padding-inline-start:var(--t-spacing-1);
1638
+ font-size:var(--tds-radio-font-size);
1639
+ font-weight:var(--t-font-weight-normal);
1640
+ color:var(--tds-radio-label-color);
1641
+ cursor:var(--tds-radio-cursor);
1826
1642
  }
1827
1643
 
1828
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1829
- display:inline-flex;
1830
- gap:var(--t-spacing-half);
1831
- align-items:center;
1832
- color:var(--tds-select-group-label-color);
1833
- transition:var(--tds-select-group-label-transition);
1644
+ .tds-radio input[type="radio"]{
1645
+ position:relative;
1646
+ width:1em;
1647
+ height:1em;
1648
+ margin:calc((1lh - 1em) / 2) 0 0;
1649
+ font-size:var(--tds-radio-font-size);
1650
+ line-height:inherit;
1651
+ -webkit-appearance:none;
1652
+ -moz-appearance:none;
1653
+ appearance:none;
1654
+ cursor:var(--tds-radio-cursor);
1655
+ background-color:var(--tds-radio-input-background-color);
1656
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1657
+ border-radius:var(--tds-radio-input-border-radius);
1658
+ transition-timing-function:var(--t-ease-in-out);
1659
+ transition-duration:var(--t-duration-200);
1660
+ transition-property:var(--tds-radio-transition-property);
1661
+ }
1662
+
1663
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1664
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1665
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1834
1666
  }
1835
1667
 
1836
- @container scroll-state(stuck){
1668
+ :is(.tds-radio input[type="radio"]):focus-visible{
1669
+ outline:var(--t-focus-ring-outline);
1670
+ outline-offset:var(--t-focus-ring-offset);
1671
+ }
1837
1672
 
1838
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1839
- color:var(--tds-select-group-label-color-stuck);
1673
+ :is(.tds-radio input[type="radio"]):disabled{
1674
+ pointer-events:none;
1840
1675
  }
1841
1676
 
1842
- @media (forced-colors: active){
1677
+ @media (prefers-reduced-motion: reduce){
1843
1678
 
1844
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1845
- color:var(--tds-select-group-label-color-stuck);
1679
+ .tds-radio input[type="radio"]{
1680
+ --tds-radio-transition-property:none;
1681
+ }
1682
+ }
1683
+
1684
+ .tds-radio:has(input:checked){
1685
+ --tds-radio-input-background-color:var(--t-form-background-color);
1686
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1687
+ --tds-radio-input-border-width:4px;
1688
+ }
1689
+
1690
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1691
+ --tds-radio-input-background-color:var(--t-form-background-color);
1692
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1846
1693
  }
1847
- }
1848
- }
1849
1694
 
1850
- .tds-select.tds-select--lg{
1851
- --tds-select-min-height:var(--t-container-size-lg);
1852
- --tds-select-font-size:var(--t-font-size-lg);
1695
+ .tds-radio:has(input:user-invalid){
1696
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1853
1697
  }
1854
1698
 
1855
- @media (prefers-reduced-motion: reduce){
1699
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1700
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1701
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1702
+ }
1856
1703
 
1857
- .tds-select{
1858
- --tds-select-transition-property:none;
1859
- --tds-select-dropdown-transition:none;
1860
- --tds-select-dropdown-scroll-behavior:auto;
1861
- --tds-select-dropdown-closed-translate:none;
1862
- --tds-select-dropdown-open-translate:none;
1863
- --tds-select-caret-transition:none;
1864
- }
1704
+ .tds-radio:has(input:disabled){
1705
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1706
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1707
+
1708
+ --tds-radio-label-color:var(--t-form-color-disabled);
1709
+ --tds-radio-description-color:var(--t-form-color-disabled);
1710
+ --tds-radio-cursor:not-allowed;
1865
1711
  }
1866
1712
 
1867
- .tds-select-description{
1713
+ .tds-radio:has(input:disabled) input:checked{
1714
+ --tds-radio-input-background-color:var(--t-form-background-color);
1715
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1716
+ }
1717
+
1718
+ .tds-radio-description{
1868
1719
  display:flex;
1720
+ grid-area:2 / 2;
1869
1721
  gap:var(--t-spacing-half);
1870
1722
  align-items:flex-start;
1723
+ padding-inline-start:var(--t-spacing-1);
1871
1724
  margin:0;
1872
- font-size:var(--t-font-size-sm);
1873
- line-height:1.35;
1874
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1725
+ font-size:var(--tds-radio-description-font-size);
1726
+ line-height:var(--tds-radio-description-line-height);
1727
+ color:var(--tds-radio-description-color);
1875
1728
  cursor:text;
1876
1729
  }
1877
1730
 
1878
- .tds-select-description .tds-select-description-invalid-icon{
1879
- display:var(--tds-select-description-invalid-icon-display, none);
1880
- flex-shrink:0;
1881
- margin-block-start:calc(.5lh - .5em);
1882
- line-height:1.35;
1883
- }
1884
-
1885
- .tds-select > .tds-select-hidden-select{
1886
- position:absolute;
1887
- inline-size:1px;
1888
- block-size:1px;
1889
- padding:0;
1890
- margin:0;
1891
- pointer-events:none;
1892
- opacity:0;
1731
+ .tds-radio--sm{
1732
+ --tds-radio-line-height:1.35;
1733
+ --tds-radio-input-size:var(--t-element-size-sm);
1734
+ --tds-radio-font-size:var(--t-font-size-sm);
1735
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1736
+ --tds-radio-description-line-height:1.3;
1893
1737
  }
1894
1738
 
1895
- .tds-select:has(> button){
1896
- anchor-scope:--tds-select-anchor;
1739
+ .tds-input:has(textarea){
1740
+ --tds-input-padding-block:6px;
1741
+ --tds-input-resizer-size:var(--t-element-size-sm);
1742
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1897
1743
  }
1898
1744
 
1899
- .tds-select:has( > button) > button{
1900
- display:block;
1901
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1902
- anchor-name:--tds-select-anchor;
1903
- overflow:hidden;
1904
- text-overflow:ellipsis;
1905
- color:var(--tds-select-placeholder-color);
1906
- white-space:nowrap;
1907
- background-image:none;
1908
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1909
- -webkit-tap-highlight-color:transparent;
1910
- }
1911
-
1912
- :is(.tds-select:has( > button) > button)::after{
1913
- position:absolute;
1914
- inset-block:0;
1915
- inset-inline-end:var(--tds-select-caret-inline-offset);
1916
- width:var(--tds-select-caret-size);
1917
- height:var(--tds-select-caret-size);
1918
- margin-block:auto;
1919
- line-height:1;
1920
- pointer-events:none;
1921
- content:var(--tds-select-background-image);
1922
- transform:rotate(0);
1923
- transition:var(--tds-select-caret-transition);
1924
- }
1925
-
1926
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1927
- color:var(--tds-select-color);
1928
- }
1745
+ @supports (x: attr(x type(*))){
1929
1746
 
1930
- .tds-select:has( > button) [popover]{
1931
- inset:auto;
1932
- inline-size:-moz-max-content;
1933
- inline-size:max-content;
1934
- min-inline-size:anchor-size(width);
1935
- max-inline-size:100vi;
1936
- max-block-size:min(50vh, 20rem);
1937
- padding:var(--tds-select-dropdown-padding);
1938
- margin-block:var(--tds-select-dropdown-margin-block);
1939
- position-area:block-end span-inline-start;
1940
- position-anchor:--tds-select-anchor;
1941
- position-try-fallbacks:flip-block, flip-inline;
1942
- overflow:auto;
1943
- overflow-x:hidden;
1944
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1945
- overscroll-behavior:none;
1946
- -webkit-user-select:none;
1947
- -moz-user-select:none;
1948
- user-select:none;
1949
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1950
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1951
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1952
- background:var(--tds-select-dropdown-background-color);
1953
- border:var(--tds-select-dropdown-border);
1954
- border-radius:var(--tds-select-dropdown-border-radius);
1955
- box-shadow:var(--tds-select-dropdown-box-shadow);
1956
- opacity:var(--tds-select-dropdown-open-opacity);
1957
- translate:var(--tds-select-dropdown-open-translate);
1958
- transition:var(--tds-select-dropdown-transition);
1747
+ .tds-input textarea{
1748
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1749
+ }
1959
1750
  }
1960
1751
 
1961
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1962
- opacity:var(--tds-select-dropdown-closed-opacity);
1963
- translate:var(--tds-select-dropdown-closed-translate);
1752
+ .tds-input.tds-textarea--resize-vertical textarea{
1753
+ resize:vertical;
1964
1754
  }
1965
1755
 
1966
- :is(.tds-select:has( > button) [popover]) ul{
1967
- padding:0;
1968
- margin:0;
1969
- list-style:none;
1756
+ .tds-input.tds-textarea--resize-none textarea{
1757
+ resize:none;
1970
1758
  }
1971
1759
 
1972
- @starting-style{
1973
- :is(.tds-select:has( > button) [popover]):popover-open{
1974
- opacity:var(--tds-select-dropdown-closed-opacity);
1975
- translate:var(--tds-select-dropdown-closed-translate);
1976
- }
1760
+ .tds-input.tds-textarea--resize-auto textarea{
1761
+ resize:vertical;
1977
1762
  }
1978
1763
 
1979
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1980
- .tds-select select:has(> button){
1981
- padding-inline-end:0;
1982
- background-image:none;
1983
- }
1984
- @media (hover) and (pointer: fine){
1985
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1986
- padding-block:0;
1987
- -webkit-appearance:base-select;
1988
- -moz-appearance:base-select;
1989
- appearance:base-select;
1764
+ @supports (field-sizing: content){
1765
+ .tds-input.tds-textarea--resize-auto textarea{
1766
+ field-sizing:content;
1767
+ resize:none;
1990
1768
  }
1991
1769
  }
1992
- :is(.tds-select select:has( > button))::picker-icon{
1993
- flex-shrink:0;
1994
- width:var(--tds-select-caret-size);
1995
- height:var(--tds-select-caret-size);
1996
- margin-inline-end:var(--tds-select-caret-inline-offset);
1997
- line-height:1;
1998
- content:var(--tds-select-background-image);
1999
- transition:var(--tds-select-caret-transition);
1770
+
1771
+ .tds-input textarea{
1772
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1773
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1774
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1775
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1776
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1777
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1778
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1779
+ --tds-input-scrollbar-thumb-border-radius:999px;
1780
+ --tds-input-scrollbar-thumb-border-width:3px;
1781
+ --tds-input-scrollbar-track-margin-block:.125rem;
1782
+ scrollbar-color:initial;
1783
+ transition-timing-function:var(--t-ease-in-out);
1784
+ transition-duration:var(--t-duration-200);
1785
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1786
+ }
1787
+
1788
+ @media (pointer: fine){
1789
+ :is(.tds-input textarea)::-webkit-scrollbar{
1790
+ width:12px;
1791
+ height:12px;
1792
+ cursor:default;
2000
1793
  }
2001
1794
 
2002
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2003
- opacity:var(--tds-select-dropdown-closed-opacity);
2004
- translate:var(--tds-select-dropdown-closed-translate);
1795
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1796
+ cursor:default;
1797
+ background:var(--tds-input-scrollbar-thumb-color);
1798
+ background-clip:content-box;
1799
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1800
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2005
1801
  }
2006
1802
 
2007
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2008
- outline-color:var(--t-focus-ring-color);
2009
- outline-offset:var(--t-focus-ring-offset);
2010
- border-color:var(--tds-select-border-color-active);
1803
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1804
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2011
1805
  }
2012
1806
 
2013
- :is(.tds-select select:has( > button)):open::picker-icon{
2014
- opacity:1;
2015
- transform:rotate(.5turn);
1807
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1808
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2016
1809
  }
2017
1810
 
2018
- :is(.tds-select select:has( > button)) selectedcontent{
2019
- overflow:hidden;
2020
- text-overflow:ellipsis;
2021
- line-height:calc(var(--tds-select-min-height) - 2px);
2022
- white-space:nowrap;
1811
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1812
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2023
1813
  }
2024
1814
 
2025
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2026
- color:var(--tds-select-placeholder-color);
1815
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1816
+ background:var(--tds-input-scrollbar-surface-color);
2027
1817
  }
2028
1818
 
2029
- :is(.tds-select select:has( > button))::picker(select){
2030
- inset:auto;
2031
- inline-size:-moz-max-content;
2032
- inline-size:max-content;
2033
- min-inline-size:anchor-size(width);
2034
- max-inline-size:100vi;
2035
- padding:var(--tds-select-dropdown-padding);
2036
- margin-block:var(--tds-select-dropdown-margin-block);
2037
- position-area:block-end span-inline-start;
2038
- position-try-fallbacks:flip-block, flip-inline;
2039
- overflow:auto;
2040
- overflow-x:hidden;
2041
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2042
- overscroll-behavior:none;
2043
- -webkit-user-select:none;
2044
- -moz-user-select:none;
2045
- user-select:none;
2046
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2047
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2048
- background:var(--tds-select-dropdown-background-color);
2049
- border:var(--tds-select-dropdown-border);
2050
- border-radius:var(--tds-select-dropdown-border-radius);
2051
- box-shadow:var(--tds-select-dropdown-box-shadow);
2052
- opacity:var(--tds-select-dropdown-open-opacity);
2053
- translate:var(--tds-select-dropdown-open-translate);
2054
- transition:var(--tds-select-dropdown-transition);
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);
2055
1823
  }
2056
1824
 
2057
- :is(.tds-select select:has( > button)) option::checkmark{
2058
- display:none;
1825
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1826
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1827
+ cursor:default;
2059
1828
  }
2060
1829
 
2061
- @starting-style{
2062
- :is(.tds-select select:has( > button))::picker(select):popover-open{
2063
- opacity:var(--tds-select-dropdown-closed-opacity);
2064
- translate:var(--tds-select-dropdown-closed-translate);
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
+ }
2065
1840
  }
2066
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;
2067
1849
  }
2068
1850
 
2069
1851
  .tds-input{
@@ -2350,368 +2132,586 @@
2350
2132
  color:var(--tds-field-color);
2351
2133
  }
2352
2134
 
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;
2353
2140
 
2354
- @media (prefers-reduced-motion: no-preference){
2141
+ --tds-toggle-switch-label-color:var(--t-form-color);
2355
2142
 
2356
- :root{
2357
- interpolate-size:allow-keywords;
2358
- }
2359
- }
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);
2360
2148
 
2361
- @layer tds-component{
2362
- tds-sidenav,
2363
- .tds-sidenav{
2364
- --tds-sidenav-indent:12px;
2365
- --tds-sidenav-item-depth:0;
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);
2366
2152
 
2367
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
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;
2368
2157
 
2369
- --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;
2370
- --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;
2371
- --tds-sidenav-collapse-closed-opacity:0;
2372
- --tds-sidenav-collapse-open-opacity:1;
2373
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
2374
- --tds-sidenav-collapse-open-transform:translateY(0);
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
+ }
2375
2166
 
2376
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
2377
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2378
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2379
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
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
+ }
2380
2182
 
2381
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2382
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2383
- --tds-sidenav-item-nested-background-selected:transparent;
2183
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2184
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2185
+ }
2384
2186
 
2385
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2386
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2387
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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
+ }
2388
2198
 
2389
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2390
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2199
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2200
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2391
2201
  }
2392
2202
 
2393
- @media (prefers-reduced-motion: reduce){
2394
- tds-sidenav,
2395
- .tds-sidenav{
2396
- --tds-sidenav-collapse-transition-enter:none;
2397
- --tds-sidenav-collapse-transition-exit:none;
2398
- --tds-sidenav-collapse-closed-transform:none;
2399
- --tds-sidenav-collapse-open-transform:none;
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)));
2400
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);
2401
2210
  }
2402
2211
 
2403
- .tds-sidenav--theme-gray{
2404
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2405
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2406
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2407
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2408
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
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;
2409
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);
2410
2227
  }
2411
2228
 
2412
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2413
- display:flex;
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);
2414
2240
  }
2415
2241
 
2416
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2417
- flex-direction:column;
2418
- gap:var(--t-spacing-half);
2419
- width:100%;
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
+ }
2420
2248
  }
2421
2249
 
2422
- .tds-sidenav-section-list{
2423
- width:100%;
2424
- padding:0;
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);
2425
2255
  margin:0;
2426
- list-style:none;
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;
2427
2260
  }
2428
2261
 
2429
- .tds-sidenav-section-header{
2430
- display:flex;
2431
- align-items:baseline;
2432
- justify-content:space-between;
2433
- padding-top:var(--t-spacing-2);
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;
2434
2269
  }
2435
2270
 
2436
- .tds-sidenav-section-header h2{
2437
- margin:0;
2438
- font-size:var(--t-font-size-sm);
2439
- font-weight:var(--t-font-weight-semibold);
2440
- line-height:1.35;
2441
- color:var(--t-text-color-secondary);
2442
- text-transform:uppercase;
2443
- }
2271
+ .tds-toggle-switch--hide-label{
2272
+ --tds-toggle-switch-display:inline-flex;
2273
+ }
2444
2274
 
2445
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2446
- padding-top:0;
2447
- }
2275
+ .tds-select{
2276
+ --tds-select-border-color:var(--t-form-border-color);
2277
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
2278
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
2279
+ --tds-select-background-color:var(--t-form-background-color);
2280
+ --tds-select-color:var(--t-form-color);
2281
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
2282
+ --tds-select-font-size:var(--t-font-size-md);
2283
+ --tds-select-min-height:var(--t-container-size-md);
2284
+ --tds-select-padding-block:0;
2285
+ --tds-select-description-color:var(--t-text-color-secondary);
2286
+ --tds-select-description-invalid-icon-display:none;
2287
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2288
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2289
+ --tds-select-caret-size:1em;
2290
+ --tds-select-caret-inline-offset:.75em;
2291
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2448
2292
 
2449
- .tds-sidenav-section-header [slot="label-actions"]{
2450
- display:flex;
2451
- gap:var(--t-spacing-half);
2452
- align-items:center;
2453
- }
2293
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
2294
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
2295
+ --tds-select-dropdown-padding:var(--t-spacing-1);
2296
+ --tds-select-dropdown-margin-block:5px;
2297
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
2298
+ --tds-select-dropdown-scrollbar-width:thin;
2299
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
2300
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2301
+ --tds-select-dropdown-scroll-behavior:smooth;
2302
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2303
+ --tds-select-dropdown-closed-opacity:0;
2304
+ --tds-select-dropdown-open-opacity:1;
2305
+ --tds-select-dropdown-closed-translate:0 -8px;
2306
+ --tds-select-dropdown-open-translate:0 0;
2307
+
2308
+ --tds-select-option-gap:var(--t-spacing-1);
2309
+ --tds-select-option-padding-block:var(--t-spacing-1);
2310
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2311
+ --tds-select-option-font-size:1rem;
2312
+ --tds-select-option-color:var(--t-text-color);
2313
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2314
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2315
+ --tds-select-option-border-radius:var(--t-border-radius);
2316
+
2317
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2318
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2319
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
2320
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
2321
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2322
+ --tds-select-group-label-letter-spacing:0;
2323
+ --tds-select-group-label-color:var(--t-text-color-secondary);
2324
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2325
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2326
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
2454
2327
 
2455
- .tds-sidenav-section [slot="section-actions"]{
2328
+ position:relative;
2456
2329
  display:flex;
2457
- gap:12px;
2458
- align-items:center;
2459
- min-height:42px;
2460
- padding:var(--t-spacing-1) 0;
2330
+ flex-direction:column;
2331
+ gap:var(--t-spacing-half);
2461
2332
  }
2462
2333
 
2463
- .tds-sidenav-section-list,
2464
- .tds-sidenav-item{
2465
- width:100%;
2466
- padding:0;
2467
- margin:0;
2468
- }
2334
+ .tds-select :is(label,.tds-select-label){
2335
+ font-size:var(--t-font-size-md);
2336
+ font-weight:var(--t-font-weight-normal);
2337
+ color:var(--t-text-color);
2338
+ cursor:default;
2339
+ }
2469
2340
 
2470
- .tds-sidenav-item :is(a,button){
2341
+ .tds-select :is(select,button){
2471
2342
  position:relative;
2472
- display:flex;
2473
- gap:12px;
2474
- align-items:center;
2475
- width:100%;
2476
- padding:12px;
2477
- overflow:hidden;
2478
- font-size:var(--t-font-size-sm);
2479
- line-height:18px;
2480
- color:var(--t-text-color-headline);
2481
- white-space:nowrap;
2482
- text-decoration:none;
2343
+ place-items:center;
2344
+ inline-size:100%;
2345
+ min-block-size:var(--tds-select-min-height);
2346
+ padding-block:var(--tds-select-padding-block);
2347
+ padding-inline:var(--t-spacing-1);
2348
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2349
+ font-family:inherit;
2350
+ font-size:var(--tds-select-font-size);
2351
+ line-height:1.15;
2352
+ color:var(--tds-select-color);
2353
+ text-align:left;
2483
2354
  -webkit-appearance:none;
2484
2355
  -moz-appearance:none;
2485
2356
  appearance:none;
2486
- cursor:pointer;
2487
- background-color:var(--tds-sidenav-item-background, transparent);
2488
- border:0;
2489
- border-radius:var(--t-border-radius);
2490
- transition:var(--tds-sidenav-item-transition);
2357
+ cursor:var(--tds-select-cursor, default);
2358
+ outline:var(--t-focus-ring-width) solid transparent;
2359
+ outline-offset:0;
2360
+ background-color:var(--tds-select-background-color);
2361
+ background-image:var(--tds-select-background-image);
2362
+ background-repeat:no-repeat;
2363
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
2364
+ background-size:var(--tds-select-caret-size);
2365
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
2366
+ border-radius:var(--t-form-border-radius);
2367
+ transition-timing-function:var(--t-ease-in-out);
2368
+ transition-duration:var(--t-duration-300);
2369
+ transition-property:var(--tds-select-transition-property);
2491
2370
  }
2492
2371
 
2493
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2494
- display:block;
2495
- flex:1;
2496
- overflow:hidden;
2497
- text-overflow:ellipsis;
2498
- text-align:left;
2499
- white-space:nowrap;
2372
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2373
+ border-color:var(--tds-select-border-color-hover);
2500
2374
  }
2501
2375
 
2502
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2503
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2504
- color:var(--t-text-color-headline);
2505
- text-decoration:none;
2376
+ :is(.tds-select :is(select,button)):focus{
2377
+ outline-color:var(--t-focus-ring-color);
2378
+ outline-offset:var(--t-focus-ring-offset);
2379
+ border-color:var(--tds-select-border-color-active);
2506
2380
  }
2507
2381
 
2508
- :is(.tds-sidenav-item :is(a,button)):active{
2509
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2382
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2383
+ color:var(--tds-select-placeholder-color);
2510
2384
  }
2511
2385
 
2512
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2513
- overflow:hidden;
2514
- color:var(--tds-sidenav-item-icon-color);
2386
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2387
+ --tds-select-border-color:var(--t-form-border-color-error);
2388
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2389
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2390
+ --tds-select-background-color:var(--t-form-background-color-error);
2391
+ --tds-select-description-color:var(--t-text-color-status-error);
2392
+ --tds-select-description-invalid-icon-display:inline-block;
2393
+ }
2394
+
2395
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2396
+ margin-left:.25ch;
2397
+ color:var(--t-text-color-status-error);
2398
+ content:"*";
2515
2399
  }
2516
2400
 
2517
- :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{
2518
- display:block;
2519
- width:var(--tds-sidenav-item-icon-size);
2520
- height:var(--tds-sidenav-item-icon-size);
2521
- }
2401
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2402
+ --tds-select-border-color:var(--t-form-border-color-disabled);
2403
+ --tds-select-background-color:var(--t-form-background-color-disabled);
2404
+ --tds-select-color:var(--t-form-color-disabled);
2405
+ --tds-select-cursor:not-allowed;
2406
+ }
2522
2407
 
2523
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2524
- --tds-sidenav-indent:19px;
2525
- }
2408
+ .tds-select:has( > [popover]:popover-open) > button{
2409
+ border-color:var(--tds-select-border-color-active);
2410
+ }
2526
2411
 
2527
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2528
- visibility:visible;
2529
- block-size:auto;
2530
- opacity:1;
2412
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2413
+ transform:rotate(.5turn);
2531
2414
  }
2532
2415
 
2533
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2534
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2535
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2536
-
2537
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2538
- font-weight:var(--t-font-weight-semibold);
2416
+ .tds-select :is(hr,li[role="separator"]){
2417
+ margin-block:var(--t-spacing-half);
2418
+ color:var(--tds-select-border-color);
2419
+ border:0;
2420
+ border-top:1px solid;
2539
2421
  }
2540
2422
 
2541
- .tds-sidenav-item:has(.tds-sidenav-section){
2542
- display:flex;
2543
- flex-direction:column;
2544
- gap:var(--t-spacing-half);
2423
+ .tds-select :is(li[role="option"],option:not([hidden])){
2424
+ display:block;
2425
+ padding-block:var(--tds-select-option-padding-block);
2426
+ padding-inline:var(--tds-select-option-padding-inline);
2427
+ overflow:hidden;
2428
+ text-overflow:ellipsis;
2429
+ font-size:var(--tds-select-option-font-size);
2430
+ line-height:1;
2431
+ color:var(--tds-select-option-color);
2432
+ white-space:nowrap;
2433
+ cursor:default;
2434
+ border-radius:var(--tds-select-option-border-radius);
2545
2435
  }
2546
2436
 
2547
- .tds-sidenav-item .tds-sidenav-section-list{
2548
- --tds-sidenav-item-depth:1;
2549
- gap:0;
2550
- }
2437
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2438
+ outline:0;
2439
+ }
2551
2440
 
2552
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2553
- visibility:hidden;
2554
- block-size:0;
2555
- overflow-y:clip;
2556
- opacity:0;
2557
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2441
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2442
+ background:var(--tds-select-option-background-hover);
2558
2443
  }
2559
2444
 
2560
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2561
- --tds-sidenav-item-depth:2;
2445
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2446
+ background:var(--tds-select-option-background-active);
2562
2447
  }
2563
2448
 
2564
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2565
- min-height:var(--t-element-size-2xl);
2566
- padding-block:9px;
2567
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2568
- line-height:1;
2569
- background-color:transparent;
2449
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2450
+ color:var(--t-form-color-disabled);
2451
+ cursor:not-allowed;
2570
2452
  }
2571
2453
 
2572
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2573
- position:absolute;
2574
- top:0;
2575
- bottom:0;
2576
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2577
- width:2px;
2578
- content:"";
2579
- background-color:var(--tds-sidenav-item-nested-border-color);
2580
- transition:var(--tds-sidenav-item-transition);
2454
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2455
+ background:transparent;
2581
2456
  }
2582
2457
 
2583
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2584
- position:absolute;
2585
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2586
- z-index:-1;
2587
- height:100%;
2588
- content:"";
2589
- background-color:var(--tds-sidenav-item-nested-background);
2590
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2591
- transition:var(--tds-sidenav-item-transition);
2592
- }
2458
+ .tds-select :is(li[role="presentation"],legend){
2459
+ position:sticky;
2460
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2461
+ z-index:1;
2462
+ float:inline-start;
2463
+ inline-size:100%;
2464
+ padding-block:var(--tds-select-group-label-padding-block);
2465
+ padding-inline:var(--tds-select-group-label-padding-inline);
2466
+ container-type:scroll-state;
2467
+ font-size:var(--tds-select-group-label-font-size);
2468
+ font-weight:var(--tds-select-group-label-font-weight);
2469
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
2470
+ background:var(--tds-select-group-label-background);
2471
+ text-box:trim-both cap alphabetic;
2472
+ }
2593
2473
 
2594
- :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)){
2595
- display:block;
2596
- text-align:left;
2597
- white-space:normal;
2598
- }
2474
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2475
+ display:inline-flex;
2476
+ gap:var(--t-spacing-half);
2477
+ align-items:center;
2478
+ color:var(--tds-select-group-label-color);
2479
+ transition:var(--tds-select-group-label-transition);
2480
+ }
2599
2481
 
2600
- :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{
2601
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2602
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2603
- }
2482
+ @container scroll-state(stuck){
2604
2483
 
2605
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2606
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2484
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2485
+ color:var(--tds-select-group-label-color-stuck);
2486
+ }
2487
+
2488
+ @media (forced-colors: active){
2489
+
2490
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2491
+ color:var(--tds-select-group-label-color-stuck);
2492
+ }
2493
+ }
2607
2494
  }
2608
2495
 
2609
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2610
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2611
- font-weight:var(--t-font-weight-medium);
2612
- }
2496
+ .tds-select.tds-select--lg{
2497
+ --tds-select-min-height:var(--t-container-size-lg);
2498
+ --tds-select-font-size:var(--t-font-size-lg);
2499
+ }
2500
+
2501
+ @media (prefers-reduced-motion: reduce){
2502
+
2503
+ .tds-select{
2504
+ --tds-select-transition-property:none;
2505
+ --tds-select-dropdown-transition:none;
2506
+ --tds-select-dropdown-scroll-behavior:auto;
2507
+ --tds-select-dropdown-closed-translate:none;
2508
+ --tds-select-dropdown-open-translate:none;
2509
+ --tds-select-caret-transition:none;
2510
+ }
2511
+ }
2613
2512
 
2614
- .tds-sidenav-responsive-header{
2513
+ .tds-select-description{
2615
2514
  display:flex;
2616
- gap:var(--t-spacing-2);
2617
- align-items:center;
2618
- width:100%;
2515
+ gap:var(--t-spacing-half);
2516
+ align-items:flex-start;
2517
+ margin:0;
2518
+ font-size:var(--t-font-size-sm);
2519
+ line-height:1.35;
2520
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
2521
+ cursor:text;
2619
2522
  }
2620
2523
 
2621
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2622
- order:0;
2524
+ .tds-select-description .tds-select-description-invalid-icon{
2525
+ display:var(--tds-select-description-invalid-icon-display, none);
2526
+ flex-shrink:0;
2527
+ margin-block-start:calc(.5lh - .5em);
2528
+ line-height:1.35;
2623
2529
  }
2624
2530
 
2625
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2626
- flex:1;
2627
- order:1;
2628
- margin:0;
2629
- font-size:var(--t-font-size-lg);
2630
- font-weight:var(--t-font-weight-medium);
2631
- color:var(--t-text-color-headline);
2632
- }
2531
+ .tds-select > .tds-select-hidden-select{
2532
+ position:absolute;
2533
+ inline-size:1px;
2534
+ block-size:1px;
2535
+ padding:0;
2536
+ margin:0;
2537
+ pointer-events:none;
2538
+ opacity:0;
2539
+ }
2633
2540
 
2634
- @media (max-width: 719px){
2635
- .tds-sidenav-collapse{
2636
- z-index:10001;
2637
- display:none;
2638
- max-width:min(448px, calc(100vw - 48px));
2639
- padding:0;
2640
- margin:12px 0;
2641
- position-area:bottom span-right;
2541
+ .tds-select:has(> button){
2542
+ anchor-scope:--tds-select-anchor;
2543
+ }
2544
+
2545
+ .tds-select:has( > button) > button{
2546
+ display:block;
2547
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2548
+ anchor-name:--tds-select-anchor;
2642
2549
  overflow:hidden;
2643
- outline:0;
2644
- background:var(--t-surface-color-card);
2645
- border:0;
2646
- border-radius:6px;
2647
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2648
- opacity:var(--tds-sidenav-collapse-open-opacity);
2649
- transform:var(--tds-sidenav-collapse-open-transform);
2650
- transition:var(--tds-sidenav-collapse-transition-enter);
2651
- will-change:transform;
2550
+ text-overflow:ellipsis;
2551
+ color:var(--tds-select-placeholder-color);
2552
+ white-space:nowrap;
2553
+ background-image:none;
2554
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
2555
+ -webkit-tap-highlight-color:transparent;
2652
2556
  }
2653
2557
 
2654
- .tds-sidenav-scroll-container{
2655
- --webkit-overflow-scrolling:touch;
2656
- display:block;
2657
- width:100%;
2658
- height:-moz-fit-content;
2659
- height:fit-content;
2660
- padding:var(--t-spacing-2);
2661
- overflow-y:auto;
2558
+ :is(.tds-select:has( > button) > button)::after{
2559
+ position:absolute;
2560
+ inset-block:0;
2561
+ inset-inline-end:var(--tds-select-caret-inline-offset);
2562
+ width:var(--tds-select-caret-size);
2563
+ height:var(--tds-select-caret-size);
2564
+ margin-block:auto;
2565
+ line-height:1;
2566
+ pointer-events:none;
2567
+ content:var(--tds-select-background-image);
2568
+ transform:rotate(0);
2569
+ transition:var(--tds-select-caret-transition);
2570
+ }
2571
+
2572
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
2573
+ color:var(--tds-select-color);
2662
2574
  }
2663
2575
 
2664
- .tds-sidenav-item :is(a, button) :is(.prefix){
2665
- display:none;
2576
+ .tds-select:has( > button) [popover]{
2577
+ inset:auto;
2578
+ inline-size:-moz-max-content;
2579
+ inline-size:max-content;
2580
+ min-inline-size:anchor-size(width);
2581
+ max-inline-size:100vi;
2582
+ max-block-size:min(50vh, 20rem);
2583
+ padding:var(--tds-select-dropdown-padding);
2584
+ margin-block:var(--tds-select-dropdown-margin-block);
2585
+ position-area:block-end span-inline-start;
2586
+ position-anchor:--tds-select-anchor;
2587
+ position-try-fallbacks:flip-block, flip-inline;
2588
+ overflow:auto;
2589
+ overflow-x:hidden;
2590
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2591
+ overscroll-behavior:none;
2592
+ -webkit-user-select:none;
2593
+ -moz-user-select:none;
2594
+ user-select:none;
2595
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2596
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2597
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2598
+ background:var(--tds-select-dropdown-background-color);
2599
+ border:var(--tds-select-dropdown-border);
2600
+ border-radius:var(--tds-select-dropdown-border-radius);
2601
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2602
+ opacity:var(--tds-select-dropdown-open-opacity);
2603
+ translate:var(--tds-select-dropdown-open-translate);
2604
+ transition:var(--tds-select-dropdown-transition);
2666
2605
  }
2667
- @supports selector(:popover-open){
2668
- .tds-sidenav-collapse:popover-open{
2669
- display:flex;
2606
+
2607
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
2608
+ opacity:var(--tds-select-dropdown-closed-opacity);
2609
+ translate:var(--tds-select-dropdown-closed-translate);
2670
2610
  }
2671
2611
 
2672
- .tds-sidenav-collapse:not(:popover-open){
2673
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2674
- transition:var(--tds-sidenav-collapse-transition-exit);
2612
+ :is(.tds-select:has( > button) [popover]) ul{
2613
+ padding:0;
2614
+ margin:0;
2615
+ list-style:none;
2675
2616
  }
2676
2617
 
2677
- @starting-style{
2678
- .tds-sidenav-collapse:popover-open{
2679
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2680
- transform:var(--tds-sidenav-collapse-closed-transform);
2618
+ @starting-style{
2619
+ :is(.tds-select:has( > button) [popover]):popover-open{
2620
+ opacity:var(--tds-select-dropdown-closed-opacity);
2621
+ translate:var(--tds-select-dropdown-closed-translate);
2681
2622
  }
2682
2623
  }
2624
+
2625
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2626
+ .tds-select select:has(> button){
2627
+ padding-inline-end:0;
2628
+ background-image:none;
2683
2629
  }
2684
- @supports not selector(:popover-open){
2685
- .tds-sidenav-collapse.\:popover-open{
2686
- display:flex;
2630
+ @media (hover) and (pointer: fine){
2631
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2632
+ padding-block:0;
2633
+ -webkit-appearance:base-select;
2634
+ -moz-appearance:base-select;
2635
+ appearance:base-select;
2636
+ }
2637
+ }
2638
+ :is(.tds-select select:has( > button))::picker-icon{
2639
+ flex-shrink:0;
2640
+ width:var(--tds-select-caret-size);
2641
+ height:var(--tds-select-caret-size);
2642
+ margin-inline-end:var(--tds-select-caret-inline-offset);
2643
+ line-height:1;
2644
+ content:var(--tds-select-background-image);
2645
+ transition:var(--tds-select-caret-transition);
2687
2646
  }
2688
2647
 
2689
- .tds-sidenav-collapse:not(.\:popover-open){
2690
- opacity:var(--tds-sidenav-collapse-closed-opacity);
2691
- transition:var(--tds-sidenav-collapse-transition-exit);
2648
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2649
+ opacity:var(--tds-select-dropdown-closed-opacity);
2650
+ translate:var(--tds-select-dropdown-closed-translate);
2692
2651
  }
2693
- }
2694
- }
2695
2652
 
2696
- @media (min-width: 720px){
2697
- .tds-sidenav-responsive-header{
2698
- display:none;
2699
- }
2700
- }
2653
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2654
+ outline-color:var(--t-focus-ring-color);
2655
+ outline-offset:var(--t-focus-ring-offset);
2656
+ border-color:var(--tds-select-border-color-active);
2657
+ }
2701
2658
 
2702
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2703
- display:none;
2659
+ :is(.tds-select select:has( > button)):open::picker-icon{
2660
+ opacity:1;
2661
+ transform:rotate(.5turn);
2704
2662
  }
2705
2663
 
2706
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2707
- display:block;
2664
+ :is(.tds-select select:has( > button)) selectedcontent{
2665
+ overflow:hidden;
2666
+ text-overflow:ellipsis;
2667
+ line-height:calc(var(--tds-select-min-height) - 2px);
2668
+ white-space:nowrap;
2708
2669
  }
2709
2670
 
2710
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2711
- display:flex;
2712
- flex-direction:column;
2671
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2672
+ color:var(--tds-select-placeholder-color);
2673
+ }
2674
+
2675
+ :is(.tds-select select:has( > button))::picker(select){
2676
+ inset:auto;
2677
+ inline-size:-moz-max-content;
2678
+ inline-size:max-content;
2679
+ min-inline-size:anchor-size(width);
2680
+ max-inline-size:100vi;
2681
+ padding:var(--tds-select-dropdown-padding);
2682
+ margin-block:var(--tds-select-dropdown-margin-block);
2683
+ position-area:block-end span-inline-start;
2684
+ position-try-fallbacks:flip-block, flip-inline;
2685
+ overflow:auto;
2686
+ overflow-x:hidden;
2687
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2688
+ overscroll-behavior:none;
2689
+ -webkit-user-select:none;
2690
+ -moz-user-select:none;
2691
+ user-select:none;
2692
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2693
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2694
+ background:var(--tds-select-dropdown-background-color);
2695
+ border:var(--tds-select-dropdown-border);
2696
+ border-radius:var(--tds-select-dropdown-border-radius);
2697
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2698
+ opacity:var(--tds-select-dropdown-open-opacity);
2699
+ translate:var(--tds-select-dropdown-open-translate);
2700
+ transition:var(--tds-select-dropdown-transition);
2701
+ }
2702
+
2703
+ :is(.tds-select select:has( > button)) option::checkmark{
2704
+ display:none;
2713
2705
  }
2714
2706
 
2707
+ @starting-style{
2708
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
2709
+ opacity:var(--tds-select-dropdown-closed-opacity);
2710
+ translate:var(--tds-select-dropdown-closed-translate);
2711
+ }
2712
+ }
2713
+ }
2714
+
2715
2715
  .tds-loading-spinner{
2716
2716
  --tds-loading-spinner-size:1.25em;
2717
2717