@planningcenter/tapestry 3.2.0 → 3.2.1-rc.0

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 +867 -863
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +867 -863
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/unstable.css +19 -15
  6. package/dist/unstable.css.map +1 -1
  7. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,135 +1,3 @@
1
- .tds-radio{
2
- --tds-radio-font-size:var(--t-font-size-md);
3
- --tds-radio-cursor:pointer;
4
- --tds-radio-line-height:1.4;
5
- --tds-radio-transition-property:border-width;
6
-
7
- --tds-radio-input-size:var(--t-element-size-md);
8
- --tds-radio-input-border-radius:var(--t-border-radius-round);
9
- --tds-radio-input-border-color:var(--t-form-border-color);
10
- --tds-radio-input-border-width:var(--t-form-border-width);
11
- --tds-radio-input-background-color:transparent;
12
-
13
- --tds-radio-label-color:var(--t-form-color);
14
-
15
- --tds-radio-description-font-size:var(--t-font-size-sm);
16
- --tds-radio-description-line-height:1.35;
17
- --tds-radio-description-color:var(--t-text-color-secondary);
18
-
19
- position:relative;
20
- display:inline-grid;
21
- grid-template-columns:auto;
22
- grid-auto-columns:1fr;
23
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
24
- line-height:var(--tds-radio-line-height);
25
- cursor:var(--tds-radio-cursor);
26
- -webkit-user-select:none;
27
- -moz-user-select:none;
28
- user-select:none;
29
- }
30
-
31
- .tds-radio label{
32
- grid-area:1 / 2;
33
- font-size:var(--tds-radio-font-size);
34
- font-weight:var(--t-font-weight-normal);
35
- color:var(--tds-radio-label-color);
36
- cursor:var(--tds-radio-cursor);
37
- }
38
-
39
- .tds-radio input[type="radio"]{
40
- position:relative;
41
- width:1em;
42
- height:1em;
43
- margin:calc((1lh - 1em) / 2) 0 0;
44
- font-size:var(--tds-radio-font-size);
45
- line-height:inherit;
46
- -webkit-appearance:none;
47
- -moz-appearance:none;
48
- appearance:none;
49
- cursor:var(--tds-radio-cursor);
50
- background-color:var(--tds-radio-input-background-color);
51
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
52
- border-radius:var(--tds-radio-input-border-radius);
53
- transition-timing-function:var(--t-ease-in-out);
54
- transition-duration:var(--t-duration-200);
55
- transition-property:var(--tds-radio-transition-property);
56
- }
57
-
58
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
59
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
60
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
61
- }
62
-
63
- :is(.tds-radio input[type="radio"]):focus-visible{
64
- outline:var(--t-focus-ring-outline);
65
- outline-offset:var(--t-focus-ring-offset);
66
- }
67
-
68
- :is(.tds-radio input[type="radio"]):disabled{
69
- pointer-events:none;
70
- }
71
-
72
- @media (prefers-reduced-motion: reduce){
73
-
74
- .tds-radio input[type="radio"]{
75
- --tds-radio-transition-property:none;
76
- }
77
- }
78
-
79
- .tds-radio:has(input:checked){
80
- --tds-radio-input-background-color:var(--t-form-background-color);
81
- --tds-radio-input-border-color:var(--t-border-color-control-info);
82
- --tds-radio-input-border-width:4px;
83
- }
84
-
85
- .tds-radio:has(input:checked) input:hover:not(:disabled){
86
- --tds-radio-input-background-color:var(--t-form-background-color);
87
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
88
- }
89
-
90
- .tds-radio:has(input:user-invalid){
91
- --tds-radio-input-border-color:var(--t-form-border-color-error);
92
- }
93
-
94
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
95
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
96
- --tds-radio-input-background-color:var(--t-form-background-color-error);
97
- }
98
-
99
- .tds-radio:has(input:disabled){
100
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
101
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
102
-
103
- --tds-radio-label-color:var(--t-form-color-disabled);
104
- --tds-radio-description-color:var(--t-form-color-disabled);
105
- --tds-radio-cursor:not-allowed;
106
- }
107
-
108
- .tds-radio:has(input:disabled) input:checked{
109
- --tds-radio-input-background-color:var(--t-form-background-color);
110
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
111
- }
112
-
113
- .tds-radio-description{
114
- display:flex;
115
- grid-area:2 / 2;
116
- gap:var(--t-spacing-half);
117
- align-items:flex-start;
118
- margin:0;
119
- font-size:var(--tds-radio-description-font-size);
120
- line-height:var(--tds-radio-description-line-height);
121
- color:var(--tds-radio-description-color);
122
- cursor:text;
123
- }
124
-
125
- .tds-radio--sm{
126
- --tds-radio-line-height:1.35;
127
- --tds-radio-input-size:var(--t-element-size-sm);
128
- --tds-radio-font-size:var(--t-font-size-sm);
129
- --tds-radio-description-font-size:var(--t-font-size-xs);
130
- --tds-radio-description-line-height:1.3;
131
- }
132
-
133
1
 
134
2
  @media (prefers-reduced-motion: no-preference){
135
3
 
@@ -492,305 +360,401 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
492
360
  flex-direction:column;
493
361
  }
494
362
 
495
- .tds-checkbox{
496
- --tds-checkbox-font-size:var(--t-font-size-md);
497
- --tds-checkbox-cursor:pointer;
498
- --tds-checkbox-line-height:1.4;
499
- --tds-checkbox-transition-property:background-color, border-color;
500
-
501
- --tds-checkbox-input-size:var(--t-element-size-md);
502
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
503
- --tds-checkbox-input-border-color:var(--t-form-border-color);
504
- --tds-checkbox-input-background-color:transparent;
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
366
+ }
367
+ }
505
368
 
506
- --tds-checkbox-input-icon:none;
507
- --tds-checkbox-input-icon-visibility:hidden;
508
- --tds-checkbox-input-icon-opacity:0;
509
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
369
+ @layer t-component{
370
+ .tds-page-header{
371
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
+ --tds-page-header-color:var(--t-text-color);
374
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
375
+ --tds-page-header-headline-color:var(--t-text-color-headline);
376
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
+ --tds-page-header-padding-x:var(--t-spacing-2);
378
+ --tds-page-header-padding-y:var(--t-spacing-2);
379
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
+ --tds-page-header-nav-gap:var(--t-spacing-1);
381
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
382
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
+ --tds-page-header-nav-item-border-width:1px;
510
387
 
511
- --tds-checkbox-label-color:var(--t-form-color);
388
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
512
390
 
513
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
514
- --tds-checkbox-description-line-height:1.35;
515
- --tds-checkbox-description-color:var(--t-text-color-secondary);
516
- --tds-checkbox-description-invalid-icon-display:none;
391
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
517
394
 
518
- position:relative;
519
- display:inline-grid;
520
- grid-template-columns:auto;
521
- grid-auto-columns:1fr;
522
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
523
- line-height:var(--tds-checkbox-line-height);
524
- cursor:var(--tds-checkbox-cursor);
525
- -webkit-user-select:none;
526
- -moz-user-select:none;
527
- user-select:none;
528
- }
395
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
529
397
 
530
- .tds-checkbox label{
531
- grid-area:1 / 2;
532
- font-size:var(--tds-checkbox-font-size);
533
- font-weight:var(--t-font-weight-normal);
534
- color:var(--tds-checkbox-label-color);
535
- cursor:var(--tds-checkbox-cursor);
536
- }
398
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
537
401
 
538
- .tds-checkbox tds-indeterminate{
539
- display:flex;
402
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
540
407
  }
541
408
 
542
- .tds-checkbox input[type="checkbox"]{
543
- position:relative;
544
- width:1em;
545
- height:1em;
546
- margin:calc((1lh - 1em) / 2) 0 0;
547
- font-size:var(--tds-checkbox-font-size);
548
- line-height:inherit;
549
- -webkit-appearance:none;
550
- -moz-appearance:none;
551
- appearance:none;
552
- cursor:var(--tds-checkbox-cursor);
553
- background-color:var(--tds-checkbox-input-background-color);
554
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
555
- border-radius:var(--tds-checkbox-input-border-radius);
556
- transition-timing-function:var(--t-ease-in-out);
557
- transition-duration:var(--t-duration-200);
558
- transition-property:var(--tds-checkbox-transition-property);
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
559
411
  }
560
412
 
561
- :is(.tds-checkbox input[type="checkbox"])::before{
562
- position:absolute;
563
- top:50%;
564
- left:50%;
565
- visibility:var(--tds-checkbox-input-icon-visibility);
566
- width:100%;
567
- height:100%;
568
- content:"";
569
- background-color:var(--tds-checkbox-input-icon-fill);
570
- border-radius:var(--tds-checkbox-input-border-radius);
571
- opacity:var(--tds-checkbox-input-icon-opacity);
572
- -webkit-mask-image:var(--tds-checkbox-input-icon);
573
- mask-image:var(--tds-checkbox-input-icon);
574
- -webkit-mask-repeat:no-repeat;
575
- mask-repeat:no-repeat;
576
- -webkit-mask-size:contain;
577
- mask-size:contain;
578
- transform:translate(-50%, -50%);
579
- }
580
-
581
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
582
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
583
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
413
+ @supports (color: light-dark(#fff, #000)){
414
+ .tds-page-header{
415
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
584
417
  }
418
+ }
585
419
 
586
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
587
- outline:var(--t-focus-ring-outline);
588
- outline-offset:var(--t-focus-ring-offset);
589
- }
590
-
591
- :is(.tds-checkbox input[type="checkbox"]):disabled{
592
- pointer-events:none;
420
+ @media (min-width: 600px){
421
+ .tds-page-header{
422
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
423
+ --tds-page-header-color:var(--t-text-color-secondary);
424
+ --tds-page-header-bottom-border-color:var(--t-border-color);
425
+ --tds-page-header-padding-x:var(--t-spacing-3);
426
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
+ --tds-page-header-nav-gap:var(--t-spacing-half);
428
+ --tds-page-header-nav-background:transparent;
429
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
+ --tds-page-header-nav-item-border-width:1px;
431
+ --tds-page-header-nav-item-color:var(--t-text-color);
432
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
434
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
435
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
436
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
593
437
  }
594
-
595
- @media (prefers-reduced-motion: reduce){
596
-
597
- .tds-checkbox input[type="checkbox"]{
598
- --tds-checkbox-transition-property:none;
599
438
  }
600
- }
439
+ }
601
440
 
602
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
603
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
604
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
605
- --tds-checkbox-input-icon-visibility:visible;
606
- --tds-checkbox-input-icon-opacity:1;
607
- }
441
+ .tds-page-header{
442
+ display:flex;
443
+ flex-direction:column;
444
+ padding-top:var(--tds-page-header-padding-y);
445
+ color:var(--tds-page-header-color);
446
+ background:var(--tds-page-header-background-color);
447
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
448
+ }
608
449
 
609
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
610
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
611
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
612
- }
450
+ .tds-page-header:not(.has-nav){
451
+ padding-bottom:var(--tds-page-header-padding-y);
452
+ }
613
453
 
