@planningcenter/tapestry 3.2.2-rc.15 → 3.2.2-rc.17

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 +1725 -1725
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1725 -1725
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,982 +1,1044 @@
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:transparent;
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) var(--t-spacing-1);
29
- line-height:var(--tds-checkbox-line-height);
30
- cursor:var(--tds-checkbox-cursor);
31
- -webkit-user-select:none;
32
- -moz-user-select:none;
33
- 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
+ }
34
58
  }
35
59
 
36
- .tds-checkbox label{
37
- grid-area:1 / 2;
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);
195
+ .tds-sidenav-item .tds-sidenav-section-list{
196
+ --tds-sidenav-item-depth:1;
197
+ gap:0;
198
+ }
199
+
200
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
+ visibility:hidden;
202
+ block-size:0;
203
+ overflow-y:clip;
204
+ opacity:0;
205
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
137
206
  }
138
207
 
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);
208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
+ --tds-sidenav-item-depth:2;
142
210
  }
143
211
 
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);
212
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
+ min-height:var(--t-element-size-2xl);
214
+ padding-block:9px;
215
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
+ line-height:1;
217
+ background-color:transparent;
218
+ }
219
+
220
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
+ position:absolute;
222
+ top:0;
223
+ bottom:0;
224
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
+ width:2px;
226
+ content:"";
227
+ background-color:var(--tds-sidenav-item-nested-border-color);
228
+ transition:var(--tds-sidenav-item-transition);
147
229
  }
148
230
 
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
153
- }
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
+ }
154
241
 
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);
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
+ }
158
247
 
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
- }
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
+ }
163
252
 
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);
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
+ }
256
+
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);
166
260
  }
167
261
 
168
- .tds-checkbox-description{
262
+ .tds-sidenav-responsive-header{
169
263
  display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
172
- align-items:flex-start;
173
- margin:0;
174
- font-size:var(--tds-checkbox-description-font-size);
175
- line-height:var(--tds-checkbox-description-line-height);
176
- color:var(--tds-checkbox-description-color);
177
- cursor:text;
264
+ gap:var(--t-spacing-2);
265
+ align-items:center;
266
+ width:100%;
178
267
  }
179
268
 
180
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
- display:var(--tds-checkbox-description-invalid-icon-display);
182
- flex-shrink:0;
183
- margin-top:calc(.5lh - .5em);
184
- line-height:var(--tds-checkbox-description-line-height);
269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
+ order:0;
185
271
  }
186
272
 
187
- .tds-checkbox--sm{
188
- --tds-checkbox-line-height:1.35;
189
- --tds-checkbox-input-size:var(--t-element-size-sm);
190
- --tds-checkbox-font-size:var(--t-font-size-sm);
191
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
- --tds-checkbox-description-line-height:1.3;
193
- }
194
-
195
- .tds-radio-group{
196
- --tds-radio-group-font-size:var(--t-font-size-md);
197
- --tds-radio-group-line-height:1.4;
198
- --tds-radio-group-gap:var(--t-spacing-1);
199
-
200
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
201
-
202
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
203
- --tds-radio-group-description-line-height:1.35;
204
- --tds-radio-group-description-color:var(--t-text-color-secondary);
205
- --tds-radio-group-description-invalid-icon-display:none;
206
- display:flex;
207
- flex-direction:column;
208
- gap:var(--tds-radio-group-gap);
209
- padding:0;
210
- margin:0;
211
-
212
- font-size:var(--tds-radio-group-font-size);
213
- line-height:var(--tds-radio-group-line-height);
214
- border:0;
215
- }
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);
280
+ }
216
281
 
217
- .tds-radio-group legend{
282
+ @media (max-width: 719px){
283
+ .tds-sidenav-collapse{
284
+ z-index:10001;
285
+ display:none;
286
+ max-width:min(448px, calc(100vw - 48px));
218
287
  padding:0;
219
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
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;
220
300
  }
221
301
 
222
- .tds-radio-group:has(.tds-radio-group-description){
223
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
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;
224
310
  }
225
311
 
226
- .tds-radio-group[aria-invalid="true"]{
227
- --tds-radio-group-description-color:var(--t-text-color-status-error);
228
- --tds-radio-group-description-invalid-icon-display:inline-block;
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
229
314
  }
230
-
231
- .tds-radio-group[aria-invalid="true"] .tds-radio{
232
- --tds-radio-input-border-color:var(--t-form-border-color-error);
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
233
318
  }
234
319
 
235
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
236
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
237
- --tds-radio-input-background-color:var(--t-form-background-color-error);
238
- }
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
239
324
 
240
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
241
- --tds-radio-input-background-color:var(--t-form-background-color);
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);
242
329
  }
243
-
244
- .tds-radio-group:has(input:required) legend::after{
245
- margin-left:.25ch;
246
- color:var(--t-text-color-status-error);
247
- content:"*";
330
+ }
331
+ }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
248
335
  }
249
336
 
250
- .tds-radio-group-fields{
251
- display:flex;
252
- flex-direction:column;
253
- gap:var(--tds-radio-group-gap);
254
- align-items:flex-start;
255
- }
256
-
257
- .tds-radio-group-description{
258
- display:flex;
259
- gap:var(--t-spacing-half);
260
- align-items:flex-start;
261
- margin:0;
262
- font-size:var(--tds-radio-group-description-font-size);
263
- line-height:var(--tds-radio-group-description-line-height);
264
- color:var(--tds-radio-group-description-color);
265
- cursor:text;
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
341
+ }
266
342
  }
267
343
 
268
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
269
- display:var(--tds-radio-group-description-invalid-icon-display);
270
- flex-shrink:0;
271
- margin-top:calc(.5lh - .5em);
272
- line-height:var(--tds-radio-group-description-line-height);
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
273
347
  }
274
-
275
- .tds-radio-group--sm{
276
- --tds-radio-group-line-height:1.35;
277
- --tds-radio-group-font-size:var(--t-font-size-sm);
278
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
279
- --tds-radio-group-description-line-height:1.3;
280
348
  }
281
349
 
282
- .tds-radio{
283
- --tds-radio-font-size:var(--t-font-size-md);
284
- --tds-radio-cursor:pointer;
285
- --tds-radio-line-height:1.4;
286
- --tds-radio-transition-property:border-width;
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
287
353
 
288
- --tds-radio-input-size:var(--t-element-size-md);
289
- --tds-radio-input-border-radius:var(--t-border-radius-round);
290
- --tds-radio-input-border-color:var(--t-form-border-color);
291
- --tds-radio-input-border-width:var(--t-form-border-width);
292
- --tds-radio-input-background-color:transparent;
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
293
357
 
294
- --tds-radio-label-color:var(--t-form-color);
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
361
+ }
295
362
 
296
- --tds-radio-description-font-size:var(--t-font-size-sm);
297
- --tds-radio-description-line-height:1.35;
298
- --tds-radio-description-color:var(--t-text-color-secondary);
299
-
300
- position:relative;
301
- display:inline-grid;
302
- grid-template-columns:auto;
303
- grid-auto-columns:1fr;
304
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
305
- line-height:var(--tds-radio-line-height);
306
- cursor:var(--tds-radio-cursor);
307
- -webkit-user-select:none;
308
- -moz-user-select:none;
309
- user-select:none;
310
- }
311
-
312
- .tds-radio label{
313
- grid-area:1 / 2;
314
- font-size:var(--tds-radio-font-size);
315
- font-weight:var(--t-font-weight-normal);
316
- color:var(--tds-radio-label-color);
317
- cursor:var(--tds-radio-cursor);
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
318
366
  }
367
+ }
319
368
 
320
- .tds-radio input[type="radio"]{
321
- position:relative;
322
- width:1em;
323
- height:1em;
324
- margin:calc((1lh - 1em) / 2) 0 0;
325
- font-size:var(--tds-radio-font-size);
326
- line-height:inherit;
327
- -webkit-appearance:none;
328
- -moz-appearance:none;
329
- appearance:none;
330
- cursor:var(--tds-radio-cursor);
331
- background-color:var(--tds-radio-input-background-color);
332
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
333
- border-radius:var(--tds-radio-input-border-radius);
334
- transition-timing-function:var(--t-ease-in-out);
335
- transition-duration:var(--t-duration-200);
336
- transition-property:var(--tds-radio-transition-property);
337
- }
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:var(--t-surface-color-canvas);
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;
338
387
 
339
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
340
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
341
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
342
- }
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-bottom-border-color);
343
390
 
344
- :is(.tds-radio input[type="radio"]):focus-visible{
345
- outline:var(--t-focus-ring-outline);
346
- outline-offset:var(--t-focus-ring-offset);
347
- }
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);
348
394
 
349
- :is(.tds-radio input[type="radio"]):disabled{
350
- pointer-events:none;
351
- }
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);
352
397
 
353
- @media (prefers-reduced-motion: reduce){
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);
354
401
 
355
- .tds-radio input[type="radio"]{
356
- --tds-radio-transition-property:none;
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);
357
407
  }
358
- }
359
408
 
360
- .tds-radio:has(input:checked){
361
- --tds-radio-input-background-color:var(--t-form-background-color);
362
- --tds-radio-input-border-color:var(--t-border-color-control-info);
363
- --tds-radio-input-border-width:4px;
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
364
411
  }
365
412
 
366
- .tds-radio:has(input:checked) input:hover:not(:disabled){
367
- --tds-radio-input-background-color:var(--t-form-background-color);
368
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
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));
369
417
  }
370
-
371
- .tds-radio:has(input:user-invalid){
372
- --tds-radio-input-border-color:var(--t-form-border-color-error);
373
418
  }
374
419
 
375
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
376
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
377
- --tds-radio-input-background-color:var(--t-form-background-color-error);
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-background-color-hover:var(--t-fill-color-neutral-060);
434
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
435
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
436
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
378
437
  }
438
+ }
439
+ }
379
440
 
380
- .tds-radio:has(input:disabled){
381
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
382
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
441
+ .tds-page-header{
442
+ display:flex;
443
+ flex-direction:column;
444
+ padding-top:var(--tds-page-header-padding-y);
445
+ color:var(--tds-page-header-color);
446
+ background:var(--tds-page-header-background-color);
447
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
448
+ }
383
449
 
384
- --tds-radio-label-color:var(--t-form-color-disabled);
385
- --tds-radio-description-color:var(--t-form-color-disabled);
386
- --tds-radio-cursor:not-allowed;
450
+ .tds-page-header:not(.has-nav){
451
+ padding-bottom:var(--tds-page-header-padding-y);
387
452
  }
388
453
 
389
- .tds-radio:has(input:disabled) input:checked{
390
- --tds-radio-input-background-color:var(--t-form-background-color);
391
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
392
- }
454
+ .tds-page-header.inactive{
455
+ background:var(--tds-page-header-background-color-inactive);
456
+ }
393
457
 
394
- .tds-radio-description{
395
- display:flex;
396
- grid-area:2 / 2;
397
- gap:var(--t-spacing-half);
398
- align-items:flex-start;
399
- margin:0;
400
- font-size:var(--tds-radio-description-font-size);
401
- line-height:var(--tds-radio-description-line-height);
402
- color:var(--tds-radio-description-color);
403
- cursor:text;
404
- }
458
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
459
+ width:100%;
460
+ }
405
461
 
406
- .tds-radio--sm{
407
- --tds-radio-line-height:1.35;
408
- --tds-radio-input-size:var(--t-element-size-sm);
409
- --tds-radio-font-size:var(--t-font-size-sm);
410
- --tds-radio-description-font-size:var(--t-font-size-xs);
411
- --tds-radio-description-line-height:1.3;
412
- }
462
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
463
+ display:flex;
464
+ flex-flow:row wrap;
465
+ gap:var(--t-spacing-half) var(--t-spacing-1);
466
+ align-items:flex-start;
467
+ justify-content:flex-start;
468
+ min-width:0;
469
+ }
413
470
 
471
+ :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{
472
+ display:flex;
473
+ gap:var(--tds-page-header-nav-gap);
474
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
475
+ margin:0 0 -1px;
476
+ overflow:auto;
477
+ list-style:none;
478
+ background:var(--tds-page-header-nav-background);
479
+ }
414
480
 
415
- :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{
481
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
482
+ position:relative;
483
+ display:inline-flex;
484
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
485
+ font-size:var(--t-font-size-sm);
486
+ line-height:22px;
487
+ color:var(--tds-page-header-nav-item-color);
488
+ white-space:nowrap;
489
+ text-decoration:none;
416
490
  -webkit-appearance:none;
491
+ -moz-appearance:none;
417
492
  appearance:none;
493
+ cursor:pointer;
494
+ outline-offset:-2px;
495
+ background-color:var(--tds-page-header-nav-item-background-color);
496
+ background-clip:padding-box;
497
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
498
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
499
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
418
500
  }
419
501
 
420
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
421
- inline-size:1em;
422
- block-size:2em;
423
- }
424
-
425
- @supports (field-sizing: content){
426
- .tds-input--auto-width{
427
- inline-size:-moz-fit-content;
428
- inline-size:fit-content;
429
- min-inline-size:min(100%, 122px);
430
- }
502
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
503
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
504
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
505
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
506
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
507
+ }
431
508
 
432
- .tds-input--auto-width input{
433
- field-sizing:content;
434
- inline-size:auto;
435
- }
436
- }
509
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
510
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
511
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
512
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
513
+ }
437
514
 
438
- .tds-select{
439
- --tds-select-border-color:var(--t-form-border-color);
440
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
441
- --tds-select-border-color-active:var(--t-form-border-color-hover);
442
- --tds-select-background-color:var(--t-form-background-color);
443
- --tds-select-color:var(--t-form-color);
444
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
445
- --tds-select-font-size:var(--t-font-size-md);
446
- --tds-select-min-height:var(--t-container-size-md);
447
- --tds-select-padding-block:6px;
448
- --tds-select-description-color:var(--t-text-color-secondary);
449
- --tds-select-description-invalid-icon-display:none;
450
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
451
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
452
- --tds-select-caret-size:1em;
453
- --tds-select-caret-inline-offset:.75em;
454
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
515
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
516
+ background-color:var(--tds-page-header-nav-item-background-color-active);
517
+ border-color:var(--tds-page-header-nav-item-border-color-active);
518
+ }
455
519
 
456
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
457
- --tds-select-dropdown-border:1px solid var(--t-border-color);
458
- --tds-select-dropdown-padding:var(--t-spacing-1);
459
- --tds-select-dropdown-margin-block:5px;
460
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
461
- --tds-select-dropdown-scrollbar-width:thin;
462
- --tds-select-dropdown-border-radius:var(--t-border-radius);
463
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
464
- --tds-select-dropdown-scroll-behavior:smooth;
465
- --tds-select-dropdown-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;
466
- --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
467
- --tds-select-dropdown-closed-opacity:0;
468
- --tds-select-dropdown-open-opacity:1;
469
- --tds-select-dropdown-closed-transform:translateY(-8px);
470
- --tds-select-dropdown-open-transform:translateY(0);
520
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
521
+ color:var(--tds-page-header-nav-item-color-disabled);
522
+ cursor:not-allowed;
523
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
524
+ opacity:1;
525
+ }
471
526
 
