@planningcenter/tapestry 3.1.0-rc.19 → 3.1.0-rc.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/reactRender.css +613 -604
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +613 -604
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/unstable.css +28 -19
  6. package/dist/unstable.css.map +1 -1
  7. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -323,364 +323,291 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
323
323
  flex-direction:column;
324
324
  }
325
325
 
326
- .tds-radio-group{
327
- --tds-radio-group-font-size:var(--t-font-size-md);
328
- --tds-radio-group-line-height:1.4;
329
- --tds-radio-group-gap:var(--t-spacing-1);
326
+ @layer t-critical{
327
+ tds-page-header:not(.hydrated){
328
+ display:none;
329
+ }
330
+ }
330
331
 
331
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
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
350
 
333
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
334
- --tds-radio-group-description-line-height:1.35;
335
- --tds-radio-group-description-color:var(--t-text-color-secondary);
336
- --tds-radio-group-description-invalid-icon-display:none;
337
- display:flex;
338
- flex-direction:column;
339
- gap:var(--tds-radio-group-gap);
340
- padding:0;
341
- margin:0;
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);
342
353
 
343
- font-size:var(--tds-radio-group-font-size);
344
- line-height:var(--tds-radio-group-line-height);
345
- border:0;
346
- }
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);
347
357
 
348
- .tds-radio-group legend{
349
- padding:0;
350
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
351
- }
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);
352
360
 
353
- .tds-radio-group:has(.tds-radio-group-description){
354
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
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);
364
+
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);
355
370
  }
356
371
 
357
- .tds-radio-group[aria-invalid="true"]{
358
- --tds-radio-group-description-color:var(--t-text-color-status-error);
359
- --tds-radio-group-description-invalid-icon-display:inline-block;
372
+ .tds-page-header--profile{
373
+ --tds-page-header-padding-y:20px;
360
374
  }
361
375
 
362
- .tds-radio-group[aria-invalid="true"] .tds-radio{
363
- --tds-radio-input-border-color:var(--t-form-border-color-error);
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));
364
380
  }
381
+ }
365
382
 
366
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
367
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
368
- --tds-radio-input-background-color:var(--t-form-background-color-error);
369
- }
370
-
371
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
372
- --tds-radio-input-background-color:var(--t-form-background-color);
373
- }
374
-
375
- .tds-radio-group:has(input:required) legend::after{
376
- margin-left:.25ch;
377
- color:var(--t-text-color-status-error);
378
- content:"*";
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);
379
400
  }
401
+ }
402
+ }
380
403
 
381
- .tds-radio-group-fields{
404
+ .tds-page-header{
382
405
  display:flex;
383
406
  flex-direction:column;
384
- gap:var(--tds-radio-group-gap);
385
- align-items:flex-start;
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);
386
411
  }
387
412
 