614
- .tds-checkbox:has(input:checked){
615
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
454
+ .tds-page-header.inactive{
455
+ background:var(--tds-page-header-background-color-inactive);
616
456
  }
617
457
 
618
- .tds-checkbox:has(input:indeterminate){
619
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
458
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
459
+ width:100%;
620
460
  }
621
461
 
622
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
623
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
624
- --tds-checkbox-description-color:var(--t-text-color-status-error);
625
- --tds-checkbox-description-invalid-icon-display:inline-block;
462
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
463
+ display:flex;
464
+ flex-flow:row wrap;
465
+ gap:var(--t-spacing-half) var(--t-spacing-1);
466
+ align-items:flex-start;
467
+ justify-content:flex-start;
468
+ min-width:0;
626
469
  }
627
470
 
628
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
629
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
630
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
471
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
472
+ display:flex;
473
+ gap:var(--tds-page-header-nav-gap);
474
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
475
+ margin:0 0 -1px;
476
+ overflow:auto;
477
+ list-style:none;
478
+ background:var(--tds-page-header-nav-background);
631
479
  }
632
480
 
633
- :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{
634
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
635
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
481
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
482
+ position:relative;
483
+ display:inline-flex;
484
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
485
+ font-size:var(--t-font-size-sm);
486
+ line-height:22px;
487
+ color:var(--tds-page-header-nav-item-color);
488
+ white-space:nowrap;
489
+ text-decoration:none;
490
+ -webkit-appearance:none;
491
+ -moz-appearance:none;
492
+ appearance:none;
493
+ cursor:pointer;
494
+ outline-offset:-2px;
495
+ background-color:var(--tds-page-header-nav-item-background-color);
496
+ background-clip:padding-box;
497
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
498
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
499
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
636
500
  }
637
501
 
638
- :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){
639
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
640
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
502
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
503
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
504
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
505
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
506
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
641
507
  }
642
508
 
643
- .tds-checkbox:has(input:required) label::after{
644
- margin-left:.25ch;
645
- color:var(--t-text-color-status-error);
646
- content:"*";
647
- }
509
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
510
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
511
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
512
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
513
+ }
648
514
 
649
- .tds-checkbox:has(input:disabled){
650
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
651
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
515
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
516
+ background-color:var(--tds-page-header-nav-item-background-color-active);
517
+ border-color:var(--tds-page-header-nav-item-border-color-active);
518
+ }
652
519
 
653
- --tds-checkbox-label-color:var(--t-form-color-disabled);
654
- --tds-checkbox-description-color:var(--t-form-color-disabled);
655
- --tds-checkbox-cursor:not-allowed;
656
- }
520
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
521
+ color:var(--tds-page-header-nav-item-color-disabled);
522
+ cursor:not-allowed;
523
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
524
+ opacity:1;
525
+ }
657
526
 
658
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
659
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
527
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
+ position:relative;
660
529
  }
661
530
 
662
- .tds-checkbox-description{
531
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
532
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
533
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
534
+ }
535
+
536
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
537
+ position:absolute;
538
+ top:-5px;
539
+ right:-2px;
540
+ width:10px;
541
+ height:10px;
542
+ content:"";
543
+ background:var(--tds-page-header-nav-item-indicator-color);
544
+ border-radius:50%;
545
+ }
546
+
547
+ @media (prefers-reduced-motion: no-preference){
548
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
549
+ animation:indicator-pulse 1.25s ease infinite;
550
+ }
551
+ }
552
+
553
+ .tds-page-header__title-bar{
663
554
  display:flex;
664
- grid-area:2 / 2;
665
- gap:var(--t-spacing-half);
555
+ flex-direction:column;
556
+ gap:var(--t-spacing-2) var(--t-spacing-1);
666
557
  align-items:flex-start;
667
- margin:0;
668
- font-size:var(--tds-checkbox-description-font-size);
669
- line-height:var(--tds-checkbox-description-line-height);
670
- color:var(--tds-checkbox-description-color);
671
- cursor:text;
558
+ justify-content:space-between;
559
+ padding:0 var(--tds-page-header-padding-x);
672
560
  }
673
561
 
674
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
675
- display:var(--tds-checkbox-description-invalid-icon-display);
676
- flex-shrink:0;
677
- margin-top:calc(.5lh - .5em);
678
- line-height:var(--tds-checkbox-description-line-height);
562
+ .tds-page-header--profile > .tds-page-header__title-bar{
563
+ align-items:center;
679
564
  }
680
565
 