472
- --tds-select-option-gap:var(--t-spacing-1);
473
- --tds-select-option-padding-block:var(--t-spacing-1);
474
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
475
- --tds-select-option-font-size:1rem;
476
- --tds-select-option-color:var(--t-text-color);
477
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
478
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
479
- --tds-select-option-border-radius:var(--t-border-radius);
527
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
+ position:relative;
529
+ }
480
530
 
481
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
482
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
483
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
484
- --tds-select-group-label-font-size:var(--t-font-size-sm);
485
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
486
- --tds-select-group-label-letter-spacing:0;
487
- --tds-select-group-label-color:var(--t-text-color-secondary);
488
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
489
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
490
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
531
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
532
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
533
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
534
+ }
491
535
 
492
- position:relative;
536
+ :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{
537
+ position:absolute;
538
+ top:-5px;
539
+ right:-2px;
540
+ width:10px;
541
+ height:10px;
542
+ content:"";
543
+ background:var(--tds-page-header-nav-item-indicator-color);
544
+ border-radius:50%;
545
+ }
546
+
547
+ @media (prefers-reduced-motion: no-preference){
548
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
549
+ animation:indicator-pulse 1.25s ease infinite;
550
+ }
551
+ }
552
+
553
+ .tds-page-header__title-bar{
493
554
  display:flex;
494
555
  flex-direction:column;
495
- gap:var(--t-spacing-half);
556
+ gap:var(--t-spacing-2) var(--t-spacing-1);
557
+ align-items:flex-start;
558
+ justify-content:space-between;
559
+ padding:0 var(--tds-page-header-padding-x);
496
560
  }
497
561
 
498
- .tds-select :is(label,.tds-select-label){
499
- font-size:var(--t-font-size-md);
500
- font-weight:var(--t-font-weight-normal);
501
- color:var(--t-text-color);
502
- cursor:default;
562
+ .tds-page-header--profile > .tds-page-header__title-bar{
563
+ align-items:center;
503
564
  }
504
565
 
505
- .tds-select :is(select,button){
506
- position:relative;
507
- place-items:center;
508
- inline-size:100%;
509
- min-block-size:var(--tds-select-min-height);
510
- padding-block:var(--tds-select-padding-block);
511
- padding-inline:var(--t-spacing-1);
512
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
513
- font-family:inherit;
514
- font-size:var(--tds-select-font-size);
515
- line-height:1;
516
- color:var(--tds-select-color);
517
- text-align:left;
518
- -webkit-appearance:none;
519
- -moz-appearance:none;
520
- appearance:none;
521
- cursor:var(--tds-select-cursor, default);
522
- outline:var(--t-focus-ring-width) solid transparent;
523
- outline-offset:0;
524
- background-color:var(--tds-select-background-color);
525
- background-image:var(--tds-select-background-image);
526
- background-repeat:no-repeat;
527
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
528
- background-size:var(--tds-select-caret-size);
529
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
530
- border-radius:var(--t-form-border-radius);
531
- transition-timing-function:var(--t-ease-in-out);
532
- transition-duration:var(--t-duration-300);
533
- transition-property:var(--tds-select-transition-property);
566
+ .tds-page-header__primary{
567
+ width:100%;
568
+ }
569
+
570
+ .tds-page-header__primary h1{
571
+ margin:0;
572
+ font-size:var(--tds-page-header-headline-font-size);
573
+ font-weight:var(--t-font-weight-normal);
574
+ line-height:32px;
575
+ color:var(--tds-page-header-headline-color);
576
+ overflow-wrap:break-word;
534
577
  }
535
578
 
536
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
537
- border-color:var(--tds-select-border-color-hover);
538
- }
579
+ @media (min-width: 960px){
580
+ .tds-page-header__primary{
581
+ flex:1 1 max-content;
582
+ width:auto;
583
+ min-width:0;
584
+ max-width:100%;
585
+ }
539
586
 
540
- :is(.tds-select :is(select,button)):focus{
541
- outline-color:var(--t-focus-ring-color);
542
- outline-offset:var(--t-focus-ring-offset);
543
- border-color:var(--tds-select-border-color-active);
587
+ .tds-page-header__title-bar,
588
+ .tds-page-header--profile .tds-page-header__title-bar{
589
+ flex-flow:row nowrap;
590
+ row-gap:12px;
591
+ align-items:flex-start;
592
+ }
593
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
+ width:auto;
544
595
  }
545
596
 
546
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
547
- color:var(--tds-select-placeholder-color);
597
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
+ justify-content:flex-end;
548
599
  }
600
+ }
549
601
 
550
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
551
- --tds-select-border-color:var(--t-form-border-color-error);
552
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
553
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
554
- --tds-select-background-color:var(--t-form-background-color-error);
555
- --tds-select-description-color:var(--t-text-color-status-error);
556
- --tds-select-description-invalid-icon-display:inline-block;
557
- }
602
+ .tds-page-header-phone,
603
+ .tds-page-header-email{
604
+ color:var(--tds-page-header-color);
605
+ white-space:nowrap;
606
+ }
558
607
 
559
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
560
- margin-left:.25ch;
561
- color:var(--t-text-color-status-error);
562
- content:"*";
563
- }
608
+ .tds-page-header-email{
609
+ max-width:100%;
610
+ overflow:hidden;
611
+ text-overflow:ellipsis;
612
+ }
564
613
 
565
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
566
- --tds-select-border-color:var(--t-form-border-color-disabled);
567
- --tds-select-background-color:var(--t-form-background-color-disabled);
568
- --tds-select-color:var(--t-form-color-disabled);
569
- --tds-select-cursor:not-allowed;
614
+ @keyframes indicator-pulse{
615
+ 0%{
616
+ opacity:.3;
617
+ transform:scale(.9);
570
618
  }
571
619
 
572
- .tds-select:has( > [popover]:popover-open) > button{
573
- border-color:var(--tds-select-border-color-active);
620
+ 100%{
621
+ opacity:0;
622
+ transform:scale(1.75);
574
623
  }
624
+ }
575
625
 
576
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
577
- transform:rotate(.5turn);
578
- }
579
-
580
- .tds-select :is(hr,li[role="separator"]){
581
- margin-block:var(--t-spacing-half);
582
- color:var(--tds-select-border-color);
583
- border:0;
584
- border-top:1px solid;
585
- }
626
+ .tds-checkbox{
627
+ --tds-checkbox-font-size:var(--t-font-size-md);
628
+ --tds-checkbox-cursor:pointer;
629
+ --tds-checkbox-line-height:1.4;
630
+ --tds-checkbox-transition-property:background-color, border-color;
586
631
 
587
- .tds-select :is(li[role="option"],option:not([hidden])){
588
- display:block;
589
- padding-block:var(--tds-select-option-padding-block);
590
- padding-inline:var(--tds-select-option-padding-inline);
591
- overflow:hidden;
592
- text-overflow:ellipsis;
593
- font-size:var(--tds-select-option-font-size);
594
- color:var(--tds-select-option-color);
595
- white-space:nowrap;
596
- cursor:default;
597
- border-radius:var(--tds-select-option-border-radius);
598
- }
632
+ --tds-checkbox-input-size:var(--t-element-size-md);
633
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
634
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
635
+ --tds-checkbox-input-background-color:transparent;
599
636
 
600
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
601
- outline:none;
602
- }
637
+ --tds-checkbox-input-icon:none;
638
+ --tds-checkbox-input-icon-visibility:hidden;
639
+ --tds-checkbox-input-icon-opacity:0;
640
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
603
641
 
604
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
605
- background:var(--tds-select-option-background-hover);
606
- }
642
+ --tds-checkbox-label-color:var(--t-form-color);
607
643
 
608
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
609
- background:var(--tds-select-option-background-active);
610
- }
644
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
645
+ --tds-checkbox-description-line-height:1.35;
646
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
647
+ --tds-checkbox-description-invalid-icon-display:none;
611
648
 
612
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
613
- color:var(--t-form-color-disabled);
614
- cursor:not-allowed;
615
- }
649
+ position:relative;
650
+ display:inline-grid;
651
+ grid-template-columns:auto;
652
+ grid-auto-columns:1fr;
653
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
654
+ line-height:var(--tds-checkbox-line-height);
655
+ cursor:var(--tds-checkbox-cursor);
656
+ -webkit-user-select:none;
657
+ -moz-user-select:none;
658
+ user-select:none;
659
+ }
616
660
 
617
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
618
- background:transparent;
619
- }
661
+ .tds-checkbox label{
662
+ grid-area:1 / 2;
663
+ font-size:var(--tds-checkbox-font-size);
664
+ font-weight:var(--t-font-weight-normal);
665
+ color:var(--tds-checkbox-label-color);
666
+ cursor:var(--tds-checkbox-cursor);
667
+ }
620
668
 
621
- .tds-select :is(li[role="presentation"],legend){
622
- position:sticky;
623
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
624
- z-index:1;
625
- float:inline-start;
626
- inline-size:100%;
627
- padding-block:var(--tds-select-group-label-padding-block);
628
- padding-inline:var(--tds-select-group-label-padding-inline);
629
- container-type:scroll-state;
630
- font-size:var(--tds-select-group-label-font-size);
631
- font-weight:var(--tds-select-group-label-font-weight);
632
- letter-spacing:var(--tds-select-group-label-letter-spacing);
633
- background:var(--tds-select-group-label-background);
634
- text-box:trim-both cap alphabetic;
669
+ .tds-checkbox tds-indeterminate{
670
+ display:flex;
635
671
  }
636
672
 
637
- :is(.tds-select :is(li[role="presentation"],legend)) span{
638
- display:inline-flex;
639
- gap:var(--t-spacing-half);
640
- align-items:center;
641
- color:var(--tds-select-group-label-color);
642
- transition:var(--tds-select-group-label-transition);
643
- }
644
-
645
- @container scroll-state(stuck){
673
+ .tds-checkbox input[type="checkbox"]{
674
+ position:relative;
675
+ width:1em;
676
+ height:1em;
677
+ margin:calc((1lh - 1em) / 2) 0 0;
678
+ font-size:var(--tds-checkbox-font-size);
679
+ line-height:inherit;
680
+ -webkit-appearance:none;
681
+ -moz-appearance:none;
682
+ appearance:none;
683
+ cursor:var(--tds-checkbox-cursor);
684
+ background-color:var(--tds-checkbox-input-background-color);
685
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
686
+ border-radius:var(--tds-checkbox-input-border-radius);
687
+ transition-timing-function:var(--t-ease-in-out);
688
+ transition-duration:var(--t-duration-200);
689
+ transition-property:var(--tds-checkbox-transition-property);
690
+ }
646
691
 
647
- :is(.tds-select :is(li[role="presentation"],legend)) span{
648
- color:var(--tds-select-group-label-color-stuck);
692
+ :is(.tds-checkbox input[type="checkbox"])::before{
693
+ position:absolute;
694
+ top:50%;
695
+ left:50%;
696
+ visibility:var(--tds-checkbox-input-icon-visibility);
697
+ width:100%;
698
+ height:100%;
699
+ content:"";
700
+ background-color:var(--tds-checkbox-input-icon-fill);
701
+ border-radius:var(--tds-checkbox-input-border-radius);
702
+ opacity:var(--tds-checkbox-input-icon-opacity);
703
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
704
+ mask-image:var(--tds-checkbox-input-icon);
705
+ -webkit-mask-repeat:no-repeat;
706
+ mask-repeat:no-repeat;
707
+ -webkit-mask-size:contain;
708
+ mask-size:contain;
709
+ transform:translate(-50%, -50%);
649
710
  }
650
711
 
651
- @media (forced-colors: active){
712
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
713
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
714
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
715
+ }
652
716
 
653
- :is(.tds-select :is(li[role="presentation"],legend)) span{
654
- color:var(--tds-select-group-label-color-stuck);
717
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
718
+ outline:var(--t-focus-ring-outline);
719
+ outline-offset:var(--t-focus-ring-offset);
655
720
  }
656
- }
657
- }
658
721
 
659
- .tds-select.tds-select--lg{
660
- --tds-select-min-height:var(--t-container-size-lg);
661
- --tds-select-font-size:var(--t-font-size-lg);
662
- }
722
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
723
+ pointer-events:none;
724
+ }
663
725
 
664
726
  @media (prefers-reduced-motion: reduce){
665
727
 
666
- .tds-select{
667
- --tds-select-transition-property:none;
668
- --tds-select-dropdown-transition-enter:none;
669
- --tds-select-dropdown-transition-exit:none;
670
- --tds-select-dropdown-scroll-behavior:auto;
671
- --tds-select-dropdown-closed-transform:none;
672
- --tds-select-dropdown-open-transform:none;
673
- --tds-select-caret-transition:none;
674
- }
728
+ .tds-checkbox input[type="checkbox"]{
729
+ --tds-checkbox-transition-property:none;
675
730
  }
731
+ }
676
732
 
677
- .tds-select-description{
678
- display:flex;
679
- gap:var(--t-spacing-half);
680
- align-items:flex-start;
681
- margin:0;
682
- font-size:var(--t-font-size-sm);
683
- line-height:1.35;
684
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
685
- cursor:text;
686
- }
687
-
688
- .tds-select-description .tds-select-description-invalid-icon{
689
- display:var(--tds-select-description-invalid-icon-display, none);
690
- flex-shrink:0;
691
- margin-block-start:calc(.5lh - .5em);
692
- line-height:1.35;
733
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
734
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
735
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
736
+ --tds-checkbox-input-icon-visibility:visible;
737
+ --tds-checkbox-input-icon-opacity:1;
693
738
  }
694
739
 
695
- .tds-select > .tds-select-hidden-select{
696
- position:absolute;
697
- inline-size:1px;
698
- block-size:1px;
699
- padding:0;
700
- margin:0;
701
- pointer-events:none;
702
- opacity:0;
703
- }
740
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
741
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
742
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
743
+ }
704
744
 
705
- .tds-select:has( > button) > button{
706
- display:block;
707
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
708
- overflow:hidden;
709
- text-overflow:ellipsis;
710
- color:var(--tds-select-placeholder-color);
711
- white-space:nowrap;
712
- background-image:none;
713
- 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);
714
- -webkit-tap-highlight-color:transparent;
745
+ .tds-checkbox:has(input:checked){
746
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
715
747
  }
716
748
 