388
- .tds-radio-group-description{
389
- display:flex;
390
- gap:var(--t-spacing-half);
391
- align-items:flex-start;
392
- margin:0;
393
- font-size:var(--tds-radio-group-description-font-size);
394
- line-height:var(--tds-radio-group-description-line-height);
395
- color:var(--tds-radio-group-description-color);
396
- cursor:text;
413
+ .tds-page-header:not(.has-nav){
414
+ padding-bottom:var(--tds-page-header-padding-y);
397
415
  }
398
416
 
399
- .tds-radio-group-description-invalid-icon{
400
- display:var(--tds-radio-group-description-invalid-icon-display);
401
- flex-shrink:0;
402
- margin-top:calc(.5lh - .5em);
403
- line-height:var(--tds-radio-group-description-line-height);
417
+ .tds-page-header.inactive{
418
+ background:var(--tds-page-header-background-color-inactive);
404
419
  }
405
420
 
406
- .tds-radio-group--sm{
407
- --tds-radio-group-line-height:1.35;
408
- --tds-radio-group-font-size:var(--t-font-size-sm);
409
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
410
- --tds-radio-group-description-line-height:1.3;
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);
411
428
  }
412
429
 
413
- .tds-toggle-switch{
414
- --tds-toggle-switch-font-size:var(--t-font-size-md);
415
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
416
- --tds-toggle-switch-cursor:pointer;
417
- --tds-toggle-switch-display:inline-grid;
418
- --tds-toggle-switch-line-height:1.4;
419
-
420
- --tds-toggle-switch-label-color:var(--t-form-color);
421
-
422
- --tds-toggle-switch-track-width:var(--t-container-size-md);
423
- --tds-toggle-switch-track-outline:none;
424
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
425
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
426
- --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
427
-
428
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
429
- --tds-toggle-switch-thumb-transform:translateX(0);
430
- --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
431
-
432
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
433
- --tds-toggle-switch-description-line-height:1.35;
434
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
435
- position:relative;
436
-
437
- display:var(--tds-toggle-switch-display);
438
- grid-template-columns:auto;
439
- grid-auto-columns:1fr;
440
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
441
- -webkit-user-select:none;
442
- -moz-user-select:none;
443
- user-select:none;
430
+ .tds-page-header--profile > .tds-page-header__title-bar{
431
+ align-items:center;
444
432
  }
445
433
 
446
- .tds-toggle-switch input[type="checkbox"]{
447
- position:absolute;
448
- width:var(--tds-toggle-switch-track-width);
449
- height:var(--tds-toggle-switch-track-height);
450
- margin:0;
451
- -webkit-appearance:none;
452
- -moz-appearance:none;
453
- appearance:none;
454
- cursor:var(--tds-toggle-switch-cursor);
455
- outline:var(--tds-toggle-switch-track-outline);
456
- outline-offset:var(--t-focus-ring-offset);
457
- background-color:transparent;
458
- border:0;
459
- border-radius:var(--t-border-radius-round);
460
- }
461
-
462
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
463
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
464
- }
465
-
466
- .tds-toggle-switch label{
467
- display:inline-flex;
468
- grid-area:1 / 2;
469
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
470
- column-gap:var(--tds-toggle-switch-column-gap);
471
- margin-top:-.09375em;
472
- font-size:var(--tds-toggle-switch-font-size);
473
- font-weight:var(--t-font-weight-normal);
474
- line-height:var(--tds-toggle-switch-line-height);
475
- color:var(--tds-toggle-switch-label-color);
476
- cursor:var(--tds-toggle-switch-cursor);
477
- }
478
-
479
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
480
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
481
- }
482
-
483
- .tds-toggle-switch:has(input:checked){
484
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
485
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
486
- }
487
-
488
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
489
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
490
- }
491
-
492
- .tds-toggle-switch:has(input:disabled){
493
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
494
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
495
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
496
- --tds-toggle-switch-cursor:not-allowed;
497
- }
498
-
499
- .tds-toggle-switch-track{
500
- position:relative;
501
- flex-shrink:0;
502
- width:var(--tds-toggle-switch-track-width);
503
- height:var(--tds-toggle-switch-track-height);
504
- background-color:var(--tds-toggle-switch-track-background-color);
505
- border-radius:var(--t-border-radius-round);
506
- transition:var(--tds-toggle-switch-track-transition);
434
+ .tds-page-header__primary{
435
+ width:100%;
507
436
  }
508
437
 
509
- .tds-toggle-switch-track::before{
510
- position:absolute;
511
- top:var(--t-spacing-fourth);
512
- left:var(--t-spacing-fourth);
513
- width:var(--tds-toggle-switch-thumb-size);
514
- height:var(--tds-toggle-switch-thumb-size);
515
- content:"";
516
- background-color:#fff;
517
- border-radius:var(--t-border-radius-round);
518
- transform:var(--tds-toggle-switch-thumb-transform);
519
- transition:var(--tds-toggle-switch-thumb-transition);
520
- }
521
-
522
- @media (prefers-reduced-motion: reduce){
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
+ }
523
446
 
524
- .tds-toggle-switch-track{
525
- --tds-toggle-switch-track-transition:none;
526
- --tds-toggle-switch-thumb-transition:none;
447
+ .tds-page-header [slot="actions"],
448
+ .tds-page-header .tds-page-header__actions{
449
+ width:100%;
527
450
  }
528
- }
529
451
 
530
- .tds-toggle-switch-description{
452
+ .has-multi-actions.tds-page-header [slot="actions"],
453
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
531
454
  display:flex;
532
- grid-area:2 / 2;
455
+ flex-flow:row wrap;
456
+ gap:var(--t-spacing-half) var(--t-spacing-1);
533
457
  align-items:flex-start;
534
- margin:0;
535
- font-size:var(--tds-toggle-switch-description-font-size);
536
- line-height:var(--tds-toggle-switch-description-line-height);
537
- color:var(--tds-toggle-switch-description-color);
538
- cursor:text;
458
+ justify-content:flex-start;
459
+ min-width:0;
539
460
  }
540
461
 
541
- .tds-toggle-switch--sm{
542
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
543
- --tds-toggle-switch-line-height:1.35;
544
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
545
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
546
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
547
- --tds-toggle-switch-description-line-height:1.3;
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);
548
473
  }