681
- .tds-checkbox--sm{
682
- --tds-checkbox-line-height:1.35;
683
- --tds-checkbox-input-size:var(--t-element-size-sm);
684
- --tds-checkbox-font-size:var(--t-font-size-sm);
685
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
686
- --tds-checkbox-description-line-height:1.3;
687
- }
688
-
689
- .tds-input:has(textarea){
690
- --tds-input-padding-block:6px;
691
- --tds-input-resizer-size:var(--t-element-size-sm);
692
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
566
+ .tds-page-header__primary{
567
+ width:100%;
693
568
  }
694
569
 
695
- @supports (x: attr(x type(*))){
570
+ .tds-page-header__primary h1{
571
+ margin:0;
572
+ font-size:var(--tds-page-header-headline-font-size);
573
+ font-weight:var(--t-font-weight-normal);
574
+ line-height:32px;
575
+ color:var(--tds-page-header-headline-color);
576
+ overflow-wrap:break-word;
577
+ }
696
578
 
697
- .tds-input:has(textarea){
698
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
699
- }
579
+ @media (min-width: 960px){
580
+ .tds-page-header__primary{
581
+ flex:1 1 max-content;
582
+ width:auto;
583
+ min-width:0;
584
+ max-width:100%;
700
585
  }
701
586
 
702
- .tds-input.tds-textarea--resize-vertical textarea{
703
- resize:vertical;
587
+ .tds-page-header__title-bar,
588
+ .tds-page-header--profile .tds-page-header__title-bar{
589
+ flex-flow:row nowrap;
590
+ row-gap:12px;
591
+ align-items:flex-start;
592
+ }
593
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
+ width:auto;
704
595
  }
705
596
 
706
- .tds-input.tds-textarea--resize-none textarea{
707
- resize:none;
597
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
+ justify-content:flex-end;
708
599
  }
600
+ }
709
601
 
710
- .tds-input.tds-textarea--resize-auto textarea{
711
- resize:vertical;
712
- }
602
+ .tds-page-header-phone,
603
+ .tds-page-header-email{
604
+ color:var(--tds-page-header-color);
605
+ white-space:nowrap;
606
+ }
713
607
 
714
- @supports (field-sizing: content){
715
- .tds-input.tds-textarea--resize-auto textarea{
716
- field-sizing:content;
717
- resize:none;
718
- }
719
- }
608
+ .tds-page-header-email{
609
+ max-width:100%;
610
+ overflow:hidden;
611
+ text-overflow:ellipsis;
612
+ }
720
613
 
721
- .tds-input textarea{
722
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
723
- --tds-input-scrollbar-thumb-color-hidden:transparent;
724
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
725
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
726
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
727
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
728
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
729
- --tds-input-scrollbar-thumb-border-radius:999px;
730
- --tds-input-scrollbar-thumb-border-width:3px;
731
- --tds-input-scrollbar-track-margin-block:.125rem;
732
- scrollbar-color:initial;
733
- transition-timing-function:var(--t-ease-in-out);
734
- transition-duration:var(--t-duration-200);
735
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
614
+ @keyframes indicator-pulse{
615
+ 0%{
616
+ opacity:.3;
617
+ transform:scale(.9);
618
+ }
619
+
620
+ 100%{
621
+ opacity:0;
622
+ transform:scale(1.75);
623
+ }
736
624
  }
737
625
 
738
- @media (pointer: fine){
739
- :is(.tds-input textarea)::-webkit-scrollbar{
740
- width:12px;
741
- height:12px;
742
- cursor:default;
743
- }
626
+ .tds-radio{
627
+ --tds-radio-font-size:var(--t-font-size-md);
628
+ --tds-radio-cursor:pointer;
629
+ --tds-radio-line-height:1.4;
630
+ --tds-radio-transition-property:border-width;
744
631
 
745
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
746
- cursor:default;
747
- background:var(--tds-input-scrollbar-thumb-color);
748
- background-clip:content-box;
749
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
750
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
751
- }
632
+ --tds-radio-input-size:var(--t-element-size-md);
633
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
634
+ --tds-radio-input-border-color:var(--t-form-border-color);
635
+ --tds-radio-input-border-width:var(--t-form-border-width);
636
+ --tds-radio-input-background-color:transparent;
752
637
 
753
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
754
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
755
- }
638
+ --tds-radio-label-color:var(--t-form-color);
756
639
 
757
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
758
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
640
+ --tds-radio-description-font-size:var(--t-font-size-sm);
641
+ --tds-radio-description-line-height:1.35;
642
+ --tds-radio-description-color:var(--t-text-color-secondary);
643
+
644
+ position:relative;
645
+ display:inline-grid;
646
+ grid-template-columns:auto;
647
+ grid-auto-columns:1fr;
648
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
649
+ line-height:var(--tds-radio-line-height);
650
+ cursor:var(--tds-radio-cursor);
651
+ -webkit-user-select:none;
652
+ -moz-user-select:none;
653
+ user-select:none;
654
+ }
655
+
656
+ .tds-radio label{
657
+ grid-area:1 / 2;
658
+ font-size:var(--tds-radio-font-size);
659
+ font-weight:var(--t-font-weight-normal);
660
+ color:var(--tds-radio-label-color);
661
+ cursor:var(--tds-radio-cursor);
662
+ }
663
+
664
+ .tds-radio input[type="radio"]{
665
+ position:relative;
666
+ width:1em;
667
+ height:1em;
668
+ margin:calc((1lh - 1em) / 2) 0 0;
669
+ font-size:var(--tds-radio-font-size);
670
+ line-height:inherit;
671
+ -webkit-appearance:none;
672
+ -moz-appearance:none;
673
+ appearance:none;
674
+ cursor:var(--tds-radio-cursor);
675
+ background-color:var(--tds-radio-input-background-color);
676
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
677
+ border-radius:var(--tds-radio-input-border-radius);
678
+ transition-timing-function:var(--t-ease-in-out);
679
+ transition-duration:var(--t-duration-200);
680
+ transition-property:var(--tds-radio-transition-property);
681
+ }
682
+
683
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
684
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
685
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
759
686
  }
760
687
 
761
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
762
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
688
+ :is(.tds-radio input[type="radio"]):focus-visible{
689
+ outline:var(--t-focus-ring-outline);
690
+ outline-offset:var(--t-focus-ring-offset);
763
691
  }
764
692
 
765
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
766
- background:var(--tds-input-scrollbar-surface-color);
693
+ :is(.tds-radio input[type="radio"]):disabled{
694
+ pointer-events:none;
767
695
  }
768
696
 
769
- :is(.tds-input textarea)::-webkit-resizer{
770
- background:var(--tds-input-resizer-icon) no-repeat;
771
- background-position:right bottom;
772
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
697
+ @media (prefers-reduced-motion: reduce){
698
+
699
+ .tds-radio input[type="radio"]{
700
+ --tds-radio-transition-property:none;
701
+ }
773
702
  }
774
703
 
775
- :is(.tds-input textarea)::-webkit-scrollbar-track{
776
- margin-block:var(--tds-input-scrollbar-track-margin-block);
777
- cursor:default;
704
+ .tds-radio:has(input:checked){
705
+ --tds-radio-input-background-color:var(--t-form-background-color);
706
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
707
+ --tds-radio-input-border-width:4px;
708
+ }
709
+
710
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
711
+ --tds-radio-input-background-color:var(--t-form-background-color);
712
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
778
713
  }
779
714
 
780
- @supports (-moz-appearance: none){
781
- :is(.tds-input textarea){
782
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
783
- scrollbar-width:thin;
784
- }
715
+ .tds-radio:has(input:user-invalid){
716
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
717
+ }
785
718
 
786
- @media (hover){
787
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
788
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
789
- }
790
- }
719
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
720
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
721
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
791
722
  }
723
+
724
+ .tds-radio:has(input:disabled){
725
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
726
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
727
+
728
+ --tds-radio-label-color:var(--t-form-color-disabled);
729
+ --tds-radio-description-color:var(--t-form-color-disabled);
730
+ --tds-radio-cursor:not-allowed;
792
731
  }
793
732
 
733
+ .tds-radio:has(input:disabled) input:checked{
734
+ --tds-radio-input-background-color:var(--t-form-background-color);
735
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
736
+ }
737
+
738
+ .tds-radio-description{
739
+ display:flex;
740
+ grid-area:2 / 2;
741
+ gap:var(--t-spacing-half);
742
+ align-items:flex-start;
743
+ margin:0;
744
+ font-size:var(--tds-radio-description-font-size);
745
+ line-height:var(--tds-radio-description-line-height);
746
+ color:var(--tds-radio-description-color);
747
+ cursor:text;
748
+ }
749
+
750
+ .tds-radio--sm{
751
+ --tds-radio-line-height:1.35;
752
+ --tds-radio-input-size:var(--t-element-size-sm);
753
+ --tds-radio-font-size:var(--t-font-size-sm);
754
+ --tds-radio-description-font-size:var(--t-font-size-xs);
755
+ --tds-radio-description-line-height:1.3;
756
+ }
757
+
794
758
 
795
759
  :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
796
760
  -webkit-appearance:none;
@@ -814,232 +778,198 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
814
778
  }
815
779
  }
816
780
 
