@planningcenter/tapestry 3.2.1-rc.9 → 3.2.1

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 (7) hide show
  1. package/dist/reactRender.css +1455 -1451
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1455 -1451
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/unstable.css +5 -1
  6. package/dist/unstable.css.map +1 -1
  7. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -360,198 +360,267 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
360
360
  flex-direction:column;
361
361
  }
362
362
 
363
- .tds-checkbox{
364
- --tds-checkbox-font-size:var(--t-font-size-md);
365
- --tds-checkbox-cursor:pointer;
366
- --tds-checkbox-line-height:1.4;
367
- --tds-checkbox-transition-property:background-color, border-color;
368
-
369
- --tds-checkbox-input-size:var(--t-element-size-md);
370
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
371
- --tds-checkbox-input-border-color:var(--t-form-border-color);
372
- --tds-checkbox-input-background-color:transparent;
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
366
+ }
367
+ }
373
368
 
374
- --tds-checkbox-input-icon:none;
375
- --tds-checkbox-input-icon-visibility:hidden;
376
- --tds-checkbox-input-icon-opacity:0;
377
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
369
+ @layer t-component{
370
+ .tds-page-header{
371
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
+ --tds-page-header-color:var(--t-text-color);
374
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
375
+ --tds-page-header-headline-color:var(--t-text-color-headline);
376
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
+ --tds-page-header-padding-x:var(--t-spacing-2);
378
+ --tds-page-header-padding-y:var(--t-spacing-2);
379
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
+ --tds-page-header-nav-gap:var(--t-spacing-1);
381
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
382
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
+ --tds-page-header-nav-item-border-width:1px;
378
387
 
379
- --tds-checkbox-label-color:var(--t-form-color);
388
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
380
390
 
381
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
382
- --tds-checkbox-description-line-height:1.35;
383
- --tds-checkbox-description-color:var(--t-text-color-secondary);
384
- --tds-checkbox-description-invalid-icon-display:none;
391
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
385
394
 
386
- position:relative;
387
- display:inline-grid;
388
- grid-template-columns:auto;
389
- grid-auto-columns:1fr;
390
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
391
- line-height:var(--tds-checkbox-line-height);
392
- cursor:var(--tds-checkbox-cursor);
393
- -webkit-user-select:none;
394
- -moz-user-select:none;
395
- user-select:none;
396
- }
395
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
397
397
 
398
- .tds-checkbox label{
399
- grid-area:1 / 2;
400
- font-size:var(--tds-checkbox-font-size);
401
- font-weight:var(--t-font-weight-normal);
402
- color:var(--tds-checkbox-label-color);
403
- cursor:var(--tds-checkbox-cursor);
404
- }
398
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
405
401
 
406
- .tds-checkbox tds-indeterminate{
407
- display:flex;
402
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
408
407
  }
409
408
 
410
- .tds-checkbox input[type="checkbox"]{
411
- position:relative;
412
- width:1em;
413
- height:1em;
414
- margin:calc((1lh - 1em) / 2) 0 0;
415
- font-size:var(--tds-checkbox-font-size);
416
- line-height:inherit;
417
- -webkit-appearance:none;
418
- -moz-appearance:none;
419
- appearance:none;
420
- cursor:var(--tds-checkbox-cursor);
421
- background-color:var(--tds-checkbox-input-background-color);
422
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
423
- border-radius:var(--tds-checkbox-input-border-radius);
424
- transition-timing-function:var(--t-ease-in-out);
425
- transition-duration:var(--t-duration-200);
426
- transition-property:var(--tds-checkbox-transition-property);
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
427
411
  }
428
412
 
429
- :is(.tds-checkbox input[type="checkbox"])::before{
430
- position:absolute;
431
- top:50%;
432
- left:50%;
433
- visibility:var(--tds-checkbox-input-icon-visibility);
434
- width:100%;
435
- height:100%;
436
- content:"";
437
- background-color:var(--tds-checkbox-input-icon-fill);
438
- border-radius:var(--tds-checkbox-input-border-radius);
439
- opacity:var(--tds-checkbox-input-icon-opacity);
440
- -webkit-mask-image:var(--tds-checkbox-input-icon);
441
- mask-image:var(--tds-checkbox-input-icon);
442
- -webkit-mask-repeat:no-repeat;
443
- mask-repeat:no-repeat;
444
- -webkit-mask-size:contain;
445
- mask-size:contain;
446
- transform:translate(-50%, -50%);
447
- }
448
-
449
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
450
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
451
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
452
- }
453
-
454
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
455
- outline:var(--t-focus-ring-outline);
456
- outline-offset:var(--t-focus-ring-offset);
413
+ @supports (color: light-dark(#fff, #000)){
414
+ .tds-page-header{
415
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
457
417
  }
418
+ }
458
419
 
459
- :is(.tds-checkbox input[type="checkbox"]):disabled{
460
- pointer-events:none;
420
+ @media (min-width: 600px){
421
+ .tds-page-header{
422
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
423
+ --tds-page-header-color:var(--t-text-color-secondary);
424
+ --tds-page-header-bottom-border-color:var(--t-border-color);
425
+ --tds-page-header-padding-x:var(--t-spacing-3);
426
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
+ --tds-page-header-nav-gap:var(--t-spacing-half);
428
+ --tds-page-header-nav-background:transparent;
429
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
+ --tds-page-header-nav-item-border-width:1px;
431
+ --tds-page-header-nav-item-color:var(--t-text-color);
432
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
434
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
435
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
436
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
461
437
  }
462
-
463
- @media (prefers-reduced-motion: reduce){
464
-
465
- .tds-checkbox input[type="checkbox"]{
466
- --tds-checkbox-transition-property:none;
467
438
  }
468
- }
439
+ }
469
440
 
470
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
471
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
472
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
473
- --tds-checkbox-input-icon-visibility:visible;
474
- --tds-checkbox-input-icon-opacity:1;
475
- }
441
+ .tds-page-header{
442
+ display:flex;
443
+ flex-direction:column;
444
+ padding-top:var(--tds-page-header-padding-y);
445
+ color:var(--tds-page-header-color);
446
+ background:var(--tds-page-header-background-color);
447
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
448
+ }
476
449
 
477
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
478
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
479
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
480
- }
450
+ .tds-page-header:not(.has-nav){
451
+ padding-bottom:var(--tds-page-header-padding-y);
452
+ }
481
453
 
482
- .tds-checkbox:has(input:checked){
483
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
454
+ .tds-page-header.inactive{
455
+ background:var(--tds-page-header-background-color-inactive);
484
456
  }
485
457
 
486
- .tds-checkbox:has(input:indeterminate){
487
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
458
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
459
+ width:100%;
488
460
  }
489
461
 
490
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
- --tds-checkbox-description-color:var(--t-text-color-status-error);
493
- --tds-checkbox-description-invalid-icon-display:inline-block;
462
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
463
+ display:flex;
464
+ flex-flow:row wrap;
465
+ gap:var(--t-spacing-half) var(--t-spacing-1);
466
+ align-items:flex-start;
467
+ justify-content:flex-start;
468
+ min-width:0;
494
469
  }
495
470
 
496
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
471
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
472
+ display:flex;
473
+ gap:var(--tds-page-header-nav-gap);
474
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
475
+ margin:0 0 -1px;
476
+ overflow:auto;
477
+ list-style:none;
478
+ background:var(--tds-page-header-nav-background);
499
479
  }
500
480
 
501
- :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{
502
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
481
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
482
+ position:relative;
483
+ display:inline-flex;
484
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
485
+ font-size:var(--t-font-size-sm);
486
+ line-height:22px;
487
+ color:var(--tds-page-header-nav-item-color);
488
+ white-space:nowrap;
489
+ text-decoration:none;
490
+ -webkit-appearance:none;
491
+ -moz-appearance:none;
492
+ appearance:none;
493
+ cursor:pointer;
494
+ outline-offset:-2px;
495
+ background-color:var(--tds-page-header-nav-item-background-color);
496
+ background-clip:padding-box;
497
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
498
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
499
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
504
500
  }
505
501
 
506
- :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){
507
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
502
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
503
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
504
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
505
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
506
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
509
507
  }
510
508
 
511
- .tds-checkbox:has(input:required) label::after{
512
- margin-left:.25ch;
513
- color:var(--t-text-color-status-error);
514
- content:"*";
515
- }
509
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
510
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
511
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
512
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
513
+ }
516
514
 
517
- .tds-checkbox:has(input:disabled){
518
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
515
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
516
+ background-color:var(--tds-page-header-nav-item-background-color-active);
517
+ border-color:var(--tds-page-header-nav-item-border-color-active);
518
+ }
520
519
 
521
- --tds-checkbox-label-color:var(--t-form-color-disabled);
522
- --tds-checkbox-description-color:var(--t-form-color-disabled);
523
- --tds-checkbox-cursor:not-allowed;
524
- }
520
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
521
+ color:var(--tds-page-header-nav-item-color-disabled);
522
+ cursor:not-allowed;
523
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
524
+ opacity:1;
525
+ }
525
526
 
526
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
527
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
+ position:relative;
528
529
  }
529
530
 
530
- .tds-checkbox-description{
531
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
532
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
533
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
534
+ }
535
+
536
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
537
+ position:absolute;
538
+ top:-5px;
539
+ right:-2px;
540
+ width:10px;
541
+ height:10px;
542
+ content:"";
543
+ background:var(--tds-page-header-nav-item-indicator-color);
544
+ border-radius:50%;
545
+ }
546
+
547
+ @media (prefers-reduced-motion: no-preference){
548
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
549
+ animation:indicator-pulse 1.25s ease infinite;
550
+ }
551
+ }
552
+
553
+ .tds-page-header__title-bar{
531
554
  display:flex;
532
- grid-area:2 / 2;
533
- gap:var(--t-spacing-half);
555
+ flex-direction:column;
556
+ gap:var(--t-spacing-2) var(--t-spacing-1);
534
557
  align-items:flex-start;
535
- margin:0;
536
- font-size:var(--tds-checkbox-description-font-size);
537
- line-height:var(--tds-checkbox-description-line-height);
538
- color:var(--tds-checkbox-description-color);
539
- cursor:text;
558
+ justify-content:space-between;
559
+ padding:0 var(--tds-page-header-padding-x);
540
560
  }
541
561
 
542
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
- display:var(--tds-checkbox-description-invalid-icon-display);
544
- flex-shrink:0;
545
- margin-top:calc(.5lh - .5em);
546
- line-height:var(--tds-checkbox-description-line-height);
562
+ .tds-page-header--profile > .tds-page-header__title-bar{
563
+ align-items:center;
547
564
  }
548
565
 
549
- .tds-checkbox--sm{
550
- --tds-checkbox-line-height:1.35;
551
- --tds-checkbox-input-size:var(--t-element-size-sm);
552
- --tds-checkbox-font-size:var(--t-font-size-sm);
553
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
- --tds-checkbox-description-line-height:1.3;
566
+ .tds-page-header__primary{
567
+ width:100%;
568
+ }
569
+
570
+ .tds-page-header__primary h1{
571
+ margin:0;
572
+ font-size:var(--tds-page-header-headline-font-size);
573
+ font-weight:var(--t-font-weight-normal);
574
+ line-height:32px;
575
+ color:var(--tds-page-header-headline-color);
576
+ overflow-wrap:break-word;
577
+ }
578
+
579
+ @media (min-width: 960px){
580
+ .tds-page-header__primary{
581
+ flex:1 1 max-content;
582
+ width:auto;
583
+ min-width:0;
584
+ max-width:100%;
585
+ }
586
+
587
+ .tds-page-header__title-bar,
588
+ .tds-page-header--profile .tds-page-header__title-bar{
589
+ flex-flow:row nowrap;
590
+ row-gap:12px;
591
+ align-items:flex-start;
592
+ }
593
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
+ width:auto;
595
+ }
596
+
597
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
+ justify-content:flex-end;
599
+ }
600
+ }
601
+
602
+ .tds-page-header-phone,
603
+ .tds-page-header-email{
604
+ color:var(--tds-page-header-color);
605
+ white-space:nowrap;
606
+ }
607
+
608
+ .tds-page-header-email{
609
+ max-width:100%;
610
+ overflow:hidden;
611
+ text-overflow:ellipsis;
612
+ }
613
+
614
+ @keyframes indicator-pulse{
615
+ 0%{
616
+ opacity:.3;
617
+ transform:scale(.9);
618
+ }
619
+
620
+ 100%{
621
+ opacity:0;
622
+ transform:scale(1.75);
623
+ }
555
624
  }
556
625
 
557
626
 
@@ -577,93 +646,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
577
646
  }
578
647
  }
579
648
 
580
- .tds-radio-group{
581
- --tds-radio-group-font-size:var(--t-font-size-md);
582
- --tds-radio-group-line-height:1.4;
583
- --tds-radio-group-gap:var(--t-spacing-1);
584
-
585
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
586
-
587
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
588
- --tds-radio-group-description-line-height:1.35;
589
- --tds-radio-group-description-color:var(--t-text-color-secondary);
590
- --tds-radio-group-description-invalid-icon-display:none;
591
- display:flex;
592
- flex-direction:column;
593
- gap:var(--tds-radio-group-gap);
594
- padding:0;
595
- margin:0;
596
-
597
- font-size:var(--tds-radio-group-font-size);
598
- line-height:var(--tds-radio-group-line-height);
599
- border:0;
600
- }
601
-
602
- .tds-radio-group legend{
603
- padding:0;
604
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
605
- }
606
-
607
- .tds-radio-group:has(.tds-radio-group-description){
608
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
609
- }
610
-
611
- .tds-radio-group[aria-invalid="true"]{
612
- --tds-radio-group-description-color:var(--t-text-color-status-error);
613
- --tds-radio-group-description-invalid-icon-display:inline-block;
614
- }
615
-
616
- .tds-radio-group[aria-invalid="true"] .tds-radio{
617
- --tds-radio-input-border-color:var(--t-form-border-color-error);
618
- }
619
-
620
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
621
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
622
- --tds-radio-input-background-color:var(--t-form-background-color-error);
623
- }
624
-
625
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
626
- --tds-radio-input-background-color:var(--t-form-background-color);
627
- }
628
-
629
- .tds-radio-group:has(input:required) legend::after{
630
- margin-left:.25ch;
631
- color:var(--t-text-color-status-error);
632
- content:"*";
633
- }
634
-
635
- .tds-radio-group-fields{
636
- display:flex;
637
- flex-direction:column;
638
- gap:var(--tds-radio-group-gap);
639
- align-items:flex-start;
640
- }
641
-
642
- .tds-radio-group-description{
643
- display:flex;
644
- gap:var(--t-spacing-half);
645
- align-items:flex-start;
646
- margin:0;
647
- font-size:var(--tds-radio-group-description-font-size);
648
- line-height:var(--tds-radio-group-description-line-height);
649
- color:var(--tds-radio-group-description-color);
650
- cursor:text;
651
- }
652
-
653
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
654
- display:var(--tds-radio-group-description-invalid-icon-display);
655
- flex-shrink:0;
656
- margin-top:calc(.5lh - .5em);
657
- line-height:var(--tds-radio-group-description-line-height);
658
- }
659
-
660
- .tds-radio-group--sm{
661
- --tds-radio-group-line-height:1.35;
662
- --tds-radio-group-font-size:var(--t-font-size-sm);
663
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
664
- --tds-radio-group-description-line-height:1.3;
665
- }
666
-
667
649
  .tds-radio{
668
650
  --tds-radio-font-size:var(--t-font-size-md);
669
651
  --tds-radio-cursor:pointer;
@@ -796,436 +778,285 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
796
778
  --tds-radio-description-line-height:1.3;
797
779
  }