549
474
 
550
- .tds-toggle-switch--hide-label{
551
- --tds-toggle-switch-display:inline-flex;
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;
552
497
  }
553
498
 
554
- .tds-radio{
555
- --tds-radio-font-size:var(--t-font-size-md);
556
- --tds-radio-cursor:pointer;
557
- --tds-radio-line-height:1.4;
558
- --tds-radio-transition-property:border-width;
559
-
560
- --tds-radio-input-size:var(--t-element-size-md);
561
- --tds-radio-input-border-radius:var(--t-border-radius-round);
562
- --tds-radio-input-border-color:var(--t-form-border-color);
563
- --tds-radio-input-border-width:var(--t-form-border-width);
564
- --tds-radio-input-background-color:transparent;
565
-
566
- --tds-radio-label-color:var(--t-form-color);
567
-
568
- --tds-radio-description-font-size:var(--t-font-size-sm);
569
- --tds-radio-description-line-height:1.35;
570
- --tds-radio-description-color:var(--t-text-color-secondary);
571
-
499
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
572
500
  position:relative;
573
- display:inline-grid;
574
- grid-template-columns:auto;
575
- grid-auto-columns:1fr;
576
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
577
- line-height:var(--tds-radio-line-height);
578
- cursor:var(--tds-radio-cursor);
579
- -webkit-user-select:none;
580
- -moz-user-select:none;
581
- user-select:none;
582
501
  }
583
502
 
584
- .tds-radio label{
585
- grid-area:1 / 2;
586
- font-size:var(--tds-radio-font-size);
587
- font-weight:var(--t-font-weight-normal);
588
- color:var(--tds-radio-label-color);
589
- cursor:var(--tds-radio-cursor);
590
- }
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
+ }
591
507
 
592
- .tds-radio input[type="radio"]{
593
- position:relative;
594
- width:1em;
595
- height:1em;
596
- margin:calc((1lh - 1em) / 2) 0 0;
597
- font-size:var(--tds-radio-font-size);
598
- line-height:inherit;
599
- -webkit-appearance:none;
600
- -moz-appearance:none;
601
- appearance:none;
602
- cursor:var(--tds-radio-cursor);
603
- background-color:var(--tds-radio-input-background-color);
604
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
605
- border-radius:var(--tds-radio-input-border-radius);
606
- transition-timing-function:ease-in-out;
607
- transition-duration:180ms;
608
- transition-property:var(--tds-radio-transition-property);
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
+ }
519
+
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;
609
523
  }
524
+ }
610
525
 
611
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
612
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
613
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
614
- }
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
+ }
615
535
 
616
- :is(.tds-radio input[type="radio"]):focus-visible{
617
- outline:var(--t-focus-ring-outline);
618
- outline-offset:var(--t-focus-ring-offset);
619
- }
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);
543
+ }
620
544
 
621
- :is(.tds-radio input[type="radio"]):disabled{
622
- pointer-events:none;
623
- }
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);
551
+ }
624
552
 
625
- @media (prefers-reduced-motion: reduce){
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;
561
+ }
626
562
 
627
- .tds-radio input[type="radio"]{
628
- --tds-radio-transition-property:none;
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%;
629
569
  }
630
- }
631
570
 