717
- :is(.tds-select:has( > button) > button)::after{
718
- position:absolute;
719
- inset-block:0;
720
- inset-inline-end:var(--tds-select-caret-inline-offset);
721
- width:var(--tds-select-caret-size);
722
- height:var(--tds-select-caret-size);
723
- margin-block:auto;
724
- pointer-events:none;
725
- content:var(--tds-select-background-image);
726
- transform:rotate(0);
727
- transition:var(--tds-select-caret-transition);
728
- }
729
-
730
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
731
- color:var(--tds-select-color);
749
+ .tds-checkbox:has(input:indeterminate){
750
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
732
751
  }
733
752
 
734
- .tds-select:has( > button) [popover]{
735
- inset:auto;
736
- inline-size:-moz-max-content;
737
- inline-size:max-content;
738
- min-inline-size:anchor-size(width);
739
- max-inline-size:100vi;
740
- max-block-size:min(50vh, 20rem);
741
- padding:var(--tds-select-dropdown-padding);
742
- margin-block:var(--tds-select-dropdown-margin-block);
743
- position-area:block-end span-inline-start;
744
- position-try-fallbacks:flip-block, flip-inline;
745
- overflow:auto;
746
- overflow-x:hidden;
747
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
748
- overscroll-behavior:none;
749
- -webkit-user-select:none;
750
- -moz-user-select:none;
751
- user-select:none;
752
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
753
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
754
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
755
- background:var(--tds-select-dropdown-background-color);
756
- border:var(--tds-select-dropdown-border);
757
- border-radius:var(--tds-select-dropdown-border-radius);
758
- box-shadow:var(--tds-select-dropdown-box-shadow);
759
- opacity:var(--tds-select-dropdown-open-opacity);
760
- transform:var(--tds-select-dropdown-open-transform);
761
- transition:var(--tds-select-dropdown-transition-enter);
753
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
754
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
755
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
756
+ --tds-checkbox-description-invalid-icon-display:inline-block;
762
757
  }
763
758
 
764
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
765
- opacity:var(--tds-select-dropdown-closed-opacity);
766
- transform:var(--tds-select-dropdown-closed-transform);
767
- transition:var(--tds-select-dropdown-transition-exit);
759
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
760
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
761
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
768
762
  }
769
763
 
770
- :is(.tds-select:has( > button) [popover]) ul{
771
- padding:0;
772
- margin:0;
773
- list-style:none;
764
+ :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{
765
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
766
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
774
767
  }
775
768
 
776
- @starting-style{
777
- :is(.tds-select:has( > button) [popover]):popover-open{
778
- opacity:var(--tds-select-dropdown-closed-opacity);
779
- transform:var(--tds-select-dropdown-closed-transform);
769
+ :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){
770
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
771
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
780
772
  }
781
- }
782
773
 
783
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
784
- .tds-select select:has(> button){
785
- padding-inline-end:0;
786
- background-image:none;
787
- }
788
- @media (hover) and (pointer: fine){
789
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
790
- padding-block:0;
791
- -webkit-appearance:base-select;
792
- -moz-appearance:base-select;
793
- appearance:base-select;
794
- }
795
- }
796
- :is(.tds-select select:has( > button))::picker-icon{
797
- flex-shrink:0;
798
- width:var(--tds-select-caret-size);
799
- height:var(--tds-select-caret-size);
800
- margin-inline-end:var(--tds-select-caret-inline-offset);
801
- content:var(--tds-select-background-image);
802
- transition:var(--tds-select-caret-transition);
774
+ .tds-checkbox:has(input:required) label::after{
775
+ margin-left:.25ch;
776
+ color:var(--t-text-color-status-error);
777
+ content:"*";
803
778
  }
804
779
 
805
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
806
- opacity:var(--tds-select-dropdown-closed-opacity);
807
- transform:var(--tds-select-dropdown-closed-transform);
808
- transition:var(--tds-select-dropdown-transition-exit);
809
- }
780
+ .tds-checkbox:has(input:disabled){
781
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
782
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
810
783
 
811
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
812
- outline-color:var(--t-focus-ring-color);
813
- outline-offset:var(--t-focus-ring-offset);
814
- border-color:var(--tds-select-border-color-active);
784
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
785
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
786
+ --tds-checkbox-cursor:not-allowed;
787
+ }
788
+
789
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
790
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
815
791
  }
816
792
 
817
- :is(.tds-select select:has( > button)):open::picker-icon{
818
- opacity:1;
819
- transform:rotate(.5turn);
820
- }
821
-
822
- :is(.tds-select select:has( > button)) selectedcontent{
823
- overflow:hidden;
824
- text-overflow:ellipsis;
825
- line-height:calc(var(--tds-select-min-height) - 2px);
826
- white-space:nowrap;
827
- }
793
+ .tds-checkbox-description{
794
+ display:flex;
795
+ grid-area:2 / 2;
796
+ gap:var(--t-spacing-half);
797
+ align-items:flex-start;
798
+ margin:0;
799
+ font-size:var(--tds-checkbox-description-font-size);
800
+ line-height:var(--tds-checkbox-description-line-height);
801
+ color:var(--tds-checkbox-description-color);
802
+ cursor:text;
803
+ }
828
804
 
829
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
830
- color:var(--tds-select-placeholder-color);
831
- }
805
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
806
+ display:var(--tds-checkbox-description-invalid-icon-display);
807
+ flex-shrink:0;
808
+ margin-top:calc(.5lh - .5em);
809
+ line-height:var(--tds-checkbox-description-line-height);
810
+ }
832
811
 
833
- :is(.tds-select select:has( > button))::picker(select){
834
- inset:auto;
835
- inline-size:-moz-max-content;
836
- inline-size:max-content;
837
- min-inline-size:anchor-size(width);
838
- max-inline-size:100vi;
839
- padding:var(--tds-select-dropdown-padding);
840
- margin-block:var(--tds-select-dropdown-margin-block);
841
- position-try-fallbacks:flip-block, flip-inline;
842
- overflow:auto;
843
- overflow-x:hidden;
844
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
845
- overscroll-behavior:none;
846
- -webkit-user-select:none;
847
- -moz-user-select:none;
848
- user-select:none;
849
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
850
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
851
- background:var(--tds-select-dropdown-background-color);
852
- border:var(--tds-select-dropdown-border);
853
- border-radius:var(--tds-select-dropdown-border-radius);
854
- box-shadow:var(--tds-select-dropdown-box-shadow);
855
- opacity:var(--tds-select-dropdown-open-opacity);
856
- transform:var(--tds-select-dropdown-open-transform);
857
- transition:var(--tds-select-dropdown-transition-enter);
858
- }
812
+ .tds-checkbox--sm{
813
+ --tds-checkbox-line-height:1.35;
814
+ --tds-checkbox-input-size:var(--t-element-size-sm);
815
+ --tds-checkbox-font-size:var(--t-font-size-sm);
816
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
817
+ --tds-checkbox-description-line-height:1.3;
818
+ }
859
819
 
860
- :is(.tds-select select:has( > button)) option::checkmark{
861
- display:none;
862
- }
820
+ .tds-radio{
821
+ --tds-radio-font-size:var(--t-font-size-md);
822
+ --tds-radio-cursor:pointer;
823
+ --tds-radio-line-height:1.4;
824
+ --tds-radio-transition-property:border-width;
863
825
 
864
- @starting-style{
865
- :is(.tds-select select:has( > button))::picker(select):popover-open{
866
- opacity:var(--tds-select-dropdown-closed-opacity);
867
- transform:var(--tds-select-dropdown-closed-transform);
868
- }
869
- }
870
- }
826
+ --tds-radio-input-size:var(--t-element-size-md);
827
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
828
+ --tds-radio-input-border-color:var(--t-form-border-color);
829
+ --tds-radio-input-border-width:var(--t-form-border-width);
830
+ --tds-radio-input-background-color:transparent;
871
831
 
872
- .tds-input:has(textarea){
873
- --tds-input-padding-block:6px;
874
- --tds-input-resizer-size:var(--t-element-size-sm);
875
- --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");
876
- }
832
+ --tds-radio-label-color:var(--t-form-color);
877
833
 
878
- @supports (x: attr(x type(*))){
834
+ --tds-radio-description-font-size:var(--t-font-size-sm);
835
+ --tds-radio-description-line-height:1.35;
836
+ --tds-radio-description-color:var(--t-text-color-secondary);
879
837
 
880
- .tds-input:has(textarea){
881
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
838
+ position:relative;
839
+ display:inline-grid;
840
+ grid-template-columns:auto;
841
+ grid-auto-columns:1fr;
842
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
843
+ line-height:var(--tds-radio-line-height);
844
+ cursor:var(--tds-radio-cursor);
845
+ -webkit-user-select:none;
846
+ -moz-user-select:none;
847
+ user-select:none;
882
848
  }
849
+
850
+ .tds-radio label{
851
+ grid-area:1 / 2;
852
+ font-size:var(--tds-radio-font-size);
853
+ font-weight:var(--t-font-weight-normal);
854
+ color:var(--tds-radio-label-color);
855
+ cursor:var(--tds-radio-cursor);
883
856
  }
884
857
 
885
- .tds-input.tds-textarea--resize-vertical textarea{
886
- resize:vertical;
887
- }
858
+ .tds-radio input[type="radio"]{
859
+ position:relative;
860
+ width:1em;
861
+ height:1em;
862
+ margin:calc((1lh - 1em) / 2) 0 0;
863
+ font-size:var(--tds-radio-font-size);
864
+ line-height:inherit;
865
+ -webkit-appearance:none;
866
+ -moz-appearance:none;
867
+ appearance:none;
868
+ cursor:var(--tds-radio-cursor);
869
+ background-color:var(--tds-radio-input-background-color);
870
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
871
+ border-radius:var(--tds-radio-input-border-radius);
872
+ transition-timing-function:var(--t-ease-in-out);
873
+ transition-duration:var(--t-duration-200);
874
+ transition-property:var(--tds-radio-transition-property);
875
+ }
888
876
 
889
- .tds-input.tds-textarea--resize-none textarea{
890
- resize:none;
877
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
878
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
879
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
891
880
  }
892
881
 
893
- .tds-input.tds-textarea--resize-auto textarea{
894
- resize:vertical;
882
+ :is(.tds-radio input[type="radio"]):focus-visible{
883
+ outline:var(--t-focus-ring-outline);
884
+ outline-offset:var(--t-focus-ring-offset);
895
885
  }
896
886
 
897
- @supports (field-sizing: content){
898
- .tds-input.tds-textarea--resize-auto textarea{
899
- field-sizing:content;
900
- resize:none;
901
- }
887
+ :is(.tds-radio input[type="radio"]):disabled{
888
+ pointer-events:none;
902
889
  }
903
890
 
904
- .tds-input textarea{
905
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
906
- --tds-input-scrollbar-thumb-color-hidden:transparent;
907
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
908
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
909
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
910
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
911
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
912
- --tds-input-scrollbar-thumb-border-radius:999px;
913
- --tds-input-scrollbar-thumb-border-width:3px;
914
- --tds-input-scrollbar-track-margin-block:.125rem;
915
- scrollbar-color:initial;
916
- transition-timing-function:var(--t-ease-in-out);
917
- transition-duration:var(--t-duration-200);
918
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
919
- }
891
+ @media (prefers-reduced-motion: reduce){
920
892
 
921
- @media (pointer: fine){
922
- :is(.tds-input textarea)::-webkit-scrollbar{
923
- width:12px;
924
- height:12px;
925
- cursor:default;
893
+ .tds-radio input[type="radio"]{
894
+ --tds-radio-transition-property:none;
895
+ }
926
896
  }
927
897
 
928
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
929
- cursor:default;
930
- background:var(--tds-input-scrollbar-thumb-color);
931
- background-clip:content-box;
932
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
933
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
934
- }
898
+ .tds-radio:has(input:checked){
899
+ --tds-radio-input-background-color:var(--t-form-background-color);
900
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
901
+ --tds-radio-input-border-width:4px;
902
+ }
935
903
 
936
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
937
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
904
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
905
+ --tds-radio-input-background-color:var(--t-form-background-color);
906
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
938
907
  }
939
908
 
940
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
941
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
942
- }
909
+ .tds-radio:has(input:user-invalid){
910
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
911
+ }
943
912
 
944
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
945
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
913
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
914
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
915
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
946
916
  }
947
917
 
948
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
949
- background:var(--tds-input-scrollbar-surface-color);
950
- }
918
+ .tds-radio:has(input:disabled){
919
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
920
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
951
921
 
952
- :is(.tds-input textarea)::-webkit-resizer{
953
- background:var(--tds-input-resizer-icon) no-repeat;
954
- background-position:right bottom;
955
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
956
- }
922
+ --tds-radio-label-color:var(--t-form-color-disabled);
923
+ --tds-radio-description-color:var(--t-form-color-disabled);
924
+ --tds-radio-cursor:not-allowed;
925
+ }
957
926
 
958
- :is(.tds-input textarea)::-webkit-scrollbar-track{
959
- margin-block:var(--tds-input-scrollbar-track-margin-block);
960
- cursor:default;
927
+ .tds-radio:has(input:disabled) input:checked{
928
+ --tds-radio-input-background-color:var(--t-form-background-color);
929
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
961
930
  }
962
931
 
963
- @supports (-moz-appearance: none){
964
- :is(.tds-input textarea){
965
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
966
- scrollbar-width:thin;
967
- }
932
+ .tds-radio-description{
933
+ display:flex;
934
+ grid-area:2 / 2;
935
+ gap:var(--t-spacing-half);
936
+ align-items:flex-start;
937
+ margin:0;
938
+ font-size:var(--tds-radio-description-font-size);
939
+ line-height:var(--tds-radio-description-line-height);
940
+ color:var(--tds-radio-description-color);
941
+ cursor:text;
942
+ }
968
943
 
969
- @media (hover){
970
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
971
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
972
- }
973
- }
974
- }
975
- }
944
+ .tds-radio--sm{
945
+ --tds-radio-line-height:1.35;
946
+ --tds-radio-input-size:var(--t-element-size-sm);
947
+ --tds-radio-font-size:var(--t-font-size-sm);
948
+ --tds-radio-description-font-size:var(--t-font-size-xs);
949
+ --tds-radio-description-line-height:1.3;
950
+ }
976
951
 
