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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1839 -1839
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1839 -1839
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -1,1275 +1,1532 @@
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
1
 
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);
2
+ @media (prefers-reduced-motion: no-preference){
11
3
 
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);
4
+ :root{
5
+ interpolate-size:allow-keywords;
6
+ }
7
+ }
16
8
 
17
- --tds-checkbox-label-color:var(--t-form-color);
9
+ @layer tds-component{
10
+ tds-sidenav,
11
+ .tds-sidenav{
12
+ --tds-sidenav-indent:12px;
13
+ --tds-sidenav-item-depth:0;
18
14
 
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;
15
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
23
16
 
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;
17
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
+ --tds-sidenav-collapse-closed-opacity:0;
20
+ --tds-sidenav-collapse-open-opacity:1;
21
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
+ --tds-sidenav-collapse-open-transform:translateY(0);
23
+
24
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
28
+
29
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
+ --tds-sidenav-item-nested-background-selected:transparent;
32
+
33
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
36
+
37
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
+ }
40
+
41
+ @media (prefers-reduced-motion: reduce){
42
+ tds-sidenav,
43
+ .tds-sidenav{
44
+ --tds-sidenav-collapse-transition-enter:none;
45
+ --tds-sidenav-collapse-transition-exit:none;
46
+ --tds-sidenav-collapse-closed-transform:none;
47
+ --tds-sidenav-collapse-open-transform:none;
48
+ }
49
+ }
50
+
51
+ .tds-sidenav--theme-gray{
52
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
57
+ }
33
58
  }
34
59
 
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);
60
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
+ display:flex;
42
62
  }
43
63
 
44
- .tds-checkbox tds-indeterminate{
64
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
+ flex-direction:column;
66
+ gap:var(--t-spacing-half);
67
+ width:100%;
68
+ }
69
+
70
+ .tds-sidenav-section-list{
71
+ width:100%;
72
+ padding:0;
73
+ margin:0;
74
+ list-style:none;
75
+ }
76
+
77
+ .tds-sidenav-section-header{
78
+ display:flex;
79
+ align-items:baseline;
80
+ justify-content:space-between;
81
+ padding-top:var(--t-spacing-2);
82
+ }
83
+
84
+ .tds-sidenav-section-header h2{
85
+ margin:0;
86
+ font-size:var(--t-font-size-sm);
87
+ font-weight:var(--t-font-weight-semibold);
88
+ line-height:1.35;
89
+ color:var(--t-text-color-secondary);
90
+ text-transform:uppercase;
91
+ }
92
+
93
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
+ padding-top:0;
95
+ }
96
+
97
+ .tds-sidenav-section-header [slot="label-actions"]{
45
98
  display:flex;
99
+ gap:var(--t-spacing-half);
100
+ align-items:center;
46
101
  }
47
102
 
48
- .tds-checkbox input[type="checkbox"]{
103
+ .tds-sidenav-section [slot="section-actions"]{
104
+ display:flex;
105
+ gap:12px;
106
+ align-items:center;
107
+ min-height:42px;
108
+ padding:var(--t-spacing-1) 0;
109
+ }
110
+
111
+ .tds-sidenav-section-list,
112
+ .tds-sidenav-item{
113
+ width:100%;
114
+ padding:0;
115
+ margin:0;
116
+ }
117
+
118
+ .tds-sidenav-item :is(a,button){
49
119
  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;
120
+ display:flex;
121
+ gap:12px;
122
+ align-items:center;
123
+ width:100%;
124
+ padding:12px;
125
+ overflow:hidden;
126
+ font-size:var(--t-font-size-sm);
127
+ line-height:18px;
128
+ color:var(--t-text-color-headline);
129
+ white-space:nowrap;
130
+ text-decoration:none;
55
131
  -webkit-appearance:none;
56
132
  -moz-appearance:none;
57
133
  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);
134
+ cursor:pointer;
135
+ background-color:var(--tds-sidenav-item-background, transparent);
136
+ border:0;
137
+ border-radius:var(--t-border-radius);
138
+ transition:var(--tds-sidenav-item-transition);
65
139
  }
66
140
 
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%);
141
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
+ display:block;
143
+ flex:1;
144
+ overflow:hidden;
145
+ text-overflow:ellipsis;
146
+ text-align:left;
147
+ white-space:nowrap;
85
148
  }
86
149
 
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);
150
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
+ color:var(--t-text-color-headline);
153
+ text-decoration:none;
90
154
  }
91
155
 
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
- outline:var(--t-focus-ring-outline);
94
- outline-offset:var(--t-focus-ring-offset);
156
+ :is(.tds-sidenav-item :is(a,button)):active{
157
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
95
158
  }
96
159
 
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
160
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
+ overflow:hidden;
162
+ color:var(--tds-sidenav-item-icon-color);
99
163
  }
100
164
 
101
- @media (prefers-reduced-motion: reduce){
165
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
+ display:block;
167
+ width:var(--tds-sidenav-item-icon-size);
168
+ height:var(--tds-sidenav-item-icon-size);
169
+ }
102
170
 
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
- }
171
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
+ --tds-sidenav-indent:19px;
106
173
  }
107
174
 
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
- }
114
-
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);
175
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
+ visibility:visible;
177
+ block-size:auto;
178
+ opacity:1;
118
179
  }
119
180
 
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
- }
181
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
123
184
 
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
185
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
+ font-weight:var(--t-font-weight-semibold);
126
187
  }
127
188
 
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;
189
+ .tds-sidenav-item:has(.tds-sidenav-section){
190
+ display:flex;
191
+ flex-direction:column;
192
+ gap:var(--t-spacing-half);
132
193
  }
133
194
 
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
- }
195
+ .tds-sidenav-item .tds-sidenav-section-list{
196
+ --tds-sidenav-item-depth:1;
197
+ gap:0;
198
+ }
138
199
 
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);
200
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
+ visibility:hidden;
202
+ block-size:0;
203
+ overflow-y:clip;
204
+ opacity:0;
205
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
142
206
  }
143
207
 
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:"*";
208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
+ --tds-sidenav-item-depth:2;
153
210
  }
154
211
 
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
- }
163
-
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);
212
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
+ min-height:var(--t-element-size-2xl);
214
+ padding-block:9px;
215
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
+ line-height:1;
217
+ background-color:transparent;
166
218
  }
167
219
 
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
- }
220
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
+ position:absolute;
222
+ top:0;
223
+ bottom:0;
224
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
+ width:2px;
226
+ content:"";
227
+ background-color:var(--tds-sidenav-item-nested-border-color);
228
+ transition:var(--tds-sidenav-item-transition);
229
+ }
187
230
 
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
- }
231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
232
+ position:absolute;
233
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
+ z-index:-1;
235
+ height:100%;
236
+ content:"";
237
+ background-color:var(--tds-sidenav-item-nested-background);
238
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
+ transition:var(--tds-sidenav-item-transition);
240
+ }
195
241
 
196
- .tds-combo-box{
197
- --tds-combo-box-button-offset:4px;
198
- }
242
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
+ display:block;
244
+ text-align:left;
245
+ white-space:normal;
246
+ }
199
247
 
200
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
201
- transform:rotate(.5turn);
202
- }
248
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
251
+ }
203
252
 
204
- .tds-combo-box--lg{
205
- --tds-combo-box-button-offset:5px;
206
- }
253
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
255
+ }
207
256
 
208
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
209
- display:none;
210
- }
257
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
+ font-weight:var(--t-font-weight-medium);
260
+ }
211
261
 
212
- .tds-combo-box-input{
262
+ .tds-sidenav-responsive-header{
213
263
  display:flex;
214
- flex:1;
264
+ gap:var(--t-spacing-2);
215
265
  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;
266
+ width:100%;
224
267
  }
225
268
 
226
- .tds-combo-box-input:has( + .tds-combo-box-button){
227
- padding-inline-end:0;
269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
+ order:0;
228
271
  }
229
272
 
230
- .tds-combo-box-input::-moz-placeholder{
231
- color:var(--tds-field-placeholder-color);
232
- -moz-user-select:none;
233
- user-select:none;
273
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
+ flex:1;
275
+ order:1;
276
+ margin:0;
277
+ font-size:var(--t-font-size-lg);
278
+ font-weight:var(--t-font-weight-medium);
279
+ color:var(--t-text-color-headline);
234
280
  }
235
281
 
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;
282
+ @media (max-width: 719px){
283
+ .tds-sidenav-collapse{
284
+ z-index:10001;
285
+ display:none;
286
+ max-width:min(448px, calc(100vw - 48px));
287
+ padding:0;
288
+ margin:12px 0;
289
+ position-area:bottom span-right;
290
+ overflow:hidden;
291
+ outline:0;
292
+ background:var(--t-surface-color-card);
293
+ border:0;
294
+ border-radius:6px;
295
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
+ opacity:var(--tds-sidenav-collapse-open-opacity);
297
+ transform:var(--tds-sidenav-collapse-open-transform);
298
+ transition:var(--tds-sidenav-collapse-transition-enter);
299
+ will-change:transform;
241
300
  }
242
301
 
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
- }
251
-
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);
302
+ .tds-sidenav-scroll-container{
303
+ --webkit-overflow-scrolling:touch;
304
+ display:block;
305
+ width:100%;
306
+ height:-moz-fit-content;
307
+ height:fit-content;
308
+ padding:var(--t-spacing-2);
309
+ overflow-y:auto;
256
310
  }