632
- .tds-radio:has(input:checked){
633
- --tds-radio-input-background-color:var(--t-form-background-color);
634
- --tds-radio-input-border-color:var(--t-border-color-control-info);
635
- --tds-radio-input-border-width:4px;
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;
636
576
  }
637
577
 
638
- .tds-radio:has(input:checked) input:hover:not(:disabled){
639
- --tds-radio-input-background-color:var(--t-form-background-color);
640
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
641
- }
642
-
643
- .tds-radio:has(input:user-invalid){
644
- --tds-radio-input-border-color:var(--t-form-border-color-error);
578
+ .tds-page-header [slot="actions"],
579
+ .tds-page-header .tds-page-header__actions{
580
+ width:auto;
645
581
  }
646
582
 
647
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
648
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
649
- --tds-radio-input-background-color:var(--t-form-background-color-error);
650
- }
651
-
652
- .tds-radio:has(input:disabled){
653
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
654
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
655
-
656
- --tds-radio-label-color:var(--t-form-color-disabled);
657
- --tds-radio-description-color:var(--t-form-color-disabled);
658
- --tds-radio-cursor:not-allowed;
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;
659
586
  }
587
+ }
660
588
 
661
- .tds-radio:has(input:disabled) input:checked{
662
- --tds-radio-input-background-color:var(--t-form-background-color);
663
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
664
- }
589
+ .tds-page-header-phone,
590
+ .tds-page-header-email{
591
+ color:var(--tds-page-header-color);
592
+ white-space:nowrap;
593
+ }
665
594
 
666
- .tds-radio-description{
667
- display:flex;
668
- grid-area:2 / 2;
669
- gap:var(--t-spacing-half);
670
- align-items:flex-start;
671
- margin:0;
672
- font-size:var(--tds-radio-description-font-size);
673
- line-height:var(--tds-radio-description-line-height);
674
- color:var(--tds-radio-description-color);
675
- cursor:text;
595
+ .tds-page-header-email{
596
+ max-width:100%;
597
+ overflow:hidden;
598
+ text-overflow:ellipsis;
676
599
  }
677
600
 
678
- .tds-radio--sm{
679
- --tds-radio-line-height:1.35;
680
- --tds-radio-input-size:var(--t-element-size-sm);
681
- --tds-radio-font-size:var(--t-font-size-sm);
682
- --tds-radio-description-font-size:var(--t-font-size-xs);
683
- --tds-radio-description-line-height:1.3;
601
+ @keyframes indicator-pulse{
602
+ 0%{
603
+ opacity:.3;
604
+ transform:scale(.9);
605
+ }
606
+
607
+ 100%{
608
+ opacity:0;
609
+ transform:scale(1.75);
610
+ }
684
611
  }
685
612
 
686
613
  .tds-checkbox{
@@ -802,362 +729,435 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
802
729
  --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
803
730
  }
804
731
 
805
- .tds-checkbox:has(input:indeterminate){
806
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
807
- }
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;
740
+ }
741
+
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:"*";
761
+ }
762
+
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);
766
+
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;
770
+ }
771
+
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);
774
+ }
775
+
776
+ .tds-checkbox-description{
777
+ display:flex;
778
+ grid-area:2 / 2;
779
+ gap:var(--t-spacing-half);
780
+ align-items:flex-start;
781
+ 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);
785
+ cursor:text;
786
+ }
787
+
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;
801
+ }
802
+
803
+ .tds-radio{
804
+ --tds-radio-font-size:var(--t-font-size-md);
805
+ --tds-radio-cursor:pointer;
806
+ --tds-radio-line-height:1.4;
807
+ --tds-radio-transition-property:border-width;
808
+
809
+ --tds-radio-input-size:var(--t-element-size-md);
810
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
811
+ --tds-radio-input-border-color:var(--t-form-border-color);
812
+ --tds-radio-input-border-width:var(--t-form-border-width);
813
+ --tds-radio-input-background-color:transparent;
814
+
815
+ --tds-radio-label-color:var(--t-form-color);
816
+
817
+ --tds-radio-description-font-size:var(--t-font-size-sm);
818
+ --tds-radio-description-line-height:1.35;
819
+ --tds-radio-description-color:var(--t-text-color-secondary);
820
+
821
+ position:relative;
822
+ display:inline-grid;
823
+ grid-template-columns:auto;
824
+ grid-auto-columns:1fr;
825
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
826
+ line-height:var(--tds-radio-line-height);
827
+ cursor:var(--tds-radio-cursor);
828
+ -webkit-user-select:none;
829
+ -moz-user-select:none;
830
+ user-select:none;
831
+ }
832
+
833
+ .tds-radio label{
834
+ grid-area:1 / 2;
835
+ font-size:var(--tds-radio-font-size);
836
+ font-weight:var(--t-font-weight-normal);
837
+ color:var(--tds-radio-label-color);
838
+ cursor:var(--tds-radio-cursor);
839
+ }
840
+
841
+ .tds-radio input[type="radio"]{
842
+ position:relative;
843
+ width:1em;
844
+ height:1em;
845
+ margin:calc((1lh - 1em) / 2) 0 0;
846
+ font-size:var(--tds-radio-font-size);
847
+ line-height:inherit;
848
+ -webkit-appearance:none;
849
+ -moz-appearance:none;
850
+ appearance:none;
851
+ cursor:var(--tds-radio-cursor);
852
+ background-color:var(--tds-radio-input-background-color);
853
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
854
+ border-radius:var(--tds-radio-input-border-radius);
855
+ transition-timing-function:ease-in-out;
856
+ transition-duration:180ms;
857
+ transition-property:var(--tds-radio-transition-property);
858
+ }
859
+
860
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
861
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
862
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
863
+ }
864
+
865
+ :is(.tds-radio input[type="radio"]):focus-visible{
866
+ outline:var(--t-focus-ring-outline);
867
+ outline-offset:var(--t-focus-ring-offset);
868
+ }
869
+
870
+ :is(.tds-radio input[type="radio"]):disabled{
871
+ pointer-events:none;
872
+ }
873
+
874
+ @media (prefers-reduced-motion: reduce){
808
875
 
809
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
810
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
811
- --tds-checkbox-description-color:var(--t-text-color-status-error);
812
- --tds-checkbox-description-invalid-icon-display:inline-block;
876
+ .tds-radio input[type="radio"]{
877
+ --tds-radio-transition-property:none;
813
878
  }
814
-
815
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
816
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
817
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
818
879
  }