977
- .tds-toggle-switch{
978
- --tds-toggle-switch-font-size:var(--t-font-size-md);
979
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
952
+ .tds-radio-group{
953
+ --tds-radio-group-font-size:var(--t-font-size-md);
954
+ --tds-radio-group-line-height:1.4;
955
+ --tds-radio-group-gap:var(--t-spacing-1);
956
+
957
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
958
+
959
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
960
+ --tds-radio-group-description-line-height:1.35;
961
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
962
+ --tds-radio-group-description-invalid-icon-display:none;
963
+ display:flex;
964
+ flex-direction:column;
965
+ gap:var(--tds-radio-group-gap);
966
+ padding:0;
967
+ margin:0;
968
+
969
+ font-size:var(--tds-radio-group-font-size);
970
+ line-height:var(--tds-radio-group-line-height);
971
+ border:0;
972
+ }
973
+
974
+ .tds-radio-group legend{
975
+ padding:0;
976
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
977
+ }
978
+
979
+ .tds-radio-group:has(.tds-radio-group-description){
980
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
981
+ }
982
+
983
+ .tds-radio-group[aria-invalid="true"]{
984
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
985
+ --tds-radio-group-description-invalid-icon-display:inline-block;
986
+ }
987
+
988
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
989
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
990
+ }
991
+
992
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
993
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
994
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
995
+ }
996
+
997
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
998
+ --tds-radio-input-background-color:var(--t-form-background-color);
999
+ }
1000
+
1001
+ .tds-radio-group:has(input:required) legend::after{
1002
+ margin-left:.25ch;
1003
+ color:var(--t-text-color-status-error);
1004
+ content:"*";
1005
+ }
1006
+
1007
+ .tds-radio-group-fields{
1008
+ display:flex;
1009
+ flex-direction:column;
1010
+ gap:var(--tds-radio-group-gap);
1011
+ align-items:flex-start;
1012
+ }
1013
+
1014
+ .tds-radio-group-description{
1015
+ display:flex;
1016
+ gap:var(--t-spacing-half);
1017
+ align-items:flex-start;
1018
+ margin:0;
1019
+ font-size:var(--tds-radio-group-description-font-size);
1020
+ line-height:var(--tds-radio-group-description-line-height);
1021
+ color:var(--tds-radio-group-description-color);
1022
+ cursor:text;
1023
+ }
1024
+
1025
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1026
+ display:var(--tds-radio-group-description-invalid-icon-display);
1027
+ flex-shrink:0;
1028
+ margin-top:calc(.5lh - .5em);
1029
+ line-height:var(--tds-radio-group-description-line-height);
1030
+ }
1031
+
1032
+ .tds-radio-group--sm{
1033
+ --tds-radio-group-line-height:1.35;
1034
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1035
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1036
+ --tds-radio-group-description-line-height:1.3;
1037
+ }
1038
+
1039
+ .tds-toggle-switch{
1040
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1041
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
980
1042
  --tds-toggle-switch-cursor:pointer;
981
1043
  --tds-toggle-switch-display:inline-grid;
982
1044
  --tds-toggle-switch-line-height:1.4;
@@ -1116,628 +1178,566 @@
1116
1178
  }
1117
1179
 
1118
1180
 
1119
- @media (prefers-reduced-motion: no-preference){
1120
-
1121
- :root{
1122
- interpolate-size:allow-keywords;
1123
- }
1124
- }
1125
-
1126
- @layer tds-component{
1127
- tds-sidenav,
1128
- .tds-sidenav{
1129
- --tds-sidenav-indent:12px;
1130
- --tds-sidenav-item-depth:0;
1131
-
1132
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1133
-
1134
- --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;
1135
- --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;
1136
- --tds-sidenav-collapse-closed-opacity:0;
1137
- --tds-sidenav-collapse-open-opacity:1;
1138
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
1139
- --tds-sidenav-collapse-open-transform:translateY(0);
1140
-
1141
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1142
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1143
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1144
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1145
-
1146
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1147
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1148
- --tds-sidenav-item-nested-background-selected:transparent;
1149
-
1150
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1151
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1152
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1153
-
1154
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1155
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1156
- }
1157
-
1158
- @media (prefers-reduced-motion: reduce){
1159
- tds-sidenav,
1160
- .tds-sidenav{
1161
- --tds-sidenav-collapse-transition-enter:none;
1162
- --tds-sidenav-collapse-transition-exit:none;
1163
- --tds-sidenav-collapse-closed-transform:none;
1164
- --tds-sidenav-collapse-open-transform:none;
1165
- }
1181
+ :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{
1182
+ -webkit-appearance:none;
1183
+ appearance:none;
1166
1184
  }
1167
1185
 
1168
- .tds-sidenav--theme-gray{
1169
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1170
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1171
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1172
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1173
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1174
- }
1175
- }
1186
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1187
+ inline-size:1em;
1188
+ block-size:2em;
1189
+ }
1176
1190
 
1177
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1178
- display:flex;
1191
+ @supports (field-sizing: content){
1192
+ .tds-input--auto-width{
1193
+ inline-size:-moz-fit-content;
1194
+ inline-size:fit-content;
1195
+ min-inline-size:min(100%, 122px);
1179
1196
  }
1180
1197
 
1181
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1182
- flex-direction:column;
1183
- gap:var(--t-spacing-half);
1184
- width:100%;
1198
+ .tds-input--auto-width input{
1199
+ field-sizing:content;
1200
+ inline-size:auto;
1185
1201
  }
1186
-
1187
- .tds-sidenav-section-list{
1188
- width:100%;
1189
- padding:0;
1190
- margin:0;
1191
- list-style:none;
1192
1202
  }
1193
1203
 
1194
- .tds-sidenav-section-header{
1195
- display:flex;
1196
- align-items:baseline;
1197
- justify-content:space-between;
1198
- padding-top:var(--t-spacing-2);
1204
+ .tds-input:has(textarea){
1205
+ --tds-input-padding-block:6px;
1206
+ --tds-input-resizer-size:var(--t-element-size-sm);
1207
+ --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");
1199
1208
  }
1200
1209
 
1201
- .tds-sidenav-section-header h2{
1202
- margin:0;
1203
- font-size:var(--t-font-size-sm);
1204
- font-weight:var(--t-font-weight-semibold);
1205
- line-height:1.35;
1206
- color:var(--t-text-color-secondary);
1207
- text-transform:uppercase;
1208
- }
1209
-
1210
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1211
- padding-top:0;
1212
- }
1213
-
1214
- .tds-sidenav-section-header [slot="label-actions"]{
1215
- display:flex;
1216
- gap:var(--t-spacing-half);
1217
- align-items:center;
1218
- }
1219
-
1220
- .tds-sidenav-section [slot="section-actions"]{
1221
- display:flex;
1222
- gap:12px;
1223
- align-items:center;
1224
- min-height:42px;
1225
- padding:var(--t-spacing-1) 0;
1226
- }
1210
+ @supports (x: attr(x type(*))){
1227
1211
 
1228
- .tds-sidenav-section-list,
1229
- .tds-sidenav-item{
1230
- width:100%;
1231
- padding:0;
1232
- margin:0;
1212
+ .tds-input:has(textarea){
1213
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1233
1214
  }
1234
-
1235
- .tds-sidenav-item :is(a,button){
1236
- position:relative;
1237
- display:flex;
1238
- gap:12px;
1239
- align-items:center;
1240
- width:100%;
1241
- padding:12px;
1242
- overflow:hidden;
1243
- font-size:var(--t-font-size-sm);
1244
- line-height:18px;
1245
- color:var(--t-text-color-headline);
1246
- white-space:nowrap;
1247
- text-decoration:none;
1248
- -webkit-appearance:none;
1249
- -moz-appearance:none;
1250
- appearance:none;
1251
- cursor:pointer;
1252
- background-color:var(--tds-sidenav-item-background, transparent);
1253
- border:0;
1254
- border-radius:var(--t-border-radius);
1255
- transition:var(--tds-sidenav-item-transition);
1256
1215
  }
1257
1216
 
1258
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1259
- display:block;
1260
- flex:1;
1261
- overflow:hidden;
1262
- text-overflow:ellipsis;
1263
- text-align:left;
1264
- white-space:nowrap;
1217
+ .tds-input.tds-textarea--resize-vertical textarea{
1218
+ resize:vertical;
1265
1219
  }
1266
1220
 
1267
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1268
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1269
- color:var(--t-text-color-headline);
1270
- text-decoration:none;
1221
+ .tds-input.tds-textarea--resize-none textarea{
1222
+ resize:none;
1271
1223
  }
1272
1224
 
1273
- :is(.tds-sidenav-item :is(a,button)):active{
1274
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1225
+ .tds-input.tds-textarea--resize-auto textarea{
1226
+ resize:vertical;
1275
1227
  }
1276
1228
 
1277
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1278
- overflow:hidden;
1279
- color:var(--tds-sidenav-item-icon-color);
1229
+ @supports (field-sizing: content){
1230
+ .tds-input.tds-textarea--resize-auto textarea{
1231
+ field-sizing:content;
1232
+ resize:none;
1233
+ }
1280
1234
  }
1281
1235
 
1282
- :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{
1283
- display:block;
1284
- width:var(--tds-sidenav-item-icon-size);
1285
- height:var(--tds-sidenav-item-icon-size);
1286
- }
1236
+ .tds-input textarea{
1237
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1238
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1239
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1240
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1241
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1242
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1243
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1244
+ --tds-input-scrollbar-thumb-border-radius:999px;
1245
+ --tds-input-scrollbar-thumb-border-width:3px;
1246
+ --tds-input-scrollbar-track-margin-block:.125rem;
1247
+ scrollbar-color:initial;
1248
+ transition-timing-function:var(--t-ease-in-out);
1249
+ transition-duration:var(--t-duration-200);
1250
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1251
+ }
1287
1252
 
1288
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1289
- --tds-sidenav-indent:19px;
1253
+ @media (pointer: fine){
1254
+ :is(.tds-input textarea)::-webkit-scrollbar{
1255
+ width:12px;
1256
+ height:12px;
1257
+ cursor:default;
1290
1258
  }
1291
1259
 
1292
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1293
- visibility:visible;
1294
- block-size:auto;
1295
- opacity:1;
1260
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1261
+ cursor:default;
1262
+ background:var(--tds-input-scrollbar-thumb-color);
1263
+ background-clip:content-box;
1264
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1265
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1296
1266
  }
1297
1267
 
1298
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1299
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1300
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1301
-
1302
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1303
- font-weight:var(--t-font-weight-semibold);
1304
- }
1268
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1270
+ }
1305
1271
 
1306
- .tds-sidenav-item:has(.tds-sidenav-section){
1307
- display:flex;
1308
- flex-direction:column;
1309
- gap:var(--t-spacing-half);
1310
- }
1272
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1274
+ }
1311
1275
 
1312
- .tds-sidenav-item .tds-sidenav-section-list{
1313
- --tds-sidenav-item-depth:1;
1314
- gap:0;
1315
- }
1276
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1278
+ }
1316
1279
 
1317
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1318
- visibility:hidden;
1319
- block-size:0;
1320
- overflow-y:clip;
1321
- opacity:0;
1322
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1280
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
+ background:var(--tds-input-scrollbar-surface-color);
1323
1282
  }
1324
1283
 
1325
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1326
- --tds-sidenav-item-depth:2;
1284
+ :is(.tds-input textarea)::-webkit-resizer{
1285
+ background:var(--tds-input-resizer-icon) no-repeat;
1286
+ background-position:right bottom;
1287
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1327
1288
  }
1328
1289
 
1329
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1330
- min-height:var(--t-element-size-2xl);
1331
- padding-block:9px;
1332
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1333
- line-height:1;
1334
- background-color:transparent;
1290
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
+ cursor:default;
1335
1293
  }
1336
1294
 
1337
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1338
- position:absolute;
1339
- top:0;
1340
- bottom:0;
1341
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1342
- width:2px;
1343
- content:"";
1344
- background-color:var(--tds-sidenav-item-nested-border-color);
1345
- transition:var(--tds-sidenav-item-transition);
1295
+ @supports (-moz-appearance: none){
1296
+ :is(.tds-input textarea){
1297
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1298
+ scrollbar-width:thin;
1346
1299
  }
1347
1300
 
1348
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1349
- position:absolute;
1350
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1351
- z-index:-1;
1352
- height:100%;
1353
- content:"";
1354
- background-color:var(--tds-sidenav-item-nested-background);
1355
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1356
- transition:var(--tds-sidenav-item-transition);
1301
+ @media (hover){
1302
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1303
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1304
+ }
1357
1305
  }
1306
+ }
1307
+ }
1358
1308
 
1359
- :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)){
1360
- display:block;
1361
- text-align:left;
1362
- white-space:normal;
1363
- }
1309
+ .tds-select{
1310
+ --tds-select-border-color:var(--t-form-border-color);
1311
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1312
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1313
+ --tds-select-background-color:var(--t-form-background-color);
1314
+ --tds-select-color:var(--t-form-color);
1315
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1316
+ --tds-select-font-size:var(--t-font-size-md);
1317
+ --tds-select-min-height:var(--t-container-size-md);
1318
+ --tds-select-padding-block:6px;
1319
+ --tds-select-description-color:var(--t-text-color-secondary);
1320
+ --tds-select-description-invalid-icon-display:none;
1321
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1322
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1323
+ --tds-select-caret-size:1em;
1324
+ --tds-select-caret-inline-offset:.75em;
1325
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1364
1326
 
1365
- :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{
1366
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1367
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1368
- }
1327
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1328
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1329
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1330
+ --tds-select-dropdown-margin-block:5px;
1331
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1332
+ --tds-select-dropdown-scrollbar-width:thin;
1333
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1334
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1335
+ --tds-select-dropdown-scroll-behavior:smooth;
1336
+ --tds-select-dropdown-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;
1337
+ --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1338
+ --tds-select-dropdown-closed-opacity:0;
1339
+ --tds-select-dropdown-open-opacity:1;
1340
+ --tds-select-dropdown-closed-transform:translateY(-8px);
1341
+ --tds-select-dropdown-open-transform:translateY(0);
1369
1342
 
1370
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1371
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1372
- }
1343
+ --tds-select-option-gap:var(--t-spacing-1);
1344
+ --tds-select-option-padding-block:var(--t-spacing-1);
1345
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1346
+ --tds-select-option-font-size:1rem;
1347
+ --tds-select-option-color:var(--t-text-color);
1348
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1349
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1350
+ --tds-select-option-border-radius:var(--t-border-radius);
1373
1351
 
1374
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1375
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1376
- font-weight:var(--t-font-weight-medium);
1377
- }
1352
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1353
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1354
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1355
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1356
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1357
+ --tds-select-group-label-letter-spacing:0;
1358
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1359
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1360
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1361
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1378
1362
 
1379
- .tds-sidenav-responsive-header{
1363
+ position:relative;
1380
1364
  display:flex;
1381
- gap:var(--t-spacing-2);
1382
- align-items:center;
1383
- width:100%;
1365
+ flex-direction:column;
1366
+ gap:var(--t-spacing-half);
1384
1367
  }
1385
1368
 