798
780
 
799
- .tds-select{
800
- --tds-select-border-color:var(--t-form-border-color);
801
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
802
- --tds-select-border-color-active:var(--t-form-border-color-hover);
803
- --tds-select-background-color:var(--t-form-background-color);
804
- --tds-select-color:var(--t-form-color);
805
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
806
- --tds-select-font-size:var(--t-font-size-md);
807
- --tds-select-min-height:var(--t-container-size-md);
808
- --tds-select-padding-block:6px;
809
- --tds-select-description-color:var(--t-text-color-secondary);
810
- --tds-select-description-invalid-icon-display:none;
811
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
812
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
813
- --tds-select-caret-size:1em;
814
- --tds-select-caret-inline-offset:.75em;
815
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
816
-
817
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
818
- --tds-select-dropdown-border:1px solid var(--t-border-color);
819
- --tds-select-dropdown-padding:var(--t-spacing-1);
820
- --tds-select-dropdown-margin-block:5px;
821
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
822
- --tds-select-dropdown-scrollbar-width:thin;
823
- --tds-select-dropdown-border-radius:var(--t-border-radius);
824
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
825
- --tds-select-dropdown-scroll-behavior:smooth;
826
- --tds-select-dropdown-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
827
- --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
828
- --tds-select-dropdown-closed-opacity:0;
829
- --tds-select-dropdown-open-opacity:1;
830
- --tds-select-dropdown-closed-transform:translateY(-8px);
831
- --tds-select-dropdown-open-transform:translateY(0);
781
+ .tds-checkbox{
782
+ --tds-checkbox-font-size:var(--t-font-size-md);
783
+ --tds-checkbox-cursor:pointer;
784
+ --tds-checkbox-line-height:1.4;
785
+ --tds-checkbox-transition-property:background-color, border-color;
832
786
 
833
- --tds-select-option-gap:var(--t-spacing-1);
834
- --tds-select-option-padding-block:var(--t-spacing-1);
835
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
836
- --tds-select-option-font-size:1rem;
837
- --tds-select-option-color:var(--t-text-color);
838
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
839
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
840
- --tds-select-option-border-radius:var(--t-border-radius);
787
+ --tds-checkbox-input-size:var(--t-element-size-md);
788
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
789
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
790
+ --tds-checkbox-input-background-color:transparent;
841
791
 
842
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
843
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
844
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
845
- --tds-select-group-label-font-size:var(--t-font-size-sm);
846
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
847
- --tds-select-group-label-letter-spacing:0;
848
- --tds-select-group-label-color:var(--t-text-color-secondary);
849
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
850
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
851
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
792
+ --tds-checkbox-input-icon:none;
793
+ --tds-checkbox-input-icon-visibility:hidden;
794
+ --tds-checkbox-input-icon-opacity:0;
795
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
796
+
797
+ --tds-checkbox-label-color:var(--t-form-color);
798
+
799
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
800
+ --tds-checkbox-description-line-height:1.35;
801
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
802
+ --tds-checkbox-description-invalid-icon-display:none;
852
803
 
853
804
  position:relative;
854
- display:flex;
855
- flex-direction:column;
856
- gap:var(--t-spacing-half);
805
+ display:inline-grid;
806
+ grid-template-columns:auto;
807
+ grid-auto-columns:1fr;
808
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
809
+ line-height:var(--tds-checkbox-line-height);
810
+ cursor:var(--tds-checkbox-cursor);
811
+ -webkit-user-select:none;
812
+ -moz-user-select:none;
813
+ user-select:none;
857
814
  }
858
815
 
859
- .tds-select :is(label,.tds-select-label){
860
- font-size:var(--t-font-size-md);
816
+ .tds-checkbox label{
817
+ grid-area:1 / 2;
818
+ font-size:var(--tds-checkbox-font-size);
861
819
  font-weight:var(--t-font-weight-normal);
862
- color:var(--t-text-color);
863
- cursor:default;
820
+ color:var(--tds-checkbox-label-color);
821
+ cursor:var(--tds-checkbox-cursor);
864
822
  }
865
823
 
866
- .tds-select :is(select,button){
824
+ .tds-checkbox tds-indeterminate{
825
+ display:flex;
826
+ }
827
+
828
+ .tds-checkbox input[type="checkbox"]{
867
829
  position:relative;
868
- place-items:center;
869
- inline-size:100%;
870
- min-block-size:var(--tds-select-min-height);
871
- padding-block:var(--tds-select-padding-block);
872
- padding-inline:var(--t-spacing-1);
873
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
874
- font-family:inherit;
875
- font-size:var(--tds-select-font-size);
876
- line-height:1;
877
- color:var(--tds-select-color);
878
- text-align:left;
830
+ width:1em;
831
+ height:1em;
832
+ margin:calc((1lh - 1em) / 2) 0 0;
833
+ font-size:var(--tds-checkbox-font-size);
834
+ line-height:inherit;
879
835
  -webkit-appearance:none;
880
836
  -moz-appearance:none;
881
837
  appearance:none;
882
- cursor:var(--tds-select-cursor, default);
883
- outline:var(--t-focus-ring-width) solid transparent;
884
- outline-offset:0;
885
- background-color:var(--tds-select-background-color);
886
- background-image:var(--tds-select-background-image);
887
- background-repeat:no-repeat;
888
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
889
- background-size:var(--tds-select-caret-size);
890
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
891
- border-radius:var(--t-form-border-radius);
838
+ cursor:var(--tds-checkbox-cursor);
839
+ background-color:var(--tds-checkbox-input-background-color);
840
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
841
+ border-radius:var(--tds-checkbox-input-border-radius);
892
842
  transition-timing-function:var(--t-ease-in-out);
893
- transition-duration:var(--t-duration-300);
894
- transition-property:var(--tds-select-transition-property);
843
+ transition-duration:var(--t-duration-200);
844
+ transition-property:var(--tds-checkbox-transition-property);
895
845
  }
896
846
 
897
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
898
- border-color:var(--tds-select-border-color-hover);
847
+ :is(.tds-checkbox input[type="checkbox"])::before{
848
+ position:absolute;
849
+ top:50%;
850
+ left:50%;
851
+ visibility:var(--tds-checkbox-input-icon-visibility);
852
+ width:100%;
853
+ height:100%;
854
+ content:"";
855
+ background-color:var(--tds-checkbox-input-icon-fill);
856
+ border-radius:var(--tds-checkbox-input-border-radius);
857
+ opacity:var(--tds-checkbox-input-icon-opacity);
858
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
859
+ mask-image:var(--tds-checkbox-input-icon);
860
+ -webkit-mask-repeat:no-repeat;
861
+ mask-repeat:no-repeat;
862
+ -webkit-mask-size:contain;
863
+ mask-size:contain;
864
+ transform:translate(-50%, -50%);
899
865
  }
900
866
 
901
- :is(.tds-select :is(select,button)):focus{
902
- outline-color:var(--t-focus-ring-color);
903
- outline-offset:var(--t-focus-ring-offset);
904
- border-color:var(--tds-select-border-color-active);
867
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
868
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
869
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
905
870
  }
906
871
 
907
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
908
- color:var(--tds-select-placeholder-color);
872
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
873
+ outline:var(--t-focus-ring-outline);
874
+ outline-offset:var(--t-focus-ring-offset);
909
875
  }
910
876
 
911
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
912
- --tds-select-border-color:var(--t-form-border-color-error);
913
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
914
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
915
- --tds-select-background-color:var(--t-form-background-color-error);
916
- --tds-select-description-color:var(--t-text-color-status-error);
917
- --tds-select-description-invalid-icon-display:inline-block;
918
- }
919
-
920
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
921
- margin-left:.25ch;
922
- color:var(--t-text-color-status-error);
923
- content:"*";
877
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
878
+ pointer-events:none;
924
879
  }
925
880
 
926
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
927
- --tds-select-border-color:var(--t-form-border-color-disabled);
928
- --tds-select-background-color:var(--t-form-background-color-disabled);
929
- --tds-select-color:var(--t-form-color-disabled);
930
- --tds-select-cursor:not-allowed;
881
+ @media (prefers-reduced-motion: reduce){
882
+
883
+ .tds-checkbox input[type="checkbox"]{
884
+ --tds-checkbox-transition-property:none;
931
885
  }
886
+ }
932
887
 
933
- .tds-select:has( > [popover]:popover-open) > button{
934
- border-color:var(--tds-select-border-color-active);
888
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
889
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
890
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
891
+ --tds-checkbox-input-icon-visibility:visible;
892
+ --tds-checkbox-input-icon-opacity:1;
935
893
  }
936
894
 
937
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
938
- transform:rotate(.5turn);
895
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
896
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
897
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
939
898
  }
940
899
 
941
- .tds-select :is(hr,li[role="separator"]){
942
- margin-block:var(--t-spacing-half);
943
- color:var(--tds-select-border-color);
944
- border:0;
945
- border-top:1px solid;
900
+ .tds-checkbox:has(input:checked){
901
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
946
902
  }
947
903
 
948
- .tds-select :is(li[role="option"],option:not([hidden])){
949
- display:block;
950
- padding-block:var(--tds-select-option-padding-block);
951
- padding-inline:var(--tds-select-option-padding-inline);
952
- overflow:hidden;
953
- text-overflow:ellipsis;
954
- font-size:var(--tds-select-option-font-size);
955
- color:var(--tds-select-option-color);
956
- white-space:nowrap;
957
- cursor:default;
958
- border-radius:var(--tds-select-option-border-radius);
904
+ .tds-checkbox:has(input:indeterminate){
905
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
959
906
  }
960
907
 
961
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
962
- outline:none;
963
- }
908
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
909
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
910
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
911
+ --tds-checkbox-description-invalid-icon-display:inline-block;
912
+ }
964
913
 
965
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
966
- background:var(--tds-select-option-background-hover);
914
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
915
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
916
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
967
917
  }
968
918
 
969
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
970
- background:var(--tds-select-option-background-active);
919
+ :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{
920
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
921
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
971
922
  }
972
923
 
973
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
974
- color:var(--t-form-color-disabled);
975
- cursor:not-allowed;
924
+ :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){
925
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
926
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
927
+ }
928
+
929
+ .tds-checkbox:has(input:required) label::after{
930
+ margin-left:.25ch;
931
+ color:var(--t-text-color-status-error);
932
+ content:"*";
976
933
  }
977
934
 