257
311
 
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
- }
277
-
278
- .tds-combo-box-popover[data-entering]{
279
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
280
314
  }
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
318
+ }
281
319
 
282
- .tds-combo-box-popover[data-exiting]{
283
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
284
- }
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
285
324
 
286
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
287
- will-change:opacity, transform;
325
+ @starting-style{
326
+ .tds-sidenav-collapse:popover-open{
327
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
328
+ transform:var(--tds-sidenav-collapse-closed-transform);
329
+ }
330
+ }
288
331
  }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
335
+ }
289
336
 
290
- @keyframes tds-combo-box-popover{
291
- from{
292
- opacity:0;
293
- transform:translateY(-8px);
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
294
341
  }
295
342
  }
296
343
 
297
- @media (prefers-reduced-motion: reduce){
298
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
299
- animation:none;
300
- }
301
-
302
- .tds-combo-box-button > svg{
303
- transition:none;
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
304
347
  }
305
348
  }
306
349
 
307
- .tds-combo-box-list{
308
- padding:0;
309
- margin:0;
310
- }
311
-
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);
323
- }
324
-
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);
327
- }
328
-
329
- .tds-combo-box-list-item[data-selected]{
330
- background:var(--t-fill-color-button-interaction-ghost-active);
331
- }
332
-
333
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
334
- background:var(--t-fill-color-neutral-060);
335
- }
336
-
337
- .tds-combo-box-list-item[data-disabled]{
338
- color:var(--t-form-color-disabled);
339
- cursor:not-allowed;
340
- }
341
-
342
- .tds-combo-box-list-item[data-disabled][data-hovered]{
343
- background:transparent;
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
344
352
  }
345
353
 
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);
353
- }
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
354
357
 
355
- .tds-combo-box-load-more{
356
- position:relative;
357
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
358
- }
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
361
+ }
359
362
 
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;
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
366
+ }
364
367
  }
365
368
 
366
- .tds-combo-box-list-section:not(:first-child){
367
- margin-block-start:var(--t-spacing-half);
368
- }
369
+ @layer t-component{
370
+ .tds-page-header{
371
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
+ --tds-page-header-color:var(--t-text-color);
374
+ --tds-page-header-bottom-border-color:transparent;
375
+ --tds-page-header-headline-color:var(--t-text-color-headline);
376
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
+ --tds-page-header-padding-x:var(--t-spacing-2);
378
+ --tds-page-header-padding-y:var(--t-spacing-2);
379
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
+ --tds-page-header-nav-gap:var(--t-spacing-1);
381
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
382
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
+ --tds-page-header-nav-item-border-width:1px;
369
387
 
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);
376
- }
388
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
377
390
 
378
- .tds-checkbox-group{
379
- --tds-checkbox-group-font-size:var(--t-font-size-md);
380
- --tds-checkbox-group-line-height:1.4;
381
- --tds-checkbox-group-gap:var(--t-spacing-1);
391
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
382
394
 
383
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
384
- --tds-checkbox-group-description-line-height:1.35;
385
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
386
- --tds-checkbox-group-description-invalid-icon-display:none;
387
- display:flex;
388
- flex-direction:column;
389
- gap:0;
390
- padding:0;
391
- margin:0;
395
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
392
397
 
393
- font-size:var(--tds-checkbox-group-font-size);
394
- line-height:var(--tds-checkbox-group-line-height);
395
- border:0;
396
- }
398
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
397
401
 
398
- .tds-checkbox-group legend{
399
- float:left;
400
- padding:0;
401
- margin:0;
402
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
402
407
  }
403
408
 
404
- .tds-checkbox-group[aria-invalid="true"]{
405
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
406
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
407
411
  }
408
412
 
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
+ @supports (color: light-dark(#fff, #000)){
414
+ .tds-page-header{
415
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
413
417
  }
418
+ }
414
419
 
415
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
416
- content:none;
420
+ @media (min-width: 600px){
421
+ .tds-page-header{
422
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
423
+ --tds-page-header-color:var(--t-text-color-secondary);
424
+ --tds-page-header-bottom-border-color:var(--t-border-color);
425
+ --tds-page-header-padding-x:var(--t-spacing-3);
426
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
+ --tds-page-header-nav-gap:var(--t-spacing-half);
428
+ --tds-page-header-nav-background:transparent;
429
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
+ --tds-page-header-nav-item-border-width:1px;
431
+ --tds-page-header-nav-item-color:var(--t-text-color);
432
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
434
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
435
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
436
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
437
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
417
438
  }
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
439
  }
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
440
  }
465
441
 
466
- .tds-number-stepper-input{
442
+ .tds-page-header{
467
443
  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;
444
+ flex-direction:column;
445
+ padding-top:var(--tds-page-header-padding-y);
446
+ color:var(--tds-page-header-color);
447
+ background:var(--tds-page-header-background-color);
448
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
479
449
  }
480
450
 
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;
451
+ .tds-page-header:not(.has-nav){
452
+ padding-bottom:var(--tds-page-header-padding-y);
485
453
  }
486
454
 
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
- }
455
+ .tds-page-header.inactive{
456
+ background:var(--tds-page-header-background-color-inactive);
457
+ }
494
458
 
495
- .tds-number-stepper-button + .tds-number-stepper-button{
496
- margin-inline-start:var(--tds-number-stepper-button-gap);
459
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
460
+ width:100%;
497
461
  }
498
462
 
499
- .tds-number-stepper-button:last-of-type{
500
- margin-inline-end:var(--tds-number-stepper-button-offset);
463
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
464
+ display:flex;
465
+ flex-flow:row wrap;
466
+ gap:var(--t-spacing-half) var(--t-spacing-1);
467
+ align-items:flex-start;
468
+ justify-content:flex-start;
469
+ min-width:0;
501
470
  }
502
471
 
503
- .tds-date-picker{
504
- --tds-date-picker-button-offset:4px;
505
- }
472
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
473
+ display:flex;
474
+ gap:var(--tds-page-header-nav-gap);
475
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
476
+ margin:0 0 -1px;
477
+ overflow:auto;
478
+ list-style:none;
479
+ background:var(--tds-page-header-nav-background);
480
+ }
506
481
 
507
- .tds-date-picker--lg{
508
- --tds-date-picker-button-offset:5px;
509
- }
482
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
483
+ position:relative;
484
+ display:inline-flex;
485
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
486
+ font-size:var(--t-font-size-sm);
487
+ line-height:22px;
488
+ color:var(--tds-page-header-nav-item-color);
489
+ white-space:nowrap;
490
+ text-decoration:none;
491
+ -webkit-appearance:none;
492
+ -moz-appearance:none;
493
+ appearance:none;
494
+ cursor:pointer;
495
+ outline-offset:-2px;
496
+ background-color:var(--tds-page-header-nav-item-background-color);
497
+ background-clip:padding-box;
498
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
499
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
500
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
501
+ }
510
502
 
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
- }
503
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
504
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
505
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
506
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
507
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
508
+ }
516
509
 
517
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
518
- display:none;
519
- }
510
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
511
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
512
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
513
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
514
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
515
+ }
520
516
 
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
- }
517
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
518
+ background-color:var(--tds-page-header-nav-item-background-color-active);
519
+ border-color:var(--tds-page-header-nav-item-border-color-active);
520
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
521
+ }
530
522
 
531
- .tds-date-picker-input:has( + .tds-date-picker-button){
532
- padding-inline-end:0;
533
- }
523
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
524
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
525
+ color:var(--tds-page-header-nav-item-color-disabled);
526
+ cursor:not-allowed;
527
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
528
+ opacity:1;
529
+ }
534
530
 
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
- }
531
+ @media (min-width: 600px){
532
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
533
+ position:absolute;
534
+ inset:auto -1px -1px;
535
+ height:1px;
536
+ pointer-events:none;
537
+ content:"";
538
+ background-color:var(--tds-page-header-bottom-border-color);
539
+ }
540
+ }
543
541
 
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;
542
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
543
+ position:relative;
544
+ }
552
545
 
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);
546
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
547
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
548
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
549
+ }
550
+
551
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
552
+ position:absolute;
553
+ top:-5px;
554
+ right:-2px;
555
+ width:10px;
556
+ height:10px;
557
+ content:"";
558
+ background:var(--tds-page-header-nav-item-indicator-color);
559
+ border-radius:50%;
560
+ }
561
+
562
+ @media (prefers-reduced-motion: no-preference){
563
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
564
+ animation:indicator-pulse 1.25s ease infinite;
565
+ }
566
+ }
567
+
568
+ .tds-page-header__title-bar{
569
+ display:flex;
570
+ flex-direction:column;
571
+ gap:var(--t-spacing-2) var(--t-spacing-1);
572
+ align-items:flex-start;
573
+ justify-content:space-between;
574
+ padding:0 var(--tds-page-header-padding-x);
559
575
  }