1386
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1387
- order:0;
1369
+ .tds-select :is(label,.tds-select-label){
1370
+ font-size:var(--t-font-size-md);
1371
+ font-weight:var(--t-font-weight-normal);
1372
+ color:var(--t-text-color);
1373
+ cursor:default;
1388
1374
  }
1389
1375
 
1390
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1391
- flex:1;
1392
- order:1;
1393
- margin:0;
1394
- font-size:var(--t-font-size-lg);
1395
- font-weight:var(--t-font-weight-medium);
1396
- color:var(--t-text-color-headline);
1376
+ .tds-select :is(select,button){
1377
+ position:relative;
1378
+ place-items:center;
1379
+ inline-size:100%;
1380
+ min-block-size:var(--tds-select-min-height);
1381
+ padding-block:var(--tds-select-padding-block);
1382
+ padding-inline:var(--t-spacing-1);
1383
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1384
+ font-family:inherit;
1385
+ font-size:var(--tds-select-font-size);
1386
+ line-height:1;
1387
+ color:var(--tds-select-color);
1388
+ text-align:left;
1389
+ -webkit-appearance:none;
1390
+ -moz-appearance:none;
1391
+ appearance:none;
1392
+ cursor:var(--tds-select-cursor, default);
1393
+ outline:var(--t-focus-ring-width) solid transparent;
1394
+ outline-offset:0;
1395
+ background-color:var(--tds-select-background-color);
1396
+ background-image:var(--tds-select-background-image);
1397
+ background-repeat:no-repeat;
1398
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1399
+ background-size:var(--tds-select-caret-size);
1400
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1401
+ border-radius:var(--t-form-border-radius);
1402
+ transition-timing-function:var(--t-ease-in-out);
1403
+ transition-duration:var(--t-duration-300);
1404
+ transition-property:var(--tds-select-transition-property);
1397
1405
  }
1398
1406
 
1399
- @media (max-width: 719px){
1400
- .tds-sidenav-collapse{
1401
- z-index:10001;
1402
- display:none;
1403
- max-width:min(448px, calc(100vw - 48px));
1404
- padding:0;
1405
- margin:12px 0;
1406
- position-area:bottom span-right;
1407
- overflow:hidden;
1408
- outline:0;
1409
- background:var(--t-surface-color-card);
1410
- border:0;
1411
- border-radius:6px;
1412
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1413
- opacity:var(--tds-sidenav-collapse-open-opacity);
1414
- transform:var(--tds-sidenav-collapse-open-transform);
1415
- transition:var(--tds-sidenav-collapse-transition-enter);
1416
- will-change:transform;
1417
- }
1418
-
1419
- .tds-sidenav-scroll-container{
1420
- --webkit-overflow-scrolling:touch;
1421
- display:block;
1422
- width:100%;
1423
- height:-moz-fit-content;
1424
- height:fit-content;
1425
- padding:var(--t-spacing-2);
1426
- overflow-y:auto;
1427
- }
1428
-
1429
- .tds-sidenav-item :is(a, button) :is(.prefix){
1430
- display:none;
1431
- }
1432
- @supports selector(:popover-open){
1433
- .tds-sidenav-collapse:popover-open{
1434
- display:flex;
1407
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1408
+ border-color:var(--tds-select-border-color-hover);
1435
1409
  }
1436
1410
 
1437
- .tds-sidenav-collapse:not(:popover-open){
1438
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1439
- transition:var(--tds-sidenav-collapse-transition-exit);
1411
+ :is(.tds-select :is(select,button)):focus{
1412
+ outline-color:var(--t-focus-ring-color);
1413
+ outline-offset:var(--t-focus-ring-offset);
1414
+ border-color:var(--tds-select-border-color-active);
1440
1415
  }
1441
1416
 
1442
- @starting-style{
1443
- .tds-sidenav-collapse:popover-open{
1444
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1445
- transform:var(--tds-sidenav-collapse-closed-transform);
1446
- }
1417
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1418
+ color:var(--tds-select-placeholder-color);
1447
1419
  }
1420
+
1421
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1422
+ --tds-select-border-color:var(--t-form-border-color-error);
1423
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1424
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1425
+ --tds-select-background-color:var(--t-form-background-color-error);
1426
+ --tds-select-description-color:var(--t-text-color-status-error);
1427
+ --tds-select-description-invalid-icon-display:inline-block;
1448
1428
  }
1449
- @supports not selector(:popover-open){
1450
- .tds-sidenav-collapse.\:popover-open{
1451
- display:flex;
1452
- }
1453
1429
 
1454
- .tds-sidenav-collapse:not(.\:popover-open){
1455
- opacity:var(--tds-sidenav-collapse-closed-opacity);
1456
- transition:var(--tds-sidenav-collapse-transition-exit);
1430
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1431
+ margin-left:.25ch;
1432
+ color:var(--t-text-color-status-error);
1433
+ content:"*";
1457
1434
  }
1458
- }
1459
- }
1460
1435
 
1461
- @media (min-width: 720px){
1462
- .tds-sidenav-responsive-header{
1463
- display:none;
1436
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1437
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1438
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1439
+ --tds-select-color:var(--t-form-color-disabled);
1440
+ --tds-select-cursor:not-allowed;
1464
1441
  }
1465
- }
1466
1442
 
1467
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1468
- display:none;
1469
- }
1443
+ .tds-select:has( > [popover]:popover-open) > button{
1444
+ border-color:var(--tds-select-border-color-active);
1445
+ }
1470
1446
 
1471
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1472
- display:block;
1447
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1448
+ transform:rotate(.5turn);
1473
1449
  }
1474
1450
 
1475
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1476
- display:flex;
1477
- flex-direction:column;
1478
- }
1451
+ .tds-select :is(hr,li[role="separator"]){
1452
+ margin-block:var(--t-spacing-half);
1453
+ color:var(--tds-select-border-color);
1454
+ border:0;
1455
+ border-top:1px solid;
1456
+ }
1479
1457
 
1480
- @layer t-critical{
1481
- tds-page-header:not(.hydrated){
1482
- display:none;
1458
+ .tds-select :is(li[role="option"],option:not([hidden])){
1459
+ display:block;
1460
+ padding-block:var(--tds-select-option-padding-block);
1461
+ padding-inline:var(--tds-select-option-padding-inline);
1462
+ overflow:hidden;
1463
+ text-overflow:ellipsis;
1464
+ font-size:var(--tds-select-option-font-size);
1465
+ color:var(--tds-select-option-color);
1466
+ white-space:nowrap;
1467
+ cursor:default;
1468
+ border-radius:var(--tds-select-option-border-radius);
1483
1469
  }
1484
- }
1485
1470
 
1486
- @layer t-component{
1487
- .tds-page-header{
1488
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1489
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1490
- --tds-page-header-color:var(--t-text-color);
1491
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1492
- --tds-page-header-headline-color:var(--t-text-color-headline);
1493
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1494
- --tds-page-header-padding-x:var(--t-spacing-2);
1495
- --tds-page-header-padding-y:var(--t-spacing-2);
1496
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1497
- --tds-page-header-nav-gap:var(--t-spacing-1);
1498
- --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%);
1499
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1500
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1501
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1502
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1503
- --tds-page-header-nav-item-border-width:1px;
1471
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1472
+ outline:none;
1473
+ }
1504
1474
 
1505
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1506
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1475
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1476
+ background:var(--tds-select-option-background-hover);
1477
+ }
1507
1478
 
1508
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1509
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1510
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1479
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1480
+ background:var(--tds-select-option-background-active);
1481
+ }
1511
1482
 
1512
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1513
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1483
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1484
+ color:var(--t-form-color-disabled);
1485
+ cursor:not-allowed;
1486
+ }
1514
1487
 
1515
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1516
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1517
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1488
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1489
+ background:transparent;
1490
+ }
1518
1491
 
1519
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1520
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1521
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1522
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1523
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1492
+ .tds-select :is(li[role="presentation"],legend){
1493
+ position:sticky;
1494
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1495
+ z-index:1;
1496
+ float:inline-start;
1497
+ inline-size:100%;
1498
+ padding-block:var(--tds-select-group-label-padding-block);
1499
+ padding-inline:var(--tds-select-group-label-padding-inline);
1500
+ container-type:scroll-state;
1501
+ font-size:var(--tds-select-group-label-font-size);
1502
+ font-weight:var(--tds-select-group-label-font-weight);
1503
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1504
+ background:var(--tds-select-group-label-background);
1505
+ text-box:trim-both cap alphabetic;
1524
1506
  }
1525
1507
 
1526
- .tds-page-header--profile{
1527
- --tds-page-header-padding-y:20px;
1528
- }
1508
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1509
+ display:inline-flex;
1510
+ gap:var(--t-spacing-half);
1511
+ align-items:center;
1512
+ color:var(--tds-select-group-label-color);
1513
+ transition:var(--tds-select-group-label-transition);
1514
+ }
1529
1515
 
1530
- @supports (color: light-dark(#fff, #000)){
1531
- .tds-page-header{
1532
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1533
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1516
+ @container scroll-state(stuck){
1517
+
1518
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1519
+ color:var(--tds-select-group-label-color-stuck);
1534
1520
  }
1535
- }
1536
1521
 
1537
- @media (min-width: 600px){
1538
- .tds-page-header{
1539
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1540
- --tds-page-header-color:var(--t-text-color-secondary);
1541
- --tds-page-header-bottom-border-color:var(--t-border-color);
1542
- --tds-page-header-padding-x:var(--t-spacing-3);
1543
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1544
- --tds-page-header-nav-gap:var(--t-spacing-half);
1545
- --tds-page-header-nav-background:transparent;
1546
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1547
- --tds-page-header-nav-item-border-width:1px;
1548
- --tds-page-header-nav-item-color:var(--t-text-color);
1549
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1550
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1551
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1552
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1553
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1522
+ @media (forced-colors: active){
1523
+
1524
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1525
+ color:var(--tds-select-group-label-color-stuck);
1554
1526
  }
1527
+ }
1528
+ }
1529
+
1530
+ .tds-select.tds-select--lg{
1531
+ --tds-select-min-height:var(--t-container-size-lg);
1532
+ --tds-select-font-size:var(--t-font-size-lg);
1555
1533
  }
1534
+
1535
+ @media (prefers-reduced-motion: reduce){
1536
+
1537
+ .tds-select{
1538
+ --tds-select-transition-property:none;
1539
+ --tds-select-dropdown-transition-enter:none;
1540
+ --tds-select-dropdown-transition-exit:none;
1541
+ --tds-select-dropdown-scroll-behavior:auto;
1542
+ --tds-select-dropdown-closed-transform:none;
1543
+ --tds-select-dropdown-open-transform:none;
1544
+ --tds-select-caret-transition:none;
1556
1545
  }
1546
+ }
1557
1547
 
1558
- .tds-page-header{
1548
+ .tds-select-description{
1559
1549
  display:flex;
1560
- flex-direction:column;
1561
- padding-top:var(--tds-page-header-padding-y);
1562
- color:var(--tds-page-header-color);
1563
- background:var(--tds-page-header-background-color);
1564
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1550
+ gap:var(--t-spacing-half);
1551
+ align-items:flex-start;
1552
+ margin:0;
1553
+ font-size:var(--t-font-size-sm);
1554
+ line-height:1.35;
1555
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1556
+ cursor:text;
1565
1557
  }
1566
1558
 
1567
- .tds-page-header:not(.has-nav){
1568
- padding-bottom:var(--tds-page-header-padding-y);
1569
- }
1570
-
1571
- .tds-page-header.inactive{
1572
- background:var(--tds-page-header-background-color-inactive);
1559
+ .tds-select-description .tds-select-description-invalid-icon{
1560
+ display:var(--tds-select-description-invalid-icon-display, none);
1561
+ flex-shrink:0;
1562
+ margin-block-start:calc(.5lh - .5em);
1563
+ line-height:1.35;
1573
1564
  }
1574
1565
 
1575
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1576
- width:100%;
1577
- }
1566
+ .tds-select > .tds-select-hidden-select{
1567
+ position:absolute;
1568
+ inline-size:1px;
1569
+ block-size:1px;
1570
+ padding:0;
1571
+ margin:0;
1572
+ pointer-events:none;
1573
+ opacity:0;
1574
+ }
1578
1575
 
1579
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1580
- display:flex;
1581
- flex-flow:row wrap;
1582
- gap:var(--t-spacing-half) var(--t-spacing-1);
1583
- align-items:flex-start;
1584
- justify-content:flex-start;
1585
- min-width:0;
1576
+ .tds-select:has( > button) > button{
1577
+ display:block;
1578
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1579
+ overflow:hidden;
1580
+ text-overflow:ellipsis;
1581
+ color:var(--tds-select-placeholder-color);
1582
+ white-space:nowrap;
1583
+ background-image:none;
1584
+ 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);
1585
+ -webkit-tap-highlight-color:transparent;
1586
1586
  }
1587
1587
 
1588
- :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{
1589
- display:flex;
1590
- gap:var(--tds-page-header-nav-gap);
1591
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1592
- margin:0 0 -1px;
1593
- overflow:auto;
1594
- list-style:none;
1595
- background:var(--tds-page-header-nav-background);
1596
- }
1597
-
1598
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1599
- position:relative;
1600
- display:inline-flex;
1601
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1602
- font-size:var(--t-font-size-sm);
1603
- line-height:22px;
1604
- color:var(--tds-page-header-nav-item-color);
1605
- white-space:nowrap;
1606
- text-decoration:none;
1607
- -webkit-appearance:none;
1608
- -moz-appearance:none;
1609
- appearance:none;
1610
- cursor:pointer;
1611
- outline-offset:-2px;
1612
- background-color:var(--tds-page-header-nav-item-background-color);
1613
- background-clip:padding-box;
1614
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1615
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1616
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1588
+ :is(.tds-select:has( > button) > button)::after{
1589
+ position:absolute;
1590
+ inset-block:0;
1591
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1592
+ width:var(--tds-select-caret-size);
1593
+ height:var(--tds-select-caret-size);
1594
+ margin-block:auto;
1595
+ pointer-events:none;
1596
+ content:var(--tds-select-background-image);
1597
+ transform:rotate(0);
1598
+ transition:var(--tds-select-caret-transition);
1617
1599
  }
1618
1600
 
1619
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1620
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1621
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1622
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1623
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1624
- }
1625
-
1626
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1627
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1628
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1629
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1630
- }
1631
-
1632
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1633
- background-color:var(--tds-page-header-nav-item-background-color-active);
1634
- border-color:var(--tds-page-header-nav-item-border-color-active);
1635
- }
1636
-
1637
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1638
- color:var(--tds-page-header-nav-item-color-disabled);
1639
- cursor:not-allowed;
1640
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1641
- opacity:1;
1642
- }
1601
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1602
+ color:var(--tds-select-color);
1603
+ }
1643
1604
 
