@planningcenter/tapestry 3.4.1-rc.10 → 3.4.1-rc.11

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 +1549 -1549
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1549 -1549
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -276,958 +276,818 @@
276
276
  }
277
277
  }
278
278
 
279
+ .tds-checkbox{
280
+ --tds-checkbox-font-size:var(--t-font-size-md);
281
+ --tds-checkbox-cursor:pointer;
282
+ --tds-checkbox-line-height:1.4;
283
+ --tds-checkbox-transition-property:background-color, border-color;
279
284
 
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
- }
285
+ --tds-checkbox-input-size:var(--t-element-size-md);
286
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
287
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
288
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
337
289
 
338
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
339
- display:flex;
340
- }
290
+ --tds-checkbox-input-icon:none;
291
+ --tds-checkbox-input-icon-visibility:hidden;
292
+ --tds-checkbox-input-icon-opacity:0;
293
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
341
294
 
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
- }
295
+ --tds-checkbox-label-color:var(--t-form-color);
347
296
 
348
- .tds-sidenav-section-list{
349
- width:100%;
350
- padding:0;
351
- margin:0;
352
- list-style:none;
353
- }
297
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
298
+ --tds-checkbox-description-line-height:1.35;
299
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
300
+ --tds-checkbox-description-invalid-icon-display:none;
354
301
 
355
- .tds-sidenav-section-header{
356
- display:flex;
357
- align-items:baseline;
358
- justify-content:space-between;
359
- padding-top:var(--t-spacing-2);
302
+ position:relative;
303
+ display:inline-grid;
304
+ grid-template-columns:auto;
305
+ grid-auto-columns:1fr;
306
+ gap:var(--t-spacing-fourth) 0;
307
+ line-height:var(--tds-checkbox-line-height);
308
+ -webkit-user-select:none;
309
+ -moz-user-select:none;
310
+ user-select:none;
360
311
  }
361
312
 
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;
313
+ .tds-checkbox label{
314
+ grid-area:1 / 2;
315
+ padding-inline-start:var(--t-spacing-1);
316
+ font-size:var(--tds-checkbox-font-size);
317
+ font-weight:var(--t-font-weight-normal);
318
+ color:var(--tds-checkbox-label-color);
319
+ cursor:var(--tds-checkbox-cursor);
373
320
  }
374
321
 
375
- .tds-sidenav-section-header [slot="label-actions"]{
322
+ .tds-checkbox tds-indeterminate{
376
323
  display:flex;
377
- gap:var(--t-spacing-half);
378
- align-items:center;
379
324
  }
380
325
 
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){
326
+ .tds-checkbox input[type="checkbox"]{
397
327
  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;
328
+ width:1em;
329
+ height:1em;
330
+ margin:calc((1lh - 1em) / 2) 0 0;
331
+ font-size:var(--tds-checkbox-font-size);
332
+ line-height:inherit;
409
333
  -webkit-appearance:none;
410
334
  -moz-appearance:none;
411
335
  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);
336
+ cursor:var(--tds-checkbox-cursor);
337
+ background-color:var(--tds-checkbox-input-background-color);
338
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
339
+ border-radius:var(--tds-checkbox-input-border-radius);
340
+ transition-timing-function:var(--t-ease-in-out);
341
+ transition-duration:var(--t-duration-200);
342
+ transition-property:var(--tds-checkbox-transition-property);
417
343
  }
418
344
 
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;
345
+ :is(.tds-checkbox input[type="checkbox"])::before{
346
+ position:absolute;
347
+ top:50%;
348
+ left:50%;
349
+ visibility:var(--tds-checkbox-input-icon-visibility);
350
+ width:100%;
351
+ height:100%;
352
+ content:"";
353
+ background-color:var(--tds-checkbox-input-icon-fill);
354
+ border-radius:var(--tds-checkbox-input-border-radius);
355
+ opacity:var(--tds-checkbox-input-icon-opacity);
356
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
357
+ mask-image:var(--tds-checkbox-input-icon);
358
+ -webkit-mask-repeat:no-repeat;
359
+ mask-repeat:no-repeat;
360
+ -webkit-mask-size:contain;
361
+ mask-size:contain;
362
+ transform:translate(-50%, -50%);
426
363
  }
427
364
 
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;
365
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
366
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
367
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
432
368
  }
433
369
 
434
- :is(.tds-sidenav-item :is(a,button)):active{
435
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
370
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
371
+ outline:var(--t-focus-ring-outline);
372
+ outline-offset:var(--t-focus-ring-offset);
436
373
  }
437
374
 
438
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
439
- overflow:hidden;
440
- color:var(--tds-sidenav-item-icon-color);
375
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
376
+ pointer-events:none;
441
377
  }
442
378
 
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);
447
- }
379
+ @media (prefers-reduced-motion: reduce){
448
380
 
449
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
450
- --tds-sidenav-indent:19px;
381
+ .tds-checkbox input[type="checkbox"]{
382
+ --tds-checkbox-transition-property:none;
383
+ }
451
384
  }
452
385
 
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;
386
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
387
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
388
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
389
+ --tds-checkbox-input-icon-visibility:visible;
390
+ --tds-checkbox-input-icon-opacity:1;
391
+ }
392
+
393
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
394
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
395
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
457
396
  }
458
397
 
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);
398
+ .tds-checkbox:has(input:checked){
399
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
400
+ }
462
401
 
463
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
464
- font-weight:var(--t-font-weight-semibold);
402
+ .tds-checkbox:has(input:indeterminate){
403
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
465
404
  }
466
405
 
467
- .tds-sidenav-item:has(.tds-sidenav-section){
468
- display:flex;
469
- flex-direction:column;
470
- gap:var(--t-spacing-half);
406
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
407
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
408
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
409
+ --tds-checkbox-description-invalid-icon-display:inline-block;
471
410
  }
472
411
 
473
- .tds-sidenav-item .tds-sidenav-section-list{
474
- --tds-sidenav-item-depth:1;
475
- gap:0;
476
- }
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);
484
- }
485
-
486
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
487
- --tds-sidenav-item-depth:2;
412
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
413
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
414
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
488
415
  }
489
416
 
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;
417
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
418
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
419
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
496
420
  }
497
421
 
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
- }
508
-
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);
422
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
423
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
424
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
518
425
  }
519
426
 
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
- }
427
+ .tds-checkbox:has(input:required) label::after{
428
+ margin-left:.25ch;
429
+ color:var(--t-text-color-status-error);
430
+ content:"*";
431
+ }
525
432
 
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
- }
433
+ .tds-checkbox:has(input:disabled){
434
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
435
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
530
436
 
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
- }
437
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
438
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
439
+ --tds-checkbox-cursor:not-allowed;
440
+ }
534
441
 
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);
442
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
443
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
538
444
  }
539
445
 
540
- .tds-sidenav-responsive-header{
446
+ .tds-checkbox-description{
541
447
  display:flex;
542
- gap:var(--t-spacing-2);
543
- align-items:center;
544
- width:100%;
448
+ grid-area:2 / 2;
449
+ gap:var(--t-spacing-half);
450
+ align-items:flex-start;
451
+ padding-inline-start:var(--t-spacing-1);
452
+ margin:0;
453
+ font-size:var(--tds-checkbox-description-font-size);
454
+ line-height:var(--tds-checkbox-description-line-height);
455
+ color:var(--tds-checkbox-description-color);
456
+ cursor:text;
545
457
  }
546
458
 
547
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
548
- order:0;
459
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
460
+ display:var(--tds-checkbox-description-invalid-icon-display);
461
+ flex-shrink:0;
462
+ margin-top:calc(.5lh - .5em);
463
+ line-height:var(--tds-checkbox-description-line-height);
549
464
  }
550
465
 
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);
558
- }
466
+ .tds-checkbox--sm{
467
+ --tds-checkbox-line-height:1.35;
468
+ --tds-checkbox-input-size:var(--t-element-size-sm);
469
+ --tds-checkbox-font-size:var(--t-font-size-sm);
470
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
471
+ --tds-checkbox-description-line-height:1.3;
472
+ }
559
473
 
560
- @media (max-width: 719px){
561
- .tds-sidenav-collapse{
562
- z-index:10001;
563
- display:none;
564
- max-width:min(448px, calc(100vw - 48px));
474
+ .tds-checkbox-group{
475
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
476
+ --tds-checkbox-group-line-height:1.4;
477
+ --tds-checkbox-group-gap:var(--t-spacing-1);
478
+
479
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
480
+ --tds-checkbox-group-description-line-height:1.35;
481
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
482
+ --tds-checkbox-group-description-invalid-icon-display:none;
483
+ display:flex;
484
+ flex-direction:column;
485
+ gap:0;
486
+ padding:0;
487
+ margin:0;
488
+
489
+ font-size:var(--tds-checkbox-group-font-size);
490
+ line-height:var(--tds-checkbox-group-line-height);
491
+ border:0;
492
+ }
493
+
494
+ .tds-checkbox-group legend{
495
+ float:left;
565
496
  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;
497
+ margin:0;
578
498
  }
579
499
 
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;
500
+ .tds-checkbox-group[aria-invalid="true"]{
501
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
502
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
588
503
  }
589
504
 
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;
505
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
506
+ margin-left:.25ch;
507
+ color:var(--t-text-color-status-error);
508
+ content:"*";
596
509
  }
597
510
 
598
- .tds-sidenav-collapse:not(:popover-open){
599
- opacity:var(--tds-sidenav-collapse-closed-opacity);
600
- transition:var(--tds-sidenav-collapse-transition-exit);
511
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
512
+ content:none;
601
513
  }
602
514
 
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;
613
- }
515
+ .tds-checkbox-group-fields{
516
+ display:flex;
517
+ flex-direction:column;
518
+ gap:var(--tds-checkbox-group-gap);
519
+ align-items:flex-start;
520
+ margin-top:var(--t-spacing-1);
521
+ }
614
522
 
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
- }
523
+ .tds-checkbox-group-description{
524
+ display:flex;
525
+ gap:var(--t-spacing-half);
526
+ align-items:flex-start;
527
+ margin:var(--t-spacing-fourth) 0 0;
528
+ font-size:var(--tds-checkbox-group-description-font-size);
529
+ line-height:var(--tds-checkbox-group-description-line-height);
530
+ color:var(--tds-checkbox-group-description-color);
531
+ cursor:text;
620
532
  }
621
533
 
622
- @media (min-width: 720px){
623
- .tds-sidenav-responsive-header{
624
- display:none;
534
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
535
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
536
+ flex-shrink:0;
537
+ margin-top:calc(.5lh - .5em);
538
+ line-height:var(--tds-checkbox-group-description-line-height);
625
539
  }
540
+
541
+ .tds-checkbox-group--sm{
542
+ --tds-checkbox-group-line-height:1.35;
543
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
544
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
545
+ --tds-checkbox-group-description-line-height:1.3;
626
546
  }
627
547
 
628
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
629
- display:none;
630
- }
548
+ .tds-combo-box{
549
+ --tds-combo-box-button-offset:4px;
550
+ }
631
551
 
632
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
633
- display:block;
634
- }
552
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
553
+ transform:rotate(.5turn);
554
+ }
635
555
 
636
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
637
- display:flex;
638
- flex-direction:column;
639
- }
556
+ .tds-combo-box--lg{
557
+ --tds-combo-box-button-offset:5px;
558
+ }
640
559
 
641
- .tds-checkbox{
642
- --tds-checkbox-font-size:var(--t-font-size-md);
643
- --tds-checkbox-cursor:pointer;
644
- --tds-checkbox-line-height:1.4;
645
- --tds-checkbox-transition-property:background-color, border-color;
560
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
561
+ display:none;
562
+ }
646
563
 
647
- --tds-checkbox-input-size:var(--t-element-size-md);
648
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
649
- --tds-checkbox-input-border-color:var(--t-form-border-color);
650
- --tds-checkbox-input-background-color:var(--t-form-background-color);
564
+ .tds-combo-box-input{
565
+ display:flex;
566
+ flex:1;
567
+ align-items:center;
568
+ padding-block:var(--tds-field-padding-block);
569
+ padding-inline:var(--tds-field-padding-inline);
570
+ font-family:inherit;
571
+ font-size:inherit;
572
+ color:inherit;
573
+ outline:0;
574
+ background:transparent;
575
+ border:0;
576
+ }
651
577
 
652
- --tds-checkbox-input-icon:none;
653
- --tds-checkbox-input-icon-visibility:hidden;
654
- --tds-checkbox-input-icon-opacity:0;
655
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
578
+ .tds-combo-box-input:has( + .tds-combo-box-button){
579
+ padding-inline-end:0;
580
+ }
656
581
 
657
- --tds-checkbox-label-color:var(--t-form-color);
582
+ .tds-combo-box-input::-moz-placeholder{
583
+ color:var(--tds-field-placeholder-color);
584
+ -moz-user-select:none;
585
+ user-select:none;
586
+ }
658
587
 
659
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
660
- --tds-checkbox-description-line-height:1.35;
661
- --tds-checkbox-description-color:var(--t-text-color-secondary);
662
- --tds-checkbox-description-invalid-icon-display:none;
588
+ .tds-combo-box-input::placeholder{
589
+ color:var(--tds-field-placeholder-color);
590
+ -webkit-user-select:none;
591
+ -moz-user-select:none;
592
+ user-select:none;
593
+ }
663
594
 
664
- position:relative;
665
- display:inline-grid;
666
- grid-template-columns:auto;
667
- grid-auto-columns:1fr;
668
- gap:var(--t-spacing-fourth) 0;
669
- line-height:var(--tds-checkbox-line-height);
595
+ .tds-combo-box-button{
596
+ flex-shrink:0;
597
+ align-self:center;
598
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
599
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
600
+ padding:0;
601
+ margin-inline-end:var(--tds-combo-box-button-offset);
602
+ }
603
+
604
+ .tds-combo-box-button > svg{
605
+ inline-size:var(--tds-field-font-size);
606
+ block-size:var(--tds-field-font-size);
607
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
608
+ }
609
+
610
+ .tds-combo-box-popover{
611
+ width:var(--trigger-width);
612
+ max-block-size:inherit;
613
+ padding:var(--t-spacing-1);
614
+ overflow:auto;
615
+ scroll-behavior:smooth;
616
+ overscroll-behavior:none;
670
617
  -webkit-user-select:none;
671
618
  -moz-user-select:none;
672
619
  user-select:none;
620
+ outline:0;
621
+ scrollbar-color:#0004 var(--t-surface-color-card);
622
+ scrollbar-width:thin;
623
+ background:var(--t-surface-color-card);
624
+ background-clip:padding-box;
625
+ border:1px solid var(--t-border-color);
626
+ border-radius:var(--t-border-radius);
627
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
673
628
  }
