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

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 (15) hide show
  1. package/dist/components/select/Select.d.ts +2 -2
  2. package/dist/components/select/Select.d.ts.map +1 -1
  3. package/dist/components/select/Select.js +4 -1
  4. package/dist/components/select/Select.js.map +1 -1
  5. package/dist/components/select/SelectNative.d.ts +2 -2
  6. package/dist/components/select/SelectNative.d.ts.map +1 -1
  7. package/dist/components/select/SelectNative.js.map +1 -1
  8. package/dist/components/select/SelectPopover.d.ts +2 -1
  9. package/dist/components/select/SelectPopover.d.ts.map +1 -1
  10. package/dist/components/select/SelectPopover.js.map +1 -1
  11. package/dist/reactRender.css +1093 -1093
  12. package/dist/reactRender.css.map +1 -1
  13. package/dist/reactRenderLegacy.css +1093 -1093
  14. package/dist/reactRenderLegacy.css.map +1 -1
  15. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -360,515 +360,363 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
360
360
  flex-direction:column;
361
361
  }
362
362
 
363
- @layer t-critical{
364
- tds-page-header:not(.hydrated){
365
- display:none;
366
- }
367
- }
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
368
 
369
- @layer t-component{
370
- .tds-page-header{
371
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
- --tds-page-header-color:var(--t-text-color);
374
- --tds-page-header-bottom-border-color: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;
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;
387
373
 
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);
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);
390
378
 
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);
379
+ --tds-checkbox-label-color:var(--t-form-color);
394
380
 
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);
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;
397
385
 
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);
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
+ }
401
397
 
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);
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);
407
404
  }
408
405
 
409
- .tds-page-header--profile{
410
- --tds-page-header-padding-y:20px;
406
+ .tds-checkbox tds-indeterminate{
407
+ display:flex;
411
408
  }
412
409
 
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));
417
- }
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);
418
427
  }
419
428
 
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);
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%);
437
447
  }
438
- }
439
- }
440
448
 
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
- }
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
+ }
449
453
 
450
- .tds-page-header:not(.has-nav){
451
- padding-bottom:var(--tds-page-header-padding-y);
454
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
455
+ outline:var(--t-focus-ring-outline);
456
+ outline-offset:var(--t-focus-ring-offset);
457
+ }
458
+
459
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
460
+ pointer-events:none;
461
+ }
462
+
463
+ @media (prefers-reduced-motion: reduce){
464
+
465
+ .tds-checkbox input[type="checkbox"]{
466
+ --tds-checkbox-transition-property:none;
452
467
  }
468
+ }
453
469
 
454
- .tds-page-header.inactive{
455
- background:var(--tds-page-header-background-color-inactive);
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;
456
475
  }
457
476
 
458
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
459
- width:100%;
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
+ }
481
+
482
+ .tds-checkbox:has(input:checked){
483
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
460
484
  }
461
485
 
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;
486
+ .tds-checkbox:has(input:indeterminate){
487
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
469
488
  }
470
489
 
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);
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;
494
+ }
495
+
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);
479
499
  }
480
500
 
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;
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);
500
504
  }
501
505
 
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);
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);
507
509
  }
508
510
 
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
- }
511
+ .tds-checkbox:has(input:required) label::after{
512
+ margin-left:.25ch;
513
+ color:var(--t-text-color-status-error);
514
+ content:"*";
515
+ }
514
516
 
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
- }
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);
519
520
 
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
- }
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
+ }
526
525
 
527
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
- position:relative;
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);
529
528
  }
530
529
 
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{
530
+ .tds-checkbox-description{
554
531
  display:flex;
555
- flex-direction:column;
556
- gap:var(--t-spacing-2) var(--t-spacing-1);
532
+ grid-area:2 / 2;
533
+ gap:var(--t-spacing-half);
557
534
  align-items:flex-start;
558
- justify-content:space-between;
559
- padding:0 var(--tds-page-header-padding-x);
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;
560
540
  }
561
541
 
562
- .tds-page-header--profile > .tds-page-header__title-bar{
563
- align-items:center;
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);
564
547
  }
565
548
 
566
- .tds-page-header__primary{
567
- width:100%;
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;
568
555
  }
569
556
 
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;
557
+
558
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
559
+ -webkit-appearance:none;
560
+ appearance:none;
561
+ }
562
+
563
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
564
+ inline-size:1em;
565
+ block-size:2em;
566
+ }
567
+
568
+ @supports (field-sizing: content){
569
+ .tds-input--auto-width{
570
+ inline-size:-moz-fit-content;
571
+ inline-size:fit-content;
572
+ min-inline-size:min(100%, 122px);
577
573
  }
578
574
 
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%;
575
+ .tds-input--auto-width input{
576
+ field-sizing:content;
577
+ inline-size:auto;
585
578
  }
579
+ }
586
580
 
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;
581
+ .tds-radio-group{
582
+ --tds-radio-group-font-size:var(--t-font-size-md);
583
+ --tds-radio-group-line-height:1.4;
584
+ --tds-radio-group-gap:var(--t-spacing-1);
585
+
586
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
587
+
588
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
589
+ --tds-radio-group-description-line-height:1.35;
590
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
591
+ --tds-radio-group-description-invalid-icon-display:none;
592
+ display:flex;
593
+ flex-direction:column;
594
+ gap:var(--tds-radio-group-gap);
595
+ padding:0;
596
+ margin:0;
597
+
598
+ font-size:var(--tds-radio-group-font-size);
599
+ line-height:var(--tds-radio-group-line-height);
600
+ border:0;
601
+ }
602
+
603
+ .tds-radio-group legend{
604
+ padding:0;
605
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
592
606
  }
593
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
- width:auto;
607
+
608
+ .tds-radio-group:has(.tds-radio-group-description){
609
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
610
+ }
611
+
612
+ .tds-radio-group[aria-invalid="true"]{
613
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
614
+ --tds-radio-group-description-invalid-icon-display:inline-block;
615
+ }
616
+
617
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
618
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
595
619
  }
596
620
 
597
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
- justify-content:flex-end;
621
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
622
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
623
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
624
+ }
625
+
626
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
627
+ --tds-radio-input-background-color:var(--t-form-background-color);
628
+ }
629
+
630
+ .tds-radio-group:has(input:required) legend::after{
631
+ margin-left:.25ch;
632
+ color:var(--t-text-color-status-error);
633
+ content:"*";
599
634
  }
600
- }
601
635
 