819
880
 
820
- :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{
821
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
822
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
881
+ .tds-radio:has(input:checked){
882
+ --tds-radio-input-background-color:var(--t-form-background-color);
883
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
884
+ --tds-radio-input-border-width:4px;
885
+ }
886
+
887
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
888
+ --tds-radio-input-background-color:var(--t-form-background-color);
889
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
823
890
  }
824
891
 
825
- :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){
826
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
827
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
828
- }
892
+ .tds-radio:has(input:user-invalid){
893
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
894
+ }
829
895
 
830
- .tds-checkbox:has(input:required) label::after{
831
- margin-left:.25ch;
832
- color:var(--t-text-color-status-error);
833
- content:"*";
896
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
897
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
898
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
834
899
  }
835
900
 
836
- .tds-checkbox:has(input:disabled){
837
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
838
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
901
+ .tds-radio:has(input:disabled){
902
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
903
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
839
904
 
840
- --tds-checkbox-label-color:var(--t-form-color-disabled);
841
- --tds-checkbox-description-color:var(--t-form-color-disabled);
842
- --tds-checkbox-cursor:not-allowed;
905
+ --tds-radio-label-color:var(--t-form-color-disabled);
906
+ --tds-radio-description-color:var(--t-form-color-disabled);
907
+ --tds-radio-cursor:not-allowed;
843
908
  }
844
909
 
845
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
846
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
910
+ .tds-radio:has(input:disabled) input:checked{
911
+ --tds-radio-input-background-color:var(--t-form-background-color);
912
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
847
913
  }
848
914
 
849
- .tds-checkbox-description{
915
+ .tds-radio-description{
850
916
  display:flex;
851
917
  grid-area:2 / 2;
852
918
  gap:var(--t-spacing-half);
853
919
  align-items:flex-start;
854
920
  margin:0;
855
- font-size:var(--tds-checkbox-description-font-size);
856
- line-height:var(--tds-checkbox-description-line-height);
857
- color:var(--tds-checkbox-description-color);
921
+ font-size:var(--tds-radio-description-font-size);
922
+ line-height:var(--tds-radio-description-line-height);
923
+ color:var(--tds-radio-description-color);
858
924
  cursor:text;
859
925
  }
860
926
 
861
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
862
- display:var(--tds-checkbox-description-invalid-icon-display);
863
- flex-shrink:0;
864
- margin-top:calc(.5lh - .5em);
865
- line-height:var(--tds-checkbox-description-line-height);
866
- }
867
-
868
- .tds-checkbox--sm{
869
- --tds-checkbox-line-height:1.35;
870
- --tds-checkbox-input-size:var(--t-element-size-sm);
871
- --tds-checkbox-font-size:var(--t-font-size-sm);
872
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
873
- --tds-checkbox-description-line-height:1.3;
874
- }
875
-
876
- @layer t-critical{
877
- tds-page-header:not(.hydrated){
878
- display:none;
879
- }
927
+ .tds-radio--sm{
928
+ --tds-radio-line-height:1.35;
929
+ --tds-radio-input-size:var(--t-element-size-sm);
930
+ --tds-radio-font-size:var(--t-font-size-sm);
931
+ --tds-radio-description-font-size:var(--t-font-size-xs);
932
+ --tds-radio-description-line-height:1.3;
880
933
  }
881
934
 
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;
900
-
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);
935
+ .tds-radio-group{
936
+ --tds-radio-group-font-size:var(--t-font-size-md);
937
+ --tds-radio-group-line-height:1.4;
938
+ --tds-radio-group-gap:var(--t-spacing-1);
903
939
 
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);
940
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
907
941
 
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);
942
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
943
+ --tds-radio-group-description-line-height:1.35;
944
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
945
+ --tds-radio-group-description-invalid-icon-display:none;
946
+ display:flex;
947
+ flex-direction:column;
948
+ gap:var(--tds-radio-group-gap);
949
+ padding:0;
950
+ margin:0;
910
951
 
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);
952
+ font-size:var(--tds-radio-group-font-size);
953
+ line-height:var(--tds-radio-group-line-height);
954
+ border:0;
955
+ }
914
956
 
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);
957
+ .tds-radio-group legend{
958
+ padding:0;
959
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
920
960
  }