817
- .tds-radio-group{
818
- --tds-radio-group-font-size:var(--t-font-size-md);
819
- --tds-radio-group-line-height:1.4;
820
- --tds-radio-group-gap:var(--t-spacing-1);
781
+ .tds-checkbox{
782
+ --tds-checkbox-font-size:var(--t-font-size-md);
783
+ --tds-checkbox-cursor:pointer;
784
+ --tds-checkbox-line-height:1.4;
785
+ --tds-checkbox-transition-property:background-color, border-color;
821
786
 
822
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
787
+ --tds-checkbox-input-size:var(--t-element-size-md);
788
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
789
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
790
+ --tds-checkbox-input-background-color:transparent;
823
791
 
824
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
825
- --tds-radio-group-description-line-height:1.35;
826
- --tds-radio-group-description-color:var(--t-text-color-secondary);
827
- --tds-radio-group-description-invalid-icon-display:none;
828
- display:flex;
829
- flex-direction:column;
830
- gap:var(--tds-radio-group-gap);
831
- padding:0;
832
- margin:0;
792
+ --tds-checkbox-input-icon:none;
793
+ --tds-checkbox-input-icon-visibility:hidden;
794
+ --tds-checkbox-input-icon-opacity:0;
795
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
833
796
 
834
- font-size:var(--tds-radio-group-font-size);
835
- line-height:var(--tds-radio-group-line-height);
836
- border:0;
797
+ --tds-checkbox-label-color:var(--t-form-color);
798
+
799
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
800
+ --tds-checkbox-description-line-height:1.35;
801
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
802
+ --tds-checkbox-description-invalid-icon-display:none;
803
+
804
+ position:relative;
805
+ display:inline-grid;
806
+ grid-template-columns:auto;
807
+ grid-auto-columns:1fr;
808
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
809
+ line-height:var(--tds-checkbox-line-height);
810
+ cursor:var(--tds-checkbox-cursor);
811
+ -webkit-user-select:none;
812
+ -moz-user-select:none;
813
+ user-select:none;
837
814
  }
838
815
 
839
- .tds-radio-group legend{
840
- padding:0;
841
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
816
+ .tds-checkbox label{
817
+ grid-area:1 / 2;
818
+ font-size:var(--tds-checkbox-font-size);
819
+ font-weight:var(--t-font-weight-normal);
820
+ color:var(--tds-checkbox-label-color);
821
+ cursor:var(--tds-checkbox-cursor);
842
822
  }
843
823
 
844
- .tds-radio-group:has(.tds-radio-group-description){
845
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
824
+ .tds-checkbox tds-indeterminate{
825
+ display:flex;
846
826
  }
847
827
 
848
- .tds-radio-group[aria-invalid="true"]{
849
- --tds-radio-group-description-color:var(--t-text-color-status-error);
850
- --tds-radio-group-description-invalid-icon-display:inline-block;
828
+ .tds-checkbox input[type="checkbox"]{
829
+ position:relative;
830
+ width:1em;
831
+ height:1em;
832
+ margin:calc((1lh - 1em) / 2) 0 0;
833
+ font-size:var(--tds-checkbox-font-size);
834
+ line-height:inherit;
835
+ -webkit-appearance:none;
836
+ -moz-appearance:none;
837
+ appearance:none;
838
+ cursor:var(--tds-checkbox-cursor);
839
+ background-color:var(--tds-checkbox-input-background-color);
840
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
841
+ border-radius:var(--tds-checkbox-input-border-radius);
842
+ transition-timing-function:var(--t-ease-in-out);
843
+ transition-duration:var(--t-duration-200);
844
+ transition-property:var(--tds-checkbox-transition-property);
851
845
  }
852
846
 
853
- .tds-radio-group[aria-invalid="true"] .tds-radio{
854
- --tds-radio-input-border-color:var(--t-form-border-color-error);
847
+ :is(.tds-checkbox input[type="checkbox"])::before{
848
+ position:absolute;
849
+ top:50%;
850
+ left:50%;
851
+ visibility:var(--tds-checkbox-input-icon-visibility);
852
+ width:100%;
853
+ height:100%;
854
+ content:"";
855
+ background-color:var(--tds-checkbox-input-icon-fill);
856
+ border-radius:var(--tds-checkbox-input-border-radius);
857
+ opacity:var(--tds-checkbox-input-icon-opacity);
858
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
859
+ mask-image:var(--tds-checkbox-input-icon);
860
+ -webkit-mask-repeat:no-repeat;
861
+ mask-repeat:no-repeat;
862
+ -webkit-mask-size:contain;
863
+ mask-size:contain;
864
+ transform:translate(-50%, -50%);
855
865
  }
856
866
 
857
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
858
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
859
- --tds-radio-input-background-color:var(--t-form-background-color-error);
860
- }
861
-
862
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
863
- --tds-radio-input-background-color:var(--t-form-background-color);
864
- }
867
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
868
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
869
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
870
+ }
865
871
 
866
- .tds-radio-group:has(input:required) legend::after{
867
- margin-left:.25ch;
868
- color:var(--t-text-color-status-error);
869
- content:"*";
872
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
873
+ outline:var(--t-focus-ring-outline);
874
+ outline-offset:var(--t-focus-ring-offset);
870
875
  }
871
876
 
872
- .tds-radio-group-fields{
873
- display:flex;
874
- flex-direction:column;
875
- gap:var(--tds-radio-group-gap);
876
- align-items:flex-start;
877
- }
877
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
878
+ pointer-events:none;
879
+ }
878
880
 
879
- .tds-radio-group-description{
880
- display:flex;
881
- gap:var(--t-spacing-half);
882
- align-items:flex-start;
883
- margin:0;
884
- font-size:var(--tds-radio-group-description-font-size);
885
- line-height:var(--tds-radio-group-description-line-height);
886
- color:var(--tds-radio-group-description-color);
887
- cursor:text;
888
- }
881
+ @media (prefers-reduced-motion: reduce){
889
882
 
890
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
891
- display:var(--tds-radio-group-description-invalid-icon-display);
892
- flex-shrink:0;
893
- margin-top:calc(.5lh - .5em);
894
- line-height:var(--tds-radio-group-description-line-height);
883
+ .tds-checkbox input[type="checkbox"]{
884
+ --tds-checkbox-transition-property:none;
895
885
  }
886
+ }
896
887
 
897
- .tds-radio-group--sm{
898
- --tds-radio-group-line-height:1.35;
899
- --tds-radio-group-font-size:var(--t-font-size-sm);
900
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
901
- --tds-radio-group-description-line-height:1.3;
902
- }
903
-
904
- .tds-toggle-switch{
905
- --tds-toggle-switch-font-size:var(--t-font-size-md);
906
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
907
- --tds-toggle-switch-cursor:pointer;
908
- --tds-toggle-switch-display:inline-grid;
909
- --tds-toggle-switch-line-height:1.4;
910
-
911
- --tds-toggle-switch-label-color:var(--t-form-color);
912
-
913
- --tds-toggle-switch-track-width:var(--t-container-size-md);
914
- --tds-toggle-switch-track-outline:none;
915
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
916
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
917
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
918
-
919
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
920
- --tds-toggle-switch-thumb-transform:translateX(0);
921
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
922
-
923
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
924
- --tds-toggle-switch-description-line-height:1.35;
925
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
926
- position:relative;
927
-
928
- display:var(--tds-toggle-switch-display);
929
- grid-template-columns:auto;
930
- grid-auto-columns:1fr;
931
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
932
- -webkit-user-select:none;
933
- -moz-user-select:none;
934
- user-select:none;
935
- }
936
-
937
- .tds-toggle-switch input[type="checkbox"]{
938
- position:absolute;
939
- width:var(--tds-toggle-switch-track-width);
940
- height:var(--tds-toggle-switch-track-height);
941
- margin:0;
942
- -webkit-appearance:none;
943
- -moz-appearance:none;
944
- appearance:none;
945
- cursor:var(--tds-toggle-switch-cursor);
946
- outline:var(--tds-toggle-switch-track-outline);
947
- outline-offset:var(--t-focus-ring-offset);
948
- background-color:transparent;
949
- border:0;
950
- border-radius:var(--t-border-radius-round);
888
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
889
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
890
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
891
+ --tds-checkbox-input-icon-visibility:visible;
892
+ --tds-checkbox-input-icon-opacity:1;
951
893
  }
952
894
 
953
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
954
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
895
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
896
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
897
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
955
898
  }
956
899
 
957
- .tds-toggle-switch label{
958
- display:inline-flex;
959
- grid-area:1 / 2;
960
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
961
- column-gap:var(--tds-toggle-switch-column-gap);
962
- margin-top:-.09375em;
963
- font-size:var(--tds-toggle-switch-font-size);
964
- font-weight:var(--t-font-weight-normal);
965
- line-height:var(--tds-toggle-switch-line-height);
966
- color:var(--tds-toggle-switch-label-color);
967
- cursor:var(--tds-toggle-switch-cursor);
900
+ .tds-checkbox:has(input:checked){
901
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
968
902
  }
969
903
 
970
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
971
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
904
+ .tds-checkbox:has(input:indeterminate){
905
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
972
906
  }
973
907
 
974
- .tds-toggle-switch:has(input:checked){
975
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
976
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
908
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
909
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
910
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
911
+ --tds-checkbox-description-invalid-icon-display:inline-block;
977
912
  }
978
913
 
979
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
980
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
914
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
915
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
916
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
981
917
  }