602
- .tds-page-header-phone,
603
- .tds-page-header-email{
604
- color:var(--tds-page-header-color);
605
- white-space:nowrap;
636
+ .tds-radio-group-fields{
637
+ display:flex;
638
+ flex-direction:column;
639
+ gap:var(--tds-radio-group-gap);
640
+ align-items:flex-start;
606
641
  }
607
642
 
608
- .tds-page-header-email{
609
- max-width:100%;
610
- overflow:hidden;
611
- text-overflow:ellipsis;
643
+ .tds-radio-group-description{
644
+ display:flex;
645
+ gap:var(--t-spacing-half);
646
+ align-items:flex-start;
647
+ margin:0;
648
+ font-size:var(--tds-radio-group-description-font-size);
649
+ line-height:var(--tds-radio-group-description-line-height);
650
+ color:var(--tds-radio-group-description-color);
651
+ cursor:text;
612
652
  }
613
653
 
614
- @keyframes indicator-pulse{
615
- 0%{
616
- opacity:.3;
617
- transform:scale(.9);
654
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
655
+ display:var(--tds-radio-group-description-invalid-icon-display);
656
+ flex-shrink:0;
657
+ margin-top:calc(.5lh - .5em);
658
+ line-height:var(--tds-radio-group-description-line-height);
618
659
  }
619
660
 
620
- 100%{
621
- opacity:0;
622
- transform:scale(1.75);
623
- }
661
+ .tds-radio-group--sm{
662
+ --tds-radio-group-line-height:1.35;
663
+ --tds-radio-group-font-size:var(--t-font-size-sm);
664
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
665
+ --tds-radio-group-description-line-height:1.3;
624
666
  }
625
667
 
626
- .tds-checkbox{
627
- --tds-checkbox-font-size:var(--t-font-size-md);
628
- --tds-checkbox-cursor:pointer;
629
- --tds-checkbox-line-height:1.4;
630
- --tds-checkbox-transition-property:background-color, border-color;
631
-
632
- --tds-checkbox-input-size:var(--t-element-size-md);
633
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
634
- --tds-checkbox-input-border-color:var(--t-form-border-color);
635
- --tds-checkbox-input-background-color:transparent;
668
+ .tds-radio{
669
+ --tds-radio-font-size:var(--t-font-size-md);
670
+ --tds-radio-cursor:pointer;
671
+ --tds-radio-line-height:1.4;
672
+ --tds-radio-transition-property:border-width;
636
673
 
637
- --tds-checkbox-input-icon:none;
638
- --tds-checkbox-input-icon-visibility:hidden;
639
- --tds-checkbox-input-icon-opacity:0;
640
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
674
+ --tds-radio-input-size:var(--t-element-size-md);
675
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
676
+ --tds-radio-input-border-color:var(--t-form-border-color);
677
+ --tds-radio-input-border-width:var(--t-form-border-width);
678
+ --tds-radio-input-background-color:transparent;
641
679
 
642
- --tds-checkbox-label-color:var(--t-form-color);
680
+ --tds-radio-label-color:var(--t-form-color);
643
681
 
644
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
645
- --tds-checkbox-description-line-height:1.35;
646
- --tds-checkbox-description-color:var(--t-text-color-secondary);
647
- --tds-checkbox-description-invalid-icon-display:none;
682
+ --tds-radio-description-font-size:var(--t-font-size-sm);
683
+ --tds-radio-description-line-height:1.35;
684
+ --tds-radio-description-color:var(--t-text-color-secondary);
648
685
 
649
686
  position:relative;
650
687
  display:inline-grid;
651
688
  grid-template-columns:auto;
652
689
  grid-auto-columns:1fr;
653
690
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
654
- line-height:var(--tds-checkbox-line-height);
655
- cursor:var(--tds-checkbox-cursor);
691
+ line-height:var(--tds-radio-line-height);
692
+ cursor:var(--tds-radio-cursor);
656
693
  -webkit-user-select:none;
657
694
  -moz-user-select:none;
658
695
  user-select:none;
659
696
  }
660
697
 
661
- .tds-checkbox label{
698
+ .tds-radio label{
662
699
  grid-area:1 / 2;
663
- font-size:var(--tds-checkbox-font-size);
700
+ font-size:var(--tds-radio-font-size);
664
701
  font-weight:var(--t-font-weight-normal);
665
- color:var(--tds-checkbox-label-color);
666
- cursor:var(--tds-checkbox-cursor);
667
- }
668
-
669
- .tds-checkbox tds-indeterminate{
670
- display:flex;
702
+ color:var(--tds-radio-label-color);
703
+ cursor:var(--tds-radio-cursor);
671
704
  }
672
705
 
673
- .tds-checkbox input[type="checkbox"]{
706
+ .tds-radio input[type="radio"]{
674
707
  position:relative;
675
708
  width:1em;
676
709
  height:1em;
677
710
  margin:calc((1lh - 1em) / 2) 0 0;
678
- font-size:var(--tds-checkbox-font-size);
711
+ font-size:var(--tds-radio-font-size);
679
712
  line-height:inherit;
680
713
  -webkit-appearance:none;
681
714
  -moz-appearance:none;
682
715
  appearance:none;
683
- cursor:var(--tds-checkbox-cursor);
684
- background-color:var(--tds-checkbox-input-background-color);
685
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
686
- border-radius:var(--tds-checkbox-input-border-radius);
687
- transition-timing-function:var(--t-ease-in-out);
688
- transition-duration:var(--t-duration-200);
689
- transition-property:var(--tds-checkbox-transition-property);
690
- }
691
-
692
- :is(.tds-checkbox input[type="checkbox"])::before{
693
- position:absolute;
694
- top:50%;
695
- left:50%;
696
- visibility:var(--tds-checkbox-input-icon-visibility);
697
- width:100%;
698
- height:100%;
699
- content:"";
700
- background-color:var(--tds-checkbox-input-icon-fill);
701
- border-radius:var(--tds-checkbox-input-border-radius);
702
- opacity:var(--tds-checkbox-input-icon-opacity);
703
- -webkit-mask-image:var(--tds-checkbox-input-icon);
704
- mask-image:var(--tds-checkbox-input-icon);
705
- -webkit-mask-repeat:no-repeat;
706
- mask-repeat:no-repeat;
707
- -webkit-mask-size:contain;
708
- mask-size:contain;
709
- transform:translate(-50%, -50%);
710
- }
711
-
712
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
713
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
714
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
715
- }
716
-
717
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
718
- outline:var(--t-focus-ring-outline);
719
- outline-offset:var(--t-focus-ring-offset);
720
- }
721
-
722
- :is(.tds-checkbox input[type="checkbox"]):disabled{
723
- pointer-events:none;
724
- }
725
-
726
- @media (prefers-reduced-motion: reduce){
727
-
728
- .tds-checkbox input[type="checkbox"]{
729
- --tds-checkbox-transition-property:none;
730
- }
731
- }
732
-
733
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
734
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
735
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
736
- --tds-checkbox-input-icon-visibility:visible;
737
- --tds-checkbox-input-icon-opacity:1;
738
- }
739
-
740
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
741
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
742
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
743
- }
744
-
745
- .tds-checkbox:has(input:checked){
746
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
747
- }
748
-
749
- .tds-checkbox:has(input:indeterminate){
750
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
751
- }
752
-
753
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
754
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
755
- --tds-checkbox-description-color:var(--t-text-color-status-error);
756
- --tds-checkbox-description-invalid-icon-display:inline-block;
757
- }
758
-
759
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
760
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
761
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
762
- }
763
-
764
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
765
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
766
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
767
- }
768
-
769
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
770
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
771
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
772
- }
773
-
774
- .tds-checkbox:has(input:required) label::after{
775
- margin-left:.25ch;
776
- color:var(--t-text-color-status-error);
777
- content:"*";
778
- }
779
-
780
- .tds-checkbox:has(input:disabled){
781
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
782
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
783
-
784
- --tds-checkbox-label-color:var(--t-form-color-disabled);
785
- --tds-checkbox-description-color:var(--t-form-color-disabled);
786
- --tds-checkbox-cursor:not-allowed;
787
- }
788
-
789
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
790
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
791
- }
792
-
793
- .tds-checkbox-description{
794
- display:flex;
795
- grid-area:2 / 2;
796
- gap:var(--t-spacing-half);
797
- align-items:flex-start;
798
- margin:0;
799
- font-size:var(--tds-checkbox-description-font-size);
800
- line-height:var(--tds-checkbox-description-line-height);
801
- color:var(--tds-checkbox-description-color);
802
- cursor:text;
803
- }
804
-
805
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
806
- display:var(--tds-checkbox-description-invalid-icon-display);
807
- flex-shrink:0;
808
- margin-top:calc(.5lh - .5em);
809
- line-height:var(--tds-checkbox-description-line-height);
810
- }
811
-
812
- .tds-checkbox--sm{
813
- --tds-checkbox-line-height:1.35;
814
- --tds-checkbox-input-size:var(--t-element-size-sm);
815
- --tds-checkbox-font-size:var(--t-font-size-sm);
816
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
817
- --tds-checkbox-description-line-height:1.3;
818
- }
819
-
820
- .tds-radio{
821
- --tds-radio-font-size:var(--t-font-size-md);
822
- --tds-radio-cursor:pointer;
823
- --tds-radio-line-height:1.4;
824
- --tds-radio-transition-property:border-width;
825
-
826
- --tds-radio-input-size:var(--t-element-size-md);
827
- --tds-radio-input-border-radius:var(--t-border-radius-round);
828
- --tds-radio-input-border-color:var(--t-form-border-color);
829
- --tds-radio-input-border-width:var(--t-form-border-width);
830
- --tds-radio-input-background-color:transparent;
831
-
832
- --tds-radio-label-color:var(--t-form-color);
833
-
834
- --tds-radio-description-font-size:var(--t-font-size-sm);
835
- --tds-radio-description-line-height:1.35;
836
- --tds-radio-description-color:var(--t-text-color-secondary);
837
-
838
- position:relative;
839
- display:inline-grid;
840
- grid-template-columns:auto;
841
- grid-auto-columns:1fr;
842
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
843
- line-height:var(--tds-radio-line-height);
844
- cursor:var(--tds-radio-cursor);
845
- -webkit-user-select:none;
846
- -moz-user-select:none;
847
- user-select:none;
848
- }
849
-
850
- .tds-radio label{
851
- grid-area:1 / 2;
852
- font-size:var(--tds-radio-font-size);
853
- font-weight:var(--t-font-weight-normal);
854
- color:var(--tds-radio-label-color);
855
- cursor:var(--tds-radio-cursor);
856
- }
857
-
858
- .tds-radio input[type="radio"]{
859
- position:relative;
860
- width:1em;
861
- height:1em;
862
- margin:calc((1lh - 1em) / 2) 0 0;
863
- font-size:var(--tds-radio-font-size);
864
- line-height:inherit;
865
- -webkit-appearance:none;
866
- -moz-appearance:none;
867
- appearance:none;
868
- cursor:var(--tds-radio-cursor);
869
- background-color:var(--tds-radio-input-background-color);
870
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
871
- border-radius:var(--tds-radio-input-border-radius);
716
+ cursor:var(--tds-radio-cursor);
717
+ background-color:var(--tds-radio-input-background-color);
718
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
719
+ border-radius:var(--tds-radio-input-border-radius);
872
720
  transition-timing-function:var(--t-ease-in-out);
873
721
  transition-duration:var(--t-duration-200);
874
722
  transition-property:var(--tds-radio-transition-property);
@@ -949,140 +797,53 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
949
797
  --tds-radio-description-line-height:1.3;
950
798
  }
951
799
 
952
- .tds-radio-group{
953
- --tds-radio-group-font-size:var(--t-font-size-md);
954
- --tds-radio-group-line-height:1.4;
955
- --tds-radio-group-gap:var(--t-spacing-1);
800
+ .tds-toggle-switch{
801
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
802
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
803
+ --tds-toggle-switch-cursor:pointer;
804
+ --tds-toggle-switch-display:inline-grid;
805
+ --tds-toggle-switch-line-height:1.4;
956
806
 
957
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
807
+ --tds-toggle-switch-label-color:var(--t-form-color);
958
808
 
959
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
960
- --tds-radio-group-description-line-height:1.35;
961
- --tds-radio-group-description-color:var(--t-text-color-secondary);
962
- --tds-radio-group-description-invalid-icon-display:none;
963
- display:flex;
964
- flex-direction:column;
965
- gap:var(--tds-radio-group-gap);
966
- padding:0;
967
- margin:0;
809
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
810
+ --tds-toggle-switch-track-outline:none;
811
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
812
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
813
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
968
814
 
969
- font-size:var(--tds-radio-group-font-size);
970
- line-height:var(--tds-radio-group-line-height);
971
- border:0;
972
- }
815
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
816
+ --tds-toggle-switch-thumb-transform:translateX(0);
817
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
973
818
 
974
- .tds-radio-group legend{
975
- padding:0;
976
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
977
- }
819
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
820
+ --tds-toggle-switch-description-line-height:1.35;
821
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
822
+ position:relative;
978
823
 
979
- .tds-radio-group:has(.tds-radio-group-description){
980
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
981
- }
824
+ display:var(--tds-toggle-switch-display);
825
+ grid-template-columns:auto;
826
+ grid-auto-columns:1fr;
827
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
828
+ -webkit-user-select:none;
829
+ -moz-user-select:none;
830
+ user-select:none;
831
+ }
982
832
 
