@planningcenter/tapestry 3.2.3-rc.14 → 3.2.3-rc.16

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 +1201 -1201
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1201 -1201
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,365 +1,3 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
7
- }
8
-
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
14
-
15
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
-
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
- }
58
- }
59
-
60
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
- display:flex;
62
- }
63
-
64
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
- flex-direction:column;
66
- gap:var(--t-spacing-half);
67
- width:100%;
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"]{
98
- display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
101
- }
102
-
103
- .tds-sidenav-section [slot="section-actions"]{
104
- display:flex;
105
- gap:12px;
106
- align-items:center;
107
- min-height:42px;
108
- padding:var(--t-spacing-1) 0;
109
- }
110
-
111
- .tds-sidenav-section-list,
112
- .tds-sidenav-item{
113
- width:100%;
114
- padding:0;
115
- margin:0;
116
- }
117
-
118
- .tds-sidenav-item :is(a,button){
119
- position:relative;
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;
131
- -webkit-appearance:none;
132
- -moz-appearance:none;
133
- appearance:none;
134
- cursor:pointer;
135
- background-color:var(--tds-sidenav-item-background, transparent);
136
- border:0;
137
- border-radius:var(--t-border-radius);
138
- transition:var(--tds-sidenav-item-transition);
139
- }
140
-
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;
148
- }
149
-
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;
154
- }
155
-
156
- :is(.tds-sidenav-item :is(a,button)):active{
157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
- }
159
-
160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
- overflow:hidden;
162
- color:var(--tds-sidenav-item-icon-color);
163
- }
164
-
165
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
- display:block;
167
- width:var(--tds-sidenav-item-icon-size);
168
- height:var(--tds-sidenav-item-icon-size);
169
- }
170
-
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
173
- }
174
-
175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
- visibility:visible;
177
- block-size:auto;
178
- opacity:1;
179
- }
180
-
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);
184
-
185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
- font-weight:var(--t-font-weight-semibold);
187
- }
188
-
189
- .tds-sidenav-item:has(.tds-sidenav-section){
190
- display:flex;
191
- flex-direction:column;
192
- gap:var(--t-spacing-half);
193
- }
194
-
195
- .tds-sidenav-item .tds-sidenav-section-list{
196
- --tds-sidenav-item-depth:1;
197
- gap:0;
198
- }
199
-
200
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
- visibility:hidden;
202
- block-size:0;
203
- overflow-y:clip;
204
- opacity:0;
205
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
- }
207
-
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
210
- }
211
-
212
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
- min-height:var(--t-element-size-2xl);
214
- padding-block:9px;
215
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
- line-height:1;
217
- background-color:transparent;
218
- }
219
-
220
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
- position:absolute;
222
- top:0;
223
- bottom:0;
224
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
- width:2px;
226
- content:"";
227
- background-color:var(--tds-sidenav-item-nested-border-color);
228
- transition:var(--tds-sidenav-item-transition);
229
- }
230
-
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
- }
241
-
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
- }
247
-
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
- }
252
-
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);
260
- }
261
-
262
- .tds-sidenav-responsive-header{
263
- display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
267
- }
268
-
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
271
- }
272
-
273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
- flex:1;
275
- order:1;
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
- }
281
-
282
- @media (max-width: 719px){
283
- .tds-sidenav-collapse{
284
- z-index:10001;
285
- display:none;
286
- max-width:min(448px, calc(100vw - 48px));
287
- padding:0;
288
- margin:12px 0;
289
- position-area:bottom span-right;
290
- overflow:hidden;
291
- outline:0;
292
- background:var(--t-surface-color-card);
293
- border:0;
294
- border-radius:6px;
295
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
- opacity:var(--tds-sidenav-collapse-open-opacity);
297
- transform:var(--tds-sidenav-collapse-open-transform);
298
- transition:var(--tds-sidenav-collapse-transition-enter);
299
- will-change:transform;
300
- }
301
-
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;
310
- }
311
-
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
314
- }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
318
- }
319
-
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
323
- }
324
-
325
- @starting-style{
326
- .tds-sidenav-collapse:popover-open{
327
- opacity:var(--tds-sidenav-collapse-closed-opacity);
328
- transform:var(--tds-sidenav-collapse-closed-transform);
329
- }
330
- }
331
- }
332
- @supports not selector(:popover-open){
333
- .tds-sidenav-collapse.\:popover-open{
334
- display:flex;
335
- }
336
-
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
- }
342
- }
343
-
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
347
- }
348
- }
349
-
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
353
-
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
357
-
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
362
-
363
1
  @layer t-critical{
364
2
  tds-page-header:not(.hydrated){
365
3
  display:none;
@@ -539,191 +177,466 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
539
177
  }
540
178
  }
541
179
 
542
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
543
- position:relative;
180
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
+ position:relative;
182
+ }
183
+
184
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
187
+ }
188
+
189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
190
+ position:absolute;
191
+ top:-5px;
192
+ right:-2px;
193
+ width:10px;
194
+ height:10px;
195
+ content:"";
196
+ background:var(--tds-page-header-nav-item-indicator-color);
197
+ border-radius:50%;
198
+ }
199
+
200
+ @media (prefers-reduced-motion: no-preference){
201
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
+ animation:indicator-pulse 1.25s ease infinite;
203
+ }
204
+ }
205
+
206
+ .tds-page-header__title-bar{
207
+ display:flex;
208
+ flex-direction:column;
209
+ gap:var(--t-spacing-2) var(--t-spacing-1);
210
+ align-items:flex-start;
211
+ justify-content:space-between;
212
+ padding:0 var(--tds-page-header-padding-x);
213
+ }
214
+
215
+ .tds-page-header--profile > .tds-page-header__title-bar{
216
+ align-items:center;
217
+ }
218
+
219
+ .tds-page-header__primary{
220
+ width:100%;
221
+ }
222
+
223
+ .tds-page-header__primary h1{
224
+ margin:0;
225
+ font-size:var(--tds-page-header-headline-font-size);
226
+ font-weight:var(--t-font-weight-normal);
227
+ line-height:32px;
228
+ color:var(--tds-page-header-headline-color);
229
+ overflow-wrap:break-word;
230
+ }
231
+
232
+ @media (min-width: 960px){
233
+ .tds-page-header__primary{
234
+ flex:1 1 max-content;
235
+ width:auto;
236
+ min-width:0;
237
+ max-width:100%;
238
+ }
239
+
240
+ .tds-page-header__title-bar,
241
+ .tds-page-header--profile .tds-page-header__title-bar{
242
+ flex-flow:row nowrap;
243
+ row-gap:12px;
244
+ align-items:flex-start;
245
+ }
246
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
+ width:auto;
248
+ }
249
+
250
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
+ justify-content:flex-end;
252
+ }
253
+ }
254
+
255
+ .tds-page-header-phone,
256
+ .tds-page-header-email{
257
+ color:var(--tds-page-header-color);
258
+ white-space:nowrap;
259
+ }
260
+
261
+ .tds-page-header-email{
262
+ max-width:100%;
263
+ overflow:hidden;
264
+ text-overflow:ellipsis;
265
+ }
266
+
267
+ @keyframes indicator-pulse{
268
+ 0%{
269
+ opacity:.3;
270
+ transform:scale(.9);
271
+ }
272
+
273
+ 100%{
274
+ opacity:0;
275
+ transform:scale(1.75);
276
+ }
277
+ }
278
+
279
+
280
+ @media (prefers-reduced-motion: no-preference){
281
+
282
+ :root{
283
+ interpolate-size:allow-keywords;
284
+ }
285
+ }
286
+
287
+ @layer tds-component{
288
+ tds-sidenav,
289
+ .tds-sidenav{
290
+ --tds-sidenav-indent:12px;
291
+ --tds-sidenav-item-depth:0;
292
+
293
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
294
+
295
+ --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;
296
+ --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;
297
+ --tds-sidenav-collapse-closed-opacity:0;
298
+ --tds-sidenav-collapse-open-opacity:1;
299
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
300
+ --tds-sidenav-collapse-open-transform:translateY(0);
301
+
302
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
303
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
304
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
305
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
306
+
307
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
308
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
309
+ --tds-sidenav-item-nested-background-selected:transparent;
310
+
311
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
312
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
313
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
314
+
315
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
316
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
317
+ }
318
+
319
+ @media (prefers-reduced-motion: reduce){
320
+ tds-sidenav,
321
+ .tds-sidenav{
322
+ --tds-sidenav-collapse-transition-enter:none;
323
+ --tds-sidenav-collapse-transition-exit:none;
324
+ --tds-sidenav-collapse-closed-transform:none;
325
+ --tds-sidenav-collapse-open-transform:none;
326
+ }
327
+ }
328
+
329
+ .tds-sidenav--theme-gray{
330
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
331
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
332
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
333
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
334
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
335
+ }
336
+ }
337
+
338
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
339
+ display:flex;
340
+ }
341
+
342
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
343
+ flex-direction:column;
344
+ gap:var(--t-spacing-half);
345
+ width:100%;
346
+ }
347
+
348
+ .tds-sidenav-section-list{
349
+ width:100%;
350
+ padding:0;
351
+ margin:0;
352
+ list-style:none;
353
+ }
354
+
355
+ .tds-sidenav-section-header{
356
+ display:flex;
357
+ align-items:baseline;
358
+ justify-content:space-between;
359
+ padding-top:var(--t-spacing-2);
360
+ }
361
+
362
+ .tds-sidenav-section-header h2{
363
+ margin:0;
364
+ font-size:var(--t-font-size-sm);
365
+ font-weight:var(--t-font-weight-semibold);
366
+ line-height:1.35;
367
+ color:var(--t-text-color-secondary);
368
+ text-transform:uppercase;
369
+ }
370
+
371
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
372
+ padding-top:0;
373
+ }
374
+
375
+ .tds-sidenav-section-header [slot="label-actions"]{
376
+ display:flex;
377
+ gap:var(--t-spacing-half);
378
+ align-items:center;
379
+ }
380
+
381
+ .tds-sidenav-section [slot="section-actions"]{
382
+ display:flex;
383
+ gap:12px;
384
+ align-items:center;
385
+ min-height:42px;
386
+ padding:var(--t-spacing-1) 0;
387
+ }
388
+
389
+ .tds-sidenav-section-list,
390
+ .tds-sidenav-item{
391
+ width:100%;
392
+ padding:0;
393
+ margin:0;
394
+ }
395
+
396
+ .tds-sidenav-item :is(a,button){
397
+ position:relative;
398
+ display:flex;
399
+ gap:12px;
400
+ align-items:center;
401
+ width:100%;
402
+ padding:12px;
403
+ overflow:hidden;
404
+ font-size:var(--t-font-size-sm);
405
+ line-height:18px;
406
+ color:var(--t-text-color-headline);
407
+ white-space:nowrap;
408
+ text-decoration:none;
409
+ -webkit-appearance:none;
410
+ -moz-appearance:none;
411
+ appearance:none;
412
+ cursor:pointer;
413
+ background-color:var(--tds-sidenav-item-background, transparent);
414
+ border:0;
415
+ border-radius:var(--t-border-radius);
416
+ transition:var(--tds-sidenav-item-transition);
417
+ }
418
+
419
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
420
+ display:block;
421
+ flex:1;
422
+ overflow:hidden;
423
+ text-overflow:ellipsis;
424
+ text-align:left;
425
+ white-space:nowrap;
426
+ }
427
+
428
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
429
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
430
+ color:var(--t-text-color-headline);
431
+ text-decoration:none;
544
432
  }