1644
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1645
- position:relative;
1646
- }
1605
+ .tds-select:has( > button) [popover]{
1606
+ inset:auto;
1607
+ inline-size:-moz-max-content;
1608
+ inline-size:max-content;
1609
+ min-inline-size:anchor-size(width);
1610
+ max-inline-size:100vi;
1611
+ max-block-size:min(50vh, 20rem);
1612
+ padding:var(--tds-select-dropdown-padding);
1613
+ margin-block:var(--tds-select-dropdown-margin-block);
1614
+ position-area:block-end span-inline-start;
1615
+ position-try-fallbacks:flip-block, flip-inline;
1616
+ overflow:auto;
1617
+ overflow-x:hidden;
1618
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1619
+ overscroll-behavior:none;
1620
+ -webkit-user-select:none;
1621
+ -moz-user-select:none;
1622
+ user-select:none;
1623
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1624
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1625
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1626
+ background:var(--tds-select-dropdown-background-color);
1627
+ border:var(--tds-select-dropdown-border);
1628
+ border-radius:var(--tds-select-dropdown-border-radius);
1629
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1630
+ opacity:var(--tds-select-dropdown-open-opacity);
1631
+ transform:var(--tds-select-dropdown-open-transform);
1632
+ transition:var(--tds-select-dropdown-transition-enter);
1633
+ }
1647
1634
 
1648
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1649
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1650
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1651
- }
1635
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1636
+ opacity:var(--tds-select-dropdown-closed-opacity);
1637
+ transform:var(--tds-select-dropdown-closed-transform);
1638
+ transition:var(--tds-select-dropdown-transition-exit);
1639
+ }
1652
1640
 
1653
- :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{
1654
- position:absolute;
1655
- top:-5px;
1656
- right:-2px;
1657
- width:10px;
1658
- height:10px;
1659
- content:"";
1660
- background:var(--tds-page-header-nav-item-indicator-color);
1661
- border-radius:50%;
1662
- }
1641
+ :is(.tds-select:has( > button) [popover]) ul{
1642
+ padding:0;
1643
+ margin:0;
1644
+ list-style:none;
1645
+ }
1663
1646
 
1664
- @media (prefers-reduced-motion: no-preference){
1665
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1666
- animation:indicator-pulse 1.25s ease infinite;
1667
- }
1647
+ @starting-style{
1648
+ :is(.tds-select:has( > button) [popover]):popover-open{
1649
+ opacity:var(--tds-select-dropdown-closed-opacity);
1650
+ transform:var(--tds-select-dropdown-closed-transform);
1668
1651
  }
1652
+ }
1669
1653
 
1670
- .tds-page-header__title-bar{
1671
- display:flex;
1672
- flex-direction:column;
1673
- gap:var(--t-spacing-2) var(--t-spacing-1);
1674
- align-items:flex-start;
1675
- justify-content:space-between;
1676
- padding:0 var(--tds-page-header-padding-x);
1677
- }
1678
-
1679
- .tds-page-header--profile > .tds-page-header__title-bar{
1680
- align-items:center;
1654
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1655
+ .tds-select select:has(> button){
1656
+ padding-inline-end:0;
1657
+ background-image:none;
1681
1658
  }
1659
+ @media (hover) and (pointer: fine){
1660
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1661
+ padding-block:0;
1662
+ -webkit-appearance:base-select;
1663
+ -moz-appearance:base-select;
1664
+ appearance:base-select;
1665
+ }
1666
+ }
1667
+ :is(.tds-select select:has( > button))::picker-icon{
1668
+ flex-shrink:0;
1669
+ width:var(--tds-select-caret-size);
1670
+ height:var(--tds-select-caret-size);
1671
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1672
+ content:var(--tds-select-background-image);
1673
+ transition:var(--tds-select-caret-transition);
1674
+ }
1682
1675
 
1683
- .tds-page-header__primary{
1684
- width:100%;
1685
- }
1686
-
1687
- .tds-page-header__primary h1{
1688
- margin:0;
1689
- font-size:var(--tds-page-header-headline-font-size);
1690
- font-weight:var(--t-font-weight-normal);
1691
- line-height:32px;
1692
- color:var(--tds-page-header-headline-color);
1693
- overflow-wrap:break-word;
1694
- }
1676
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1677
+ opacity:var(--tds-select-dropdown-closed-opacity);
1678
+ transform:var(--tds-select-dropdown-closed-transform);
1679
+ transition:var(--tds-select-dropdown-transition-exit);
1680
+ }
1695
1681
 
1696
- @media (min-width: 960px){
1697
- .tds-page-header__primary{
1698
- flex:1 1 max-content;
1699
- width:auto;
1700
- min-width:0;
1701
- max-width:100%;
1702
- }
1682
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1683
+ outline-color:var(--t-focus-ring-color);
1684
+ outline-offset:var(--t-focus-ring-offset);
1685
+ border-color:var(--tds-select-border-color-active);
1686
+ }
1703
1687
 
1704
- .tds-page-header__title-bar,
1705
- .tds-page-header--profile .tds-page-header__title-bar{
1706
- flex-flow:row nowrap;
1707
- row-gap:12px;
1708
- align-items:flex-start;
1709
- }
1710
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1711
- width:auto;
1688
+ :is(.tds-select select:has( > button)):open::picker-icon{
1689
+ opacity:1;
1690
+ transform:rotate(.5turn);
1712
1691
  }
1713
1692
 
1714
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1715
- justify-content:flex-end;
1693
+ :is(.tds-select select:has( > button)) selectedcontent{
1694
+ overflow:hidden;
1695
+ text-overflow:ellipsis;
1696
+ line-height:calc(var(--tds-select-min-height) - 2px);
1697
+ white-space:nowrap;
1716
1698
  }
1717
- }
1718
1699
 
1719
- .tds-page-header-phone,
1720
- .tds-page-header-email{
1721
- color:var(--tds-page-header-color);
1722
- white-space:nowrap;
1723
- }
1700
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1701
+ color:var(--tds-select-placeholder-color);
1702
+ }
1724
1703
 
1725
- .tds-page-header-email{
1726
- max-width:100%;
1727
- overflow:hidden;
1728
- text-overflow:ellipsis;
1729
- }
1704
+ :is(.tds-select select:has( > button))::picker(select){
1705
+ inset:auto;
1706
+ inline-size:-moz-max-content;
1707
+ inline-size:max-content;
1708
+ min-inline-size:anchor-size(width);
1709
+ max-inline-size:100vi;
1710
+ padding:var(--tds-select-dropdown-padding);
1711
+ margin-block:var(--tds-select-dropdown-margin-block);
1712
+ position-try-fallbacks:flip-block, flip-inline;
1713
+ overflow:auto;
1714
+ overflow-x:hidden;
1715
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1716
+ overscroll-behavior:none;
1717
+ -webkit-user-select:none;
1718
+ -moz-user-select:none;
1719
+ user-select:none;
1720
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1721
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1722
+ background:var(--tds-select-dropdown-background-color);
1723
+ border:var(--tds-select-dropdown-border);
1724
+ border-radius:var(--tds-select-dropdown-border-radius);
1725
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1726
+ opacity:var(--tds-select-dropdown-open-opacity);
1727
+ transform:var(--tds-select-dropdown-open-transform);
1728
+ transition:var(--tds-select-dropdown-transition-enter);
1729
+ }
1730
1730
 
1731
- @keyframes indicator-pulse{
1732
- 0%{
1733
- opacity:.3;
1734
- transform:scale(.9);
1735
- }
1731
+ :is(.tds-select select:has( > button)) option::checkmark{
1732
+ display:none;
1733
+ }
1736
1734
 
1737
- 100%{
1738
- opacity:0;
1739
- transform:scale(1.75);
1740
- }
1735
+ @starting-style{
1736
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1737
+ opacity:var(--tds-select-dropdown-closed-opacity);
1738
+ transform:var(--tds-select-dropdown-closed-transform);
1739
+ }
1740
+ }
1741
1741
  }
1742
1742
 
1743
1743
  .tds-input{
@@ -3282,123 +3282,45 @@ a[class="tds-btn"]{
3282
3282
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
3283
3283
  --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
3284
3284
  --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
3285
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
3286
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
3287
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
3288
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
3289
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
3290
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
3291
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
3292
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
3293
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
3294
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
3295
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
3296
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
3297
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
3298
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
3299
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
3300
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
3301
- --t-surface-color-card:hsl(0, 0%, 12%);
3302
- --t-surface-color-canvas:hsl(0, 0%, 10%);
3303
- --t-border-color:hsl(0, 0%, 21%);
3304
- --t-border-color-dark:hsl(0, 0%, 25%);
3305
- --t-border-color-darker:hsl(0, 0%, 33%);
3306
- --t-border-color-darkest:hsl(0, 0%, 38%);
3307
- --t-border-color-disabled:hsl(0, 0%, 21%);
3308
- --t-border-color-dim:hsl(0, 0%, 16%);
3309
- --t-border-color-white:hsl(0, 0%, 12%);
3310
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
3311
- --t-border-color-status-info:hsl(204, 100%, 35%);
3312
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
3313
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
3314
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
3315
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
3316
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
3317
- --t-border-color-control-info:hsl(204, 100%, 35%);
3318
- --t-border-color-control-disabled:hsl(0, 0%, 24%);
3319
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3320
- }
3321
- }
3322
-
3323
- @media (prefers-color-scheme: dark){
3324
- }
3325
-
3326
- .tds-checkbox-group{
3327
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3328
- --tds-checkbox-group-line-height:1.4;
3329
- --tds-checkbox-group-gap:var(--t-spacing-1);
3330
-
3331
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3332
-
3333
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3334
- --tds-checkbox-group-description-line-height:1.35;
3335
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3336
- --tds-checkbox-group-description-invalid-icon-display:none;
3337
- display:flex;
3338
- flex-direction:column;
3339
- gap:var(--tds-checkbox-group-gap);
3340
- padding:0;
3341
- margin:0;
3342
-
3343
- font-size:var(--tds-checkbox-group-font-size);
3344
- line-height:var(--tds-checkbox-group-line-height);
3345
- border:0;
3346
- }
3347
-
3348
- .tds-checkbox-group legend{
3349
- padding:0;
3350
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3351
- }
3352
-
3353
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3354
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3355
- }
3356
-
3357
- .tds-checkbox-group[aria-invalid="true"]{
3358
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3359
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3360
- }
3361
-
3362
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3363
- margin-left:.25ch;
3364
- color:var(--t-text-color-status-error);
3365
- content:"*";
3366
- }
3367
-
3368
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3369
- content:none;
3370
- }
3371
-
3372
- .tds-checkbox-group-fields{
3373
- display:flex;
3374
- flex-direction:column;
3375
- gap:var(--tds-checkbox-group-gap);
3376
- align-items:flex-start;
3285
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
3286
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
3287
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
3288
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
3289
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
3290
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
3291
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
3292
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
3293
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
3294
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
3295
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
3296
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
3297
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
3298
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
3299
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
3300
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
3301
+ --t-surface-color-card:hsl(0, 0%, 12%);
3302
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
3303
+ --t-border-color:hsl(0, 0%, 21%);
3304
+ --t-border-color-dark:hsl(0, 0%, 25%);
3305
+ --t-border-color-darker:hsl(0, 0%, 33%);
3306
+ --t-border-color-darkest:hsl(0, 0%, 38%);
3307
+ --t-border-color-disabled:hsl(0, 0%, 21%);
3308
+ --t-border-color-dim:hsl(0, 0%, 16%);
3309
+ --t-border-color-white:hsl(0, 0%, 12%);
3310
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
3311
+ --t-border-color-status-info:hsl(204, 100%, 35%);
3312
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
3313
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
3314
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
3315
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
3316
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
3317
+ --t-border-color-control-info:hsl(204, 100%, 35%);
3318
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
3319
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3377
3320
  }
3378
-
3379
- .tds-checkbox-group-description{
3380
- display:flex;
3381
- gap:var(--t-spacing-half);
3382
- align-items:flex-start;
3383
- margin:0;
3384
- font-size:var(--tds-checkbox-group-description-font-size);
3385
- line-height:var(--tds-checkbox-group-description-line-height);
3386
- color:var(--tds-checkbox-group-description-color);
3387
- cursor:text;
3388
3321
  }
3389
3322
 