978
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
979
- background:transparent;
980
- }
935
+ .tds-checkbox:has(input:disabled){
936
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
937
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
981
938
 
982
- .tds-select :is(li[role="presentation"],legend){
983
- position:sticky;
984
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
985
- z-index:1;
986
- float:inline-start;
987
- inline-size:100%;
988
- padding-block:var(--tds-select-group-label-padding-block);
989
- padding-inline:var(--tds-select-group-label-padding-inline);
990
- container-type:scroll-state;
991
- font-size:var(--tds-select-group-label-font-size);
992
- font-weight:var(--tds-select-group-label-font-weight);
993
- letter-spacing:var(--tds-select-group-label-letter-spacing);
994
- background:var(--tds-select-group-label-background);
995
- text-box:trim-both cap alphabetic;
939
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
940
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
941
+ --tds-checkbox-cursor:not-allowed;
996
942
  }
997
943
 
998
- :is(.tds-select :is(li[role="presentation"],legend)) span{
999
- display:inline-flex;
1000
- gap:var(--t-spacing-half);
1001
- align-items:center;
1002
- color:var(--tds-select-group-label-color);
1003
- transition:var(--tds-select-group-label-transition);
944
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
945
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1004
946
  }
1005
947
 
1006
- @container scroll-state(stuck){
1007
-
1008
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1009
- color:var(--tds-select-group-label-color-stuck);
1010
- }
948
+ .tds-checkbox-description{
949
+ display:flex;
950
+ grid-area:2 / 2;
951
+ gap:var(--t-spacing-half);
952
+ align-items:flex-start;
953
+ margin:0;
954
+ font-size:var(--tds-checkbox-description-font-size);
955
+ line-height:var(--tds-checkbox-description-line-height);
956
+ color:var(--tds-checkbox-description-color);
957
+ cursor:text;
958
+ }
1011
959
 
1012
- @media (forced-colors: active){
960
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
961
+ display:var(--tds-checkbox-description-invalid-icon-display);
962
+ flex-shrink:0;
963
+ margin-top:calc(.5lh - .5em);
964
+ line-height:var(--tds-checkbox-description-line-height);
965
+ }
1013
966
 
1014
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1015
- color:var(--tds-select-group-label-color-stuck);
1016
- }
1017
- }
1018
- }
1019
-
1020
- .tds-select.tds-select--lg{
1021
- --tds-select-min-height:var(--t-container-size-lg);
1022
- --tds-select-font-size:var(--t-font-size-lg);
1023
- }
1024
-
1025
- @media (prefers-reduced-motion: reduce){
1026
-
1027
- .tds-select{
1028
- --tds-select-transition-property:none;
1029
- --tds-select-dropdown-transition-enter:none;
1030
- --tds-select-dropdown-transition-exit:none;
1031
- --tds-select-dropdown-scroll-behavior:auto;
1032
- --tds-select-dropdown-closed-transform:none;
1033
- --tds-select-dropdown-open-transform:none;
1034
- --tds-select-caret-transition:none;
967
+ .tds-checkbox--sm{
968
+ --tds-checkbox-line-height:1.35;
969
+ --tds-checkbox-input-size:var(--t-element-size-sm);
970
+ --tds-checkbox-font-size:var(--t-font-size-sm);
971
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
972
+ --tds-checkbox-description-line-height:1.3;
1035
973
  }
1036
- }
1037
974
 
1038
- .tds-select-description{
1039
- display:flex;
1040
- gap:var(--t-spacing-half);
1041
- align-items:flex-start;
1042
- margin:0;
1043
- font-size:var(--t-font-size-sm);
1044
- line-height:1.35;
1045
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1046
- cursor:text;
1047
- }
975
+ .tds-radio-group{
976
+ --tds-radio-group-font-size:var(--t-font-size-md);
977
+ --tds-radio-group-line-height:1.4;
978
+ --tds-radio-group-gap:var(--t-spacing-1);
1048
979
 
1049
- .tds-select-description .tds-select-description-invalid-icon{
1050
- display:var(--tds-select-description-invalid-icon-display, none);
1051
- flex-shrink:0;
1052
- margin-block-start:calc(.5lh - .5em);
1053
- line-height:1.35;
1054
- }
980
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1055
981
 
1056
- .tds-select > .tds-select-hidden-select{
1057
- position:absolute;
1058
- inline-size:1px;
1059
- block-size:1px;
982
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
983
+ --tds-radio-group-description-line-height:1.35;
984
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
985
+ --tds-radio-group-description-invalid-icon-display:none;
986
+ display:flex;
987
+ flex-direction:column;
988
+ gap:var(--tds-radio-group-gap);
1060
989
  padding:0;
1061
990
  margin:0;
1062
- pointer-events:none;
1063
- opacity:0;
991
+
992
+ font-size:var(--tds-radio-group-font-size);
993
+ line-height:var(--tds-radio-group-line-height);
994
+ border:0;
1064
995
  }
1065
996
 
1066
- .tds-select:has( > button) > button{
1067
- display:block;
1068
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1069
- overflow:hidden;
1070
- text-overflow:ellipsis;
1071
- color:var(--tds-select-placeholder-color);
1072
- white-space:nowrap;
1073
- background-image:none;
1074
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1075
- -webkit-tap-highlight-color:transparent;
997
+ .tds-radio-group legend{
998
+ padding:0;
999
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1076
1000
  }
1077
1001
 
1078
- :is(.tds-select:has( > button) > button)::after{
1079
- position:absolute;
1080
- inset-block:0;
1081
- inset-inline-end:var(--tds-select-caret-inline-offset);
1082
- width:var(--tds-select-caret-size);
1083
- height:var(--tds-select-caret-size);
1084
- margin-block:auto;
1085
- pointer-events:none;
1086
- content:var(--tds-select-background-image);
1087
- transform:rotate(0);
1088
- transition:var(--tds-select-caret-transition);
1089
- }
1090
-
1091
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1092
- color:var(--tds-select-color);
1002
+ .tds-radio-group:has(.tds-radio-group-description){
1003
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1093
1004
  }
1094
1005
 
1095
- .tds-select:has( > button) [popover]{
1096
- inset:auto;
1097
- inline-size:-moz-max-content;
1098
- inline-size:max-content;
1099
- min-inline-size:anchor-size(width);
1100
- max-inline-size:100vi;
1101
- max-block-size:min(50vh, 20rem);
1102
- padding:var(--tds-select-dropdown-padding);
1103
- margin-block:var(--tds-select-dropdown-margin-block);
1104
- position-area:block-end span-inline-start;
1105
- position-try-fallbacks:flip-block, flip-inline;
1106
- overflow:auto;
1107
- overflow-x:hidden;
1108
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1109
- -webkit-user-select:none;
1110
- -moz-user-select:none;
1111
- user-select:none;
1112
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1113
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1114
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1115
- background:var(--tds-select-dropdown-background-color);
1116
- border:var(--tds-select-dropdown-border);
1117
- border-radius:var(--tds-select-dropdown-border-radius);
1118
- box-shadow:var(--tds-select-dropdown-box-shadow);
1119
- opacity:var(--tds-select-dropdown-open-opacity);
1120
- transform:var(--tds-select-dropdown-open-transform);
1121
- transition:var(--tds-select-dropdown-transition-enter);
1006
+ .tds-radio-group[aria-invalid="true"]{
1007
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1008
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1122
1009
  }
1123
1010
 
1124
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1125
- opacity:var(--tds-select-dropdown-closed-opacity);
1126
- transform:var(--tds-select-dropdown-closed-transform);
1127
- transition:var(--tds-select-dropdown-transition-exit);
1128
- }
1129
-
1130
- :is(.tds-select:has( > button) [popover]) ul{
1131
- padding:0;
1132
- margin:0;
1133
- list-style:none;
1011
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1012
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1134
1013
  }
1135
1014
 
1136
- @starting-style{
1137
- :is(.tds-select:has( > button) [popover]):popover-open{
1138
- opacity:var(--tds-select-dropdown-closed-opacity);
1139
- transform:var(--tds-select-dropdown-closed-transform);
1015
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1016
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1017
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1140
1018
  }
1141
- }
1142
1019
 
1143
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1144
- .tds-select select:has(> button){
1145
- padding-inline-end:0;
1146
- background-image:none;
1147
- }
1148
- @media (hover) and (pointer: fine){
1149
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1150
- padding-block:0;
1151
- -webkit-appearance:base-select;
1152
- -moz-appearance:base-select;
1153
- appearance:base-select;
1020
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1021
+ --tds-radio-input-background-color:var(--t-form-background-color);
1154
1022
  }
1155
- }
1156
- :is(.tds-select select:has( > button))::picker-icon{
1157
- flex-shrink:0;
1158
- width:var(--tds-select-caret-size);
1159
- height:var(--tds-select-caret-size);
1160
- margin-inline-end:var(--tds-select-caret-inline-offset);
1161
- content:var(--tds-select-background-image);
1162
- transition:var(--tds-select-caret-transition);
1163
- }
1164
-
1165
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1166
- opacity:var(--tds-select-dropdown-closed-opacity);
1167
- transform:var(--tds-select-dropdown-closed-transform);
1168
- transition:var(--tds-select-dropdown-transition-exit);
1169
- }
1170
-
1171
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1172
- outline-color:var(--t-focus-ring-color);
1173
- outline-offset:var(--t-focus-ring-offset);
1174
- border-color:var(--tds-select-border-color-active);
1175
- }
1176
-
1177
- :is(.tds-select select:has( > button)):open::picker-icon{
1178
- opacity:1;
1179
- transform:rotate(.5turn);
1180
- }
1181
1023
 
1182
- :is(.tds-select select:has( > button)) selectedcontent{
1183
- overflow:hidden;
1184
- text-overflow:ellipsis;
1185
- line-height:calc(var(--tds-select-min-height) - 2px);
1186
- white-space:nowrap;
1024
+ .tds-radio-group:has(input:required) legend::after{
1025
+ margin-left:.25ch;
1026
+ color:var(--t-text-color-status-error);
1027
+ content:"*";
1187
1028
  }
1188
1029
 
1189
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1190
- color:var(--tds-select-placeholder-color);
1191
- }
1030
+ .tds-radio-group-fields{
1031
+ display:flex;
1032
+ flex-direction:column;
1033
+ gap:var(--tds-radio-group-gap);
1034
+ align-items:flex-start;
1035
+ }
1192
1036
 
1193
- :is(.tds-select select:has( > button))::picker(select){
1194
- inset:auto;
1195
- inline-size:-moz-max-content;
1196
- inline-size:max-content;
1197
- min-inline-size:anchor-size(width);
1198
- max-inline-size:100vi;
1199
- padding:var(--tds-select-dropdown-padding);
1200
- margin-block:var(--tds-select-dropdown-margin-block);
1201
- position-try-fallbacks:flip-block, flip-inline;
1202
- overflow:auto;
1203
- overflow-x:hidden;
1204
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1205
- -webkit-user-select:none;
1206
- -moz-user-select:none;
1207
- user-select:none;
1208
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1209
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1210
- background:var(--tds-select-dropdown-background-color);
1211
- border:var(--tds-select-dropdown-border);
1212
- border-radius:var(--tds-select-dropdown-border-radius);
1213
- box-shadow:var(--tds-select-dropdown-box-shadow);
1214
- opacity:var(--tds-select-dropdown-open-opacity);
1215
- transform:var(--tds-select-dropdown-open-transform);
1216
- transition:var(--tds-select-dropdown-transition-enter);
1217
- }
1037
+ .tds-radio-group-description{
1038
+ display:flex;
1039
+ gap:var(--t-spacing-half);
1040
+ align-items:flex-start;
1041
+ margin:0;
1042
+ font-size:var(--tds-radio-group-description-font-size);
1043
+ line-height:var(--tds-radio-group-description-line-height);
1044
+ color:var(--tds-radio-group-description-color);
1045
+ cursor:text;
1046
+ }
1218
1047
 
1219
- :is(.tds-select select:has( > button)) option::checkmark{
1220
- display:none;
1221
- }
1048
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1049
+ display:var(--tds-radio-group-description-invalid-icon-display);
1050
+ flex-shrink:0;
1051
+ margin-top:calc(.5lh - .5em);
1052
+ line-height:var(--tds-radio-group-description-line-height);
1053
+ }
1222
1054
 
1223
- @starting-style{
1224
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1225
- opacity:var(--tds-select-dropdown-closed-opacity);
1226
- transform:var(--tds-select-dropdown-closed-transform);
1227
- }
1228
- }
1055
+ .tds-radio-group--sm{
1056
+ --tds-radio-group-line-height:1.35;
1057
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1058
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1059
+ --tds-radio-group-description-line-height:1.3;
1229
1060
  }
1230
1061
 
1231
1062
  .tds-toggle-switch{
@@ -1369,373 +1200,542 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1369
1200
  --tds-toggle-switch-display:inline-flex;
1370
1201
  }
1371
1202
 
1372
- @layer t-critical{
1373
- tds-page-header:not(.hydrated){
1374
- display:none;
1203
+ .tds-input:has(textarea){
1204
+ --tds-input-padding-block:6px;
1205
+ --tds-input-resizer-size:var(--t-element-size-sm);
1206
+ --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");
1207
+ }
1208
+
1209
+ @supports (x: attr(x type(*))){
1210
+
1211
+ .tds-input:has(textarea){
1212
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1213
+ }
1375
1214
  }
1215
+
1216
+ .tds-input.tds-textarea--resize-vertical textarea{
1217
+ resize:vertical;
1218
+ }
1219
+
1220
+ .tds-input.tds-textarea--resize-none textarea{
1221
+ resize:none;
1222
+ }
1223
+
1224
+ .tds-input.tds-textarea--resize-auto textarea{
1225
+ resize:vertical;
1226
+ }
1227
+
1228
+ @supports (field-sizing: content){
1229
+ .tds-input.tds-textarea--resize-auto textarea{
1230
+ field-sizing:content;
1231
+ resize:none;
1232
+ }
1233
+ }
1234
+
1235
+ .tds-input textarea{
1236
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1237
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1238
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1239
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1240
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1241
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1242
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1243
+ --tds-input-scrollbar-thumb-border-radius:999px;
1244
+ --tds-input-scrollbar-thumb-border-width:3px;
1245
+ --tds-input-scrollbar-track-margin-block:.125rem;
1246
+ scrollbar-color:initial;
1247
+ transition-timing-function:var(--t-ease-in-out);
1248
+ transition-duration:var(--t-duration-200);
1249
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1376
1250
  }
1377
1251
 
1378
- @layer t-component{
1379
- .tds-page-header{
1380
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1381
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1382
- --tds-page-header-color:var(--t-text-color);
1383
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1384
- --tds-page-header-headline-color:var(--t-text-color-headline);
1385
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1386
- --tds-page-header-padding-x:var(--t-spacing-2);
1387
- --tds-page-header-padding-y:var(--t-spacing-2);
1388
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1389
- --tds-page-header-nav-gap:var(--t-spacing-1);
1390
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1391
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1392
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1393
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1394
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1395
- --tds-page-header-nav-item-border-width:1px;
1252
+ @media (pointer: fine){
1253
+ :is(.tds-input textarea)::-webkit-scrollbar{
1254
+ width:12px;
1255
+ height:12px;
1256
+ cursor:default;
1257
+ }
1396
1258
 
1397
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1398
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1259
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1260
+ cursor:default;
1261
+ background:var(--tds-input-scrollbar-thumb-color);
1262
+ background-clip:content-box;
1263
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1264
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1265
+ }
1399
1266
 
1400
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1401
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1402
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1267
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1268
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1269
+ }
1403
1270
 
1404
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1405
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1271
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1272
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1273
+ }
1406
1274
 
1407
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1408
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1409
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1275
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1276
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1277
+ }
1410
1278
 
1411
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1412
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1413
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1414
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1415
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1416
- }
1279
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1280
+ background:var(--tds-input-scrollbar-surface-color);
1281
+ }
1417
1282
 
1418
- .tds-page-header--profile{
1419
- --tds-page-header-padding-y:20px;
1420
- }
1283
+ :is(.tds-input textarea)::-webkit-resizer{
1284
+ background:var(--tds-input-resizer-icon) no-repeat;
1285
+ background-position:right bottom;
1286
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1287
+ }
1421
1288
 
1422
- @supports (color: light-dark(#fff, #000)){
1423
- .tds-page-header{
1424
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1425
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1289
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1290
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1291
+ cursor:default;
1426
1292
  }
1427
- }
1428
1293
 
1429
- @media (min-width: 600px){
1430
- .tds-page-header{
1431
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1432
- --tds-page-header-color:var(--t-text-color-secondary);
1433
- --tds-page-header-bottom-border-color:var(--t-border-color);
1434
- --tds-page-header-padding-x:var(--t-spacing-3);
1435
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1436
- --tds-page-header-nav-gap:var(--t-spacing-half);
1437
- --tds-page-header-nav-background:transparent;
1438
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1439
- --tds-page-header-nav-item-border-width:1px;
1440
- --tds-page-header-nav-item-color:var(--t-text-color);
1441
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1442
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1443
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1444
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1445
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1294
+ @supports (-moz-appearance: none){
1295
+ :is(.tds-input textarea){
1296
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1297
+ scrollbar-width:thin;
1298
+ }
1299
+
1300
+ @media (hover){
1301
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1302
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1303
+ }
1304
+ }
1446
1305
  }
1447
1306
  }
1448
- }
1449
1307
 
