@planningcenter/tapestry 3.2.3-rc.11 → 3.2.3-rc.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1155 -1155
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1155 -1155
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -360,523 +360,347 @@ 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
+ .tds-radio-group{
558
+ --tds-radio-group-font-size:var(--t-font-size-md);
559
+ --tds-radio-group-line-height:1.4;
560
+ --tds-radio-group-gap:var(--t-spacing-1);
561
+
562
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
563
+
564
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
565
+ --tds-radio-group-description-line-height:1.35;
566
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
567
+ --tds-radio-group-description-invalid-icon-display:none;
568
+ display:flex;
569
+ flex-direction:column;
570
+ gap:var(--tds-radio-group-gap);
571
+ padding:0;
572
+ margin:0;
573
+
574
+ font-size:var(--tds-radio-group-font-size);
575
+ line-height:var(--tds-radio-group-line-height);
576
+ border:0;
577
+ }
578
+
579
+ .tds-radio-group legend{
580
+ padding:0;
581
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
577
582
  }
578
583
 
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%;
584
+ .tds-radio-group:has(.tds-radio-group-description){
585
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
585
586
  }
586
587
 
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;
588
+ .tds-radio-group[aria-invalid="true"]{
589
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
590
+ --tds-radio-group-description-invalid-icon-display:inline-block;
592
591
  }
593
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
- width:auto;
592
+
593
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
594
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
595
595
  }
596
596
 
597
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
- justify-content:flex-end;
597
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
598
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
599
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
600
+ }
601
+
602
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
603
+ --tds-radio-input-background-color:var(--t-form-background-color);
604
+ }
605
+
606
+ .tds-radio-group:has(input:required) legend::after{
607
+ margin-left:.25ch;
608
+ color:var(--t-text-color-status-error);
609
+ content:"*";
599
610
  }
600
- }
601
611
 
602
- .tds-page-header-phone,
603
- .tds-page-header-email{
604
- color:var(--tds-page-header-color);
605
- white-space:nowrap;
612
+ .tds-radio-group-fields{
613
+ display:flex;
614
+ flex-direction:column;
615
+ gap:var(--tds-radio-group-gap);
616
+ align-items:flex-start;
606
617
  }
607
618
 
608
- .tds-page-header-email{
609
- max-width:100%;
610
- overflow:hidden;
611
- text-overflow:ellipsis;
619
+ .tds-radio-group-description{
620
+ display:flex;
621
+ gap:var(--t-spacing-half);
622
+ align-items:flex-start;
623
+ margin:0;
624
+ font-size:var(--tds-radio-group-description-font-size);
625
+ line-height:var(--tds-radio-group-description-line-height);
626
+ color:var(--tds-radio-group-description-color);
627
+ cursor:text;
612
628
  }
613
629
 
614
- @keyframes indicator-pulse{
615
- 0%{
616
- opacity:.3;
617
- transform:scale(.9);
630
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
631
+ display:var(--tds-radio-group-description-invalid-icon-display);
632
+ flex-shrink:0;
633
+ margin-top:calc(.5lh - .5em);
634
+ line-height:var(--tds-radio-group-description-line-height);
618
635
  }
619
636
 
620
- 100%{
621
- opacity:0;
622
- transform:scale(1.75);
623
- }
637
+ .tds-radio-group--sm{
638
+ --tds-radio-group-line-height:1.35;
639
+ --tds-radio-group-font-size:var(--t-font-size-sm);
640
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
641
+ --tds-radio-group-description-line-height:1.3;
624
642
  }
625
643
 
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;
644
+ .tds-radio{
645
+ --tds-radio-font-size:var(--t-font-size-md);
646
+ --tds-radio-cursor:pointer;
647
+ --tds-radio-line-height:1.4;
648
+ --tds-radio-transition-property:border-width;
636
649
 
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);
650
+ --tds-radio-input-size:var(--t-element-size-md);
651
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
652
+ --tds-radio-input-border-color:var(--t-form-border-color);
653
+ --tds-radio-input-border-width:var(--t-form-border-width);
654
+ --tds-radio-input-background-color:transparent;
641
655
 
642
- --tds-checkbox-label-color:var(--t-form-color);
656
+ --tds-radio-label-color:var(--t-form-color);
643
657
 
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;
658
+ --tds-radio-description-font-size:var(--t-font-size-sm);
659
+ --tds-radio-description-line-height:1.35;
660
+ --tds-radio-description-color:var(--t-text-color-secondary);
648
661
 
649
662
  position:relative;
650
663
  display:inline-grid;
651
664
  grid-template-columns:auto;
652
665
  grid-auto-columns:1fr;
653
666
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
654
- line-height:var(--tds-checkbox-line-height);
655
- cursor:var(--tds-checkbox-cursor);
667
+ line-height:var(--tds-radio-line-height);
668
+ cursor:var(--tds-radio-cursor);
656
669
  -webkit-user-select:none;
657
670
  -moz-user-select:none;
658
671
  user-select:none;
659
672
  }
660
673
 
661
- .tds-checkbox label{
674
+ .tds-radio label{
662
675
  grid-area:1 / 2;
663
- font-size:var(--tds-checkbox-font-size);
676
+ font-size:var(--tds-radio-font-size);
664
677
  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;
678
+ color:var(--tds-radio-label-color);
679
+ cursor:var(--tds-radio-cursor);
671
680
  }
672
681
 
673
- .tds-checkbox input[type="checkbox"]{
682
+ .tds-radio input[type="radio"]{
674
683
  position:relative;
675
684
  width:1em;
676
685
  height:1em;
677
686
  margin:calc((1lh - 1em) / 2) 0 0;
678
- font-size:var(--tds-checkbox-font-size);
687
+ font-size:var(--tds-radio-font-size);
679
688
  line-height:inherit;
680
689
  -webkit-appearance:none;
681
690
  -moz-appearance:none;
682
691
  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);
692
+ cursor:var(--tds-radio-cursor);
693
+ background-color:var(--tds-radio-input-background-color);
694
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
695
+ border-radius:var(--tds-radio-input-border-radius);
687
696
  transition-timing-function:var(--t-ease-in-out);
688
697
  transition-duration:var(--t-duration-200);
689
- transition-property:var(--tds-checkbox-transition-property);
698
+ transition-property:var(--tds-radio-transition-property);
690
699
  }
691
700
 
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);
872
- transition-timing-function:var(--t-ease-in-out);
873
- transition-duration:var(--t-duration-200);
874
- transition-property:var(--tds-radio-transition-property);
875
- }
876
-
877
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
878
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
879
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
701
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
702
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
703
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
880
704
  }
881
705
 
882
706
  :is(.tds-radio input[type="radio"]):focus-visible{
@@ -949,115 +773,145 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
949
773
  --tds-radio-description-line-height:1.3;
950
774
  }
951
775
 
776
+ .tds-toggle-switch{
777
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
778
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
779
+ --tds-toggle-switch-cursor:pointer;
780
+ --tds-toggle-switch-display:inline-grid;
781
+ --tds-toggle-switch-line-height:1.4;
952
782
 
953
- :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{
954
- -webkit-appearance:none;
955
- appearance:none;
956
- }
957
-
958
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
959
- inline-size:1em;
960
- block-size:2em;
961
- }
962
-
963
- @supports (field-sizing: content){
964
- .tds-input--auto-width{
965
- inline-size:-moz-fit-content;
966
- inline-size:fit-content;
967
- min-inline-size:min(100%, 122px);
968
- }
969
-
970
- .tds-input--auto-width input{
971
- field-sizing:content;
972
- inline-size:auto;
973
- }
974
- }
783
+ --tds-toggle-switch-label-color:var(--t-form-color);
975
784
 
976
- .tds-radio-group{
977
- --tds-radio-group-font-size:var(--t-font-size-md);
978
- --tds-radio-group-line-height:1.4;
979
- --tds-radio-group-gap:var(--t-spacing-1);
785
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
786
+ --tds-toggle-switch-track-outline:none;
787
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
788
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
789
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
980
790
 
981
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
791
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
792
+ --tds-toggle-switch-thumb-transform:translateX(0);
793
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
982
794
 
983
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
984
- --tds-radio-group-description-line-height:1.35;
985
- --tds-radio-group-description-color:var(--t-text-color-secondary);
986
- --tds-radio-group-description-invalid-icon-display:none;
987
- display:flex;
988
- flex-direction:column;
989
- gap:var(--tds-radio-group-gap);
990
- padding:0;
991
- margin:0;
795
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
796
+ --tds-toggle-switch-description-line-height:1.35;
797
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
798
+ position:relative;
992
799
 
993
- font-size:var(--tds-radio-group-font-size);
994
- line-height:var(--tds-radio-group-line-height);
995
- border:0;
800
+ display:var(--tds-toggle-switch-display);
801
+ grid-template-columns:auto;
802
+ grid-auto-columns:1fr;
803
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
804
+ -webkit-user-select:none;
805
+ -moz-user-select:none;
806
+ user-select:none;
996
807
  }