560
576
 
561
- .tds-date-picker-popover[data-entering]{
562
- animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
577
+ .tds-page-header--profile > .tds-page-header__title-bar{
578
+ align-items:center;
563
579
  }
564
580
 
565
- .tds-date-picker-popover[data-exiting]{
566
- animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
581
+ .tds-page-header__primary{
582
+ width:100%;
583
+ }
584
+
585
+ .tds-page-header__primary h1{
586
+ margin:0;
587
+ font-size:var(--tds-page-header-headline-font-size);
588
+ font-weight:var(--t-font-weight-normal);
589
+ line-height:32px;
590
+ color:var(--tds-page-header-headline-color);
591
+ overflow-wrap:break-word;
567
592
  }
568
593
 
569
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
570
- will-change:opacity, transform;
594
+ @media (min-width: 960px){
595
+ .tds-page-header__primary{
596
+ flex:1 1 max-content;
597
+ width:auto;
598
+ min-width:0;
599
+ max-width:100%;
571
600
  }
572
601
 
573
- @keyframes tds-date-picker-popover{
574
- from{
575
- opacity:0;
576
- transform:translateY(-8px);
602
+ .tds-page-header__title-bar,
603
+ .tds-page-header--profile .tds-page-header__title-bar{
604
+ flex-flow:row nowrap;
605
+ row-gap:12px;
606
+ align-items:flex-start;
577
607
  }
578
- }
608
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
609
+ width:auto;
610
+ }
579
611
 
580
- @media (prefers-reduced-motion: reduce){
581
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
582
- animation:none;
612
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
613
+ justify-content:flex-end;
583
614
  }
584
615
  }
585
616
 
586
- .tds-date-picker-overlay{
587
- position:absolute;
588
- inset:0;
589
- z-index:1;
590
- display:flex;
591
- background-color:var(--tds-date-picker-popover-background-color);
617
+ .tds-page-header-phone,
618
+ .tds-page-header-email{
619
+ color:var(--tds-page-header-color);
620
+ white-space:nowrap;
592
621
  }
593
622
 
594
- .tds-date-picker-overlay-list{
595
- display:grid;
596
- flex:1;
597
- grid-template-columns:repeat(3, 1fr);
598
- 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;
623
+ .tds-page-header-email{
624
+ max-width:100%;
625
+ overflow:hidden;
626
+ text-overflow:ellipsis;
603
627
  }
604
628
 
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);
608
- }
629
+ @keyframes indicator-pulse{
630
+ 0%{
631
+ opacity:.3;
632
+ transform:scale(.9);
633
+ }
609
634
 
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));
635
+ 100%{
636
+ opacity:0;
637
+ transform:scale(1.75);
638
+ }
615
639
  }
616
640
 
617
- .tds-date-picker-overlay-cell{
641
+ .tds-checkbox-group{
642
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
643
+ --tds-checkbox-group-line-height:1.4;
644
+ --tds-checkbox-group-gap:var(--t-spacing-1);
645
+
646
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
647
+ --tds-checkbox-group-description-line-height:1.35;
648
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
649
+ --tds-checkbox-group-description-invalid-icon-display:none;
618
650
  display:flex;
619
- align-items:center;
620
- justify-content:center;
621
- font-family:inherit;
622
- font-size:var(--tds-date-picker-popover-font-size);
623
- color:var(--t-text-color);
624
- cursor:pointer;
625
- outline:0;
626
- background-color:transparent;
651
+ flex-direction:column;
652
+ gap:0;
653
+ padding:0;
654
+ margin:0;
655
+
656
+ font-size:var(--tds-checkbox-group-font-size);
657
+ line-height:var(--tds-checkbox-group-line-height);
627
658
  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
659
  }
633
660
 
634
- .tds-date-picker-overlay-cell[data-hovered]{
635
- background-color:var(--t-fill-color-button-neutral-outline-hover);
636
- }
637
-
638
- .tds-date-picker-overlay-cell[data-pressed]{
639
- background-color:var(--t-fill-color-button-neutral-outline-active);
661
+ .tds-checkbox-group legend{
662
+ float:left;
663
+ padding:0;
664
+ margin:0;
640
665
  }
641
666
 
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);
667
+ .tds-checkbox-group[aria-invalid="true"]{
668
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
669
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
646
670
  }
647
671
 
648
- .tds-date-picker-overlay-cell[data-focus-visible]{
649
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
650
- }
672
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
673
+ margin-left:.25ch;
674
+ color:var(--t-text-color-status-error);
675
+ content:"*";
676
+ }
651
677
 
652
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
653
- outline-offset:var(--t-focus-ring-offset);
654
- }
678
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
679
+ content:none;
680
+ }
655
681
 
656
- .tds-date-picker-calendar-heading{
682
+ .tds-checkbox-group-fields{
657
683
  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;
684
+ flex-direction:column;
685
+ gap:var(--tds-checkbox-group-gap);
686
+ align-items:flex-start;
687
+ margin-top:var(--t-spacing-1);
663
688
  }
664
689
 
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;
675
- 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);
690
+ .tds-checkbox-group-description{
691
+ display:flex;
692
+ gap:var(--t-spacing-half);
693
+ align-items:flex-start;
694
+ margin:var(--t-spacing-fourth) 0 0;
695
+ font-size:var(--tds-checkbox-group-description-font-size);
696
+ line-height:var(--tds-checkbox-group-description-line-height);
697
+ color:var(--tds-checkbox-group-description-color);
698
+ cursor:text;
683
699
  }
684
700
 
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;
701
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
702
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
703
+ flex-shrink:0;
704
+ margin-top:calc(.5lh - .5em);
705
+ line-height:var(--tds-checkbox-group-description-line-height);
693
706
  }
694
707
 
695
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
696
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
697
- }
708
+ .tds-checkbox-group--sm{
709
+ --tds-checkbox-group-line-height:1.35;
710
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
711
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
712
+ --tds-checkbox-group-description-line-height:1.3;
713
+ }
698
714
 
699
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
700
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
701
- }
715
+ .tds-checkbox{
716
+ --tds-checkbox-font-size:var(--t-font-size-md);
717
+ --tds-checkbox-cursor:pointer;
718
+ --tds-checkbox-line-height:1.4;
719
+ --tds-checkbox-transition-property:background-color, border-color;
702
720
 
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);
706
- }
721
+ --tds-checkbox-input-size:var(--t-element-size-md);
722
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
723
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
724
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
707
725
 
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
- }
726
+ --tds-checkbox-input-icon:none;
727
+ --tds-checkbox-input-icon-visibility:hidden;
728
+ --tds-checkbox-input-icon-opacity:0;
729
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
713
730
 
714
- .tds-date-picker-calendar-body{
715
- position:relative;
716
- padding:var(--tds-date-picker-popover-padding);
717
- padding-block-start:0;
718
- }
731
+ --tds-checkbox-label-color:var(--t-form-color);
719
732
 
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);
725
- }
733
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
734
+ --tds-checkbox-description-line-height:1.35;
735
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
736
+ --tds-checkbox-description-invalid-icon-display:none;
726
737
 
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);
738
+ position:relative;
739
+ display:inline-grid;
740
+ grid-template-columns:auto;
741
+ grid-auto-columns:1fr;
742
+ gap:var(--t-spacing-fourth) 0;
743
+ line-height:var(--tds-checkbox-line-height);
744
+ -webkit-user-select:none;
745
+ -moz-user-select:none;
746
+ user-select:none;
731
747
  }
732
748
 
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;
739
- 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);
748
- }
749
+ .tds-checkbox label{
750
+ grid-area:1 / 2;
751
+ padding-inline-start:var(--t-spacing-1);
752
+ font-size:var(--tds-checkbox-font-size);
753
+ font-weight:var(--t-font-weight-normal);
754
+ color:var(--tds-checkbox-label-color);
755
+ cursor:var(--tds-checkbox-cursor);
756
+ }
749
757
 