921
961
 
922
- .tds-page-header--profile{
923
- --tds-page-header-padding-y:20px;
962
+ .tds-radio-group:has(.tds-radio-group-description){
963
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
924
964
  }
925
965
 
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));
930
- }
966
+ .tds-radio-group[aria-invalid="true"]{
967
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
968
+ --tds-radio-group-description-invalid-icon-display:inline-block;
931
969
  }
932
970
 
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);
971
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
972
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
950
973
  }
951
- }
952
- }
953
974
 
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
- }
975
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
976
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
977
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
978
+ }
962
979
 
963
- .tds-page-header:not(.has-nav){
964
- padding-bottom:var(--tds-page-header-padding-y);
965
- }
980
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
981
+ --tds-radio-input-background-color:var(--t-form-background-color);
982
+ }
966
983
 
967
- .tds-page-header.inactive{
968
- background:var(--tds-page-header-background-color-inactive);
969
- }
984
+ .tds-radio-group:has(input:required) legend::after{
985
+ margin-left:.25ch;
986
+ color:var(--t-text-color-status-error);
987
+ content:"*";
988
+ }
970
989
 
971
- .tds-page-header__title-bar{
990
+ .tds-radio-group-fields{
972
991
  display:flex;
973
992
  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
- }
979
-
980
- .tds-page-header--profile > .tds-page-header__title-bar{
981
- align-items:center;
982
- }
983
-
984
- .tds-page-header__primary{
985
- width:100%;
986
- }
987
-
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
- }
996
-
997
- .tds-page-header [slot="actions"],
998
- .tds-page-header .tds-page-header__actions{
999
- width:100%;
1000
- }
1001
-
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
- }
1011
-
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{
1016
- display:flex;
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);
993
+ gap:var(--tds-radio-group-gap);
994
+ align-items:flex-start;
1023
995
  }