1450
- .tds-page-header{
1308
+ .tds-select{
1309
+ --tds-select-border-color:var(--t-form-border-color);
1310
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1311
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1312
+ --tds-select-background-color:var(--t-form-background-color);
1313
+ --tds-select-color:var(--t-form-color);
1314
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1315
+ --tds-select-font-size:var(--t-font-size-md);
1316
+ --tds-select-min-height:var(--t-container-size-md);
1317
+ --tds-select-padding-block:6px;
1318
+ --tds-select-description-color:var(--t-text-color-secondary);
1319
+ --tds-select-description-invalid-icon-display:none;
1320
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1321
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1322
+ --tds-select-caret-size:1em;
1323
+ --tds-select-caret-inline-offset:.75em;
1324
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1325
+
1326
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1327
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1328
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1329
+ --tds-select-dropdown-margin-block:5px;
1330
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1331
+ --tds-select-dropdown-scrollbar-width:thin;
1332
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1333
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1334
+ --tds-select-dropdown-scroll-behavior:smooth;
1335
+ --tds-select-dropdown-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1336
+ --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1337
+ --tds-select-dropdown-closed-opacity:0;
1338
+ --tds-select-dropdown-open-opacity:1;
1339
+ --tds-select-dropdown-closed-transform:translateY(-8px);
1340
+ --tds-select-dropdown-open-transform:translateY(0);
1341
+
1342
+ --tds-select-option-gap:var(--t-spacing-1);
1343
+ --tds-select-option-padding-block:var(--t-spacing-1);
1344
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1345
+ --tds-select-option-font-size:1rem;
1346
+ --tds-select-option-color:var(--t-text-color);
1347
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1348
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1349
+ --tds-select-option-border-radius:var(--t-border-radius);
1350
+
1351
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1352
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1353
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1354
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1355
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1356
+ --tds-select-group-label-letter-spacing:0;
1357
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1358
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1359
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1360
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1361
+
1362
+ position:relative;
1451
1363
  display:flex;
1452
1364
  flex-direction:column;
1453
- padding-top:var(--tds-page-header-padding-y);
1454
- color:var(--tds-page-header-color);
1455
- background:var(--tds-page-header-background-color);
1456
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1365
+ gap:var(--t-spacing-half);
1457
1366
  }
1458
1367
 
1459
- .tds-page-header:not(.has-nav){
1460
- padding-bottom:var(--tds-page-header-padding-y);
1368
+ .tds-select :is(label,.tds-select-label){
1369
+ font-size:var(--t-font-size-md);
1370
+ font-weight:var(--t-font-weight-normal);
1371
+ color:var(--t-text-color);
1372
+ cursor:default;
1461
1373
  }
1462
1374
 
1463
- .tds-page-header.inactive{
1464
- background:var(--tds-page-header-background-color-inactive);
1375
+ .tds-select :is(select,button){
1376
+ position:relative;
1377
+ place-items:center;
1378
+ inline-size:100%;
1379
+ min-block-size:var(--tds-select-min-height);
1380
+ padding-block:var(--tds-select-padding-block);
1381
+ padding-inline:var(--t-spacing-1);
1382
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1383
+ font-family:inherit;
1384
+ font-size:var(--tds-select-font-size);
1385
+ line-height:1;
1386
+ color:var(--tds-select-color);
1387
+ text-align:left;
1388
+ -webkit-appearance:none;
1389
+ -moz-appearance:none;
1390
+ appearance:none;
1391
+ cursor:var(--tds-select-cursor, default);
1392
+ outline:var(--t-focus-ring-width) solid transparent;
1393
+ outline-offset:0;
1394
+ background-color:var(--tds-select-background-color);
1395
+ background-image:var(--tds-select-background-image);
1396
+ background-repeat:no-repeat;
1397
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1398
+ background-size:var(--tds-select-caret-size);
1399
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1400
+ border-radius:var(--t-form-border-radius);
1401
+ transition-timing-function:var(--t-ease-in-out);
1402
+ transition-duration:var(--t-duration-300);
1403
+ transition-property:var(--tds-select-transition-property);
1465
1404
  }
1466
1405
 
1467
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1468
- width:100%;
1469
- }
1406
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1407
+ border-color:var(--tds-select-border-color-hover);
1408
+ }
1470
1409
 
1471
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1472
- display:flex;
1473
- flex-flow:row wrap;
1474
- gap:var(--t-spacing-half) var(--t-spacing-1);
1475
- align-items:flex-start;
1476
- justify-content:flex-start;
1477
- min-width:0;
1478
- }
1410
+ :is(.tds-select :is(select,button)):focus{
1411
+ outline-color:var(--t-focus-ring-color);
1412
+ outline-offset:var(--t-focus-ring-offset);
1413
+ border-color:var(--tds-select-border-color-active);
1414
+ }
1479
1415
 
1480
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1481
- display:flex;
1482
- gap:var(--tds-page-header-nav-gap);
1483
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1484
- margin:0 0 -1px;
1485
- overflow:auto;
1486
- list-style:none;
1487
- background:var(--tds-page-header-nav-background);
1416
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1417
+ color:var(--tds-select-placeholder-color);
1488
1418
  }
1489
1419
 
1490
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1491
- position:relative;
1492
- display:inline-flex;
1493
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1494
- font-size:var(--t-font-size-sm);
1495
- line-height:22px;
1496
- color:var(--tds-page-header-nav-item-color);
1497
- white-space:nowrap;
1498
- text-decoration:none;
1499
- -webkit-appearance:none;
1500
- -moz-appearance:none;
1501
- appearance:none;
1502
- cursor:pointer;
1503
- outline-offset:-2px;
1504
- background-color:var(--tds-page-header-nav-item-background-color);
1505
- background-clip:padding-box;
1506
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1507
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1508
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1420
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1421
+ --tds-select-border-color:var(--t-form-border-color-error);
1422
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1423
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1424
+ --tds-select-background-color:var(--t-form-background-color-error);
1425
+ --tds-select-description-color:var(--t-text-color-status-error);
1426
+ --tds-select-description-invalid-icon-display:inline-block;
1427
+ }
1428
+
1429
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1430
+ margin-left:.25ch;
1431
+ color:var(--t-text-color-status-error);
1432
+ content:"*";
1509
1433
  }
1510
1434
 
1511
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1512
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1513
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1514
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1515
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1516
- }
1435
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1436
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1437
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1438
+ --tds-select-color:var(--t-form-color-disabled);
1439
+ --tds-select-cursor:not-allowed;
1440
+ }
1517
1441
 
1518
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1519
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1520
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1521
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1522
- }
1442
+ .tds-select:has( > [popover]:popover-open) > button{
1443
+ border-color:var(--tds-select-border-color-active);
1444
+ }
1445
+
1446
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1447
+ transform:rotate(.5turn);
1448
+ }
1449
+
1450
+ .tds-select :is(hr,li[role="separator"]){
1451
+ margin-block:var(--t-spacing-half);
1452
+ color:var(--tds-select-border-color);
1453
+ border:0;
1454
+ border-top:1px solid;
1455
+ }
1523
1456
 
1524
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1525
- background-color:var(--tds-page-header-nav-item-background-color-active);
1526
- border-color:var(--tds-page-header-nav-item-border-color-active);
1527
- }
1457
+ .tds-select :is(li[role="option"],option:not([hidden])){
1458
+ display:block;
1459
+ padding-block:var(--tds-select-option-padding-block);
1460
+ padding-inline:var(--tds-select-option-padding-inline);
1461
+ overflow:hidden;
1462
+ text-overflow:ellipsis;
1463
+ font-size:var(--tds-select-option-font-size);
1464
+ color:var(--tds-select-option-color);
1465
+ white-space:nowrap;
1466
+ cursor:default;
1467
+ border-radius:var(--tds-select-option-border-radius);
1468
+ }
1528
1469
 
1529
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1530
- color:var(--tds-page-header-nav-item-color-disabled);
1531
- cursor:not-allowed;
1532
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1533
- opacity:1;
1534
- }
1470
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1471
+ outline:none;
1472
+ }
1535
1473
 
1536
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1537
- position:relative;
1474
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1475
+ background:var(--tds-select-option-background-hover);
1538
1476
  }
1539
1477
 
1540
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1541
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1542
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1543
- }
1478
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1479
+ background:var(--tds-select-option-background-active);
1480
+ }
1544
1481
 
1545
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1546
- position:absolute;
1547
- top:-5px;
1548
- right:-2px;
1549
- width:10px;
1550
- height:10px;
1551
- content:"";
1552
- background:var(--tds-page-header-nav-item-indicator-color);
1553
- border-radius:50%;
1554
- }
1482
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1483
+ color:var(--t-form-color-disabled);
1484
+ cursor:not-allowed;
1485
+ }
1555
1486
 
1556
- @media (prefers-reduced-motion: no-preference){
1557
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1558
- animation:indicator-pulse 1.25s ease infinite;
1559
- }
1487
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1488
+ background:transparent;
1560
1489
  }
1561
1490
 
1562
- .tds-page-header__title-bar{
1563
- display:flex;
1564
- flex-direction:column;
1565
- gap:var(--t-spacing-2) var(--t-spacing-1);
1566
- align-items:flex-start;
1567
- justify-content:space-between;
1568
- padding:0 var(--tds-page-header-padding-x);
1569
- }
1570
-
1571
- .tds-page-header--profile > .tds-page-header__title-bar{
1572
- align-items:center;
1491
+ .tds-select :is(li[role="presentation"],legend){
1492
+ position:sticky;
1493
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1494
+ z-index:1;
1495
+ float:inline-start;
1496
+ inline-size:100%;
1497
+ padding-block:var(--tds-select-group-label-padding-block);
1498
+ padding-inline:var(--tds-select-group-label-padding-inline);
1499
+ container-type:scroll-state;
1500
+ font-size:var(--tds-select-group-label-font-size);
1501
+ font-weight:var(--tds-select-group-label-font-weight);
1502
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1503
+ background:var(--tds-select-group-label-background);
1504
+ text-box:trim-both cap alphabetic;
1573
1505
  }
1574
1506
 
1575
- .tds-page-header__primary{
1576
- width:100%;
1577
- }
1578
-
1579
- .tds-page-header__primary h1{
1580
- margin:0;
1581
- font-size:var(--tds-page-header-headline-font-size);
1582
- font-weight:var(--t-font-weight-normal);
1583
- line-height:32px;
1584
- color:var(--tds-page-header-headline-color);
1585
- overflow-wrap:break-word;
1586
- }
1507
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1508
+ display:inline-flex;
1509
+ gap:var(--t-spacing-half);
1510
+ align-items:center;
1511
+ color:var(--tds-select-group-label-color);
1512
+ transition:var(--tds-select-group-label-transition);
1513
+ }
1587
1514
 
1588
- @media (min-width: 960px){
1589
- .tds-page-header__primary{
1590
- flex:1 1 max-content;
1591
- width:auto;
1592
- min-width:0;
1593
- max-width:100%;
1594
- }
1515
+ @container scroll-state(stuck){
1595
1516
 
1596
- .tds-page-header__title-bar,
1597
- .tds-page-header--profile .tds-page-header__title-bar{
1598
- flex-flow:row nowrap;
1599
- row-gap:12px;
1600
- align-items:flex-start;
1601
- }
1602
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1603
- width:auto;
1517
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1518
+ color:var(--tds-select-group-label-color-stuck);
1604
1519
  }
1605
1520
 
1606
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1607
- justify-content:flex-end;
1521
+ @media (forced-colors: active){
1522
+
1523
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1524
+ color:var(--tds-select-group-label-color-stuck);
1608
1525
  }
1609
- }
1526
+ }
1527
+ }
1610
1528
 