997
808
 
998
- .tds-radio-group legend{
999
- padding:0;
1000
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
809
+ .tds-toggle-switch input[type="checkbox"]{
810
+ position:absolute;
811
+ width:var(--tds-toggle-switch-track-width);
812
+ height:var(--tds-toggle-switch-track-height);
813
+ margin:0;
814
+ -webkit-appearance:none;
815
+ -moz-appearance:none;
816
+ appearance:none;
817
+ cursor:var(--tds-toggle-switch-cursor);
818
+ outline:var(--tds-toggle-switch-track-outline);
819
+ outline-offset:var(--t-focus-ring-offset);
820
+ background-color:transparent;
821
+ border:0;
822
+ border-radius:var(--t-border-radius-round);
1001
823
  }
1002
824
 
1003
- .tds-radio-group:has(.tds-radio-group-description){
1004
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1005
- }
825
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
826
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
827
+ }
1006
828
 
1007
- .tds-radio-group[aria-invalid="true"]{
1008
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1009
- --tds-radio-group-description-invalid-icon-display:inline-block;
829
+ .tds-toggle-switch label{
830
+ display:inline-flex;
831
+ grid-area:1 / 2;
832
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
833
+ column-gap:var(--tds-toggle-switch-column-gap);
834
+ margin-top:-.09375em;
835
+ font-size:var(--tds-toggle-switch-font-size);
836
+ font-weight:var(--t-font-weight-normal);
837
+ line-height:var(--tds-toggle-switch-line-height);
838
+ color:var(--tds-toggle-switch-label-color);
839
+ cursor:var(--tds-toggle-switch-cursor);
1010
840
  }
1011
841
 
1012
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1013
- --tds-radio-input-border-color:var(--t-form-border-color-error);
842
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
843
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
844
+ }
845
+
846
+ .tds-toggle-switch:has(input:checked){
847
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
848
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
849
+ }
850
+
851
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
852
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1014
853
  }
1015
854
 
1016
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1017
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1018
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1019
- }
855
+ .tds-toggle-switch:has(input:disabled){
856
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
857
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
858
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
859
+ --tds-toggle-switch-cursor:not-allowed;
860
+ }
1020
861
 
1021
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1022
- --tds-radio-input-background-color:var(--t-form-background-color);
1023
- }
862
+ .tds-toggle-switch-track{
863
+ position:relative;
864
+ flex-shrink:0;
865
+ width:var(--tds-toggle-switch-track-width);
866
+ height:var(--tds-toggle-switch-track-height);
867
+ background-color:var(--tds-toggle-switch-track-background-color);
868
+ border-radius:var(--t-border-radius-round);
869
+ transition:var(--tds-toggle-switch-track-transition);
870
+ }
1024
871
 
1025
- .tds-radio-group:has(input:required) legend::after{
1026
- margin-left:.25ch;
1027
- color:var(--t-text-color-status-error);
1028
- content:"*";
1029
- }
872
+ .tds-toggle-switch-track::before{
873
+ position:absolute;
874
+ top:var(--t-spacing-fourth);
875
+ left:var(--t-spacing-fourth);
876
+ width:var(--tds-toggle-switch-thumb-size);
877
+ height:var(--tds-toggle-switch-thumb-size);
878
+ content:"";
879
+ background-color:#fff;
880
+ border-radius:var(--t-border-radius-round);
881
+ transform:var(--tds-toggle-switch-thumb-transform);
882
+ transition:var(--tds-toggle-switch-thumb-transition);
883
+ }
1030
884
 
1031
- .tds-radio-group-fields{
1032
- display:flex;
1033
- flex-direction:column;
1034
- gap:var(--tds-radio-group-gap);
1035
- align-items:flex-start;
885
+ @media (prefers-reduced-motion: reduce){
886
+
887
+ .tds-toggle-switch-track{
888
+ --tds-toggle-switch-track-transition:none;
889
+ --tds-toggle-switch-thumb-transition:none;
1036
890
  }
891
+ }
1037
892
 
1038
- .tds-radio-group-description{
893
+ .tds-toggle-switch-description{
1039
894
  display:flex;
1040
- gap:var(--t-spacing-half);
895
+ grid-area:2 / 2;
1041
896
  align-items:flex-start;
1042
897
  margin:0;
1043
- font-size:var(--tds-radio-group-description-font-size);
1044
- line-height:var(--tds-radio-group-description-line-height);
1045
- color:var(--tds-radio-group-description-color);
898
+ font-size:var(--tds-toggle-switch-description-font-size);
899
+ line-height:var(--tds-toggle-switch-description-line-height);
900
+ color:var(--tds-toggle-switch-description-color);
1046
901
  cursor:text;
1047
902
  }
1048
903
 
1049
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1050
- display:var(--tds-radio-group-description-invalid-icon-display);
1051
- flex-shrink:0;
1052
- margin-top:calc(.5lh - .5em);
1053
- line-height:var(--tds-radio-group-description-line-height);
1054
- }
904
+ .tds-toggle-switch--sm{
905
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
906
+ --tds-toggle-switch-line-height:1.35;
907
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
908
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
909
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
910
+ --tds-toggle-switch-description-line-height:1.3;
911
+ }
1055
912
 
1056
- .tds-radio-group--sm{
1057
- --tds-radio-group-line-height:1.35;
1058
- --tds-radio-group-font-size:var(--t-font-size-sm);
1059
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1060
- --tds-radio-group-description-line-height:1.3;
913
+ .tds-toggle-switch--hide-label{
914
+ --tds-toggle-switch-display:inline-flex;
1061
915
  }
1062
916
 
1063
917
  .tds-input:has(textarea){
@@ -1165,147 +1019,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1165
1019
  }
1166
1020
  }
1167
1021
 
1168
- .tds-toggle-switch{
1169
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1170
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1171
- --tds-toggle-switch-cursor:pointer;
1172
- --tds-toggle-switch-display:inline-grid;
1173
- --tds-toggle-switch-line-height:1.4;
1174
-
1175
- --tds-toggle-switch-label-color:var(--t-form-color);
1176
-
1177
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1178
- --tds-toggle-switch-track-outline:none;
1179
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1180
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1181
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1182
-
1183
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1184
- --tds-toggle-switch-thumb-transform:translateX(0);
1185
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1186
-
1187
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1188
- --tds-toggle-switch-description-line-height:1.35;
1189
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1190
- position:relative;
1191
-
1192
- display:var(--tds-toggle-switch-display);
1193
- grid-template-columns:auto;
1194
- grid-auto-columns:1fr;
1195
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1196
- -webkit-user-select:none;
1197
- -moz-user-select:none;
1198
- user-select:none;
1199
- }
1200
-
1201
- .tds-toggle-switch input[type="checkbox"]{
1202
- position:absolute;
1203
- width:var(--tds-toggle-switch-track-width);
1204
- height:var(--tds-toggle-switch-track-height);
1205
- margin:0;
1206
- -webkit-appearance:none;
1207
- -moz-appearance:none;
1208
- appearance:none;
1209
- cursor:var(--tds-toggle-switch-cursor);
1210
- outline:var(--tds-toggle-switch-track-outline);
1211
- outline-offset:var(--t-focus-ring-offset);
1212
- background-color:transparent;
1213
- border:0;
1214
- border-radius:var(--t-border-radius-round);
1215
- }
1216
-
1217
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1218
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1219
- }
1220
-
1221
- .tds-toggle-switch label{
1222
- display:inline-flex;
1223
- grid-area:1 / 2;
1224
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1225
- column-gap:var(--tds-toggle-switch-column-gap);
1226
- margin-top:-.09375em;
1227
- font-size:var(--tds-toggle-switch-font-size);
1228
- font-weight:var(--t-font-weight-normal);
1229
- line-height:var(--tds-toggle-switch-line-height);
1230
- color:var(--tds-toggle-switch-label-color);
1231
- cursor:var(--tds-toggle-switch-cursor);
1232
- }
1233
-
1234
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1235
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1236
- }
1237
-
1238
- .tds-toggle-switch:has(input:checked){
1239
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1240
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1241
- }
1242
-
1243
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1244
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1245
- }
1246
-
1247
- .tds-toggle-switch:has(input:disabled){
1248
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1249
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1250
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1251
- --tds-toggle-switch-cursor:not-allowed;
1252
- }
1253
-
1254
- .tds-toggle-switch-track{
1255
- position:relative;
1256
- flex-shrink:0;
1257
- width:var(--tds-toggle-switch-track-width);
1258
- height:var(--tds-toggle-switch-track-height);
1259
- background-color:var(--tds-toggle-switch-track-background-color);
1260
- border-radius:var(--t-border-radius-round);
1261
- transition:var(--tds-toggle-switch-track-transition);
1262
- }
1263
-
1264
- .tds-toggle-switch-track::before{
1265
- position:absolute;
1266
- top:var(--t-spacing-fourth);
1267
- left:var(--t-spacing-fourth);
1268
- width:var(--tds-toggle-switch-thumb-size);
1269
- height:var(--tds-toggle-switch-thumb-size);
1270
- content:"";
1271
- background-color:#fff;
1272
- border-radius:var(--t-border-radius-round);
1273
- transform:var(--tds-toggle-switch-thumb-transform);
1274
- transition:var(--tds-toggle-switch-thumb-transition);
1275
- }
1276
-
1277
- @media (prefers-reduced-motion: reduce){
1278
-
1279
- .tds-toggle-switch-track{
1280
- --tds-toggle-switch-track-transition:none;
1281
- --tds-toggle-switch-thumb-transition:none;
1282
- }
1283
- }
1284
-
1285
- .tds-toggle-switch-description{
1286
- display:flex;
1287
- grid-area:2 / 2;
1288
- align-items:flex-start;
1289
- margin:0;
1290
- font-size:var(--tds-toggle-switch-description-font-size);
1291
- line-height:var(--tds-toggle-switch-description-line-height);
1292
- color:var(--tds-toggle-switch-description-color);
1293
- cursor:text;
1294
- }
1295
-
1296
- .tds-toggle-switch--sm{
1297
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1298
- --tds-toggle-switch-line-height:1.35;
1299
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1300
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1301
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1302
- --tds-toggle-switch-description-line-height:1.3;
1303
- }
1304
-
1305
- .tds-toggle-switch--hide-label{
1306
- --tds-toggle-switch-display:inline-flex;
1307
- }
1308
-
1309
1022
  .tds-select{
1310
1023
  --tds-select-border-color:var(--t-form-border-color);
1311
1024
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -1726,16 +1439,303 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1726
1439
  transition:var(--tds-select-dropdown-transition);
1727
1440
  }