1024
996
 
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;
997
+ .tds-radio-group-description{
998
+ display:flex;
999
+ gap:var(--t-spacing-half);
1000
+ align-items:flex-start;
1001
+ margin:0;
1002
+ font-size:var(--tds-radio-group-description-font-size);
1003
+ line-height:var(--tds-radio-group-description-line-height);
1004
+ color:var(--tds-radio-group-description-color);
1005
+ cursor:text;
1047
1006
  }
1048
1007
 
1049
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1050
- position:relative;
1008
+ .tds-radio-group-description-invalid-icon{
1009
+ display:var(--tds-radio-group-description-invalid-icon-display);
1010
+ flex-shrink:0;
1011
+ margin-top:calc(.5lh - .5em);
1012
+ line-height:var(--tds-radio-group-description-line-height);
1051
1013
  }
1052
1014
 
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);
1015
+ .tds-radio-group--sm{
1016
+ --tds-radio-group-line-height:1.35;
1017
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1018
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1019
+ --tds-radio-group-description-line-height:1.3;
1056
1020
  }
1057
1021
 
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
- }
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;
1069
1028
 
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
- }
1029
+ --tds-toggle-switch-label-color:var(--t-form-color);
1075
1030
 
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
- }
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-form-toggle-color);
1035
+ --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
1085
1036
 
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);
1093
- }
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;
1094
1040
 
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
- }
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;
1102
1045
 
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;
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;
1111
1053
  }
1112
1054
 
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%;
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);
1119
1069
  }
1120
1070
 
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;
1071
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1072
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1073
+ }
1074
+
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);
1126
1086
  }
1127
1087
 
1128
- .tds-page-header [slot="actions"],
1129
- .tds-page-header .tds-page-header__actions{
1130
- width:auto;
1088
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1089
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1131
1090
  }
1132
1091
 
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;
1092
+ .tds-toggle-switch:has(input:checked){
1093
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1094
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1136
1095
  }
1137
- }
1138
1096
 
1139
- .tds-page-header-phone,
1140
- .tds-page-header-email{
1141
- color:var(--tds-page-header-color);
1142
- white-space:nowrap;
1143
- }
1097
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1098
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1099
+ }
1144
1100
 
1145
- .tds-page-header-email{
1146
- max-width:100%;
1147
- overflow:hidden;
1148
- text-overflow:ellipsis;
1101
+ .tds-toggle-switch:has(input:disabled){
1102
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-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;
1106
+ }
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);
1149
1116
  }
1150
1117
 
1151
- @keyframes indicator-pulse{
1152
- 0%{
1153
- opacity:.3;
1154
- transform:scale(.9);
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);
1155
1129
  }
1156
1130
 
1157
- 100%{
1158
- opacity:0;
1159
- transform:scale(1.75);
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;
1136
+ }
1160
1137
  }
1138
+
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;
1148
+ }
1149
+
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
+ }
1158
+
1159
+ .tds-toggle-switch--hide-label{
1160
+ --tds-toggle-switch-display:inline-flex;
1161
1161
  }
1162
1162
 