1611
- .tds-page-header-phone,
1612
- .tds-page-header-email{
1613
- color:var(--tds-page-header-color);
1614
- white-space:nowrap;
1529
+ .tds-select.tds-select--lg{
1530
+ --tds-select-min-height:var(--t-container-size-lg);
1531
+ --tds-select-font-size:var(--t-font-size-lg);
1532
+ }
1533
+
1534
+ @media (prefers-reduced-motion: reduce){
1535
+
1536
+ .tds-select{
1537
+ --tds-select-transition-property:none;
1538
+ --tds-select-dropdown-transition-enter:none;
1539
+ --tds-select-dropdown-transition-exit:none;
1540
+ --tds-select-dropdown-scroll-behavior:auto;
1541
+ --tds-select-dropdown-closed-transform:none;
1542
+ --tds-select-dropdown-open-transform:none;
1543
+ --tds-select-caret-transition:none;
1615
1544
  }
1545
+ }
1616
1546
 
1617
- .tds-page-header-email{
1618
- max-width:100%;
1619
- overflow:hidden;
1620
- text-overflow:ellipsis;
1547
+ .tds-select-description{
1548
+ display:flex;
1549
+ gap:var(--t-spacing-half);
1550
+ align-items:flex-start;
1551
+ margin:0;
1552
+ font-size:var(--t-font-size-sm);
1553
+ line-height:1.35;
1554
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1555
+ cursor:text;
1621
1556
  }
1622
1557
 
1623
- @keyframes indicator-pulse{
1624
- 0%{
1625
- opacity:.3;
1626
- transform:scale(.9);
1558
+ .tds-select-description .tds-select-description-invalid-icon{
1559
+ display:var(--tds-select-description-invalid-icon-display, none);
1560
+ flex-shrink:0;
1561
+ margin-block-start:calc(.5lh - .5em);
1562
+ line-height:1.35;
1627
1563
  }
1628
1564
 
1629
- 100%{
1630
- opacity:0;
1631
- transform:scale(1.75);
1632
- }
1565
+ .tds-select > .tds-select-hidden-select{
1566
+ position:absolute;
1567
+ inline-size:1px;
1568
+ block-size:1px;
1569
+ padding:0;
1570
+ margin:0;
1571
+ pointer-events:none;
1572
+ opacity:0;
1633
1573
  }
1634
1574
 
1635
- .tds-input:has(textarea){
1636
- --tds-input-padding-block:6px;
1637
- --tds-input-resizer-size:var(--t-element-size-sm);
1638
- --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");
1639
- }
1575
+ .tds-select:has( > button) > button{
1576
+ display:block;
1577
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1578
+ overflow:hidden;
1579
+ text-overflow:ellipsis;
1580
+ color:var(--tds-select-placeholder-color);
1581
+ white-space:nowrap;
1582
+ background-image:none;
1583
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1584
+ -webkit-tap-highlight-color:transparent;
1585
+ }
1640
1586
 
1641
- @supports (x: attr(x type(*))){
1587
+ :is(.tds-select:has( > button) > button)::after{
1588
+ position:absolute;
1589
+ inset-block:0;
1590
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1591
+ width:var(--tds-select-caret-size);
1592
+ height:var(--tds-select-caret-size);
1593
+ margin-block:auto;
1594
+ pointer-events:none;
1595
+ content:var(--tds-select-background-image);
1596
+ transform:rotate(0);
1597
+ transition:var(--tds-select-caret-transition);
1598
+ }
1642
1599
 
1643
- .tds-input:has(textarea){
1644
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1645
- }
1600
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1601
+ color:var(--tds-select-color);
1646
1602
  }
1647
1603
 
1648
- .tds-input.tds-textarea--resize-vertical textarea{
1649
- resize:vertical;
1604
+ .tds-select:has( > button) [popover]{
1605
+ inset:auto;
1606
+ inline-size:-moz-max-content;
1607
+ inline-size:max-content;
1608
+ min-inline-size:anchor-size(width);
1609
+ max-inline-size:100vi;
1610
+ max-block-size:min(50vh, 20rem);
1611
+ padding:var(--tds-select-dropdown-padding);
1612
+ margin-block:var(--tds-select-dropdown-margin-block);
1613
+ position-area:block-end span-inline-start;
1614
+ position-try-fallbacks:flip-block, flip-inline;
1615
+ overflow:auto;
1616
+ overflow-x:hidden;
1617
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1618
+ -webkit-user-select:none;
1619
+ -moz-user-select:none;
1620
+ user-select:none;
1621
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1622
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1623
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1624
+ background:var(--tds-select-dropdown-background-color);
1625
+ border:var(--tds-select-dropdown-border);
1626
+ border-radius:var(--tds-select-dropdown-border-radius);
1627
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1628
+ opacity:var(--tds-select-dropdown-open-opacity);
1629
+ transform:var(--tds-select-dropdown-open-transform);
1630
+ transition:var(--tds-select-dropdown-transition-enter);
1631
+ }
1632
+
1633
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1634
+ opacity:var(--tds-select-dropdown-closed-opacity);
1635
+ transform:var(--tds-select-dropdown-closed-transform);
1636
+ transition:var(--tds-select-dropdown-transition-exit);
1650
1637
  }
1651
1638
 
1652
- .tds-input.tds-textarea--resize-none textarea{
1653
- resize:none;
1639
+ :is(.tds-select:has( > button) [popover]) ul{
1640
+ padding:0;
1641
+ margin:0;
1642
+ list-style:none;
1654
1643
  }
1655
1644
 
1656
- .tds-input.tds-textarea--resize-auto textarea{
1657
- resize:vertical;
1645
+ @starting-style{
1646
+ :is(.tds-select:has( > button) [popover]):popover-open{
1647
+ opacity:var(--tds-select-dropdown-closed-opacity);
1648
+ transform:var(--tds-select-dropdown-closed-transform);
1649
+ }
1658
1650
  }
1659
1651
 
1660
- @supports (field-sizing: content){
1661
- .tds-input.tds-textarea--resize-auto textarea{
1662
- field-sizing:content;
1663
- resize:none;
1652
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1653
+ .tds-select select:has(> button){
1654
+ padding-inline-end:0;
1655
+ background-image:none;
1656
+ }
1657
+ @media (hover) and (pointer: fine){
1658
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1659
+ padding-block:0;
1660
+ -webkit-appearance:base-select;
1661
+ -moz-appearance:base-select;
1662
+ appearance:base-select;
1664
1663
  }
1665
1664
  }
1666
-
1667
- .tds-input textarea{
1668
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1669
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1670
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1671
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1672
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1673
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1674
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1675
- --tds-input-scrollbar-thumb-border-radius:999px;
1676
- --tds-input-scrollbar-thumb-border-width:3px;
1677
- --tds-input-scrollbar-track-margin-block:.125rem;
1678
- scrollbar-color:initial;
1679
- transition-timing-function:var(--t-ease-in-out);
1680
- transition-duration:var(--t-duration-200);
1681
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1682
- }
1683
-
1684
- @media (pointer: fine){
1685
- :is(.tds-input textarea)::-webkit-scrollbar{
1686
- width:12px;
1687
- height:12px;
1688
- cursor:default;
1665
+ :is(.tds-select select:has( > button))::picker-icon{
1666
+ flex-shrink:0;
1667
+ width:var(--tds-select-caret-size);
1668
+ height:var(--tds-select-caret-size);
1669
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1670
+ content:var(--tds-select-background-image);
1671
+ transition:var(--tds-select-caret-transition);
1689
1672
  }
1690
1673
 
1691
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1692
- cursor:default;
1693
- background:var(--tds-input-scrollbar-thumb-color);
1694
- background-clip:content-box;
1695
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1696
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1674
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1675
+ opacity:var(--tds-select-dropdown-closed-opacity);
1676
+ transform:var(--tds-select-dropdown-closed-transform);
1677
+ transition:var(--tds-select-dropdown-transition-exit);
1697
1678
  }
1698
1679
 
1699
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1700
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1680
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1681
+ outline-color:var(--t-focus-ring-color);
1682
+ outline-offset:var(--t-focus-ring-offset);
1683
+ border-color:var(--tds-select-border-color-active);
1701
1684
  }
1702
1685
 
1703
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1704
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1686
+ :is(.tds-select select:has( > button)):open::picker-icon{
1687
+ opacity:1;
1688
+ transform:rotate(.5turn);
1705
1689
  }
1706
1690
 
1707
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1708
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1691
+ :is(.tds-select select:has( > button)) selectedcontent{
1692
+ overflow:hidden;
1693
+ text-overflow:ellipsis;
1694
+ line-height:calc(var(--tds-select-min-height) - 2px);
1695
+ white-space:nowrap;
1709
1696
  }
1710
1697
 
1711
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1712
- background:var(--tds-input-scrollbar-surface-color);
1698
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1699
+ color:var(--tds-select-placeholder-color);
1713
1700
  }
1714
1701
 
1715
- :is(.tds-input textarea)::-webkit-resizer{
1716
- background:var(--tds-input-resizer-icon) no-repeat;
1717
- background-position:right bottom;
1718
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1702
+ :is(.tds-select select:has( > button))::picker(select){
1703
+ inset:auto;
1704
+ inline-size:-moz-max-content;
1705
+ inline-size:max-content;
1706
+ min-inline-size:anchor-size(width);
1707
+ max-inline-size:100vi;
1708
+ padding:var(--tds-select-dropdown-padding);
1709
+ margin-block:var(--tds-select-dropdown-margin-block);
1710
+ position-try-fallbacks:flip-block, flip-inline;
1711
+ overflow:auto;
1712
+ overflow-x:hidden;
1713
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1714
+ -webkit-user-select:none;
1715
+ -moz-user-select:none;
1716
+ user-select:none;
1717
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1718
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1719
+ background:var(--tds-select-dropdown-background-color);
1720
+ border:var(--tds-select-dropdown-border);
1721
+ border-radius:var(--tds-select-dropdown-border-radius);
1722
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1723
+ opacity:var(--tds-select-dropdown-open-opacity);
1724
+ transform:var(--tds-select-dropdown-open-transform);
1725
+ transition:var(--tds-select-dropdown-transition-enter);
1719
1726
  }
1720
1727
 
1721
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1722
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1723
- cursor:default;
1728
+ :is(.tds-select select:has( > button)) option::checkmark{
1729
+ display:none;
1724
1730
  }
1725
1731
 
1726
- @supports (-moz-appearance: none){
1727
- :is(.tds-input textarea){
1728
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1729
- scrollbar-width:thin;
1730
- }
1731
-
1732
- @media (hover){
1733
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1734
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1735
- }
1732
+ @starting-style{
1733
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1734
+ opacity:var(--tds-select-dropdown-closed-opacity);
1735
+ transform:var(--tds-select-dropdown-closed-transform);
1736
1736
  }
1737
1737
  }
1738
- }
1738
+ }
1739
1739
 
1740
1740
  .tds-input{
1741
1741
  --tds-input-border-color:var(--t-form-border-color);
@@ -3317,96 +3317,304 @@ a[class="tds-btn"]{
3317
3317
  }
3318
3318
  }
3319
3319
 
3320
- @media (prefers-color-scheme: dark){
3320
+ @media (prefers-color-scheme: dark){
3321
+ }
3322
+
3323
+ .tds-combo-box{
3324
+ --tds-combo-box-border-color:var(--t-form-border-color);
3325
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3326
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3327
+ --tds-combo-box-background-color:var(--t-form-background-color);
3328
+ --tds-combo-box-color:var(--t-form-color);
3329
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3330
+ --tds-combo-box-font-size:var(--t-font-size-md);
3331
+ --tds-combo-box-min-height:var(--t-container-size-md);
3332
+ --tds-combo-box-padding-block:6px;
3333
+ --tds-combo-box-button-offset:4px;
3334
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3335
+ --tds-combo-box-description-invalid-icon-display:none;
3336
+
3337
+ position:relative;
3338
+ display:flex;
3339
+ flex-direction:column;
3340
+ gap:var(--t-spacing-half);
3341
+ }
3342
+
3343
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3344
+ margin-left:.25ch;
3345
+ color:var(--t-text-color-status-error);
3346
+ content:"*";
3347
+ }
3348
+
3349
+ .tds-combo-box[data-invalid]{
3350
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3351
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3352
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3353
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3354
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3355
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3356
+ }
3357
+
3358
+ .tds-combo-box[data-disabled]{
3359
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3360
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3361
+ --tds-combo-box-color:var(--t-form-color-disabled);
3362
+ }
3363
+
3364
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3365
+ color:var(--t-form-color-disabled);
3366
+ }
3367
+
3368
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3369
+ cursor:not-allowed;
3370
+ }
3371
+
3372
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3373
+ transform:rotate(.5turn);
3374
+ }
3375
+
3376
+ .tds-combo-box--lg{
3377
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3378
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3379
+ --tds-combo-box-button-offset:5px;
3380
+ }
3381
+
3382
+ .tds-combo-box-label{
3383
+ font-size:var(--t-font-size-md);
3384
+ font-weight:var(--t-font-weight-normal);
3385
+ color:var(--t-text-color);
3386
+ cursor:default;
3387
+ }
3388
+
3389
+ .tds-combo-box-field{
3390
+ display:flex;
3391
+ align-items:center;
3392
+ inline-size:100%;
3393
+ min-block-size:var(--tds-combo-box-min-height);
3394
+ font-family:inherit;
3395
+ font-size:var(--tds-combo-box-font-size);
3396
+ line-height:1;
3397
+ color:var(--tds-combo-box-color);
3398
+ -webkit-appearance:none;
3399
+ -moz-appearance:none;
3400
+ appearance:none;
3401
+ cursor:default;
3402
+ outline:var(--t-focus-ring-width) solid transparent;
3403
+ outline-offset:0;
3404
+ background-color:var(--tds-combo-box-background-color);
3405
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3406
+ border-radius:var(--t-form-border-radius);
3407
+ }
3408
+
3409
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3410
+ border-color:var(--tds-combo-box-border-color-hover);
3411
+ }
3412
+
3413
+ .tds-combo-box-field[data-focus-within]{
3414
+ outline-color:var(--t-focus-ring-color);
3415
+ outline-offset:var(--t-focus-ring-offset);
3416
+ border-color:var(--tds-combo-box-border-color-active);
3417
+ }
3418
+
3419
+ .tds-combo-box-field:has([readonly]){
3420
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3421
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3422
+ }
3423
+
3424
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3425
+ border-color:var(--t-form-border-color-hover);
3426
+ }
3427
+
3428
+ .tds-combo-box-input{
3429
+ display:flex;
3430
+ flex:1;
3431
+ align-items:center;
3432
+ padding-block:var(--tds-combo-box-padding-block);
3433
+ padding-inline-start:var(--t-spacing-1);
3434
+ font-family:inherit;
3435
+ font-size:inherit;
3436
+ color:inherit;
3437
+ outline:0;
3438
+ background:transparent;
3439
+ border:0;
3440
+ }
3441
+
3442
+ .tds-combo-box-input::-moz-placeholder{
3443
+ color:var(--tds-combo-box-placeholder-color);
3444
+ -moz-user-select:none;
3445
+ user-select:none;
3446
+ }
3447
+
3448
+ .tds-combo-box-input::placeholder{
3449
+ color:var(--tds-combo-box-placeholder-color);
3450
+ -webkit-user-select:none;
3451
+ -moz-user-select:none;
3452
+ user-select:none;
3453
+ }
3454
+
3455
+ .tds-combo-box-button{
3456
+ flex-shrink:0;
3457
+ align-self:center;
3458
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3459
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3460
+ padding:0;
3461
+ margin-inline-end:var(--tds-combo-box-button-offset);
3462
+ }
3463
+
3464
+ .tds-combo-box-button > svg{
3465
+ inline-size:var(--tds-combo-box-font-size);
3466
+ block-size:var(--tds-combo-box-font-size);
3467
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3468
+ }
3469
+
3470
+ .tds-combo-box-button:not(.tds-btn){
3471
+ display:inline-flex;
3472
+ align-items:center;
3473
+ justify-content:center;
3474
+ inline-size:auto;
3475
+ block-size:auto;
3476
+ margin-inline-end:.75em;
3477
+ color:var(--t-icon-color);
3478
+ cursor:default;
3479
+ background:transparent;
3480
+ border:0;
3481
+ }
3482
+
3483
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3484
+ outline:0;
3485
+ }
3486
+
3487
+ .tds-combo-box-popover{
3488
+ width:var(--trigger-width);
3489
+ max-block-size:inherit;
3490
+ padding:var(--t-spacing-1);
3491
+ overflow:auto;
3492
+ outline:0;
3493
+ scrollbar-color:#0004 #0000;
3494
+ scrollbar-width:thin;
3495
+ background:var(--t-surface-color-card);
3496
+ background-clip:padding-box;
3497
+ border:1px solid var(--t-border-color);
3498
+ border-radius:var(--t-border-radius);
3499
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3321
3500
  }