982
918
 
983
- .tds-toggle-switch:has(input:disabled){
984
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
985
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
986
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
987
- --tds-toggle-switch-cursor:not-allowed;
988
- }
919
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
920
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
921
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
922
+ }
989
923
 
990
- .tds-toggle-switch-track{
991
- position:relative;
992
- flex-shrink:0;
993
- width:var(--tds-toggle-switch-track-width);
994
- height:var(--tds-toggle-switch-track-height);
995
- background-color:var(--tds-toggle-switch-track-background-color);
996
- border-radius:var(--t-border-radius-round);
997
- transition:var(--tds-toggle-switch-track-transition);
998
- }
924
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
925
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
926
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
927
+ }
999
928
 
1000
- .tds-toggle-switch-track::before{
1001
- position:absolute;
1002
- top:var(--t-spacing-fourth);
1003
- left:var(--t-spacing-fourth);
1004
- width:var(--tds-toggle-switch-thumb-size);
1005
- height:var(--tds-toggle-switch-thumb-size);
1006
- content:"";
1007
- background-color:#fff;
1008
- border-radius:var(--t-border-radius-round);
1009
- transform:var(--tds-toggle-switch-thumb-transform);
1010
- transition:var(--tds-toggle-switch-thumb-transition);
1011
- }
929
+ .tds-checkbox:has(input:required) label::after{
930
+ margin-left:.25ch;
931
+ color:var(--t-text-color-status-error);
932
+ content:"*";
933
+ }
1012
934
 
1013
- @media (prefers-reduced-motion: reduce){
935
+ .tds-checkbox:has(input:disabled){
936
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
937
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1014
938
 
1015
- .tds-toggle-switch-track{
1016
- --tds-toggle-switch-track-transition:none;
1017
- --tds-toggle-switch-thumb-transition:none;
1018
- }
939
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
940
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
941
+ --tds-checkbox-cursor:not-allowed;
1019
942
  }
1020
943
 
1021
- .tds-toggle-switch-description{
944
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
945
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
946
+ }
947
+
948
+ .tds-checkbox-description{
1022
949
  display:flex;
1023
950
  grid-area:2 / 2;
951
+ gap:var(--t-spacing-half);
1024
952
  align-items:flex-start;
1025
953
  margin:0;
1026
- font-size:var(--tds-toggle-switch-description-font-size);
1027
- line-height:var(--tds-toggle-switch-description-line-height);
1028
- color:var(--tds-toggle-switch-description-color);
954
+ font-size:var(--tds-checkbox-description-font-size);
955
+ line-height:var(--tds-checkbox-description-line-height);
956
+ color:var(--tds-checkbox-description-color);
1029
957
  cursor:text;
1030
958
  }
1031
959
 
1032
- .tds-toggle-switch--sm{
1033
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1034
- --tds-toggle-switch-line-height:1.35;
1035
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1036
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1037
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1038
- --tds-toggle-switch-description-line-height:1.3;
1039
- }
960
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
961
+ display:var(--tds-checkbox-description-invalid-icon-display);
962
+ flex-shrink:0;
963
+ margin-top:calc(.5lh - .5em);
964
+ line-height:var(--tds-checkbox-description-line-height);
965
+ }
1040
966
 
1041
- .tds-toggle-switch--hide-label{
1042
- --tds-toggle-switch-display:inline-flex;
967
+ .tds-checkbox--sm{
968
+ --tds-checkbox-line-height:1.35;
969
+ --tds-checkbox-input-size:var(--t-element-size-sm);
970
+ --tds-checkbox-font-size:var(--t-font-size-sm);
971
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
972
+ --tds-checkbox-description-line-height:1.3;
1043
973
  }
1044
974
 
1045
975
  .tds-select{
@@ -1474,405 +1404,475 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1474
1404
  }
1475
1405
  }
1476
1406
 
1477
- .tds-input{
1478
- --tds-input-border-color:var(--t-form-border-color);
1479
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1480
- --tds-input-background-color:var(--t-form-background-color);
1481
- --tds-input-color:var(--t-form-color);
1482
- --tds-input-font-size:var(--t-font-size-md);
1483
- --tds-input-description-color:var(--t-text-color-secondary);
1484
- --tds-input-description-invalid-icon-display:none;
1485
- --tds-input-min-height:var(--t-container-size-md);
1486
- --tds-input-padding-inline:var(--t-spacing-1);
1487
-
1488
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1407
+ .tds-radio-group{
1408
+ --tds-radio-group-font-size:var(--t-font-size-md);
1409
+ --tds-radio-group-line-height:1.4;
1410
+ --tds-radio-group-gap:var(--t-spacing-1);
1489
1411
 
1412
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1413
+
1414
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1415
+ --tds-radio-group-description-line-height:1.35;
1416
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1417
+ --tds-radio-group-description-invalid-icon-display:none;
1490
1418
  display:flex;
1491
1419
  flex-direction:column;
1492
- gap:var(--t-spacing-half);
1420
+ gap:var(--tds-radio-group-gap);
1421
+ padding:0;
1422
+ margin:0;
1423
+
1424
+ font-size:var(--tds-radio-group-font-size);
1425
+ line-height:var(--tds-radio-group-line-height);
1426
+ border:0;
1493
1427
  }
1494
1428
 
1495
- .tds-input label{
1496
- font-size:var(--t-font-size-md);
1497
- font-weight:var(--t-font-weight-normal);
1498
- color:var(--t-text-color);
1429
+ .tds-radio-group legend{
1430
+ padding:0;
1431
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1499
1432
  }
1500
1433
 
1501
- .tds-input :is(input,textarea){
1502
- inline-size:100%;
1503
- block-size:auto;
1504
- min-block-size:var(--tds-input-min-height);
1505
- padding-block:var(--tds-input-padding-block);
1506
- padding-inline:var(--tds-input-padding-inline);
1507
- font-family:inherit;
1508
- font-size:var(--tds-input-font-size);
1509
- color:var(--tds-input-color);
1510
- -webkit-appearance:none;
1511
- -moz-appearance:none;
1512
- appearance:none;
1513
- outline:var(--t-focus-ring-width) solid transparent;
1514
- outline-offset:0;
1515
- background-color:var(--tds-input-background-color);
1516
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
1517
- border-radius:var(--t-form-border-radius);
1518
- transition-timing-function:var(--t-ease-in-out);
1519
- transition-duration:var(--t-duration-200);
1520
- transition-property:var(--tds-input-transition-property);
1434
+ .tds-radio-group:has(.tds-radio-group-description){
1435
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1521
1436
  }
1522
1437
 
1523
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1524
- border-color:var(--tds-input-border-color-hover);
1525
- }
1526
-
1527
- :is(.tds-input :is(input,textarea)):focus{
1528
- outline-color:transparent;
1529
- }
1530
-
1531
- :is(.tds-input :is(input,textarea)):focus-visible{
1532
- outline-color:var(--t-focus-ring-color);
1533
- outline-offset:var(--t-focus-ring-offset);
1534
- border-color:var(--t-form-border-color-focus);
1535
- }
1536
-
1537
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
1538
- color:var(--t-form-placeholder-color);
1539
- -moz-user-select:none;
1540
- user-select:none;
1541
- }
1438
+ .tds-radio-group[aria-invalid="true"]{
1439
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1440
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1441
+ }
1542
1442
 
1543
- :is(.tds-input :is(input,textarea))::placeholder{
1544
- color:var(--t-form-placeholder-color);
1545
- -webkit-user-select:none;
1546
- -moz-user-select:none;
1547
- user-select:none;
1443
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1444
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1548
1445
  }
1549
1446
 
1550
- @media (prefers-reduced-motion: reduce){
1551
-
1552
- .tds-input :is(input,textarea){
1553
- --tds-input-transition-property:none;
1554
- }
1555
- }
1447
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1448
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1449
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1450
+ }
1556
1451
 