983
- .tds-radio-group[aria-invalid="true"]{
984
- --tds-radio-group-description-color:var(--t-text-color-status-error);
985
- --tds-radio-group-description-invalid-icon-display:inline-block;
986
- }
987
-
988
- .tds-radio-group[aria-invalid="true"] .tds-radio{
989
- --tds-radio-input-border-color:var(--t-form-border-color-error);
990
- }
991
-
992
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
993
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
994
- --tds-radio-input-background-color:var(--t-form-background-color-error);
995
- }
996
-
997
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
998
- --tds-radio-input-background-color:var(--t-form-background-color);
999
- }
1000
-
1001
- .tds-radio-group:has(input:required) legend::after{
1002
- margin-left:.25ch;
1003
- color:var(--t-text-color-status-error);
1004
- content:"*";
1005
- }
1006
-
1007
- .tds-radio-group-fields{
1008
- display:flex;
1009
- flex-direction:column;
1010
- gap:var(--tds-radio-group-gap);
1011
- align-items:flex-start;
1012
- }
1013
-
1014
- .tds-radio-group-description{
1015
- display:flex;
1016
- gap:var(--t-spacing-half);
1017
- align-items:flex-start;
1018
- margin:0;
1019
- font-size:var(--tds-radio-group-description-font-size);
1020
- line-height:var(--tds-radio-group-description-line-height);
1021
- color:var(--tds-radio-group-description-color);
1022
- cursor:text;
1023
- }
1024
-
1025
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1026
- display:var(--tds-radio-group-description-invalid-icon-display);
1027
- flex-shrink:0;
1028
- margin-top:calc(.5lh - .5em);
1029
- line-height:var(--tds-radio-group-description-line-height);
1030
- }
1031
-
1032
- .tds-radio-group--sm{
1033
- --tds-radio-group-line-height:1.35;
1034
- --tds-radio-group-font-size:var(--t-font-size-sm);
1035
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1036
- --tds-radio-group-description-line-height:1.3;
1037
- }
1038
-
1039
- .tds-toggle-switch{
1040
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1041
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1042
- --tds-toggle-switch-cursor:pointer;
1043
- --tds-toggle-switch-display:inline-grid;
1044
- --tds-toggle-switch-line-height:1.4;
1045
-
1046
- --tds-toggle-switch-label-color:var(--t-form-color);
1047
-
1048
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1049
- --tds-toggle-switch-track-outline:none;
1050
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1051
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1052
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1053
-
1054
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1055
- --tds-toggle-switch-thumb-transform:translateX(0);
1056
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1057
-
1058
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1059
- --tds-toggle-switch-description-line-height:1.35;
1060
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1061
- position:relative;
1062
-
1063
- display:var(--tds-toggle-switch-display);
1064
- grid-template-columns:auto;
1065
- grid-auto-columns:1fr;
1066
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1067
- -webkit-user-select:none;
1068
- -moz-user-select:none;
1069
- user-select:none;
1070
- }
1071
-
1072
- .tds-toggle-switch input[type="checkbox"]{
1073
- position:absolute;
1074
- width:var(--tds-toggle-switch-track-width);
1075
- height:var(--tds-toggle-switch-track-height);
1076
- margin:0;
1077
- -webkit-appearance:none;
1078
- -moz-appearance:none;
1079
- appearance:none;
1080
- cursor:var(--tds-toggle-switch-cursor);
1081
- outline:var(--tds-toggle-switch-track-outline);
1082
- outline-offset:var(--t-focus-ring-offset);
1083
- background-color:transparent;
1084
- border:0;
1085
- border-radius:var(--t-border-radius-round);
833
+ .tds-toggle-switch input[type="checkbox"]{
834
+ position:absolute;
835
+ width:var(--tds-toggle-switch-track-width);
836
+ height:var(--tds-toggle-switch-track-height);
837
+ margin:0;
838
+ -webkit-appearance:none;
839
+ -moz-appearance:none;
840
+ appearance:none;
841
+ cursor:var(--tds-toggle-switch-cursor);
842
+ outline:var(--tds-toggle-switch-track-outline);
843
+ outline-offset:var(--t-focus-ring-offset);
844
+ background-color:transparent;
845
+ border:0;
846
+ border-radius:var(--t-border-radius-round);
1086
847
  }
1087
848
 
1088
849
  :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
@@ -1177,30 +938,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1177
938
  --tds-toggle-switch-display:inline-flex;
1178
939
  }
1179
940
 
1180
-
1181
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1182
- -webkit-appearance:none;
1183
- appearance:none;
1184
- }
1185
-
1186
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1187
- inline-size:1em;
1188
- block-size:2em;
1189
- }
1190
-
1191
- @supports (field-sizing: content){
1192
- .tds-input--auto-width{
1193
- inline-size:-moz-fit-content;
1194
- inline-size:fit-content;
1195
- min-inline-size:min(100%, 122px);
1196
- }
1197
-
1198
- .tds-input--auto-width input{
1199
- field-sizing:content;
1200
- inline-size:auto;
1201
- }
1202
- }
1203
-
1204
941
  .tds-input:has(textarea){
1205
942
  --tds-input-padding-block:6px;
1206
943
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1644,100 +1381,363 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1644
1381
  list-style:none;
1645
1382
  }
1646
1383
 
1647
- @starting-style{
1648
- :is(.tds-select:has( > button) [popover]):popover-open{
1649
- opacity:var(--tds-select-dropdown-closed-opacity);
1650
- transform:var(--tds-select-dropdown-closed-transform);
1384
+ @starting-style{
1385
+ :is(.tds-select:has( > button) [popover]):popover-open{
1386
+ opacity:var(--tds-select-dropdown-closed-opacity);
1387
+ transform:var(--tds-select-dropdown-closed-transform);
1388
+ }
1389
+ }
1390
+
1391
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1392
+ .tds-select select:has(> button){
1393
+ padding-inline-end:0;
1394
+ background-image:none;
1395
+ }
1396
+ @media (hover) and (pointer: fine){
1397
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1398
+ padding-block:0;
1399
+ -webkit-appearance:base-select;
1400
+ -moz-appearance:base-select;
1401
+ appearance:base-select;
1402
+ }
1403
+ }
1404
+ :is(.tds-select select:has( > button))::picker-icon{
1405
+ flex-shrink:0;
1406
+ width:var(--tds-select-caret-size);
1407
+ height:var(--tds-select-caret-size);
1408
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1409
+ content:var(--tds-select-background-image);
1410
+ transition:var(--tds-select-caret-transition);
1411
+ }
1412
+
1413
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1414
+ opacity:var(--tds-select-dropdown-closed-opacity);
1415
+ transform:var(--tds-select-dropdown-closed-transform);
1416
+ transition:var(--tds-select-dropdown-transition-exit);
1417
+ }
1418
+
1419
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1420
+ outline-color:var(--t-focus-ring-color);
1421
+ outline-offset:var(--t-focus-ring-offset);
1422
+ border-color:var(--tds-select-border-color-active);
1423
+ }
1424
+
1425
+ :is(.tds-select select:has( > button)):open::picker-icon{
1426
+ opacity:1;
1427
+ transform:rotate(.5turn);
1428
+ }
1429
+
1430
+ :is(.tds-select select:has( > button)) selectedcontent{
1431
+ overflow:hidden;
1432
+ text-overflow:ellipsis;
1433
+ line-height:calc(var(--tds-select-min-height) - 2px);
1434
+ white-space:nowrap;
1435
+ }
1436
+
1437
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1438
+ color:var(--tds-select-placeholder-color);
1439
+ }
1440
+
1441
+ :is(.tds-select select:has( > button))::picker(select){
1442
+ inset:auto;
1443
+ inline-size:-moz-max-content;
1444
+ inline-size:max-content;
1445
+ min-inline-size:anchor-size(width);
1446
+ max-inline-size:100vi;
1447
+ padding:var(--tds-select-dropdown-padding);
1448
+ margin-block:var(--tds-select-dropdown-margin-block);
1449
+ position-try-fallbacks:flip-block, flip-inline;
1450
+ overflow:auto;
1451
+ overflow-x:hidden;
1452
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1453
+ overscroll-behavior:none;
1454
+ -webkit-user-select:none;
1455
+ -moz-user-select:none;
1456
+ user-select:none;
1457
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1458
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1459
+ background:var(--tds-select-dropdown-background-color);
1460
+ border:var(--tds-select-dropdown-border);
1461
+ border-radius:var(--tds-select-dropdown-border-radius);
1462
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1463
+ opacity:var(--tds-select-dropdown-open-opacity);
1464
+ transform:var(--tds-select-dropdown-open-transform);
1465
+ transition:var(--tds-select-dropdown-transition-enter);
1466
+ }
1467
+
1468
+ :is(.tds-select select:has( > button)) option::checkmark{
1469
+ display:none;
1470
+ }
1471
+
1472
+ @starting-style{
1473
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1474
+ opacity:var(--tds-select-dropdown-closed-opacity);
1475
+ transform:var(--tds-select-dropdown-closed-transform);
1476
+ }
1477
+ }
1478
+ }
1479
+
1480
+ @layer t-critical{
1481
+ tds-page-header:not(.hydrated){
1482
+ display:none;
1483
+ }
1484
+ }
1485
+
1486
+ @layer t-component{
1487
+ .tds-page-header{
1488
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1489
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1490
+ --tds-page-header-color:var(--t-text-color);
1491
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1492
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1493
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1494
+ --tds-page-header-padding-x:var(--t-spacing-2);
1495
+ --tds-page-header-padding-y:var(--t-spacing-2);
1496
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1497
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1498
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1499
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1500
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1501
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1502
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1503
+ --tds-page-header-nav-item-border-width:1px;
1504
+
1505
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1506
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1507
+
1508
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1509
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1510
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1511
+
1512
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1513
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1514
+
1515
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1516
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1517
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1518
+
1519
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1520
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1521
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1522
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1523
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1524
+ }
1525
+
1526
+ .tds-page-header--profile{
1527
+ --tds-page-header-padding-y:20px;
1528
+ }
1529
+
1530
+ @supports (color: light-dark(#fff, #000)){
1531
+ .tds-page-header{
1532
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1533
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1534
+ }
1535
+ }
1536
+
1537
+ @media (min-width: 600px){
1538
+ .tds-page-header{
1539
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1540
+ --tds-page-header-color:var(--t-text-color-secondary);
1541
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1542
+ --tds-page-header-padding-x:var(--t-spacing-3);
1543
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1544
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1545
+ --tds-page-header-nav-background:transparent;
1546
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1547
+ --tds-page-header-nav-item-border-width:1px;
1548
+ --tds-page-header-nav-item-color:var(--t-text-color);
1549
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1550
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1551
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1552
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1553
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1554
+ }
1555
+ }
1556
+ }
1557
+
1558
+ .tds-page-header{
1559
+ display:flex;
1560
+ flex-direction:column;
1561
+ padding-top:var(--tds-page-header-padding-y);
1562
+ color:var(--tds-page-header-color);
1563
+ background:var(--tds-page-header-background-color);
1564
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1565
+ }
1566
+
1567
+ .tds-page-header:not(.has-nav){
1568
+ padding-bottom:var(--tds-page-header-padding-y);
1569
+ }
1570
+
1571
+ .tds-page-header.inactive{
1572
+ background:var(--tds-page-header-background-color-inactive);
1573
+ }
1574
+
1575
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1576
+ width:100%;
1577
+ }
1578
+
1579
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1580
+ display:flex;
1581
+ flex-flow:row wrap;
1582
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1583
+ align-items:flex-start;
1584
+ justify-content:flex-start;
1585
+ min-width:0;
1586
+ }
1587
+
1588
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1589
+ display:flex;
1590
+ gap:var(--tds-page-header-nav-gap);
1591
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1592
+ margin:0 0 -1px;
1593
+ overflow:auto;
1594
+ list-style:none;
1595
+ background:var(--tds-page-header-nav-background);
1596
+ }
1597
+
1598
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1599
+ position:relative;
1600
+ display:inline-flex;
1601
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1602
+ font-size:var(--t-font-size-sm);
1603
+ line-height:22px;
1604
+ color:var(--tds-page-header-nav-item-color);
1605
+ white-space:nowrap;
1606
+ text-decoration:none;
1607
+ -webkit-appearance:none;
1608
+ -moz-appearance:none;
1609
+ appearance:none;
1610
+ cursor:pointer;
1611
+ outline-offset:-2px;
1612
+ background-color:var(--tds-page-header-nav-item-background-color);
1613
+ background-clip:padding-box;
1614
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1615
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1616
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1617
+ }
1618
+
1619
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1620
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1621
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1622
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1623
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1624
+ }
1625
+
1626
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1627
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1628
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1629
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1630
+ }
1631
+
1632
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1633
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1634
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1635
+ }
1636
+
1637
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1638
+ color:var(--tds-page-header-nav-item-color-disabled);
1639
+ cursor:not-allowed;
1640
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1641
+ opacity:1;
1642
+ }
1643
+
1644
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1645
+ position:relative;
1646
+ }
1647
+
1648
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1649
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1650
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1651
+ }
1652
+
1653
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1654
+ position:absolute;
1655
+ top:-5px;
1656
+ right:-2px;
1657
+ width:10px;
1658
+ height:10px;
1659
+ content:"";
1660
+ background:var(--tds-page-header-nav-item-indicator-color);
1661
+ border-radius:50%;
1662
+ }
1663
+
1664
+ @media (prefers-reduced-motion: no-preference){
1665
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1666
+ animation:indicator-pulse 1.25s ease infinite;
1667
+ }
1651
1668
  }