545
433
 
546
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
547
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
548
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
549
- }
434
+ :is(.tds-sidenav-item :is(a,button)):active{
435
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
436
+ }
550
437
 
551
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
552
- position:absolute;
553
- top:-5px;
554
- right:-2px;
555
- width:10px;
556
- height:10px;
557
- content:"";
558
- background:var(--tds-page-header-nav-item-indicator-color);
559
- border-radius:50%;
560
- }
438
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
439
+ overflow:hidden;
440
+ color:var(--tds-sidenav-item-icon-color);
441
+ }
561
442
 
562
- @media (prefers-reduced-motion: no-preference){
563
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
564
- animation:indicator-pulse 1.25s ease infinite;
565
- }
443
+ :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{
444
+ display:block;
445
+ width:var(--tds-sidenav-item-icon-size);
446
+ height:var(--tds-sidenav-item-icon-size);
566
447
  }
567
448
 
568
- .tds-page-header__title-bar{
569
- display:flex;
570
- flex-direction:column;
571
- gap:var(--t-spacing-2) var(--t-spacing-1);
572
- align-items:flex-start;
573
- justify-content:space-between;
574
- padding:0 var(--tds-page-header-padding-x);
575
- }
449
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
450
+ --tds-sidenav-indent:19px;
451
+ }
576
452
 
577
- .tds-page-header--profile > .tds-page-header__title-bar{
578
- align-items:center;
579
- }
453
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
454
+ visibility:visible;
455
+ block-size:auto;
456
+ opacity:1;
457
+ }
580
458
 
581
- .tds-page-header__primary{
582
- width:100%;
583
- }
459
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
460
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
461
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
584
462
 
585
- .tds-page-header__primary h1{
586
- margin:0;
587
- font-size:var(--tds-page-header-headline-font-size);
588
- font-weight:var(--t-font-weight-normal);
589
- line-height:32px;
590
- color:var(--tds-page-header-headline-color);
591
- overflow-wrap:break-word;
463
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
464
+ font-weight:var(--t-font-weight-semibold);
592
465
  }
593
466
 
594
- @media (min-width: 960px){
595
- .tds-page-header__primary{
596
- flex:1 1 max-content;
597
- width:auto;
598
- min-width:0;
599
- max-width:100%;
467
+ .tds-sidenav-item:has(.tds-sidenav-section){
468
+ display:flex;
469
+ flex-direction:column;
470
+ gap:var(--t-spacing-half);
600
471
  }
601
472
 
602
- .tds-page-header__title-bar,
603
- .tds-page-header--profile .tds-page-header__title-bar{
604
- flex-flow:row nowrap;
605
- row-gap:12px;
606
- align-items:flex-start;
473
+ .tds-sidenav-item .tds-sidenav-section-list{
474
+ --tds-sidenav-item-depth:1;
475
+ gap:0;
607
476
  }
608
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
609
- width:auto;
477
+
478
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
479
+ visibility:hidden;
480
+ block-size:0;
481
+ overflow-y:clip;
482
+ opacity:0;
483
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
610
484
  }
611
485
 
612
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
613
- justify-content:flex-end;
486
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
487
+ --tds-sidenav-item-depth:2;
614
488
  }
615
- }
616
489
 
617
- .tds-page-header-phone,
618
- .tds-page-header-email{
619
- color:var(--tds-page-header-color);
620
- white-space:nowrap;
621
- }
490
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
491
+ min-height:var(--t-element-size-2xl);
492
+ padding-block:9px;
493
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
494
+ line-height:1;
495
+ background-color:transparent;
496
+ }
622
497
 
623
- .tds-page-header-email{
624
- max-width:100%;
625
- overflow:hidden;
626
- text-overflow:ellipsis;
627
- }
498
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
499
+ position:absolute;
500
+ top:0;
501
+ bottom:0;
502
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
503
+ width:2px;
504
+ content:"";
505
+ background-color:var(--tds-sidenav-item-nested-border-color);
506
+ transition:var(--tds-sidenav-item-transition);
507
+ }
628
508
 
629
- @keyframes indicator-pulse{
630
- 0%{
631
- opacity:.3;
632
- transform:scale(.9);
633
- }
509
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
510
+ position:absolute;
511
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
512
+ z-index:-1;
513
+ height:100%;
514
+ content:"";
515
+ background-color:var(--tds-sidenav-item-nested-background);
516
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
517
+ transition:var(--tds-sidenav-item-transition);
518
+ }
634
519
 
635
- 100%{
636
- opacity:0;
637
- transform:scale(1.75);
638
- }
639
- }
520
+ :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)){
521
+ display:block;
522
+ text-align:left;
523
+ white-space:normal;
524
+ }
640
525
 
641
- .tds-radio-group{
642
- --tds-radio-group-font-size:var(--t-font-size-md);
643
- --tds-radio-group-line-height:1.4;
644
- --tds-radio-group-gap:var(--t-spacing-1);
526
+ :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{
527
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
528
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
529
+ }
645
530
 
646
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
531
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
532
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
533
+ }
647
534
 
648
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
649
- --tds-radio-group-description-line-height:1.35;
650
- --tds-radio-group-description-color:var(--t-text-color-secondary);
651
- --tds-radio-group-description-invalid-icon-display:none;
652
- display:flex;
653
- flex-direction:column;
654
- gap:var(--tds-radio-group-gap);
655
- padding:0;
656
- margin:0;
535
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
536
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
537
+ font-weight:var(--t-font-weight-medium);
538
+ }
657
539
 
658
- font-size:var(--tds-radio-group-font-size);
659
- line-height:var(--tds-radio-group-line-height);
660
- border:0;
540
+ .tds-sidenav-responsive-header{
541
+ display:flex;
542
+ gap:var(--t-spacing-2);
543
+ align-items:center;
544
+ width:100%;
661
545
  }
662
546
 
663
- .tds-radio-group legend{
664
- padding:0;
665
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
547
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
548
+ order:0;
666
549
  }
667
550
 
668
- .tds-radio-group:has(.tds-radio-group-description){
669
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
551
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
552
+ flex:1;
553
+ order:1;
554
+ margin:0;
555
+ font-size:var(--t-font-size-lg);
556
+ font-weight:var(--t-font-weight-medium);
557
+ color:var(--t-text-color-headline);
670
558
  }
671
559
 
672
- .tds-radio-group[aria-invalid="true"]{
673
- --tds-radio-group-description-color:var(--t-text-color-status-error);
674
- --tds-radio-group-description-invalid-icon-display:inline-block;
560
+ @media (max-width: 719px){
561
+ .tds-sidenav-collapse{
562
+ z-index:10001;
563
+ display:none;
564
+ max-width:min(448px, calc(100vw - 48px));
565
+ padding:0;
566
+ margin:12px 0;
567
+ position-area:bottom span-right;
568
+ overflow:hidden;
569
+ outline:0;
570
+ background:var(--t-surface-color-card);
571
+ border:0;
572
+ border-radius:6px;
573
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
574
+ opacity:var(--tds-sidenav-collapse-open-opacity);
575
+ transform:var(--tds-sidenav-collapse-open-transform);
576
+ transition:var(--tds-sidenav-collapse-transition-enter);
577
+ will-change:transform;
675
578
  }
676
579
 
677
- .tds-radio-group[aria-invalid="true"] .tds-radio{
678
- --tds-radio-input-border-color:var(--t-form-border-color-error);
679
- }
580
+ .tds-sidenav-scroll-container{
581
+ --webkit-overflow-scrolling:touch;
582
+ display:block;
583
+ width:100%;
584
+ height:-moz-fit-content;
585
+ height:fit-content;
586
+ padding:var(--t-spacing-2);
587
+ overflow-y:auto;
588
+ }
680
589
 
681
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
682
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
683
- --tds-radio-input-background-color:var(--t-form-background-color-error);
684
- }
590
+ .tds-sidenav-item :is(a, button) :is(.prefix){
591
+ display:none;
592
+ }
593
+ @supports selector(:popover-open){
594
+ .tds-sidenav-collapse:popover-open{
595
+ display:flex;
596
+ }
685
597
 
686
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
687
- --tds-radio-input-background-color:var(--t-form-background-color);
688
- }
598
+ .tds-sidenav-collapse:not(:popover-open){
599
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
600
+ transition:var(--tds-sidenav-collapse-transition-exit);
601
+ }
689
602
 
690
- .tds-radio-group:has(input:required) legend::after{
691
- margin-left:.25ch;
692
- color:var(--t-text-color-status-error);
693
- content:"*";
603
+ @starting-style{
604
+ .tds-sidenav-collapse:popover-open{
605
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
606
+ transform:var(--tds-sidenav-collapse-closed-transform);
607
+ }
608
+ }
609
+ }
610
+ @supports not selector(:popover-open){
611
+ .tds-sidenav-collapse.\:popover-open{
612
+ display:flex;
694
613
  }
695
614
 
696
- .tds-radio-group-fields{
697
- display:flex;
698
- flex-direction:column;
699
- gap:var(--tds-radio-group-gap);
700
- align-items:flex-start;
615
+ .tds-sidenav-collapse:not(.\:popover-open){
616
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
617
+ transition:var(--tds-sidenav-collapse-transition-exit);
618
+ }
619
+ }
701
620
  }
702
621
 
703
- .tds-radio-group-description{
704
- display:flex;
705
- gap:var(--t-spacing-half);
706
- align-items:flex-start;
707
- margin:0;
708
- font-size:var(--tds-radio-group-description-font-size);
709
- line-height:var(--tds-radio-group-description-line-height);
710
- color:var(--tds-radio-group-description-color);
711
- cursor:text;
622
+ @media (min-width: 720px){
623
+ .tds-sidenav-responsive-header{
624
+ display:none;
625
+ }
712
626
  }
713
627
 
714
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
715
- display:var(--tds-radio-group-description-invalid-icon-display);
716
- flex-shrink:0;
717
- margin-top:calc(.5lh - .5em);
718
- line-height:var(--tds-radio-group-description-line-height);
719
- }
628
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
+ display:none;
630
+ }
720
631
 