674
629
 
675
- .tds-checkbox label{
676
- grid-area:1 / 2;
677
- padding-inline-start:var(--t-spacing-1);
678
- font-size:var(--tds-checkbox-font-size);
679
- font-weight:var(--t-font-weight-normal);
680
- color:var(--tds-checkbox-label-color);
681
- cursor:var(--tds-checkbox-cursor);
630
+ .tds-combo-box-popover[data-entering]{
631
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
682
632
  }
683
633
 
684
- .tds-checkbox tds-indeterminate{
685
- display:flex;
634
+ .tds-combo-box-popover[data-exiting]{
635
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
686
636
  }
687
637
 
688
- .tds-checkbox input[type="checkbox"]{
689
- position:relative;
690
- width:1em;
691
- height:1em;
692
- margin:calc((1lh - 1em) / 2) 0 0;
693
- font-size:var(--tds-checkbox-font-size);
694
- line-height:inherit;
695
- -webkit-appearance:none;
696
- -moz-appearance:none;
697
- appearance:none;
698
- cursor:var(--tds-checkbox-cursor);
699
- background-color:var(--tds-checkbox-input-background-color);
700
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
701
- border-radius:var(--tds-checkbox-input-border-radius);
702
- transition-timing-function:var(--t-ease-in-out);
703
- transition-duration:var(--t-duration-200);
704
- transition-property:var(--tds-checkbox-transition-property);
638
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
639
+ will-change:opacity, transform;
705
640
  }
706
641
 
707
- :is(.tds-checkbox input[type="checkbox"])::before{
708
- position:absolute;
709
- top:50%;
710
- left:50%;
711
- visibility:var(--tds-checkbox-input-icon-visibility);
712
- width:100%;
713
- height:100%;
714
- content:"";
715
- background-color:var(--tds-checkbox-input-icon-fill);
716
- border-radius:var(--tds-checkbox-input-border-radius);
717
- opacity:var(--tds-checkbox-input-icon-opacity);
718
- -webkit-mask-image:var(--tds-checkbox-input-icon);
719
- mask-image:var(--tds-checkbox-input-icon);
720
- -webkit-mask-repeat:no-repeat;
721
- mask-repeat:no-repeat;
722
- -webkit-mask-size:contain;
723
- mask-size:contain;
724
- transform:translate(-50%, -50%);
725
- }
726
-
727
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
728
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
729
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
730
- }
731
-
732
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
733
- outline:var(--t-focus-ring-outline);
734
- outline-offset:var(--t-focus-ring-offset);
735
- }
736
-
737
- :is(.tds-checkbox input[type="checkbox"]):disabled{
738
- pointer-events:none;
739
- }
642
+ @keyframes tds-combo-box-popover{
643
+ from{
644
+ opacity:0;
645
+ transform:translateY(-8px);
646
+ }
647
+ }
740
648
 
741
649
  @media (prefers-reduced-motion: reduce){
742
-
743
- .tds-checkbox input[type="checkbox"]{
744
- --tds-checkbox-transition-property:none;
745
- }
650
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
651
+ animation:none;
746
652
  }
747
653
 
748
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
749
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
750
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
751
- --tds-checkbox-input-icon-visibility:visible;
752
- --tds-checkbox-input-icon-opacity:1;
654
+ .tds-combo-box-button > svg{
655
+ transition:none;
753
656
  }
657
+ }
754
658
 
755
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
756
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
757
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
758
- }
659
+ .tds-combo-box-list{
660
+ padding:0;
661
+ margin:0;
662
+ }
759
663
 
760
- .tds-checkbox:has(input:checked){
761
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
664
+ .tds-combo-box-list-item{
665
+ display:block;
666
+ padding-block:var(--t-spacing-1);
667
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
668
+ overflow:hidden;
669
+ text-overflow:ellipsis;
670
+ font-size:1rem;
671
+ color:var(--t-text-color);
672
+ white-space:nowrap;
673
+ cursor:default;
674
+ border-radius:var(--t-border-radius);
675
+ }
676
+
677
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
678
+ background:var(--t-fill-color-neutral-070);
762
679
  }
763
680
 
764
- .tds-checkbox:has(input:indeterminate){
765
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
681
+ .tds-combo-box-list-item[data-selected]{
682
+ background:var(--t-fill-color-button-interaction-ghost-active);
766
683
  }
767
684
 
768
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
769
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
770
- --tds-checkbox-description-color:var(--t-text-color-status-error);
771
- --tds-checkbox-description-invalid-icon-display:inline-block;
685
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
686
+ background:var(--t-fill-color-neutral-060);
772
687
  }
773
688
 
774
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
775
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
776
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
777
- }
689
+ .tds-combo-box-list-item[data-disabled]{
690
+ color:var(--t-form-color-disabled);
691
+ cursor:not-allowed;
692
+ }
778
693
 
779
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
780
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
781
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
694
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
695
+ background:transparent;
782
696
  }
783
697
 
784
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
785
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
786
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
787
- }
698
+ .tds-combo-box-empty-state{
699
+ position:relative;
700
+ min-block-size:var(--t-spacing-3);
701
+ padding-block:var(--t-spacing-1);
702
+ padding-inline:var(--t-spacing-2);
703
+ font-size:var(--t-font-size-md);
704
+ color:var(--t-text-color-secondary);
705
+ }
788
706
 
789
- .tds-checkbox:has(input:required) label::after{
790
- margin-left:.25ch;
791
- color:var(--t-text-color-status-error);
792
- content:"*";
793
- }
707
+ .tds-combo-box-load-more{
708
+ position:relative;
709
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
710
+ }
794
711
 
795
- .tds-checkbox:has(input:disabled){
796
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
797
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
712
+ .tds-combo-box-empty-state,
713
+ .tds-combo-box-load-more{
714
+ --tds-loading-spinner-visibility:visible;
715
+ --tds-loading-spinner-animation-play-state:running;
716
+ }
798
717
 
799
- --tds-checkbox-label-color:var(--t-form-color-disabled);
800
- --tds-checkbox-description-color:var(--t-form-color-disabled);
801
- --tds-checkbox-cursor:not-allowed;
718
+ .tds-combo-box-list-section:not(:first-child){
719
+ margin-block-start:var(--t-spacing-half);
802
720
  }
803
721
 
804
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
805
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
806
- }
722
+ .tds-combo-box-section-header{
723
+ padding-block:var(--t-spacing-1);
724
+ padding-inline:var(--t-spacing-1);
725
+ font-size:var(--t-font-size-sm);
726
+ font-weight:var(--t-font-weight-semibold);
727
+ color:var(--t-text-color-secondary);
728
+ }
807
729
 
808
- .tds-checkbox-description{
809
- display:flex;
810
- grid-area:2 / 2;
811
- gap:var(--t-spacing-half);
812
- align-items:flex-start;
813
- padding-inline-start:var(--t-spacing-1);
814
- margin:0;
815
- font-size:var(--tds-checkbox-description-font-size);
816
- line-height:var(--tds-checkbox-description-line-height);
817
- color:var(--tds-checkbox-description-color);
818
- cursor:text;
819
- }
820
-
821
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
822
- display:var(--tds-checkbox-description-invalid-icon-display);
823
- flex-shrink:0;
824
- margin-top:calc(.5lh - .5em);
825
- line-height:var(--tds-checkbox-description-line-height);
826
- }
827
-
828
- .tds-checkbox--sm{
829
- --tds-checkbox-line-height:1.35;
830
- --tds-checkbox-input-size:var(--t-element-size-sm);
831
- --tds-checkbox-font-size:var(--t-font-size-sm);
832
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
833
- --tds-checkbox-description-line-height:1.3;
834
- }
835
-
836
- .tds-checkbox-group{
837
- --tds-checkbox-group-font-size:var(--t-font-size-md);
838
- --tds-checkbox-group-line-height:1.4;
839
- --tds-checkbox-group-gap:var(--t-spacing-1);
840
730
 
841
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
842
- --tds-checkbox-group-description-line-height:1.35;
843
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
844
- --tds-checkbox-group-description-invalid-icon-display:none;
845
- display:flex;
846
- flex-direction:column;
847
- gap:0;
848
- padding:0;
849
- margin:0;
731
+ @media (prefers-reduced-motion: no-preference){
850
732
 
851
- font-size:var(--tds-checkbox-group-font-size);
852
- line-height:var(--tds-checkbox-group-line-height);
853
- border:0;
733
+ :root{
734
+ interpolate-size:allow-keywords;
854
735
  }
855
-
856
- .tds-checkbox-group legend{
857
- float:left;
858
- padding:0;
859
- margin:0;
860
- }
861
-
862
- .tds-checkbox-group[aria-invalid="true"]{
863
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
864
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
865
736
  }
866
737
 
867
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
868
- margin-left:.25ch;
869
- color:var(--t-text-color-status-error);
870
- content:"*";
871
- }
872
-
873
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
874
- content:none;
875
- }
738
+ @layer tds-component{
739
+ tds-sidenav,
740
+ .tds-sidenav{
741
+ --tds-sidenav-indent:12px;
742
+ --tds-sidenav-item-depth:0;
876
743
 
877
- .tds-checkbox-group-fields{
878
- display:flex;
879
- flex-direction:column;
880
- gap:var(--tds-checkbox-group-gap);
881
- align-items:flex-start;
882
- margin-top:var(--t-spacing-1);
883
- }
744
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
884
745
 
885
- .tds-checkbox-group-description{
886
- display:flex;
887
- gap:var(--t-spacing-half);
888
- align-items:flex-start;
889
- margin:var(--t-spacing-fourth) 0 0;
890
- font-size:var(--tds-checkbox-group-description-font-size);
891
- line-height:var(--tds-checkbox-group-description-line-height);
892
- color:var(--tds-checkbox-group-description-color);
893
- cursor:text;
894
- }
746
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
747
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
748
+ --tds-sidenav-collapse-closed-opacity:0;
749
+ --tds-sidenav-collapse-open-opacity:1;
750
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
751
+ --tds-sidenav-collapse-open-transform:translateY(0);
895
752
 
896
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
897
- display:var(--tds-checkbox-group-description-invalid-icon-display);
898
- flex-shrink:0;
899
- margin-top:calc(.5lh - .5em);
900
- line-height:var(--tds-checkbox-group-description-line-height);
901
- }
753
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
754
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
755
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
756
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
902
757
 
903
- .tds-checkbox-group--sm{
904
- --tds-checkbox-group-line-height:1.35;
905
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
906
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
907
- --tds-checkbox-group-description-line-height:1.3;
908
- }
758
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
759
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
760
+ --tds-sidenav-item-nested-background-selected:transparent;
909
761
 
910
- .tds-combo-box{
911
- --tds-combo-box-button-offset:4px;
912
- }
762
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
763
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
764
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
913
765
 
914
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
915
- transform:rotate(.5turn);
766
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
767
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
916
768
  }
917
769
 
918
- .tds-combo-box--lg{
919
- --tds-combo-box-button-offset:5px;
920
- }
921
-
922
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
923
- display:none;
924
- }
925
-
926
- .tds-combo-box-input{
927
- display:flex;
928
- flex:1;
929
- align-items:center;
930
- padding-block:var(--tds-field-padding-block);
931
- padding-inline:var(--tds-field-padding-inline);
932
- font-family:inherit;
933
- font-size:inherit;
934
- color:inherit;
935
- outline:0;
936
- background:transparent;
937
- border:0;
938
- }
770
+ @media (prefers-reduced-motion: reduce){
771
+ tds-sidenav,
772
+ .tds-sidenav{
773
+ --tds-sidenav-collapse-transition-enter:none;
774
+ --tds-sidenav-collapse-transition-exit:none;
775
+ --tds-sidenav-collapse-closed-transform:none;
776
+ --tds-sidenav-collapse-open-transform:none;
777
+ }
778
+ }
939
779
 
940
- .tds-combo-box-input:has( + .tds-combo-box-button){
941
- padding-inline-end:0;
780
+ .tds-sidenav--theme-gray{
781
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
782
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
783
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
784
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
785
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
942
786
  }
787
+ }
943
788
 
944
- .tds-combo-box-input::-moz-placeholder{
945
- color:var(--tds-field-placeholder-color);
946
- -moz-user-select:none;
947
- user-select:none;
789
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
790
+ display:flex;
948
791
  }
949
792
 
950
- .tds-combo-box-input::placeholder{
951
- color:var(--tds-field-placeholder-color);
952
- -webkit-user-select:none;
953
- -moz-user-select:none;
954
- user-select:none;
793
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
794
+ flex-direction:column;
795
+ gap:var(--t-spacing-half);
796
+ width:100%;
955
797
  }
956
798
 