1557
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1558
- --tds-input-background-color:var(--t-form-background-color-error);
1559
- --tds-input-border-color:var(--t-form-border-color-error);
1560
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1561
- --tds-input-description-color:var(--t-text-color-status-error);
1562
- --tds-input-description-invalid-icon-display:inline-block;
1563
- }
1452
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1453
+ --tds-radio-input-background-color:var(--t-form-background-color);
1454
+ }
1564
1455
 
1565
- .tds-input:has(:is(input,textarea):required) label::after{
1456
+ .tds-radio-group:has(input:required) legend::after{
1566
1457
  margin-left:.25ch;
1567
1458
  color:var(--t-text-color-status-error);
1568
1459
  content:"*";
1569
1460
  }
1570
1461
 
1571
- .tds-input:where(:has(:is(input,textarea):disabled)){
1572
- --tds-input-border-color:var(--t-form-border-color-disabled);
1573
- --tds-input-background-color:var(--t-form-background-color-disabled);
1574
- --tds-input-color:var(--t-form-color-disabled);
1575
- }
1576
-
1577
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1578
- cursor:not-allowed;
1579
- }
1580
-
1581
- .tds-input:where(:has(:is(input,textarea)[readonly])){
1582
- --tds-input-border-color:var(--t-form-border-color-readonly);
1583
- --tds-input-background-color:var(--t-form-background-color-readonly);
1584
- }
1585
-
1586
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1587
- border-color:var(--tds-input-border-color-hover);
1588
- }
1589
-
1590
- .tds-input.tds-input--lg{
1591
- --tds-input-min-height:var(--t-container-size-lg);
1592
- --tds-input-font-size:var(--t-font-size-lg);
1593
- }
1462
+ .tds-radio-group-fields{
1463
+ display:flex;
1464
+ flex-direction:column;
1465
+ gap:var(--tds-radio-group-gap);
1466
+ align-items:flex-start;
1467
+ }
1594
1468
 
1595
- .tds-input-description{
1469
+ .tds-radio-group-description{
1596
1470
  display:flex;
1597
1471
  gap:var(--t-spacing-half);
1598
1472
  align-items:flex-start;
1599
1473
  margin:0;
1600
- font-size:var(--t-font-size-sm);
1601
- line-height:1.35;
1602
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
1474
+ font-size:var(--tds-radio-group-description-font-size);
1475
+ line-height:var(--tds-radio-group-description-line-height);
1476
+ color:var(--tds-radio-group-description-color);
1603
1477
  cursor:text;
1604
1478
  }
1605
1479
 
1606
- .tds-input-description .tds-input-description-invalid-icon{
1607
- display:var(--tds-input-description-invalid-icon-display, none);
1480
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1481
+ display:var(--tds-radio-group-description-invalid-icon-display);
1608
1482
  flex-shrink:0;
1609
- margin-block-start:calc(.5lh - .5em);
1610
- line-height:1.35;
1483
+ margin-top:calc(.5lh - .5em);
1484
+ line-height:var(--tds-radio-group-description-line-height);
1611
1485
  }
1612
1486
 
1613
- @layer t-critical{
1614
- tds-page-header:not(.hydrated){
1615
- display:none;
1616
- }
1487
+ .tds-radio-group--sm{
1488
+ --tds-radio-group-line-height:1.35;
1489
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1490
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1491
+ --tds-radio-group-description-line-height:1.3;
1617
1492
  }
1618
1493
 
1619
- @layer t-component{
1620
- .tds-page-header{
1621
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1622
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1623
- --tds-page-header-color:var(--t-text-color);
1624
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1625
- --tds-page-header-headline-color:var(--t-text-color-headline);
1626
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1627
- --tds-page-header-padding-x:var(--t-spacing-2);
1628
- --tds-page-header-padding-y:var(--t-spacing-2);
1629
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1630
- --tds-page-header-nav-gap:var(--t-spacing-1);
1631
- --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%);
1632
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1633
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1634
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1635
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1636
- --tds-page-header-nav-item-border-width:1px;
1494
+ .tds-toggle-switch{
1495
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1496
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1497
+ --tds-toggle-switch-cursor:pointer;
1498
+ --tds-toggle-switch-display:inline-grid;
1499
+ --tds-toggle-switch-line-height:1.4;
1637
1500
 
1638
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1639
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1501
+ --tds-toggle-switch-label-color:var(--t-form-color);
1640
1502
 
1641
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1642
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1643
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1503
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1504
+ --tds-toggle-switch-track-outline:none;
1505
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1506
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1507
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1644
1508
 
1645
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1646
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1509
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1510
+ --tds-toggle-switch-thumb-transform:translateX(0);
1511
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1647
1512
 
1648
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1649
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1650
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1513
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1514
+ --tds-toggle-switch-description-line-height:1.35;
1515
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1516
+ position:relative;
1651
1517
 
1652
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1653
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1654
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1655
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1656
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1657
- }
1518
+ display:var(--tds-toggle-switch-display);
1519
+ grid-template-columns:auto;
1520
+ grid-auto-columns:1fr;
1521
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1522
+ -webkit-user-select:none;
1523
+ -moz-user-select:none;
1524
+ user-select:none;
1525
+ }
1658
1526
 
1659
- .tds-page-header--profile{
1660
- --tds-page-header-padding-y:20px;
1527
+ .tds-toggle-switch input[type="checkbox"]{
1528
+ position:absolute;
1529
+ width:var(--tds-toggle-switch-track-width);
1530
+ height:var(--tds-toggle-switch-track-height);
1531
+ margin:0;
1532
+ -webkit-appearance:none;
1533
+ -moz-appearance:none;
1534
+ appearance:none;
1535
+ cursor:var(--tds-toggle-switch-cursor);
1536
+ outline:var(--tds-toggle-switch-track-outline);
1537
+ outline-offset:var(--t-focus-ring-offset);
1538
+ background-color:transparent;
1539
+ border:0;
1540
+ border-radius:var(--t-border-radius-round);
1661
1541
  }
1662
1542
 
1663
- @supports (color: light-dark(#fff, #000)){
1664
- .tds-page-header{
1665
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1666
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1543
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1544
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1667
1545
  }
1546
+
1547
+ .tds-toggle-switch label{
1548
+ display:inline-flex;
1549
+ grid-area:1 / 2;
1550
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1551
+ column-gap:var(--tds-toggle-switch-column-gap);
1552
+ margin-top:-.09375em;
1553
+ font-size:var(--tds-toggle-switch-font-size);
1554
+ font-weight:var(--t-font-weight-normal);
1555
+ line-height:var(--tds-toggle-switch-line-height);
1556
+ color:var(--tds-toggle-switch-label-color);
1557
+ cursor:var(--tds-toggle-switch-cursor);
1668
1558
  }
1669
1559
 
1670
- @media (min-width: 600px){
1671
- .tds-page-header{
1672
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1673
- --tds-page-header-color:var(--t-text-color-secondary);
1674
- --tds-page-header-bottom-border-color:var(--t-border-color);
1675
- --tds-page-header-padding-x:var(--t-spacing-3);
1676
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1677
- --tds-page-header-nav-gap:var(--t-spacing-half);
1678
- --tds-page-header-nav-background:transparent;
1679
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1680
- --tds-page-header-nav-item-border-width:1px;
1681
- --tds-page-header-nav-item-color:var(--t-text-color);
1682
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1683
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1684
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1685
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1686
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1560
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1561
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1562
+ }
1563
+
1564
+ .tds-toggle-switch:has(input:checked){
1565
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1566
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1567
+ }
1568
+
1569
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1570
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1687
1571
  }
1572
+
1573
+ .tds-toggle-switch:has(input:disabled){
1574
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1575
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1576
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1577
+ --tds-toggle-switch-cursor:not-allowed;
1688
1578
  }
1689
- }
1690
1579
 
1691
- .tds-page-header{
1692
- display:flex;
1693
- flex-direction:column;
1694
- padding-top:var(--tds-page-header-padding-y);
1695
- color:var(--tds-page-header-color);
1696
- background:var(--tds-page-header-background-color);
1697
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1580
+ .tds-toggle-switch-track{
1581
+ position:relative;
1582
+ flex-shrink:0;
1583
+ width:var(--tds-toggle-switch-track-width);
1584
+ height:var(--tds-toggle-switch-track-height);
1585
+ background-color:var(--tds-toggle-switch-track-background-color);
1586
+ border-radius:var(--t-border-radius-round);
1587
+ transition:var(--tds-toggle-switch-track-transition);
1698
1588
  }
1699
1589
 
1700
- .tds-page-header:not(.has-nav){
1701
- padding-bottom:var(--tds-page-header-padding-y);
1590
+ .tds-toggle-switch-track::before{
1591
+ position:absolute;
1592
+ top:var(--t-spacing-fourth);
1593
+ left:var(--t-spacing-fourth);
1594
+ width:var(--tds-toggle-switch-thumb-size);
1595
+ height:var(--tds-toggle-switch-thumb-size);
1596
+ content:"";
1597
+ background-color:#fff;
1598
+ border-radius:var(--t-border-radius-round);
1599
+ transform:var(--tds-toggle-switch-thumb-transform);
1600
+ transition:var(--tds-toggle-switch-thumb-transition);
1702
1601
  }
1703
1602
 
1704
- .tds-page-header.inactive{
1705
- background:var(--tds-page-header-background-color-inactive);
1706
- }
1603
+ @media (prefers-reduced-motion: reduce){
1707
1604
 
1708
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1709
- width:100%;
1605
+ .tds-toggle-switch-track{
1606
+ --tds-toggle-switch-track-transition:none;
1607
+ --tds-toggle-switch-thumb-transition:none;
1608
+ }
1710
1609
  }
1711
1610
 
1712
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1713
- display:flex;
1714
- flex-flow:row wrap;
1715
- gap:var(--t-spacing-half) var(--t-spacing-1);
1716
- align-items:flex-start;
1717
- justify-content:flex-start;
1718
- min-width:0;
1611
+ .tds-toggle-switch-description{
1612
+ display:flex;
1613
+ grid-area:2 / 2;
1614
+ align-items:flex-start;
1615
+ margin:0;
1616
+ font-size:var(--tds-toggle-switch-description-font-size);
1617
+ line-height:var(--tds-toggle-switch-description-line-height);
1618
+ color:var(--tds-toggle-switch-description-color);
1619
+ cursor:text;
1620
+ }
1621
+
1622
+ .tds-toggle-switch--sm{
1623
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1624
+ --tds-toggle-switch-line-height:1.35;
1625
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1626
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1627
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1628
+ --tds-toggle-switch-description-line-height:1.3;
1629
+ }
1630
+
1631
+ .tds-toggle-switch--hide-label{
1632
+ --tds-toggle-switch-display:inline-flex;
1633
+ }
1634
+
1635
+ .tds-input:has(textarea){
1636
+ --tds-input-padding-block:6px;
1637
+ --tds-input-resizer-size:var(--t-element-size-sm);
1638
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1639
+ }
1640
+
1641
+ @supports (x: attr(x type(*))){
1642
+
1643
+ .tds-input:has(textarea){
1644
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1645
+ }
1719
1646
  }
1720
1647
 
1721
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1722
- display:flex;
1723
- gap:var(--tds-page-header-nav-gap);
1724
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1725
- margin:0 0 -1px;
1726
- overflow:auto;
1727
- list-style:none;
1728
- background:var(--tds-page-header-nav-background);
1648
+ .tds-input.tds-textarea--resize-vertical textarea{
1649
+ resize:vertical;
1729
1650
  }
1730
1651
 
1731
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1732
- position:relative;
1733
- display:inline-flex;
1734
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1735
- font-size:var(--t-font-size-sm);
1736
- line-height:22px;
1737
- color:var(--tds-page-header-nav-item-color);
1738
- white-space:nowrap;
1739
- text-decoration:none;
1740
- -webkit-appearance:none;
1741
- -moz-appearance:none;
1742
- appearance:none;
1743
- cursor:pointer;
1744
- outline-offset:-2px;
1745
- background-color:var(--tds-page-header-nav-item-background-color);
1746
- background-clip:padding-box;
1747
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1748
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1749
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1652
+ .tds-input.tds-textarea--resize-none textarea{
1653
+ resize:none;
1654
+ }
1655
+
1656
+ .tds-input.tds-textarea--resize-auto textarea{
1657
+ resize:vertical;
1658
+ }
1659
+
1660
+ @supports (field-sizing: content){
1661
+ .tds-input.tds-textarea--resize-auto textarea{
1662
+ field-sizing:content;
1663
+ resize:none;
1664
+ }
1665
+ }
1666
+
1667
+ .tds-input textarea{
1668
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1669
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1670
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1671
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1672
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1673
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1674
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1675
+ --tds-input-scrollbar-thumb-border-radius:999px;
1676
+ --tds-input-scrollbar-thumb-border-width:3px;
1677
+ --tds-input-scrollbar-track-margin-block:.125rem;
1678
+ scrollbar-color:initial;
1679
+ transition-timing-function:var(--t-ease-in-out);
1680
+ transition-duration:var(--t-duration-200);
1681
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1682
+ }
1683
+
1684
+ @media (pointer: fine){
1685
+ :is(.tds-input textarea)::-webkit-scrollbar{
1686
+ width:12px;
1687
+ height:12px;
1688
+ cursor:default;
1689
+ }
1690
+
1691
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1692
+ cursor:default;
1693
+ background:var(--tds-input-scrollbar-thumb-color);
1694
+ background-clip:content-box;
1695
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1696
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1750
1697
  }
1751
1698
 
1752
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1753
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1754
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1755
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1756
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1757
- }
1699
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1700
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1701
+ }
1758
1702
 
1759
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1760
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1761
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1762
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1763
- }
1703
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1704
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1705
+ }
1764
1706
 
1765
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1766
- background-color:var(--tds-page-header-nav-item-background-color-active);
1767
- border-color:var(--tds-page-header-nav-item-border-color-active);
1768
- }
1707
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1708
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1709
+ }
1769
1710
 