1728
1441
 
1729
- :is(.tds-select select:has( > button)) option::checkmark{
1730
- display:none;
1442
+ :is(.tds-select select:has( > button)) option::checkmark{
1443
+ display:none;
1444
+ }
1445
+
1446
+ @starting-style{
1447
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1448
+ opacity:var(--tds-select-dropdown-closed-opacity);
1449
+ translate:var(--tds-select-dropdown-closed-translate);
1450
+ }
1451
+ }
1452
+ }
1453
+
1454
+ @layer t-critical{
1455
+ tds-page-header:not(.hydrated){
1456
+ display:none;
1457
+ }
1458
+ }
1459
+
1460
+ @layer t-component{
1461
+ .tds-page-header{
1462
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1463
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1464
+ --tds-page-header-color:var(--t-text-color);
1465
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1466
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1467
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1468
+ --tds-page-header-padding-x:var(--t-spacing-2);
1469
+ --tds-page-header-padding-y:var(--t-spacing-2);
1470
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1471
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1472
+ --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%);
1473
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1474
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1475
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1476
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1477
+ --tds-page-header-nav-item-border-width:1px;
1478
+
1479
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1480
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1481
+
1482
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1483
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1484
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1485
+
1486
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1487
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1488
+
1489
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1490
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1491
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1492
+
1493
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1494
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1495
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1496
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1497
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1498
+ }
1499
+
1500
+ .tds-page-header--profile{
1501
+ --tds-page-header-padding-y:20px;
1502
+ }
1503
+
1504
+ @supports (color: light-dark(#fff, #000)){
1505
+ .tds-page-header{
1506
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1507
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1508
+ }
1509
+ }
1510
+
1511
+ @media (min-width: 600px){
1512
+ .tds-page-header{
1513
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1514
+ --tds-page-header-color:var(--t-text-color-secondary);
1515
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1516
+ --tds-page-header-padding-x:var(--t-spacing-3);
1517
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1518
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1519
+ --tds-page-header-nav-background:transparent;
1520
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1521
+ --tds-page-header-nav-item-border-width:1px;
1522
+ --tds-page-header-nav-item-color:var(--t-text-color);
1523
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1524
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1525
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1526
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1527
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1528
+ }
1529
+ }
1530
+ }
1531
+
1532
+ .tds-page-header{
1533
+ display:flex;
1534
+ flex-direction:column;
1535
+ padding-top:var(--tds-page-header-padding-y);
1536
+ color:var(--tds-page-header-color);
1537
+ background:var(--tds-page-header-background-color);
1538
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1539
+ }
1540
+
1541
+ .tds-page-header:not(.has-nav){
1542
+ padding-bottom:var(--tds-page-header-padding-y);
1543
+ }
1544
+
1545
+ .tds-page-header.inactive{
1546
+ background:var(--tds-page-header-background-color-inactive);
1547
+ }
1548
+
1549
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1550
+ width:100%;
1551
+ }
1552
+
1553
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1554
+ display:flex;
1555
+ flex-flow:row wrap;
1556
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1557
+ align-items:flex-start;
1558
+ justify-content:flex-start;
1559
+ min-width:0;
1560
+ }
1561
+
1562
+ :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{
1563
+ display:flex;
1564
+ gap:var(--tds-page-header-nav-gap);
1565
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1566
+ margin:0 0 -1px;
1567
+ overflow:auto;
1568
+ list-style:none;
1569
+ background:var(--tds-page-header-nav-background);
1570
+ }
1571
+
1572
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1573
+ position:relative;
1574
+ display:inline-flex;
1575
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1576
+ font-size:var(--t-font-size-sm);
1577
+ line-height:22px;
1578
+ color:var(--tds-page-header-nav-item-color);
1579
+ white-space:nowrap;
1580
+ text-decoration:none;
1581
+ -webkit-appearance:none;
1582
+ -moz-appearance:none;
1583
+ appearance:none;
1584
+ cursor:pointer;
1585
+ outline-offset:-2px;
1586
+ background-color:var(--tds-page-header-nav-item-background-color);
1587
+ background-clip:padding-box;
1588
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1589
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1590
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1591
+ }
1592
+
1593
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1594
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1595
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1596
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1597
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1598
+ }
1599
+
1600
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1601
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1602
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1603
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1604
+ }
1605
+
1606
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1607
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1608
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1609
+ }
1610
+
1611
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1612
+ color:var(--tds-page-header-nav-item-color-disabled);
1613
+ cursor:not-allowed;
1614
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1615
+ opacity:1;
1616
+ }
1617
+
1618
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1619
+ position:relative;
1620
+ }
1621
+
1622
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1623
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1624
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1625
+ }
1626
+
1627
+ :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{
1628
+ position:absolute;
1629
+ top:-5px;
1630
+ right:-2px;
1631
+ width:10px;
1632
+ height:10px;
1633
+ content:"";
1634
+ background:var(--tds-page-header-nav-item-indicator-color);
1635
+ border-radius:50%;
1636
+ }
1637
+
1638
+ @media (prefers-reduced-motion: no-preference){
1639
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1640
+ animation:indicator-pulse 1.25s ease infinite;
1641
+ }
1642
+ }
1643
+
1644
+ .tds-page-header__title-bar{
1645
+ display:flex;
1646
+ flex-direction:column;
1647
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1648
+ align-items:flex-start;
1649
+ justify-content:space-between;
1650
+ padding:0 var(--tds-page-header-padding-x);
1651
+ }
1652
+
1653
+ .tds-page-header--profile > .tds-page-header__title-bar{
1654
+ align-items:center;
1655
+ }
1656
+
1657
+ .tds-page-header__primary{
1658
+ width:100%;
1659
+ }
1660
+
1661
+ .tds-page-header__primary h1{
1662
+ margin:0;
1663
+ font-size:var(--tds-page-header-headline-font-size);
1664
+ font-weight:var(--t-font-weight-normal);
1665
+ line-height:32px;
1666
+ color:var(--tds-page-header-headline-color);
1667
+ overflow-wrap:break-word;
1668
+ }
1669
+
1670
+ @media (min-width: 960px){
1671
+ .tds-page-header__primary{
1672
+ flex:1 1 max-content;
1673
+ width:auto;
1674
+ min-width:0;
1675
+ max-width:100%;
1676
+ }
1677
+
1678
+ .tds-page-header__title-bar,
1679
+ .tds-page-header--profile .tds-page-header__title-bar{
1680
+ flex-flow:row nowrap;
1681
+ row-gap:12px;
1682
+ align-items:flex-start;
1683
+ }
1684
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1685
+ width:auto;
1686
+ }
1687
+
1688
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1689
+ justify-content:flex-end;
1690
+ }
1691
+ }
1692
+
1693
+ .tds-page-header-phone,
1694
+ .tds-page-header-email{
1695
+ color:var(--tds-page-header-color);
1696
+ white-space:nowrap;
1697
+ }
1698
+
1699
+ .tds-page-header-email{
1700
+ max-width:100%;
1701
+ overflow:hidden;
1702
+ text-overflow:ellipsis;
1703
+ }
1704
+
1705
+ @keyframes indicator-pulse{
1706
+ 0%{
1707
+ opacity:.3;
1708
+ transform:scale(.9);
1709
+ }
1710
+
1711
+ 100%{
1712
+ opacity:0;
1713
+ transform:scale(1.75);
1714
+ }
1715
+ }
1716
+
1717
+
1718
+ :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{
1719
+ -webkit-appearance:none;
1720
+ appearance:none;
1731
1721
  }