957
- .tds-combo-box-button{
958
- flex-shrink:0;
959
- align-self:center;
960
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
961
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
799
+ .tds-sidenav-section-list{
800
+ width:100%;
962
801
  padding:0;
963
- margin-inline-end:var(--tds-combo-box-button-offset);
802
+ margin:0;
803
+ list-style:none;
964
804
  }
965
805
 
966
- .tds-combo-box-button > svg{
967
- inline-size:var(--tds-field-font-size);
968
- block-size:var(--tds-field-font-size);
969
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
970
- }
971
-
972
- .tds-combo-box-popover{
973
- width:var(--trigger-width);
974
- max-block-size:inherit;
975
- padding:var(--t-spacing-1);
976
- overflow:auto;
977
- scroll-behavior:smooth;
978
- overscroll-behavior:none;
979
- -webkit-user-select:none;
980
- -moz-user-select:none;
981
- user-select:none;
982
- outline:0;
983
- scrollbar-color:#0004 var(--t-surface-color-card);
984
- scrollbar-width:thin;
985
- background:var(--t-surface-color-card);
986
- background-clip:padding-box;
987
- border:1px solid var(--t-border-color);
988
- border-radius:var(--t-border-radius);
989
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
806
+ .tds-sidenav-section-header{
807
+ display:flex;
808
+ align-items:baseline;
809
+ justify-content:space-between;
810
+ padding-top:var(--t-spacing-2);
990
811
  }
991
812
 
992
- .tds-combo-box-popover[data-entering]{
993
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
994
- }
995
-
996
- .tds-combo-box-popover[data-exiting]{
997
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
813
+ .tds-sidenav-section-header h2{
814
+ margin:0;
815
+ font-size:var(--t-font-size-sm);
816
+ font-weight:var(--t-font-weight-semibold);
817
+ line-height:1.35;
818
+ color:var(--t-text-color-secondary);
819
+ text-transform:uppercase;
998
820
  }
999
821
 
1000
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1001
- will-change:opacity, transform;
822
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
823
+ padding-top:0;
1002
824
  }
1003
825
 
1004
- @keyframes tds-combo-box-popover{
1005
- from{
1006
- opacity:0;
1007
- transform:translateY(-8px);
826
+ .tds-sidenav-section-header [slot="label-actions"]{
827
+ display:flex;
828
+ gap:var(--t-spacing-half);
829
+ align-items:center;
1008
830
  }
1009
- }
1010
-
1011
- @media (prefers-reduced-motion: reduce){
1012
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1013
- animation:none;
1014
- }
1015
831
 
1016
- .tds-combo-box-button > svg{
1017
- transition:none;
1018
- }
832
+ .tds-sidenav-section [slot="section-actions"]{
833
+ display:flex;
834
+ gap:12px;
835
+ align-items:center;
836
+ min-height:42px;
837
+ padding:var(--t-spacing-1) 0;
1019
838
  }
1020
839
 
1021
- .tds-combo-box-list{
840
+ .tds-sidenav-section-list,
841
+ .tds-sidenav-item{
842
+ width:100%;
1022
843
  padding:0;
1023
844
  margin:0;
1024
845
  }
1025
846
 
1026
- .tds-combo-box-list-item{
1027
- display:block;
1028
- padding-block:var(--t-spacing-1);
1029
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1030
- overflow:hidden;
1031
- text-overflow:ellipsis;
1032
- font-size:1rem;
1033
- color:var(--t-text-color);
1034
- white-space:nowrap;
1035
- cursor:default;
1036
- border-radius:var(--t-border-radius);
1037
- }
1038
-
1039
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1040
- background:var(--t-fill-color-neutral-070);
847
+ .tds-sidenav-item :is(a,button){
848
+ position:relative;
849
+ display:flex;
850
+ gap:12px;
851
+ align-items:center;
852
+ width:100%;
853
+ padding:12px;
854
+ overflow:hidden;
855
+ font-size:var(--t-font-size-sm);
856
+ line-height:18px;
857
+ color:var(--t-text-color-headline);
858
+ white-space:nowrap;
859
+ text-decoration:none;
860
+ -webkit-appearance:none;
861
+ -moz-appearance:none;
862
+ appearance:none;
863
+ cursor:pointer;
864
+ background-color:var(--tds-sidenav-item-background, transparent);
865
+ border:0;
866
+ border-radius:var(--t-border-radius);
867
+ transition:var(--tds-sidenav-item-transition);
1041
868
  }
1042
869
 
1043
- .tds-combo-box-list-item[data-selected]{
1044
- background:var(--t-fill-color-button-interaction-ghost-active);
1045
- }
870
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
871
+ display:block;
872
+ flex:1;
873
+ overflow:hidden;
874
+ text-overflow:ellipsis;
875
+ text-align:left;
876
+ white-space:nowrap;
877
+ }
1046
878
 
1047
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1048
- background:var(--t-fill-color-neutral-060);
1049
- }
879
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
880
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
881
+ color:var(--t-text-color-headline);
882
+ text-decoration:none;
883
+ }
1050
884
 
1051
- .tds-combo-box-list-item[data-disabled]{
1052
- color:var(--t-form-color-disabled);
1053
- cursor:not-allowed;
1054
- }
885
+ :is(.tds-sidenav-item :is(a,button)):active{
886
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
887
+ }
1055
888
 
1056
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1057
- background:transparent;
889
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
890
+ overflow:hidden;
891
+ color:var(--tds-sidenav-item-icon-color);
1058
892
  }
1059
893
 
1060
- .tds-combo-box-empty-state{
1061
- position:relative;
1062
- min-block-size:var(--t-spacing-3);
1063
- padding-block:var(--t-spacing-1);
1064
- padding-inline:var(--t-spacing-2);
1065
- font-size:var(--t-font-size-md);
1066
- color:var(--t-text-color-secondary);
1067
- }
894
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
895
+ display:block;
896
+ width:var(--tds-sidenav-item-icon-size);
897
+ height:var(--tds-sidenav-item-icon-size);
898
+ }
1068
899
 
1069
- .tds-combo-box-load-more{
1070
- position:relative;
1071
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1072
- }
900
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
901
+ --tds-sidenav-indent:19px;
902
+ }
1073
903
 
1074
- .tds-combo-box-empty-state,
1075
- .tds-combo-box-load-more{
1076
- --tds-loading-spinner-visibility:visible;
1077
- --tds-loading-spinner-animation-play-state:running;
1078
- }
904
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
905
+ visibility:visible;
906
+ block-size:auto;
907
+ opacity:1;
908
+ }
1079
909
 
1080
- .tds-combo-box-list-section:not(:first-child){
1081
- margin-block-start:var(--t-spacing-half);
910
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
911
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
912
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
913
+
914
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
915
+ font-weight:var(--t-font-weight-semibold);
1082
916
  }
1083
917
 
1084
- .tds-combo-box-section-header{
1085
- padding-block:var(--t-spacing-1);
1086
- padding-inline:var(--t-spacing-1);
1087
- font-size:var(--t-font-size-sm);
1088
- font-weight:var(--t-font-weight-semibold);
1089
- color:var(--t-text-color-secondary);
1090
- }
918
+ .tds-sidenav-item:has(.tds-sidenav-section){
919
+ display:flex;
920
+ flex-direction:column;
921
+ gap:var(--t-spacing-half);
922
+ }
1091
923
 
1092
- .tds-radio{
1093
- --tds-radio-font-size:var(--t-font-size-md);
1094
- --tds-radio-cursor:pointer;
1095
- --tds-radio-line-height:1.4;
1096
- --tds-radio-transition-property:border-width;
924
+ .tds-sidenav-item .tds-sidenav-section-list{
925
+ --tds-sidenav-item-depth:1;
926
+ gap:0;
927
+ }
1097
928
 
1098
- --tds-radio-input-size:var(--t-element-size-md);
1099
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1100
- --tds-radio-input-border-color:var(--t-form-border-color);
1101
- --tds-radio-input-border-width:var(--t-form-border-width);
1102
- --tds-radio-input-background-color:var(--t-form-background-color);
929
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
930
+ visibility:hidden;
931
+ block-size:0;
932
+ overflow-y:clip;
933
+ opacity:0;
934
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
935
+ }
1103
936
 
1104
- --tds-radio-label-color:var(--t-form-color);
937
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
938
+ --tds-sidenav-item-depth:2;
939
+ }
1105
940
 
1106
- --tds-radio-description-font-size:var(--t-font-size-sm);
1107
- --tds-radio-description-line-height:1.35;
1108
- --tds-radio-description-color:var(--t-text-color-secondary);
941
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
942
+ min-height:var(--t-element-size-2xl);
943
+ padding-block:9px;
944
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
945
+ line-height:1;
946
+ background-color:transparent;
947
+ }
1109
948
 
1110
- position:relative;
1111
- display:inline-grid;
1112
- grid-template-columns:auto;
1113
- grid-auto-columns:1fr;
1114
- gap:var(--t-spacing-fourth) 0;
1115
- line-height:var(--tds-radio-line-height);
1116
- -webkit-user-select:none;
1117
- -moz-user-select:none;
1118
- user-select:none;
1119
- }
949
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
950
+ position:absolute;
951
+ top:0;
952
+ bottom:0;
953
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
954
+ width:2px;
955
+ content:"";
956
+ background-color:var(--tds-sidenav-item-nested-border-color);
957
+ transition:var(--tds-sidenav-item-transition);
958
+ }
1120
959
 
1121
- .tds-radio label{
1122
- grid-area:1 / 2;
1123
- padding-inline-start:var(--t-spacing-1);
1124
- font-size:var(--tds-radio-font-size);
1125
- font-weight:var(--t-font-weight-normal);
1126
- color:var(--tds-radio-label-color);
1127
- cursor:var(--tds-radio-cursor);
1128
- }
960
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
961
+ position:absolute;
962
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
963
+ z-index:-1;
964
+ height:100%;
965
+ content:"";
966
+ background-color:var(--tds-sidenav-item-nested-background);
967
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
968
+ transition:var(--tds-sidenav-item-transition);
969
+ }
1129
970
 
1130
- .tds-radio input[type="radio"]{
1131
- position:relative;
1132
- width:1em;
1133
- height:1em;
1134
- margin:calc((1lh - 1em) / 2) 0 0;
1135
- font-size:var(--tds-radio-font-size);
1136
- line-height:inherit;
1137
- -webkit-appearance:none;
1138
- -moz-appearance:none;
1139
- appearance:none;
1140
- cursor:var(--tds-radio-cursor);
1141
- background-color:var(--tds-radio-input-background-color);
1142
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1143
- border-radius:var(--tds-radio-input-border-radius);
1144
- transition-timing-function:var(--t-ease-in-out);
1145
- transition-duration:var(--t-duration-200);
1146
- transition-property:var(--tds-radio-transition-property);
1147
- }
971
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
972
+ display:block;
973
+ text-align:left;
974
+ white-space:normal;
975
+ }
1148
976
 
1149
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1150
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1151
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1152
- }
977
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
978
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
979
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
980
+ }
1153
981
 
1154
- :is(.tds-radio input[type="radio"]):focus-visible{
1155
- outline:var(--t-focus-ring-outline);
1156
- outline-offset:var(--t-focus-ring-offset);
1157
- }
982
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
983
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
984
+ }
1158
985
 
1159
- :is(.tds-radio input[type="radio"]):disabled{
1160
- pointer-events:none;
986
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
987
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
988
+ font-weight:var(--t-font-weight-medium);
1161
989
  }
1162
990
 
1163
- @media (prefers-reduced-motion: reduce){
991
+ .tds-sidenav-responsive-header{
992
+ display:flex;
993
+ gap:var(--t-spacing-2);
994
+ align-items:center;
995
+ width:100%;
996
+ }
1164
997
 
1165
- .tds-radio input[type="radio"]{
1166
- --tds-radio-transition-property:none;
998
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
999
+ order:0;
1000
+ }
1001
+
1002
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1003
+ flex:1;
1004
+ order:1;
1005
+ margin:0;
1006
+ font-size:var(--t-font-size-lg);
1007
+ font-weight:var(--t-font-weight-medium);
1008
+ color:var(--t-text-color-headline);
1009
+ }
1010
+
1011
+ @media (max-width: 719px){
1012
+ .tds-sidenav-collapse{
1013
+ z-index:10001;
1014
+ display:none;
1015
+ max-width:min(448px, calc(100vw - 48px));
1016
+ padding:0;
1017
+ margin:12px 0;
1018
+ position-area:bottom span-right;
1019
+ overflow:hidden;
1020
+ outline:0;
1021
+ background:var(--t-surface-color-card);
1022
+ border:0;
1023
+ border-radius:6px;
1024
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1025
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1026
+ transform:var(--tds-sidenav-collapse-open-transform);
1027
+ transition:var(--tds-sidenav-collapse-transition-enter);
1028
+ will-change:transform;
1029
+ }
1030
+
1031
+ .tds-sidenav-scroll-container{
1032
+ --webkit-overflow-scrolling:touch;
1033
+ display:block;
1034
+ width:100%;
1035
+ height:-moz-fit-content;
1036
+ height:fit-content;
1037
+ padding:var(--t-spacing-2);
1038
+ overflow-y:auto;
1167
1039
  }
1168
- }
1169
1040
 
1170
- .tds-radio:has(input:checked){
1171
- --tds-radio-input-background-color:var(--t-form-background-color);
1172
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1173
- --tds-radio-input-border-width:4px;
1041
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1042
+ display:none;
1174
1043
  }
1044
+ @supports selector(:popover-open){
1045
+ .tds-sidenav-collapse:popover-open{
1046
+ display:flex;
1047
+ }
1175
1048
 
1176
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1177
- --tds-radio-input-background-color:var(--t-form-background-color);
1178
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1049
+ .tds-sidenav-collapse:not(:popover-open){
1050
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1051
+ transition:var(--tds-sidenav-collapse-transition-exit);
1179
1052
  }
1180
1053
 
1181
- .tds-radio:has(input:user-invalid){
1182
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1054
+ @starting-style{
1055
+ .tds-sidenav-collapse:popover-open{
1056
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1057
+ transform:var(--tds-sidenav-collapse-closed-transform);
1058
+ }
1059
+ }
1183
1060
  }
1184
-
1185
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1186
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1187
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1061
+ @supports not selector(:popover-open){
1062
+ .tds-sidenav-collapse.\:popover-open{
1063
+ display:flex;
1188
1064
  }
1189
1065
 
1190
- .tds-radio:has(input:disabled){
1191
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1192
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1066
+ .tds-sidenav-collapse:not(.\:popover-open){
1067
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1068
+ transition:var(--tds-sidenav-collapse-transition-exit);
1069
+ }
1070
+ }
1071
+ }
1193
1072
 
1194
- --tds-radio-label-color:var(--t-form-color-disabled);
1195
- --tds-radio-description-color:var(--t-form-color-disabled);
1196
- --tds-radio-cursor:not-allowed;
1073
+ @media (min-width: 720px){
1074
+ .tds-sidenav-responsive-header{
1075
+ display:none;
1197
1076
  }
1077
+ }
1198
1078
 
1199
- .tds-radio:has(input:disabled) input:checked{
1200
- --tds-radio-input-background-color:var(--t-form-background-color);
1201
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1079
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1080
+ display:none;
1202
1081
  }
1203
1082
 
1204
- .tds-radio-description{
1205
- display:flex;
1206
- grid-area:2 / 2;
1207
- gap:var(--t-spacing-half);
1208
- align-items:flex-start;
1209
- padding-inline-start:var(--t-spacing-1);
1210
- margin:0;
1211
- font-size:var(--tds-radio-description-font-size);
1212
- line-height:var(--tds-radio-description-line-height);
1213
- color:var(--tds-radio-description-color);
1214
- cursor:text;
1215
- }
1216
-
1217
- .tds-radio--sm{
1218
- --tds-radio-line-height:1.35;
1219
- --tds-radio-input-size:var(--t-element-size-sm);
1220
- --tds-radio-font-size:var(--t-font-size-sm);
1221
- --tds-radio-description-font-size:var(--t-font-size-xs);
1222
- --tds-radio-description-line-height:1.3;
1223
- }
1083
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1084
+ display:block;
1085
+ }
1224
1086
 