750
- .tds-date-picker-calendar-nav[data-hovered]{
751
- background-color:var(--t-fill-color-button-neutral-outline-hover);
758
+ .tds-checkbox tds-indeterminate{
759
+ display:flex;
752
760
  }
753
761
 
754
- .tds-date-picker-calendar-nav[data-pressed]{
755
- background-color:var(--t-fill-color-button-neutral-outline-active);
762
+ .tds-checkbox input[type="checkbox"]{
763
+ position:relative;
764
+ width:1em;
765
+ height:1em;
766
+ margin:calc((1lh - 1em) / 2) 0 0;
767
+ font-size:var(--tds-checkbox-font-size);
768
+ line-height:inherit;
769
+ -webkit-appearance:none;
770
+ -moz-appearance:none;
771
+ appearance:none;
772
+ cursor:var(--tds-checkbox-cursor);
773
+ background-color:var(--tds-checkbox-input-background-color);
774
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
775
+ border-radius:var(--tds-checkbox-input-border-radius);
776
+ transition-timing-function:var(--t-ease-in-out);
777
+ transition-duration:var(--t-duration-200);
778
+ transition-property:var(--tds-checkbox-transition-property);
756
779
  }
757
780
 
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);
781
+ :is(.tds-checkbox input[type="checkbox"])::before{
782
+ position:absolute;
783
+ top:50%;
784
+ left:50%;
785
+ visibility:var(--tds-checkbox-input-icon-visibility);
786
+ width:100%;
787
+ height:100%;
788
+ content:"";
789
+ background-color:var(--tds-checkbox-input-icon-fill);
790
+ border-radius:var(--tds-checkbox-input-border-radius);
791
+ opacity:var(--tds-checkbox-input-icon-opacity);
792
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
793
+ mask-image:var(--tds-checkbox-input-icon);
794
+ -webkit-mask-repeat:no-repeat;
795
+ mask-repeat:no-repeat;
796
+ -webkit-mask-size:contain;
797
+ mask-size:contain;
798
+ transform:translate(-50%, -50%);
799
+ }
800
+
801
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
802
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
803
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
804
+ }
805
+
806
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
807
+ outline:var(--t-focus-ring-outline);
808
+ outline-offset:var(--t-focus-ring-offset);
809
+ }
810
+
811
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
812
+ pointer-events:none;
813
+ }
814
+
815
+ @media (prefers-reduced-motion: reduce){
816
+
817
+ .tds-checkbox input[type="checkbox"]{
818
+ --tds-checkbox-transition-property:none;
761
819
  }
820
+ }
762
821
 
763
- .tds-date-picker-calendar-nav[data-disabled]{
764
- color:var(--t-text-color-disabled);
765
- cursor:not-allowed;
822
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
823
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
824
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
825
+ --tds-checkbox-input-icon-visibility:visible;
826
+ --tds-checkbox-input-icon-opacity:1;
766
827
  }
767
828
 
768
- .tds-date-picker-calendar-grid{
769
- font-feature-settings:"ss01", "ss02";
770
- border-collapse:collapse;
771
- }
829
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
830
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
831
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
832
+ }
772
833
 
773
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
774
- padding:0;
775
- border:0;
834
+ .tds-checkbox:has(input:checked){
835
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
776
836
  }
777
837
 
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);
782
- 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
- }
788
-
789
- .tds-date-picker-calendar-cell-button{
790
- 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;
798
- -webkit-user-select:none;
799
- -moz-user-select:none;
800
- user-select:none;
801
- outline:0;
802
- }
838
+ .tds-checkbox:has(input:indeterminate){
839
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
840
+ }
803
841
 
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%;
842
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
843
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
844
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
845
+ --tds-checkbox-description-invalid-icon-display:inline-block;
811
846
  }
812
847
 
813
- .tds-date-picker-calendar-cell-button[data-today]::before{
814
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
848
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
849
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
850
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
815
851
  }
816
852
 
817
- .tds-date-picker-calendar-cell-button[data-outside-month]{
818
- display:none;
819
- }
853
+ :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{
854
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
855
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
856
+ }
820
857
 
821
- .tds-date-picker-calendar-cell-button[data-hovered]{
822
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
823
- }
858
+ :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){
859
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
860
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
861
+ }
824
862
 
825
- .tds-date-picker-calendar-cell-button[data-pressed]{
826
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
827
- }
863
+ .tds-checkbox:has(input:required) label::after{
864
+ margin-left:.25ch;
865
+ color:var(--t-text-color-status-error);
866
+ content:"*";
867
+ }
828
868
 
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;
834
- }
869
+ .tds-checkbox:has(input:disabled){
870
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
871
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
835
872
 
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;
873
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
874
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
875
+ --tds-checkbox-cursor:not-allowed;
840
876
  }
841
877
 
842
- .tds-date-picker-calendar-cell-button[data-disabled]{
843
- color:var(--t-text-color-disabled);
844
- }
878
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
879
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
880
+ }
845
881
 
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;
849
- }
882
+ .tds-checkbox-description{
883
+ display:flex;
884
+ grid-area:2 / 2;
885
+ gap:var(--t-spacing-half);
886
+ align-items:flex-start;
887
+ padding-inline-start:var(--t-spacing-1);
888
+ margin:0;
889
+ font-size:var(--tds-checkbox-description-font-size);
890
+ line-height:var(--tds-checkbox-description-line-height);
891
+ color:var(--tds-checkbox-description-color);
892
+ cursor:text;
893
+ }
850
894
 
851
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
852
- outline-offset:var(--t-focus-ring-offset);
895
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
896
+ display:var(--tds-checkbox-description-invalid-icon-display);
897
+ flex-shrink:0;
898
+ margin-top:calc(.5lh - .5em);
899
+ line-height:var(--tds-checkbox-description-line-height);
853
900
  }
854
901
 
855
- .tds-date-picker-popover--lg{
856
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
902
+ .tds-checkbox--sm{
903
+ --tds-checkbox-line-height:1.35;
904
+ --tds-checkbox-input-size:var(--t-element-size-sm);
905
+ --tds-checkbox-font-size:var(--t-font-size-sm);
906
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
907
+ --tds-checkbox-description-line-height:1.3;
857
908
  }
858
909
 
910
+ .tds-combo-box{
911
+ --tds-combo-box-button-offset:4px;
912
+ }
859
913
 
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
- }
914
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
915
+ transform:rotate(.5turn);
916
+ }
864
917
 
865
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
866
- inline-size:1em;
867
- block-size:2em;
868
- }
918
+ .tds-combo-box--lg{
919
+ --tds-combo-box-button-offset:5px;
920
+ }
869
921
 
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);
875
- }
922
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
923
+ display:none;
924
+ }
876
925
 
877
- .tds-input--auto-width input{
878
- field-sizing:content;
879
- inline-size:auto;
880
- }
926
+ .tds-combo-box-input{
927
+ display:flex;
928
+ flex:1;
929
+ align-items:center;
930
+ padding-block:var(--tds-field-padding-block);
931
+ padding-inline:var(--tds-field-padding-inline);
932
+ font-family:inherit;
933
+ font-size:inherit;
934
+ color:inherit;
935
+ outline:0;
936
+ background:transparent;
937
+ border:0;
881
938
  }
882
939
 
883
- @layer t-critical{
884
- tds-page-header:not(.hydrated){
885
- display:none;
940
+ .tds-combo-box-input:has( + .tds-combo-box-button){
941
+ padding-inline-end:0;
886
942
  }
887
- }
888
943
 
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;
944
+ .tds-combo-box-input::-moz-placeholder{
945
+ color:var(--tds-field-placeholder-color);
946
+ -moz-user-select:none;
947
+ user-select:none;
948
+ }
907
949
 
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);
950
+ .tds-combo-box-input::placeholder{
951
+ color:var(--tds-field-placeholder-color);
952
+ -webkit-user-select:none;
953
+ -moz-user-select:none;
954
+ user-select:none;
955
+ }
910
956
 
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);
957
+ .tds-combo-box-button{
958
+ flex-shrink:0;
959
+ align-self:center;
960
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
961
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
962
+ padding:0;
963
+ margin-inline-end:var(--tds-combo-box-button-offset);
964
+ }
914
965
 
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);
966
+ .tds-combo-box-button > svg{
967
+ inline-size:var(--tds-field-font-size);
968
+ block-size:var(--tds-field-font-size);
969
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
970
+ }
917
971
 
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);
972
+ .tds-combo-box-popover{
973
+ width:var(--trigger-width);
974
+ max-block-size:inherit;
975
+ padding:var(--t-spacing-1);
976
+ overflow:auto;
977
+ scroll-behavior:smooth;
978
+ overscroll-behavior:none;
979
+ -webkit-user-select:none;
980
+ -moz-user-select:none;
981
+ user-select:none;
982
+ outline:0;
983
+ scrollbar-color:#0004 var(--t-surface-color-card);
984
+ scrollbar-width:thin;
985
+ background:var(--t-surface-color-card);
986
+ background-clip:padding-box;
987
+ border:1px solid var(--t-border-color);
988
+ border-radius:var(--t-border-radius);
989
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
990
+ }
921
991
 
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);
992
+ .tds-combo-box-popover[data-entering]{
993
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
927
994
  }