1652
- }
1653
1669
 
1654
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1655
- .tds-select select:has(> button){
1656
- padding-inline-end:0;
1657
- background-image:none;
1670
+ .tds-page-header__title-bar{
1671
+ display:flex;
1672
+ flex-direction:column;
1673
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1674
+ align-items:flex-start;
1675
+ justify-content:space-between;
1676
+ padding:0 var(--tds-page-header-padding-x);
1677
+ }
1678
+
1679
+ .tds-page-header--profile > .tds-page-header__title-bar{
1680
+ align-items:center;
1658
1681
  }
1659
- @media (hover) and (pointer: fine){
1660
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1661
- padding-block:0;
1662
- -webkit-appearance:base-select;
1663
- -moz-appearance:base-select;
1664
- appearance:base-select;
1665
- }
1666
- }
1667
- :is(.tds-select select:has( > button))::picker-icon{
1668
- flex-shrink:0;
1669
- width:var(--tds-select-caret-size);
1670
- height:var(--tds-select-caret-size);
1671
- margin-inline-end:var(--tds-select-caret-inline-offset);
1672
- content:var(--tds-select-background-image);
1673
- transition:var(--tds-select-caret-transition);
1674
- }
1675
1682
 
1676
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1677
- opacity:var(--tds-select-dropdown-closed-opacity);
1678
- transform:var(--tds-select-dropdown-closed-transform);
1679
- transition:var(--tds-select-dropdown-transition-exit);
1680
- }
1683
+ .tds-page-header__primary{
1684
+ width:100%;
1685
+ }
1681
1686
 
1682
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1683
- outline-color:var(--t-focus-ring-color);
1684
- outline-offset:var(--t-focus-ring-offset);
1685
- border-color:var(--tds-select-border-color-active);
1686
- }
1687
+ .tds-page-header__primary h1{
1688
+ margin:0;
1689
+ font-size:var(--tds-page-header-headline-font-size);
1690
+ font-weight:var(--t-font-weight-normal);
1691
+ line-height:32px;
1692
+ color:var(--tds-page-header-headline-color);
1693
+ overflow-wrap:break-word;
1694
+ }
1687
1695
 
1688
- :is(.tds-select select:has( > button)):open::picker-icon{
1689
- opacity:1;
1690
- transform:rotate(.5turn);
1691
- }
1696
+ @media (min-width: 960px){
1697
+ .tds-page-header__primary{
1698
+ flex:1 1 max-content;
1699
+ width:auto;
1700
+ min-width:0;
1701
+ max-width:100%;
1702
+ }
1692
1703
 
1693
- :is(.tds-select select:has( > button)) selectedcontent{
1694
- overflow:hidden;
1695
- text-overflow:ellipsis;
1696
- line-height:calc(var(--tds-select-min-height) - 2px);
1697
- white-space:nowrap;
1704
+ .tds-page-header__title-bar,
1705
+ .tds-page-header--profile .tds-page-header__title-bar{
1706
+ flex-flow:row nowrap;
1707
+ row-gap:12px;
1708
+ align-items:flex-start;
1709
+ }
1710
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1711
+ width:auto;
1698
1712
  }
1699
1713
 
1700
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1701
- color:var(--tds-select-placeholder-color);
1714
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1715
+ justify-content:flex-end;
1702
1716
  }
1717
+ }
1703
1718
 
1704
- :is(.tds-select select:has( > button))::picker(select){
1705
- inset:auto;
1706
- inline-size:-moz-max-content;
1707
- inline-size:max-content;
1708
- min-inline-size:anchor-size(width);
1709
- max-inline-size:100vi;
1710
- padding:var(--tds-select-dropdown-padding);
1711
- margin-block:var(--tds-select-dropdown-margin-block);
1712
- position-try-fallbacks:flip-block, flip-inline;
1713
- overflow:auto;
1714
- overflow-x:hidden;
1715
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1716
- overscroll-behavior:none;
1717
- -webkit-user-select:none;
1718
- -moz-user-select:none;
1719
- user-select:none;
1720
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1721
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1722
- background:var(--tds-select-dropdown-background-color);
1723
- border:var(--tds-select-dropdown-border);
1724
- border-radius:var(--tds-select-dropdown-border-radius);
1725
- box-shadow:var(--tds-select-dropdown-box-shadow);
1726
- opacity:var(--tds-select-dropdown-open-opacity);
1727
- transform:var(--tds-select-dropdown-open-transform);
1728
- transition:var(--tds-select-dropdown-transition-enter);
1729
- }
1719
+ .tds-page-header-phone,
1720
+ .tds-page-header-email{
1721
+ color:var(--tds-page-header-color);
1722
+ white-space:nowrap;
1723
+ }
1730
1724
 
1731
- :is(.tds-select select:has( > button)) option::checkmark{
1732
- display:none;
1733
- }
1725
+ .tds-page-header-email{
1726
+ max-width:100%;
1727
+ overflow:hidden;
1728
+ text-overflow:ellipsis;
1729
+ }
1734
1730
 
1735
- @starting-style{
1736
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1737
- opacity:var(--tds-select-dropdown-closed-opacity);
1738
- transform:var(--tds-select-dropdown-closed-transform);
1739
- }
1740
- }
1731
+ @keyframes indicator-pulse{
1732
+ 0%{
1733
+ opacity:.3;
1734
+ transform:scale(.9);
1735
+ }
1736
+
1737
+ 100%{
1738
+ opacity:0;
1739
+ transform:scale(1.75);
1740
+ }
1741
1741
  }
1742
1742
 