1225
- .tds-time-field-input{
1226
- --tds-field-date-segment-padding-inline:1px;
1227
- padding-block:var(--tds-field-padding-block);
1228
- padding-inline:var(--tds-field-padding-inline);
1229
- font-variant-numeric:tabular-nums;
1230
- }
1087
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1088
+ display:flex;
1089
+ flex-direction:column;
1090
+ }
1231
1091
 
1232
1092
 
1233
1093
  :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
@@ -1253,1023 +1113,1163 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1253
1113
  }
1254
1114
  }
1255
1115
 
1256
- .tds-input:has(textarea){
1257
- --tds-input-padding-block:6px;
1258
- --tds-input-resizer-size:var(--t-element-size-sm);
1259
- --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");
1260
- }
1261
-
1262
- @supports (x: attr(x type(*))){
1263
-
1264
- .tds-input textarea{
1265
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1116
+ .tds-time-field-input{
1117
+ --tds-field-date-segment-padding-inline:1px;
1118
+ padding-block:var(--tds-field-padding-block);
1119
+ padding-inline:var(--tds-field-padding-inline);
1120
+ font-variant-numeric:tabular-nums;
1266
1121
  }
1267
- }
1268
-
1269
- .tds-input.tds-textarea--resize-vertical textarea{
1270
- resize:vertical;
1271
- }
1272
-
1273
- .tds-input.tds-textarea--resize-none textarea{
1274
- resize:none;
1275
- }
1276
1122
 
1277
- .tds-input.tds-textarea--resize-auto textarea{
1278
- resize:vertical;
1279
- }
1123
+ .tds-radio-group{
1124
+ --tds-radio-group-font-size:var(--t-font-size-md);
1125
+ --tds-radio-group-line-height:1.4;
1126
+ --tds-radio-group-gap:var(--t-spacing-1);
1280
1127
 
1281
- @supports (field-sizing: content){
1282
- .tds-input.tds-textarea--resize-auto textarea{
1283
- field-sizing:content;
1284
- resize:none;
1285
- }
1286
- }
1128
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1129
+ --tds-radio-group-description-line-height:1.35;
1130
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1131
+ --tds-radio-group-description-invalid-icon-display:none;
1132
+ display:flex;
1133
+ flex-direction:column;
1134
+ gap:0;
1135
+ padding:0;
1136
+ margin:0;
1287
1137
 
1288
- .tds-input textarea{
1289
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1290
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1291
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1292
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1293
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1294
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1295
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1296
- --tds-input-scrollbar-thumb-border-radius:999px;
1297
- --tds-input-scrollbar-thumb-border-width:3px;
1298
- --tds-input-scrollbar-track-margin-block:.125rem;
1299
- scrollbar-color:initial;
1300
- transition-timing-function:var(--t-ease-in-out);
1301
- transition-duration:var(--t-duration-200);
1302
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1138
+ font-size:var(--tds-radio-group-font-size);
1139
+ line-height:var(--tds-radio-group-line-height);
1140
+ border:0;
1303
1141
  }
1304
1142
 
1305
- @media (pointer: fine){
1306
- :is(.tds-input textarea)::-webkit-scrollbar{
1307
- width:12px;
1308
- height:12px;
1309
- cursor:default;
1310
- }
1311
-
1312
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1313
- cursor:default;
1314
- background:var(--tds-input-scrollbar-thumb-color);
1315
- background-clip:content-box;
1316
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1317
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1318
- }
1143
+ .tds-radio-group legend{
1144
+ float:left;
1145
+ padding:0;
1146
+ margin:0;
1147
+ }
1319
1148
 
1320
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1321
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1322
- }
1149
+ .tds-radio-group[aria-invalid="true"]{
1150
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1151
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1152
+ }
1323
1153
 
1324
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1325
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1154
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1155
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1326
1156
  }
1327
1157
 
1328
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1329
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1330
- }
1158
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1159
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1160
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1161
+ }
1331
1162
 
1332
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1333
- background:var(--tds-input-scrollbar-surface-color);
1334
- }
1163
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1164
+ --tds-radio-input-background-color:var(--t-form-background-color);
1165
+ }
1335
1166
 
1336
- :is(.tds-input textarea)::-webkit-resizer{
1337
- background:var(--tds-input-resizer-icon) no-repeat;
1338
- background-position:right bottom;
1339
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1167
+ .tds-radio-group:has(input:required) legend::after{
1168
+ margin-left:.25ch;
1169
+ color:var(--t-text-color-status-error);
1170
+ content:"*";
1340
1171
  }
1341
1172
 
1342
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1343
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1344
- cursor:default;
1345
- }
1173
+ .tds-radio-group-fields{
1174
+ display:flex;
1175
+ flex-direction:column;
1176
+ gap:var(--tds-radio-group-gap);
1177
+ align-items:flex-start;
1178
+ margin-top:var(--t-spacing-1);
1179
+ }
1346
1180
 
1347
- @supports (-moz-appearance: none){
1348
- :is(.tds-input textarea){
1349
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1350
- scrollbar-width:thin;
1351
- }
1181
+ .tds-radio-group-description{
1182
+ display:flex;
1183
+ gap:var(--t-spacing-half);
1184
+ align-items:flex-start;
1185
+ margin:var(--t-spacing-fourth) 0 0;
1186
+ font-size:var(--tds-radio-group-description-font-size);
1187
+ line-height:var(--tds-radio-group-description-line-height);
1188
+ color:var(--tds-radio-group-description-color);
1189
+ cursor:text;
1190
+ }
1352
1191
 
1353
- @media (hover){
1354
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1355
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1356
- }
1357
- }
1358
- }
1192
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1193
+ display:var(--tds-radio-group-description-invalid-icon-display);
1194
+ flex-shrink:0;
1195
+ margin-top:calc(.5lh - .5em);
1196
+ line-height:var(--tds-radio-group-description-line-height);
1359
1197
  }
1360
1198
 
1361
- .tds-toggle-switch{
1362
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1363
- --tds-toggle-switch-cursor:pointer;
1364
- --tds-toggle-switch-display:inline-grid;
1365
- --tds-toggle-switch-line-height:1.4;
1366
-
1367
- --tds-toggle-switch-label-color:var(--t-form-color);
1368
-
1369
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1370
- --tds-toggle-switch-track-outline:none;
1371
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1372
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1373
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1199
+ .tds-radio-group--sm{
1200
+ --tds-radio-group-line-height:1.35;
1201
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1202
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1203
+ --tds-radio-group-description-line-height:1.3;
1204
+ }
1374
1205
 
1375
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1376
- --tds-toggle-switch-thumb-transform:translateX(0);
1377
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1206
+ .tds-number-stepper{
1207
+ --tds-number-stepper-button-offset:4px;
1208
+ --tds-number-stepper-button-gap:2px;
1209
+ }
1378
1210
 
1379
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1380
- --tds-toggle-switch-description-line-height:1.35;
1381
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1382
- position:relative;
1211
+ .tds-number-stepper--lg{
1212
+ --tds-number-stepper-button-offset:5px;
1213
+ --tds-number-stepper-button-gap:4px;
1214
+ }
1383
1215
 
1384
- display:var(--tds-toggle-switch-display);
1385
- grid-template-columns:auto;
1386
- grid-auto-columns:1fr;
1387
- gap:var(--t-spacing-fourth) 0;
1388
- -webkit-user-select:none;
1389
- -moz-user-select:none;
1390
- user-select:none;
1216
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1217
+ display:none;
1391
1218
  }
1392
1219
 
1393
- .tds-toggle-switch input[type="checkbox"]{
1394
- position:absolute;
1395
- width:var(--tds-toggle-switch-track-width);
1396
- height:var(--tds-toggle-switch-track-height);
1220
+ .tds-number-stepper-input{
1221
+ display:flex;
1222
+ flex:1;
1223
+ align-items:center;
1224
+ min-inline-size:0;
1225
+ padding-block:var(--tds-field-padding-block);
1226
+ padding-inline:var(--tds-field-padding-inline);
1227
+ font-family:inherit;
1228
+ font-size:inherit;
1229
+ color:inherit;
1230
+ outline:0;
1231
+ background:transparent;
1232
+ border:0;
1233
+ }
1234
+
1235
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1397
1236
  margin:0;
1398
1237
  -webkit-appearance:none;
1399
- -moz-appearance:none;
1400
1238
  appearance:none;
1401
- cursor:var(--tds-toggle-switch-cursor);
1402
- outline:var(--tds-toggle-switch-track-outline);
1403
- outline-offset:var(--t-focus-ring-offset);
1404
- background-color:transparent;
1405
- border:0;
1406
- border-radius:var(--t-border-radius-round);
1407
1239
  }
1408
1240
 
1409
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1410
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1411
- }
1241
+ .tds-number-stepper-button{
1242
+ flex-shrink:0;
1243
+ align-self:center;
1244
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1245
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1246
+ padding:0;
1247
+ }
1412
1248
 
1413
- .tds-toggle-switch label{
1414
- display:inline-flex;
1415
- grid-area:1 / 2;
1416
- padding-inline-start:var(--t-spacing-1);
1417
- margin-top:-.09375em;
1418
- font-size:var(--tds-toggle-switch-font-size);
1419
- font-weight:var(--t-font-weight-normal);
1420
- line-height:var(--tds-toggle-switch-line-height);
1421
- color:var(--tds-toggle-switch-label-color);
1422
- cursor:var(--tds-toggle-switch-cursor);
1249
+ .tds-number-stepper-button + .tds-number-stepper-button{
1250
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1423
1251
  }
1424
1252
 
1425
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1426
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1253
+ .tds-number-stepper-button:last-of-type{
1254
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1427
1255
  }
1428
1256
 
1429
- .tds-toggle-switch:has(input:checked){
1430
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1431
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1432
- }
1257
+ .tds-date-picker{
1258
+ --tds-date-picker-button-offset:4px;
1259
+ }
1433
1260
 
1434
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1435
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1436
- }
1261
+ .tds-date-picker--lg{
1262
+ --tds-date-picker-button-offset:5px;
1263
+ }
1437
1264
 
1438
- .tds-toggle-switch:has(input:disabled){
1439
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1440
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1441
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1442
- --tds-toggle-switch-cursor:not-allowed;
1265
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1266
+ outline-color:transparent;
1267
+ outline-offset:0;
1268
+ border-color:var(--tds-field-border-color);
1269
+ }
1270
+
1271
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1272
+ display:none;
1273
+ }
1274
+
1275
+ .tds-date-picker-input{
1276
+ flex:1;
1277
+ padding-block:var(--tds-field-padding-block);
1278
+ padding-inline:var(--tds-field-padding-inline);
1279
+ overflow:auto clip;
1280
+ font-variant-numeric:tabular-nums;
1281
+ text-wrap:nowrap;
1282
+ scrollbar-width:none;
1283
+ }
1284
+
1285
+ .tds-date-picker-input:has( + .tds-date-picker-button){
1286
+ padding-inline-end:0;
1443
1287
  }
1444
1288
 