928
995
 
929
- .tds-page-header--profile{
930
- --tds-page-header-padding-y:20px;
996
+ .tds-combo-box-popover[data-exiting]{
997
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
931
998
  }
932
999
 
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
- }
1000
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1001
+ will-change:opacity, transform;
938
1002
  }
939
1003
 
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);
1004
+ @keyframes tds-combo-box-popover{
1005
+ from{
1006
+ opacity:0;
1007
+ transform:translateY(-8px);
1008
+ }
1009
+ }
1010
+
1011
+ @media (prefers-reduced-motion: reduce){
1012
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1013
+ animation:none;
958
1014
  }
1015
+
1016
+ .tds-combo-box-button > svg{
1017
+ transition:none;
959
1018
  }
960
1019
  }
961
1020
 
962
- .tds-page-header{
963
- 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);
1021
+ .tds-combo-box-list{
1022
+ padding:0;
1023
+ margin:0;
969
1024
  }
970
1025
 
971
- .tds-page-header:not(.has-nav){
972
- padding-bottom:var(--tds-page-header-padding-y);
1026
+ .tds-combo-box-list-item{
1027
+ display:block;
1028
+ padding-block:var(--t-spacing-1);
1029
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1030
+ overflow:hidden;
1031
+ text-overflow:ellipsis;
1032
+ font-size:1rem;
1033
+ color:var(--t-text-color);
1034
+ white-space:nowrap;
1035
+ cursor:default;
1036
+ border-radius:var(--t-border-radius);
1037
+ }
1038
+
1039
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1040
+ background:var(--t-fill-color-neutral-070);
973
1041
  }
974
1042
 
975
- .tds-page-header.inactive{
976
- background:var(--tds-page-header-background-color-inactive);
1043
+ .tds-combo-box-list-item[data-selected]{
1044
+ background:var(--t-fill-color-button-interaction-ghost-active);
977
1045
  }
978
1046
 
979
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
980
- width:100%;
1047
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1048
+ background:var(--t-fill-color-neutral-060);
981
1049
  }
982
1050
 
983
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
984
- 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;
1051
+ .tds-combo-box-list-item[data-disabled]{
1052
+ color:var(--t-form-color-disabled);
1053
+ cursor:not-allowed;
990
1054
  }
991
1055
 
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);
1056
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
1057
+ background:transparent;
1000
1058
  }
1001
1059
 
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;
1021
- }
1060
+ .tds-combo-box-empty-state{
1061
+ position:relative;
1062
+ min-block-size:var(--t-spacing-3);
1063
+ padding-block:var(--t-spacing-1);
1064
+ padding-inline:var(--t-spacing-2);
1065
+ font-size:var(--t-font-size-md);
1066
+ color:var(--t-text-color-secondary);
1067
+ }
1022
1068
 
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
- }
1069
+ .tds-combo-box-load-more{
1070
+ position:relative;
1071
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1072
+ }
1029
1073
 
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
- }
1074
+ .tds-combo-box-empty-state,
1075
+ .tds-combo-box-load-more{
1076
+ --tds-loading-spinner-visibility:visible;
1077
+ --tds-loading-spinner-animation-play-state:running;
1078
+ }
1036
1079
 
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
- }
1080
+ .tds-combo-box-list-section:not(:first-child){
1081
+ margin-block-start:var(--t-spacing-half);
1082
+ }
1042
1083
 
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
- }
1084
+ .tds-combo-box-section-header{
1085
+ padding-block:var(--t-spacing-1);
1086
+ padding-inline:var(--t-spacing-1);
1087
+ font-size:var(--t-font-size-sm);
1088
+ font-weight:var(--t-font-weight-semibold);
1089
+ color:var(--t-text-color-secondary);
1090
+ }
1050
1091
 
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
- }
1061
1092
 
1062
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1063
- position:relative;
1093
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1094
+ -webkit-appearance:none;
1095
+ appearance:none;
1064
1096
  }
1065
1097
 
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
- }
1098
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1099
+ inline-size:1em;
1100
+ block-size:2em;
1101
+ }
1070
1102
 
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{
1072
- position:absolute;
1073
- top:-5px;
1074
- right:-2px;
1075
- width:10px;
1076
- height:10px;
1077
- content:"";
1078
- background:var(--tds-page-header-nav-item-indicator-color);
1079
- border-radius:50%;
1080
- }
1103
+ @supports (field-sizing: content){
1104
+ .tds-input--auto-width{
1105
+ inline-size:-moz-fit-content;
1106
+ inline-size:fit-content;
1107
+ min-inline-size:min(100%, 122px);
1108
+ }
1081
1109
 
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
- }
1086
- }
1110
+ .tds-input--auto-width input{
1111
+ field-sizing:content;
1112
+ inline-size:auto;
1113
+ }
1114
+ }
1087
1115
 
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);
1116
+ .tds-date-picker{
1117
+ --tds-date-picker-button-offset:4px;
1095
1118
  }
1096
1119
 
1097
- .tds-page-header--profile > .tds-page-header__title-bar{
1098
- align-items:center;
1099
- }
1120
+ .tds-date-picker--lg{
1121
+ --tds-date-picker-button-offset:5px;
1122
+ }
1100
1123
 
1101
- .tds-page-header__primary{
1102
- width:100%;
1124
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1125
+ outline-color:transparent;
1126
+ outline-offset:0;
1127
+ border-color:var(--tds-field-border-color);
1103
1128
  }
1104
1129
 
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
- }
1130
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1131
+ display:none;
1132
+ }
1113
1133
 
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%;
1134
+ .tds-date-picker-input{
1135
+ flex:1;
1136
+ padding-block:var(--tds-field-padding-block);
1137
+ padding-inline:var(--tds-field-padding-inline);
1138
+ overflow:auto clip;
1139
+ font-variant-numeric:tabular-nums;
1140
+ text-wrap:nowrap;
1141
+ scrollbar-width:none;
1142
+ }
1143
+
1144
+ .tds-date-picker-input:has( + .tds-date-picker-button){
1145
+ padding-inline-end:0;
1120
1146
  }
1121
1147
 
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
- }
1131
-
1132
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1133
- justify-content:flex-end;
1134
- }
1148
+ .tds-date-picker-button{
1149
+ flex-shrink:0;
1150
+ align-self:center;
1151
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1152
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1153
+ padding:0;
1154
+ margin-inline-end:var(--tds-date-picker-button-offset);
1135
1155
  }
1136
1156
 