1732
1722
 
1733
- @starting-style{
1734
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1735
- opacity:var(--tds-select-dropdown-closed-opacity);
1736
- translate:var(--tds-select-dropdown-closed-translate);
1737
- }
1723
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1724
+ inline-size:1em;
1725
+ block-size:2em;
1738
1726
  }
1727
+
1728
+ @supports (field-sizing: content){
1729
+ .tds-input--auto-width{
1730
+ inline-size:-moz-fit-content;
1731
+ inline-size:fit-content;
1732
+ min-inline-size:min(100%, 122px);
1733
+ }
1734
+
1735
+ .tds-input--auto-width input{
1736
+ field-sizing:content;
1737
+ inline-size:auto;
1738
+ }
1739
1739
  }
1740
1740
 
1741
1741
  .tds-input{
@@ -3321,84 +3321,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3321
3321
  @media (prefers-color-scheme: dark){
3322
3322
  }
3323
3323
 
3324
- .tds-checkbox-group{
3325
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3326
- --tds-checkbox-group-line-height:1.4;
3327
- --tds-checkbox-group-gap:var(--t-spacing-1);
3328
-
3329
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3330
-
3331
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3332
- --tds-checkbox-group-description-line-height:1.35;
3333
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3334
- --tds-checkbox-group-description-invalid-icon-display:none;
3335
- display:flex;
3336
- flex-direction:column;
3337
- gap:var(--tds-checkbox-group-gap);
3338
- padding:0;
3339
- margin:0;
3340
-
3341
- font-size:var(--tds-checkbox-group-font-size);
3342
- line-height:var(--tds-checkbox-group-line-height);
3343
- border:0;
3344
- }
3345
-
3346
- .tds-checkbox-group legend{
3347
- padding:0;
3348
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3349
- }
3350
-
3351
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3352
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3353
- }
3354
-
3355
- .tds-checkbox-group[aria-invalid="true"]{
3356
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3357
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3358
- }
3359
-
3360
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3361
- margin-left:.25ch;
3362
- color:var(--t-text-color-status-error);
3363
- content:"*";
3364
- }
3365
-
3366
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3367
- content:none;
3368
- }
3369
-
3370
- .tds-checkbox-group-fields{
3371
- display:flex;
3372
- flex-direction:column;
3373
- gap:var(--tds-checkbox-group-gap);
3374
- align-items:flex-start;
3375
- }
3376
-
3377
- .tds-checkbox-group-description{
3378
- display:flex;
3379
- gap:var(--t-spacing-half);
3380
- align-items:flex-start;
3381
- margin:0;
3382
- font-size:var(--tds-checkbox-group-description-font-size);
3383
- line-height:var(--tds-checkbox-group-description-line-height);
3384
- color:var(--tds-checkbox-group-description-color);
3385
- cursor:text;
3386
- }
3387
-
3388
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3389
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3390
- flex-shrink:0;
3391
- margin-top:calc(.5lh - .5em);
3392
- line-height:var(--tds-checkbox-group-description-line-height);
3393
- }
3394
-
3395
- .tds-checkbox-group--sm{
3396
- --tds-checkbox-group-line-height:1.35;
3397
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3398
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3399
- --tds-checkbox-group-description-line-height:1.3;
3400
- }
3401
-
3402
3324
  .tds-combo-box{
3403
3325
  --tds-combo-box-border-color:var(--t-form-border-color);
3404
3326
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -3621,374 +3543,149 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3621
3543
  padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3622
3544
  overflow:hidden;
3623
3545
  text-overflow:ellipsis;
3624
- font-size:1rem;
3625
- color:var(--t-text-color);
3626
- white-space:nowrap;
3627
- cursor:default;
3628
- outline-offset:-1px;
3629
- border-radius:var(--t-border-radius);
3630
- }
3631
-
3632
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3633
- background:var(--t-fill-color-neutral-070);
3634
- }
3635
-
3636
- .tds-combo-box-list-item[data-selected]{
3637
- background:var(--t-fill-color-button-interaction-ghost-active);
3638
- }
3639
-
3640
- .tds-combo-box-list-item[data-focus-visible]{
3641
- outline:var(--t-focus-ring-outline);
3642
- outline-offset:-1px;
3643
- }
3644
-
3645
- .tds-combo-box-list-item[data-disabled]{
3646
- color:var(--t-form-color-disabled);
3647
- cursor:not-allowed;
3648
- }
3649
-
3650
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3651
- background:transparent;
3652
- }
3653
-
3654
- .tds-combo-box-empty-state{
3655
- padding-block:var(--t-spacing-1);
3656
- padding-inline:var(--t-spacing-2);
3657
- font-size:var(--t-font-size-md);
3658
- color:var(--t-text-color-secondary);
3659
- }
3660
-
3661
- .tds-combo-box-list-section:not(:first-child){
3662
- margin-block-start:var(--t-spacing-half);
3663
- }
3664
-
3665
- .tds-combo-box-section-header{
3666
- padding-block:var(--t-spacing-1);
3667
- padding-inline:var(--t-spacing-1);
3668
- font-size:var(--t-font-size-sm);
3669
- font-weight:var(--t-font-weight-semibold);
3670
- color:var(--t-text-color-secondary);
3671
- }
3672
-
3673
- .tds-combo-box-description{
3674
- display:flex;
3675
- gap:var(--t-spacing-half);
3676
- align-items:flex-start;
3677
- margin:0;
3678
- font-size:var(--t-font-size-sm);
3679
- line-height:1.35;
3680
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3681
- cursor:text;
3682
- }
3683
-
3684
- .tds-combo-box-description-invalid-icon{
3685
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3686
- flex-shrink:0;
3687
- margin-block-start:calc(.5lh - .5em);
3688
- line-height:1.35;
3689
- }
3690
-
3691
- .tds-time-field{
3692
- --tds-time-field-border-color:var(--t-form-border-color);
3693
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3694
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3695
- --tds-time-field-background-color:var(--t-form-background-color);
3696
- --tds-time-field-color:var(--t-form-color);
3697
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3698
- --tds-time-field-font-size:var(--t-font-size-md);
3699
- --tds-time-field-min-height:var(--t-container-size-md);
3700
- --tds-time-field-padding-block:6px;
3701
- --tds-time-field-description-color:var(--t-text-color-secondary);
3702
- --tds-time-field-description-invalid-icon-display:none;
3703
-
3704
- position:relative;
3705
- display:flex;
3706
- flex-direction:column;
3707
- gap:var(--t-spacing-half);
3708
- }
3709
-
3710
- .tds-time-field[data-required] .tds-time-field-label::after{
3711
- margin-left:.25ch;
3712
- color:var(--t-text-color-status-error);
3713
- content:"*";
3714
- }
3715
-
3716
- .tds-time-field[data-invalid]{
3717
- --tds-time-field-border-color:var(--t-form-border-color-error);
3718
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3719
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3720
- --tds-time-field-background-color:var(--t-form-background-color-error);
3721
- --tds-time-field-description-color:var(--t-text-color-status-error);
3722
- --tds-time-field-description-invalid-icon-display:inline-block;
3723
- }
3724
-
3725
- .tds-time-field[data-disabled]{
3726
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3727
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3728
- --tds-time-field-color:var(--t-form-color-disabled);
3729
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3730
- }
3731
-
3732
- .tds-time-field[data-disabled] .tds-time-field-label{
3733
- color:var(--t-form-color-disabled);
3734
- }
3735
-
3736
- .tds-time-field[data-disabled] .tds-time-field-input{
3737
- cursor:not-allowed;
3738
- }
3739
-
3740
- .tds-time-field--lg{
3741
- --tds-time-field-min-height:var(--t-container-size-lg);
3742
- --tds-time-field-font-size:var(--t-font-size-lg);
3743
- }
3744
-
3745
- .tds-time-field-label{
3746
- font-size:var(--t-font-size-md);
3747
- font-weight:var(--t-font-weight-normal);
3748
- color:var(--t-text-color);
3749
- cursor:default;
3750
- }
3751
-
3752
- .tds-time-field-input{
3753
- display:flex;
3754
- align-items:center;
3755
- inline-size:100%;
3756
- min-block-size:var(--tds-time-field-min-height);
3757
- padding-block:var(--tds-time-field-padding-block);
3758
- padding-inline:var(--t-spacing-1);
3759
- font-family:inherit;
3760
- font-size:var(--tds-time-field-font-size);
3761
- font-variant-numeric:tabular-nums;
3762
- line-height:1;
3763
- color:var(--tds-time-field-color);
3764
- cursor:text;
3765
- outline:var(--t-focus-ring-width) solid transparent;
3766
- outline-offset:0;
3767
- background-color:var(--tds-time-field-background-color);
3768
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3769
- border-radius:var(--t-form-border-radius);
3546
+ font-size:1rem;
3547
+ color:var(--t-text-color);
3548
+ white-space:nowrap;
3549
+ cursor:default;
3550
+ outline-offset:-1px;
3551
+ border-radius:var(--t-border-radius);
3770
3552
  }