1770
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1771
- color:var(--tds-page-header-nav-item-color-disabled);
1772
- cursor:not-allowed;
1773
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1774
- opacity:1;
1775
- }
1711
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1712
+ background:var(--tds-input-scrollbar-surface-color);
1713
+ }
1776
1714
 
1777
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1778
- position:relative;
1715
+ :is(.tds-input textarea)::-webkit-resizer{
1716
+ background:var(--tds-input-resizer-icon) no-repeat;
1717
+ background-position:right bottom;
1718
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1779
1719
  }
1780
1720
 
1781
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1782
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1783
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1784
- }
1721
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1722
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1723
+ cursor:default;
1724
+ }
1785
1725
 
1786
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1787
- position:absolute;
1788
- top:-5px;
1789
- right:-2px;
1790
- width:10px;
1791
- height:10px;
1792
- content:"";
1793
- background:var(--tds-page-header-nav-item-indicator-color);
1794
- border-radius:50%;
1726
+ @supports (-moz-appearance: none){
1727
+ :is(.tds-input textarea){
1728
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1729
+ scrollbar-width:thin;
1795
1730
  }
1796
1731
 
1797
- @media (prefers-reduced-motion: no-preference){
1798
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1799
- animation:indicator-pulse 1.25s ease infinite;
1732
+ @media (hover){
1733
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1734
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1800
1735
  }
1801
1736
  }
1737
+ }
1738
+ }
1802
1739
 