1445
- .tds-toggle-switch-track{
1446
- position:relative;
1289
+ .tds-date-picker-button{
1447
1290
  flex-shrink:0;
1448
- width:var(--tds-toggle-switch-track-width);
1449
- height:var(--tds-toggle-switch-track-height);
1450
- background-color:var(--tds-toggle-switch-track-background-color);
1451
- border-radius:var(--t-border-radius-round);
1452
- transition:var(--tds-toggle-switch-track-transition);
1291
+ align-self:center;
1292
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1293
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1294
+ padding:0;
1295
+ margin-inline-end:var(--tds-date-picker-button-offset);
1453
1296
  }
1454
1297
 
1455
- .tds-toggle-switch-track::before{
1456
- position:absolute;
1457
- top:var(--t-spacing-fourth);
1458
- left:var(--t-spacing-fourth);
1459
- width:var(--tds-toggle-switch-thumb-size);
1460
- height:var(--tds-toggle-switch-thumb-size);
1461
- content:"";
1462
- background-color:#fff;
1463
- border-radius:var(--t-border-radius-round);
1464
- transform:var(--tds-toggle-switch-thumb-transform);
1465
- transition:var(--tds-toggle-switch-thumb-transition);
1298
+ .tds-date-picker-popover{
1299
+ --tds-date-picker-popover-font-size:var(--t-font-size-md);
1300
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
1301
+ --tds-date-picker-popover-background-color:var(--t-surface-color-card);
1302
+ --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1303
+ --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
1304
+ --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
1305
+ --tds-date-picker-popover-interactive-property:color, background-color, border-color;
1306
+
1307
+ position:relative;
1308
+ overflow:hidden;
1309
+ background-color:var(--tds-date-picker-popover-background-color);
1310
+ border:var(--t-border-width) solid var(--t-border-color);
1311
+ border-radius:var(--t-border-radius);
1312
+ box-shadow:var(--tds-date-picker-popover-shadow);
1313
+ }
1314
+
1315
+ .tds-date-picker-popover[data-entering]{
1316
+ animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
1466
1317
  }
1467
1318
 
1468
- @media (prefers-reduced-motion: reduce){
1319
+ .tds-date-picker-popover[data-exiting]{
1320
+ animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
1321
+ }
1469
1322
 
1470
- .tds-toggle-switch-track{
1471
- --tds-toggle-switch-track-transition:none;
1472
- --tds-toggle-switch-thumb-transition:none;
1473
- }
1323
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1324
+ will-change:opacity, transform;
1474
1325
  }
1475
1326
 
1476
- .tds-toggle-switch-description{
1327
+ @keyframes tds-date-picker-popover{
1328
+ from{
1329
+ opacity:0;
1330
+ transform:translateY(-8px);
1331
+ }
1332
+ }
1333
+
1334
+ @media (prefers-reduced-motion: reduce){
1335
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1336
+ animation:none;
1337
+ }
1338
+ }
1339
+
1340
+ .tds-date-picker-overlay{
1341
+ position:absolute;
1342
+ inset:0;
1343
+ z-index:1;
1477
1344
  display:flex;
1478
- grid-area:2 / 2;
1479
- align-items:flex-start;
1480
- padding-inline-start:var(--t-spacing-1);
1481
- margin:0;
1482
- font-size:var(--tds-toggle-switch-description-font-size);
1483
- line-height:var(--tds-toggle-switch-description-line-height);
1484
- color:var(--tds-toggle-switch-description-color);
1485
- cursor:text;
1345
+ background-color:var(--tds-date-picker-popover-background-color);
1486
1346
  }
1487
1347
 
1488
- .tds-toggle-switch--sm{
1489
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1490
- --tds-toggle-switch-line-height:1.35;
1491
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1492
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1493
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1494
- --tds-toggle-switch-description-line-height:1.3;
1348
+ .tds-date-picker-overlay-list{
1349
+ display:grid;
1350
+ flex:1;
1351
+ grid-template-columns:repeat(3, 1fr);
1352
+ gap:var(--t-spacing-half);
1353
+ padding-inline:var(--tds-date-picker-popover-padding);
1354
+ outline:0;
1355
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
1356
+ scrollbar-width:thin;
1495
1357
  }
1496
1358
 
1497
- .tds-toggle-switch--hide-label{
1498
- --tds-toggle-switch-display:inline-flex;
1359
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
1360
+ grid-template-rows:repeat(4, 1fr);
1361
+ padding-bottom:var(--tds-date-picker-popover-padding);
1362
+ }
1363
+
1364
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
1365
+ grid-auto-rows:var(--t-container-size-xl);
1366
+ padding-right:var(--t-spacing-1);
1367
+ overflow-y:auto;
1368
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
1369
+ }
1370
+
1371
+ .tds-date-picker-overlay-cell{
1372
+ display:flex;
1373
+ align-items:center;
1374
+ justify-content:center;
1375
+ font-family:inherit;
1376
+ font-size:var(--tds-date-picker-popover-font-size);
1377
+ color:var(--t-text-color);
1378
+ cursor:pointer;
1379
+ outline:0;
1380
+ background-color:transparent;
1381
+ border:0;
1382
+ border-radius:var(--t-border-radius-md);
1383
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1384
+ transition-duration:var(--t-duration-100);
1385
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1499
1386
  }
1500
1387
 
1501
- .tds-input{
1502
- --tds-input-border-color:var(--t-form-border-color);
1503
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1504
- --tds-input-background-color:var(--t-form-background-color);
1505
- --tds-input-color:var(--t-form-color);
1506
- --tds-input-font-size:var(--t-font-size-md);
1507
- --tds-input-description-color:var(--t-text-color-secondary);
1508
- --tds-input-description-invalid-icon-display:none;
1509
- --tds-input-min-height:var(--t-container-size-md);
1510
- --tds-input-padding-inline:var(--t-spacing-1);
1388
+ .tds-date-picker-overlay-cell[data-hovered]{
1389
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1390
+ }
1391
+
1392
+ .tds-date-picker-overlay-cell[data-pressed]{
1393
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1394
+ }
1395
+
1396
+ .tds-date-picker-overlay-cell[data-selected]{
1397
+ font-weight:var(--t-font-weight-semibold);
1398
+ color:var(--t-text-color-inverted);
1399
+ background-color:var(--t-fill-color-interaction);
1400
+ }
1401
+
1402
+ .tds-date-picker-overlay-cell[data-focus-visible]{
1403
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1404
+ }
1511
1405
 
1512
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1406
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
1407
+ outline-offset:var(--t-focus-ring-offset);
1408
+ }
1513
1409
 
1410
+ .tds-date-picker-calendar-heading{
1514
1411
  display:flex;
1515
- flex-direction:column;
1516
- gap:var(--t-spacing-half);
1412
+ flex:1;
1413
+ gap:var(--t-spacing-1);
1414
+ align-items:center;
1415
+ justify-content:flex-start;
1416
+ padding-inline-start:4px;
1517
1417
  }
1518
1418
 
1519
- .tds-input label{
1520
- font-size:var(--t-font-size-md);
1521
- font-weight:var(--t-font-weight-normal);
1522
- color:var(--t-text-color);
1419
+ .tds-date-picker-calendar-overlay-trigger{
1420
+ --_background-color:transparent;
1421
+ position:relative;
1422
+ padding:0;
1423
+ font-family:inherit;
1424
+ font-size:var(--tds-date-picker-popover-font-size);
1425
+ font-weight:var(--t-font-weight-semibold);
1426
+ font-feature-settings:"ss01", "ss02";
1427
+ color:var(--t-text-color);
1428
+ cursor:pointer;
1429
+ outline:0;
1430
+ background-color:transparent;
1431
+ border:0;
1432
+ border-radius:var(--t-border-radius-md);
1433
+ isolation:isolate;
1434
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1435
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1436
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1437
+ }
1438
+
1439
+ .tds-date-picker-calendar-overlay-trigger::before{
1440
+ position:absolute;
1441
+ inset:calc(var(--t-spacing-half) * -1);
1442
+ z-index:-1;
1443
+ pointer-events:inherit;
1444
+ content:"";
1445
+ background-color:var(--_background-color);
1446
+ border-radius:inherit;
1523
1447
  }
1524
1448
 
1525
- .tds-input :is(input,textarea){
1526
- inline-size:100%;
1527
- block-size:auto;
1528
- min-block-size:var(--tds-input-min-height);
1529
- padding-block:var(--tds-input-padding-block);
1530
- padding-inline:var(--tds-input-padding-inline);
1531
- font-family:inherit;
1532
- font-size:var(--tds-input-font-size);
1533
- color:var(--tds-input-color);
1534
- -webkit-appearance:none;
1535
- -moz-appearance:none;
1536
- appearance:none;
1537
- outline:var(--t-focus-ring-width) solid transparent;
1538
- outline-offset:0;
1539
- background-color:var(--tds-input-background-color);
1540
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
1541
- border-radius:var(--t-form-border-radius);
1542
- transition-timing-function:var(--t-ease-in-out);
1543
- transition-duration:var(--t-duration-200);
1544
- transition-property:var(--tds-input-transition-property);
1449
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
1450
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1545
1451
  }
1546
1452
 
1547
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1548
- border-color:var(--tds-input-border-color-hover);
1549
- }
1453
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
1454
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1455
+ }
1550
1456
 
1551
- :is(.tds-input :is(input,textarea)):focus{
1552
- outline-color:transparent;
1553
- }
1457
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
1458
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1459
+ outline-offset:var(--t-focus-ring-offset);
1460
+ }
1554
1461
 
1555
- :is(.tds-input :is(input,textarea)):focus-visible{
1556
- outline-color:var(--t-focus-ring-color);
1557
- outline-offset:var(--t-focus-ring-offset);
1558
- border-color:var(--t-form-border-color-focus);
1559
- }
1462
+ .tds-date-picker-calendar{
1463
+ inline-size:-moz-fit-content;
1464
+ inline-size:fit-content;
1465
+ font-size:var(--tds-date-picker-popover-font-size);
1466
+ }
1560
1467
 
1561
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
1562
- color:var(--t-form-placeholder-color);
1563
- -moz-user-select:none;
1564
- user-select:none;
1565
- }
1468
+ .tds-date-picker-calendar-body{
1469
+ position:relative;
1470
+ padding:var(--tds-date-picker-popover-padding);
1471
+ padding-block-start:0;
1472
+ }
1566
1473
 
1567
- :is(.tds-input :is(input,textarea))::placeholder{
1568
- color:var(--t-form-placeholder-color);
1569
- -webkit-user-select:none;
1570
- -moz-user-select:none;
1571
- user-select:none;
1572
- }
1474
+ .tds-date-picker-calendar-header{
1475
+ display:flex;
1476
+ align-items:center;
1477
+ justify-content:space-between;
1478
+ padding:var(--tds-date-picker-popover-padding);
1479
+ }
1573
1480
 
1574
- @media (prefers-reduced-motion: reduce){
1481
+ .tds-date-picker-calendar-title{
1482
+ padding:var(--t-spacing-half) var(--t-spacing-1);
1483
+ font-size:var(--tds-date-picker-popover-font-size);
1484
+ font-weight:var(--t-font-weight-semibold);
1485
+ }
1575
1486
 
1576
- .tds-input :is(input,textarea){
1577
- --tds-input-transition-property:none;
1578
- }
1579
- }
1487
+ .tds-date-picker-calendar-nav{
1488
+ display:flex;
1489
+ align-items:center;
1490
+ justify-content:center;
1491
+ padding:var(--t-spacing-half);
1492
+ font-size:.875em;
1493
+ color:var(--t-text-color);
1494
+ cursor:pointer;
1495
+ outline:0;
1496
+ background-color:transparent;
1497
+ border:0;
1498
+ border-radius:var(--t-border-radius-md);
1499
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
1500
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
1501
+ transition-property:var(--tds-date-picker-popover-interactive-property);
1502
+ }
1580
1503
 
1581
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1582
- --tds-input-background-color:var(--t-form-background-color-error);
1583
- --tds-input-border-color:var(--t-form-border-color-error);
1584
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1585
- --tds-input-description-color:var(--t-text-color-status-error);
1586
- --tds-input-description-invalid-icon-display:inline-block;
1504
+ .tds-date-picker-calendar-nav[data-hovered]{
1505
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
1587
1506
  }
1588
1507
 