721
- .tds-radio-group--sm{
722
- --tds-radio-group-line-height:1.35;
723
- --tds-radio-group-font-size:var(--t-font-size-sm);
724
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
725
- --tds-radio-group-description-line-height:1.3;
726
- }
632
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
+ display:block;
634
+ }
635
+
636
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
+ display:flex;
638
+ flex-direction:column;
639
+ }
727
640
 
728
641
  .tds-checkbox{
729
642
  --tds-checkbox-font-size:var(--t-font-size-md);
@@ -919,6 +832,30 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
919
832
  --tds-checkbox-description-line-height:1.3;
920
833
  }
921
834
 
835
+
836
+ :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{
837
+ -webkit-appearance:none;
838
+ appearance:none;
839
+ }
840
+
841
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
842
+ inline-size:1em;
843
+ block-size:2em;
844
+ }
845
+
846
+ @supports (field-sizing: content){
847
+ .tds-input--auto-width{
848
+ inline-size:-moz-fit-content;
849
+ inline-size:fit-content;
850
+ min-inline-size:min(100%, 122px);
851
+ }
852
+
853
+ .tds-input--auto-width input{
854
+ field-sizing:content;
855
+ inline-size:auto;
856
+ }
857
+ }
858
+
922
859
  .tds-radio{
923
860
  --tds-radio-font-size:var(--t-font-size-md);
924
861
  --tds-radio-cursor:pointer;
@@ -976,80 +913,272 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
976
913
  transition-property:var(--tds-radio-transition-property);
977
914
  }
978
915
 
979
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
980
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
981
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
916
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
917
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
918
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
919
+ }
920
+
921
+ :is(.tds-radio input[type="radio"]):focus-visible{
922
+ outline:var(--t-focus-ring-outline);
923
+ outline-offset:var(--t-focus-ring-offset);
924
+ }
925
+
926
+ :is(.tds-radio input[type="radio"]):disabled{
927
+ pointer-events:none;
928
+ }
929
+
930
+ @media (prefers-reduced-motion: reduce){
931
+
932
+ .tds-radio input[type="radio"]{
933
+ --tds-radio-transition-property:none;
934
+ }
935
+ }
936
+
937
+ .tds-radio:has(input:checked){
938
+ --tds-radio-input-background-color:var(--t-form-background-color);
939
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
940
+ --tds-radio-input-border-width:4px;
941
+ }
942
+
943
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
944
+ --tds-radio-input-background-color:var(--t-form-background-color);
945
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
946
+ }
947
+
948
+ .tds-radio:has(input:user-invalid){
949
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
950
+ }
951
+
952
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
953
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
954
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
955
+ }
956
+
957
+ .tds-radio:has(input:disabled){
958
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
959
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
960
+
961
+ --tds-radio-label-color:var(--t-form-color-disabled);
962
+ --tds-radio-description-color:var(--t-form-color-disabled);
963
+ --tds-radio-cursor:not-allowed;
964
+ }
965
+
966
+ .tds-radio:has(input:disabled) input:checked{
967
+ --tds-radio-input-background-color:var(--t-form-background-color);
968
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
969
+ }
970
+
971
+ .tds-radio-description{
972
+ display:flex;
973
+ grid-area:2 / 2;
974
+ gap:var(--t-spacing-half);
975
+ align-items:flex-start;
976
+ margin:0;
977
+ font-size:var(--tds-radio-description-font-size);
978
+ line-height:var(--tds-radio-description-line-height);
979
+ color:var(--tds-radio-description-color);
980
+ cursor:text;
981
+ }
982
+
983
+ .tds-radio--sm{
984
+ --tds-radio-line-height:1.35;
985
+ --tds-radio-input-size:var(--t-element-size-sm);
986
+ --tds-radio-font-size:var(--t-font-size-sm);
987
+ --tds-radio-description-font-size:var(--t-font-size-xs);
988
+ --tds-radio-description-line-height:1.3;
989
+ }
990
+
991
+ .tds-radio-group{
992
+ --tds-radio-group-font-size:var(--t-font-size-md);
993
+ --tds-radio-group-line-height:1.4;
994
+ --tds-radio-group-gap:var(--t-spacing-1);
995
+
996
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
997
+
998
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
999
+ --tds-radio-group-description-line-height:1.35;
1000
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1001
+ --tds-radio-group-description-invalid-icon-display:none;
1002
+ display:flex;
1003
+ flex-direction:column;
1004
+ gap:var(--tds-radio-group-gap);
1005
+ padding:0;
1006
+ margin:0;
1007
+
1008
+ font-size:var(--tds-radio-group-font-size);
1009
+ line-height:var(--tds-radio-group-line-height);
1010
+ border:0;
1011
+ }
1012
+
1013
+ .tds-radio-group legend{
1014
+ padding:0;
1015
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1016
+ }
1017
+
1018
+ .tds-radio-group:has(.tds-radio-group-description){
1019
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1020
+ }
1021
+
1022
+ .tds-radio-group[aria-invalid="true"]{
1023
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1024
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1025
+ }
1026
+
1027
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1028
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1029
+ }
1030
+
1031
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1032
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1033
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1034
+ }
1035
+
1036
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1037
+ --tds-radio-input-background-color:var(--t-form-background-color);
1038
+ }
1039
+
1040
+ .tds-radio-group:has(input:required) legend::after{
1041
+ margin-left:.25ch;
1042
+ color:var(--t-text-color-status-error);
1043
+ content:"*";
1044
+ }
1045
+
1046
+ .tds-radio-group-fields{
1047
+ display:flex;
1048
+ flex-direction:column;
1049
+ gap:var(--tds-radio-group-gap);
1050
+ align-items:flex-start;
1051
+ }
1052
+
1053
+ .tds-radio-group-description{
1054
+ display:flex;
1055
+ gap:var(--t-spacing-half);
1056
+ align-items:flex-start;
1057
+ margin:0;
1058
+ font-size:var(--tds-radio-group-description-font-size);
1059
+ line-height:var(--tds-radio-group-description-line-height);
1060
+ color:var(--tds-radio-group-description-color);
1061
+ cursor:text;
1062
+ }
1063
+
1064
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1065
+ display:var(--tds-radio-group-description-invalid-icon-display);
1066
+ flex-shrink:0;
1067
+ margin-top:calc(.5lh - .5em);
1068
+ line-height:var(--tds-radio-group-description-line-height);
1069
+ }
1070
+
1071
+ .tds-radio-group--sm{
1072
+ --tds-radio-group-line-height:1.35;
1073
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1074
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1075
+ --tds-radio-group-description-line-height:1.3;
1076
+ }
1077
+
1078
+ .tds-input:has(textarea){
1079
+ --tds-input-padding-block:6px;
1080
+ --tds-input-resizer-size:var(--t-element-size-sm);
1081
+ --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");
1082
+ }
1083
+
1084
+ @supports (x: attr(x type(*))){
1085
+
1086
+ .tds-input:has(textarea){
1087
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1088
+ }
1089
+ }
1090
+
1091
+ .tds-input.tds-textarea--resize-vertical textarea{
1092
+ resize:vertical;
1093
+ }
1094
+
1095
+ .tds-input.tds-textarea--resize-none textarea{
1096
+ resize:none;
982
1097
  }
983
1098
 
984
- :is(.tds-radio input[type="radio"]):focus-visible{
985
- outline:var(--t-focus-ring-outline);
986
- outline-offset:var(--t-focus-ring-offset);
1099
+ .tds-input.tds-textarea--resize-auto textarea{
1100
+ resize:vertical;
987
1101
  }
988
1102
 
989
- :is(.tds-radio input[type="radio"]):disabled{
990
- pointer-events:none;
1103
+ @supports (field-sizing: content){
1104
+ .tds-input.tds-textarea--resize-auto textarea{
1105
+ field-sizing:content;
1106
+ resize:none;
1107
+ }
991
1108
  }
992
1109
 
993
- @media (prefers-reduced-motion: reduce){
1110
+ .tds-input textarea{
1111
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1112
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1113
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1114
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1115
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1116
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1117
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1118
+ --tds-input-scrollbar-thumb-border-radius:999px;
1119
+ --tds-input-scrollbar-thumb-border-width:3px;
1120
+ --tds-input-scrollbar-track-margin-block:.125rem;
1121
+ scrollbar-color:initial;
1122
+ transition-timing-function:var(--t-ease-in-out);
1123
+ transition-duration:var(--t-duration-200);
1124
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1125
+ }
994
1126
 
995
- .tds-radio input[type="radio"]{
996
- --tds-radio-transition-property:none;
997
- }
1127
+ @media (pointer: fine){
1128
+ :is(.tds-input textarea)::-webkit-scrollbar{
1129
+ width:12px;
1130
+ height:12px;
1131
+ cursor:default;
998
1132
  }
999
1133
 
1000
- .tds-radio:has(input:checked){
1001
- --tds-radio-input-background-color:var(--t-form-background-color);
1002
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1003
- --tds-radio-input-border-width:4px;
1004
- }
1134
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1135
+ cursor:default;
1136
+ background:var(--tds-input-scrollbar-thumb-color);
1137
+ background-clip:content-box;
1138
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1139
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1140
+ }
1005
1141
 
1006
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1007
- --tds-radio-input-background-color:var(--t-form-background-color);
1008
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1142
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1143
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1009
1144
  }
1010
1145
 
1011
- .tds-radio:has(input:user-invalid){
1012
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1013
- }
1146
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1147
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1148
+ }
1014
1149
 
1015
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1016
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1017
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1150
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1151
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1018
1152
  }
