@planningcenter/tapestry 3.1.0-rc.11 → 3.1.0-rc.13

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 +639 -639
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +639 -639
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -323,841 +323,841 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
323
323
  flex-direction:column;
324
324
  }
325
325
 
326
- @layer t-critical{
327
- tds-page-header:not(.hydrated){
328
- display:none;
329
- }
330
- }
326
+ .tds-checkbox{
327
+ --tds-checkbox-font-size:var(--t-font-size-md);
328
+ --tds-checkbox-cursor:pointer;
329
+ --tds-checkbox-line-height:1.4;
330
+ --tds-checkbox-transition-property:background-color, border-color;
331
331
 
332
- @layer t-component{
333
- .tds-page-header{
334
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
335
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
336
- --tds-page-header-color:var(--t-text-color);
337
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
338
- --tds-page-header-headline-color:var(--t-text-color-headline);
339
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
340
- --tds-page-header-padding-x:var(--t-spacing-2);
341
- --tds-page-header-padding-y:var(--t-spacing-2);
342
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
343
- --tds-page-header-nav-gap:var(--t-spacing-1);
344
- --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%);
345
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
346
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
347
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
348
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
349
- --tds-page-header-nav-item-border-width:1px;
332
+ --tds-checkbox-input-size:var(--t-element-size-md);
333
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
334
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
335
+ --tds-checkbox-input-background-color:transparent;
350
336
 
351
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
352
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
337
+ --tds-checkbox-input-icon:none;
338
+ --tds-checkbox-input-icon-visibility:hidden;
339
+ --tds-checkbox-input-icon-opacity:0;
340
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
353
341
 
354
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
355
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
356
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
342
+ --tds-checkbox-label-color:var(--t-form-color);
357
343
 
358
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
359
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
344
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
345
+ --tds-checkbox-description-line-height:1.35;
346
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
347
+ --tds-checkbox-description-invalid-icon-display:none;
360
348
 
361
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
362
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
363
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
349
+ position:relative;
350
+ display:inline-grid;
351
+ grid-template-columns:auto;
352
+ grid-auto-columns:1fr;
353
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
354
+ line-height:var(--tds-checkbox-line-height);
355
+ cursor:var(--tds-checkbox-cursor);
356
+ -webkit-user-select:none;
357
+ -moz-user-select:none;
358
+ user-select:none;
359
+ }
364
360
 
365
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
366
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
367
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
368
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
369
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
361
+ .tds-checkbox label{
362
+ grid-area:1 / 2;
363
+ font-size:var(--tds-checkbox-font-size);
364
+ font-weight:var(--t-font-weight-normal);
365
+ color:var(--tds-checkbox-label-color);
366
+ cursor:var(--tds-checkbox-cursor);
370
367
  }
371
368
 
372
- .tds-page-header--profile{
373
- --tds-page-header-padding-y:20px;
369
+ .tds-checkbox input[type="checkbox"]{
370
+ position:relative;
371
+ width:1em;
372
+ height:1em;
373
+ margin:calc((1lh - 1em) / 2) 0 0;
374
+ font-size:var(--tds-checkbox-font-size);
375
+ line-height:inherit;
376
+ -webkit-appearance:none;
377
+ -moz-appearance:none;
378
+ appearance:none;
379
+ cursor:var(--tds-checkbox-cursor);
380
+ background-color:var(--tds-checkbox-input-background-color);
381
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
382
+ border-radius:var(--tds-checkbox-input-border-radius);
383
+ transition-timing-function:ease-in-out;
384
+ transition-duration:180ms;
385
+ transition-property:var(--tds-checkbox-transition-property);
374
386
  }
375
387
 
376
- @supports (color: light-dark(#fff, #000)){
377
- .tds-page-header{
378
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
379
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
388
+ :is(.tds-checkbox input[type="checkbox"])::before{
389
+ position:absolute;
390
+ top:50%;
391
+ left:50%;
392
+ visibility:var(--tds-checkbox-input-icon-visibility);
393
+ width:100%;
394
+ height:100%;
395
+ content:"";
396
+ background-color:var(--tds-checkbox-input-icon-fill);
397
+ border-radius:var(--tds-checkbox-input-border-radius);
398
+ opacity:var(--tds-checkbox-input-icon-opacity);
399
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
400
+ mask-image:var(--tds-checkbox-input-icon);
401
+ -webkit-mask-repeat:no-repeat;
402
+ mask-repeat:no-repeat;
403
+ -webkit-mask-size:contain;
404
+ mask-size:contain;
405
+ transform:translate(-50%, -50%);
380
406
  }
381
- }
382
407
 
383
- @media (min-width: 600px){
384
- .tds-page-header{
385
- --tds-page-header-background-color:var(--t-surface-color-canvas);
386
- --tds-page-header-color:var(--t-text-color-secondary);
387
- --tds-page-header-bottom-border-color:var(--t-border-color);
388
- --tds-page-header-padding-x:var(--t-spacing-3);
389
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
390
- --tds-page-header-nav-gap:var(--t-spacing-half);
391
- --tds-page-header-nav-background:transparent;
392
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
393
- --tds-page-header-nav-item-border-width:1px;
394
- --tds-page-header-nav-item-color:var(--t-text-color);
395
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
396
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
397
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
398
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
399
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
408
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
409
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
410
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
400
411
  }
401
- }
402
- }
403
412
 
404
- .tds-page-header{
405
- display:flex;
406
- flex-direction:column;
407
- padding-top:var(--tds-page-header-padding-y);
408
- color:var(--tds-page-header-color);
409
- background:var(--tds-page-header-background-color);
410
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
411
- }
413
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
414
+ outline:var(--t-focus-ring-outline);
415
+ outline-offset:var(--t-focus-ring-offset);
416
+ }
412
417
 
413
- .tds-page-header:not(.has-nav){
414
- padding-bottom:var(--tds-page-header-padding-y);
415
- }
418
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
419
+ pointer-events:none;
420
+ }
416
421
 
417
- .tds-page-header.inactive{
418
- background:var(--tds-page-header-background-color-inactive);
419
- }
422
+ @media (prefers-reduced-motion: reduce){
420
423
 
421
- .tds-page-header__title-bar{
422
- display:flex;
423
- flex-direction:column;
424
- gap:var(--t-spacing-2) var(--t-spacing-1);
425
- align-items:flex-start;
426
- justify-content:space-between;
427
- padding:0 var(--tds-page-header-padding-x);
428
- }
424
+ .tds-checkbox input[type="checkbox"]{
425
+ --tds-checkbox-transition-property:none;
426
+ }
427
+ }
429
428
 
430
- .tds-page-header--profile > .tds-page-header__title-bar{
431
- align-items:center;
432
- }
429
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
430
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
431
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
432
+ --tds-checkbox-input-icon-visibility:visible;
433
+ --tds-checkbox-input-icon-opacity:1;
434
+ }
433
435
 