1137
- .tds-page-header-phone,
1138
- .tds-page-header-email{
1139
- color:var(--tds-page-header-color);
1140
- white-space:nowrap;
1141
- }
1157
+ .tds-date-picker-popover{
1158
+ --tds-date-picker-popover-font-size:var(--t-font-size-md);
1159
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
1160
+ --tds-date-picker-popover-background-color:var(--t-surface-color-card);
1161
+ --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1162
+ --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
1163
+ --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
1164
+ --tds-date-picker-popover-interactive-property:color, background-color, border-color;
1142
1165
 
1143
- .tds-page-header-email{
1144
- max-width:100%;
1166
+ position:relative;
1145
1167
  overflow:hidden;
1146
- text-overflow:ellipsis;
1168
+ background-color:var(--tds-date-picker-popover-background-color);
1169
+ border:var(--t-border-width) solid var(--t-border-color);
1170
+ border-radius:var(--t-border-radius);
1171
+ box-shadow:var(--tds-date-picker-popover-shadow);
1147
1172
  }
1148
1173
 
1149
- @keyframes indicator-pulse{
1150
- 0%{
1151
- opacity:.3;
1152
- transform:scale(.9);
1174
+ .tds-date-picker-popover[data-entering]{
1175
+ animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
1153
1176
  }
1154
1177
 
1155
- 100%{
1178
+ .tds-date-picker-popover[data-exiting]{
1179
+ animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
1180
+ }
1181
+
1182
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1183
+ will-change:opacity, transform;
1184
+ }
1185
+
1186
+ @keyframes tds-date-picker-popover{
1187
+ from{
1156
1188
  opacity:0;
1157
- transform:scale(1.75);
1189
+ transform:translateY(-8px);
1158
1190
  }
1159
1191
  }
1160
1192
 
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");
1193
+ @media (prefers-reduced-motion: reduce){
1194
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1195
+ animation:none;
1196
+ }
1165
1197
  }
1166
1198
 
1167
- @supports (x: attr(x type(*))){
1168
-
1169
- .tds-input textarea{
1170
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1199
+ .tds-date-picker-overlay{
1200
+ position:absolute;
1201
+ inset:0;
1202
+ z-index:1;
1203
+ display:flex;
1204
+ background-color:var(--tds-date-picker-popover-background-color);
1171
1205
  }
1172
- }
1173
-
1174
- .tds-input.tds-textarea--resize-vertical textarea{
1175
- resize:vertical;
1176
- }
1177
1206
 
1178
- .tds-input.tds-textarea--resize-none textarea{
1179
- resize:none;
1180
- }
1207
+ .tds-date-picker-overlay-list{
1208
+ display:grid;
1209
+ flex:1;
1210
+ grid-template-columns:repeat(3, 1fr);
1211
+ gap:var(--t-spacing-half);
1212
+ padding-inline:var(--tds-date-picker-popover-padding);
1213
+ outline:0;
1214
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
1215
+ scrollbar-width:thin;
1216
+ }
1181
1217
 
1182
- .tds-input.tds-textarea--resize-auto textarea{
1183
- resize:vertical;
1184
- }
1218
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
1219
+ grid-template-rows:repeat(4, 1fr);
1220
+ padding-bottom:var(--tds-date-picker-popover-padding);
1221
+ }
1185
1222
 
1186
- @supports (field-sizing: content){
1187
- .tds-input.tds-textarea--resize-auto textarea{
1188
- field-sizing:content;
1189
- resize:none;
1190
- }
1191
- }
1223
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
1224
+ grid-auto-rows:var(--t-container-size-xl);
1225
+ padding-right:var(--t-spacing-1);
1226
+ overflow-y:auto;
1227
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
1228
+ }
1192
1229
 
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;
1230
+ .tds-date-picker-overlay-cell{
1231
+ display:flex;
1232
+ align-items:center;
1233
+ justify-content:center;
1234
+ font-family:inherit;
1235
+ font-size:var(--tds-date-picker-popover-font-size);
1236
+ color:var(--t-text-color);
1237
+ cursor:pointer;
1238
+ outline:0;
1239
+ background-color:transparent;
1240
+ border:0;
1241
+ border-radius:var(--t-border-radius-md);
1242
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1243
+ transition-duration:var(--t-duration-100);
1244
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1208
1245
  }
1209
1246
 
1210
- @media (pointer: fine){
1211
- :is(.tds-input textarea)::-webkit-scrollbar{
1212
- width:12px;
1213
- height:12px;
1214
- cursor:default;
1215
- }
1247
+ .tds-date-picker-overlay-cell[data-hovered]{
1248
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1249
+ }
1216
1250
 
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);
1223
- }
1251
+ .tds-date-picker-overlay-cell[data-pressed]{
1252
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1253
+ }
1224
1254
 
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
- }
1255
+ .tds-date-picker-overlay-cell[data-selected]{
1256
+ font-weight:var(--t-font-weight-semibold);
1257
+ color:var(--t-text-color-inverted);
1258
+ background-color:var(--t-fill-color-interaction);
1259
+ }
1228
1260
 
1229
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1230
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1231
- }
1261
+ .tds-date-picker-overlay-cell[data-focus-visible]{
1262
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1263
+ }
1232
1264
 
1233
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1234
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1235
- }
1265
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
1266
+ outline-offset:var(--t-focus-ring-offset);
1267
+ }
1236
1268
 
1237
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1238
- background:var(--tds-input-scrollbar-surface-color);
1239
- }
1269
+ .tds-date-picker-calendar-heading{
1270
+ display:flex;
1271
+ flex:1;
1272
+ gap:var(--t-spacing-1);
1273
+ align-items:center;
1274
+ justify-content:flex-start;
1275
+ padding-inline-start:4px;
1276
+ }
1240
1277
 
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
- }
1278
+ .tds-date-picker-calendar-overlay-trigger{
1279
+ --_background-color:transparent;
1280
+ position:relative;
1281
+ padding:0;
1282
+ font-family:inherit;
1283
+ font-size:var(--tds-date-picker-popover-font-size);
1284
+ font-weight:var(--t-font-weight-semibold);
1285
+ font-feature-settings:"ss01", "ss02";
1286
+ color:var(--t-text-color);
1287
+ cursor:pointer;
1288
+ outline:0;
1289
+ background-color:transparent;
1290
+ border:0;
1291
+ border-radius:var(--t-border-radius-md);
1292
+ isolation:isolate;
1293
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1294
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1295
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1296
+ }
1246
1297
 
1247
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1248
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1249
- cursor:default;
1250
- }
1298
+ .tds-date-picker-calendar-overlay-trigger::before{
1299
+ position:absolute;
1300
+ inset:calc(var(--t-spacing-half) * -1);
1301
+ z-index:-1;
1302
+ pointer-events:inherit;
1303
+ content:"";
1304
+ background-color:var(--_background-color);
1305
+ border-radius:inherit;
1306
+ }
1251
1307
 
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
- }
1308
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1309
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1310
+ }
1257
1311
 
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
- }
1312
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1313
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1264
1314
  }
1265
1315
 
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;
1316
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1317
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1318
+ outline-offset:var(--t-focus-ring-offset);
1319
+ }
1271
1320
 
1272
- --tds-radio-input-size:var(--t-element-size-md);
1321
+ .tds-date-picker-calendar{
1322
+ inline-size:-moz-fit-content;
1323
+ inline-size:fit-content;
1324
+ font-size:var(--tds-date-picker-popover-font-size);
1325
+ }
1326
+
1327
+ .tds-date-picker-calendar-body{
1328
+ position:relative;
1329
+ padding:var(--tds-date-picker-popover-padding);
1330
+ padding-block-start:0;
1331
+ }
1332
+
1333
+ .tds-date-picker-calendar-header{
1334
+ display:flex;
1335
+ align-items:center;
1336
+ justify-content:space-between;
1337
+ padding:var(--tds-date-picker-popover-padding);
1338
+ }
1339
+
1340
+ .tds-date-picker-calendar-title{
1341
+ padding:var(--t-spacing-half) var(--t-spacing-1);
1342
+ font-size:var(--tds-date-picker-popover-font-size);
1343
+ font-weight:var(--t-font-weight-semibold);
1344
+ }
1345
+
1346
+ .tds-date-picker-calendar-nav{
1347
+ display:flex;
1348
+ align-items:center;
1349
+ justify-content:center;
1350
+ padding:var(--t-spacing-half);
1351
+ font-size:.875em;
1352
+ color:var(--t-text-color);
1353
+ cursor:pointer;
1354
+ outline:0;
1355
+ background-color:transparent;
1356
+ border:0;
1357
+ border-radius:var(--t-border-radius-md);
1358
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1359
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1360
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1361
+ }
1362
+
1363
+ .tds-date-picker-calendar-nav[data-hovered]{
1364
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1365
+ }
1366
+
1367
+ .tds-date-picker-calendar-nav[data-pressed]{
1368
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1369
+ }
1370
+
1371
+ .tds-date-picker-calendar-nav[data-focus-visible]{
1372
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1373
+ outline-offset:var(--t-focus-ring-offset);
1374
+ }
1375
+
1376
+ .tds-date-picker-calendar-nav[data-disabled]{
1377
+ color:var(--t-text-color-disabled);
1378
+ cursor:not-allowed;
1379
+ }
1380
+
1381
+ .tds-date-picker-calendar-grid{
1382
+ font-feature-settings:"ss01", "ss02";
1383
+ border-collapse:collapse;
1384
+ }
1385
+
1386
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1387
+ padding:0;
1388
+ border:0;
1389
+ }
1390
+
1391
+ .tds-date-picker-calendar-header-cell{
1392
+ padding-block-end:var(--t-spacing-1);
1393
+ font-size:.875em;
1394
+ font-weight:var(--t-font-weight-medium);
1395
+ color:var(--t-text-color-secondary);
1396
+ text-align:center;
1397
+ -webkit-user-select:none;
1398
+ -moz-user-select:none;
1399
+ user-select:none;
1400
+ }
1401
+
1402
+ .tds-date-picker-calendar-cell-button{
1403
+ position:relative;
1404
+ display:flex;
1405
+ align-items:center;
1406
+ justify-content:center;
1407
+ inline-size:2.25em;
1408
+ block-size:2.25em;
1409
+ color:var(--t-text-color);
1410
+ cursor:pointer;
1411
+ -webkit-user-select:none;
1412
+ -moz-user-select:none;
1413
+ user-select:none;
1414
+ outline:0;
1415
+ }
1416
+
1417
+ .tds-date-picker-calendar-cell-button::before{
1418
+ position:absolute;
1419
+ inset:0;
1420
+ z-index:-1;
1421
+ content:"";
1422
+ background-color:var(--_background-color);
1423
+ border-radius:50%;
1424
+ }
1425
+
1426
+ .tds-date-picker-calendar-cell-button[data-today]::before{
1427
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1428
+ }
1429
+
1430
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
1431
+ display:none;
1432
+ }
1433
+
1434
+ .tds-date-picker-calendar-cell-button[data-hovered]{
1435
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1436
+ }
1437
+
1438
+ .tds-date-picker-calendar-cell-button[data-pressed]{
1439
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1440
+ }
1441
+
1442
+ .tds-date-picker-calendar-cell-button[data-selected]{
1443
+ --_background-color:var(--t-fill-color-interaction);
1444
+ font-weight:var(--t-font-weight-semibold);
1445
+ color:var(--t-text-color-inverted);
1446
+ border-color:transparent;
1447
+ }
1448
+
1449
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
1450
+ color:var(--t-text-color-disabled);
1451
+ text-decoration:line-through;
1452
+ cursor:not-allowed;
1453
+ }
1454
+
1455
+ .tds-date-picker-calendar-cell-button[data-disabled]{
1456
+ color:var(--t-text-color-disabled);
1457
+ }
1458
+
1459
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
1460
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1461
+ outline-offset:-2px;
1462
+ }
1463
+
1464
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1465
+ outline-offset:var(--t-focus-ring-offset);
1466
+ }
1467
+
1468
+ .tds-date-picker-popover--lg{
1469
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1470
+ }
1471
+
1472
+ .tds-number-stepper{
1473
+ --tds-number-stepper-button-offset:4px;
1474
+ --tds-number-stepper-button-gap:2px;
1475
+ }
1476
+
1477
+ .tds-number-stepper--lg{
1478
+ --tds-number-stepper-button-offset:5px;
1479
+ --tds-number-stepper-button-gap:4px;
1480
+ }
1481
+
1482
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1483
+ display:none;
1484
+ }
1485
+
1486
+ .tds-number-stepper-input{
1487
+ display:flex;
1488
+ flex:1;
1489
+ align-items:center;
1490
+ min-inline-size:0;
1491
+ padding-block:var(--tds-field-padding-block);
1492
+ padding-inline:var(--tds-field-padding-inline);
1493
+ font-family:inherit;
1494
+ font-size:inherit;
1495
+ color:inherit;
1496
+ outline:0;
1497
+ background:transparent;
1498
+ border:0;
1499
+ }
1500
+
1501
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1502
+ margin:0;
1503
+ -webkit-appearance:none;
1504
+ appearance:none;
1505
+ }
1506
+
1507
+ .tds-number-stepper-button{
1508
+ flex-shrink:0;
1509
+ align-self:center;
1510
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1511
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1512
+ padding:0;
1513
+ }
1514
+
1515
+ .tds-number-stepper-button + .tds-number-stepper-button{
1516
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1517
+ }
1518
+
1519
+ .tds-number-stepper-button:last-of-type{
1520
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1521
+ }
1522
+
1523
+ .tds-radio{
1524
+ --tds-radio-font-size:var(--t-font-size-md);
1525
+ --tds-radio-cursor:pointer;
1526
+ --tds-radio-line-height:1.4;
1527
+ --tds-radio-transition-property:border-width;
1528
+
1529
+ --tds-radio-input-size:var(--t-element-size-md);
1273
1530
  --tds-radio-input-border-radius:var(--t-border-radius-round);
1274
1531
  --tds-radio-input-border-color:var(--t-form-border-color);
1275
1532
  --tds-radio-input-border-width:var(--t-form-border-width);
@@ -1396,176 +1653,36 @@
1396
1653
  --tds-radio-description-line-height:1.3;
1397
1654
  }