1803
- .tds-page-header__title-bar{
1804
- display:flex;
1805
- flex-direction:column;
1806
- gap:var(--t-spacing-2) var(--t-spacing-1);
1807
- align-items:flex-start;
1808
- justify-content:space-between;
1809
- padding:0 var(--tds-page-header-padding-x);
1810
- }
1740
+ .tds-input{
1741
+ --tds-input-border-color:var(--t-form-border-color);
1742
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1743
+ --tds-input-background-color:var(--t-form-background-color);
1744
+ --tds-input-color:var(--t-form-color);
1745
+ --tds-input-font-size:var(--t-font-size-md);
1746
+ --tds-input-description-color:var(--t-text-color-secondary);
1747
+ --tds-input-description-invalid-icon-display:none;
1748
+ --tds-input-min-height:var(--t-container-size-md);
1749
+ --tds-input-padding-inline:var(--t-spacing-1);
1811
1750
 
1812
- .tds-page-header--profile > .tds-page-header__title-bar{
1813
- align-items:center;
1814
- }
1751
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1815
1752
 
1816
- .tds-page-header__primary{
1817
- width:100%;
1753
+ display:flex;
1754
+ flex-direction:column;
1755
+ gap:var(--t-spacing-half);
1818
1756
  }
1819
1757
 
1820
- .tds-page-header__primary h1{
1821
- margin:0;
1822
- font-size:var(--tds-page-header-headline-font-size);
1758
+ .tds-input label{
1759
+ font-size:var(--t-font-size-md);
1823
1760
  font-weight:var(--t-font-weight-normal);
1824
- line-height:32px;
1825
- color:var(--tds-page-header-headline-color);
1826
- overflow-wrap:break-word;
1761
+ color:var(--t-text-color);
1827
1762
  }
1828
1763
 
1829
- @media (min-width: 960px){
1830
- .tds-page-header__primary{
1831
- flex:1 1 max-content;
1832
- width:auto;
1833
- min-width:0;
1834
- max-width:100%;
1764
+ .tds-input :is(input,textarea){
1765
+ inline-size:100%;
1766
+ block-size:auto;
1767
+ min-block-size:var(--tds-input-min-height);
1768
+ padding-block:var(--tds-input-padding-block);
1769
+ padding-inline:var(--tds-input-padding-inline);
1770
+ font-family:inherit;
1771
+ font-size:var(--tds-input-font-size);
1772
+ color:var(--tds-input-color);
1773
+ -webkit-appearance:none;
1774
+ -moz-appearance:none;
1775
+ appearance:none;
1776
+ outline:var(--t-focus-ring-width) solid transparent;
1777
+ outline-offset:0;
1778
+ background-color:var(--tds-input-background-color);
1779
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
1780
+ border-radius:var(--t-form-border-radius);
1781
+ transition-timing-function:var(--t-ease-in-out);
1782
+ transition-duration:var(--t-duration-200);
1783
+ transition-property:var(--tds-input-transition-property);
1835
1784
  }
1836
1785
 
1837
- .tds-page-header__title-bar,
1838
- .tds-page-header--profile .tds-page-header__title-bar{
1839
- flex-flow:row nowrap;
1840
- row-gap:12px;
1841
- align-items:flex-start;
1786
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1787
+ border-color:var(--tds-input-border-color-hover);
1788
+ }
1789
+
1790
+ :is(.tds-input :is(input,textarea)):focus{
1791
+ outline-color:transparent;
1792
+ }
1793
+
1794
+ :is(.tds-input :is(input,textarea)):focus-visible{
1795
+ outline-color:var(--t-focus-ring-color);
1796
+ outline-offset:var(--t-focus-ring-offset);
1797
+ border-color:var(--t-form-border-color-focus);
1798
+ }
1799
+
1800
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
1801
+ color:var(--t-form-placeholder-color);
1802
+ -moz-user-select:none;
1803
+ user-select:none;
1804
+ }
1805
+
1806
+ :is(.tds-input :is(input,textarea))::placeholder{
1807
+ color:var(--t-form-placeholder-color);
1808
+ -webkit-user-select:none;
1809
+ -moz-user-select:none;
1810
+ user-select:none;
1811
+ }
1812
+
1813
+ @media (prefers-reduced-motion: reduce){
1814
+
1815
+ .tds-input :is(input,textarea){
1816
+ --tds-input-transition-property:none;
1842
1817
  }
1843
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1844
- width:auto;
1845
1818
  }
1846
1819
 
1847
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1848
- justify-content:flex-end;
1820
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1821
+ --tds-input-background-color:var(--t-form-background-color-error);
1822
+ --tds-input-border-color:var(--t-form-border-color-error);
1823
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1824
+ --tds-input-description-color:var(--t-text-color-status-error);
1825
+ --tds-input-description-invalid-icon-display:inline-block;
1826
+ }
1827
+
1828
+ .tds-input:has(:is(input,textarea):required) label::after{
1829
+ margin-left:.25ch;
1830
+ color:var(--t-text-color-status-error);
1831
+ content:"*";
1849
1832
  }
1850
- }
1851
1833
 
1852
- .tds-page-header-phone,
1853
- .tds-page-header-email{
1854
- color:var(--tds-page-header-color);
1855
- white-space:nowrap;
1856
- }
1834
+ .tds-input:where(:has(:is(input,textarea):disabled)){
1835
+ --tds-input-border-color:var(--t-form-border-color-disabled);
1836
+ --tds-input-background-color:var(--t-form-background-color-disabled);
1837
+ --tds-input-color:var(--t-form-color-disabled);
1838
+ }
1857
1839
 
1858
- .tds-page-header-email{
1859
- max-width:100%;
1860
- overflow:hidden;
1861
- text-overflow:ellipsis;
1862
- }
1840
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1841
+ cursor:not-allowed;
1842
+ }
1863
1843
 
1864
- @keyframes indicator-pulse{
1865
- 0%{
1866
- opacity:.3;
1867
- transform:scale(.9);
1844
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
1845
+ --tds-input-border-color:var(--t-form-border-color-readonly);
1846
+ --tds-input-background-color:var(--t-form-background-color-readonly);
1868
1847
  }
1869
1848
 
1870
- 100%{
1871
- opacity:0;
1872
- transform:scale(1.75);
1849
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1850
+ border-color:var(--tds-input-border-color-hover);
1851
+ }
1852
+
1853
+ .tds-input.tds-input--lg{
1854
+ --tds-input-min-height:var(--t-container-size-lg);
1855
+ --tds-input-font-size:var(--t-font-size-lg);
1873
1856
  }
1857
+
1858
+ .tds-input-description{
1859
+ display:flex;
1860
+ gap:var(--t-spacing-half);
1861
+ align-items:flex-start;
1862
+ margin:0;
1863
+ font-size:var(--t-font-size-sm);
1864
+ line-height:1.35;
1865
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
1866
+ cursor:text;
1874
1867
  }
1875
1868
 
1869
+ .tds-input-description .tds-input-description-invalid-icon{
1870
+ display:var(--tds-input-description-invalid-icon-display, none);
1871
+ flex-shrink:0;
1872
+ margin-block-start:calc(.5lh - .5em);
1873
+ line-height:1.35;
1874
+ }
1875
+
1876
1876
  .tds-loading-spinner{
1877
1877
  --tds-loading-spinner-size:1.25em;
1878
1878
 
@@ -3309,12 +3309,9 @@ a[class="tds-btn"]{
3309
3309
  --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3310
3310
  --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3311
3311
  --tds-date-picker-color:var(--t-form-color-disabled);
3312
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3312
3313
  }
3313
3314
 
3314
- .tds-date-picker[data-disabled] .tds-date-picker-label{
3315
- color:var(--t-form-color-disabled);
3316
- }
3317
-
3318
3315
  .tds-date-picker[data-disabled] .tds-date-picker-field{
3319
3316
  cursor:not-allowed;
3320
3317
  }
@@ -3343,7 +3340,7 @@ a[class="tds-btn"]{
3343
3340
  -webkit-appearance:none;
3344
3341
  -moz-appearance:none;
3345
3342
  appearance:none;
3346
- cursor:default;
3343
+ cursor:text;
3347
3344
  outline:var(--t-focus-ring-width) solid transparent;
3348
3345
  outline-offset:0;
3349
3346
  background-color:var(--tds-date-picker-background-color);
@@ -3361,24 +3358,31 @@ a[class="tds-btn"]{
3361
3358
  border-color:var(--tds-date-picker-border-color-active);
3362
3359
  }
3363
3360
 
3361
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3362
+ color:var(--t-form-color-readonly);
3363
+ background-color:var(--t-form-background-color-readonly);
3364
+ border-color:var(--t-form-border-color-readonly);
3365
+ }
3366
+
3367
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3368
+ border-color:var(--t-form-border-color-readonly);
3369
+ }
3370
+
3371
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3372
+ outline-color:var(--t-focus-ring-color);
3373
+ outline-offset:var(--t-focus-ring-offset);
3374
+ border-color:var(--t-form-border-color-hover);
3375
+ }
3376
+
3364
3377
  .tds-date-picker-input{
3365
- display:flex;
3366
3378
  flex:1;
3367
- align-items:center;
3368
3379
  padding-block:var(--tds-date-picker-padding-block);
3369
3380
  padding-inline-start:var(--t-spacing-1);
3370
- font-family:inherit;
3371
- font-size:inherit;
3372
3381
  font-variant-numeric:tabular-nums;
3373
- color:inherit;
3374
- outline:0;
3375
- background:transparent;
3376
- border:0;
3377
3382
  }
3378
3383
 
3379
3384
  .tds-date-picker-segment{
3380
- padding-inline:1px;
3381
- font-variant-numeric:tabular-nums;
3385
+ padding-inline:2px;
3382
3386
  caret-color:transparent;
3383
3387
  border-radius:var(--t-border-radius-sm);
3384
3388
  }