434
- .tds-page-header__primary{
435
- width:100%;
436
- }
436
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
437
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
438
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
439
+ }
437
440
 
438
- .tds-page-header__primary h1{
439
- margin:0;
440
- font-size:var(--tds-page-header-headline-font-size);
441
- font-weight:var(--t-font-weight-normal);
442
- line-height:32px;
443
- color:var(--tds-page-header-headline-color);
444
- overflow-wrap:break-word;
445
- }
441
+ .tds-checkbox:has(input:checked){
442
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
443
+ }
446
444
 
447
- .tds-page-header [slot="actions"],
448
- .tds-page-header .tds-page-header__actions{
449
- width:100%;
450
- }
445
+ .tds-checkbox:has(input:indeterminate){
446
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
447
+ }
451
448
 
452
- .has-multi-actions.tds-page-header [slot="actions"],
453
- .has-multi-actions.tds-page-header .tds-page-header__actions{
454
- display:flex;
455
- flex-flow:row wrap;
456
- gap:var(--t-spacing-half) var(--t-spacing-1);
457
- align-items:flex-start;
458
- justify-content:flex-start;
459
- min-width:0;
460
- }
449
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
450
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
451
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
452
+ --tds-checkbox-description-invalid-icon-display:inline-block;
453
+ }
461
454
 
462
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
463
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
464
- .tds-page-header nav[slot="navigation"] ul,
465
- .tds-page-header nav.tds-page-header__nav ul{
466
- display:flex;
467
- gap:var(--tds-page-header-nav-gap);
468
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
469
- margin:0 0 -1px;
470
- overflow:auto;
471
- list-style:none;
472
- background:var(--tds-page-header-nav-background);
473
- }
455
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
456
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
457
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
458
+ }
474
459
 
475
- .tds-page-header nav[slot="navigation"] a,
476
- .tds-page-header nav[slot="navigation"] button,
477
- .tds-page-header nav.tds-page-header__nav a,
478
- .tds-page-header nav.tds-page-header__nav button{
479
- position:relative;
480
- display:inline-flex;
481
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
482
- font-size:var(--t-font-size-sm);
483
- line-height:22px;
484
- color:var(--tds-page-header-nav-item-color);
485
- white-space:nowrap;
486
- text-decoration:none;
487
- -webkit-appearance:none;
488
- -moz-appearance:none;
489
- appearance:none;
490
- cursor:pointer;
491
- outline-offset:-2px;
492
- background-color:var(--tds-page-header-nav-item-background-color);
493
- background-clip:padding-box;
494
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
495
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
496
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
497
- }
460
+ :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{
461
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
462
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
463
+ }
498
464
 
499
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
500
- position:relative;
501
- }
465
+ :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){
466
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
467
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
468
+ }
502
469
 
503
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
504
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
505
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
506
- }
470
+ .tds-checkbox:has(input:required) label::after{
471
+ margin-left:.25ch;
472
+ color:var(--t-text-color-status-error);
473
+ content:"*";
474
+ }
507
475
 
508
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
509
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
510
- position:absolute;
511
- top:-5px;
512
- right:-2px;
513
- width:10px;
514
- height:10px;
515
- content:"";
516
- background:var(--tds-page-header-nav-item-indicator-color);
517
- border-radius:50%;
518
- }
476
+ .tds-checkbox:has(input:disabled){
477
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
478
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
519
479
 
520
- @media (prefers-reduced-motion: no-preference){
521
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
522
- animation:indicator-pulse 1.25s ease infinite;
480
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
481
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
482
+ --tds-checkbox-cursor:not-allowed;
523
483
  }
524
- }
525
484
 
526
- .tds-page-header nav[slot="navigation"] a.selected,
527
- .tds-page-header nav[slot="navigation"] button.selected,
528
- .tds-page-header nav.tds-page-header__nav a.selected,
529
- .tds-page-header nav.tds-page-header__nav button.selected{
530
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
531
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
532
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
533
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
534
- }
485
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
486
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
487
+ }
535
488
 
536
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
537
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
538
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
539
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
540
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
541
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
542
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
489
+ .tds-checkbox-description{
490
+ display:flex;
491
+ grid-area:2 / 2;
492
+ gap:var(--t-spacing-half);
493
+ align-items:flex-start;
494
+ margin:0;
495
+ font-size:var(--tds-checkbox-description-font-size);
496
+ line-height:var(--tds-checkbox-description-line-height);
497
+ color:var(--tds-checkbox-description-color);
498
+ cursor:text;
543
499
  }
544
500
 
545
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
546
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
547
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
548
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
549
- background-color:var(--tds-page-header-nav-item-background-color-active);
550
- border-color:var(--tds-page-header-nav-item-border-color-active);
501
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
502
+ display:var(--tds-checkbox-description-invalid-icon-display);
503
+ flex-shrink:0;
504
+ margin-top:calc(.5lh - .5em);
505
+ line-height:var(--tds-checkbox-description-line-height);
506
+ }
507
+
508
+ .tds-checkbox--sm{
509
+ --tds-checkbox-line-height:1.35;
510
+ --tds-checkbox-input-size:var(--t-element-size-sm);
511
+ --tds-checkbox-font-size:var(--t-font-size-sm);
512
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
513
+ --tds-checkbox-description-line-height:1.3;
551
514
  }
552
515
 
553
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
554
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
555
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
556
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
557
- color:var(--tds-page-header-nav-item-color-disabled);
558
- cursor:not-allowed;
559
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
560
- opacity:1;
516
+ .tds-radio-group{
517
+ --tds-radio-group-font-size:var(--t-font-size-md);
518
+ --tds-radio-group-line-height:1.4;
519
+ --tds-radio-group-gap:var(--t-spacing-1);
520
+
521
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
522
+
523
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
524
+ --tds-radio-group-description-line-height:1.35;
525
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
526
+ --tds-radio-group-description-invalid-icon-display:none;
527
+ display:flex;
528
+ flex-direction:column;
529
+ gap:var(--tds-radio-group-gap);
530
+ padding:0;
531
+ margin:0;
532
+
533
+ font-size:var(--tds-radio-group-font-size);
534
+ line-height:var(--tds-radio-group-line-height);
535
+ border:0;
561
536
  }