1163
1163
  .tds-loading-spinner{
@@ -2682,7 +2682,8 @@ a[class="tds-btn"]{
2682
2682
  --tds-select-color:var(--t-form-color);
2683
2683
  --tds-select-placeholder-color:var(--t-form-placeholder-color);
2684
2684
  --tds-select-font-size:var(--t-font-size-md);
2685
- --tds-select-height:32px;
2685
+ --tds-select-min-height:var(--t-container-size-md);
2686
+ --tds-select-padding-block:6px;
2686
2687
  --tds-select-description-color:var(--t-text-color-secondary);
2687
2688
  --tds-select-description-invalid-icon-display:none;
2688
2689
  --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
@@ -2743,11 +2744,13 @@ a[class="tds-btn"]{
2743
2744
  position:relative;
2744
2745
  place-items:center;
2745
2746
  inline-size:100%;
2746
- block-size:var(--tds-select-height);
2747
+ min-block-size:var(--tds-select-min-height);
2748
+ padding-block:var(--tds-select-padding-block);
2747
2749
  padding-inline:var(--t-spacing-1);
2748
2750
  padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2749
2751
  font-family:inherit;
2750
2752
  font-size:var(--tds-select-font-size);
2753
+ line-height:1;
2751
2754
  color:var(--tds-select-color);
2752
2755
  text-align:left;
2753
2756
  -webkit-appearance:none;
@@ -2827,7 +2830,7 @@ a[class="tds-btn"]{
2827
2830
  }
2828
2831
 
2829
2832
  .tds-select.tds-select--lg{
2830
- --tds-select-height:40px;
2833
+ --tds-select-min-height:var(--t-container-size-lg);
2831
2834
  --tds-select-font-size:var(--t-font-size-lg);
2832
2835
  }
2833
2836
 
@@ -2896,7 +2899,10 @@ a[class="tds-btn"]{
2896
2899
 
2897
2900
  .tds-select:has( > button) [popover]{
2898
2901
  inset:auto;
2899
- inline-size:anchor-size(width);
2902
+ inline-size:-moz-max-content;
2903
+ inline-size:max-content;
2904
+ min-inline-size:anchor-size(width);
2905
+ max-inline-size:100vi;
2900
2906
  max-block-size:min(50vh, 20rem);
2901
2907
  padding:var(--tds-select-dropdown-padding);
2902
2908
  margin-block:var(--tds-select-dropdown-margin-block);
@@ -3028,14 +3034,16 @@ a[class="tds-btn"]{
3028
3034
  padding-inline-end:0;
3029
3035
  background-image:none;
3030
3036
  }
3031
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
3032
- padding-block:0;
3033
- -webkit-appearance:base-select;
3034
- -moz-appearance:base-select;
3035
- appearance:base-select;
3037
+ @media (hover) and (pointer: fine){
3038
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
3039
+ padding-block:0;
3040
+ -webkit-appearance:base-select;
3041
+ -moz-appearance:base-select;
3042
+ appearance:base-select;
3043
+ }
3036
3044
  }
3037
-
3038
3045
  :is(.tds-select select:has( > button))::picker-icon{
3046
+ flex-shrink:0;
3039
3047
  width:var(--tds-select-caret-size);
3040
3048
  margin-inline-end:var(--tds-select-caret-inline-offset);
3041
3049
  content:var(--tds-select-background-image);
@@ -3060,23 +3068,24 @@ a[class="tds-btn"]{
3060
3068
  opacity:1;
3061
3069
  transform:rotate(.5turn);
3062
3070
  }
3063
- :is(.tds-select select:has( > button)) > button{
3064
- line-height:calc(var(--tds-select-height) - 2px);
3065
- }
3066
3071
 
3067
- :is(:is(.tds-select select:has( > button)) > button):focus-visible{
3068
- outline-offset:-3px;
3069
- }
3072
+ :is(.tds-select select:has( > button)) selectedcontent{
3073
+ overflow:hidden;
3074
+ text-overflow:ellipsis;
3075
+ line-height:calc(var(--tds-select-min-height) - 2px);
3076
+ white-space:nowrap;
3077
+ }
3070
3078
 
3071
3079
  :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
3072
3080
  color:var(--tds-select-placeholder-color);
3073
3081
  }
3074
3082
 
3075
3083
  :is(.tds-select select:has( > button))::picker(select){
3076
- inset-block-start:calc(anchor-size(height) + var(--t-spacing-1));
3077
- inset-inline-start:anchor(start);
3078
- inline-size:anchor-size(width);
3084
+ inset:auto;
3085
+ inline-size:-moz-max-content;
3086
+ inline-size:max-content;
3079
3087
  min-inline-size:anchor-size(width);
3088
+ max-inline-size:100vi;
3080
3089
  padding:var(--tds-select-dropdown-padding);
3081
3090
  margin-block:var(--tds-select-dropdown-margin-block);
3082
3091
  position-try-fallbacks:flip-block, flip-inline;