3771
3553
 
3772
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3773
- border-color:var(--tds-time-field-border-color-hover);
3554
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3555
+ background:var(--t-fill-color-neutral-070);
3774
3556
  }
3775
3557
 
3776
- .tds-time-field-input[data-focus-within]{
3777
- outline-color:var(--t-focus-ring-color);
3778
- outline-offset:var(--t-focus-ring-offset);
3779
- border-color:var(--tds-time-field-border-color-active);
3558
+ .tds-combo-box-list-item[data-selected]{
3559
+ background:var(--t-fill-color-button-interaction-ghost-active);
3780
3560
  }
3781
3561
 
3782
- .tds-time-field-input[data-readonly]{
3783
- color:var(--t-form-color-readonly);
3784
- background-color:var(--t-form-background-color-readonly);
3785
- border-color:var(--t-form-border-color-readonly);
3562
+ .tds-combo-box-list-item[data-focus-visible]{
3563
+ outline:var(--t-focus-ring-outline);
3564
+ outline-offset:-1px;
3786
3565
  }
3787
3566
 
3788
- .tds-time-field-input[data-readonly][data-hovered]{
3789
- border-color:var(--t-form-border-color-readonly);
3790
- }
3567
+ .tds-combo-box-list-item[data-disabled]{
3568
+ color:var(--t-form-color-disabled);
3569
+ cursor:not-allowed;
3570
+ }
3791
3571
 
3792
- .tds-time-field-input[data-readonly][data-focus-within]{
3793
- outline-color:var(--t-focus-ring-color);
3794
- outline-offset:var(--t-focus-ring-offset);
3795
- border-color:var(--t-form-border-color-hover);
3572
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3573
+ background:transparent;
3796
3574
  }
3797
3575
 
3798
- .tds-time-field-segment{
3799
- padding-inline:1px;
3800
- font-variant-numeric:tabular-nums;
3801
- cursor:text;
3802
- caret-color:transparent;
3803
- border-radius:var(--t-border-radius-sm);
3576
+ .tds-combo-box-empty-state{
3577
+ padding-block:var(--t-spacing-1);
3578
+ padding-inline:var(--t-spacing-2);
3579
+ font-size:var(--t-font-size-md);
3580
+ color:var(--t-text-color-secondary);
3804
3581
  }
3805
3582
 
3806
- .tds-time-field-segment[data-placeholder]{
3807
- color:var(--tds-time-field-placeholder-color);
3808
- }
3809
-
3810
- .tds-time-field-segment[data-focused]{
3811
- color:var(--t-text-color-inverted);
3812
- outline:0;
3813
- background:var(--t-fill-color-interaction);
3583
+ .tds-combo-box-list-section:not(:first-child){
3584
+ margin-block-start:var(--t-spacing-half);
3814
3585
  }
3815
3586
 
3816
- .tds-time-field-segment-separator{
3817
- padding-inline:0;
3818
- color:var(--tds-time-field-placeholder-color);
3587
+ .tds-combo-box-section-header{
3588
+ padding-block:var(--t-spacing-1);
3589
+ padding-inline:var(--t-spacing-1);
3590
+ font-size:var(--t-font-size-sm);
3591
+ font-weight:var(--t-font-weight-semibold);
3592
+ color:var(--t-text-color-secondary);
3819
3593
  }
3820
3594
 
3821
- .tds-time-field-description{
3595
+ .tds-combo-box-description{
3822
3596
  display:flex;
3823
3597
  gap:var(--t-spacing-half);
3824
3598
  align-items:flex-start;
3825
3599
  margin:0;
3826
3600
  font-size:var(--t-font-size-sm);
3827
3601
  line-height:1.35;
3828
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3602
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3829
3603
  cursor:text;
3830
3604
  }
3831
3605
 
3832
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3833
- display:var(--tds-time-field-description-invalid-icon-display, none);
3834
- flex-shrink:0;
3835
- margin-block-start:calc(.5lh - .5em);
3836
- line-height:1.35;
3837
- }
3838
-
3839
- .tds-number-stepper{
3840
- --tds-number-stepper-border-color:var(--t-form-border-color);
3841
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3842
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3843
- --tds-number-stepper-background-color:var(--t-form-background-color);
3844
- --tds-number-stepper-color:var(--t-form-color);
3845
- --tds-number-stepper-font-size:var(--t-font-size-md);
3846
- --tds-number-stepper-min-height:var(--t-container-size-md);
3847
- --tds-number-stepper-padding-block:6px;
3848
- --tds-number-stepper-button-offset:4px;
3849
- --tds-number-stepper-button-gap:2px;
3850
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
3851
- --tds-number-stepper-description-invalid-icon-display:none;
3852
-
3853
- position:relative;
3854
- display:flex;
3855
- flex-direction:column;
3856
- gap:var(--t-spacing-half);
3606
+ .tds-combo-box-description-invalid-icon{
3607
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3608
+ flex-shrink:0;
3609
+ margin-block-start:calc(.5lh - .5em);
3610
+ line-height:1.35;
3857
3611
  }
3858
3612
 
3859
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3860
- margin-left:.25ch;
3861
- color:var(--t-text-color-status-error);
3862
- content:"*";
3863
- }
3864
-
3865
- .tds-number-stepper[data-invalid]{
3866
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
3867
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3868
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3869
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
3870
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
3871
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3872
- }
3873
-
3874
- .tds-number-stepper[data-disabled]{
3875
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3876
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3877
- --tds-number-stepper-color:var(--t-form-color-disabled);
3878
- }
3879
-
3880
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3881
- cursor:not-allowed;
3882
- }
3883
-
3884
- .tds-number-stepper--lg{
3885
- --tds-number-stepper-min-height:var(--t-container-size-lg);
3886
- --tds-number-stepper-font-size:var(--t-font-size-lg);
3887
- --tds-number-stepper-button-offset:5px;
3888
- --tds-number-stepper-button-gap:4px;
3889
- }
3613
+ .tds-checkbox-group{
3614
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3615
+ --tds-checkbox-group-line-height:1.4;
3616
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3890
3617
 
3891
- .tds-number-stepper-label{
3892
- font-size:var(--t-font-size-md);
3893
- font-weight:var(--t-font-weight-normal);
3894
- color:var(--t-text-color);
3895
- cursor:default;
3896
- }
3618
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3897
3619
 
3898
- .tds-number-stepper-field{
3620
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3621
+ --tds-checkbox-group-description-line-height:1.35;
3622
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3623
+ --tds-checkbox-group-description-invalid-icon-display:none;
3899
3624
  display:flex;
3900
- gap:var(--tds-number-stepper-button-gap);
3901
- align-items:center;
3902
- inline-size:100%;
3903
- min-block-size:var(--tds-number-stepper-min-height);
3904
- font-family:inherit;
3905
- font-size:var(--tds-number-stepper-font-size);
3906
- line-height:1;
3907
- color:var(--tds-number-stepper-color);
3908
- -webkit-appearance:none;
3909
- -moz-appearance:none;
3910
- appearance:none;
3911
- cursor:default;
3912
- outline:var(--t-focus-ring-width) solid transparent;
3913
- outline-offset:0;
3914
- background-color:var(--tds-number-stepper-background-color);
3915
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3916
- border-radius:var(--t-form-border-radius);
3625
+ flex-direction:column;
3626
+ gap:var(--tds-checkbox-group-gap);
3627
+ padding:0;
3628
+ margin:0;
3629
+
3630
+ font-size:var(--tds-checkbox-group-font-size);
3631
+ line-height:var(--tds-checkbox-group-line-height);
3632
+ border:0;
3917
3633
  }
3918
3634
 
3919
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3920
- border-color:var(--tds-number-stepper-border-color-hover);
3635
+ .tds-checkbox-group legend{
3636
+ padding:0;
3637
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3921
3638
  }
3922
3639
 
3923
- .tds-number-stepper-field[data-focus-within]{
3924
- outline-color:var(--t-focus-ring-color);
3925
- outline-offset:var(--t-focus-ring-offset);
3926
- border-color:var(--tds-number-stepper-border-color-active);
3640
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3641
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3927
3642
  }
3928
3643
 
3929
- .tds-number-stepper-field:has([readonly]){
3930
- --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3931
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3932
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3644
+ .tds-checkbox-group[aria-invalid="true"]{
3645
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3646
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3933
3647
  }
3934
3648
 
3935
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3936
- border-color:var(--t-form-border-color-hover);
3649
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3650
+ margin-left:.25ch;
3651
+ color:var(--t-text-color-status-error);
3652
+ content:"*";
3937
3653
  }
3938
3654
 
3939
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3940
- display:none;
3655
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3656
+ content:none;
3941
3657
  }
3942
3658
 
3943
- .tds-number-stepper-input{
3659
+ .tds-checkbox-group-fields{
3944
3660
  display:flex;
3945
- flex:1;
3946
- align-items:center;
3947
- min-inline-size:0;
3948
- padding-block:var(--tds-number-stepper-padding-block);
3949
- padding-inline:var(--t-spacing-1);
3950
- font-family:inherit;
3951
- font-size:inherit;
3952
- color:inherit;
3953
- outline:0;
3954
- background:transparent;
3955
- border:0;
3956
- }
3957
-
3958
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3959
- margin:0;
3960
- -webkit-appearance:none;
3961
- appearance:none;
3962
- }
3963
-
3964
- .tds-number-stepper-button{
3965
- flex-shrink:0;
3966
- align-self:center;
3967
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3968
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3969
- padding:0;
3661
+ flex-direction:column;
3662
+ gap:var(--tds-checkbox-group-gap);
3663
+ align-items:flex-start;
3970
3664
  }
3971
3665
 
3972
- .tds-number-stepper-button:last-of-type{
3973
- margin-inline-end:var(--tds-number-stepper-button-offset);
3974
- }
3975
-
3976
- .tds-number-stepper-description{
3666
+ .tds-checkbox-group-description{
3977
3667
  display:flex;
3978
3668
  gap:var(--t-spacing-half);
3979
3669
  align-items:flex-start;
3980
3670
  margin:0;
3981
- font-size:var(--t-font-size-sm);
3982
- line-height:1.35;
3983
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3671
+ font-size:var(--tds-checkbox-group-description-font-size);
3672
+ line-height:var(--tds-checkbox-group-description-line-height);
3673
+ color:var(--tds-checkbox-group-description-color);
3984
3674
  cursor:text;
3985
3675
  }
3986
3676
 
3987
- .tds-number-stepper-description-invalid-icon{
3988
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3989
- flex-shrink:0;
3990
- margin-block-start:calc(.5lh - .5em);
3991
- line-height:1.35;
3677
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3678
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3679
+ flex-shrink:0;
3680
+ margin-top:calc(.5lh - .5em);
3681
+ line-height:var(--tds-checkbox-group-description-line-height);
3682
+ }
3683
+
3684
+ .tds-checkbox-group--sm{
3685
+ --tds-checkbox-group-line-height:1.35;
3686
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3687
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3688
+ --tds-checkbox-group-description-line-height:1.3;
3992
3689
  }
3993
3690
 
3994
3691
  .tds-date-picker{
@@ -4246,159 +3943,462 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4246
3943
  outline-offset:var(--t-focus-ring-offset);
4247
3944
  }
4248
3945
 
4249
- .tds-date-picker-calendar-heading{
3946
+ .tds-date-picker-calendar-heading{
3947
+ display:flex;
3948
+ flex:1;
3949
+ gap:var(--t-spacing-half);
3950
+ align-items:center;
3951
+ justify-content:flex-start;
3952
+ }
3953
+
3954
+ .tds-date-picker-calendar-overlay-trigger{
3955
+ padding:4px 8px;
3956
+ font-family:inherit;
3957
+ font-size:var(--t-font-size-md);
3958
+ font-weight:var(--t-font-weight-semibold);
3959
+ color:var(--t-text-color);
3960
+ cursor:default;
3961
+ outline:0;
3962
+ background:transparent;
3963
+ border:0;
3964
+ border-radius:var(--t-border-radius-sm);
3965
+ }
3966
+
3967
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
3968
+ background:var(--t-fill-color-neutral-070);
3969
+ }
3970
+
3971
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
3972
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3973
+ outline-offset:var(--t-focus-ring-offset);
3974
+ }
3975
+
3976
+ .tds-date-picker-calendar{
3977
+ inline-size:-moz-fit-content;
3978
+ inline-size:fit-content;
3979
+ }
3980
+
3981
+ .tds-date-picker-calendar-body{
3982
+ position:relative;
3983
+ padding:var(--tds-date-picker-popover-padding);
3984
+ padding-block-start:0;
3985
+ }
3986
+
3987
+ .tds-date-picker-calendar-header{
3988
+ display:flex;
3989
+ align-items:center;
3990
+ justify-content:space-between;
3991
+ padding:var(--tds-date-picker-popover-padding);
3992
+ }
3993
+
3994
+ .tds-date-picker-calendar-title{
3995
+ padding:4px 8px;
3996
+ font-size:var(--t-font-size-md);
3997
+ font-weight:var(--t-font-weight-semibold);
3998
+ }
3999
+
4000
+ .tds-date-picker-calendar-title--visually-hidden{
4001
+ position:absolute;
4002
+ inline-size:1px;
4003
+ block-size:1px;
4004
+ padding:0;
4005
+ margin:-1px;
4006
+ overflow:hidden;
4007
+ white-space:nowrap;
4008
+ border:0;
4009
+ clip-path:inset(50%);
4010
+ }
4011
+
4012
+ .tds-date-picker-calendar-nav{
4013
+ display:flex;
4014
+ align-items:center;
4015
+ justify-content:center;
4016
+ padding:var(--t-spacing-half);
4017
+ color:var(--t-text-color);
4018
+ cursor:default;
4019
+ outline:0;
4020
+ background:transparent;
4021
+ border:0;
4022
+ border-radius:var(--t-border-radius-sm);
4023
+ }
4024
+
4025
+ .tds-date-picker-calendar-nav[data-hovered]{
4026
+ background:var(--t-fill-color-neutral-070);
4027
+ }
4028
+
4029
+ .tds-date-picker-calendar-nav[data-pressed]{
4030
+ background:var(--t-fill-color-button-interaction-ghost-active);
4031
+ }
4032
+
4033
+ .tds-date-picker-calendar-nav[data-focus-visible]{
4034
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4035
+ outline-offset:var(--t-focus-ring-offset);
4036
+ }
4037
+
4038
+ .tds-date-picker-calendar-nav[data-disabled]{
4039
+ color:var(--t-form-color-disabled);
4040
+ cursor:not-allowed;
4041
+ }
4042
+
4043
+ .tds-date-picker-calendar-grid{
4044
+ border-collapse:collapse;
4045
+ }
4046
+
4047
+ .tds-date-picker-calendar-header-cell{
4048
+ padding-block:var(--t-spacing-half);
4049
+ font-size:var(--t-font-size-sm);
4050
+ font-weight:var(--t-font-weight-normal);
4051
+ color:var(--t-text-color-secondary);
4052
+ text-align:center;
4053
+ }
4054
+
4055
+ .tds-date-picker-calendar-cell{
4056
+ display:flex;
4057
+ align-items:center;
4058
+ justify-content:center;
4059
+ inline-size:2.25rem;
4060
+ block-size:2.25rem;
4061
+ font-size:var(--t-font-size-md);
4062
+ color:var(--t-text-color);
4063
+ cursor:default;
4064
+ outline:0;
4065
+ border-radius:var(--t-border-radius-sm);
4066
+ }
4067
+
4068
+ .tds-date-picker-calendar-cell[data-hovered]{
4069
+ background:var(--t-fill-color-neutral-070);
4070
+ }
4071
+
4072
+ .tds-date-picker-calendar-cell[data-pressed]{
4073
+ background:var(--t-fill-color-button-interaction-ghost-active);
4074
+ }
4075
+
4076
+ .tds-date-picker-calendar-cell[data-selected]{
4077
+ color:var(--t-text-color-inverted);
4078
+ background:var(--t-fill-color-interaction);
4079
+ }
4080
+
4081
+ .tds-date-picker-calendar-cell[data-focus-visible]{
4082
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4083
+ outline-offset:var(--t-focus-ring-offset);
4084
+ }
4085
+
4086
+ .tds-date-picker-calendar-cell[data-unavailable]{
4087
+ color:var(--t-text-color-secondary);
4088
+ text-decoration:line-through;
4089
+ cursor:not-allowed;
4090
+ }
4091
+
4092
+ .tds-date-picker-calendar-cell[data-disabled]{
4093
+ color:var(--t-form-color-disabled);
4094
+ cursor:not-allowed;
4095
+ }
4096
+
4097
+ .tds-date-picker-calendar-cell[data-outside-month]{
4098
+ color:var(--t-text-color-secondary);
4099
+ }
4100
+
4101
+ .tds-number-stepper{
4102
+ --tds-number-stepper-border-color:var(--t-form-border-color);
4103
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4104
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4105
+ --tds-number-stepper-background-color:var(--t-form-background-color);
4106
+ --tds-number-stepper-color:var(--t-form-color);
4107
+ --tds-number-stepper-font-size:var(--t-font-size-md);
4108
+ --tds-number-stepper-min-height:var(--t-container-size-md);
4109
+ --tds-number-stepper-padding-block:6px;
4110
+ --tds-number-stepper-button-offset:4px;
4111
+ --tds-number-stepper-button-gap:2px;
4112
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
4113
+ --tds-number-stepper-description-invalid-icon-display:none;
4114
+
4115
+ position:relative;
4116
+ display:flex;
4117
+ flex-direction:column;
4118
+ gap:var(--t-spacing-half);
4119
+ }
4120
+
4121
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4122
+ margin-left:.25ch;
4123
+ color:var(--t-text-color-status-error);
4124
+ content:"*";
4125
+ }
4126
+
4127
+ .tds-number-stepper[data-invalid]{
4128
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
4129
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4130
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4131
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
4132
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
4133
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
4134
+ }
4135
+
4136
+ .tds-number-stepper[data-disabled]{
4137
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4138
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4139
+ --tds-number-stepper-color:var(--t-form-color-disabled);
4140
+ }
4141
+
4142
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4143
+ cursor:not-allowed;
4144
+ }
4145
+
4146
+ .tds-number-stepper--lg{
4147
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
4148
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
4149
+ --tds-number-stepper-button-offset:5px;
4150
+ --tds-number-stepper-button-gap:4px;
4151
+ }
4152
+
4153
+ .tds-number-stepper-label{
4154
+ font-size:var(--t-font-size-md);
4155
+ font-weight:var(--t-font-weight-normal);
4156
+ color:var(--t-text-color);
4157
+ cursor:default;
4158
+ }
4159
+
4160
+ .tds-number-stepper-field{
4161
+ display:flex;
4162
+ gap:var(--tds-number-stepper-button-gap);
4163
+ align-items:center;
4164
+ inline-size:100%;
4165
+ min-block-size:var(--tds-number-stepper-min-height);
4166
+ font-family:inherit;
4167
+ font-size:var(--tds-number-stepper-font-size);
4168
+ line-height:1;
4169
+ color:var(--tds-number-stepper-color);
4170
+ -webkit-appearance:none;
4171
+ -moz-appearance:none;
4172
+ appearance:none;
4173
+ cursor:default;
4174
+ outline:var(--t-focus-ring-width) solid transparent;
4175
+ outline-offset:0;
4176
+ background-color:var(--tds-number-stepper-background-color);
4177
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4178
+ border-radius:var(--t-form-border-radius);
4179
+ }
4180
+
4181
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4182
+ border-color:var(--tds-number-stepper-border-color-hover);
4183
+ }
4184
+
4185
+ .tds-number-stepper-field[data-focus-within]{
4186
+ outline-color:var(--t-focus-ring-color);
4187
+ outline-offset:var(--t-focus-ring-offset);
4188
+ border-color:var(--tds-number-stepper-border-color-active);
4189
+ }
4190
+
4191
+ .tds-number-stepper-field:has([readonly]){
4192
+ --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
4193
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
4194
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4195
+ }
4196
+
4197
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
4198
+ border-color:var(--t-form-border-color-hover);
4199
+ }
4200
+
4201
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
4202
+ display:none;
4203
+ }
4204
+
4205
+ .tds-number-stepper-input{
4250
4206
  display:flex;
4251
4207
  flex:1;
4252
- gap:var(--t-spacing-half);
4253
4208
  align-items:center;
4254
- justify-content:flex-start;
4255
- }
4256
-
4257
- .tds-date-picker-calendar-overlay-trigger{
4258
- padding:4px 8px;
4209
+ min-inline-size:0;
4210
+ padding-block:var(--tds-number-stepper-padding-block);
4211
+ padding-inline:var(--t-spacing-1);
4259
4212
  font-family:inherit;
4260
- font-size:var(--t-font-size-md);
4261
- font-weight:var(--t-font-weight-semibold);
4262
- color:var(--t-text-color);
4263
- cursor:default;
4213
+ font-size:inherit;
4214
+ color:inherit;
4264
4215
  outline:0;
4265
4216
  background:transparent;
4266
4217
  border:0;
4267
- border-radius:var(--t-border-radius-sm);
4268
4218
  }