1019
1153
 
1020
- .tds-radio:has(input:disabled){
1021
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1022
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1154
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1155
+ background:var(--tds-input-scrollbar-surface-color);
1156
+ }
1023
1157
 
1024
- --tds-radio-label-color:var(--t-form-color-disabled);
1025
- --tds-radio-description-color:var(--t-form-color-disabled);
1026
- --tds-radio-cursor:not-allowed;
1027
- }
1158
+ :is(.tds-input textarea)::-webkit-resizer{
1159
+ background:var(--tds-input-resizer-icon) no-repeat;
1160
+ background-position:right bottom;
1161
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1162
+ }
1028
1163
 
1029
- .tds-radio:has(input:disabled) input:checked{
1030
- --tds-radio-input-background-color:var(--t-form-background-color);
1031
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1164
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1165
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1166
+ cursor:default;
1032
1167
  }
1033
1168
 
1034
- .tds-radio-description{
1035
- display:flex;
1036
- grid-area:2 / 2;
1037
- gap:var(--t-spacing-half);
1038
- align-items:flex-start;
1039
- margin:0;
1040
- font-size:var(--tds-radio-description-font-size);
1041
- line-height:var(--tds-radio-description-line-height);
1042
- color:var(--tds-radio-description-color);
1043
- cursor:text;
1044
- }
1169
+ @supports (-moz-appearance: none){
1170
+ :is(.tds-input textarea){
1171
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1172
+ scrollbar-width:thin;
1173
+ }
1045
1174
 
1046
- .tds-radio--sm{
1047
- --tds-radio-line-height:1.35;
1048
- --tds-radio-input-size:var(--t-element-size-sm);
1049
- --tds-radio-font-size:var(--t-font-size-sm);
1050
- --tds-radio-description-font-size:var(--t-font-size-xs);
1051
- --tds-radio-description-line-height:1.3;
1052
- }
1175
+ @media (hover){
1176
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1177
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1178
+ }
1179
+ }
1180
+ }
1181
+ }
1053
1182
 
1054
1183
  .tds-toggle-switch{
1055
1184
  --tds-toggle-switch-font-size:var(--t-font-size-md);
@@ -1173,153 +1302,24 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1173
1302
  grid-area:2 / 2;
1174
1303
  align-items:flex-start;
1175
1304
  margin:0;
1176
- font-size:var(--tds-toggle-switch-description-font-size);
1177
- line-height:var(--tds-toggle-switch-description-line-height);
1178
- color:var(--tds-toggle-switch-description-color);
1179
- cursor:text;
1180
- }
1181
-
1182
- .tds-toggle-switch--sm{
1183
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1184
- --tds-toggle-switch-line-height:1.35;
1185
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1186
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1187
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1188
- --tds-toggle-switch-description-line-height:1.3;
1189
- }
1190
-
1191
- .tds-toggle-switch--hide-label{
1192
- --tds-toggle-switch-display:inline-flex;
1193
- }
1194
-
1195
-
1196
- :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{
1197
- -webkit-appearance:none;
1198
- appearance:none;
1199
- }
1200
-
1201
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1202
- inline-size:1em;
1203
- block-size:2em;
1204
- }
1205
-
1206
- @supports (field-sizing: content){
1207
- .tds-input--auto-width{
1208
- inline-size:-moz-fit-content;
1209
- inline-size:fit-content;
1210
- min-inline-size:min(100%, 122px);
1211
- }
1212
-
1213
- .tds-input--auto-width input{
1214
- field-sizing:content;
1215
- inline-size:auto;
1216
- }
1217
- }
1218
-
1219
- .tds-input:has(textarea){
1220
- --tds-input-padding-block:6px;
1221
- --tds-input-resizer-size:var(--t-element-size-sm);
1222
- --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");
1223
- }
1224
-
1225
- @supports (x: attr(x type(*))){
1226
-
1227
- .tds-input:has(textarea){
1228
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1229
- }
1230
- }
1231
-
1232
- .tds-input.tds-textarea--resize-vertical textarea{
1233
- resize:vertical;
1234
- }
1235
-
1236
- .tds-input.tds-textarea--resize-none textarea{
1237
- resize:none;
1238
- }
1239
-
1240
- .tds-input.tds-textarea--resize-auto textarea{
1241
- resize:vertical;
1242
- }
1243
-
1244
- @supports (field-sizing: content){
1245
- .tds-input.tds-textarea--resize-auto textarea{
1246
- field-sizing:content;
1247
- resize:none;
1248
- }
1249
- }
1250
-
1251
- .tds-input textarea{
1252
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1253
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1254
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1255
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1256
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1257
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1258
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1259
- --tds-input-scrollbar-thumb-border-radius:999px;
1260
- --tds-input-scrollbar-thumb-border-width:3px;
1261
- --tds-input-scrollbar-track-margin-block:.125rem;
1262
- scrollbar-color:initial;
1263
- transition-timing-function:var(--t-ease-in-out);
1264
- transition-duration:var(--t-duration-200);
1265
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1266
- }
1267
-
1268
- @media (pointer: fine){
1269
- :is(.tds-input textarea)::-webkit-scrollbar{
1270
- width:12px;
1271
- height:12px;
1272
- cursor:default;
1273
- }
1274
-
1275
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1276
- cursor:default;
1277
- background:var(--tds-input-scrollbar-thumb-color);
1278
- background-clip:content-box;
1279
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1280
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1281
- }
1282
-
1283
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1284
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1285
- }
1286
-
1287
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1288
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1289
- }
1290
-
1291
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1292
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1293
- }
1294
-
1295
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1296
- background:var(--tds-input-scrollbar-surface-color);
1297
- }
1298
-
1299
- :is(.tds-input textarea)::-webkit-resizer{
1300
- background:var(--tds-input-resizer-icon) no-repeat;
1301
- background-position:right bottom;
1302
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1303
- }
1304
-
1305
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1306
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1307
- cursor:default;
1308
- }
1305
+ font-size:var(--tds-toggle-switch-description-font-size);
1306
+ line-height:var(--tds-toggle-switch-description-line-height);
1307
+ color:var(--tds-toggle-switch-description-color);
1308
+ cursor:text;
1309
+ }
1309
1310
 
1310
- @supports (-moz-appearance: none){
1311
- :is(.tds-input textarea){
1312
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1313
- scrollbar-width:thin;
1314
- }
1311
+ .tds-toggle-switch--sm{
1312
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1313
+ --tds-toggle-switch-line-height:1.35;
1314
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1315
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1316
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1317
+ --tds-toggle-switch-description-line-height:1.3;
1318
+ }
1315
1319
 
1316
- @media (hover){
1317
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1318
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1319
- }
1320
- }
1321
- }
1322
- }
1320
+ .tds-toggle-switch--hide-label{
1321
+ --tds-toggle-switch-display:inline-flex;
1322
+ }
1323
1323
 
1324
1324
  .tds-select{
1325
1325
  --tds-select-border-color:var(--t-form-border-color);
@@ -3414,19 +3414,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3414
3414
  --tds-checkbox-group-description-line-height:1.3;
3415
3415
  }
3416
3416
 
3417
- .tds-date-picker{
3418
- --tds-date-picker-border-color:var(--t-form-border-color);
3419
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3420
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3421
- --tds-date-picker-background-color:var(--t-form-background-color);
3422
- --tds-date-picker-color:var(--t-form-color);
3423
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3424
- --tds-date-picker-font-size:var(--t-font-size-md);
3425
- --tds-date-picker-min-height:var(--t-container-size-md);
3426
- --tds-date-picker-padding-block:6px;
3427
- --tds-date-picker-button-offset:4px;
3428
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3429
- --tds-date-picker-description-invalid-icon-display:none;
3417
+ .tds-combo-box{
3418
+ --tds-combo-box-border-color:var(--t-form-border-color);
3419
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3420
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3421
+ --tds-combo-box-background-color:var(--t-form-background-color);
3422
+ --tds-combo-box-color:var(--t-form-color);
3423
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3424
+ --tds-combo-box-font-size:var(--t-font-size-md);
3425
+ --tds-combo-box-min-height:var(--t-container-size-md);
3426
+ --tds-combo-box-padding-block:6px;
3427
+ --tds-combo-box-button-offset:4px;
3428
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3429
+ --tds-combo-box-description-invalid-icon-display:none;
3430
3430
 
3431
3431
  position:relative;
3432
3432
  display:flex;
@@ -3434,409 +3434,301 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3434
3434
  gap:var(--t-spacing-half);
3435
3435
  }
3436
3436
 
3437
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3437
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3438
3438
  margin-left:.25ch;
3439
3439
  color:var(--t-text-color-status-error);
3440
3440
  content:"*";
3441
3441
  }
3442
3442
 