3390
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3391
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3392
- flex-shrink:0;
3393
- margin-top:calc(.5lh - .5em);
3394
- line-height:var(--tds-checkbox-group-description-line-height);
3395
- }
3396
-
3397
- .tds-checkbox-group--sm{
3398
- --tds-checkbox-group-line-height:1.35;
3399
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3400
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3401
- --tds-checkbox-group-description-line-height:1.3;
3323
+ @media (prefers-color-scheme: dark){
3402
3324
  }
3403
3325
 
3404
3326
  .tds-combo-box{
@@ -3683,18 +3605,19 @@ a[class="tds-btn"]{
3683
3605
  line-height:1.35;
3684
3606
  }
3685
3607
 
3686
- .tds-time-field{
3687
- --tds-time-field-border-color:var(--t-form-border-color);
3688
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3689
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3690
- --tds-time-field-background-color:var(--t-form-background-color);
3691
- --tds-time-field-color:var(--t-form-color);
3692
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3693
- --tds-time-field-font-size:var(--t-font-size-md);
3694
- --tds-time-field-min-height:var(--t-container-size-md);
3695
- --tds-time-field-padding-block:6px;
3696
- --tds-time-field-description-color:var(--t-text-color-secondary);
3697
- --tds-time-field-description-invalid-icon-display:none;
3608
+ .tds-date-picker{
3609
+ --tds-date-picker-border-color:var(--t-form-border-color);
3610
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3611
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3612
+ --tds-date-picker-background-color:var(--t-form-background-color);
3613
+ --tds-date-picker-color:var(--t-form-color);
3614
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3615
+ --tds-date-picker-font-size:var(--t-font-size-md);
3616
+ --tds-date-picker-min-height:var(--t-container-size-md);
3617
+ --tds-date-picker-padding-block:6px;
3618
+ --tds-date-picker-button-offset:4px;
3619
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3620
+ --tds-date-picker-description-invalid-icon-display:none;
3698
3621
 
3699
3622
  position:relative;
3700
3623
  display:flex;
@@ -3702,133 +3625,289 @@ a[class="tds-btn"]{
3702
3625
  gap:var(--t-spacing-half);
3703
3626
  }
3704
3627
 
3705
- .tds-time-field[data-required] .tds-time-field-label::after{
3628
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3706
3629
  margin-left:.25ch;
3707
3630
  color:var(--t-text-color-status-error);
3708
3631
  content:"*";
3709
3632
  }
3710
3633
 
3711
- .tds-time-field[data-invalid]{
3712
- --tds-time-field-border-color:var(--t-form-border-color-error);
3713
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3714
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3715
- --tds-time-field-background-color:var(--t-form-background-color-error);
3716
- --tds-time-field-description-color:var(--t-text-color-status-error);
3717
- --tds-time-field-description-invalid-icon-display:inline-block;
3634
+ .tds-date-picker[data-invalid]{
3635
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3636
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3637
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3638
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3639
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3640
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3718
3641
  }
3719
3642
 
3720
- .tds-time-field[data-disabled]{
3721
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3722
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3723
- --tds-time-field-color:var(--t-form-color-disabled);
3724
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3643
+ .tds-date-picker[data-disabled]{
3644
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3645
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3646
+ --tds-date-picker-color:var(--t-form-color-disabled);
3647
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3725
3648
  }
3726
3649
 
3727
- .tds-time-field[data-disabled] .tds-time-field-label{
3728
- color:var(--t-form-color-disabled);
3650
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3651
+ cursor:not-allowed;
3652
+ }
3653
+
3654
+ .tds-date-picker--lg{
3655
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3656
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3657
+ --tds-date-picker-button-offset:5px;
3658
+ }
3659
+
3660
+ .tds-date-picker-label{
3661
+ font-size:var(--t-font-size-md);
3662
+ font-weight:var(--t-font-weight-normal);
3663
+ color:var(--t-text-color);
3664
+ cursor:default;
3665
+ }
3666
+
3667
+ .tds-date-picker-field{
3668
+ display:flex;
3669
+ align-items:center;
3670
+ inline-size:100%;
3671
+ min-block-size:var(--tds-date-picker-min-height);
3672
+ font-family:inherit;
3673
+ font-size:var(--tds-date-picker-font-size);
3674
+ line-height:1;
3675
+ color:var(--tds-date-picker-color);
3676
+ -webkit-appearance:none;
3677
+ -moz-appearance:none;
3678
+ appearance:none;
3679
+ cursor:text;
3680
+ outline:var(--t-focus-ring-width) solid transparent;
3681
+ outline-offset:0;
3682
+ background-color:var(--tds-date-picker-background-color);
3683
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3684
+ border-radius:var(--t-form-border-radius);
3685
+ }
3686
+
3687
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3688
+ border-color:var(--tds-date-picker-border-color-hover);
3689
+ }
3690
+
3691
+ .tds-date-picker-field[data-focus-within]{
3692
+ outline-color:var(--t-focus-ring-color);
3693
+ outline-offset:var(--t-focus-ring-offset);
3694
+ border-color:var(--tds-date-picker-border-color-active);
3695
+ }
3696
+
3697
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3698
+ color:var(--t-form-color-readonly);
3699
+ background-color:var(--t-form-background-color-readonly);
3700
+ border-color:var(--t-form-border-color-readonly);
3701
+ }
3702
+
3703
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3704
+ border-color:var(--t-form-border-color-readonly);
3705
+ }
3706
+
3707
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3708
+ outline-color:var(--t-focus-ring-color);
3709
+ outline-offset:var(--t-focus-ring-offset);
3710
+ border-color:var(--t-form-border-color-hover);
3729
3711
  }
3730
3712
 
3731
- .tds-time-field[data-disabled] .tds-time-field-input{
3732
- cursor:not-allowed;
3713
+ .tds-date-picker-input{
3714
+ flex:1;
3715
+ padding-block:var(--tds-date-picker-padding-block);
3716
+ padding-inline-start:var(--t-spacing-1);
3717
+ font-variant-numeric:tabular-nums;
3718
+ }
3719
+
3720
+ .tds-date-picker-segment{
3721
+ padding-inline:2px;
3722
+ caret-color:transparent;
3723
+ border-radius:var(--t-border-radius-sm);
3724
+ }
3725
+
3726
+ .tds-date-picker-segment[data-placeholder]{
3727
+ color:var(--tds-date-picker-placeholder-color);
3728
+ }
3729
+
3730
+ .tds-date-picker-segment[data-focused]{
3731
+ color:var(--t-text-color-inverted);
3732
+ outline:0;
3733
+ background:var(--t-fill-color-interaction);
3734
+ }
3735
+
3736
+ .tds-date-picker-segment-separator{
3737
+ padding-inline:0;
3738
+ color:var(--tds-date-picker-placeholder-color);
3739
+ }
3740
+
3741
+ .tds-date-picker-description{
3742
+ display:flex;
3743
+ gap:var(--t-spacing-half);
3744
+ align-items:flex-start;
3745
+ margin:0;
3746
+ font-size:var(--t-font-size-sm);
3747
+ line-height:1.35;
3748
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3749
+ cursor:text;
3750
+ }
3751
+
3752
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3753
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3754
+ flex-shrink:0;
3755
+ margin-block-start:calc(.5lh - .5em);
3756
+ line-height:1.35;
3757
+ }
3758
+
3759
+ .tds-date-picker-button{
3760
+ flex-shrink:0;
3761
+ align-self:center;
3762
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3763
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3764
+ padding:0;
3765
+ margin-inline-end:var(--tds-date-picker-button-offset);
3766
+ }
3767
+
3768
+ .tds-date-picker-popover{
3769
+ padding:var(--t-spacing-2);
3770
+ background:var(--t-surface-color-card);
3771
+ border:1px solid var(--t-border-color);
3772
+ border-radius:var(--t-border-radius);
3773
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3774
+ }
3775
+
3776
+ .tds-date-picker-popover[data-entering]{
3777
+ animation:tds-date-picker-popover-enter 160ms ease;
3778
+ }
3779
+
3780
+ .tds-date-picker-popover[data-exiting]{
3781
+ animation:tds-date-picker-popover-exit 130ms ease;
3782
+ }
3783
+
3784
+ @keyframes tds-date-picker-popover-enter{
3785
+ from{
3786
+ opacity:0;
3787
+ transform:translateY(-8px);
3788
+ }
3789
+ }
3790
+
3791
+ @keyframes tds-date-picker-popover-exit{
3792
+ to{
3793
+ opacity:0;
3794
+ transform:translateY(-8px);
3795
+ }
3796
+ }
3797
+
3798
+ @media (prefers-reduced-motion: reduce){
3799
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3800
+ animation:none;
3733
3801
  }
3802
+ }
3734
3803
 
3735
- .tds-time-field--lg{
3736
- --tds-time-field-min-height:var(--t-container-size-lg);
3737
- --tds-time-field-font-size:var(--t-font-size-lg);
3804
+ .tds-date-picker-calendar{
3805
+ inline-size:-moz-fit-content;
3806
+ inline-size:fit-content;
3738
3807
  }
3739
3808
 
3740
- .tds-time-field-label{
3809
+ .tds-date-picker-calendar-header{
3810
+ display:flex;
3811
+ align-items:center;
3812
+ justify-content:space-between;
3813
+ padding-block-end:var(--t-spacing-1);
3814
+ }
3815
+
3816
+ .tds-date-picker-calendar-title{
3817
+ flex:1;
3818
+ margin:0;
3741
3819
  font-size:var(--t-font-size-md);
3742
- font-weight:var(--t-font-weight-normal);
3743
- color:var(--t-text-color);
3744
- cursor:default;
3820
+ font-weight:var(--t-font-weight-semibold);
3821
+ text-align:center;
3745
3822
  }
3746
3823
 
3747
- .tds-time-field-input{
3824
+ .tds-date-picker-calendar-nav{
3748
3825
  display:flex;
3749
3826
  align-items:center;
3750
- inline-size:100%;
3751
- min-block-size:var(--tds-time-field-min-height);
3752
- padding-block:var(--tds-time-field-padding-block);
3753
- padding-inline:var(--t-spacing-1);
3754
- font-family:inherit;
3755
- font-size:var(--tds-time-field-font-size);
3756
- font-variant-numeric:tabular-nums;
3757
- line-height:1;
3758
- color:var(--tds-time-field-color);
3759
- cursor:text;
3760
- outline:var(--t-focus-ring-width) solid transparent;
3761
- outline-offset:0;
3762
- background-color:var(--tds-time-field-background-color);
3763
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3764
- border-radius:var(--t-form-border-radius);
3827
+ justify-content:center;
3828
+ padding:var(--t-spacing-half);
3829
+ color:var(--t-text-color);
3830
+ cursor:default;
3831
+ outline:0;
3832
+ background:transparent;
3833
+ border:0;
3834
+ border-radius:var(--t-border-radius-sm);
3765
3835
  }
3766
3836
 
3767
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3768
- border-color:var(--tds-time-field-border-color-hover);
3837
+ .tds-date-picker-calendar-nav[data-hovered]{
3838
+ background:var(--t-fill-color-neutral-070);
3769
3839
  }
3770
3840
 
3771
- .tds-time-field-input[data-focus-within]{
3772
- outline-color:var(--t-focus-ring-color);
3841
+ .tds-date-picker-calendar-nav[data-pressed]{
3842
+ background:var(--t-fill-color-button-interaction-ghost-active);
3843
+ }
3844
+
3845
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3846
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3773
3847
  outline-offset:var(--t-focus-ring-offset);
3774
- border-color:var(--tds-time-field-border-color-active);
3775
3848
  }
3776
3849
 
3777
- .tds-time-field-input[data-readonly]{
3778
- color:var(--t-form-color-readonly);
3779
- background-color:var(--t-form-background-color-readonly);
3780
- border-color:var(--t-form-border-color-readonly);
3850
+ .tds-date-picker-calendar-nav[data-disabled]{
3851
+ color:var(--t-form-color-disabled);
3852
+ cursor:not-allowed;
3781
3853
  }
3782
3854
 
3783
- .tds-time-field-input[data-readonly][data-hovered]{
3784
- border-color:var(--t-form-border-color-readonly);
3785
- }
3855
+ .tds-date-picker-calendar-grid{
3856
+ border-collapse:collapse;
3857
+ }
3786
3858
 
3787
- .tds-time-field-input[data-readonly][data-focus-within]{
3788
- outline-color:var(--t-focus-ring-color);
3789
- outline-offset:var(--t-focus-ring-offset);
3790
- border-color:var(--t-form-border-color-hover);
3791
- }
3859
+ .tds-date-picker-calendar-header-cell{
3860
+ padding-block:var(--t-spacing-half);
3861
+ font-size:var(--t-font-size-sm);
3862
+ font-weight:var(--t-font-weight-normal);
3863
+ color:var(--t-text-color-secondary);
3864
+ text-align:center;
3865
+ }
3792
3866
 
3793
- .tds-time-field-segment{
3794
- padding-inline:1px;
3795
- font-variant-numeric:tabular-nums;
3796
- cursor:text;
3797
- caret-color:transparent;
3867
+ .tds-date-picker-calendar-cell{
3868
+ display:flex;
3869
+ align-items:center;
3870
+ justify-content:center;
3871
+ inline-size:2.25rem;
3872
+ block-size:2.25rem;
3873
+ font-size:var(--t-font-size-md);
3874
+ color:var(--t-text-color);
3875
+ cursor:default;
3876
+ outline:0;
3798
3877
  border-radius:var(--t-border-radius-sm);
3799
3878
  }
3800
3879
 
3801
- .tds-time-field-segment[data-placeholder]{
3802
- color:var(--tds-time-field-placeholder-color);
3880
+ .tds-date-picker-calendar-cell[data-hovered]{
3881
+ background:var(--t-fill-color-neutral-070);
3803
3882
  }
3804
3883
 
3805
- .tds-time-field-segment[data-focused]{
3884
+ .tds-date-picker-calendar-cell[data-pressed]{
3885
+ background:var(--t-fill-color-button-interaction-ghost-active);
3886
+ }
3887
+
3888
+ .tds-date-picker-calendar-cell[data-selected]{
3806
3889
  color:var(--t-text-color-inverted);
3807
- outline:0;
3808
3890
  background:var(--t-fill-color-interaction);
3809
3891
  }
3810
3892
 
3811
- .tds-time-field-segment-separator{
3812
- padding-inline:0;
3813
- color:var(--tds-time-field-placeholder-color);
3814
- }
3893
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3894
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3895
+ outline-offset:var(--t-focus-ring-offset);
3896
+ }
3815
3897
 
3816
- .tds-time-field-description{
3817
- display:flex;
3818
- gap:var(--t-spacing-half);
3819
- align-items:flex-start;
3820
- margin:0;
3821
- font-size:var(--t-font-size-sm);
3822
- line-height:1.35;
3823
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3824
- cursor:text;
3825
- }
3898
+ .tds-date-picker-calendar-cell[data-unavailable]{
3899
+ color:var(--t-text-color-secondary);
3900
+ text-decoration:line-through;
3901
+ cursor:not-allowed;
3902
+ }
3826
3903
 
3827
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3828
- display:var(--tds-time-field-description-invalid-icon-display, none);
3829
- flex-shrink:0;
3830
- margin-block-start:calc(.5lh - .5em);
3831
- line-height:1.35;
3904
+ .tds-date-picker-calendar-cell[data-disabled]{
3905
+ color:var(--t-form-color-disabled);
3906
+ cursor:not-allowed;
3907
+ }
3908
+
3909
+ .tds-date-picker-calendar-cell[data-outside-month]{
3910
+ color:var(--t-text-color-secondary);
3832
3911
  }
3833
3912
 
3834
3913
  .tds-number-stepper{
@@ -3984,19 +4063,96 @@ a[class="tds-btn"]{
3984
4063
  line-height:1.35;
3985
4064
  }
3986
4065
 
3987
- .tds-date-picker{
3988
- --tds-date-picker-border-color:var(--t-form-border-color);
3989
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3990
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3991
- --tds-date-picker-background-color:var(--t-form-background-color);
3992
- --tds-date-picker-color:var(--t-form-color);
3993
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3994
- --tds-date-picker-font-size:var(--t-font-size-md);
3995
- --tds-date-picker-min-height:var(--t-container-size-md);
3996
- --tds-date-picker-padding-block:6px;
3997
- --tds-date-picker-button-offset:4px;
3998
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3999
- --tds-date-picker-description-invalid-icon-display:none;
4066
+ .tds-checkbox-group{
4067
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
4068
+ --tds-checkbox-group-line-height:1.4;
4069
+ --tds-checkbox-group-gap:var(--t-spacing-1);
4070
+
4071
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4072
+
4073
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4074
+ --tds-checkbox-group-description-line-height:1.35;
4075
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4076
+ --tds-checkbox-group-description-invalid-icon-display:none;
4077
+ display:flex;
4078
+ flex-direction:column;
4079
+ gap:var(--tds-checkbox-group-gap);
4080
+ padding:0;
4081
+ margin:0;
4082
+
4083
+ font-size:var(--tds-checkbox-group-font-size);
4084
+ line-height:var(--tds-checkbox-group-line-height);
4085
+ border:0;
4086
+ }
4087
+
4088
+ .tds-checkbox-group legend{
4089
+ padding:0;
4090
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4091
+ }
4092
+
4093
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
4094
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4095
+ }
4096
+
4097
+ .tds-checkbox-group[aria-invalid="true"]{
4098
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4099
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
4100
+ }
4101
+
4102
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4103
+ margin-left:.25ch;
4104
+ color:var(--t-text-color-status-error);
4105
+ content:"*";
4106
+ }
4107
+
4108
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4109
+ content:none;
4110
+ }
4111
+
4112
+ .tds-checkbox-group-fields{
4113
+ display:flex;
4114
+ flex-direction:column;
4115
+ gap:var(--tds-checkbox-group-gap);
4116
+ align-items:flex-start;
4117
+ }
4118
+
4119
+ .tds-checkbox-group-description{
4120
+ display:flex;
4121
+ gap:var(--t-spacing-half);
4122
+ align-items:flex-start;
4123
+ margin:0;
4124
+ font-size:var(--tds-checkbox-group-description-font-size);
4125
+ line-height:var(--tds-checkbox-group-description-line-height);
4126
+ color:var(--tds-checkbox-group-description-color);
4127
+ cursor:text;
4128
+ }
4129
+
4130
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4131
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
4132
+ flex-shrink:0;
4133
+ margin-top:calc(.5lh - .5em);
4134
+ line-height:var(--tds-checkbox-group-description-line-height);
4135
+ }
4136
+
4137
+ .tds-checkbox-group--sm{
4138
+ --tds-checkbox-group-line-height:1.35;
4139
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
4140
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4141
+ --tds-checkbox-group-description-line-height:1.3;
4142
+ }
4143
+
4144
+ .tds-time-field{
4145
+ --tds-time-field-border-color:var(--t-form-border-color);
4146
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4147
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4148
+ --tds-time-field-background-color:var(--t-form-background-color);
4149
+ --tds-time-field-color:var(--t-form-color);
4150
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4151
+ --tds-time-field-font-size:var(--t-font-size-md);
4152
+ --tds-time-field-min-height:var(--t-container-size-md);
4153
+ --tds-time-field-padding-block:6px;
4154
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4155
+ --tds-time-field-description-invalid-icon-display:none;
4000
4156
 
4001
4157
  position:relative;
4002
4158
  display:flex;
@@ -4004,291 +4160,135 @@ a[class="tds-btn"]{
4004
4160
  gap:var(--t-spacing-half);
4005
4161
  }
4006
4162
 
4007
- .tds-date-picker[data-required] .tds-date-picker-label::after{
4163
+ .tds-time-field[data-required] .tds-time-field-label::after{
4008
4164
  margin-left:.25ch;
4009
4165
  color:var(--t-text-color-status-error);
4010
4166
  content:"*";
4011
4167
  }
4012
4168
 
4013
- .tds-date-picker[data-invalid]{
4014
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4015
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4016
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4017
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4018
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4019
- --tds-date-picker-description-invalid-icon-display:inline-block;
4169
+ .tds-time-field[data-invalid]{
4170
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4171
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4172
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4173
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4174
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4175
+ --tds-time-field-description-invalid-icon-display:inline-block;
4020
4176
  }
4021
4177
 
4022
- .tds-date-picker[data-disabled]{
4023
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4024
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4025
- --tds-date-picker-color:var(--t-form-color-disabled);
4026
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4178
+ .tds-time-field[data-disabled]{
4179
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4180
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4181
+ --tds-time-field-color:var(--t-form-color-disabled);
4182
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4027
4183
  }
4028
4184
 
4029
- .tds-date-picker[data-disabled] .tds-date-picker-field{
4185
+ .tds-time-field[data-disabled] .tds-time-field-label{
4186
+ color:var(--t-form-color-disabled);
4187
+ }
4188
+
4189
+ .tds-time-field[data-disabled] .tds-time-field-input{
4030
4190
  cursor:not-allowed;
4031
4191
  }
4032
4192
 
4033
- .tds-date-picker--lg{
4034
- --tds-date-picker-min-height:var(--t-container-size-lg);
4035
- --tds-date-picker-font-size:var(--t-font-size-lg);
4036
- --tds-date-picker-button-offset:5px;
4193
+ .tds-time-field--lg{
4194
+ --tds-time-field-min-height:var(--t-container-size-lg);
4195
+ --tds-time-field-font-size:var(--t-font-size-lg);
4037
4196
  }
4038
4197
 
4039
- .tds-date-picker-label{
4198
+ .tds-time-field-label{
4040
4199
  font-size:var(--t-font-size-md);
4041
4200
  font-weight:var(--t-font-weight-normal);
4042
4201
  color:var(--t-text-color);
4043
4202
  cursor:default;
4044
4203
  }
4045
4204
 
4046
- .tds-date-picker-field{
4205
+ .tds-time-field-input{
4047
4206
  display:flex;
4048
4207
  align-items:center;
4049
4208
  inline-size:100%;
4050
- min-block-size:var(--tds-date-picker-min-height);
4209
+ min-block-size:var(--tds-time-field-min-height);
4210
+ padding-block:var(--tds-time-field-padding-block);
4211
+ padding-inline:var(--t-spacing-1);
4051
4212
  font-family:inherit;
4052
- font-size:var(--tds-date-picker-font-size);
4213
+ font-size:var(--tds-time-field-font-size);
4214
+ font-variant-numeric:tabular-nums;
4053
4215
  line-height:1;
4054
- color:var(--tds-date-picker-color);
4055
- -webkit-appearance:none;
4056
- -moz-appearance:none;
4057
- appearance:none;
4216
+ color:var(--tds-time-field-color);
4058
4217
  cursor:text;
4059
4218
  outline:var(--t-focus-ring-width) solid transparent;
4060
4219
  outline-offset:0;
4061
- background-color:var(--tds-date-picker-background-color);
4062
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4220
+ background-color:var(--tds-time-field-background-color);
4221
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4063
4222
  border-radius:var(--t-form-border-radius);
4064
4223
  }
4065
4224
 
4066
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4067
- border-color:var(--tds-date-picker-border-color-hover);
4225
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4226
+ border-color:var(--tds-time-field-border-color-hover);
4068
4227
  }
4069
4228
 
4070
- .tds-date-picker-field[data-focus-within]{
4229
+ .tds-time-field-input[data-focus-within]{
4071
4230
  outline-color:var(--t-focus-ring-color);
4072
4231
  outline-offset:var(--t-focus-ring-offset);
4073
- border-color:var(--tds-date-picker-border-color-active);
4232
+ border-color:var(--tds-time-field-border-color-active);
4074
4233
  }
4075
4234
 
4076
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4235
+ .tds-time-field-input[data-readonly]{
4077
4236
  color:var(--t-form-color-readonly);
4078
4237
  background-color:var(--t-form-background-color-readonly);
4079
4238
  border-color:var(--t-form-border-color-readonly);
4080
4239
  }
4081
4240
 
4082
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4241
+ .tds-time-field-input[data-readonly][data-hovered]{
4083
4242
  border-color:var(--t-form-border-color-readonly);
4084
4243
  }
4085
4244
 
4086
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4245
+ .tds-time-field-input[data-readonly][data-focus-within]{
4087
4246
  outline-color:var(--t-focus-ring-color);
4088
4247
  outline-offset:var(--t-focus-ring-offset);
4089
4248
  border-color:var(--t-form-border-color-hover);
4090
4249
  }
4091
4250
 
4092
- .tds-date-picker-input{
4093
- flex:1;
4094
- padding-block:var(--tds-date-picker-padding-block);
4095
- padding-inline-start:var(--t-spacing-1);
4251
+ .tds-time-field-segment{
4252
+ padding-inline:1px;
4096
4253
  font-variant-numeric:tabular-nums;
4097
- }
4098
-
4099
- .tds-date-picker-segment{
4100
- padding-inline:2px;
4254
+ cursor:text;
4101
4255
  caret-color:transparent;
4102
4256
  border-radius:var(--t-border-radius-sm);
4103
4257
  }
4104
4258
 
4105
- .tds-date-picker-segment[data-placeholder]{
4106
- color:var(--tds-date-picker-placeholder-color);
4259
+ .tds-time-field-segment[data-placeholder]{
4260
+ color:var(--tds-time-field-placeholder-color);
4107
4261
  }
4108
4262
 
4109
- .tds-date-picker-segment[data-focused]{
4263
+ .tds-time-field-segment[data-focused]{
4110
4264
  color:var(--t-text-color-inverted);
4111
4265
  outline:0;
4112
4266
  background:var(--t-fill-color-interaction);
4113
4267
  }
4114
4268
 
4115
- .tds-date-picker-segment-separator{
4269
+ .tds-time-field-segment-separator{
4116
4270
  padding-inline:0;
4117
- color:var(--tds-date-picker-placeholder-color);
4271
+ color:var(--tds-time-field-placeholder-color);
4118
4272
  }
4119
4273
 
4120
- .tds-date-picker-description{
4274
+ .tds-time-field-description{
4121
4275
  display:flex;
4122
4276
  gap:var(--t-spacing-half);
4123
4277
  align-items:flex-start;
4124
4278
  margin:0;
4125
4279
  font-size:var(--t-font-size-sm);
4126
4280
  line-height:1.35;
4127
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4281
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4128
4282
  cursor:text;
4129
4283
  }
4130
4284
 
4131
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4132
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4285
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4286
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4133
4287
  flex-shrink:0;
4134
4288
  margin-block-start:calc(.5lh - .5em);
4135
4289
  line-height:1.35;
4136
4290
  }
4137
4291
 
4138
- .tds-date-picker-button{
4139
- flex-shrink:0;
4140
- align-self:center;
4141
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4142
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4143
- padding:0;
4144
- margin-inline-end:var(--tds-date-picker-button-offset);
4145
- }
4146
-
4147
- .tds-date-picker-popover{
4148
- padding:var(--t-spacing-2);
4149
- background:var(--t-surface-color-card);
4150
- border:1px solid var(--t-border-color);
4151
- border-radius:var(--t-border-radius);
4152
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4153
- }
4154
-
4155
- .tds-date-picker-popover[data-entering]{
4156
- animation:tds-date-picker-popover-enter 160ms ease;
4157
- }
4158
-
4159
- .tds-date-picker-popover[data-exiting]{
4160
- animation:tds-date-picker-popover-exit 130ms ease;
4161
- }
4162
-
4163
- @keyframes tds-date-picker-popover-enter{
4164
- from{
4165
- opacity:0;
4166
- transform:translateY(-8px);
4167
- }
4168
- }
4169
-
4170
- @keyframes tds-date-picker-popover-exit{
4171
- to{
4172
- opacity:0;
4173
- transform:translateY(-8px);
4174
- }
4175
- }
4176
-
4177
- @media (prefers-reduced-motion: reduce){
4178
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4179
- animation:none;
4180
- }
4181
- }
4182
-
4183
- .tds-date-picker-calendar{
4184
- inline-size:-moz-fit-content;
4185
- inline-size:fit-content;
4186
- }
4187
-
4188
- .tds-date-picker-calendar-header{
4189
- display:flex;
4190
- align-items:center;
4191
- justify-content:space-between;
4192
- padding-block-end:var(--t-spacing-1);
4193
- }
4194
-
4195
- .tds-date-picker-calendar-title{
4196
- flex:1;
4197
- margin:0;
4198
- font-size:var(--t-font-size-md);
4199
- font-weight:var(--t-font-weight-semibold);
4200
- text-align:center;
4201
- }
4202
-
4203
- .tds-date-picker-calendar-nav{
4204
- display:flex;
4205
- align-items:center;
4206
- justify-content:center;
4207
- padding:var(--t-spacing-half);
4208
- color:var(--t-text-color);
4209
- cursor:default;
4210
- outline:0;
4211
- background:transparent;
4212
- border:0;
4213
- border-radius:var(--t-border-radius-sm);
4214
- }
4215
-
4216
- .tds-date-picker-calendar-nav[data-hovered]{
4217
- background:var(--t-fill-color-neutral-070);
4218
- }
4219
-
4220
- .tds-date-picker-calendar-nav[data-pressed]{
4221
- background:var(--t-fill-color-button-interaction-ghost-active);
4222
- }
4223
-
4224
- .tds-date-picker-calendar-nav[data-focus-visible]{
4225
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4226
- outline-offset:var(--t-focus-ring-offset);
4227
- }
4228
-
4229
- .tds-date-picker-calendar-nav[data-disabled]{
4230
- color:var(--t-form-color-disabled);
4231
- cursor:not-allowed;
4232
- }
4233
-
4234
- .tds-date-picker-calendar-grid{
4235
- border-collapse:collapse;
4236
- }
4237
-
4238
- .tds-date-picker-calendar-header-cell{
4239
- padding-block:var(--t-spacing-half);
4240
- font-size:var(--t-font-size-sm);
4241
- font-weight:var(--t-font-weight-normal);
4242
- color:var(--t-text-color-secondary);
4243
- text-align:center;
4244
- }
4245
-
4246
- .tds-date-picker-calendar-cell{
4247
- display:flex;
4248
- align-items:center;
4249
- justify-content:center;
4250
- inline-size:2.25rem;
4251
- block-size:2.25rem;
4252
- font-size:var(--t-font-size-md);
4253
- color:var(--t-text-color);
4254
- cursor:default;
4255
- outline:0;
4256
- border-radius:var(--t-border-radius-sm);
4257
- }
4258
-
4259
- .tds-date-picker-calendar-cell[data-hovered]{
4260
- background:var(--t-fill-color-neutral-070);
4261
- }
4262
-
4263
- .tds-date-picker-calendar-cell[data-pressed]{
4264
- background:var(--t-fill-color-button-interaction-ghost-active);
4265
- }
4266
-
4267
- .tds-date-picker-calendar-cell[data-selected]{
4268
- color:var(--t-text-color-inverted);
4269
- background:var(--t-fill-color-interaction);
4270
- }
4271
-
4272
- .tds-date-picker-calendar-cell[data-focus-visible]{
4273
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4274
- outline-offset:var(--t-focus-ring-offset);
4275
- }
4276
-
4277
- .tds-date-picker-calendar-cell[data-unavailable]{
4278
- color:var(--t-text-color-secondary);
4279
- text-decoration:line-through;
4280
- cursor:not-allowed;
4281
- }
4282
-
4283
- .tds-date-picker-calendar-cell[data-disabled]{
4284
- color:var(--t-form-color-disabled);
4285
- cursor:not-allowed;
4286
- }
4287
-
4288
- .tds-date-picker-calendar-cell[data-outside-month]{
4289
- color:var(--t-text-color-secondary);
4290
- }
4291
-
4292
4292
  .t-banner{
4293
4293
  --t-banner-font-size:var(--t-font-size-md);
4294
4294
  --t-banner-font-color:var(--t-text-color);