4269
4219
 
4270
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
4271
- background:var(--t-fill-color-neutral-070);
4272
- }
4273
-
4274
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
4275
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4276
- outline-offset:var(--t-focus-ring-offset);
4220
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4221
+ margin:0;
4222
+ -webkit-appearance:none;
4223
+ appearance:none;
4277
4224
  }
4278
4225
 
4279
- .tds-date-picker-calendar{
4280
- inline-size:-moz-fit-content;
4281
- inline-size:fit-content;
4226
+ .tds-number-stepper-button{
4227
+ flex-shrink:0;
4228
+ align-self:center;
4229
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4230
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4231
+ padding:0;
4282
4232
  }
4283
4233
 
4284
- .tds-date-picker-calendar-body{
4285
- position:relative;
4286
- padding:var(--tds-date-picker-popover-padding);
4287
- padding-block-start:0;
4288
- }
4234
+ .tds-number-stepper-button:last-of-type{
4235
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4236
+ }
4289
4237
 
4290
- .tds-date-picker-calendar-header{
4238
+ .tds-number-stepper-description{
4291
4239
  display:flex;
4292
- align-items:center;
4293
- justify-content:space-between;
4294
- padding:var(--tds-date-picker-popover-padding);
4240
+ gap:var(--t-spacing-half);
4241
+ align-items:flex-start;
4242
+ margin:0;
4243
+ font-size:var(--t-font-size-sm);
4244
+ line-height:1.35;
4245
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4246
+ cursor:text;
4295
4247
  }
4296
4248
 
4297
- .tds-date-picker-calendar-title{
4298
- padding:4px 8px;
4299
- font-size:var(--t-font-size-md);
4300
- font-weight:var(--t-font-weight-semibold);
4249
+ .tds-number-stepper-description-invalid-icon{
4250
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4251
+ flex-shrink:0;
4252
+ margin-block-start:calc(.5lh - .5em);
4253
+ line-height:1.35;
4301
4254
  }
4302
4255
 
4303
- .tds-date-picker-calendar-title--visually-hidden{
4304
- position:absolute;
4305
- inline-size:1px;
4306
- block-size:1px;
4307
- padding:0;
4308
- margin:-1px;
4309
- overflow:hidden;
4310
- white-space:nowrap;
4311
- border:0;
4312
- clip-path:inset(50%);
4313
- }
4256
+ .tds-time-field{
4257
+ --tds-time-field-border-color:var(--t-form-border-color);
4258
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4259
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4260
+ --tds-time-field-background-color:var(--t-form-background-color);
4261
+ --tds-time-field-color:var(--t-form-color);
4262
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4263
+ --tds-time-field-font-size:var(--t-font-size-md);
4264
+ --tds-time-field-min-height:var(--t-container-size-md);
4265
+ --tds-time-field-padding-block:6px;
4266
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4267
+ --tds-time-field-description-invalid-icon-display:none;
4314
4268
 
4315
- .tds-date-picker-calendar-nav{
4269
+ position:relative;
4316
4270
  display:flex;
4317
- align-items:center;
4318
- justify-content:center;
4319
- padding:var(--t-spacing-half);
4320
- color:var(--t-text-color);
4321
- cursor:default;
4322
- outline:0;
4323
- background:transparent;
4324
- border:0;
4325
- border-radius:var(--t-border-radius-sm);
4271
+ flex-direction:column;
4272
+ gap:var(--t-spacing-half);
4326
4273
  }
4327
4274
 
4328
- .tds-date-picker-calendar-nav[data-hovered]{
4329
- background:var(--t-fill-color-neutral-070);
4275
+ .tds-time-field[data-required] .tds-time-field-label::after{
4276
+ margin-left:.25ch;
4277
+ color:var(--t-text-color-status-error);
4278
+ content:"*";
4330
4279
  }
4331
4280
 
4332
- .tds-date-picker-calendar-nav[data-pressed]{
4333
- background:var(--t-fill-color-button-interaction-ghost-active);
4281
+ .tds-time-field[data-invalid]{
4282
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4283
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4284
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4285
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4286
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4287
+ --tds-time-field-description-invalid-icon-display:inline-block;
4334
4288
  }
4335
4289
 
4336
- .tds-date-picker-calendar-nav[data-focus-visible]{
4337
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4338
- outline-offset:var(--t-focus-ring-offset);
4290
+ .tds-time-field[data-disabled]{
4291
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4292
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4293
+ --tds-time-field-color:var(--t-form-color-disabled);
4294
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4339
4295
  }
4340
4296
 
4341
- .tds-date-picker-calendar-nav[data-disabled]{
4342
- color:var(--t-form-color-disabled);
4343
- cursor:not-allowed;
4344
- }
4297
+ .tds-time-field[data-disabled] .tds-time-field-label{
4298
+ color:var(--t-form-color-disabled);
4299
+ }
4345
4300
 
4346
- .tds-date-picker-calendar-grid{
4347
- border-collapse:collapse;
4301
+ .tds-time-field[data-disabled] .tds-time-field-input{
4302
+ cursor:not-allowed;
4303
+ }
4304
+
4305
+ .tds-time-field--lg{
4306
+ --tds-time-field-min-height:var(--t-container-size-lg);
4307
+ --tds-time-field-font-size:var(--t-font-size-lg);
4348
4308
  }
4349
4309
 
4350
- .tds-date-picker-calendar-header-cell{
4351
- padding-block:var(--t-spacing-half);
4352
- font-size:var(--t-font-size-sm);
4310
+ .tds-time-field-label{
4311
+ font-size:var(--t-font-size-md);
4353
4312
  font-weight:var(--t-font-weight-normal);
4354
- color:var(--t-text-color-secondary);
4355
- text-align:center;
4313
+ color:var(--t-text-color);
4314
+ cursor:default;
4356
4315
  }
4357
4316
 
4358
- .tds-date-picker-calendar-cell{
4317
+ .tds-time-field-input{
4359
4318
  display:flex;
4360
4319
  align-items:center;
4361
- justify-content:center;
4362
- inline-size:2.25rem;
4363
- block-size:2.25rem;
4364
- font-size:var(--t-font-size-md);
4365
- color:var(--t-text-color);
4366
- cursor:default;
4367
- outline:0;
4368
- border-radius:var(--t-border-radius-sm);
4320
+ inline-size:100%;
4321
+ min-block-size:var(--tds-time-field-min-height);
4322
+ padding-block:var(--tds-time-field-padding-block);
4323
+ padding-inline:var(--t-spacing-1);
4324
+ font-family:inherit;
4325
+ font-size:var(--tds-time-field-font-size);
4326
+ font-variant-numeric:tabular-nums;
4327
+ line-height:1;
4328
+ color:var(--tds-time-field-color);
4329
+ cursor:text;
4330
+ outline:var(--t-focus-ring-width) solid transparent;
4331
+ outline-offset:0;
4332
+ background-color:var(--tds-time-field-background-color);
4333
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4334
+ border-radius:var(--t-form-border-radius);
4369
4335
  }
4370
4336
 
4371
- .tds-date-picker-calendar-cell[data-hovered]{
4372
- background:var(--t-fill-color-neutral-070);
4337
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4338
+ border-color:var(--tds-time-field-border-color-hover);
4373
4339
  }
4374
4340
 
4375
- .tds-date-picker-calendar-cell[data-pressed]{
4376
- background:var(--t-fill-color-button-interaction-ghost-active);
4341
+ .tds-time-field-input[data-focus-within]{
4342
+ outline-color:var(--t-focus-ring-color);
4343
+ outline-offset:var(--t-focus-ring-offset);
4344
+ border-color:var(--tds-time-field-border-color-active);
4377
4345
  }
4378
4346
 
4379
- .tds-date-picker-calendar-cell[data-selected]{
4380
- color:var(--t-text-color-inverted);
4381
- background:var(--t-fill-color-interaction);
4347
+ .tds-time-field-input[data-readonly]{
4348
+ color:var(--t-form-color-readonly);
4349
+ background-color:var(--t-form-background-color-readonly);
4350
+ border-color:var(--t-form-border-color-readonly);
4382
4351
  }
4383
4352
 
4384
- .tds-date-picker-calendar-cell[data-focus-visible]{
4385
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4386
- outline-offset:var(--t-focus-ring-offset);
4387
- }
4353
+ .tds-time-field-input[data-readonly][data-hovered]{
4354
+ border-color:var(--t-form-border-color-readonly);
4355
+ }
4388
4356
 
4389
- .tds-date-picker-calendar-cell[data-unavailable]{
4390
- color:var(--t-text-color-secondary);
4391
- text-decoration:line-through;
4392
- cursor:not-allowed;
4357
+ .tds-time-field-input[data-readonly][data-focus-within]{
4358
+ outline-color:var(--t-focus-ring-color);
4359
+ outline-offset:var(--t-focus-ring-offset);
4360
+ border-color:var(--t-form-border-color-hover);
4361
+ }
4362
+
4363
+ .tds-time-field-segment{
4364
+ padding-inline:1px;
4365
+ font-variant-numeric:tabular-nums;
4366
+ cursor:text;
4367
+ caret-color:transparent;
4368
+ border-radius:var(--t-border-radius-sm);
4369
+ }
4370
+
4371
+ .tds-time-field-segment[data-placeholder]{
4372
+ color:var(--tds-time-field-placeholder-color);
4393
4373
  }
4394
4374
 
4395
- .tds-date-picker-calendar-cell[data-disabled]{
4396
- color:var(--t-form-color-disabled);
4397
- cursor:not-allowed;
4375
+ .tds-time-field-segment[data-focused]{
4376
+ color:var(--t-text-color-inverted);
4377
+ outline:0;
4378
+ background:var(--t-fill-color-interaction);
4398
4379
  }
4399
4380
 
4400
- .tds-date-picker-calendar-cell[data-outside-month]{
4401
- color:var(--t-text-color-secondary);
4381
+ .tds-time-field-segment-separator{
4382
+ padding-inline:0;
4383
+ color:var(--tds-time-field-placeholder-color);
4384
+ }
4385
+
4386
+ .tds-time-field-description{
4387
+ display:flex;
4388
+ gap:var(--t-spacing-half);
4389
+ align-items:flex-start;
4390
+ margin:0;
4391
+ font-size:var(--t-font-size-sm);
4392
+ line-height:1.35;
4393
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4394
+ cursor:text;
4395
+ }
4396
+
4397
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4398
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4399
+ flex-shrink:0;
4400
+ margin-block-start:calc(.5lh - .5em);
4401
+ line-height:1.35;
4402
4402
  }
4403
4403
 
4404
4404
  .t-banner{