1589
- .tds-input:has(:is(input,textarea):required) label::after{
1590
- margin-left:.25ch;
1591
- color:var(--t-text-color-status-error);
1592
- content:"*";
1593
- }
1594
-
1595
- .tds-input:where(:has(:is(input,textarea):disabled)){
1596
- --tds-input-border-color:var(--t-form-border-color-disabled);
1597
- --tds-input-background-color:var(--t-form-background-color-disabled);
1598
- --tds-input-color:var(--t-form-color-disabled);
1508
+ .tds-date-picker-calendar-nav[data-pressed]{
1509
+ background-color:var(--t-fill-color-button-neutral-outline-active);
1599
1510
  }
1600
1511
 
1601
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1602
- cursor:not-allowed;
1603
- }
1604
-
1605
- .tds-input:where(:has(:is(input,textarea)[readonly])){
1606
- --tds-input-border-color:var(--t-form-border-color-readonly);
1607
- --tds-input-background-color:var(--t-form-background-color-readonly);
1512
+ .tds-date-picker-calendar-nav[data-focus-visible]{
1513
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1514
+ outline-offset:var(--t-focus-ring-offset);
1608
1515
  }
1609
1516
 
1610
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1611
- border-color:var(--tds-input-border-color-hover);
1612
- }
1613
-
1614
- .tds-input.tds-input--lg{
1615
- --tds-input-min-height:var(--t-container-size-lg);
1616
- --tds-input-font-size:var(--t-font-size-lg);
1517
+ .tds-date-picker-calendar-nav[data-disabled]{
1518
+ color:var(--t-text-color-disabled);
1519
+ cursor:not-allowed;
1617
1520
  }
1618
1521
 
1619
- .tds-input-description{
1620
- display:flex;
1621
- gap:var(--t-spacing-half);
1622
- align-items:flex-start;
1623
- margin:0;
1624
- font-size:var(--t-font-size-sm);
1625
- line-height:1.35;
1626
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
1627
- cursor:text;
1522
+ .tds-date-picker-calendar-grid{
1523
+ font-feature-settings:"ss01", "ss02";
1524
+ border-collapse:collapse;
1628
1525
  }
1629
1526
 
1630
- .tds-input-description .tds-input-description-invalid-icon{
1631
- display:var(--tds-input-description-invalid-icon-display, none);
1632
- flex-shrink:0;
1633
- margin-block-start:calc(.5lh - .5em);
1634
- line-height:1.35;
1527
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
1528
+ padding:0;
1529
+ border:0;
1635
1530
  }
1636
1531
 
1637
- .tds-field{
1638
- --tds-field-border-color:var(--t-form-border-color);
1639
- --tds-field-border-color-hover:var(--t-form-border-color-hover);
1640
- --tds-field-border-color-active:var(--t-form-border-color-focus);
1641
- --tds-field-background-color:var(--t-form-background-color);
1642
- --tds-field-color:var(--t-form-color);
1643
- --tds-field-placeholder-color:var(--t-form-placeholder-color);
1644
- --tds-field-font-size:var(--t-font-size-md);
1645
- --tds-field-min-height:var(--t-container-size-md);
1646
- --tds-field-padding-block:6px;
1647
- --tds-field-padding-inline:var(--t-spacing-1);
1648
- --tds-field-description-color:var(--t-text-color-secondary);
1649
- --tds-field-description-invalid-icon-display:none;
1532
+ .tds-date-picker-calendar-header-cell{
1533
+ padding-block-end:var(--t-spacing-1);
1534
+ font-size:.875em;
1535
+ font-weight:var(--t-font-weight-medium);
1536
+ color:var(--t-text-color-secondary);
1537
+ text-align:center;
1538
+ -webkit-user-select:none;
1539
+ -moz-user-select:none;
1540
+ user-select:none;
1541
+ }
1650
1542
 
1543
+ .tds-date-picker-calendar-cell-button{
1651
1544
  position:relative;
1652
1545
  display:flex;
1653
- flex-direction:column;
1654
- gap:var(--t-spacing-half);
1546
+ align-items:center;
1547
+ justify-content:center;
1548
+ inline-size:2.25em;
1549
+ block-size:2.25em;
1550
+ color:var(--t-text-color);
1551
+ cursor:pointer;
1552
+ -webkit-user-select:none;
1553
+ -moz-user-select:none;
1554
+ user-select:none;
1555
+ outline:0;
1655
1556
  }
1656
1557
 
1657
- .tds-field[data-required] .tds-field-label::after{
1658
- margin-left:.25ch;
1659
- color:var(--t-text-color-status-error);
1660
- content:"*";
1558
+ .tds-date-picker-calendar-cell-button::before{
1559
+ position:absolute;
1560
+ inset:0;
1561
+ z-index:-1;
1562
+ content:"";
1563
+ background-color:var(--_background-color);
1564
+ border-radius:50%;
1661
1565
  }
1662
1566
 
1663
- .tds-field[data-invalid]{
1664
- --tds-field-border-color:var(--t-form-border-color-error);
1665
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1666
- --tds-field-border-color-active:var(--t-form-border-color-error-hover);
1667
- --tds-field-background-color:var(--t-form-background-color-error);
1668
- --tds-field-description-color:var(--t-text-color-status-error);
1669
- --tds-field-description-invalid-icon-display:inline-block;
1567
+ .tds-date-picker-calendar-cell-button[data-today]::before{
1568
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
1569
+ }
1570
+
1571
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
1572
+ display:none;
1670
1573
  }
1671
1574
 
1672
- .tds-field[data-disabled]{
1673
- --tds-field-border-color:var(--t-form-border-color-disabled);
1674
- --tds-field-background-color:var(--t-form-background-color-disabled);
1675
- --tds-field-color:var(--t-form-color-disabled);
1676
- --tds-field-placeholder-color:var(--t-form-color-disabled);
1575
+ .tds-date-picker-calendar-cell-button[data-hovered]{
1576
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
1677
1577
  }
1678
1578
 
1679
- .tds-field[data-disabled] .tds-field-control{
1680
- cursor:not-allowed;
1681
- }
1579
+ .tds-date-picker-calendar-cell-button[data-pressed]{
1580
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
1581
+ }
1682
1582
 
1683
- .tds-field--lg{
1684
- --tds-field-min-height:var(--t-container-size-lg);
1685
- --tds-field-font-size:var(--t-font-size-lg);
1686
- }
1583
+ .tds-date-picker-calendar-cell-button[data-selected]{
1584
+ --_background-color:var(--t-fill-color-interaction);
1585
+ font-weight:var(--t-font-weight-semibold);
1586
+ color:var(--t-text-color-inverted);
1587
+ border-color:transparent;
1588
+ }
1687
1589
 
1688
- .tds-field-label{
1689
- font-size:var(--t-font-size-md);
1690
- font-weight:var(--t-font-weight-normal);
1691
- color:var(--t-text-color);
1692
- cursor:default;
1693
- }
1590
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
1591
+ color:var(--t-text-color-disabled);
1592
+ text-decoration:line-through;
1593
+ cursor:not-allowed;
1594
+ }
1694
1595
 
1695
- .tds-field-control{
1696
- display:flex;
1697
- align-items:center;
1698
- inline-size:100%;
1699
- min-block-size:var(--tds-field-min-height);
1700
- font-family:inherit;
1701
- font-size:var(--tds-field-font-size);
1702
- line-height:1;
1703
- color:var(--tds-field-color);
1704
- -webkit-appearance:none;
1705
- -moz-appearance:none;
1706
- appearance:none;
1707
- cursor:text;
1708
- outline:var(--t-focus-ring-width) solid transparent;
1709
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
1710
- outline-offset:0;
1711
- background-color:var(--tds-field-background-color);
1712
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
1713
- border-radius:var(--t-form-border-radius);
1714
- transition-timing-function:var(--t-ease-in-out);
1715
- transition-duration:var(--t-duration-200);
1716
- transition-property:background-color, border-color, outline-color, outline-offset;
1717
- }
1596
+ .tds-date-picker-calendar-cell-button[data-disabled]{
1597
+ color:var(--t-text-color-disabled);
1598
+ }
1718
1599
 
1719
- .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
1720
- border-color:var(--tds-field-border-color-hover);
1600
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
1601
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
1602
+ outline-offset:-2px;
1721
1603
  }
1722
1604
 
1723
- .tds-field-control[data-focus-within]{
1724
- outline-color:var(--t-focus-ring-color);
1605
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
1725
1606
  outline-offset:var(--t-focus-ring-offset);
1726
- border-color:var(--tds-field-border-color-active);
1727
1607
  }
1728
1608
 
1729
- .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
1730
- --tds-field-border-color:var(--t-form-border-color-readonly);
1731
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1732
- --tds-field-background-color:var(--t-form-background-color-readonly);
1733
- color:var(--t-form-color-readonly);
1734
- }
1609
+ .tds-date-picker-popover--lg{
1610
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1611
+ }
1735
1612
 
1736
- [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
1737
- border-color:var(--t-form-border-color-hover);
1738
- }
1613
+ .tds-radio{
1614
+ --tds-radio-font-size:var(--t-font-size-md);
1615
+ --tds-radio-cursor:pointer;
1616
+ --tds-radio-line-height:1.4;
1617
+ --tds-radio-transition-property:border-width;
1739
1618
 
1740
- .tds-field-description{
1741
- display:flex;
1742
- gap:var(--t-spacing-half);
1743
- align-items:flex-start;
1744
- margin:0;
1745
- font-size:var(--t-font-size-sm);
1746
- line-height:1.35;
1747
- color:var(--tds-field-description-color, var(--t-text-color-secondary));
1748
- cursor:text;
1749
- }
1619
+ --tds-radio-input-size:var(--t-element-size-md);
1620
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1621
+ --tds-radio-input-border-color:var(--t-form-border-color);
1622
+ --tds-radio-input-border-width:var(--t-form-border-width);
1623
+ --tds-radio-input-background-color:var(--t-form-background-color);
1750
1624
 
1751
- .tds-field-description .tds-field-description-invalid-icon{
1752
- display:var(--tds-field-description-invalid-icon-display, none);
1753
- flex-shrink:0;
1754
- margin-block-start:calc(.5lh - .5em);
1755
- line-height:1.35;
1756
- }
1625
+ --tds-radio-label-color:var(--t-form-color);
1757
1626
 
1758
- .tds-field-date-segment{
1759
- padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
1760
- text-align:end;
1761
- text-wrap:nowrap;
1762
- caret-color:transparent;
1763
- border-radius:var(--t-border-radius-sm);
1627
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1628
+ --tds-radio-description-line-height:1.35;
1629
+ --tds-radio-description-color:var(--t-text-color-secondary);
1630
+
1631
+ position:relative;
1632
+ display:inline-grid;
1633
+ grid-template-columns:auto;
1634
+ grid-auto-columns:1fr;
1635
+ gap:var(--t-spacing-fourth) 0;
1636
+ line-height:var(--tds-radio-line-height);
1637
+ -webkit-user-select:none;
1638
+ -moz-user-select:none;
1639
+ user-select:none;
1764
1640
  }
1765
1641
 
1766
- .tds-field-date-segment[data-placeholder]{
1767
- color:var(--tds-field-placeholder-color);
1642
+ .tds-radio label{
1643
+ grid-area:1 / 2;
1644
+ padding-inline-start:var(--t-spacing-1);
1645
+ font-size:var(--tds-radio-font-size);
1646
+ font-weight:var(--t-font-weight-normal);
1647
+ color:var(--tds-radio-label-color);
1648
+ cursor:var(--tds-radio-cursor);
1768
1649
  }
1769
1650
 
1770
- .tds-field-date-segment[data-focused]{
1771
- color:var(--t-text-color-inverted);
1772
- outline:0;
1773
- background-color:var(--t-fill-color-interaction);
1651
+ .tds-radio input[type="radio"]{
1652
+ position:relative;
1653
+ width:1em;
1654
+ height:1em;
1655
+ margin:calc((1lh - 1em) / 2) 0 0;
1656
+ font-size:var(--tds-radio-font-size);
1657
+ line-height:inherit;
1658
+ -webkit-appearance:none;
1659
+ -moz-appearance:none;
1660
+ appearance:none;
1661
+ cursor:var(--tds-radio-cursor);
1662
+ background-color:var(--tds-radio-input-background-color);
1663
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1664
+ border-radius:var(--tds-radio-input-border-radius);
1665
+ transition-timing-function:var(--t-ease-in-out);
1666
+ transition-duration:var(--t-duration-200);
1667
+ transition-property:var(--tds-radio-transition-property);
1774
1668
  }
1775
1669
 
1776
- .tds-field-date-segment-separator{
1777
- padding-inline:0;
1778
- color:var(--tds-field-placeholder-color);
1779
- }
1670
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1671
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1672
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1673
+ }
1780
1674
 
1781
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
1782
- color:var(--tds-field-color);
1783
- }
1675
+ :is(.tds-radio input[type="radio"]):focus-visible{
1676
+ outline:var(--t-focus-ring-outline);
1677
+ outline-offset:var(--t-focus-ring-offset);
1678
+ }
1784
1679
 
1785
- .tds-radio-group{
1786
- --tds-radio-group-font-size:var(--t-font-size-md);
1787
- --tds-radio-group-line-height:1.4;
1788
- --tds-radio-group-gap:var(--t-spacing-1);
1680
+ :is(.tds-radio input[type="radio"]):disabled{
1681
+ pointer-events:none;
1682
+ }
1789
1683
 
1790
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1791
- --tds-radio-group-description-line-height:1.35;
1792
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1793
- --tds-radio-group-description-invalid-icon-display:none;
1794
- display:flex;
1795
- flex-direction:column;
1796
- gap:0;
1797
- padding:0;
1798
- margin:0;
1684
+ @media (prefers-reduced-motion: reduce){
1799
1685
 
1800
- font-size:var(--tds-radio-group-font-size);
1801
- line-height:var(--tds-radio-group-line-height);
1802
- border:0;
1803
- }
1686
+ .tds-radio input[type="radio"]{
1687
+ --tds-radio-transition-property:none;
1688
+ }
1689
+ }
1804
1690
 
1805
- .tds-radio-group legend{
1806
- float:left;
1807
- padding:0;
1808
- margin:0;
1691
+ .tds-radio:has(input:checked){
1692
+ --tds-radio-input-background-color:var(--t-form-background-color);
1693
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1694
+ --tds-radio-input-border-width:4px;
1809
1695
  }
1810
1696
 
1811
- .tds-radio-group[aria-invalid="true"]{
1812
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1813
- --tds-radio-group-description-invalid-icon-display:inline-block;
1697
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1698
+ --tds-radio-input-background-color:var(--t-form-background-color);
1699
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1700
+ }
1701
+
1702
+ .tds-radio:has(input:user-invalid){
1703
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1814
1704
  }
1815
1705
 
1816
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1817
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1706
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1707
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1708
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1818
1709
  }
1819
1710
 
1820
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1821
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1822
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1823
- }
1711
+ .tds-radio:has(input:disabled){
1712
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1713
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1824
1714
 
1825
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1826
- --tds-radio-input-background-color:var(--t-form-background-color);
1827
- }
1715
+ --tds-radio-label-color:var(--t-form-color-disabled);
1716
+ --tds-radio-description-color:var(--t-form-color-disabled);
1717
+ --tds-radio-cursor:not-allowed;
1718
+ }
1828
1719
 
1829
- .tds-radio-group:has(input:required) legend::after{
1830
- margin-left:.25ch;
1831
- color:var(--t-text-color-status-error);
1832
- content:"*";
1720
+ .tds-radio:has(input:disabled) input:checked{
1721
+ --tds-radio-input-background-color:var(--t-form-background-color);
1722
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1833
1723
  }
1834
1724
 
1835
- .tds-radio-group-fields{
1836
- display:flex;
1837
- flex-direction:column;
1838
- gap:var(--tds-radio-group-gap);
1839
- align-items:flex-start;
1840
- margin-top:var(--t-spacing-1);
1841
- }
1842
-
1843
- .tds-radio-group-description{
1725
+ .tds-radio-description{
1844
1726
  display:flex;
1727
+ grid-area:2 / 2;
1845
1728
  gap:var(--t-spacing-half);
1846
1729
  align-items:flex-start;
1847
- margin:var(--t-spacing-fourth) 0 0;
1848
- font-size:var(--tds-radio-group-description-font-size);
1849
- line-height:var(--tds-radio-group-description-line-height);
1850
- color:var(--tds-radio-group-description-color);
1730
+ padding-inline-start:var(--t-spacing-1);
1731
+ margin:0;
1732
+ font-size:var(--tds-radio-description-font-size);
1733
+ line-height:var(--tds-radio-description-line-height);
1734
+ color:var(--tds-radio-description-color);
1851
1735
  cursor:text;
1852
1736
  }
1853
1737
 
1854
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1855
- display:var(--tds-radio-group-description-invalid-icon-display);
1856
- flex-shrink:0;
1857
- margin-top:calc(.5lh - .5em);
1858
- line-height:var(--tds-radio-group-description-line-height);
1859
- }
1860
-
1861
- .tds-radio-group--sm{
1862
- --tds-radio-group-line-height:1.35;
1863
- --tds-radio-group-font-size:var(--t-font-size-sm);
1864
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1865
- --tds-radio-group-description-line-height:1.3;
1738
+ .tds-radio--sm{
1739
+ --tds-radio-line-height:1.35;
1740
+ --tds-radio-input-size:var(--t-element-size-sm);
1741
+ --tds-radio-font-size:var(--t-font-size-sm);
1742
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1743
+ --tds-radio-description-line-height:1.3;
1866
1744
  }
1867
1745
 
1868
- .tds-number-stepper{
1869
- --tds-number-stepper-button-offset:4px;
1870
- --tds-number-stepper-button-gap:2px;
1746
+ .tds-input:has(textarea){
1747
+ --tds-input-padding-block:6px;
1748
+ --tds-input-resizer-size:var(--t-element-size-sm);
1749
+ --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");
1871
1750
  }
1872
1751
 
1873
- .tds-number-stepper--lg{
1874
- --tds-number-stepper-button-offset:5px;
1875
- --tds-number-stepper-button-gap:4px;
1876
- }
1752
+ @supports (x: attr(x type(*))){
1877
1753
 
1878
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1879
- display:none;
1754
+ .tds-input textarea{
1755
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1880
1756
  }
1757
+ }
1881
1758
 
1882
- .tds-number-stepper-input{
1883
- display:flex;
1884
- flex:1;
1885
- align-items:center;
1886
- min-inline-size:0;
1887
- padding-block:var(--tds-field-padding-block);
1888
- padding-inline:var(--tds-field-padding-inline);
1889
- font-family:inherit;
1890
- font-size:inherit;
1891
- color:inherit;
1892
- outline:0;
1893
- background:transparent;
1894
- border:0;
1895
- }
1759
+ .tds-input.tds-textarea--resize-vertical textarea{
1760
+ resize:vertical;
1761
+ }
1896
1762
 
1897
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1898
- margin:0;
1899
- -webkit-appearance:none;
1900
- appearance:none;
1901
- }
1763
+ .tds-input.tds-textarea--resize-none textarea{
1764
+ resize:none;
1765
+ }
1902
1766
 
1903
- .tds-number-stepper-button{
1904
- flex-shrink:0;
1905
- align-self:center;
1906
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1907
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1908
- padding:0;
1767
+ .tds-input.tds-textarea--resize-auto textarea{
1768
+ resize:vertical;
1769
+ }
1770
+
1771
+ @supports (field-sizing: content){
1772
+ .tds-input.tds-textarea--resize-auto textarea{
1773
+ field-sizing:content;
1774
+ resize:none;
1775
+ }
1776
+ }
1777
+
1778
+ .tds-input textarea{
1779
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1780
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1781
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1782
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1783
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1784
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1785
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1786
+ --tds-input-scrollbar-thumb-border-radius:999px;
1787
+ --tds-input-scrollbar-thumb-border-width:3px;
1788
+ --tds-input-scrollbar-track-margin-block:.125rem;
1789
+ scrollbar-color:initial;
1790
+ transition-timing-function:var(--t-ease-in-out);
1791
+ transition-duration:var(--t-duration-200);
1792
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1909
1793
  }
1910
1794
 
1911
- .tds-number-stepper-button + .tds-number-stepper-button{
1912
- margin-inline-start:var(--tds-number-stepper-button-gap);
1913
- }
1795
+ @media (pointer: fine){
1796
+ :is(.tds-input textarea)::-webkit-scrollbar{
1797
+ width:12px;
1798
+ height:12px;
1799
+ cursor:default;
1800
+ }
1914
1801
 
1915
- .tds-number-stepper-button:last-of-type{
1916
- margin-inline-end:var(--tds-number-stepper-button-offset);
1917
- }
1802
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1803
+ cursor:default;
1804
+ background:var(--tds-input-scrollbar-thumb-color);
1805
+ background-clip:content-box;
1806
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1807
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1808
+ }
1918
1809
 
1919
- .tds-date-picker{
1920
- --tds-date-picker-button-offset:4px;
1921
- }
1810
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1811
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1812
+ }
1922
1813
 
1923
- .tds-date-picker--lg{
1924
- --tds-date-picker-button-offset:5px;
1925
- }
1814
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1815
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1816
+ }
1926
1817
 
1927
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-button[data-focused]){
1928
- outline-color:transparent;
1929
- outline-offset:0;
1930
- border-color:var(--tds-field-border-color);
1931
- }
1818
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1819
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1820
+ }
1932
1821
 