1743
1743
  .tds-input{
@@ -3323,19 +3323,19 @@ a[class="tds-btn"]{
3323
3323
  @media (prefers-color-scheme: dark){
3324
3324
  }
3325
3325
 
3326
- .tds-combo-box{
3327
- --tds-combo-box-border-color:var(--t-form-border-color);
3328
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3329
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3330
- --tds-combo-box-background-color:var(--t-form-background-color);
3331
- --tds-combo-box-color:var(--t-form-color);
3332
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3333
- --tds-combo-box-font-size:var(--t-font-size-md);
3334
- --tds-combo-box-min-height:var(--t-container-size-md);
3335
- --tds-combo-box-padding-block:6px;
3336
- --tds-combo-box-button-offset:4px;
3337
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3338
- --tds-combo-box-description-invalid-icon-display:none;
3326
+ .tds-date-picker{
3327
+ --tds-date-picker-border-color:var(--t-form-border-color);
3328
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3329
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3330
+ --tds-date-picker-background-color:var(--t-form-background-color);
3331
+ --tds-date-picker-color:var(--t-form-color);
3332
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3333
+ --tds-date-picker-font-size:var(--t-font-size-md);
3334
+ --tds-date-picker-min-height:var(--t-container-size-md);
3335
+ --tds-date-picker-padding-block:6px;
3336
+ --tds-date-picker-button-offset:4px;
3337
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3338
+ --tds-date-picker-description-invalid-icon-display:none;
3339
3339
 
3340
3340
  position:relative;
3341
3341
  display:flex;
@@ -3343,181 +3343,170 @@ a[class="tds-btn"]{
3343
3343
  gap:var(--t-spacing-half);
3344
3344
  }
3345
3345
 
3346
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3346
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3347
3347
  margin-left:.25ch;
3348
3348
  color:var(--t-text-color-status-error);
3349
3349
  content:"*";
3350
3350
  }
3351
3351
 
3352
- .tds-combo-box[data-invalid]{
3353
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3354
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3355
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3356
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3357
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3358
- --tds-combo-box-description-invalid-icon-display:inline-block;
3352
+ .tds-date-picker[data-invalid]{
3353
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3354
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3355
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3356
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3357
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3358
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3359
3359
  }
3360
3360
 
3361
- .tds-combo-box[data-disabled]{
3362
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3363
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3364
- --tds-combo-box-color:var(--t-form-color-disabled);
3361
+ .tds-date-picker[data-disabled]{
3362
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3363
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3364
+ --tds-date-picker-color:var(--t-form-color-disabled);
3365
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3365
3366
  }
3366
3367
 
3367
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3368
- color:var(--t-form-color-disabled);
3369
- }
3370
-
3371
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3368
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3372
3369
  cursor:not-allowed;
3373
3370
  }
3374
3371
 
3375
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3376
- transform:rotate(.5turn);
3377
- }
3378
-
3379
- .tds-combo-box--lg{
3380
- --tds-combo-box-min-height:var(--t-container-size-lg);
3381
- --tds-combo-box-font-size:var(--t-font-size-lg);
3382
- --tds-combo-box-button-offset:5px;
3372
+ .tds-date-picker--lg{
3373
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3374
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3375
+ --tds-date-picker-button-offset:5px;
3383
3376
  }
3384
3377
 
3385
- .tds-combo-box-label{
3378
+ .tds-date-picker-label{
3386
3379
  font-size:var(--t-font-size-md);
3387
3380
  font-weight:var(--t-font-weight-normal);
3388
3381
  color:var(--t-text-color);
3389
3382
  cursor:default;
3390
3383
  }
3391
3384
 
3392
- .tds-combo-box-field{
3385
+ .tds-date-picker-field{
3393
3386
  display:flex;
3394
3387
  align-items:center;
3395
3388
  inline-size:100%;
3396
- min-block-size:var(--tds-combo-box-min-height);
3389
+ min-block-size:var(--tds-date-picker-min-height);
3397
3390
  font-family:inherit;
3398
- font-size:var(--tds-combo-box-font-size);
3391
+ font-size:var(--tds-date-picker-font-size);
3399
3392
  line-height:1;
3400
- color:var(--tds-combo-box-color);
3393
+ color:var(--tds-date-picker-color);
3401
3394
  -webkit-appearance:none;
3402
3395
  -moz-appearance:none;
3403
3396
  appearance:none;
3404
- cursor:default;
3397
+ cursor:text;
3405
3398
  outline:var(--t-focus-ring-width) solid transparent;
3406
3399
  outline-offset:0;
3407
- background-color:var(--tds-combo-box-background-color);
3408
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3400
+ background-color:var(--tds-date-picker-background-color);
3401
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3409
3402
  border-radius:var(--t-form-border-radius);
3410
3403
  }
3411
3404
 
3412
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3413
- border-color:var(--tds-combo-box-border-color-hover);
3405
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3406
+ border-color:var(--tds-date-picker-border-color-hover);
3414
3407
  }
3415
3408
 
3416
- .tds-combo-box-field[data-focus-within]{
3409
+ .tds-date-picker-field[data-focus-within]{
3417
3410
  outline-color:var(--t-focus-ring-color);
3418
3411
  outline-offset:var(--t-focus-ring-offset);
3419
- border-color:var(--tds-combo-box-border-color-active);
3412
+ border-color:var(--tds-date-picker-border-color-active);
3420
3413
  }
3421
3414
 
3422
- .tds-combo-box-field:has([readonly]){
3423
- --tds-input-border-color:var(--t-form-border-color-readonly);
3424
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3415
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3416
+ color:var(--t-form-color-readonly);
3417
+ background-color:var(--t-form-background-color-readonly);
3418
+ border-color:var(--t-form-border-color-readonly);
3425
3419
  }
3426
3420
 
3427
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3421
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3422
+ border-color:var(--t-form-border-color-readonly);
3423
+ }
3424
+
3425
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3426
+ outline-color:var(--t-focus-ring-color);
3427
+ outline-offset:var(--t-focus-ring-offset);
3428
3428
  border-color:var(--t-form-border-color-hover);
3429
3429
  }
3430
3430
 
3431
- .tds-combo-box-input{
3432
- display:flex;
3431
+ .tds-date-picker-input{
3433
3432
  flex:1;
3434
- align-items:center;
3435
- padding-block:var(--tds-combo-box-padding-block);
3433
+ padding-block:var(--tds-date-picker-padding-block);
3436
3434
  padding-inline-start:var(--t-spacing-1);
3437
- font-family:inherit;
3438
- font-size:inherit;
3439
- color:inherit;
3440
- outline:0;
3441
- background:transparent;
3442
- border:0;
3435
+ font-variant-numeric:tabular-nums;
3443
3436
  }
3444
3437
 
3445
- .tds-combo-box-input::-moz-placeholder{
3446
- color:var(--tds-combo-box-placeholder-color);
3447
- -moz-user-select:none;
3448
- user-select:none;
3438
+ .tds-date-picker-segment{
3439
+ padding-inline:2px;
3440
+ caret-color:transparent;
3441
+ border-radius:var(--t-border-radius-sm);
3442
+ }
3443
+
3444
+ .tds-date-picker-segment[data-placeholder]{
3445
+ color:var(--tds-date-picker-placeholder-color);
3449
3446
  }
3450
3447
 
3451
- .tds-combo-box-input::placeholder{
3452
- color:var(--tds-combo-box-placeholder-color);
3453
- -webkit-user-select:none;
3454
- -moz-user-select:none;
3455
- user-select:none;
3448
+ .tds-date-picker-segment[data-focused]{
3449
+ color:var(--t-text-color-inverted);
3450
+ outline:0;
3451
+ background:var(--t-fill-color-interaction);
3456
3452
  }
3457
3453
 
3458
- .tds-combo-box-button{
3459
- flex-shrink:0;
3460
- align-self:center;
3461
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3462
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3463
- padding:0;
3464
- margin-inline-end:var(--tds-combo-box-button-offset);
3454
+ .tds-date-picker-segment-separator{
3455
+ padding-inline:0;
3456
+ color:var(--tds-date-picker-placeholder-color);
3465
3457
  }
3466
3458
 
3467
- .tds-combo-box-button > svg{
3468
- inline-size:var(--tds-combo-box-font-size);
3469
- block-size:var(--tds-combo-box-font-size);
3470
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3471
- }
3459
+ .tds-date-picker-description{
3460
+ display:flex;
3461
+ gap:var(--t-spacing-half);
3462
+ align-items:flex-start;
3463
+ margin:0;
3464
+ font-size:var(--t-font-size-sm);
3465
+ line-height:1.35;
3466
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3467
+ cursor:text;
3468
+ }
3472
3469
 
3473
- .tds-combo-box-button:not(.tds-btn){
3474
- display:inline-flex;
3475
- align-items:center;
3476
- justify-content:center;
3477
- inline-size:auto;
3478
- block-size:auto;
3479
- margin-inline-end:.75em;
3480
- color:var(--t-icon-color);
3481
- cursor:default;
3482
- background:transparent;
3483
- border:0;
3470
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3471
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3472
+ flex-shrink:0;
3473
+ margin-block-start:calc(.5lh - .5em);
3474
+ line-height:1.35;
3484
3475
  }
3485
3476
 
3486
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3487
- outline:0;
3488
- }
3477
+ .tds-date-picker-button{
3478
+ flex-shrink:0;
3479
+ align-self:center;
3480
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3481
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3482
+ padding:0;
3483
+ margin-inline-end:var(--tds-date-picker-button-offset);
3484
+ }
3489
3485
 
3490
- .tds-combo-box-popover{
3491
- width:var(--trigger-width);
3492
- max-block-size:inherit;
3493
- padding:var(--t-spacing-1);
3494
- overflow:auto;
3495
- outline:0;
3496
- scrollbar-color:#0004 #0000;
3497
- scrollbar-width:thin;
3486
+ .tds-date-picker-popover{
3487
+ padding:var(--t-spacing-2);
3498
3488
  background:var(--t-surface-color-card);
3499
- background-clip:padding-box;
3500
3489
  border:1px solid var(--t-border-color);
3501
3490
  border-radius:var(--t-border-radius);
3502
3491
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3503
3492
  }
3504
3493
 
3505
- .tds-combo-box-popover[data-entering]{
3506
- animation:tds-combo-box-popover-enter 160ms ease;
3494
+ .tds-date-picker-popover[data-entering]{
3495
+ animation:tds-date-picker-popover-enter 160ms ease;
3507
3496
  }
3508
3497
 
3509
- .tds-combo-box-popover[data-exiting]{
3510
- animation:tds-combo-box-popover-exit 130ms ease;
3498
+ .tds-date-picker-popover[data-exiting]{
3499
+ animation:tds-date-picker-popover-exit 130ms ease;
3511
3500
  }
3512
3501
 
3513
- @keyframes tds-combo-box-popover-enter{
3502
+ @keyframes tds-date-picker-popover-enter{
3514
3503
  from{
3515
3504
  opacity:0;
3516
3505
  transform:translateY(-8px);
3517
3506
  }
3518
3507
  }
3519
3508
 
3520
- @keyframes tds-combo-box-popover-exit{
3509
+ @keyframes tds-date-picker-popover-exit{
3521
3510
  to{
3522
3511
  opacity:0;
3523
3512
  transform:translateY(-8px);
@@ -3525,99 +3514,133 @@ a[class="tds-btn"]{
3525
3514
  }
3526
3515
 
3527
3516
  @media (prefers-reduced-motion: reduce){
3528
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3517
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3529
3518
  animation:none;
3530
3519
  }
3520
+ }
3531
3521
 
3532
- .tds-combo-box-button > svg{
3533
- transition:none;
3534
- }
3522
+ .tds-date-picker-calendar{
3523
+ inline-size:-moz-fit-content;
3524
+ inline-size:fit-content;
3535
3525
  }
3536
3526
 
3537
- .tds-combo-box-list{
3538
- padding:0;
3527
+ .tds-date-picker-calendar-header{
3528
+ display:flex;
3529
+ align-items:center;
3530
+ justify-content:space-between;
3531
+ padding-block-end:var(--t-spacing-1);
3532
+ }
3533
+
3534
+ .tds-date-picker-calendar-title{
3535
+ flex:1;
3539
3536
  margin:0;
3537
+ font-size:var(--t-font-size-md);
3538
+ font-weight:var(--t-font-weight-semibold);
3539
+ text-align:center;
3540
3540
  }
3541
3541
 
3542
- .tds-combo-box-list-item{
3543
- display:block;
3544
- padding-block:var(--t-spacing-1);
3545
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3546
- overflow:hidden;
3547
- text-overflow:ellipsis;
3548
- font-size:1rem;
3542
+ .tds-date-picker-calendar-nav{
3543
+ display:flex;
3544
+ align-items:center;
3545
+ justify-content:center;
3546
+ padding:var(--t-spacing-half);
3549
3547
  color:var(--t-text-color);
3550
- white-space:nowrap;
3551
3548
  cursor:default;
3552
- outline-offset:-1px;
3553
- border-radius:var(--t-border-radius);
3549
+ outline:0;
3550
+ background:transparent;
3551
+ border:0;
3552
+ border-radius:var(--t-border-radius-sm);
3554
3553
  }
3555
3554
 
3556
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3555
+ .tds-date-picker-calendar-nav[data-hovered]{
3557
3556
  background:var(--t-fill-color-neutral-070);
3558
3557
  }
3559
3558
 
3560
- .tds-combo-box-list-item[data-selected]{
3559
+ .tds-date-picker-calendar-nav[data-pressed]{
3561
3560
  background:var(--t-fill-color-button-interaction-ghost-active);
3562
3561
  }
3563
3562
 
3564
- .tds-combo-box-list-item[data-focus-visible]{
3565
- outline:var(--t-focus-ring-outline);
3566
- outline-offset:-1px;
3563
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3564
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3565
+ outline-offset:var(--t-focus-ring-offset);
3567
3566
  }
3568
3567
 
3569
- .tds-combo-box-list-item[data-disabled]{
3568
+ .tds-date-picker-calendar-nav[data-disabled]{
3570
3569
  color:var(--t-form-color-disabled);
3571
3570
  cursor:not-allowed;
3572
3571
  }
3573
3572
 
3574
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3575
- background:transparent;
3576
- }
3577
-
3578
- .tds-combo-box-list-section:not(:first-child){
3579
- margin-block-start:var(--t-spacing-half);
3580
- }
3573
+ .tds-date-picker-calendar-grid{
3574
+ border-collapse:collapse;
3575
+ }
3581
3576
 
3582
- .tds-combo-box-section-header{
3583
- padding-block:var(--t-spacing-1);
3584
- padding-inline:var(--t-spacing-1);
3577
+ .tds-date-picker-calendar-header-cell{
3578
+ padding-block:var(--t-spacing-half);
3585
3579
  font-size:var(--t-font-size-sm);
3586
- font-weight:var(--t-font-weight-semibold);
3580
+ font-weight:var(--t-font-weight-normal);
3587
3581
  color:var(--t-text-color-secondary);
3582
+ text-align:center;
3588
3583
  }
3589
3584
 
3590
- .tds-combo-box-description{
3585
+ .tds-date-picker-calendar-cell{
3591
3586
  display:flex;
3592
- gap:var(--t-spacing-half);
3593
- align-items:flex-start;
3594
- margin:0;
3595
- font-size:var(--t-font-size-sm);
3596
- line-height:1.35;
3597
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3598
- cursor:text;
3587
+ align-items:center;
3588
+ justify-content:center;
3589
+ inline-size:2.25rem;
3590
+ block-size:2.25rem;
3591
+ font-size:var(--t-font-size-md);
3592
+ color:var(--t-text-color);
3593
+ cursor:default;
3594
+ outline:0;
3595
+ border-radius:var(--t-border-radius-sm);
3599
3596
  }
3600
3597
 
3601
- .tds-combo-box-description-invalid-icon{
3602
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3603
- flex-shrink:0;
3604
- margin-block-start:calc(.5lh - .5em);
3605
- line-height:1.35;
3606
- }
3598
+ .tds-date-picker-calendar-cell[data-hovered]{
3599
+ background:var(--t-fill-color-neutral-070);
3600
+ }
3607
3601
 
3608
- .tds-date-picker{
3609
- --tds-date-picker-border-color:var(--t-form-border-color);
3610
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3611
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3612
- --tds-date-picker-background-color:var(--t-form-background-color);
3613
- --tds-date-picker-color:var(--t-form-color);
3614
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3615
- --tds-date-picker-font-size:var(--t-font-size-md);
3616
- --tds-date-picker-min-height:var(--t-container-size-md);
3617
- --tds-date-picker-padding-block:6px;
3618
- --tds-date-picker-button-offset:4px;
3619
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3620
- --tds-date-picker-description-invalid-icon-display:none;
3602
+ .tds-date-picker-calendar-cell[data-pressed]{
3603
+ background:var(--t-fill-color-button-interaction-ghost-active);
3604
+ }
3605
+
3606
+ .tds-date-picker-calendar-cell[data-selected]{
3607
+ color:var(--t-text-color-inverted);
3608
+ background:var(--t-fill-color-interaction);
3609
+ }
3610
+
3611
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3612
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3613
+ outline-offset:var(--t-focus-ring-offset);
3614
+ }
3615
+
3616
+ .tds-date-picker-calendar-cell[data-unavailable]{
3617
+ color:var(--t-text-color-secondary);
3618
+ text-decoration:line-through;
3619
+ cursor:not-allowed;
3620
+ }
3621
+
3622
+ .tds-date-picker-calendar-cell[data-disabled]{
3623
+ color:var(--t-form-color-disabled);
3624
+ cursor:not-allowed;
3625
+ }
3626
+
3627
+ .tds-date-picker-calendar-cell[data-outside-month]{
3628
+ color:var(--t-text-color-secondary);
3629
+ }
3630
+
3631
+ .tds-combo-box{
3632
+ --tds-combo-box-border-color:var(--t-form-border-color);
3633
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3634
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3635
+ --tds-combo-box-background-color:var(--t-form-background-color);
3636
+ --tds-combo-box-color:var(--t-form-color);
3637
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3638
+ --tds-combo-box-font-size:var(--t-font-size-md);
3639
+ --tds-combo-box-min-height:var(--t-container-size-md);
3640
+ --tds-combo-box-padding-block:6px;
3641
+ --tds-combo-box-button-offset:4px;
3642
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3643
+ --tds-combo-box-description-invalid-icon-display:none;
3621
3644
 
3622
3645
  position:relative;
3623
3646
  display:flex;
@@ -3625,291 +3648,268 @@ a[class="tds-btn"]{
3625
3648
  gap:var(--t-spacing-half);
3626
3649
  }
3627
3650
 
3628
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3651
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3629
3652
  margin-left:.25ch;
3630
3653
  color:var(--t-text-color-status-error);
3631
3654
  content:"*";
3632
3655
  }
3633
3656
 
3634
- .tds-date-picker[data-invalid]{
3635
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3636
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3637
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3638
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3639
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3640
- --tds-date-picker-description-invalid-icon-display:inline-block;
3657
+ .tds-combo-box[data-invalid]{
3658
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3659
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3660
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3661
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3662
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3663
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3641
3664
  }
3642
3665
 
3643
- .tds-date-picker[data-disabled]{
3644
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3645
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3646
- --tds-date-picker-color:var(--t-form-color-disabled);
3647
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3666
+ .tds-combo-box[data-disabled]{
3667
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3668
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3669
+ --tds-combo-box-color:var(--t-form-color-disabled);
3648
3670
  }
3649
3671
 
3650
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3672
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3673
+ color:var(--t-form-color-disabled);
3674
+ }
3675
+
3676
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3651
3677
  cursor:not-allowed;
3652
3678
  }
3653
3679
 
3654
- .tds-date-picker--lg{
3655
- --tds-date-picker-min-height:var(--t-container-size-lg);
3656
- --tds-date-picker-font-size:var(--t-font-size-lg);
3657
- --tds-date-picker-button-offset:5px;
3680
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3681
+ transform:rotate(.5turn);
3682
+ }
3683
+
3684
+ .tds-combo-box--lg{
3685
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3686
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3687
+ --tds-combo-box-button-offset:5px;
3658
3688
  }
3659
3689
 
3660
- .tds-date-picker-label{
3690
+ .tds-combo-box-label{
3661
3691
  font-size:var(--t-font-size-md);
3662
3692
  font-weight:var(--t-font-weight-normal);
3663
3693
  color:var(--t-text-color);
3664
3694
  cursor:default;
3665
3695
  }
3666
3696
 
3667
- .tds-date-picker-field{
3697
+ .tds-combo-box-field{
3668
3698
  display:flex;
3669
3699
  align-items:center;
3670
3700
  inline-size:100%;
3671
- min-block-size:var(--tds-date-picker-min-height);
3701
+ min-block-size:var(--tds-combo-box-min-height);
3672
3702
  font-family:inherit;
3673
- font-size:var(--tds-date-picker-font-size);
3703
+ font-size:var(--tds-combo-box-font-size);
3674
3704
  line-height:1;
3675
- color:var(--tds-date-picker-color);
3705
+ color:var(--tds-combo-box-color);
3676
3706
  -webkit-appearance:none;
3677
3707
  -moz-appearance:none;
3678
3708
  appearance:none;
3679
- cursor:text;
3709
+ cursor:default;
3680
3710
  outline:var(--t-focus-ring-width) solid transparent;
3681
3711
  outline-offset:0;
3682
- background-color:var(--tds-date-picker-background-color);
3683
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3712
+ background-color:var(--tds-combo-box-background-color);
3713
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3684
3714
  border-radius:var(--t-form-border-radius);
3685
3715
  }
3686
3716
 
3687
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3688
- border-color:var(--tds-date-picker-border-color-hover);
3717
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3718
+ border-color:var(--tds-combo-box-border-color-hover);
3689
3719
  }
3690
3720
 
3691
- .tds-date-picker-field[data-focus-within]{
3721
+ .tds-combo-box-field[data-focus-within]{
3692
3722
  outline-color:var(--t-focus-ring-color);
3693
3723
  outline-offset:var(--t-focus-ring-offset);
3694
- border-color:var(--tds-date-picker-border-color-active);
3724
+ border-color:var(--tds-combo-box-border-color-active);
3695
3725
  }
3696
3726
 
3697
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3698
- color:var(--t-form-color-readonly);
3699
- background-color:var(--t-form-background-color-readonly);
3700
- border-color:var(--t-form-border-color-readonly);
3727
+ .tds-combo-box-field:has([readonly]){
3728
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3729
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3701
3730
  }
3702
3731
 
3703
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3704
- border-color:var(--t-form-border-color-readonly);
3705
- }
3706
-
3707
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3708
- outline-color:var(--t-focus-ring-color);
3709
- outline-offset:var(--t-focus-ring-offset);
3732
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3710
3733
  border-color:var(--t-form-border-color-hover);
3711
3734
  }
3712
3735
 
3713
- .tds-date-picker-input{
3736
+ .tds-combo-box-input{
3737
+ display:flex;
3714
3738
  flex:1;
3715
- padding-block:var(--tds-date-picker-padding-block);
3739
+ align-items:center;
3740
+ padding-block:var(--tds-combo-box-padding-block);
3716
3741
  padding-inline-start:var(--t-spacing-1);
3717
- font-variant-numeric:tabular-nums;
3718
- }
3719
-
3720
- .tds-date-picker-segment{
3721
- padding-inline:2px;
3722
- caret-color:transparent;
3723
- border-radius:var(--t-border-radius-sm);
3742
+ font-family:inherit;
3743
+ font-size:inherit;
3744
+ color:inherit;
3745
+ outline:0;
3746
+ background:transparent;
3747
+ border:0;
3724
3748
  }
3725
3749
 
3726
- .tds-date-picker-segment[data-placeholder]{
3727
- color:var(--tds-date-picker-placeholder-color);
3750
+ .tds-combo-box-input::-moz-placeholder{
3751
+ color:var(--tds-combo-box-placeholder-color);
3752
+ -moz-user-select:none;
3753
+ user-select:none;
3728
3754
  }
3729
3755
 
3730
- .tds-date-picker-segment[data-focused]{
3731
- color:var(--t-text-color-inverted);
3732
- outline:0;
3733
- background:var(--t-fill-color-interaction);
3756
+ .tds-combo-box-input::placeholder{
3757
+ color:var(--tds-combo-box-placeholder-color);
3758
+ -webkit-user-select:none;
3759
+ -moz-user-select:none;
3760
+ user-select:none;
3734
3761
  }
3735
3762
 
3736
- .tds-date-picker-segment-separator{
3737
- padding-inline:0;
3738
- color:var(--tds-date-picker-placeholder-color);
3763
+ .tds-combo-box-button{
3764
+ flex-shrink:0;
3765
+ align-self:center;
3766
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3767
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3768
+ padding:0;
3769
+ margin-inline-end:var(--tds-combo-box-button-offset);
3739
3770
  }
3740
3771
 
3741
- .tds-date-picker-description{
3742
- display:flex;
3743
- gap:var(--t-spacing-half);
3744
- align-items:flex-start;
3745
- margin:0;
3746
- font-size:var(--t-font-size-sm);
3747
- line-height:1.35;
3748
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3749
- cursor:text;
3750
- }
3772
+ .tds-combo-box-button > svg{
3773
+ inline-size:var(--tds-combo-box-font-size);
3774
+ block-size:var(--tds-combo-box-font-size);
3775
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3776
+ }
3751
3777
 
3752
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3753
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3754
- flex-shrink:0;
3755
- margin-block-start:calc(.5lh - .5em);
3756
- line-height:1.35;
3778
+ .tds-combo-box-button:not(.tds-btn){
3779
+ display:inline-flex;
3780
+ align-items:center;
3781
+ justify-content:center;
3782
+ inline-size:auto;
3783
+ block-size:auto;
3784
+ margin-inline-end:.75em;
3785
+ color:var(--t-icon-color);
3786
+ cursor:default;
3787
+ background:transparent;
3788
+ border:0;
3757
3789
  }
3758
3790
 
3759
- .tds-date-picker-button{
3760
- flex-shrink:0;
3761
- align-self:center;
3762
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3763
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3764
- padding:0;
3765
- margin-inline-end:var(--tds-date-picker-button-offset);
3766
- }
3791
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3792
+ outline:0;
3793
+ }
3767
3794
 
3768
- .tds-date-picker-popover{
3769
- padding:var(--t-spacing-2);
3795
+ .tds-combo-box-popover{
3796
+ width:var(--trigger-width);
3797
+ max-block-size:inherit;
3798
+ padding:var(--t-spacing-1);
3799
+ overflow:auto;
3800
+ outline:0;
3801
+ scrollbar-color:#0004 #0000;
3802
+ scrollbar-width:thin;
3770
3803
  background:var(--t-surface-color-card);
3804
+ background-clip:padding-box;
3771
3805
  border:1px solid var(--t-border-color);
3772
3806
  border-radius:var(--t-border-radius);
3773
3807
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3774
3808
  }
3775
3809
 
3776
- .tds-date-picker-popover[data-entering]{
3777
- animation:tds-date-picker-popover-enter 160ms ease;
3810
+ .tds-combo-box-popover[data-entering]{
3811
+ animation:tds-combo-box-popover-enter 160ms ease;
3778
3812
  }
3779
3813
 
3780
- .tds-date-picker-popover[data-exiting]{
3781
- animation:tds-date-picker-popover-exit 130ms ease;
3814
+ .tds-combo-box-popover[data-exiting]{
3815
+ animation:tds-combo-box-popover-exit 130ms ease;
3782
3816
  }
3783
3817
 
3784
- @keyframes tds-date-picker-popover-enter{
3818
+ @keyframes tds-combo-box-popover-enter{
3785
3819
  from{
3786
3820
  opacity:0;
3787
3821
  transform:translateY(-8px);
3788
3822
  }
3789
3823
  }
3790
3824
 
3791
- @keyframes tds-date-picker-popover-exit{
3825
+ @keyframes tds-combo-box-popover-exit{
3792
3826
  to{
3793
3827
  opacity:0;
3794
- transform:translateY(-8px);
3795
- }
3796
- }
3797
-
3798
- @media (prefers-reduced-motion: reduce){
3799
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3800
- animation:none;
3801
- }
3802
- }
3803
-
3804
- .tds-date-picker-calendar{
3805
- inline-size:-moz-fit-content;
3806
- inline-size:fit-content;
3807
- }
3808
-
3809
- .tds-date-picker-calendar-header{
3810
- display:flex;
3811
- align-items:center;
3812
- justify-content:space-between;
3813
- padding-block-end:var(--t-spacing-1);
3814
- }
3815
-
3816
- .tds-date-picker-calendar-title{
3817
- flex:1;
3818
- margin:0;
3819
- font-size:var(--t-font-size-md);
3820
- font-weight:var(--t-font-weight-semibold);
3821
- text-align:center;
3822
- }
3823
-
3824
- .tds-date-picker-calendar-nav{
3825
- display:flex;
3826
- align-items:center;
3827
- justify-content:center;
3828
- padding:var(--t-spacing-half);
3829
- color:var(--t-text-color);
3830
- cursor:default;
3831
- outline:0;
3832
- background:transparent;
3833
- border:0;
3834
- border-radius:var(--t-border-radius-sm);
3835
- }
3836
-
3837
- .tds-date-picker-calendar-nav[data-hovered]{
3838
- background:var(--t-fill-color-neutral-070);
3839
- }
3840
-
3841
- .tds-date-picker-calendar-nav[data-pressed]{
3842
- background:var(--t-fill-color-button-interaction-ghost-active);
3843
- }
3844
-
3845
- .tds-date-picker-calendar-nav[data-focus-visible]{
3846
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3847
- outline-offset:var(--t-focus-ring-offset);
3828
+ transform:translateY(-8px);
3848
3829
  }
3830
+ }
3849
3831
 
3850
- .tds-date-picker-calendar-nav[data-disabled]{
3851
- color:var(--t-form-color-disabled);
3852
- cursor:not-allowed;
3853
- }
3832
+ @media (prefers-reduced-motion: reduce){
3833
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3834
+ animation:none;
3835
+ }
3854
3836
 
3855
- .tds-date-picker-calendar-grid{
3856
- border-collapse:collapse;
3837
+ .tds-combo-box-button > svg{
3838
+ transition:none;
3839
+ }
3857
3840
  }
3858
3841
 
3859
- .tds-date-picker-calendar-header-cell{
3860
- padding-block:var(--t-spacing-half);
3861
- font-size:var(--t-font-size-sm);
3862
- font-weight:var(--t-font-weight-normal);
3863
- color:var(--t-text-color-secondary);
3864
- text-align:center;
3842
+ .tds-combo-box-list{
3843
+ padding:0;
3844
+ margin:0;
3865
3845
  }
3866
3846
 
3867
- .tds-date-picker-calendar-cell{
3868
- display:flex;
3869
- align-items:center;
3870
- justify-content:center;
3871
- inline-size:2.25rem;
3872
- block-size:2.25rem;
3873
- font-size:var(--t-font-size-md);
3847
+ .tds-combo-box-list-item{
3848
+ display:block;
3849
+ padding-block:var(--t-spacing-1);
3850
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3851
+ overflow:hidden;
3852
+ text-overflow:ellipsis;
3853
+ font-size:1rem;
3874
3854
  color:var(--t-text-color);
3855
+ white-space:nowrap;
3875
3856
  cursor:default;
3876
- outline:0;
3877
- border-radius:var(--t-border-radius-sm);
3857
+ outline-offset:-1px;
3858
+ border-radius:var(--t-border-radius);
3878
3859
  }
3879
3860
 
3880
- .tds-date-picker-calendar-cell[data-hovered]{
3861
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3881
3862
  background:var(--t-fill-color-neutral-070);
3882
3863
  }
3883
3864
 
3884
- .tds-date-picker-calendar-cell[data-pressed]{
3865
+ .tds-combo-box-list-item[data-selected]{
3885
3866
  background:var(--t-fill-color-button-interaction-ghost-active);
3886
3867
  }
3887
3868
 
3888
- .tds-date-picker-calendar-cell[data-selected]{
3889
- color:var(--t-text-color-inverted);
3890
- background:var(--t-fill-color-interaction);
3891
- }
3892
-
3893
- .tds-date-picker-calendar-cell[data-focus-visible]{
3894
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3895
- outline-offset:var(--t-focus-ring-offset);
3896
- }
3897
-
3898
- .tds-date-picker-calendar-cell[data-unavailable]{
3899
- color:var(--t-text-color-secondary);
3900
- text-decoration:line-through;
3901
- cursor:not-allowed;
3869
+ .tds-combo-box-list-item[data-focus-visible]{
3870
+ outline:var(--t-focus-ring-outline);
3871
+ outline-offset:-1px;
3902
3872
  }
3903
3873
 
3904
- .tds-date-picker-calendar-cell[data-disabled]{
3874
+ .tds-combo-box-list-item[data-disabled]{
3905
3875
  color:var(--t-form-color-disabled);
3906
3876
  cursor:not-allowed;
3907
3877
  }
3908
3878
 
3909
- .tds-date-picker-calendar-cell[data-outside-month]{
3910
- color:var(--t-text-color-secondary);
3879
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3880
+ background:transparent;
3881
+ }
3882
+
3883
+ .tds-combo-box-list-section:not(:first-child){
3884
+ margin-block-start:var(--t-spacing-half);
3911
3885
  }
3912
3886
 
3887
+ .tds-combo-box-section-header{
3888
+ padding-block:var(--t-spacing-1);
3889
+ padding-inline:var(--t-spacing-1);
3890
+ font-size:var(--t-font-size-sm);
3891
+ font-weight:var(--t-font-weight-semibold);
3892
+ color:var(--t-text-color-secondary);
3893
+ }
3894
+
3895
+ .tds-combo-box-description{
3896
+ display:flex;
3897
+ gap:var(--t-spacing-half);
3898
+ align-items:flex-start;
3899
+ margin:0;
3900
+ font-size:var(--t-font-size-sm);
3901
+ line-height:1.35;
3902
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3903
+ cursor:text;
3904
+ }
3905
+
3906
+ .tds-combo-box-description-invalid-icon{
3907
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3908
+ flex-shrink:0;
3909
+ margin-block-start:calc(.5lh - .5em);
3910
+ line-height:1.35;
3911
+ }
3912
+
3913
3913
  .tds-number-stepper{
3914
3914
  --tds-number-stepper-border-color:var(--t-form-border-color);
3915
3915
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -4063,84 +4063,6 @@ a[class="tds-btn"]{
4063
4063
  line-height:1.35;
4064
4064
  }
4065
4065
 
4066
- .tds-checkbox-group{
4067
- --tds-checkbox-group-font-size:var(--t-font-size-md);
4068
- --tds-checkbox-group-line-height:1.4;
4069
- --tds-checkbox-group-gap:var(--t-spacing-1);
4070
-
4071
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4072
-
4073
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4074
- --tds-checkbox-group-description-line-height:1.35;
4075
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4076
- --tds-checkbox-group-description-invalid-icon-display:none;
4077
- display:flex;
4078
- flex-direction:column;
4079
- gap:var(--tds-checkbox-group-gap);
4080
- padding:0;
4081
- margin:0;
4082
-
4083
- font-size:var(--tds-checkbox-group-font-size);
4084
- line-height:var(--tds-checkbox-group-line-height);
4085
- border:0;
4086
- }
4087
-
4088
- .tds-checkbox-group legend{
4089
- padding:0;
4090
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4091
- }
4092
-
4093
- .tds-checkbox-group:has(.tds-checkbox-group-description){
4094
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4095
- }
4096
-
4097
- .tds-checkbox-group[aria-invalid="true"]{
4098
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4099
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
4100
- }
4101
-
4102
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4103
- margin-left:.25ch;
4104
- color:var(--t-text-color-status-error);
4105
- content:"*";
4106
- }
4107
-
4108
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4109
- content:none;
4110
- }
4111
-
4112
- .tds-checkbox-group-fields{
4113
- display:flex;
4114
- flex-direction:column;
4115
- gap:var(--tds-checkbox-group-gap);
4116
- align-items:flex-start;
4117
- }
4118
-
4119
- .tds-checkbox-group-description{
4120
- display:flex;
4121
- gap:var(--t-spacing-half);
4122
- align-items:flex-start;
4123
- margin:0;
4124
- font-size:var(--tds-checkbox-group-description-font-size);
4125
- line-height:var(--tds-checkbox-group-description-line-height);
4126
- color:var(--tds-checkbox-group-description-color);
4127
- cursor:text;
4128
- }
4129
-
4130
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4131
- display:var(--tds-checkbox-group-description-invalid-icon-display);
4132
- flex-shrink:0;
4133
- margin-top:calc(.5lh - .5em);
4134
- line-height:var(--tds-checkbox-group-description-line-height);
4135
- }
4136
-
4137
- .tds-checkbox-group--sm{
4138
- --tds-checkbox-group-line-height:1.35;
4139
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
4140
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4141
- --tds-checkbox-group-description-line-height:1.3;
4142
- }
4143
-
4144
4066
  .tds-time-field{
4145
4067
  --tds-time-field-border-color:var(--t-form-border-color);
4146
4068
  --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
@@ -4289,6 +4211,84 @@ a[class="tds-btn"]{
4289
4211
  line-height:1.35;
4290
4212
  }
4291
4213
 
4214
+ .tds-checkbox-group{
4215
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
4216
+ --tds-checkbox-group-line-height:1.4;
4217
+ --tds-checkbox-group-gap:var(--t-spacing-1);
4218
+
4219
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4220
+
4221
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4222
+ --tds-checkbox-group-description-line-height:1.35;
4223
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4224
+ --tds-checkbox-group-description-invalid-icon-display:none;
4225
+ display:flex;
4226
+ flex-direction:column;
4227
+ gap:var(--tds-checkbox-group-gap);
4228
+ padding:0;
4229
+ margin:0;
4230
+
4231
+ font-size:var(--tds-checkbox-group-font-size);
4232
+ line-height:var(--tds-checkbox-group-line-height);
4233
+ border:0;
4234
+ }
4235
+
4236
+ .tds-checkbox-group legend{
4237
+ padding:0;
4238
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4239
+ }
4240
+
4241
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
4242
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4243
+ }
4244
+
4245
+ .tds-checkbox-group[aria-invalid="true"]{
4246
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4247
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
4248
+ }
4249
+
4250
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4251
+ margin-left:.25ch;
4252
+ color:var(--t-text-color-status-error);
4253
+ content:"*";
4254
+ }
4255
+
4256
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4257
+ content:none;
4258
+ }
4259
+
4260
+ .tds-checkbox-group-fields{
4261
+ display:flex;
4262
+ flex-direction:column;
4263
+ gap:var(--tds-checkbox-group-gap);
4264
+ align-items:flex-start;
4265
+ }
4266
+
4267
+ .tds-checkbox-group-description{
4268
+ display:flex;
4269
+ gap:var(--t-spacing-half);
4270
+ align-items:flex-start;
4271
+ margin:0;
4272
+ font-size:var(--tds-checkbox-group-description-font-size);
4273
+ line-height:var(--tds-checkbox-group-description-line-height);
4274
+ color:var(--tds-checkbox-group-description-color);
4275
+ cursor:text;
4276
+ }
4277
+
4278
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4279
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
4280
+ flex-shrink:0;
4281
+ margin-top:calc(.5lh - .5em);
4282
+ line-height:var(--tds-checkbox-group-description-line-height);
4283
+ }
4284
+
4285
+ .tds-checkbox-group--sm{
4286
+ --tds-checkbox-group-line-height:1.35;
4287
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
4288
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4289
+ --tds-checkbox-group-description-line-height:1.3;
4290
+ }
4291
+
4292
4292
  .t-banner{
4293
4293
  --t-banner-font-size:var(--t-font-size-md);
4294
4294
  --t-banner-font-color:var(--t-text-color);