3443
- .tds-date-picker[data-invalid]{
3444
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3445
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3446
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3447
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3448
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3449
- --tds-date-picker-description-invalid-icon-display:inline-block;
3450
- }
3451
-
3452
- .tds-date-picker[data-disabled]{
3453
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3454
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3455
- --tds-date-picker-color:var(--t-form-color-disabled);
3456
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3457
- }
3458
-
3459
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3460
- cursor:not-allowed;
3461
- }
3462
-
3463
- .tds-date-picker--lg{
3464
- --tds-date-picker-min-height:var(--t-container-size-lg);
3465
- --tds-date-picker-font-size:var(--t-font-size-lg);
3466
- --tds-date-picker-button-offset:5px;
3467
- }
3468
-
3469
- .tds-date-picker-label{
3470
- font-size:var(--t-font-size-md);
3471
- font-weight:var(--t-font-weight-normal);
3472
- color:var(--t-text-color);
3473
- cursor:default;
3474
- }
3475
-
3476
- .tds-date-picker-field{
3477
- display:flex;
3478
- align-items:center;
3479
- inline-size:100%;
3480
- min-block-size:var(--tds-date-picker-min-height);
3481
- font-family:inherit;
3482
- font-size:var(--tds-date-picker-font-size);
3483
- line-height:1;
3484
- color:var(--tds-date-picker-color);
3485
- -webkit-appearance:none;
3486
- -moz-appearance:none;
3487
- appearance:none;
3488
- cursor:text;
3489
- outline:var(--t-focus-ring-width) solid transparent;
3490
- outline-offset:0;
3491
- background-color:var(--tds-date-picker-background-color);
3492
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3493
- border-radius:var(--t-form-border-radius);
3494
- }
3495
-
3496
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3497
- border-color:var(--tds-date-picker-border-color-hover);
3498
- }
3499
-
3500
- .tds-date-picker-field[data-focus-within]{
3501
- outline-color:var(--t-focus-ring-color);
3502
- outline-offset:var(--t-focus-ring-offset);
3503
- border-color:var(--tds-date-picker-border-color-active);
3443
+ .tds-combo-box[data-invalid]{
3444
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3445
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3446
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3447
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3448
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3449
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3504
3450
  }
3505
3451
 
3506
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3507
- color:var(--t-form-color-readonly);
3508
- background-color:var(--t-form-background-color-readonly);
3509
- border-color:var(--t-form-border-color-readonly);
3452
+ .tds-combo-box[data-disabled]{
3453
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3454
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3455
+ --tds-combo-box-color:var(--t-form-color-disabled);
3510
3456
  }
3511
3457
 
3512
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3513
- border-color:var(--t-form-border-color-readonly);
3458
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3459
+ color:var(--t-form-color-disabled);
3514
3460
  }
3515
3461
 
3516
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3517
- outline-color:var(--t-focus-ring-color);
3518
- outline-offset:var(--t-focus-ring-offset);
3519
- border-color:var(--t-form-border-color-hover);
3462
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3463
+ cursor:not-allowed;
3520
3464
  }
3521
3465
 
3522
- .tds-date-picker-input{
3523
- flex:1;
3524
- padding-block:var(--tds-date-picker-padding-block);
3525
- padding-inline-start:var(--t-spacing-1);
3526
- font-variant-numeric:tabular-nums;
3527
- }
3528
-
3529
- .tds-date-picker-segment{
3530
- padding-inline:2px;
3531
- caret-color:transparent;
3532
- border-radius:var(--t-border-radius-sm);
3533
- }
3534
-
3535
- .tds-date-picker-segment[data-placeholder]{
3536
- color:var(--tds-date-picker-placeholder-color);
3537
- }
3538
-
3539
- .tds-date-picker-segment[data-focused]{
3540
- color:var(--t-text-color-inverted);
3541
- outline:0;
3542
- background:var(--t-fill-color-interaction);
3543
- }
3544
-
3545
- .tds-date-picker-segment-separator{
3546
- padding-inline:0;
3547
- color:var(--tds-date-picker-placeholder-color);
3548
- }
3549
-
3550
- .tds-date-picker-description{
3551
- display:flex;
3552
- gap:var(--t-spacing-half);
3553
- align-items:flex-start;
3554
- margin:0;
3555
- font-size:var(--t-font-size-sm);
3556
- line-height:1.35;
3557
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3558
- cursor:text;
3559
- }
3560
-
3561
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3562
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3563
- flex-shrink:0;
3564
- margin-block-start:calc(.5lh - .5em);
3565
- line-height:1.35;
3566
- }
3567
-
3568
- .tds-date-picker-button{
3569
- flex-shrink:0;
3570
- align-self:center;
3571
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3572
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3573
- padding:0;
3574
- margin-inline-end:var(--tds-date-picker-button-offset);
3575
- }
3576
-
3577
- .tds-date-picker-popover{
3578
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
3579
-
3580
- position:relative;
3581
- overflow:hidden;
3582
- background:var(--t-surface-color-card);
3583
- border:1px solid var(--t-border-color);
3584
- border-radius:var(--t-border-radius);
3585
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3586
- }
3587
-
3588
- .tds-date-picker-popover[data-entering]{
3589
- animation:tds-date-picker-popover-enter 160ms ease;
3590
- }
3591
-
3592
- .tds-date-picker-popover[data-exiting]{
3593
- animation:tds-date-picker-popover-exit 130ms ease;
3594
- }
3595
-
3596
- @keyframes tds-date-picker-popover-enter{
3597
- from{
3598
- opacity:0;
3599
- transform:translateY(-8px);
3600
- }
3601
- }
3602
-
3603
- @keyframes tds-date-picker-popover-exit{
3604
- to{
3605
- opacity:0;
3606
- transform:translateY(-8px);
3466
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3467
+ transform:rotate(.5turn);
3607
3468
  }
3469
+
3470
+ .tds-combo-box--lg{
3471
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3472
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3473
+ --tds-combo-box-button-offset:5px;
3608
3474
  }
3609
3475
 
3610
- @media (prefers-reduced-motion: reduce){
3611
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3612
- animation:none;
3613
- }
3614
- }
3615
-
3616
- .tds-date-picker-overlay{
3617
- position:absolute;
3618
- inset:0;
3619
- z-index:1;
3620
- display:flex;
3621
- background:var(--t-surface-color-card);
3622
- }
3623
-
3624
- .tds-date-picker-overlay-list{
3625
- display:grid;
3626
- gap:var(--t-spacing-half);
3627
- padding-inline:var(--tds-date-picker-popover-padding);
3628
- outline:0;
3629
- }
3630
-
3631
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
3632
- flex:1;
3633
- grid-template-rows:repeat(4, 1fr);
3634
- grid-template-columns:repeat(3, 1fr);
3635
- }
3636
-
3637
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
3638
- flex:1;
3639
- grid-template-columns:repeat(4, 1fr);
3640
- grid-auto-rows:3rem;
3641
- overflow-y:auto;
3476
+ .tds-combo-box-label{
3477
+ font-size:var(--t-font-size-md);
3478
+ font-weight:var(--t-font-weight-normal);
3479
+ color:var(--t-text-color);
3480
+ cursor:default;
3642
3481
  }
3643
3482
 