1933
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
1934
- display:none;
1935
- }
1822
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1823
+ background:var(--tds-input-scrollbar-surface-color);
1824
+ }
1936
1825
 
1937
- .tds-date-picker-input{
1938
- flex:1;
1939
- padding-block:var(--tds-field-padding-block);
1940
- padding-inline:var(--tds-field-padding-inline);
1941
- overflow:auto clip;
1942
- font-variant-numeric:tabular-nums;
1943
- text-wrap:nowrap;
1944
- scrollbar-width:none;
1945
- }
1826
+ :is(.tds-input textarea)::-webkit-resizer{
1827
+ background:var(--tds-input-resizer-icon) no-repeat;
1828
+ background-position:right bottom;
1829
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1830
+ }
1946
1831
 
1947
- .tds-date-picker-input:has( + .tds-date-picker-button){
1948
- padding-inline-end:0;
1832
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1833
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1834
+ cursor:default;
1835
+ }
1836
+
1837
+ @supports (-moz-appearance: none){
1838
+ :is(.tds-input textarea){
1839
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1840
+ scrollbar-width:thin;
1841
+ }
1842
+
1843
+ @media (hover){
1844
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1845
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1846
+ }
1847
+ }
1848
+ }
1949
1849
  }
1950
1850
 
1951
- .tds-date-picker-button{
1952
- flex-shrink:0;
1953
- align-self:center;
1954
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1955
- block-size:calc(var(--tds-field-min-height) - (var(--tds-date-picker-button-offset) * 2));
1956
- padding:0;
1957
- margin-inline-end:var(--tds-date-picker-button-offset);
1958
- }
1851
+ .tds-toggle-switch{
1852
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1853
+ --tds-toggle-switch-cursor:pointer;
1854
+ --tds-toggle-switch-display:inline-grid;
1855
+ --tds-toggle-switch-line-height:1.4;
1959
1856
 
1960
- .tds-date-picker-popover{
1961
- --tds-date-picker-popover-font-size:var(--t-font-size-md);
1962
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
1963
- --tds-date-picker-popover-background-color:var(--t-surface-color-card);
1964
- --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1965
- --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
1966
- --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
1967
- --tds-date-picker-popover-interactive-property:color, background-color, border-color;
1857
+ --tds-toggle-switch-label-color:var(--t-form-color);
1858
+
1859
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1860
+ --tds-toggle-switch-track-outline:none;
1861
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1862
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1863
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1864
+
1865
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1866
+ --tds-toggle-switch-thumb-transform:translateX(0);
1867
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1968
1868
 
1869
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1870
+ --tds-toggle-switch-description-line-height:1.35;
1871
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1969
1872
  position:relative;
1970
- overflow:hidden;
1971
- background-color:var(--tds-date-picker-popover-background-color);
1972
- border:var(--t-border-width) solid var(--t-border-color);
1973
- border-radius:var(--t-border-radius);
1974
- box-shadow:var(--tds-date-picker-popover-shadow);
1873
+
1874
+ display:var(--tds-toggle-switch-display);
1875
+ grid-template-columns:auto;
1876
+ grid-auto-columns:1fr;
1877
+ gap:var(--t-spacing-fourth) 0;
1878
+ -webkit-user-select:none;
1879
+ -moz-user-select:none;
1880
+ user-select:none;
1975
1881
  }
1976
1882
 
1977
- .tds-date-picker-popover[data-entering]{
1978
- animation:tds-date-picker-popover var(--t-duration-300) var(--t-ease-out);
1883
+ .tds-toggle-switch input[type="checkbox"]{
1884
+ position:absolute;
1885
+ width:var(--tds-toggle-switch-track-width);
1886
+ height:var(--tds-toggle-switch-track-height);
1887
+ margin:0;
1888
+ -webkit-appearance:none;
1889
+ -moz-appearance:none;
1890
+ appearance:none;
1891
+ cursor:var(--tds-toggle-switch-cursor);
1892
+ outline:var(--tds-toggle-switch-track-outline);
1893
+ outline-offset:var(--t-focus-ring-offset);
1894
+ background-color:transparent;
1895
+ border:0;
1896
+ border-radius:var(--t-border-radius-round);
1897
+ }
1898
+
1899
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1900
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1901
+ }
1902
+
1903
+ .tds-toggle-switch label{
1904
+ display:inline-flex;
1905
+ grid-area:1 / 2;
1906
+ padding-inline-start:var(--t-spacing-1);
1907
+ margin-top:-.09375em;
1908
+ font-size:var(--tds-toggle-switch-font-size);
1909
+ font-weight:var(--t-font-weight-normal);
1910
+ line-height:var(--tds-toggle-switch-line-height);
1911
+ color:var(--tds-toggle-switch-label-color);
1912
+ cursor:var(--tds-toggle-switch-cursor);
1979
1913
  }
1980
1914
 
1981
- .tds-date-picker-popover[data-exiting]{
1982
- animation:tds-date-picker-popover var(--t-duration-200) var(--t-ease-in) reverse;
1915
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1916
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1983
1917
  }
1984
1918
 
1985
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1986
- will-change:opacity, transform;
1919
+ .tds-toggle-switch:has(input:checked){
1920
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1921
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1987
1922
  }
1988
1923
 
1989
- @keyframes tds-date-picker-popover{
1990
- from{
1991
- opacity:0;
1992
- transform:translateY(-8px);
1924
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1925
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1926
+ }
1927
+
1928
+ .tds-toggle-switch:has(input:disabled){
1929
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1930
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1931
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1932
+ --tds-toggle-switch-cursor:not-allowed;
1993
1933
  }
1934
+
1935
+ .tds-toggle-switch-track{
1936
+ position:relative;
1937
+ flex-shrink:0;
1938
+ width:var(--tds-toggle-switch-track-width);
1939
+ height:var(--tds-toggle-switch-track-height);
1940
+ background-color:var(--tds-toggle-switch-track-background-color);
1941
+ border-radius:var(--t-border-radius-round);
1942
+ transition:var(--tds-toggle-switch-track-transition);
1994
1943
  }
1995
1944
 
1945
+ .tds-toggle-switch-track::before{
1946
+ position:absolute;
1947
+ top:var(--t-spacing-fourth);
1948
+ left:var(--t-spacing-fourth);
1949
+ width:var(--tds-toggle-switch-thumb-size);
1950
+ height:var(--tds-toggle-switch-thumb-size);
1951
+ content:"";
1952
+ background-color:#fff;
1953
+ border-radius:var(--t-border-radius-round);
1954
+ transform:var(--tds-toggle-switch-thumb-transform);
1955
+ transition:var(--tds-toggle-switch-thumb-transition);
1956
+ }
1957
+
1996
1958
  @media (prefers-reduced-motion: reduce){
1997
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
1998
- animation:none;
1999
- }
1959
+
1960
+ .tds-toggle-switch-track{
1961
+ --tds-toggle-switch-track-transition:none;
1962
+ --tds-toggle-switch-thumb-transition:none;
2000
1963
  }
1964
+ }
2001
1965
 
2002
- .tds-date-picker-overlay{
2003
- position:absolute;
2004
- inset:0;
2005
- z-index:1;
1966
+ .tds-toggle-switch-description{
2006
1967
  display:flex;
2007
- background-color:var(--tds-date-picker-popover-background-color);
1968
+ grid-area:2 / 2;
1969
+ align-items:flex-start;
1970
+ padding-inline-start:var(--t-spacing-1);
1971
+ margin:0;
1972
+ font-size:var(--tds-toggle-switch-description-font-size);
1973
+ line-height:var(--tds-toggle-switch-description-line-height);
1974
+ color:var(--tds-toggle-switch-description-color);
1975
+ cursor:text;
2008
1976
  }
2009
1977
 
2010
- .tds-date-picker-overlay-list{
2011
- display:grid;
2012
- flex:1;
2013
- grid-template-columns:repeat(3, 1fr);
2014
- gap:var(--t-spacing-half);
2015
- padding-inline:var(--tds-date-picker-popover-padding);
2016
- outline:0;
2017
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
2018
- scrollbar-width:thin;
1978
+ .tds-toggle-switch--sm{
1979
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1980
+ --tds-toggle-switch-line-height:1.35;
1981
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1982
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1983
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1984
+ --tds-toggle-switch-description-line-height:1.3;
2019
1985
  }
2020
1986
 
2021
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
2022
- grid-template-rows:repeat(4, 1fr);
2023
- padding-bottom:var(--tds-date-picker-popover-padding);
1987
+ .tds-toggle-switch--hide-label{
1988
+ --tds-toggle-switch-display:inline-flex;
2024
1989
  }
2025
1990
 
2026
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
2027
- grid-auto-rows:var(--t-container-size-xl);
2028
- padding-right:var(--t-spacing-1);
2029
- overflow-y:auto;
2030
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
2031
- }
1991
+ .tds-input{
1992
+ --tds-input-border-color:var(--t-form-border-color);
1993
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1994
+ --tds-input-background-color:var(--t-form-background-color);
1995
+ --tds-input-color:var(--t-form-color);
1996
+ --tds-input-font-size:var(--t-font-size-md);
1997
+ --tds-input-description-color:var(--t-text-color-secondary);
1998
+ --tds-input-description-invalid-icon-display:none;
1999
+ --tds-input-min-height:var(--t-container-size-md);
2000
+ --tds-input-padding-inline:var(--t-spacing-1);
2001
+
2002
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2032
2003
 
2033
- .tds-date-picker-overlay-cell{
2034
2004
  display:flex;
2035
- align-items:center;
2036
- justify-content:center;
2037
- font-family:inherit;
2038
- font-size:var(--tds-date-picker-popover-font-size);
2039
- color:var(--t-text-color);
2040
- cursor:pointer;
2041
- outline:0;
2042
- background-color:transparent;
2043
- border:0;
2044
- border-radius:var(--t-border-radius-md);
2045
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
2046
- transition-duration:var(--t-duration-100);
2047
- transition-property:var(--tds-date-picker-popover-interactive-property);
2005
+ flex-direction:column;
2006
+ gap:var(--t-spacing-half);
2048
2007
  }
2049
2008
 
2050
- .tds-date-picker-overlay-cell[data-hovered]{
2051
- background-color:var(--t-fill-color-button-neutral-outline-hover);
2009
+ .tds-input label{
2010
+ font-size:var(--t-font-size-md);
2011
+ font-weight:var(--t-font-weight-normal);
2012
+ color:var(--t-text-color);
2052
2013
  }
2053
2014
 
2054
- .tds-date-picker-overlay-cell[data-pressed]{
2055
- background-color:var(--t-fill-color-button-neutral-outline-active);
2015
+ .tds-input :is(input,textarea){
2016
+ inline-size:100%;
2017
+ block-size:auto;
2018
+ min-block-size:var(--tds-input-min-height);
2019
+ padding-block:var(--tds-input-padding-block);
2020
+ padding-inline:var(--tds-input-padding-inline);
2021
+ font-family:inherit;
2022
+ font-size:var(--tds-input-font-size);
2023
+ color:var(--tds-input-color);
2024
+ -webkit-appearance:none;
2025
+ -moz-appearance:none;
2026
+ appearance:none;
2027
+ outline:var(--t-focus-ring-width) solid transparent;
2028
+ outline-offset:0;
2029
+ background-color:var(--tds-input-background-color);
2030
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
2031
+ border-radius:var(--t-form-border-radius);
2032
+ transition-timing-function:var(--t-ease-in-out);
2033
+ transition-duration:var(--t-duration-200);
2034
+ transition-property:var(--tds-input-transition-property);
2056
2035
  }
2057
2036
 
2058
- .tds-date-picker-overlay-cell[data-selected]{
2059
- font-weight:var(--t-font-weight-semibold);
2060
- color:var(--t-text-color-inverted);
2061
- background-color:var(--t-fill-color-interaction);
2062
- }
2037
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2038
+ border-color:var(--tds-input-border-color-hover);
2039
+ }
2063
2040
 
2064
- .tds-date-picker-overlay-cell[data-focus-visible]{
2065
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
2066
- }
2041
+ :is(.tds-input :is(input,textarea)):focus{
2042
+ outline-color:transparent;
2043
+ }
2067
2044
 
2068
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
2069
- outline-offset:var(--t-focus-ring-offset);
2070
- }
2045
+ :is(.tds-input :is(input,textarea)):focus-visible{
2046
+ outline-color:var(--t-focus-ring-color);
2047
+ outline-offset:var(--t-focus-ring-offset);
2048
+ border-color:var(--t-form-border-color-focus);
2049
+ }
2071
2050
 
2072
- .tds-date-picker-calendar-heading{
2073
- display:flex;
2074
- flex:1;
2075
- gap:var(--t-spacing-1);
2076
- align-items:center;
2077
- justify-content:flex-start;
2078
- padding-inline-start:4px;
2079
- }
2051
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
2052
+ color:var(--t-form-placeholder-color);
2053
+ -moz-user-select:none;
2054
+ user-select:none;
2055
+ }
2080
2056
 
2081
- .tds-date-picker-calendar-overlay-trigger{
2082
- --_background-color:transparent;
2083
- position:relative;
2084
- padding:0;
2085
- font-family:inherit;
2086
- font-size:var(--tds-date-picker-popover-font-size);
2087
- font-weight:var(--t-font-weight-semibold);
2088
- font-feature-settings:"ss01", "ss02";
2089
- color:var(--t-text-color);
2090
- cursor:pointer;
2091
- outline:0;
2092
- background-color:transparent;
2093
- border:0;
2094
- border-radius:var(--t-border-radius-md);
2095
- isolation:isolate;
2096
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
2097
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
2098
- transition-property:var(--tds-date-picker-popover-interactive-property);
2099
- }
2057
+ :is(.tds-input :is(input,textarea))::placeholder{
2058
+ color:var(--t-form-placeholder-color);
2059
+ -webkit-user-select:none;
2060
+ -moz-user-select:none;
2061
+ user-select:none;
2062
+ }
2100
2063
 
2101
- .tds-date-picker-calendar-overlay-trigger::before{
2102
- position:absolute;
2103
- inset:calc(var(--t-spacing-half) * -1);
2104
- z-index:-1;
2105
- pointer-events:inherit;
2106
- content:"";
2107
- background-color:var(--_background-color);
2108
- border-radius:inherit;
2064
+ @media (prefers-reduced-motion: reduce){
2065
+
2066
+ .tds-input :is(input,textarea){
2067
+ --tds-input-transition-property:none;
2109
2068
  }
2069
+ }
2110
2070
 
2111
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
2112
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
2071
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2072
+ --tds-input-background-color:var(--t-form-background-color-error);
2073
+ --tds-input-border-color:var(--t-form-border-color-error);
2074
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2075
+ --tds-input-description-color:var(--t-text-color-status-error);
2076
+ --tds-input-description-invalid-icon-display:inline-block;
2077
+ }
2078
+
2079
+ .tds-input:has(:is(input,textarea):required) label::after{
2080
+ margin-left:.25ch;
2081
+ color:var(--t-text-color-status-error);
2082
+ content:"*";
2083
+ }
2084
+
2085
+ .tds-input:where(:has(:is(input,textarea):disabled)){
2086
+ --tds-input-border-color:var(--t-form-border-color-disabled);
2087
+ --tds-input-background-color:var(--t-form-background-color-disabled);
2088
+ --tds-input-color:var(--t-form-color-disabled);
2113
2089
  }
2114
2090
 
2115
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
2116
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
2117
- }
2091
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2092
+ cursor:not-allowed;
2093
+ }
2118
2094
 