562
537
 
563
- @media (min-width: 960px){
564
- .tds-page-header__primary{
565
- flex:1 1 max-content;
566
- width:auto;
567
- min-width:0;
568
- max-width:100%;
538
+ .tds-radio-group legend{
539
+ padding:0;
540
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
569
541
  }
570
542
 
571
- .tds-page-header__title-bar,
572
- .tds-page-header--profile .tds-page-header__title-bar{
573
- flex-flow:row nowrap;
574
- row-gap:12px;
575
- align-items:flex-start;
543
+ .tds-radio-group:has(.tds-radio-group-description){
544
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
576
545
  }
577
546
 
578
- .tds-page-header [slot="actions"],
579
- .tds-page-header .tds-page-header__actions{
580
- width:auto;
547
+ .tds-radio-group[aria-invalid="true"]{
548
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
549
+ --tds-radio-group-description-invalid-icon-display:inline-block;
581
550
  }
582
551
 
583
- .has-multi-actions.tds-page-header [slot="actions"],
584
- .has-multi-actions.tds-page-header .tds-page-header__actions{
585
- justify-content:flex-end;
586
- }
587
- }
552
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
553
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
554
+ }
588
555
 
589
- .tds-page-header-phone,
590
- .tds-page-header-email{
591
- color:var(--tds-page-header-color);
592
- white-space:nowrap;
593
- }
556
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
557
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
558
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
559
+ }
594
560
 
595
- .tds-page-header-email{
596
- max-width:100%;
597
- overflow:hidden;
598
- text-overflow:ellipsis;
561
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
562
+ --tds-radio-input-background-color:var(--t-form-background-color);
563
+ }
564
+
565
+ .tds-radio-group:has(input:required) legend::after{
566
+ margin-left:.25ch;
567
+ color:var(--t-text-color-status-error);
568
+ content:"*";
569
+ }
570
+
571
+ .tds-radio-group-fields{
572
+ display:flex;
573
+ flex-direction:column;
574
+ gap:var(--tds-radio-group-gap);
575
+ align-items:flex-start;
599
576
  }
600
577
 
601
- @keyframes indicator-pulse{
602
- 0%{
603
- opacity:.3;
604
- transform:scale(.9);
605
- }
578
+ .tds-radio-group-description{
579
+ display:flex;
580
+ gap:var(--t-spacing-half);
581
+ align-items:flex-start;
582
+ margin:0;
583
+ font-size:var(--tds-radio-group-description-font-size);
584
+ line-height:var(--tds-radio-group-description-line-height);
585
+ color:var(--tds-radio-group-description-color);
586
+ cursor:text;
587
+ }
606
588
 
607
- 100%{
608
- opacity:0;
609
- transform:scale(1.75);
610
- }
589
+ .tds-radio-group-description-invalid-icon{
590
+ display:var(--tds-radio-group-description-invalid-icon-display);
591
+ flex-shrink:0;
592
+ margin-top:calc(.5lh - .5em);
593
+ line-height:var(--tds-radio-group-description-line-height);
611
594
  }
612
595
 
613
- .tds-checkbox{
614
- --tds-checkbox-font-size:var(--t-font-size-md);
615
- --tds-checkbox-cursor:pointer;
616
- --tds-checkbox-line-height:1.4;
617
- --tds-checkbox-transition-property:background-color, border-color;
596
+ .tds-radio-group--sm{
597
+ --tds-radio-group-line-height:1.35;
598
+ --tds-radio-group-font-size:var(--t-font-size-sm);
599
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
600
+ --tds-radio-group-description-line-height:1.3;
601
+ }
618
602
 
619
- --tds-checkbox-input-size:var(--t-element-size-md);
620
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
621
- --tds-checkbox-input-border-color:var(--t-form-border-color);
622
- --tds-checkbox-input-background-color:transparent;
603
+ .tds-radio{
604
+ --tds-radio-font-size:var(--t-font-size-md);
605
+ --tds-radio-cursor:pointer;
606
+ --tds-radio-line-height:1.4;
607
+ --tds-radio-transition-property:border-width;
623
608
 
624
- --tds-checkbox-input-icon:none;
625
- --tds-checkbox-input-icon-visibility:hidden;
626
- --tds-checkbox-input-icon-opacity:0;
627
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
609
+ --tds-radio-input-size:var(--t-element-size-md);
610
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
611
+ --tds-radio-input-border-color:var(--t-form-border-color);
612
+ --tds-radio-input-border-width:var(--t-form-border-width);
613
+ --tds-radio-input-background-color:transparent;
628
614
 
629
- --tds-checkbox-label-color:var(--t-form-color);
615
+ --tds-radio-label-color:var(--t-form-color);
630
616
 
631
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
632
- --tds-checkbox-description-line-height:1.35;
633
- --tds-checkbox-description-color:var(--t-text-color-secondary);
634
- --tds-checkbox-description-invalid-icon-display:none;
617
+ --tds-radio-description-font-size:var(--t-font-size-sm);
618
+ --tds-radio-description-line-height:1.35;
619
+ --tds-radio-description-color:var(--t-text-color-secondary);
635
620
 
636
621
  position:relative;
637
622
  display:inline-grid;
638
623
  grid-template-columns:auto;
639
624
  grid-auto-columns:1fr;
640
625
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
641
- line-height:var(--tds-checkbox-line-height);
642
- cursor:var(--tds-checkbox-cursor);
626
+ line-height:var(--tds-radio-line-height);
627
+ cursor:var(--tds-radio-cursor);
643
628
  -webkit-user-select:none;
644
629
  -moz-user-select:none;
645
630
  user-select:none;
646
631
  }
647
632
 
648
- .tds-checkbox label{
633
+ .tds-radio label{
649
634
  grid-area:1 / 2;
650
- font-size:var(--tds-checkbox-font-size);
635
+ font-size:var(--tds-radio-font-size);
651
636
  font-weight:var(--t-font-weight-normal);
652
- color:var(--tds-checkbox-label-color);
653
- cursor:var(--tds-checkbox-cursor);
637
+ color:var(--tds-radio-label-color);
638
+ cursor:var(--tds-radio-cursor);
654
639
  }
655
640
 
656
- .tds-checkbox input[type="checkbox"]{
641
+ .tds-radio input[type="radio"]{
657
642
  position:relative;
658
643
  width:1em;
659
644
  height:1em;
660
645
  margin:calc((1lh - 1em) / 2) 0 0;
661
- font-size:var(--tds-checkbox-font-size);
646
+ font-size:var(--tds-radio-font-size);
662
647
  line-height:inherit;
663
648
  -webkit-appearance:none;
664
649
  -moz-appearance:none;
665
650
  appearance:none;
666
- cursor:var(--tds-checkbox-cursor);
667
- background-color:var(--tds-checkbox-input-background-color);
668
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
669
- border-radius:var(--tds-checkbox-input-border-radius);
651
+ cursor:var(--tds-radio-cursor);
652
+ background-color:var(--tds-radio-input-background-color);
653
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
654
+ border-radius:var(--tds-radio-input-border-radius);
670
655
  transition-timing-function:ease-in-out;
671
656
  transition-duration:180ms;
672
- transition-property:var(--tds-checkbox-transition-property);
657
+ transition-property:var(--tds-radio-transition-property);
673
658
  }
674
659
 
675
- :is(.tds-checkbox input[type="checkbox"])::before{
676
- position:absolute;
677
- top:50%;
678
- left:50%;
679
- visibility:var(--tds-checkbox-input-icon-visibility);
680
- width:100%;
681
- height:100%;
682
- content:"";
683
- background-color:var(--tds-checkbox-input-icon-fill);
684
- border-radius:var(--tds-checkbox-input-border-radius);
685
- opacity:var(--tds-checkbox-input-icon-opacity);
686
- -webkit-mask-image:var(--tds-checkbox-input-icon);
687
- mask-image:var(--tds-checkbox-input-icon);
688
- -webkit-mask-repeat:no-repeat;
689
- mask-repeat:no-repeat;
690
- -webkit-mask-size:contain;
691
- mask-size:contain;
692
- transform:translate(-50%, -50%);
693
- }
694
-
695
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
696
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
697
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
660
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
661
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
662
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
698
663
  }
699
664
 
700
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
665
+ :is(.tds-radio input[type="radio"]):focus-visible{
701
666
  outline:var(--t-focus-ring-outline);
702
667
  outline-offset:var(--t-focus-ring-offset);
703
668
  }
704
669
 
705
- :is(.tds-checkbox input[type="checkbox"]):disabled{
670
+ :is(.tds-radio input[type="radio"]):disabled{
706
671
  pointer-events:none;
707
672
  }
708
673
 
709
674
  @media (prefers-reduced-motion: reduce){
710
675
 
711
- .tds-checkbox input[type="checkbox"]{
712
- --tds-checkbox-transition-property:none;
676
+ .tds-radio input[type="radio"]{
677
+ --tds-radio-transition-property:none;
713
678
  }
714
679
  }
715
680
 
716
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
717
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
718
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
719
- --tds-checkbox-input-icon-visibility:visible;
720
- --tds-checkbox-input-icon-opacity:1;
681
+ .tds-radio:has(input:checked){
682
+ --tds-radio-input-background-color:var(--t-form-background-color);
683
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
684
+ --tds-radio-input-border-width:4px;
721
685
  }
722
686
 
723
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
724
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
725
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
687
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
688
+ --tds-radio-input-background-color:var(--t-form-background-color);
689
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
726
690
  }
727
691
 
728
- .tds-checkbox:has(input:checked){
729
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
730
- }
731
-
732
- .tds-checkbox:has(input:indeterminate){
733
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
734
- }
735
-
736
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
737
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
738
- --tds-checkbox-description-color:var(--t-text-color-status-error);
739
- --tds-checkbox-description-invalid-icon-display:inline-block;
692
+ .tds-radio:has(input:user-invalid){
693
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
740
694
  }
741
695
 
742
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
743
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
744
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
745
- }
746
-
747
- :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{
748
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
749
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
750
- }
751
-
752
- :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){
753
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
754
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
755
- }
756
-
757
- .tds-checkbox:has(input:required) label::after{
758
- margin-left:.25ch;
759
- color:var(--t-text-color-status-error);
760
- content:"*";
696
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
697
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
698
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
761
699
  }
762
700
 
763
- .tds-checkbox:has(input:disabled){
764
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
765
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
701
+ .tds-radio:has(input:disabled){
702
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
703
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
766
704
 
767
- --tds-checkbox-label-color:var(--t-form-color-disabled);
768
- --tds-checkbox-description-color:var(--t-form-color-disabled);
769
- --tds-checkbox-cursor:not-allowed;
705
+ --tds-radio-label-color:var(--t-form-color-disabled);
706
+ --tds-radio-description-color:var(--t-form-color-disabled);
707
+ --tds-radio-cursor:not-allowed;
770
708
  }
771
709
 
772
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
773
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
710
+ .tds-radio:has(input:disabled) input:checked{
711
+ --tds-radio-input-background-color:var(--t-form-background-color);
712
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
774
713
  }
775
714
 
776
- .tds-checkbox-description{
715
+ .tds-radio-description{
777
716
  display:flex;
778
717
  grid-area:2 / 2;
779
718
  gap:var(--t-spacing-half);
780
719
  align-items:flex-start;
781
720
  margin:0;
782
- font-size:var(--tds-checkbox-description-font-size);
783
- line-height:var(--tds-checkbox-description-line-height);
784
- color:var(--tds-checkbox-description-color);
721
+ font-size:var(--tds-radio-description-font-size);
722
+ line-height:var(--tds-radio-description-line-height);
723
+ color:var(--tds-radio-description-color);
785
724
  cursor:text;
786
725
  }
787
726
 
788
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
789
- display:var(--tds-checkbox-description-invalid-icon-display);
790
- flex-shrink:0;
791
- margin-top:calc(.5lh - .5em);
792
- line-height:var(--tds-checkbox-description-line-height);
793
- }
794
-
795
- .tds-checkbox--sm{
796
- --tds-checkbox-line-height:1.35;
797
- --tds-checkbox-input-size:var(--t-element-size-sm);
798
- --tds-checkbox-font-size:var(--t-font-size-sm);
799
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
800
- --tds-checkbox-description-line-height:1.3;
727
+ .tds-radio--sm{
728
+ --tds-radio-line-height:1.35;
729
+ --tds-radio-input-size:var(--t-element-size-sm);
730
+ --tds-radio-font-size:var(--t-font-size-sm);
731
+ --tds-radio-description-font-size:var(--t-font-size-xs);
732
+ --tds-radio-description-line-height:1.3;
801
733
  }
802
734
 
803
- .tds-radio-group{
804
- --tds-radio-group-font-size:var(--t-font-size-md);
805
- --tds-radio-group-line-height:1.4;
806
- --tds-radio-group-gap:var(--t-spacing-1);
735
+ .tds-toggle-switch{
736
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
737
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
738
+ --tds-toggle-switch-cursor:pointer;
739
+ --tds-toggle-switch-display:inline-grid;
740
+ --tds-toggle-switch-line-height:1.4;
807
741
 
808
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
742
+ --tds-toggle-switch-label-color:var(--t-form-color);
809
743
 
810
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
811
- --tds-radio-group-description-line-height:1.35;
812
- --tds-radio-group-description-color:var(--t-text-color-secondary);
813
- --tds-radio-group-description-invalid-icon-display:none;
814
- display:flex;
815
- flex-direction:column;
816
- gap:var(--tds-radio-group-gap);
817
- padding:0;
818
- margin:0;
744
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
745
+ --tds-toggle-switch-track-outline:none;
746
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
747
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
748
+ --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
819
749
 
820
- font-size:var(--tds-radio-group-font-size);
821
- line-height:var(--tds-radio-group-line-height);
822
- border:0;
750
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
751
+ --tds-toggle-switch-thumb-transform:translateX(0);
752
+ --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
753
+
754
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
755
+ --tds-toggle-switch-description-line-height:1.35;
756
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
757
+ position:relative;
758
+
759
+ display:var(--tds-toggle-switch-display);
760
+ grid-template-columns:auto;
761
+ grid-auto-columns:1fr;
762
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
763
+ -webkit-user-select:none;
764
+ -moz-user-select:none;
765
+ user-select:none;
823
766
  }
824
767
 
825
- .tds-radio-group legend{
826
- padding:0;
827
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
768
+ .tds-toggle-switch input[type="checkbox"]{
769
+ position:absolute;
770
+ width:var(--tds-toggle-switch-track-width);
771
+ height:var(--tds-toggle-switch-track-height);
772
+ margin:0;
773
+ -webkit-appearance:none;
774
+ -moz-appearance:none;
775
+ appearance:none;
776
+ cursor:var(--tds-toggle-switch-cursor);
777
+ outline:var(--tds-toggle-switch-track-outline);
778
+ outline-offset:var(--t-focus-ring-offset);
779
+ background-color:transparent;
780
+ border:0;
781
+ border-radius:var(--t-border-radius-round);
828
782
  }
829
783
 
830
- .tds-radio-group:has(.tds-radio-group-description){
831
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
784
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
785
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
786
+ }
787
+
788
+ .tds-toggle-switch label{
789
+ display:inline-flex;
790
+ grid-area:1 / 2;
791
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
792
+ column-gap:var(--tds-toggle-switch-column-gap);
793
+ margin-top:-.09375em;
794
+ font-size:var(--tds-toggle-switch-font-size);
795
+ font-weight:var(--t-font-weight-normal);
796
+ line-height:var(--tds-toggle-switch-line-height);
797
+ color:var(--tds-toggle-switch-label-color);
798
+ cursor:var(--tds-toggle-switch-cursor);
832
799
  }
833
800
 
834
- .tds-radio-group[aria-invalid="true"]{
835
- --tds-radio-group-description-color:var(--t-text-color-status-error);
836
- --tds-radio-group-description-invalid-icon-display:inline-block;
801
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
802
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
837
803
  }
838
804
 
839
- .tds-radio-group[aria-invalid="true"] .tds-radio{
840
- --tds-radio-input-border-color:var(--t-form-border-color-error);
805
+ .tds-toggle-switch:has(input:checked){
806
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control);
807
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
808
+ }
809
+
810
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
811
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
841
812
  }
842
813
 
843
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
844
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
845
- --tds-radio-input-background-color:var(--t-form-background-color-error);
846
- }
814
+ .tds-toggle-switch:has(input:disabled){
815
+ --tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
816
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
817
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
818
+ --tds-toggle-switch-cursor:not-allowed;
819
+ }
847
820
 
848
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
849
- --tds-radio-input-background-color:var(--t-form-background-color);
850
- }
821
+ .tds-toggle-switch-track{
822
+ position:relative;
823
+ flex-shrink:0;
824
+ width:var(--tds-toggle-switch-track-width);
825
+ height:var(--tds-toggle-switch-track-height);
826
+ background-color:var(--tds-toggle-switch-track-background-color);
827
+ border-radius:var(--t-border-radius-round);
828
+ transition:var(--tds-toggle-switch-track-transition);
829
+ }
830
+
831
+ .tds-toggle-switch-track::before{
832
+ position:absolute;
833
+ top:var(--t-spacing-fourth);
834
+ left:var(--t-spacing-fourth);
835
+ width:var(--tds-toggle-switch-thumb-size);
836
+ height:var(--tds-toggle-switch-thumb-size);
837
+ content:"";
838
+ background-color:#fff;
839
+ border-radius:var(--t-border-radius-round);
840
+ transform:var(--tds-toggle-switch-thumb-transform);
841
+ transition:var(--tds-toggle-switch-thumb-transition);
842
+ }
851
843
 
852
- .tds-radio-group:has(input:required) legend::after{
853
- margin-left:.25ch;
854
- color:var(--t-text-color-status-error);
855
- content:"*";
856
- }
844
+ @media (prefers-reduced-motion: reduce){
857
845
 
858
- .tds-radio-group-fields{
859
- display:flex;
860
- flex-direction:column;
861
- gap:var(--tds-radio-group-gap);
862
- align-items:flex-start;
846
+ .tds-toggle-switch-track{
847
+ --tds-toggle-switch-track-transition:none;
848
+ --tds-toggle-switch-thumb-transition:none;
863
849
  }
850
+ }
864
851
 
865
- .tds-radio-group-description{
852
+ .tds-toggle-switch-description{
866
853
  display:flex;
867
- gap:var(--t-spacing-half);
854
+ grid-area:2 / 2;
868
855
  align-items:flex-start;
869
856
  margin:0;
870
- font-size:var(--tds-radio-group-description-font-size);
871
- line-height:var(--tds-radio-group-description-line-height);
872
- color:var(--tds-radio-group-description-color);
857
+ font-size:var(--tds-toggle-switch-description-font-size);
858
+ line-height:var(--tds-toggle-switch-description-line-height);
859
+ color:var(--tds-toggle-switch-description-color);
873
860
  cursor:text;
874
861
  }
875
862
 
876
- .tds-radio-group-description-invalid-icon{
877
- display:var(--tds-radio-group-description-invalid-icon-display);
878
- flex-shrink:0;
879
- margin-top:calc(.5lh - .5em);
880
- line-height:var(--tds-radio-group-description-line-height);
863
+ .tds-toggle-switch--sm{
864
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
865
+ --tds-toggle-switch-line-height:1.35;
866
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
867
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
868
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
869
+ --tds-toggle-switch-description-line-height:1.3;
881
870
  }
882
871
 
883
- .tds-radio-group--sm{
884
- --tds-radio-group-line-height:1.35;
885
- --tds-radio-group-font-size:var(--t-font-size-sm);
886
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
887
- --tds-radio-group-description-line-height:1.3;
872
+ .tds-toggle-switch--hide-label{
873
+ --tds-toggle-switch-display:inline-flex;
888
874
  }
889
875
 
890
- .tds-radio{
891
- --tds-radio-font-size:var(--t-font-size-md);
892
- --tds-radio-cursor:pointer;
893
- --tds-radio-line-height:1.4;
894
- --tds-radio-transition-property:border-width;
876
+ @layer t-critical{
877
+ tds-page-header:not(.hydrated){
878
+ display:none;
879
+ }
880
+ }
895
881
 
896
- --tds-radio-input-size:var(--t-element-size-md);
897
- --tds-radio-input-border-radius:var(--t-border-radius-round);
898
- --tds-radio-input-border-color:var(--t-form-border-color);
899
- --tds-radio-input-border-width:var(--t-form-border-width);
900
- --tds-radio-input-background-color:transparent;
882
+ @layer t-component{
883
+ .tds-page-header{
884
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
885
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
886
+ --tds-page-header-color:var(--t-text-color);
887
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
888
+ --tds-page-header-headline-color:var(--t-text-color-headline);
889
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
890
+ --tds-page-header-padding-x:var(--t-spacing-2);
891
+ --tds-page-header-padding-y:var(--t-spacing-2);
892
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
893
+ --tds-page-header-nav-gap:var(--t-spacing-1);
894
+ --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%);
895
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
896
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
897
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
898
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
899
+ --tds-page-header-nav-item-border-width:1px;
901
900
 
902
- --tds-radio-label-color:var(--t-form-color);
901
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
902
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
903
903
 
904
- --tds-radio-description-font-size:var(--t-font-size-sm);
905
- --tds-radio-description-line-height:1.35;
906
- --tds-radio-description-color:var(--t-text-color-secondary);
904
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
905
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
906
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
907
907
 
908
- position:relative;
909
- display:inline-grid;
910
- grid-template-columns:auto;
911
- grid-auto-columns:1fr;
912
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
913
- line-height:var(--tds-radio-line-height);
914
- cursor:var(--tds-radio-cursor);
915
- -webkit-user-select:none;
916
- -moz-user-select:none;
917
- user-select:none;
918
- }
908
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
909
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
919
910
 
920
- .tds-radio label{
921
- grid-area:1 / 2;
922
- font-size:var(--tds-radio-font-size);
923
- font-weight:var(--t-font-weight-normal);
924
- color:var(--tds-radio-label-color);
925
- cursor:var(--tds-radio-cursor);
926
- }
911
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
912
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
913
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
927
914
 
928
- .tds-radio input[type="radio"]{
929
- position:relative;
930
- width:1em;
931
- height:1em;
932
- margin:calc((1lh - 1em) / 2) 0 0;
933
- font-size:var(--tds-radio-font-size);
934
- line-height:inherit;
935
- -webkit-appearance:none;
936
- -moz-appearance:none;
937
- appearance:none;
938
- cursor:var(--tds-radio-cursor);
939
- background-color:var(--tds-radio-input-background-color);
940
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
941
- border-radius:var(--tds-radio-input-border-radius);
942
- transition-timing-function:ease-in-out;
943
- transition-duration:180ms;
944
- transition-property:var(--tds-radio-transition-property);
915
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
916
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
917
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
918
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
919
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
945
920
  }
946
921
 
947
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
948
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
949
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
950
- }
922
+ .tds-page-header--profile{
923
+ --tds-page-header-padding-y:20px;
924
+ }
951
925
 
952
- :is(.tds-radio input[type="radio"]):focus-visible{
953
- outline:var(--t-focus-ring-outline);
954
- outline-offset:var(--t-focus-ring-offset);
926
+ @supports (color: light-dark(#fff, #000)){
927
+ .tds-page-header{
928
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
929
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
955
930
  }
931
+ }
956
932
 
957
- :is(.tds-radio input[type="radio"]):disabled{
958
- pointer-events:none;
933
+ @media (min-width: 600px){
934
+ .tds-page-header{
935
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
936
+ --tds-page-header-color:var(--t-text-color-secondary);
937
+ --tds-page-header-bottom-border-color:var(--t-border-color);
938
+ --tds-page-header-padding-x:var(--t-spacing-3);
939
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
940
+ --tds-page-header-nav-gap:var(--t-spacing-half);
941
+ --tds-page-header-nav-background:transparent;
942
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
943
+ --tds-page-header-nav-item-border-width:1px;
944
+ --tds-page-header-nav-item-color:var(--t-text-color);
945
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
946
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
947
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
948
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
949
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
959
950
  }
951
+ }
952
+ }
960
953
 
961
- @media (prefers-reduced-motion: reduce){
954
+ .tds-page-header{
955
+ display:flex;
956
+ flex-direction:column;
957
+ padding-top:var(--tds-page-header-padding-y);
958
+ color:var(--tds-page-header-color);
959
+ background:var(--tds-page-header-background-color);
960
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
961
+ }
962
962
 
963
- .tds-radio input[type="radio"]{
964
- --tds-radio-transition-property:none;
965
- }
966
- }
963
+ .tds-page-header:not(.has-nav){
964
+ padding-bottom:var(--tds-page-header-padding-y);
965
+ }
967
966
 
968
- .tds-radio:has(input:checked){
969
- --tds-radio-input-background-color:var(--t-form-background-color);
970
- --tds-radio-input-border-color:var(--t-border-color-control-info);
971
- --tds-radio-input-border-width:4px;
972
- }
967
+ .tds-page-header.inactive{
968
+ background:var(--tds-page-header-background-color-inactive);
969
+ }
973
970
 
974
- .tds-radio:has(input:checked) input:hover:not(:disabled){
975
- --tds-radio-input-background-color:var(--t-form-background-color);
976
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
977
- }
971
+ .tds-page-header__title-bar{
972
+ display:flex;
973
+ flex-direction:column;
974
+ gap:var(--t-spacing-2) var(--t-spacing-1);
975
+ align-items:flex-start;
976
+ justify-content:space-between;
977
+ padding:0 var(--tds-page-header-padding-x);
978
+ }
978
979
 
979
- .tds-radio:has(input:user-invalid){
980
- --tds-radio-input-border-color:var(--t-form-border-color-error);
981
- }
980
+ .tds-page-header--profile > .tds-page-header__title-bar{
981
+ align-items:center;
982
+ }
982
983
 
983
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
984
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
985
- --tds-radio-input-background-color:var(--t-form-background-color-error);
986
- }
984
+ .tds-page-header__primary{
985
+ width:100%;
986
+ }
987
987
 
988
- .tds-radio:has(input:disabled){
989
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
990
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
988
+ .tds-page-header__primary h1{
989
+ margin:0;
990
+ font-size:var(--tds-page-header-headline-font-size);
991
+ font-weight:var(--t-font-weight-normal);
992
+ line-height:32px;
993
+ color:var(--tds-page-header-headline-color);
994
+ overflow-wrap:break-word;
995
+ }
991
996
 
992
- --tds-radio-label-color:var(--t-form-color-disabled);
993
- --tds-radio-description-color:var(--t-form-color-disabled);
994
- --tds-radio-cursor:not-allowed;
995
- }
997
+ .tds-page-header [slot="actions"],
998
+ .tds-page-header .tds-page-header__actions{
999
+ width:100%;
1000
+ }
996
1001
 
997
- .tds-radio:has(input:disabled) input:checked{
998
- --tds-radio-input-background-color:var(--t-form-background-color);
999
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1000
- }
1002
+ .has-multi-actions.tds-page-header [slot="actions"],
1003
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1004
+ display:flex;
1005
+ flex-flow:row wrap;
1006
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1007
+ align-items:flex-start;
1008
+ justify-content:flex-start;
1009
+ min-width:0;
1010
+ }
1001
1011
 
1002
- .tds-radio-description{
1012
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1013
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1014
+ .tds-page-header nav[slot="navigation"] ul,
1015
+ .tds-page-header nav.tds-page-header__nav ul{
1003
1016
  display:flex;
1004
- grid-area:2 / 2;
1005
- gap:var(--t-spacing-half);
1006
- align-items:flex-start;
1007
- margin:0;
1008
- font-size:var(--tds-radio-description-font-size);
1009
- line-height:var(--tds-radio-description-line-height);
1010
- color:var(--tds-radio-description-color);
1011
- cursor:text;
1017
+ gap:var(--tds-page-header-nav-gap);
1018
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1019
+ margin:0 0 -1px;
1020
+ overflow:auto;
1021
+ list-style:none;
1022
+ background:var(--tds-page-header-nav-background);
1012
1023
  }
1013
1024
 
1014
- .tds-radio--sm{
1015
- --tds-radio-line-height:1.35;
1016
- --tds-radio-input-size:var(--t-element-size-sm);
1017
- --tds-radio-font-size:var(--t-font-size-sm);
1018
- --tds-radio-description-font-size:var(--t-font-size-xs);
1019
- --tds-radio-description-line-height:1.3;
1025
+ .tds-page-header nav[slot="navigation"] a,
1026
+ .tds-page-header nav[slot="navigation"] button,
1027
+ .tds-page-header nav.tds-page-header__nav a,
1028
+ .tds-page-header nav.tds-page-header__nav button{
1029
+ position:relative;
1030
+ display:inline-flex;
1031
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1032
+ font-size:var(--t-font-size-sm);
1033
+ line-height:22px;
1034
+ color:var(--tds-page-header-nav-item-color);
1035
+ white-space:nowrap;
1036
+ text-decoration:none;
1037
+ -webkit-appearance:none;
1038
+ -moz-appearance:none;
1039
+ appearance:none;
1040
+ cursor:pointer;
1041
+ outline-offset:-2px;
1042
+ background-color:var(--tds-page-header-nav-item-background-color);
1043
+ background-clip:padding-box;
1044
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1045
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1046
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1020
1047
  }
1021
1048
 
1022
- .tds-toggle-switch{
1023
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1024
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1025
- --tds-toggle-switch-cursor:pointer;
1026
- --tds-toggle-switch-display:inline-grid;
1027
- --tds-toggle-switch-line-height:1.4;
1049
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1050
+ position:relative;
1051
+ }
1028
1052
 
1029
- --tds-toggle-switch-label-color:var(--t-form-color);
1053
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1054
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1055
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1056
+ }
1030
1057
 
1031
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1032
- --tds-toggle-switch-track-outline:none;
1033
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1034
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
1035
- --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
1058
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1059
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1060
+ position:absolute;
1061
+ top:-5px;
1062
+ right:-2px;
1063
+ width:10px;
1064
+ height:10px;
1065
+ content:"";
1066
+ background:var(--tds-page-header-nav-item-indicator-color);
1067
+ border-radius:50%;
1068
+ }
1036
1069
 
1037
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1038
- --tds-toggle-switch-thumb-transform:translateX(0);
1039
- --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
1070
+ @media (prefers-reduced-motion: no-preference){
1071
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1072
+ animation:indicator-pulse 1.25s ease infinite;
1073
+ }
1074
+ }
1040
1075
 
1041
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1042
- --tds-toggle-switch-description-line-height:1.35;
1043
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1044
- position:relative;
1076
+ .tds-page-header nav[slot="navigation"] a.selected,
1077
+ .tds-page-header nav[slot="navigation"] button.selected,
1078
+ .tds-page-header nav.tds-page-header__nav a.selected,
1079
+ .tds-page-header nav.tds-page-header__nav button.selected{
1080
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1081
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1082
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1083
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1084
+ }
1045
1085
 
1046
- display:var(--tds-toggle-switch-display);
1047
- grid-template-columns:auto;
1048
- grid-auto-columns:1fr;
1049
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1050
- -webkit-user-select:none;
1051
- -moz-user-select:none;
1052
- user-select:none;
1086
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1087
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1088
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1089
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1090
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1091
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1092
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1053
1093
  }
1054
1094
 
1055
- .tds-toggle-switch input[type="checkbox"]{
1056
- position:absolute;
1057
- width:var(--tds-toggle-switch-track-width);
1058
- height:var(--tds-toggle-switch-track-height);
1059
- margin:0;
1060
- -webkit-appearance:none;
1061
- -moz-appearance:none;
1062
- appearance:none;
1063
- cursor:var(--tds-toggle-switch-cursor);
1064
- outline:var(--tds-toggle-switch-track-outline);
1065
- outline-offset:var(--t-focus-ring-offset);
1066
- background-color:transparent;
1067
- border:0;
1068
- border-radius:var(--t-border-radius-round);
1069
- }
1095
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1096
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1097
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1098
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1099
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1100
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1101
+ }
1070
1102
 
1071
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1072
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1073
- }
1103
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1104
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1105
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1106
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1107
+ color:var(--tds-page-header-nav-item-color-disabled);
1108
+ cursor:not-allowed;
1109
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1110
+ opacity:1;
1111
+ }
1074
1112
 
1075
- .tds-toggle-switch label{
1076
- display:inline-flex;
1077
- grid-area:1 / 2;
1078
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1079
- column-gap:var(--tds-toggle-switch-column-gap);
1080
- margin-top:-.09375em;
1081
- font-size:var(--tds-toggle-switch-font-size);
1082
- font-weight:var(--t-font-weight-normal);
1083
- line-height:var(--tds-toggle-switch-line-height);
1084
- color:var(--tds-toggle-switch-label-color);
1085
- cursor:var(--tds-toggle-switch-cursor);
1113
+ @media (min-width: 960px){
1114
+ .tds-page-header__primary{
1115
+ flex:1 1 max-content;
1116
+ width:auto;
1117
+ min-width:0;
1118
+ max-width:100%;
1086
1119
  }
1087
1120
 
1088
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1089
- --tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
1121
+ .tds-page-header__title-bar,
1122
+ .tds-page-header--profile .tds-page-header__title-bar{
1123
+ flex-flow:row nowrap;
1124
+ row-gap:12px;
1125
+ align-items:flex-start;
1090
1126
  }
1091
1127
 
1092
- .tds-toggle-switch:has(input:checked){
1093
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control);
1094
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1128
+ .tds-page-header [slot="actions"],
1129
+ .tds-page-header .tds-page-header__actions{
1130
+ width:auto;
1095
1131
  }
1096
1132
 
1097
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1098
- --tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
1099
- }
1100
-
1101
- .tds-toggle-switch:has(input:disabled){
1102
- --tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
1103
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1104
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1105
- --tds-toggle-switch-cursor:not-allowed;
1133
+ .has-multi-actions.tds-page-header [slot="actions"],
1134
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1135
+ justify-content:flex-end;
1106
1136
  }
1107
-
1108
- .tds-toggle-switch-track{
1109
- position:relative;
1110
- flex-shrink:0;
1111
- width:var(--tds-toggle-switch-track-width);
1112
- height:var(--tds-toggle-switch-track-height);
1113
- background-color:var(--tds-toggle-switch-track-background-color);
1114
- border-radius:var(--t-border-radius-round);
1115
- transition:var(--tds-toggle-switch-track-transition);
1116
1137
  }
1117
1138
 
1118
- .tds-toggle-switch-track::before{
1119
- position:absolute;
1120
- top:var(--t-spacing-fourth);
1121
- left:var(--t-spacing-fourth);
1122
- width:var(--tds-toggle-switch-thumb-size);
1123
- height:var(--tds-toggle-switch-thumb-size);
1124
- content:"";
1125
- background-color:#fff;
1126
- border-radius:var(--t-border-radius-round);
1127
- transform:var(--tds-toggle-switch-thumb-transform);
1128
- transition:var(--tds-toggle-switch-thumb-transition);
1129
- }
1130
-
1131
- @media (prefers-reduced-motion: reduce){
1132
-
1133
- .tds-toggle-switch-track{
1134
- --tds-toggle-switch-track-transition:none;
1135
- --tds-toggle-switch-thumb-transition:none;
1139
+ .tds-page-header-phone,
1140
+ .tds-page-header-email{
1141
+ color:var(--tds-page-header-color);
1142
+ white-space:nowrap;
1136
1143
  }
1137
- }
1138
1144
 
1139
- .tds-toggle-switch-description{
1140
- display:flex;
1141
- grid-area:2 / 2;
1142
- align-items:flex-start;
1143
- margin:0;
1144
- font-size:var(--tds-toggle-switch-description-font-size);
1145
- line-height:var(--tds-toggle-switch-description-line-height);
1146
- color:var(--tds-toggle-switch-description-color);
1147
- cursor:text;
1145
+ .tds-page-header-email{
1146
+ max-width:100%;
1147
+ overflow:hidden;
1148
+ text-overflow:ellipsis;
1148
1149
  }
1149
1150
 
1150
- .tds-toggle-switch--sm{
1151
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1152
- --tds-toggle-switch-line-height:1.35;
1153
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1154
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1155
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1156
- --tds-toggle-switch-description-line-height:1.3;
1157
- }
1151
+ @keyframes indicator-pulse{
1152
+ 0%{
1153
+ opacity:.3;
1154
+ transform:scale(.9);
1155
+ }
1158
1156
 
1159
- .tds-toggle-switch--hide-label{
1160
- --tds-toggle-switch-display:inline-flex;
1157
+ 100%{
1158
+ opacity:0;
1159
+ transform:scale(1.75);
1160
+ }
1161
1161
  }
1162
1162
 
1163
1163
  .tds-loading-spinner{