3322
3501
 
3323
- .tds-checkbox-group{
3324
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3325
- --tds-checkbox-group-line-height:1.4;
3326
- --tds-checkbox-group-gap:var(--t-spacing-1);
3502
+ .tds-combo-box-popover[data-entering]{
3503
+ animation:tds-combo-box-popover-enter 160ms ease;
3504
+ }
3327
3505
 
3328
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3506
+ .tds-combo-box-popover[data-exiting]{
3507
+ animation:tds-combo-box-popover-exit 130ms ease;
3508
+ }
3329
3509
 
3330
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3331
- --tds-checkbox-group-description-line-height:1.35;
3332
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3333
- --tds-checkbox-group-description-invalid-icon-display:none;
3334
- display:flex;
3335
- flex-direction:column;
3336
- gap:var(--tds-checkbox-group-gap);
3510
+ @keyframes tds-combo-box-popover-enter{
3511
+ from{
3512
+ opacity:0;
3513
+ transform:translateY(-8px);
3514
+ }
3515
+ }
3516
+
3517
+ @keyframes tds-combo-box-popover-exit{
3518
+ to{
3519
+ opacity:0;
3520
+ transform:translateY(-8px);
3521
+ }
3522
+ }
3523
+
3524
+ @media (prefers-reduced-motion: reduce){
3525
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3526
+ animation:none;
3527
+ }
3528
+
3529
+ .tds-combo-box-button > svg{
3530
+ transition:none;
3531
+ }
3532
+ }
3533
+
3534
+ .tds-combo-box-list{
3337
3535
  padding:0;
3338
3536
  margin:0;
3537
+ }
3339
3538
 
3340
- font-size:var(--tds-checkbox-group-font-size);
3341
- line-height:var(--tds-checkbox-group-line-height);
3342
- border:0;
3539
+ .tds-combo-box-list-item{
3540
+ display:block;
3541
+ padding-block:var(--t-spacing-1);
3542
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3543
+ overflow:hidden;
3544
+ text-overflow:ellipsis;
3545
+ font-size:1rem;
3546
+ color:var(--t-text-color);
3547
+ white-space:nowrap;
3548
+ cursor:default;
3549
+ outline-offset:-1px;
3550
+ border-radius:var(--t-border-radius);
3343
3551
  }
3344
3552
 
3345
- .tds-checkbox-group legend{
3346
- padding:0;
3347
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3553
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3554
+ background:var(--t-fill-color-neutral-070);
3348
3555
  }
3349
3556
 
3350
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3351
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3557
+ .tds-combo-box-list-item[data-selected]{
3558
+ background:var(--t-fill-color-button-interaction-ghost-active);
3352
3559
  }
3353
3560
 