2119
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
2120
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
2121
- outline-offset:var(--t-focus-ring-offset);
2095
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
2096
+ --tds-input-border-color:var(--t-form-border-color-readonly);
2097
+ --tds-input-background-color:var(--t-form-background-color-readonly);
2122
2098
  }
2123
2099
 
2124
- .tds-date-picker-calendar{
2125
- inline-size:-moz-fit-content;
2126
- inline-size:fit-content;
2127
- font-size:var(--tds-date-picker-popover-font-size);
2128
- }
2100
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2101
+ border-color:var(--tds-input-border-color-hover);
2102
+ }
2129
2103
 
2130
- .tds-date-picker-calendar-body{
2131
- position:relative;
2132
- padding:var(--tds-date-picker-popover-padding);
2133
- padding-block-start:0;
2134
- }
2104
+ .tds-input.tds-input--lg{
2105
+ --tds-input-min-height:var(--t-container-size-lg);
2106
+ --tds-input-font-size:var(--t-font-size-lg);
2107
+ }
2135
2108
 
2136
- .tds-date-picker-calendar-header{
2109
+ .tds-input-description{
2137
2110
  display:flex;
2138
- align-items:center;
2139
- justify-content:space-between;
2140
- padding:var(--tds-date-picker-popover-padding);
2111
+ gap:var(--t-spacing-half);
2112
+ align-items:flex-start;
2113
+ margin:0;
2114
+ font-size:var(--t-font-size-sm);
2115
+ line-height:1.35;
2116
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
2117
+ cursor:text;
2141
2118
  }
2142
2119
 
2143
- .tds-date-picker-calendar-title{
2144
- padding:var(--t-spacing-half) var(--t-spacing-1);
2145
- font-size:var(--tds-date-picker-popover-font-size);
2146
- font-weight:var(--t-font-weight-semibold);
2147
- }
2120
+ .tds-input-description .tds-input-description-invalid-icon{
2121
+ display:var(--tds-input-description-invalid-icon-display, none);
2122
+ flex-shrink:0;
2123
+ margin-block-start:calc(.5lh - .5em);
2124
+ line-height:1.35;
2125
+ }
2148
2126
 
2149
- .tds-date-picker-calendar-nav{
2127
+ .tds-field{
2128
+ --tds-field-border-color:var(--t-form-border-color);
2129
+ --tds-field-border-color-hover:var(--t-form-border-color-hover);
2130
+ --tds-field-border-color-active:var(--t-form-border-color-focus);
2131
+ --tds-field-background-color:var(--t-form-background-color);
2132
+ --tds-field-color:var(--t-form-color);
2133
+ --tds-field-placeholder-color:var(--t-form-placeholder-color);
2134
+ --tds-field-font-size:var(--t-font-size-md);
2135
+ --tds-field-min-height:var(--t-container-size-md);
2136
+ --tds-field-padding-block:6px;
2137
+ --tds-field-padding-inline:var(--t-spacing-1);
2138
+ --tds-field-description-color:var(--t-text-color-secondary);
2139
+ --tds-field-description-invalid-icon-display:none;
2140
+
2141
+ position:relative;
2150
2142
  display:flex;
2151
- align-items:center;
2152
- justify-content:center;
2153
- padding:var(--t-spacing-half);
2154
- font-size:.875em;
2155
- color:var(--t-text-color);
2156
- cursor:pointer;
2157
- outline:0;
2158
- background-color:transparent;
2159
- border:0;
2160
- border-radius:var(--t-border-radius-md);
2161
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
2162
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
2163
- transition-property:var(--tds-date-picker-popover-interactive-property);
2143
+ flex-direction:column;
2144
+ gap:var(--t-spacing-half);
2164
2145
  }
2165
2146
 
2166
- .tds-date-picker-calendar-nav[data-hovered]{
2167
- background-color:var(--t-fill-color-button-neutral-outline-hover);
2147
+ .tds-field[data-required] .tds-field-label::after{
2148
+ margin-left:.25ch;
2149
+ color:var(--t-text-color-status-error);
2150
+ content:"*";
2168
2151
  }
2169
2152
 
2170
- .tds-date-picker-calendar-nav[data-pressed]{
2171
- background-color:var(--t-fill-color-button-neutral-outline-active);
2153
+ .tds-field[data-invalid]{
2154
+ --tds-field-border-color:var(--t-form-border-color-error);
2155
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2156
+ --tds-field-border-color-active:var(--t-form-border-color-error-hover);
2157
+ --tds-field-background-color:var(--t-form-background-color-error);
2158
+ --tds-field-description-color:var(--t-text-color-status-error);
2159
+ --tds-field-description-invalid-icon-display:inline-block;
2172
2160
  }
2173
2161
 
2174
- .tds-date-picker-calendar-nav[data-focus-visible]{
2175
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
2176
- outline-offset:var(--t-focus-ring-offset);
2162
+ .tds-field[data-disabled]{
2163
+ --tds-field-border-color:var(--t-form-border-color-disabled);
2164
+ --tds-field-background-color:var(--t-form-background-color-disabled);
2165
+ --tds-field-color:var(--t-form-color-disabled);
2166
+ --tds-field-placeholder-color:var(--t-form-color-disabled);
2177
2167
  }
2178
2168
 
2179
- .tds-date-picker-calendar-nav[data-disabled]{
2180
- color:var(--t-text-color-disabled);
2181
- cursor:not-allowed;
2182
- }
2169
+ .tds-field[data-disabled] .tds-field-control{
2170
+ cursor:not-allowed;
2171
+ }
2183
2172
 
2184
- .tds-date-picker-calendar-grid{
2185
- font-feature-settings:"ss01", "ss02";
2186
- border-collapse:collapse;
2173
+ .tds-field--lg{
2174
+ --tds-field-min-height:var(--t-container-size-lg);
2175
+ --tds-field-font-size:var(--t-font-size-lg);
2187
2176
  }
2188
2177
 
2189
- .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
2190
- padding:0;
2191
- border:0;
2192
- }
2193
-
2194
- .tds-date-picker-calendar-header-cell{
2195
- padding-block-end:var(--t-spacing-1);
2196
- font-size:.875em;
2197
- font-weight:var(--t-font-weight-medium);
2198
- color:var(--t-text-color-secondary);
2199
- text-align:center;
2200
- -webkit-user-select:none;
2201
- -moz-user-select:none;
2202
- user-select:none;
2178
+ .tds-field-label{
2179
+ font-size:var(--t-font-size-md);
2180
+ font-weight:var(--t-font-weight-normal);
2181
+ color:var(--t-text-color);
2182
+ cursor:default;
2203
2183
  }
2204
2184
 
2205
- .tds-date-picker-calendar-cell-button{
2206
- position:relative;
2185
+ .tds-field-control{
2207
2186
  display:flex;
2208
2187
  align-items:center;
2209
- justify-content:center;
2210
- inline-size:2.25em;
2211
- block-size:2.25em;
2212
- color:var(--t-text-color);
2213
- cursor:pointer;
2214
- -webkit-user-select:none;
2215
- -moz-user-select:none;
2216
- user-select:none;
2217
- outline:0;
2188
+ inline-size:100%;
2189
+ min-block-size:var(--tds-field-min-height);
2190
+ font-family:inherit;
2191
+ font-size:var(--tds-field-font-size);
2192
+ line-height:1;
2193
+ color:var(--tds-field-color);
2194
+ -webkit-appearance:none;
2195
+ -moz-appearance:none;
2196
+ appearance:none;
2197
+ cursor:text;
2198
+ outline:var(--t-focus-ring-width) solid transparent;
2199
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2200
+ outline-offset:0;
2201
+ background-color:var(--tds-field-background-color);
2202
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
2203
+ border-radius:var(--t-form-border-radius);
2204
+ transition-timing-function:var(--t-ease-in-out);
2205
+ transition-duration:var(--t-duration-200);
2206
+ transition-property:background-color, border-color, outline-color, outline-offset;
2218
2207
  }
2219
2208
 
2220
- .tds-date-picker-calendar-cell-button::before{
2221
- position:absolute;
2222
- inset:0;
2223
- z-index:-1;
2224
- content:"";
2225
- background-color:var(--_background-color);
2226
- border-radius:50%;
2209
+ .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
2210
+ border-color:var(--tds-field-border-color-hover);
2227
2211
  }
2228
2212
 
2229
- .tds-date-picker-calendar-cell-button[data-today]::before{
2230
- box-shadow:inset 0 0 0 1.5px var(--t-border-color);
2231
- }
2232
-
2233
- .tds-date-picker-calendar-cell-button[data-outside-month]{
2234
- display:none;
2213
+ .tds-field-control[data-focus-within]{
2214
+ outline-color:var(--t-focus-ring-color);
2215
+ outline-offset:var(--t-focus-ring-offset);
2216
+ border-color:var(--tds-field-border-color-active);
2235
2217
  }
2236
2218
 
2237
- .tds-date-picker-calendar-cell-button[data-hovered]{
2238
- --_background-color:var(--t-fill-color-button-neutral-outline-hover);
2219
+ .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2220
+ --tds-field-border-color:var(--t-form-border-color-readonly);
2221
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2222
+ --tds-field-background-color:var(--t-form-background-color-readonly);
2223
+ color:var(--t-form-color-readonly);
2239
2224
  }
2240
2225
 
2241
- .tds-date-picker-calendar-cell-button[data-pressed]{
2242
- --_background-color:var(--t-fill-color-button-neutral-outline-active);
2243
- }
2226
+ [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2227
+ border-color:var(--t-form-border-color-hover);
2228
+ }
2244
2229
 
2245
- .tds-date-picker-calendar-cell-button[data-selected]{
2246
- --_background-color:var(--t-fill-color-interaction);
2247
- font-weight:var(--t-font-weight-semibold);
2248
- color:var(--t-text-color-inverted);
2249
- border-color:transparent;
2250
- }
2230
+ .tds-field-description{
2231
+ display:flex;
2232
+ gap:var(--t-spacing-half);
2233
+ align-items:flex-start;
2234
+ margin:0;
2235
+ font-size:var(--t-font-size-sm);
2236
+ line-height:1.35;
2237
+ color:var(--tds-field-description-color, var(--t-text-color-secondary));
2238
+ cursor:text;
2239
+ }
2251
2240
 
2252
- .tds-date-picker-calendar-cell-button[data-unavailable]{
2253
- color:var(--t-text-color-disabled);
2254
- text-decoration:line-through;
2255
- cursor:not-allowed;
2241
+ .tds-field-description .tds-field-description-invalid-icon{
2242
+ display:var(--tds-field-description-invalid-icon-display, none);
2243
+ flex-shrink:0;
2244
+ margin-block-start:calc(.5lh - .5em);
2245
+ line-height:1.35;
2256
2246
  }
2257
2247
 
2258
- .tds-date-picker-calendar-cell-button[data-disabled]{
2259
- color:var(--t-text-color-disabled);
2260
- }
2248
+ .tds-field-date-segment{
2249
+ padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2250
+ text-align:end;
2251
+ text-wrap:nowrap;
2252
+ caret-color:transparent;
2253
+ border-radius:var(--t-border-radius-sm);
2254
+ }
2261
2255
 
2262
- .tds-date-picker-calendar-cell-button[data-focus-visible]{
2263
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
2264
- outline-offset:-2px;
2256
+ .tds-field-date-segment[data-placeholder]{
2257
+ color:var(--tds-field-placeholder-color);
2265
2258
  }
2266
2259
 
2267
- .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
2268
- outline-offset:var(--t-focus-ring-offset);
2260
+ .tds-field-date-segment[data-focused]{
2261
+ color:var(--t-text-color-inverted);
2262
+ outline:0;
2263
+ background-color:var(--t-fill-color-interaction);
2269
2264
  }
2270
2265
 
2271
- .tds-date-picker-popover--lg{
2272
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
2266
+ .tds-field-date-segment-separator{
2267
+ padding-inline:0;
2268
+ color:var(--tds-field-placeholder-color);
2269
+ }
2270
+
2271
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2272
+ color:var(--tds-field-color);
2273
2273
  }
2274
2274
 
2275
2275
  .tds-select{