1398
1655
 
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;
1656
+ .tds-radio-group{
1657
+ --tds-radio-group-font-size:var(--t-font-size-md);
1658
+ --tds-radio-group-line-height:1.4;
1659
+ --tds-radio-group-gap:var(--t-spacing-1);
1404
1660
 
1405
- --tds-toggle-switch-label-color:var(--t-form-color);
1661
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1662
+ --tds-radio-group-description-line-height:1.35;
1663
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1664
+ --tds-radio-group-description-invalid-icon-display:none;
1665
+ display:flex;
1666
+ flex-direction:column;
1667
+ gap:0;
1668
+ padding:0;
1669
+ margin:0;
1406
1670
 
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);
1671
+ font-size:var(--tds-radio-group-font-size);
1672
+ line-height:var(--tds-radio-group-line-height);
1673
+ border:0;
1674
+ }
1412
1675
 
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);
1676
+ .tds-radio-group legend{
1677
+ float:left;
1678
+ padding:0;
1679
+ margin:0;
1680
+ }
1416
1681
 
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;
1421
-
1422
- display:var(--tds-toggle-switch-display);
1423
- grid-template-columns:auto;
1424
- grid-auto-columns:1fr;
1425
- gap:var(--t-spacing-fourth) 0;
1426
- -webkit-user-select:none;
1427
- -moz-user-select:none;
1428
- user-select:none;
1429
- }
1430
-
1431
- .tds-toggle-switch input[type="checkbox"]{
1432
- 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);
1445
- }
1446
-
1447
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1448
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1449
- }
1450
-
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);
1461
- }
1462
-
1463
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1464
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1465
- }
1466
-
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)));
1470
- }
1471
-
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
- }
1475
-
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;
1481
- }
1482
-
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
- }
1492
-
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);
1504
- }
1505
-
1506
- @media (prefers-reduced-motion: reduce){
1507
-
1508
- .tds-toggle-switch-track{
1509
- --tds-toggle-switch-track-transition:none;
1510
- --tds-toggle-switch-thumb-transition:none;
1511
- }
1512
- }
1513
-
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;
1524
- }
1525
-
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;
1533
- }
1534
-
1535
- .tds-toggle-switch--hide-label{
1536
- --tds-toggle-switch-display:inline-flex;
1537
- }
1538
-
1539
- .tds-radio-group{
1540
- --tds-radio-group-font-size:var(--t-font-size-md);
1541
- --tds-radio-group-line-height:1.4;
1542
- --tds-radio-group-gap:var(--t-spacing-1);
1543
-
1544
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1545
- --tds-radio-group-description-line-height:1.35;
1546
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1547
- --tds-radio-group-description-invalid-icon-display:none;
1548
- display:flex;
1549
- flex-direction:column;
1550
- gap:0;
1551
- padding:0;
1552
- margin:0;
1553
-
1554
- font-size:var(--tds-radio-group-font-size);
1555
- line-height:var(--tds-radio-group-line-height);
1556
- border:0;
1557
- }
1558
-
1559
- .tds-radio-group legend{
1560
- 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
- }
1682
+ .tds-radio-group[aria-invalid="true"]{
1683
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1684
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1685
+ }
1569
1686
 
1570
1687
  .tds-radio-group[aria-invalid="true"] .tds-radio{
1571
1688
  --tds-radio-input-border-color:var(--t-form-border-color-error);
@@ -1619,451 +1736,256 @@
1619
1736
  --tds-radio-group-description-line-height:1.3;
1620
1737
  }
1621
1738
 
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;
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");
1627
1743
  }
1628
1744
 
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);
1745
+ @supports (x: attr(x type(*))){
1681
1746
 
1682
- position:relative;
1683
- display:flex;
1684
- flex-direction:column;
1685
- gap:var(--t-spacing-half);
1747
+ .tds-input textarea{
1748
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1686
1749
  }
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;
1693
1750
  }
1694
1751
 
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);
1724
- }
1752
+ .tds-input.tds-textarea--resize-vertical textarea{
1753
+ resize:vertical;
1754
+ }
1725
1755
 
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);
1756
+ .tds-input.tds-textarea--resize-none textarea{
1757
+ resize:none;
1728
1758
  }
1729
1759
 
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);
1760
+ .tds-input.tds-textarea--resize-auto textarea{
1761
+ resize:vertical;
1734
1762
  }
1735
1763
 
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);
1764
+ @supports (field-sizing: content){
1765
+ .tds-input.tds-textarea--resize-auto textarea{
1766
+ field-sizing:content;
1767
+ resize:none;
1768
+ }
1738
1769
  }
1739
1770
 
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
- }
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
+ }
1748
1787
 
1749
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1750
- margin-left:.25ch;
1751
- color:var(--t-text-color-status-error);
1752
- content:"*";
1788
+ @media (pointer: fine){
1789
+ :is(.tds-input textarea)::-webkit-scrollbar{
1790
+ width:12px;
1791
+ height:12px;
1792
+ cursor:default;
1753
1793
  }
1754
1794
 
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
- }
1761
-
1762
- .tds-select:has( > [popover]:popover-open) > button{
1763
- border-color:var(--tds-select-border-color-active);
1764
- }
1765
-
1766
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1767
- transform:rotate(.5turn);
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);
1768
1801
  }
1769
1802
 
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;
1775
- }
1776
-
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);
1789
- }
1790
-
1791
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1792
- outline:0;
1803
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1804
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1793
1805
  }
1794
1806
 
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);
1807
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1808
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1797
1809
  }
1798
1810
 
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);
1811
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1812
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1801
1813
  }
1802
1814
 
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;
1815
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1816
+ background:var(--tds-input-scrollbar-surface-color);
1806
1817
  }