3644
- .tds-date-picker-overlay-cell{
3483
+ .tds-combo-box-field{
3645
3484
  display:flex;
3646
3485
  align-items:center;
3647
- justify-content:center;
3486
+ inline-size:100%;
3487
+ min-block-size:var(--tds-combo-box-min-height);
3648
3488
  font-family:inherit;
3649
- font-size:var(--t-font-size-md);
3650
- color:var(--t-text-color);
3489
+ font-size:var(--tds-combo-box-font-size);
3490
+ line-height:1;
3491
+ color:var(--tds-combo-box-color);
3492
+ -webkit-appearance:none;
3493
+ -moz-appearance:none;
3494
+ appearance:none;
3651
3495
  cursor:default;
3652
- outline:0;
3653
- background:transparent;
3654
- border:0;
3655
- border-radius:var(--t-border-radius-sm);
3496
+ outline:var(--t-focus-ring-width) solid transparent;
3497
+ outline-offset:0;
3498
+ background-color:var(--tds-combo-box-background-color);
3499
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3500
+ border-radius:var(--t-form-border-radius);
3656
3501
  }
3657
3502
 
3658
- .tds-date-picker-overlay-cell[data-hovered]{
3659
- background:var(--t-fill-color-neutral-070);
3503
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3504
+ border-color:var(--tds-combo-box-border-color-hover);
3660
3505
  }
3661
3506
 
3662
- .tds-date-picker-overlay-cell[data-selected]{
3663
- color:var(--t-text-color-inverted);
3664
- background:var(--t-fill-color-interaction);
3507
+ .tds-combo-box-field[data-focus-within]{
3508
+ outline-color:var(--t-focus-ring-color);
3509
+ outline-offset:var(--t-focus-ring-offset);
3510
+ border-color:var(--tds-combo-box-border-color-active);
3665
3511
  }
3666
3512
 
3667
- .tds-date-picker-overlay-cell[data-focus-visible]{
3668
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3669
- outline-offset:var(--t-focus-ring-offset);
3513
+ .tds-combo-box-field:has([readonly]){
3514
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3515
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3670
3516
  }
3671
3517
 
3672
- .tds-date-picker-calendar-heading{
3518
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3519
+ border-color:var(--t-form-border-color-hover);
3520
+ }
3521
+
3522
+ .tds-combo-box-input{
3673
3523
  display:flex;
3674
3524
  flex:1;
3675
- gap:var(--t-spacing-half);
3676
3525
  align-items:center;
3677
- justify-content:flex-start;
3678
- }
3679
-
3680
- .tds-date-picker-calendar-overlay-trigger{
3681
- padding:4px 8px;
3526
+ padding-block:var(--tds-combo-box-padding-block);
3527
+ padding-inline-start:var(--t-spacing-1);
3682
3528
  font-family:inherit;
3683
- font-size:var(--t-font-size-md);
3684
- font-weight:var(--t-font-weight-semibold);
3685
- color:var(--t-text-color);
3686
- cursor:default;
3529
+ font-size:inherit;
3530
+ color:inherit;
3687
3531
  outline:0;
3688
3532
  background:transparent;
3689
3533
  border:0;
3690
- border-radius:var(--t-border-radius-sm);
3691
3534
  }
3692
3535
 
3693
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
3694
- background:var(--t-fill-color-neutral-070);
3536
+ .tds-combo-box-input::-moz-placeholder{
3537
+ color:var(--tds-combo-box-placeholder-color);
3538
+ -moz-user-select:none;
3539
+ user-select:none;
3695
3540
  }
3696
3541
 
3697
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
3698
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3699
- outline-offset:var(--t-focus-ring-offset);
3542
+ .tds-combo-box-input::placeholder{
3543
+ color:var(--tds-combo-box-placeholder-color);
3544
+ -webkit-user-select:none;
3545
+ -moz-user-select:none;
3546
+ user-select:none;
3700
3547
  }
3701
3548
 
3702
- .tds-date-picker-calendar{
3703
- inline-size:-moz-fit-content;
3704
- inline-size:fit-content;
3549
+ .tds-combo-box-button{
3550
+ flex-shrink:0;
3551
+ align-self:center;
3552
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3553
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3554
+ padding:0;
3555
+ margin-inline-end:var(--tds-combo-box-button-offset);
3705
3556
  }
3706
3557
 
3707
- .tds-date-picker-calendar-body{
3708
- position:relative;
3709
- padding:var(--tds-date-picker-popover-padding);
3710
- padding-block-start:0;
3558
+ .tds-combo-box-button > svg{
3559
+ inline-size:var(--tds-combo-box-font-size);
3560
+ block-size:var(--tds-combo-box-font-size);
3561
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3562
+ }
3563
+
3564
+ .tds-combo-box-button:not(.tds-btn){
3565
+ display:inline-flex;
3566
+ align-items:center;
3567
+ justify-content:center;
3568
+ inline-size:auto;
3569
+ block-size:auto;
3570
+ margin-inline-end:.75em;
3571
+ color:var(--t-icon-color);
3572
+ cursor:default;
3573
+ background:transparent;
3574
+ border:0;
3575
+ }
3576
+
3577
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3578
+ outline:0;
3579
+ }
3580
+
3581
+ .tds-combo-box-popover{
3582
+ width:var(--trigger-width);
3583
+ max-block-size:inherit;
3584
+ padding:var(--t-spacing-1);
3585
+ overflow:auto;
3586
+ outline:0;
3587
+ scrollbar-color:#0004 #0000;
3588
+ scrollbar-width:thin;
3589
+ background:var(--t-surface-color-card);
3590
+ background-clip:padding-box;
3591
+ border:1px solid var(--t-border-color);
3592
+ border-radius:var(--t-border-radius);
3593
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3711
3594
  }
3712
3595
 
3713
- .tds-date-picker-calendar-header{
3714
- display:flex;
3715
- align-items:center;
3716
- justify-content:space-between;
3717
- padding:var(--tds-date-picker-popover-padding);
3596
+ .tds-combo-box-popover[data-entering]{
3597
+ animation:tds-combo-box-popover-enter 160ms ease;
3598
+ }
3599
+
3600
+ .tds-combo-box-popover[data-exiting]{
3601
+ animation:tds-combo-box-popover-exit 130ms ease;
3602
+ }
3603
+
3604
+ @keyframes tds-combo-box-popover-enter{
3605
+ from{
3606
+ opacity:0;
3607
+ transform:translateY(-8px);
3608
+ }
3718
3609
  }
3719
3610
 
3720
- .tds-date-picker-calendar-title{
3721
- padding:4px 8px;
3722
- font-size:var(--t-font-size-md);
3723
- font-weight:var(--t-font-weight-semibold);
3611
+ @keyframes tds-combo-box-popover-exit{
3612
+ to{
3613
+ opacity:0;
3614
+ transform:translateY(-8px);
3615
+ }
3724
3616
  }
3725
3617
 
3726
- .tds-date-picker-calendar-title--visually-hidden{
3727
- position:absolute;
3728
- inline-size:1px;
3729
- block-size:1px;
3618
+ @media (prefers-reduced-motion: reduce){
3619
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3620
+ animation:none;
3621
+ }
3622
+
3623
+ .tds-combo-box-button > svg{
3624
+ transition:none;
3625
+ }
3626
+ }
3627
+
3628
+ .tds-combo-box-list{
3730
3629
  padding:0;
3731
- margin:-1px;
3732
- overflow:hidden;
3733
- white-space:nowrap;
3734
- border:0;
3735
- clip-path:inset(50%);
3630
+ margin:0;
3736
3631
  }
3737
3632
 
3738
- .tds-date-picker-calendar-nav{
3739
- display:flex;
3740
- align-items:center;
3741
- justify-content:center;
3742
- padding:var(--t-spacing-half);
3633
+ .tds-combo-box-list-item{
3634
+ display:block;
3635
+ padding-block:var(--t-spacing-1);
3636
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3637
+ overflow:hidden;
3638
+ text-overflow:ellipsis;
3639
+ font-size:1rem;
3743
3640
  color:var(--t-text-color);
3641
+ white-space:nowrap;
3744
3642
  cursor:default;
3745
- outline:0;
3746
- background:transparent;
3747
- border:0;
3748
- border-radius:var(--t-border-radius-sm);
3643
+ outline-offset:-1px;
3644
+ border-radius:var(--t-border-radius);
3749
3645
  }
3750
3646
 
3751
- .tds-date-picker-calendar-nav[data-hovered]{
3647
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3752
3648
  background:var(--t-fill-color-neutral-070);
3753
3649
  }
3754
3650
 
3755
- .tds-date-picker-calendar-nav[data-pressed]{
3651
+ .tds-combo-box-list-item[data-selected]{
3756
3652
  background:var(--t-fill-color-button-interaction-ghost-active);
3757
3653
  }
3758
3654
 
3759
- .tds-date-picker-calendar-nav[data-focus-visible]{
3760
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3761
- outline-offset:var(--t-focus-ring-offset);
3655
+ .tds-combo-box-list-item[data-focus-visible]{
3656
+ outline:var(--t-focus-ring-outline);
3657
+ outline-offset:-1px;
3762
3658
  }
3763
3659
 
3764
- .tds-date-picker-calendar-nav[data-disabled]{
3660
+ .tds-combo-box-list-item[data-disabled]{
3765
3661
  color:var(--t-form-color-disabled);
3766
3662
  cursor:not-allowed;
3767
3663
  }
3768
3664
 
3769
- .tds-date-picker-calendar-grid{
3770
- border-collapse:collapse;
3771
- }
3772
-
3773
- .tds-date-picker-calendar-header-cell{
3774
- padding-block:var(--t-spacing-half);
3775
- font-size:var(--t-font-size-sm);
3776
- font-weight:var(--t-font-weight-normal);
3777
- color:var(--t-text-color-secondary);
3778
- text-align:center;
3779
- }
3665
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3666
+ background:transparent;
3667
+ }
3780
3668
 
3781
- .tds-date-picker-calendar-cell{
3782
- display:flex;
3783
- align-items:center;
3784
- justify-content:center;
3785
- inline-size:2.25rem;
3786
- block-size:2.25rem;
3669
+ .tds-combo-box-empty-state{
3670
+ position:relative;
3671
+ min-block-size:var(--t-spacing-3);
3672
+ padding-block:var(--t-spacing-1);
3673
+ padding-inline:var(--t-spacing-2);
3787
3674
  font-size:var(--t-font-size-md);
3788
- color:var(--t-text-color);
3789
- cursor:default;
3790
- outline:0;
3791
- border-radius:var(--t-border-radius-sm);
3675
+ color:var(--t-text-color-secondary);
3792
3676
  }
3793
3677
 
3794
- .tds-date-picker-calendar-cell[data-hovered]{
3795
- background:var(--t-fill-color-neutral-070);
3796
- }
3797
-
3798
- .tds-date-picker-calendar-cell[data-pressed]{
3799
- background:var(--t-fill-color-button-interaction-ghost-active);
3800
- }
3801
-
3802
- .tds-date-picker-calendar-cell[data-selected]{
3803
- color:var(--t-text-color-inverted);
3804
- background:var(--t-fill-color-interaction);
3805
- }
3678
+ .tds-combo-box-load-more{
3679
+ position:relative;
3680
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
3681
+ }
3806
3682
 
3807
- .tds-date-picker-calendar-cell[data-focus-visible]{
3808
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3809
- outline-offset:var(--t-focus-ring-offset);
3810
- }
3683
+ .tds-combo-box-empty-state,
3684
+ .tds-combo-box-load-more{
3685
+ --tds-loading-spinner-visibility:visible;
3686
+ --tds-loading-spinner-animation-play-state:running;
3687
+ }
3811
3688
 
3812
- .tds-date-picker-calendar-cell[data-unavailable]{
3813
- color:var(--t-text-color-secondary);
3814
- text-decoration:line-through;
3815
- cursor:not-allowed;
3689
+ .tds-combo-box-list-section:not(:first-child){
3690
+ margin-block-start:var(--t-spacing-half);
3816
3691
  }
3817
3692
 
3818
- .tds-date-picker-calendar-cell[data-disabled]{
3819
- color:var(--t-form-color-disabled);
3820
- cursor:not-allowed;
3821
- }
3693
+ .tds-combo-box-section-header{
3694
+ padding-block:var(--t-spacing-1);
3695
+ padding-inline:var(--t-spacing-1);
3696
+ font-size:var(--t-font-size-sm);
3697
+ font-weight:var(--t-font-weight-semibold);
3698
+ color:var(--t-text-color-secondary);
3699
+ }
3822
3700
 
3823
- .tds-date-picker-calendar-cell[data-outside-month]{
3824
- color:var(--t-text-color-secondary);
3825
- }
3701
+ .tds-combo-box-description{
3702
+ display:flex;
3703
+ gap:var(--t-spacing-half);
3704
+ align-items:flex-start;
3705
+ margin:0;
3706
+ font-size:var(--t-font-size-sm);
3707
+ line-height:1.35;
3708
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3709
+ cursor:text;
3710
+ }
3826
3711
 
3827
- .tds-combo-box{
3828
- --tds-combo-box-border-color:var(--t-form-border-color);
3829
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3830
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3831
- --tds-combo-box-background-color:var(--t-form-background-color);
3832
- --tds-combo-box-color:var(--t-form-color);
3833
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3834
- --tds-combo-box-font-size:var(--t-font-size-md);
3835
- --tds-combo-box-min-height:var(--t-container-size-md);
3836
- --tds-combo-box-padding-block:6px;
3837
- --tds-combo-box-button-offset:4px;
3838
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3839
- --tds-combo-box-description-invalid-icon-display:none;
3712
+ .tds-combo-box-description-invalid-icon{
3713
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3714
+ flex-shrink:0;
3715
+ margin-block-start:calc(.5lh - .5em);
3716
+ line-height:1.35;
3717
+ }
3718
+
3719
+ .tds-date-picker{
3720
+ --tds-date-picker-border-color:var(--t-form-border-color);
3721
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3722
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3723
+ --tds-date-picker-background-color:var(--t-form-background-color);
3724
+ --tds-date-picker-color:var(--t-form-color);
3725
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3726
+ --tds-date-picker-font-size:var(--t-font-size-md);
3727
+ --tds-date-picker-min-height:var(--t-container-size-md);
3728
+ --tds-date-picker-padding-block:6px;
3729
+ --tds-date-picker-button-offset:4px;
3730
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3731
+ --tds-date-picker-description-invalid-icon-display:none;
3840
3732
 
3841
3733
  position:relative;
3842
3734
  display:flex;
@@ -3844,181 +3736,173 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3844
3736
  gap:var(--t-spacing-half);
3845
3737
  }
3846
3738
 
3847
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3739
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3848
3740
  margin-left:.25ch;
3849
3741
  color:var(--t-text-color-status-error);
3850
3742
  content:"*";
3851
3743
  }
3852
3744
 
3853
- .tds-combo-box[data-invalid]{
3854
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3855
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3856
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3857
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3858
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3859
- --tds-combo-box-description-invalid-icon-display:inline-block;
3745
+ .tds-date-picker[data-invalid]{
3746
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3747
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3748
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3749
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3750
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3751
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3860
3752
  }
3861
3753
 
3862
- .tds-combo-box[data-disabled]{
3863
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3864
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3865
- --tds-combo-box-color:var(--t-form-color-disabled);
3754
+ .tds-date-picker[data-disabled]{
3755
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3756
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3757
+ --tds-date-picker-color:var(--t-form-color-disabled);
3758
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3866
3759
  }
3867
3760
 
3868
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3869
- color:var(--t-form-color-disabled);
3870
- }
3871
-
3872
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3761
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3873
3762
  cursor:not-allowed;
3874
3763
  }
3875
3764
 
3876
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3877
- transform:rotate(.5turn);
3878
- }
3879
-
3880
- .tds-combo-box--lg{
3881
- --tds-combo-box-min-height:var(--t-container-size-lg);
3882
- --tds-combo-box-font-size:var(--t-font-size-lg);
3883
- --tds-combo-box-button-offset:5px;
3765
+ .tds-date-picker--lg{
3766
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3767
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3768
+ --tds-date-picker-button-offset:5px;
3884
3769
  }
3885
3770
 
3886
- .tds-combo-box-label{
3771
+ .tds-date-picker-label{
3887
3772
  font-size:var(--t-font-size-md);
3888
3773
  font-weight:var(--t-font-weight-normal);
3889
3774
  color:var(--t-text-color);
3890
3775
  cursor:default;
3891
3776
  }
3892
3777
 
3893
- .tds-combo-box-field{
3778
+ .tds-date-picker-field{
3894
3779
  display:flex;
3895
3780
  align-items:center;
3896
3781
  inline-size:100%;
3897
- min-block-size:var(--tds-combo-box-min-height);
3782
+ min-block-size:var(--tds-date-picker-min-height);
3898
3783
  font-family:inherit;
3899
- font-size:var(--tds-combo-box-font-size);
3784
+ font-size:var(--tds-date-picker-font-size);
3900
3785
  line-height:1;
3901
- color:var(--tds-combo-box-color);
3786
+ color:var(--tds-date-picker-color);
3902
3787
  -webkit-appearance:none;
3903
3788
  -moz-appearance:none;
3904
3789
  appearance:none;
3905
- cursor:default;
3790
+ cursor:text;
3906
3791
  outline:var(--t-focus-ring-width) solid transparent;
3907
3792
  outline-offset:0;
3908
- background-color:var(--tds-combo-box-background-color);
3909
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3793
+ background-color:var(--tds-date-picker-background-color);
3794
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3910
3795
  border-radius:var(--t-form-border-radius);
3911
3796
  }
3912
3797
 
3913
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3914
- border-color:var(--tds-combo-box-border-color-hover);
3798
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3799
+ border-color:var(--tds-date-picker-border-color-hover);
3915
3800
  }
3916
3801
 
3917
- .tds-combo-box-field[data-focus-within]{
3802
+ .tds-date-picker-field[data-focus-within]{
3918
3803
  outline-color:var(--t-focus-ring-color);
3919
3804
  outline-offset:var(--t-focus-ring-offset);
3920
- border-color:var(--tds-combo-box-border-color-active);
3805
+ border-color:var(--tds-date-picker-border-color-active);
3921
3806
  }
3922
3807
 
3923
- .tds-combo-box-field:has([readonly]){
3924
- --tds-input-border-color:var(--t-form-border-color-readonly);
3925
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3808
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3809
+ color:var(--t-form-color-readonly);
3810
+ background-color:var(--t-form-background-color-readonly);
3811
+ border-color:var(--t-form-border-color-readonly);
3926
3812
  }
3927
3813
 
3928
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3814
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3815
+ border-color:var(--t-form-border-color-readonly);
3816
+ }
3817
+
3818
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3819
+ outline-color:var(--t-focus-ring-color);
3820
+ outline-offset:var(--t-focus-ring-offset);
3929
3821
  border-color:var(--t-form-border-color-hover);
3930
3822
  }
3931
3823
 
3932
- .tds-combo-box-input{
3933
- display:flex;
3824
+ .tds-date-picker-input{
3934
3825
  flex:1;
3935
- align-items:center;
3936
- padding-block:var(--tds-combo-box-padding-block);
3826
+ padding-block:var(--tds-date-picker-padding-block);
3937
3827
  padding-inline-start:var(--t-spacing-1);
3938
- font-family:inherit;
3939
- font-size:inherit;
3940
- color:inherit;
3941
- outline:0;
3942
- background:transparent;
3943
- border:0;
3828
+ font-variant-numeric:tabular-nums;
3944
3829
  }
3945
3830
 
3946
- .tds-combo-box-input::-moz-placeholder{
3947
- color:var(--tds-combo-box-placeholder-color);
3948
- -moz-user-select:none;
3949
- user-select:none;
3831
+ .tds-date-picker-segment{
3832
+ padding-inline:2px;
3833
+ caret-color:transparent;
3834
+ border-radius:var(--t-border-radius-sm);
3835
+ }
3836
+
3837
+ .tds-date-picker-segment[data-placeholder]{
3838
+ color:var(--tds-date-picker-placeholder-color);
3950
3839
  }
3951
3840
 
3952
- .tds-combo-box-input::placeholder{
3953
- color:var(--tds-combo-box-placeholder-color);
3954
- -webkit-user-select:none;
3955
- -moz-user-select:none;
3956
- user-select:none;
3841
+ .tds-date-picker-segment[data-focused]{
3842
+ color:var(--t-text-color-inverted);
3843
+ outline:0;
3844
+ background:var(--t-fill-color-interaction);
3957
3845
  }
3958
3846
 
3959
- .tds-combo-box-button{
3960
- flex-shrink:0;
3961
- align-self:center;
3962
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3963
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3964
- padding:0;
3965
- margin-inline-end:var(--tds-combo-box-button-offset);
3847
+ .tds-date-picker-segment-separator{
3848
+ padding-inline:0;
3849
+ color:var(--tds-date-picker-placeholder-color);
3966
3850
  }
3967
3851
 
3968
- .tds-combo-box-button > svg{
3969
- inline-size:var(--tds-combo-box-font-size);
3970
- block-size:var(--tds-combo-box-font-size);
3971
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3972
- }
3852
+ .tds-date-picker-description{
3853
+ display:flex;
3854
+ gap:var(--t-spacing-half);
3855
+ align-items:flex-start;
3856
+ margin:0;
3857
+ font-size:var(--t-font-size-sm);
3858
+ line-height:1.35;
3859
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3860
+ cursor:text;
3861
+ }
3973
3862
 
3974
- .tds-combo-box-button:not(.tds-btn){
3975
- display:inline-flex;
3976
- align-items:center;
3977
- justify-content:center;
3978
- inline-size:auto;
3979
- block-size:auto;
3980
- margin-inline-end:.75em;
3981
- color:var(--t-icon-color);
3982
- cursor:default;
3983
- background:transparent;
3984
- border:0;
3863
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3864
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3865
+ flex-shrink:0;
3866
+ margin-block-start:calc(.5lh - .5em);
3867
+ line-height:1.35;
3985
3868
  }
3986
3869
 
3987
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3988
- outline:0;
3989
- }
3870
+ .tds-date-picker-button{
3871
+ flex-shrink:0;
3872
+ align-self:center;
3873
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3874
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3875
+ padding:0;
3876
+ margin-inline-end:var(--tds-date-picker-button-offset);
3877
+ }
3990
3878
 
3991
- .tds-combo-box-popover{
3992
- width:var(--trigger-width);
3993
- max-block-size:inherit;
3994
- padding:var(--t-spacing-1);
3995
- overflow:auto;
3996
- outline:0;
3997
- scrollbar-color:#0004 #0000;
3998
- scrollbar-width:thin;
3879
+ .tds-date-picker-popover{
3880
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
3881
+
3882
+ position:relative;
3883
+ overflow:hidden;
3999
3884
  background:var(--t-surface-color-card);
4000
- background-clip:padding-box;
4001
3885
  border:1px solid var(--t-border-color);
4002
3886
  border-radius:var(--t-border-radius);
4003
3887
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4004
3888
  }
4005
3889
 
4006
- .tds-combo-box-popover[data-entering]{
4007
- animation:tds-combo-box-popover-enter 160ms ease;
3890
+ .tds-date-picker-popover[data-entering]{
3891
+ animation:tds-date-picker-popover-enter 160ms ease;
4008
3892
  }
4009
3893
 
4010
- .tds-combo-box-popover[data-exiting]{
4011
- animation:tds-combo-box-popover-exit 130ms ease;
3894
+ .tds-date-picker-popover[data-exiting]{
3895
+ animation:tds-date-picker-popover-exit 130ms ease;
4012
3896
  }
4013
3897
 
4014
- @keyframes tds-combo-box-popover-enter{
3898
+ @keyframes tds-date-picker-popover-enter{
4015
3899
  from{
4016
3900
  opacity:0;
4017
3901
  transform:translateY(-8px);
4018
3902
  }
4019
3903
  }
4020
3904
 
4021
- @keyframes tds-combo-box-popover-exit{
3905
+ @keyframes tds-date-picker-popover-exit{
4022
3906
  to{
4023
3907
  opacity:0;
4024
3908
  transform:translateY(-8px);
@@ -4026,105 +3910,221 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4026
3910
  }
4027
3911
 
4028
3912
  @media (prefers-reduced-motion: reduce){
4029
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3913
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4030
3914
  animation:none;
4031
3915
  }
3916
+ }
4032
3917
 
4033
- .tds-combo-box-button > svg{
4034
- transition:none;
4035
- }
3918
+ .tds-date-picker-overlay{
3919
+ position:absolute;
3920
+ inset:0;
3921
+ z-index:1;
3922
+ display:flex;
3923
+ background:var(--t-surface-color-card);
4036
3924
  }
4037
3925
 
4038
- .tds-combo-box-list{
4039
- padding:0;
4040
- margin:0;
3926
+ .tds-date-picker-overlay-list{
3927
+ display:grid;
3928
+ gap:var(--t-spacing-half);
3929
+ padding-inline:var(--tds-date-picker-popover-padding);
3930
+ outline:0;
4041
3931
  }
4042
3932
 
4043
- .tds-combo-box-list-item{
4044
- display:block;
4045
- padding-block:var(--t-spacing-1);
4046
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4047
- overflow:hidden;
4048
- text-overflow:ellipsis;
4049
- font-size:1rem;
3933
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
3934
+ flex:1;
3935
+ grid-template-rows:repeat(4, 1fr);
3936
+ grid-template-columns:repeat(3, 1fr);
3937
+ }
3938
+
3939
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
3940
+ flex:1;
3941
+ grid-template-columns:repeat(4, 1fr);
3942
+ grid-auto-rows:3rem;
3943
+ overflow-y:auto;
3944
+ }
3945
+
3946
+ .tds-date-picker-overlay-cell{
3947
+ display:flex;
3948
+ align-items:center;
3949
+ justify-content:center;
3950
+ font-family:inherit;
3951
+ font-size:var(--t-font-size-md);
4050
3952
  color:var(--t-text-color);
4051
- white-space:nowrap;
4052
3953
  cursor:default;
4053
- outline-offset:-1px;
4054
- border-radius:var(--t-border-radius);
3954
+ outline:0;
3955
+ background:transparent;
3956
+ border:0;
3957
+ border-radius:var(--t-border-radius-sm);
4055
3958
  }
4056
3959
 
4057
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3960
+ .tds-date-picker-overlay-cell[data-hovered]{
4058
3961
  background:var(--t-fill-color-neutral-070);
4059
3962
  }
4060
3963
 
4061
- .tds-combo-box-list-item[data-selected]{
4062
- background:var(--t-fill-color-button-interaction-ghost-active);
3964
+ .tds-date-picker-overlay-cell[data-selected]{
3965
+ color:var(--t-text-color-inverted);
3966
+ background:var(--t-fill-color-interaction);
4063
3967
  }
4064
3968
 
4065
- .tds-combo-box-list-item[data-focus-visible]{
4066
- outline:var(--t-focus-ring-outline);
4067
- outline-offset:-1px;
3969
+ .tds-date-picker-overlay-cell[data-focus-visible]{
3970
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3971
+ outline-offset:var(--t-focus-ring-offset);
4068
3972
  }
4069
3973
 
4070
- .tds-combo-box-list-item[data-disabled]{
4071
- color:var(--t-form-color-disabled);
4072
- cursor:not-allowed;
3974
+ .tds-date-picker-calendar-heading{
3975
+ display:flex;
3976
+ flex:1;
3977
+ gap:var(--t-spacing-half);
3978
+ align-items:center;
3979
+ justify-content:flex-start;
3980
+ }
3981
+
3982
+ .tds-date-picker-calendar-overlay-trigger{
3983
+ padding:4px 8px;
3984
+ font-family:inherit;
3985
+ font-size:var(--t-font-size-md);
3986
+ font-weight:var(--t-font-weight-semibold);
3987
+ color:var(--t-text-color);
3988
+ cursor:default;
3989
+ outline:0;
3990
+ background:transparent;
3991
+ border:0;
3992
+ border-radius:var(--t-border-radius-sm);
3993
+ }
3994
+
3995
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
3996
+ background:var(--t-fill-color-neutral-070);
4073
3997
  }
4074
3998
 
4075
- .tds-combo-box-list-item[data-disabled][data-hovered]{
4076
- background:transparent;
4077
- }
3999
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
4000
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4001
+ outline-offset:var(--t-focus-ring-offset);
4002
+ }
4078
4003
 
4079
- .tds-combo-box-empty-state{
4004
+ .tds-date-picker-calendar{
4005
+ inline-size:-moz-fit-content;
4006
+ inline-size:fit-content;
4007
+ }
4008
+
4009
+ .tds-date-picker-calendar-body{
4080
4010
  position:relative;
4081
- min-block-size:var(--t-spacing-3);
4082
- padding-block:var(--t-spacing-1);
4083
- padding-inline:var(--t-spacing-2);
4011
+ padding:var(--tds-date-picker-popover-padding);
4012
+ padding-block-start:0;
4013
+ }
4014
+
4015
+ .tds-date-picker-calendar-header{
4016
+ display:flex;
4017
+ align-items:center;
4018
+ justify-content:space-between;
4019
+ padding:var(--tds-date-picker-popover-padding);
4020
+ }
4021
+
4022
+ .tds-date-picker-calendar-title{
4023
+ padding:4px 8px;
4084
4024
  font-size:var(--t-font-size-md);
4085
- color:var(--t-text-color-secondary);
4025
+ font-weight:var(--t-font-weight-semibold);
4086
4026
  }
4087
4027
 
4088
- .tds-combo-box-load-more{
4089
- position:relative;
4090
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
4028
+ .tds-date-picker-calendar-title--visually-hidden{
4029
+ position:absolute;
4030
+ inline-size:1px;
4031
+ block-size:1px;
4032
+ padding:0;
4033
+ margin:-1px;
4034
+ overflow:hidden;
4035
+ white-space:nowrap;
4036
+ border:0;
4037
+ clip-path:inset(50%);
4091
4038
  }
4092
4039
 
4093
- .tds-combo-box-empty-state,
4094
- .tds-combo-box-load-more{
4095
- --tds-loading-spinner-visibility:visible;
4096
- --tds-loading-spinner-animation-play-state:running;
4040
+ .tds-date-picker-calendar-nav{
4041
+ display:flex;
4042
+ align-items:center;
4043
+ justify-content:center;
4044
+ padding:var(--t-spacing-half);
4045
+ color:var(--t-text-color);
4046
+ cursor:default;
4047
+ outline:0;
4048
+ background:transparent;
4049
+ border:0;
4050
+ border-radius:var(--t-border-radius-sm);
4097
4051
  }
4098
4052
 
4099
- .tds-combo-box-list-section:not(:first-child){
4100
- margin-block-start:var(--t-spacing-half);
4053
+ .tds-date-picker-calendar-nav[data-hovered]{
4054
+ background:var(--t-fill-color-neutral-070);
4101
4055
  }
4102
4056
 
4103
- .tds-combo-box-section-header{
4104
- padding-block:var(--t-spacing-1);
4105
- padding-inline:var(--t-spacing-1);
4057
+ .tds-date-picker-calendar-nav[data-pressed]{
4058
+ background:var(--t-fill-color-button-interaction-ghost-active);
4059
+ }
4060
+
4061
+ .tds-date-picker-calendar-nav[data-focus-visible]{
4062
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4063
+ outline-offset:var(--t-focus-ring-offset);
4064
+ }
4065
+
4066
+ .tds-date-picker-calendar-nav[data-disabled]{
4067
+ color:var(--t-form-color-disabled);
4068
+ cursor:not-allowed;
4069
+ }
4070
+
4071
+ .tds-date-picker-calendar-grid{
4072
+ border-collapse:collapse;
4073
+ }
4074
+
4075
+ .tds-date-picker-calendar-header-cell{
4076
+ padding-block:var(--t-spacing-half);
4106
4077
  font-size:var(--t-font-size-sm);
4107
- font-weight:var(--t-font-weight-semibold);
4078
+ font-weight:var(--t-font-weight-normal);
4108
4079
  color:var(--t-text-color-secondary);
4080
+ text-align:center;
4109
4081
  }
4110
4082
 
4111
- .tds-combo-box-description{
4083
+ .tds-date-picker-calendar-cell{
4112
4084
  display:flex;
4113
- gap:var(--t-spacing-half);
4114
- align-items:flex-start;
4115
- margin:0;
4116
- font-size:var(--t-font-size-sm);
4117
- line-height:1.35;
4118
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4119
- cursor:text;
4085
+ align-items:center;
4086
+ justify-content:center;
4087
+ inline-size:2.25rem;
4088
+ block-size:2.25rem;
4089
+ font-size:var(--t-font-size-md);
4090
+ color:var(--t-text-color);
4091
+ cursor:default;
4092
+ outline:0;
4093
+ border-radius:var(--t-border-radius-sm);
4120
4094
  }
4121
4095
 
4122
- .tds-combo-box-description-invalid-icon{
4123
- display:var(--tds-combo-box-description-invalid-icon-display, none);
4124
- flex-shrink:0;
4125
- margin-block-start:calc(.5lh - .5em);
4126
- line-height:1.35;
4127
- }
4096
+ .tds-date-picker-calendar-cell[data-hovered]{
4097
+ background:var(--t-fill-color-neutral-070);
4098
+ }
4099
+
4100
+ .tds-date-picker-calendar-cell[data-pressed]{
4101
+ background:var(--t-fill-color-button-interaction-ghost-active);
4102
+ }
4103
+
4104
+ .tds-date-picker-calendar-cell[data-selected]{
4105
+ color:var(--t-text-color-inverted);
4106
+ background:var(--t-fill-color-interaction);
4107
+ }
4108
+
4109
+ .tds-date-picker-calendar-cell[data-focus-visible]{
4110
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4111
+ outline-offset:var(--t-focus-ring-offset);
4112
+ }
4113
+
4114
+ .tds-date-picker-calendar-cell[data-unavailable]{
4115
+ color:var(--t-text-color-secondary);
4116
+ text-decoration:line-through;
4117
+ cursor:not-allowed;
4118
+ }
4119
+
4120
+ .tds-date-picker-calendar-cell[data-disabled]{
4121
+ color:var(--t-form-color-disabled);
4122
+ cursor:not-allowed;
4123
+ }
4124
+
4125
+ .tds-date-picker-calendar-cell[data-outside-month]{
4126
+ color:var(--t-text-color-secondary);
4127
+ }
4128
4128
 
4129
4129
  .tds-number-stepper{
4130
4130
  --tds-number-stepper-border-color:var(--t-form-border-color);