3354
- .tds-checkbox-group[aria-invalid="true"]{
3355
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3356
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3561
+ .tds-combo-box-list-item[data-focus-visible]{
3562
+ outline:var(--t-focus-ring-outline);
3563
+ outline-offset:-1px;
3357
3564
  }
3358
3565
 
3359
- .tds-checkbox-group:has(input:required) legend::after{
3360
- margin-left:.25ch;
3361
- color:var(--t-text-color-status-error);
3362
- content:"*";
3566
+ .tds-combo-box-list-item[data-disabled]{
3567
+ color:var(--t-form-color-disabled);
3568
+ cursor:not-allowed;
3569
+ }
3570
+
3571
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3572
+ background:transparent;
3363
3573
  }
3364
3574
 
3365
- .tds-checkbox-group-fields{
3366
- display:flex;
3367
- flex-direction:column;
3368
- gap:var(--tds-checkbox-group-gap);
3369
- align-items:flex-start;
3575
+ .tds-combo-box-list-section:not(:first-child){
3576
+ margin-block-start:var(--t-spacing-half);
3577
+ }
3578
+
3579
+ .tds-combo-box-section-header{
3580
+ padding-block:var(--t-spacing-1);
3581
+ padding-inline:var(--t-spacing-1);
3582
+ font-size:var(--t-font-size-sm);
3583
+ font-weight:var(--t-font-weight-semibold);
3584
+ color:var(--t-text-color-secondary);
3370
3585
  }
3371
3586
 
3372
- .tds-checkbox-group-description{
3587
+ .tds-combo-box-description{
3373
3588
  display:flex;
3374
3589
  gap:var(--t-spacing-half);
3375
3590
  align-items:flex-start;
3376
3591
  margin:0;
3377
- font-size:var(--tds-checkbox-group-description-font-size);
3378
- line-height:var(--tds-checkbox-group-description-line-height);
3379
- color:var(--tds-checkbox-group-description-color);
3592
+ font-size:var(--t-font-size-sm);
3593
+ line-height:1.35;
3594
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3380
3595
  cursor:text;
3381
3596
  }
3382
3597
 
3383
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3384
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3385
- flex-shrink:0;
3386
- margin-top:calc(.5lh - .5em);
3387
- line-height:var(--tds-checkbox-group-description-line-height);
3388
- }
3389
-
3390
- .tds-checkbox-group--sm{
3391
- --tds-checkbox-group-line-height:1.35;
3392
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3393
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3394
- --tds-checkbox-group-description-line-height:1.3;
3598
+ .tds-combo-box-description-invalid-icon{
3599
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3600
+ flex-shrink:0;
3601
+ margin-block-start:calc(.5lh - .5em);
3602
+ line-height:1.35;
3395
3603
  }
3396
3604
 
3397
- .tds-combo-box{
3398
- --tds-combo-box-border-color:var(--t-form-border-color);
3399
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3400
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3401
- --tds-combo-box-background-color:var(--t-form-background-color);
3402
- --tds-combo-box-color:var(--t-form-color);
3403
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3404
- --tds-combo-box-font-size:var(--t-font-size-md);
3405
- --tds-combo-box-min-height:var(--t-container-size-md);
3406
- --tds-combo-box-padding-block:6px;
3407
- --tds-combo-box-button-offset:4px;
3408
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3409
- --tds-combo-box-description-invalid-icon-display:none;
3605
+ .tds-date-picker{
3606
+ --tds-date-picker-border-color:var(--t-form-border-color);
3607
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3608
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3609
+ --tds-date-picker-background-color:var(--t-form-background-color);
3610
+ --tds-date-picker-color:var(--t-form-color);
3611
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3612
+ --tds-date-picker-font-size:var(--t-font-size-md);
3613
+ --tds-date-picker-min-height:var(--t-container-size-md);
3614
+ --tds-date-picker-padding-block:6px;
3615
+ --tds-date-picker-button-offset:4px;
3616
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3617
+ --tds-date-picker-description-invalid-icon-display:none;
3410
3618
 
3411
3619
  position:relative;
3412
3620
  display:flex;
@@ -3414,266 +3622,367 @@ a[class="tds-btn"]{
3414
3622
  gap:var(--t-spacing-half);
3415
3623
  }
3416
3624
 
3417
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3625
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3418
3626
  margin-left:.25ch;
3419
3627
  color:var(--t-text-color-status-error);
3420
3628
  content:"*";
3421
3629
  }
3422
3630
 
3423
- .tds-combo-box[data-invalid]{
3424
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3425
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3426
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3427
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3428
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3429
- --tds-combo-box-description-invalid-icon-display:inline-block;
3631
+ .tds-date-picker[data-invalid]{
3632
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3633
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3634
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3635
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3636
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3637
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3430
3638
  }
3431
3639
 
3432
- .tds-combo-box[data-disabled]{
3433
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3434
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3435
- --tds-combo-box-color:var(--t-form-color-disabled);
3640
+ .tds-date-picker[data-disabled]{
3641
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3642
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3643
+ --tds-date-picker-color:var(--t-form-color-disabled);
3644
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3436
3645
  }
3437
3646
 
3438
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3439
- color:var(--t-form-color-disabled);
3440
- }
3441
-
3442
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3647
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3443
3648
  cursor:not-allowed;
3444
3649
  }
3445
3650
 
3446
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3447
- transform:rotate(.5turn);
3448
- }
3449
-
3450
- .tds-combo-box--lg{
3451
- --tds-combo-box-min-height:var(--t-container-size-lg);
3452
- --tds-combo-box-font-size:var(--t-font-size-lg);
3453
- --tds-combo-box-button-offset:5px;
3651
+ .tds-date-picker--lg{
3652
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3653
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3654
+ --tds-date-picker-button-offset:5px;
3454
3655
  }
3455
3656
 
3456
- .tds-combo-box-label{
3657
+ .tds-date-picker-label{
3457
3658
  font-size:var(--t-font-size-md);
3458
3659
  font-weight:var(--t-font-weight-normal);
3459
3660
  color:var(--t-text-color);
3460
3661
  cursor:default;
3461
3662
  }
3462
3663
 
3463
- .tds-combo-box-field{
3664
+ .tds-date-picker-field{
3464
3665
  display:flex;
3465
3666
  align-items:center;
3466
3667
  inline-size:100%;
3467
- min-block-size:var(--tds-combo-box-min-height);
3668
+ min-block-size:var(--tds-date-picker-min-height);
3468
3669
  font-family:inherit;
3469
- font-size:var(--tds-combo-box-font-size);
3670
+ font-size:var(--tds-date-picker-font-size);
3470
3671
  line-height:1;
3471
- color:var(--tds-combo-box-color);
3672
+ color:var(--tds-date-picker-color);
3472
3673
  -webkit-appearance:none;
3473
3674
  -moz-appearance:none;
3474
3675
  appearance:none;
3475
- cursor:default;
3676
+ cursor:text;
3476
3677
  outline:var(--t-focus-ring-width) solid transparent;
3477
3678
  outline-offset:0;
3478
- background-color:var(--tds-combo-box-background-color);
3479
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3679
+ background-color:var(--tds-date-picker-background-color);
3680
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3480
3681
  border-radius:var(--t-form-border-radius);
3481
3682
  }
3482
3683
 
3483
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3484
- border-color:var(--tds-combo-box-border-color-hover);
3684
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3685
+ border-color:var(--tds-date-picker-border-color-hover);
3485
3686
  }
3486
3687
 
3487
- .tds-combo-box-field[data-focus-within]{
3688
+ .tds-date-picker-field[data-focus-within]{
3488
3689
  outline-color:var(--t-focus-ring-color);
3489
3690
  outline-offset:var(--t-focus-ring-offset);
3490
- border-color:var(--tds-combo-box-border-color-active);
3691
+ border-color:var(--tds-date-picker-border-color-active);
3491
3692
  }
3492
3693
 
3493
- .tds-combo-box-field:has([readonly]){
3494
- --tds-input-border-color:var(--t-form-border-color-readonly);
3495
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3694
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3695
+ color:var(--t-form-color-readonly);
3696
+ background-color:var(--t-form-background-color-readonly);
3697
+ border-color:var(--t-form-border-color-readonly);
3496
3698
  }
3497
3699
 
3498
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3700
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3701
+ border-color:var(--t-form-border-color-readonly);
3702
+ }
3703
+
3704
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3705
+ outline-color:var(--t-focus-ring-color);
3706
+ outline-offset:var(--t-focus-ring-offset);
3499
3707
  border-color:var(--t-form-border-color-hover);
3500
3708
  }
3501
3709
 
3502
- .tds-combo-box-input{
3503
- display:flex;
3710
+ .tds-date-picker-input{
3504
3711
  flex:1;
3505
- align-items:center;
3506
- padding-block:var(--tds-combo-box-padding-block);
3712
+ padding-block:var(--tds-date-picker-padding-block);
3507
3713
  padding-inline-start:var(--t-spacing-1);
3508
- font-family:inherit;
3509
- font-size:inherit;
3510
- color:inherit;
3511
- outline:0;
3512
- background:transparent;
3513
- border:0;
3714
+ font-variant-numeric:tabular-nums;
3514
3715
  }
3515
3716
 
3516
- .tds-combo-box-input::-moz-placeholder{
3517
- color:var(--tds-combo-box-placeholder-color);
3518
- -moz-user-select:none;
3519
- user-select:none;
3717
+ .tds-date-picker-segment{
3718
+ padding-inline:2px;
3719
+ caret-color:transparent;
3720
+ border-radius:var(--t-border-radius-sm);
3721
+ }
3722
+
3723
+ .tds-date-picker-segment[data-placeholder]{
3724
+ color:var(--tds-date-picker-placeholder-color);
3520
3725
  }
3521
3726
 
3522
- .tds-combo-box-input::placeholder{
3523
- color:var(--tds-combo-box-placeholder-color);
3524
- -webkit-user-select:none;
3525
- -moz-user-select:none;
3526
- user-select:none;
3727
+ .tds-date-picker-segment[data-focused]{
3728
+ color:var(--t-text-color-inverted);
3729
+ outline:0;
3730
+ background:var(--t-fill-color-interaction);
3527
3731
  }
3528
3732
 
3529
- .tds-combo-box-button{
3530
- flex-shrink:0;
3531
- align-self:center;
3532
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3533
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3534
- padding:0;
3535
- margin-inline-end:var(--tds-combo-box-button-offset);
3733
+ .tds-date-picker-segment-separator{
3734
+ padding-inline:0;
3735
+ color:var(--tds-date-picker-placeholder-color);
3536
3736
  }
3537
3737
 
3538
- .tds-combo-box-button > svg{
3539
- inline-size:var(--tds-combo-box-font-size);
3540
- block-size:var(--tds-combo-box-font-size);
3541
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3542
- }
3738
+ .tds-date-picker-description{
3739
+ display:flex;
3740
+ gap:var(--t-spacing-half);
3741
+ align-items:flex-start;
3742
+ margin:0;
3743
+ font-size:var(--t-font-size-sm);
3744
+ line-height:1.35;
3745
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3746
+ cursor:text;
3747
+ }
3543
3748
 
3544
- .tds-combo-box-button:not(.tds-btn){
3545
- display:inline-flex;
3546
- align-items:center;
3547
- justify-content:center;
3548
- inline-size:auto;
3549
- block-size:auto;
3550
- margin-inline-end:.75em;
3551
- color:var(--t-icon-color);
3552
- cursor:default;
3553
- background:transparent;
3554
- border:0;
3749
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3750
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3751
+ flex-shrink:0;
3752
+ margin-block-start:calc(.5lh - .5em);
3753
+ line-height:1.35;
3555
3754
  }
3556
3755
 
3557
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3558
- outline:0;
3559
- }
3756
+ .tds-date-picker-button{
3757
+ flex-shrink:0;
3758
+ align-self:center;
3759
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3760
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3761
+ padding:0;
3762
+ margin-inline-end:var(--tds-date-picker-button-offset);
3763
+ }
3560
3764
 
3561
- .tds-combo-box-popover{
3562
- width:var(--trigger-width);
3563
- max-block-size:inherit;
3564
- padding:var(--t-spacing-1);
3565
- overflow:auto;
3566
- outline:0;
3567
- scrollbar-color:#0004 #0000;
3568
- scrollbar-width:thin;
3765
+ .tds-date-picker-popover{
3766
+ padding:var(--t-spacing-2);
3569
3767
  background:var(--t-surface-color-card);
3570
- background-clip:padding-box;
3571
3768
  border:1px solid var(--t-border-color);
3572
3769
  border-radius:var(--t-border-radius);
3573
3770
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3574
3771
  }
3575
3772
 
3576
- .tds-combo-box-popover[data-entering]{
3577
- animation:tds-combo-box-popover-enter 160ms ease;
3773
+ .tds-date-picker-popover[data-entering]{
3774
+ animation:tds-date-picker-popover-enter 160ms ease;
3578
3775
  }
3579
3776
 
3580
- .tds-combo-box-popover[data-exiting]{
3581
- animation:tds-combo-box-popover-exit 130ms ease;
3777
+ .tds-date-picker-popover[data-exiting]{
3778
+ animation:tds-date-picker-popover-exit 130ms ease;
3582
3779
  }
3583
3780
 
3584
- @keyframes tds-combo-box-popover-enter{
3781
+ @keyframes tds-date-picker-popover-enter{
3585
3782
  from{
3586
3783
  opacity:0;
3587
3784
  transform:translateY(-8px);
3588
3785
  }
3589
3786
  }
3590
3787
 
3591
- @keyframes tds-combo-box-popover-exit{
3788
+ @keyframes tds-date-picker-popover-exit{
3592
3789
  to{
3593
3790
  opacity:0;
3594
3791
  transform:translateY(-8px);
3595
3792
  }
3596
- }
3597
-
3598
- @media (prefers-reduced-motion: reduce){
3599
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3600
- animation:none;
3601
- }
3793
+ }
3794
+
3795
+ @media (prefers-reduced-motion: reduce){
3796
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3797
+ animation:none;
3798
+ }
3799
+ }
3800
+
3801
+ .tds-date-picker-calendar{
3802
+ inline-size:-moz-fit-content;
3803
+ inline-size:fit-content;
3804
+ }
3805
+
3806
+ .tds-date-picker-calendar-header{
3807
+ display:flex;
3808
+ align-items:center;
3809
+ justify-content:space-between;
3810
+ padding-block-end:var(--t-spacing-1);
3811
+ }
3812
+
3813
+ .tds-date-picker-calendar-title{
3814
+ flex:1;
3815
+ margin:0;
3816
+ font-size:var(--t-font-size-md);
3817
+ font-weight:var(--t-font-weight-semibold);
3818
+ text-align:center;
3819
+ }
3820
+
3821
+ .tds-date-picker-calendar-nav{
3822
+ display:flex;
3823
+ align-items:center;
3824
+ justify-content:center;
3825
+ padding:var(--t-spacing-half);
3826
+ color:var(--t-text-color);
3827
+ cursor:default;
3828
+ outline:0;
3829
+ background:transparent;
3830
+ border:0;
3831
+ border-radius:var(--t-border-radius-sm);
3832
+ }
3833
+
3834
+ .tds-date-picker-calendar-nav[data-hovered]{
3835
+ background:var(--t-fill-color-neutral-070);
3836
+ }
3837
+
3838
+ .tds-date-picker-calendar-nav[data-pressed]{
3839
+ background:var(--t-fill-color-button-interaction-ghost-active);
3840
+ }
3841
+
3842
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3843
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3844
+ outline-offset:var(--t-focus-ring-offset);
3845
+ }
3846
+
3847
+ .tds-date-picker-calendar-nav[data-disabled]{
3848
+ color:var(--t-form-color-disabled);
3849
+ cursor:not-allowed;
3850
+ }
3851
+
3852
+ .tds-date-picker-calendar-grid{
3853
+ border-collapse:collapse;
3854
+ }
3855
+
3856
+ .tds-date-picker-calendar-header-cell{
3857
+ padding-block:var(--t-spacing-half);
3858
+ font-size:var(--t-font-size-sm);
3859
+ font-weight:var(--t-font-weight-normal);
3860
+ color:var(--t-text-color-secondary);
3861
+ text-align:center;
3862
+ }
3863
+
3864
+ .tds-date-picker-calendar-cell{
3865
+ display:flex;
3866
+ align-items:center;
3867
+ justify-content:center;
3868
+ inline-size:2.25rem;
3869
+ block-size:2.25rem;
3870
+ font-size:var(--t-font-size-md);
3871
+ color:var(--t-text-color);
3872
+ cursor:default;
3873
+ outline:0;
3874
+ border-radius:var(--t-border-radius-sm);
3875
+ }
3876
+
3877
+ .tds-date-picker-calendar-cell[data-hovered]{
3878
+ background:var(--t-fill-color-neutral-070);
3879
+ }
3880
+
3881
+ .tds-date-picker-calendar-cell[data-pressed]{
3882
+ background:var(--t-fill-color-button-interaction-ghost-active);
3883
+ }
3884
+
3885
+ .tds-date-picker-calendar-cell[data-selected]{
3886
+ color:var(--t-text-color-inverted);
3887
+ background:var(--t-fill-color-interaction);
3888
+ }
3889
+
3890
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3891
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3892
+ outline-offset:var(--t-focus-ring-offset);
3893
+ }
3894
+
3895
+ .tds-date-picker-calendar-cell[data-unavailable]{
3896
+ color:var(--t-text-color-secondary);
3897
+ text-decoration:line-through;
3898
+ cursor:not-allowed;
3899
+ }
3900
+
3901
+ .tds-date-picker-calendar-cell[data-disabled]{
3902
+ color:var(--t-form-color-disabled);
3903
+ cursor:not-allowed;
3904
+ }
3602
3905
 
3603
- .tds-combo-box-button > svg{
3604
- transition:none;
3906
+ .tds-date-picker-calendar-cell[data-outside-month]{
3907
+ color:var(--t-text-color-secondary);
3605
3908
  }
3606
- }
3607
3909
 
3608
- .tds-combo-box-list{
3910
+ .tds-checkbox-group{
3911
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3912
+ --tds-checkbox-group-line-height:1.4;
3913
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3914
+
3915
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3916
+
3917
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3918
+ --tds-checkbox-group-description-line-height:1.35;
3919
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3920
+ --tds-checkbox-group-description-invalid-icon-display:none;
3921
+ display:flex;
3922
+ flex-direction:column;
3923
+ gap:var(--tds-checkbox-group-gap);
3609
3924
  padding:0;
3610
3925
  margin:0;
3611
- }
3612
3926
 
3613
- .tds-combo-box-list-item{
3614
- display:block;
3615
- padding-block:var(--t-spacing-1);
3616
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3617
- overflow:hidden;
3618
- text-overflow:ellipsis;
3619
- font-size:1rem;
3620
- color:var(--t-text-color);
3621
- white-space:nowrap;
3622
- cursor:default;
3623
- outline-offset:-1px;
3624
- border-radius:var(--t-border-radius);
3927
+ font-size:var(--tds-checkbox-group-font-size);
3928
+ line-height:var(--tds-checkbox-group-line-height);
3929
+ border:0;
3625
3930
  }
3626
3931
 
3627
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3628
- background:var(--t-fill-color-neutral-070);
3629
- }
3630
-
3631
- .tds-combo-box-list-item[data-selected]{
3632
- background:var(--t-fill-color-button-interaction-ghost-active);
3932
+ .tds-checkbox-group legend{
3933
+ padding:0;
3934
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3633
3935
  }
3634
3936
 
3635
- .tds-combo-box-list-item[data-focus-visible]{
3636
- outline:var(--t-focus-ring-outline);
3637
- outline-offset:-1px;
3937
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3938
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3638
3939
  }
3639
3940
 
3640
- .tds-combo-box-list-item[data-disabled]{
3641
- color:var(--t-form-color-disabled);
3642
- cursor:not-allowed;
3941
+ .tds-checkbox-group[aria-invalid="true"]{
3942
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3943
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3643
3944
  }
3644
3945
 
3645
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3646
- background:transparent;
3946
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3947
+ margin-left:.25ch;
3948
+ color:var(--t-text-color-status-error);
3949
+ content:"*";
3647
3950
  }
3648
3951
 
3649
- .tds-combo-box-list-section:not(:first-child){
3650
- margin-block-start:var(--t-spacing-half);
3651
- }
3952
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3953
+ content:none;
3954
+ }
3652
3955
 
3653
- .tds-combo-box-section-header{
3654
- padding-block:var(--t-spacing-1);
3655
- padding-inline:var(--t-spacing-1);
3656
- font-size:var(--t-font-size-sm);
3657
- font-weight:var(--t-font-weight-semibold);
3658
- color:var(--t-text-color-secondary);
3956
+ .tds-checkbox-group-fields{
3957
+ display:flex;
3958
+ flex-direction:column;
3959
+ gap:var(--tds-checkbox-group-gap);
3960
+ align-items:flex-start;
3659
3961
  }
3660
3962
 
3661
- .tds-combo-box-description{
3963
+ .tds-checkbox-group-description{
3662
3964
  display:flex;
3663
3965
  gap:var(--t-spacing-half);
3664
3966
  align-items:flex-start;
3665
3967
  margin:0;
3666
- font-size:var(--t-font-size-sm);
3667
- line-height:1.35;
3668
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3968
+ font-size:var(--tds-checkbox-group-description-font-size);
3969
+ line-height:var(--tds-checkbox-group-description-line-height);
3970
+ color:var(--tds-checkbox-group-description-color);
3669
3971
  cursor:text;
3670
3972
  }
3671
3973
 
3672
- .tds-combo-box-description-invalid-icon{
3673
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3674
- flex-shrink:0;
3675
- margin-block-start:calc(.5lh - .5em);
3676
- line-height:1.35;
3974
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3975
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3976
+ flex-shrink:0;
3977
+ margin-top:calc(.5lh - .5em);
3978
+ line-height:var(--tds-checkbox-group-description-line-height);
3979
+ }
3980
+
3981
+ .tds-checkbox-group--sm{
3982
+ --tds-checkbox-group-line-height:1.35;
3983
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3984
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3985
+ --tds-checkbox-group-description-line-height:1.3;
3677
3986
  }
3678
3987
 
3679
3988
  .tds-number-stepper{
@@ -3848,440 +4157,135 @@ a[class="tds-btn"]{
3848
4157
  gap:var(--t-spacing-half);
3849
4158
  }
3850
4159
 
3851
- .tds-time-field[data-required] .tds-time-field-label::after{
3852
- margin-left:.25ch;
3853
- color:var(--t-text-color-status-error);
3854
- content:"*";
3855
- }
3856
-
3857
- .tds-time-field[data-invalid]{
3858
- --tds-time-field-border-color:var(--t-form-border-color-error);
3859
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3860
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3861
- --tds-time-field-background-color:var(--t-form-background-color-error);
3862
- --tds-time-field-description-color:var(--t-text-color-status-error);
3863
- --tds-time-field-description-invalid-icon-display:inline-block;
3864
- }
3865
-
3866
- .tds-time-field[data-disabled]{
3867
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3868
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3869
- --tds-time-field-color:var(--t-form-color-disabled);
3870
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3871
- }
3872
-
3873
- .tds-time-field[data-disabled] .tds-time-field-label{
3874
- color:var(--t-form-color-disabled);
3875
- }
3876
-
3877
- .tds-time-field[data-disabled] .tds-time-field-input{
3878
- cursor:not-allowed;
3879
- }
3880
-
3881
- .tds-time-field--lg{
3882
- --tds-time-field-min-height:var(--t-container-size-lg);
3883
- --tds-time-field-font-size:var(--t-font-size-lg);
3884
- }
3885
-
3886
- .tds-time-field-label{
3887
- font-size:var(--t-font-size-md);
3888
- font-weight:var(--t-font-weight-normal);
3889
- color:var(--t-text-color);
3890
- cursor:default;
3891
- }
3892
-
3893
- .tds-time-field-input{
3894
- display:flex;
3895
- align-items:center;
3896
- inline-size:100%;
3897
- min-block-size:var(--tds-time-field-min-height);
3898
- padding-block:var(--tds-time-field-padding-block);
3899
- padding-inline:var(--t-spacing-1);
3900
- font-family:inherit;
3901
- font-size:var(--tds-time-field-font-size);
3902
- font-variant-numeric:tabular-nums;
3903
- line-height:1;
3904
- color:var(--tds-time-field-color);
3905
- cursor:text;
3906
- outline:var(--t-focus-ring-width) solid transparent;
3907
- outline-offset:0;
3908
- background-color:var(--tds-time-field-background-color);
3909
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3910
- border-radius:var(--t-form-border-radius);
3911
- }
3912
-
3913
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3914
- border-color:var(--tds-time-field-border-color-hover);
3915
- }
3916
-
3917
- .tds-time-field-input[data-focus-within]{
3918
- outline-color:var(--t-focus-ring-color);
3919
- outline-offset:var(--t-focus-ring-offset);
3920
- border-color:var(--tds-time-field-border-color-active);
3921
- }
3922
-
3923
- .tds-time-field-input[data-readonly]{
3924
- color:var(--t-form-color-readonly);
3925
- background-color:var(--t-form-background-color-readonly);
3926
- border-color:var(--t-form-border-color-readonly);
3927
- }
3928
-
3929
- .tds-time-field-input[data-readonly][data-hovered]{
3930
- border-color:var(--t-form-border-color-readonly);
3931
- }
3932
-
3933
- .tds-time-field-input[data-readonly][data-focus-within]{
3934
- outline-color:var(--t-focus-ring-color);
3935
- outline-offset:var(--t-focus-ring-offset);
3936
- border-color:var(--t-form-border-color-hover);
3937
- }
3938
-
3939
- .tds-time-field-segment{
3940
- padding-inline:1px;
3941
- font-variant-numeric:tabular-nums;
3942
- cursor:text;
3943
- caret-color:transparent;
3944
- border-radius:var(--t-border-radius-sm);
3945
- }
3946
-
3947
- .tds-time-field-segment[data-placeholder]{
3948
- color:var(--tds-time-field-placeholder-color);
3949
- }
3950
-
3951
- .tds-time-field-segment[data-focused]{
3952
- color:var(--t-text-color-inverted);
3953
- outline:0;
3954
- background:var(--t-fill-color-interaction);
3955
- }
3956
-
3957
- .tds-time-field-segment-separator{
3958
- padding-inline:0;
3959
- color:var(--tds-time-field-placeholder-color);
3960
- }
3961
-
3962
- .tds-time-field-description{
3963
- display:flex;
3964
- gap:var(--t-spacing-half);
3965
- align-items:flex-start;
3966
- margin:0;
3967
- font-size:var(--t-font-size-sm);
3968
- line-height:1.35;
3969
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3970
- cursor:text;
3971
- }
3972
-
3973
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3974
- display:var(--tds-time-field-description-invalid-icon-display, none);
3975
- flex-shrink:0;
3976
- margin-block-start:calc(.5lh - .5em);
3977
- line-height:1.35;
3978
- }
3979
-
3980
- .tds-date-picker{
3981
- --tds-date-picker-border-color:var(--t-form-border-color);
3982
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3983
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3984
- --tds-date-picker-background-color:var(--t-form-background-color);
3985
- --tds-date-picker-color:var(--t-form-color);
3986
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3987
- --tds-date-picker-font-size:var(--t-font-size-md);
3988
- --tds-date-picker-min-height:var(--t-container-size-md);
3989
- --tds-date-picker-padding-block:6px;
3990
- --tds-date-picker-button-offset:4px;
3991
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3992
- --tds-date-picker-description-invalid-icon-display:none;
3993
-
3994
- position:relative;
3995
- display:flex;
3996
- flex-direction:column;
3997
- gap:var(--t-spacing-half);
3998
- }
3999
-
4000
- .tds-date-picker[data-required] .tds-date-picker-label::after{
4160
+ .tds-time-field[data-required] .tds-time-field-label::after{
4001
4161
  margin-left:.25ch;
4002
4162
  color:var(--t-text-color-status-error);
4003
4163
  content:"*";
4004
4164
  }
4005
4165
 
4006
- .tds-date-picker[data-invalid]{
4007
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4008
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4009
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4010
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4011
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4012
- --tds-date-picker-description-invalid-icon-display:inline-block;
4166
+ .tds-time-field[data-invalid]{
4167
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4168
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4169
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4170
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4171
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4172
+ --tds-time-field-description-invalid-icon-display:inline-block;
4013
4173
  }
4014
4174
 
4015
- .tds-date-picker[data-disabled]{
4016
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4017
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4018
- --tds-date-picker-color:var(--t-form-color-disabled);
4019
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4175
+ .tds-time-field[data-disabled]{
4176
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4177
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4178
+ --tds-time-field-color:var(--t-form-color-disabled);
4179
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4020
4180
  }
4021
4181
 
4022
- .tds-date-picker[data-disabled] .tds-date-picker-field{
4182
+ .tds-time-field[data-disabled] .tds-time-field-label{
4183
+ color:var(--t-form-color-disabled);
4184
+ }
4185
+
4186
+ .tds-time-field[data-disabled] .tds-time-field-input{
4023
4187
  cursor:not-allowed;
4024
4188
  }
4025
4189
 
4026
- .tds-date-picker--lg{
4027
- --tds-date-picker-min-height:var(--t-container-size-lg);
4028
- --tds-date-picker-font-size:var(--t-font-size-lg);
4029
- --tds-date-picker-button-offset:5px;
4190
+ .tds-time-field--lg{
4191
+ --tds-time-field-min-height:var(--t-container-size-lg);
4192
+ --tds-time-field-font-size:var(--t-font-size-lg);
4030
4193
  }
4031
4194
 
4032
- .tds-date-picker-label{
4195
+ .tds-time-field-label{
4033
4196
  font-size:var(--t-font-size-md);
4034
4197
  font-weight:var(--t-font-weight-normal);
4035
4198
  color:var(--t-text-color);
4036
4199
  cursor:default;
4037
4200
  }
4038
4201
 
4039
- .tds-date-picker-field{
4202
+ .tds-time-field-input{
4040
4203
  display:flex;
4041
4204
  align-items:center;
4042
4205
  inline-size:100%;
4043
- min-block-size:var(--tds-date-picker-min-height);
4206
+ min-block-size:var(--tds-time-field-min-height);
4207
+ padding-block:var(--tds-time-field-padding-block);
4208
+ padding-inline:var(--t-spacing-1);
4044
4209
  font-family:inherit;
4045
- font-size:var(--tds-date-picker-font-size);
4210
+ font-size:var(--tds-time-field-font-size);
4211
+ font-variant-numeric:tabular-nums;
4046
4212
  line-height:1;
4047
- color:var(--tds-date-picker-color);
4048
- -webkit-appearance:none;
4049
- -moz-appearance:none;
4050
- appearance:none;
4213
+ color:var(--tds-time-field-color);
4051
4214
  cursor:text;
4052
4215
  outline:var(--t-focus-ring-width) solid transparent;
4053
4216
  outline-offset:0;
4054
- background-color:var(--tds-date-picker-background-color);
4055
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4217
+ background-color:var(--tds-time-field-background-color);
4218
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4056
4219
  border-radius:var(--t-form-border-radius);
4057
4220
  }
4058
4221
 
4059
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4060
- border-color:var(--tds-date-picker-border-color-hover);
4222
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4223
+ border-color:var(--tds-time-field-border-color-hover);
4061
4224
  }
4062
4225
 
4063
- .tds-date-picker-field[data-focus-within]{
4226
+ .tds-time-field-input[data-focus-within]{
4064
4227
  outline-color:var(--t-focus-ring-color);
4065
4228
  outline-offset:var(--t-focus-ring-offset);
4066
- border-color:var(--tds-date-picker-border-color-active);
4229
+ border-color:var(--tds-time-field-border-color-active);
4067
4230
  }
4068
4231
 
4069
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4232
+ .tds-time-field-input[data-readonly]{
4070
4233
  color:var(--t-form-color-readonly);
4071
4234
  background-color:var(--t-form-background-color-readonly);
4072
4235
  border-color:var(--t-form-border-color-readonly);
4073
4236
  }
4074
4237
 
4075
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4238
+ .tds-time-field-input[data-readonly][data-hovered]{
4076
4239
  border-color:var(--t-form-border-color-readonly);
4077
4240
  }
4078
4241
 
4079
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4242
+ .tds-time-field-input[data-readonly][data-focus-within]{
4080
4243
  outline-color:var(--t-focus-ring-color);
4081
4244
  outline-offset:var(--t-focus-ring-offset);
4082
4245
  border-color:var(--t-form-border-color-hover);
4083
4246
  }
4084
4247
 
4085
- .tds-date-picker-input{
4086
- flex:1;
4087
- padding-block:var(--tds-date-picker-padding-block);
4088
- padding-inline-start:var(--t-spacing-1);
4248
+ .tds-time-field-segment{
4249
+ padding-inline:1px;
4089
4250
  font-variant-numeric:tabular-nums;
4090
- }
4091
-
4092
- .tds-date-picker-segment{
4093
- padding-inline:2px;
4251
+ cursor:text;
4094
4252
  caret-color:transparent;
4095
4253
  border-radius:var(--t-border-radius-sm);
4096
4254
  }
4097
4255
 
4098
- .tds-date-picker-segment[data-placeholder]{
4099
- color:var(--tds-date-picker-placeholder-color);
4256
+ .tds-time-field-segment[data-placeholder]{
4257
+ color:var(--tds-time-field-placeholder-color);
4100
4258
  }
4101
4259
 
4102
- .tds-date-picker-segment[data-focused]{
4260
+ .tds-time-field-segment[data-focused]{
4103
4261
  color:var(--t-text-color-inverted);
4104
4262
  outline:0;
4105
4263
  background:var(--t-fill-color-interaction);
4106
4264
  }
4107
4265
 
4108
- .tds-date-picker-segment-separator{
4266
+ .tds-time-field-segment-separator{
4109
4267
  padding-inline:0;
4110
- color:var(--tds-date-picker-placeholder-color);
4268
+ color:var(--tds-time-field-placeholder-color);
4111
4269
  }
4112
4270
 
4113
- .tds-date-picker-description{
4271
+ .tds-time-field-description{
4114
4272
  display:flex;
4115
4273
  gap:var(--t-spacing-half);
4116
4274
  align-items:flex-start;
4117
4275
  margin:0;
4118
4276
  font-size:var(--t-font-size-sm);
4119
4277
  line-height:1.35;
4120
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4278
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4121
4279
  cursor:text;
4122
4280
  }
4123
4281
 
4124
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4125
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4282
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4283
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4126
4284
  flex-shrink:0;
4127
4285
  margin-block-start:calc(.5lh - .5em);
4128
4286
  line-height:1.35;
4129
4287
  }
4130
4288
 
4131
- .tds-date-picker-button{
4132
- flex-shrink:0;
4133
- align-self:center;
4134
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4135
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4136
- padding:0;
4137
- margin-inline-end:var(--tds-date-picker-button-offset);
4138
- }
4139
-
4140
- .tds-date-picker-popover{
4141
- padding:var(--t-spacing-2);
4142
- background:var(--t-surface-color-card);
4143
- border:1px solid var(--t-border-color);
4144
- border-radius:var(--t-border-radius);
4145
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4146
- }
4147
-
4148
- .tds-date-picker-popover[data-entering]{
4149
- animation:tds-date-picker-popover-enter 160ms ease;
4150
- }
4151
-
4152
- .tds-date-picker-popover[data-exiting]{
4153
- animation:tds-date-picker-popover-exit 130ms ease;
4154
- }
4155
-
4156
- @keyframes tds-date-picker-popover-enter{
4157
- from{
4158
- opacity:0;
4159
- transform:translateY(-8px);
4160
- }
4161
- }
4162
-
4163
- @keyframes tds-date-picker-popover-exit{
4164
- to{
4165
- opacity:0;
4166
- transform:translateY(-8px);
4167
- }
4168
- }
4169
-
4170
- @media (prefers-reduced-motion: reduce){
4171
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4172
- animation:none;
4173
- }
4174
- }
4175
-
4176
- .tds-date-picker-calendar{
4177
- inline-size:-moz-fit-content;
4178
- inline-size:fit-content;
4179
- }
4180
-
4181
- .tds-date-picker-calendar-header{
4182
- display:flex;
4183
- align-items:center;
4184
- justify-content:space-between;
4185
- padding-block-end:var(--t-spacing-1);
4186
- }
4187
-
4188
- .tds-date-picker-calendar-title{
4189
- flex:1;
4190
- margin:0;
4191
- font-size:var(--t-font-size-md);
4192
- font-weight:var(--t-font-weight-semibold);
4193
- text-align:center;
4194
- }
4195
-
4196
- .tds-date-picker-calendar-nav{
4197
- display:flex;
4198
- align-items:center;
4199
- justify-content:center;
4200
- padding:var(--t-spacing-half);
4201
- color:var(--t-text-color);
4202
- cursor:default;
4203
- outline:0;
4204
- background:transparent;
4205
- border:0;
4206
- border-radius:var(--t-border-radius-sm);
4207
- }
4208
-
4209
- .tds-date-picker-calendar-nav[data-hovered]{
4210
- background:var(--t-fill-color-neutral-070);
4211
- }
4212
-
4213
- .tds-date-picker-calendar-nav[data-pressed]{
4214
- background:var(--t-fill-color-button-interaction-ghost-active);
4215
- }
4216
-
4217
- .tds-date-picker-calendar-nav[data-focus-visible]{
4218
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4219
- outline-offset:var(--t-focus-ring-offset);
4220
- }
4221
-
4222
- .tds-date-picker-calendar-nav[data-disabled]{
4223
- color:var(--t-form-color-disabled);
4224
- cursor:not-allowed;
4225
- }
4226
-
4227
- .tds-date-picker-calendar-grid{
4228
- border-collapse:collapse;
4229
- }
4230
-
4231
- .tds-date-picker-calendar-header-cell{
4232
- padding-block:var(--t-spacing-half);
4233
- font-size:var(--t-font-size-sm);
4234
- font-weight:var(--t-font-weight-normal);
4235
- color:var(--t-text-color-secondary);
4236
- text-align:center;
4237
- }
4238
-
4239
- .tds-date-picker-calendar-cell{
4240
- display:flex;
4241
- align-items:center;
4242
- justify-content:center;
4243
- inline-size:2.25rem;
4244
- block-size:2.25rem;
4245
- font-size:var(--t-font-size-md);
4246
- color:var(--t-text-color);
4247
- cursor:default;
4248
- outline:0;
4249
- border-radius:var(--t-border-radius-sm);
4250
- }
4251
-
4252
- .tds-date-picker-calendar-cell[data-hovered]{
4253
- background:var(--t-fill-color-neutral-070);
4254
- }
4255
-
4256
- .tds-date-picker-calendar-cell[data-pressed]{
4257
- background:var(--t-fill-color-button-interaction-ghost-active);
4258
- }
4259
-
4260
- .tds-date-picker-calendar-cell[data-selected]{
4261
- color:var(--t-text-color-inverted);
4262
- background:var(--t-fill-color-interaction);
4263
- }
4264
-
4265
- .tds-date-picker-calendar-cell[data-focus-visible]{
4266
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4267
- outline-offset:var(--t-focus-ring-offset);
4268
- }
4269
-
4270
- .tds-date-picker-calendar-cell[data-unavailable]{
4271
- color:var(--t-text-color-secondary);
4272
- text-decoration:line-through;
4273
- cursor:not-allowed;
4274
- }
4275
-
4276
- .tds-date-picker-calendar-cell[data-disabled]{
4277
- color:var(--t-form-color-disabled);
4278
- cursor:not-allowed;
4279
- }
4280
-
4281
- .tds-date-picker-calendar-cell[data-outside-month]{
4282
- color:var(--t-text-color-secondary);
4283
- }
4284
-
4285
4289
  .t-banner{
4286
4290
  --t-banner-font-size:var(--t-font-size-md);
4287
4291
  --t-banner-font-color:var(--t-text-color);