1807
1818
 
1808
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1809
- background:transparent;
1810
- }
1811
-
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;
1826
- }
1827
-
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);
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);
1834
1823
  }
1835
1824
 
1836
- @container scroll-state(stuck){
1837
-
1838
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1839
- color:var(--tds-select-group-label-color-stuck);
1825
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1826
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1827
+ cursor:default;
1840
1828
  }
1841
1829
 
1842
- @media (forced-colors: active){
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
+ }
1843
1835
 
1844
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1845
- color:var(--tds-select-group-label-color-stuck);
1846
- }
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);
1847
1839
  }
1848
1840
  }
1849
-
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);
1841
+ }
1853
1842
  }
1854
1843
 
1855
- @media (prefers-reduced-motion: reduce){
1856
-
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;
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;
1864
1849
  }
1865
- }
1866
1850
 
1867
- .tds-select-description{
1868
- display:flex;
1869
- gap:var(--t-spacing-half);
1870
- align-items:flex-start;
1871
- 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));
1875
- cursor:text;
1876
- }
1851
+ .tds-toggle-switch{
1852
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1853
+ --tds-toggle-switch-cursor:pointer;
1854
+ --tds-toggle-switch-display:inline-grid;
1855
+ --tds-toggle-switch-line-height:1.4;
1877
1856
 
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
- }
1857
+ --tds-toggle-switch-label-color:var(--t-form-color);
1884
1858
 
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;
1893
- }
1859
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1860
+ --tds-toggle-switch-track-outline:none;
1861
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1862
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1863
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1894
1864
 
1895
- .tds-select:has(> button){
1896
- anchor-scope:--tds-select-anchor;
1865
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1866
+ --tds-toggle-switch-thumb-transform:translateX(0);
1867
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1868
+
1869
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1870
+ --tds-toggle-switch-description-line-height:1.35;
1871
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1872
+ position:relative;
1873
+
1874
+ display:var(--tds-toggle-switch-display);
1875
+ grid-template-columns:auto;
1876
+ grid-auto-columns:1fr;
1877
+ gap:var(--t-spacing-fourth) 0;
1878
+ -webkit-user-select:none;
1879
+ -moz-user-select:none;
1880
+ user-select:none;
1897
1881
  }
1898
1882
 
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;
1883
+ .tds-toggle-switch input[type="checkbox"]{
1884
+ position:absolute;
1885
+ width:var(--tds-toggle-switch-track-width);
1886
+ height:var(--tds-toggle-switch-track-height);
1887
+ margin:0;
1888
+ -webkit-appearance:none;
1889
+ -moz-appearance:none;
1890
+ appearance:none;
1891
+ cursor:var(--tds-toggle-switch-cursor);
1892
+ outline:var(--tds-toggle-switch-track-outline);
1893
+ outline-offset:var(--t-focus-ring-offset);
1894
+ background-color:transparent;
1895
+ border:0;
1896
+ border-radius:var(--t-border-radius-round);
1910
1897
  }
1911
1898
 
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);
1899
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1900
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1924
1901
  }
1925
1902
 
1926
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1927
- color:var(--tds-select-color);
1903
+ .tds-toggle-switch label{
1904
+ display:inline-flex;
1905
+ grid-area:1 / 2;
1906
+ padding-inline-start:var(--t-spacing-1);
1907
+ margin-top:-.09375em;
1908
+ font-size:var(--tds-toggle-switch-font-size);
1909
+ font-weight:var(--t-font-weight-normal);
1910
+ line-height:var(--tds-toggle-switch-line-height);
1911
+ color:var(--tds-toggle-switch-label-color);
1912
+ cursor:var(--tds-toggle-switch-cursor);
1928
1913
  }
1929
1914
 
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);
1915
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1916
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1959
1917
  }
1960
1918
 
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);
1964
- }
1965
-
1966
- :is(.tds-select:has( > button) [popover]) ul{
1967
- padding:0;
1968
- margin:0;
1969
- list-style:none;
1970
- }
1971
-
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
- }
1977
- }
1978
-
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;
1990
- }
1991
- }
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);
2000
- }
1919
+ .tds-toggle-switch:has(input:checked){
1920
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1921
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1922
+ }
2001
1923
 
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);
1924
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1925
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2005
1926
  }
2006
1927
 
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);
2011
- }
1928
+ .tds-toggle-switch:has(input:disabled){
1929
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1930
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1931
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1932
+ --tds-toggle-switch-cursor:not-allowed;
1933
+ }
2012
1934
 
2013
- :is(.tds-select select:has( > button)):open::picker-icon{
2014
- opacity:1;
2015
- transform:rotate(.5turn);
2016
- }
1935
+ .tds-toggle-switch-track{
1936
+ position:relative;
1937
+ flex-shrink:0;
1938
+ width:var(--tds-toggle-switch-track-width);
1939
+ height:var(--tds-toggle-switch-track-height);
1940
+ background-color:var(--tds-toggle-switch-track-background-color);
1941
+ border-radius:var(--t-border-radius-round);
1942
+ transition:var(--tds-toggle-switch-track-transition);
1943
+ }
2017
1944
 
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;
2023
- }
1945
+ .tds-toggle-switch-track::before{
1946
+ position:absolute;
1947
+ top:var(--t-spacing-fourth);
1948
+ left:var(--t-spacing-fourth);
1949
+ width:var(--tds-toggle-switch-thumb-size);
1950
+ height:var(--tds-toggle-switch-thumb-size);
1951
+ content:"";
1952
+ background-color:#fff;
1953
+ border-radius:var(--t-border-radius-round);
1954
+ transform:var(--tds-toggle-switch-thumb-transform);
1955
+ transition:var(--tds-toggle-switch-thumb-transition);
1956
+ }
2024
1957
 
2025
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2026
- color:var(--tds-select-placeholder-color);
2027
- }
1958
+ @media (prefers-reduced-motion: reduce){
2028
1959
 
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);
2055
- }
1960
+ .tds-toggle-switch-track{
1961
+ --tds-toggle-switch-track-transition:none;
1962
+ --tds-toggle-switch-thumb-transition:none;
1963
+ }
1964
+ }
2056
1965
 
2057
- :is(.tds-select select:has( > button)) option::checkmark{
2058
- display:none;
2059
- }
1966
+ .tds-toggle-switch-description{
1967
+ display:flex;
1968
+ grid-area:2 / 2;
1969
+ align-items:flex-start;
1970
+ padding-inline-start:var(--t-spacing-1);
1971
+ margin:0;
1972
+ font-size:var(--tds-toggle-switch-description-font-size);
1973
+ line-height:var(--tds-toggle-switch-description-line-height);
1974
+ color:var(--tds-toggle-switch-description-color);
1975
+ cursor:text;
1976
+ }
2060
1977
 
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);
2065
- }
2066
- }
1978
+ .tds-toggle-switch--sm{
1979
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1980
+ --tds-toggle-switch-line-height:1.35;
1981
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1982
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1983
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1984
+ --tds-toggle-switch-description-line-height:1.3;
1985
+ }
1986
+
1987
+ .tds-toggle-switch--hide-label{
1988
+ --tds-toggle-switch-display:inline-flex;
2067
1989
  }
2068
1990
 
2069
1991
  .tds-input{
@@ -2350,368 +2272,446 @@
2350
2272
  color:var(--tds-field-color);
2351
2273
  }
2352
2274
 
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);
2353
2292
 
2354
- @media (prefers-reduced-motion: no-preference){
2355
-
2356
- :root{
2357
- interpolate-size:allow-keywords;
2358
- }
2359
- }
2360
-
2361
- @layer tds-component{
2362
- tds-sidenav,
2363
- .tds-sidenav{
2364
- --tds-sidenav-indent:12px;
2365
- --tds-sidenav-item-depth:0;
2366
-
2367
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2368
-
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);
2375
-
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);
2380
-
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;
2384
-
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);
2388
-
2389
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2390
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2391
- }
2392
-
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;
2400
- }
2401
- }
2402
-
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);
2409
- }
2410
- }
2411
-
2412
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2413
- display:flex;
2414
- }
2415
-
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%;
2420
- }
2421
-
2422
- .tds-sidenav-section-list{
2423
- width:100%;
2424
- padding:0;
2425
- margin:0;
2426
- list-style:none;
2427
- }
2428
-
2429
- .tds-sidenav-section-header{
2430
- display:flex;
2431
- align-items:baseline;
2432
- justify-content:space-between;
2433
- padding-top:var(--t-spacing-2);
2434
- }
2435
-
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
- }
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;
2444
2307
 
2445
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2446
- padding-top:0;
2447
- }
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);
2448
2316
 
2449
- .tds-sidenav-section-header [slot="label-actions"]{
2450
- display:flex;
2451
- gap:var(--t-spacing-half);
2452
- align-items:center;
2453
- }
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