@planningcenter/tapestry 3.2.3-rc.17 → 3.2.3-rc.19

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 +1287 -1285
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1287 -1285
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/unstable.css +14 -12
  6. package/dist/unstable.css.map +1 -1
  7. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,197 +1,3 @@
1
- .tds-checkbox{
2
- --tds-checkbox-font-size:var(--t-font-size-md);
3
- --tds-checkbox-cursor:pointer;
4
- --tds-checkbox-line-height:1.4;
5
- --tds-checkbox-transition-property:background-color, border-color;
6
-
7
- --tds-checkbox-input-size:var(--t-element-size-md);
8
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
- --tds-checkbox-input-border-color:var(--t-form-border-color);
10
- --tds-checkbox-input-background-color:transparent;
11
-
12
- --tds-checkbox-input-icon:none;
13
- --tds-checkbox-input-icon-visibility:hidden;
14
- --tds-checkbox-input-icon-opacity:0;
15
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
16
-
17
- --tds-checkbox-label-color:var(--t-form-color);
18
-
19
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
- --tds-checkbox-description-line-height:1.35;
21
- --tds-checkbox-description-color:var(--t-text-color-secondary);
22
- --tds-checkbox-description-invalid-icon-display:none;
23
-
24
- position:relative;
25
- display:inline-grid;
26
- grid-template-columns:auto;
27
- grid-auto-columns:1fr;
28
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
- line-height:var(--tds-checkbox-line-height);
30
- cursor:var(--tds-checkbox-cursor);
31
- -webkit-user-select:none;
32
- -moz-user-select:none;
33
- user-select:none;
34
- }
35
-
36
- .tds-checkbox label{
37
- grid-area:1 / 2;
38
- font-size:var(--tds-checkbox-font-size);
39
- font-weight:var(--t-font-weight-normal);
40
- color:var(--tds-checkbox-label-color);
41
- cursor:var(--tds-checkbox-cursor);
42
- }
43
-
44
- .tds-checkbox tds-indeterminate{
45
- display:flex;
46
- }
47
-
48
- .tds-checkbox input[type="checkbox"]{
49
- position:relative;
50
- width:1em;
51
- height:1em;
52
- margin:calc((1lh - 1em) / 2) 0 0;
53
- font-size:var(--tds-checkbox-font-size);
54
- line-height:inherit;
55
- -webkit-appearance:none;
56
- -moz-appearance:none;
57
- appearance:none;
58
- cursor:var(--tds-checkbox-cursor);
59
- background-color:var(--tds-checkbox-input-background-color);
60
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
- border-radius:var(--tds-checkbox-input-border-radius);
62
- transition-timing-function:var(--t-ease-in-out);
63
- transition-duration:var(--t-duration-200);
64
- transition-property:var(--tds-checkbox-transition-property);
65
- }
66
-
67
- :is(.tds-checkbox input[type="checkbox"])::before{
68
- position:absolute;
69
- top:50%;
70
- left:50%;
71
- visibility:var(--tds-checkbox-input-icon-visibility);
72
- width:100%;
73
- height:100%;
74
- content:"";
75
- background-color:var(--tds-checkbox-input-icon-fill);
76
- border-radius:var(--tds-checkbox-input-border-radius);
77
- opacity:var(--tds-checkbox-input-icon-opacity);
78
- -webkit-mask-image:var(--tds-checkbox-input-icon);
79
- mask-image:var(--tds-checkbox-input-icon);
80
- -webkit-mask-repeat:no-repeat;
81
- mask-repeat:no-repeat;
82
- -webkit-mask-size:contain;
83
- mask-size:contain;
84
- transform:translate(-50%, -50%);
85
- }
86
-
87
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
- }
91
-
92
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
- outline:var(--t-focus-ring-outline);
94
- outline-offset:var(--t-focus-ring-offset);
95
- }
96
-
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
99
- }
100
-
101
- @media (prefers-reduced-motion: reduce){
102
-
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
- }
106
- }
107
-
108
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
- --tds-checkbox-input-icon-visibility:visible;
112
- --tds-checkbox-input-icon-opacity:1;
113
- }
114
-
115
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
- }
119
-
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
- }
123
-
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
126
- }
127
-
128
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
- --tds-checkbox-description-color:var(--t-text-color-status-error);
131
- --tds-checkbox-description-invalid-icon-display:inline-block;
132
- }
133
-
134
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
137
- }
138
-
139
- :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{
140
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
142
- }
143
-
144
- :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){
145
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
147
- }
148
-
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
153
- }
154
-
155
- .tds-checkbox:has(input:disabled){
156
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
158
-
159
- --tds-checkbox-label-color:var(--t-form-color-disabled);
160
- --tds-checkbox-description-color:var(--t-form-color-disabled);
161
- --tds-checkbox-cursor:not-allowed;
162
- }
163
-
164
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
166
- }
167
-
168
- .tds-checkbox-description{
169
- display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
172
- align-items:flex-start;
173
- margin:0;
174
- font-size:var(--tds-checkbox-description-font-size);
175
- line-height:var(--tds-checkbox-description-line-height);
176
- color:var(--tds-checkbox-description-color);
177
- cursor:text;
178
- }
179
-
180
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
- display:var(--tds-checkbox-description-invalid-icon-display);
182
- flex-shrink:0;
183
- margin-top:calc(.5lh - .5em);
184
- line-height:var(--tds-checkbox-description-line-height);
185
- }
186
-
187
- .tds-checkbox--sm{
188
- --tds-checkbox-line-height:1.35;
189
- --tds-checkbox-input-size:var(--t-element-size-sm);
190
- --tds-checkbox-font-size:var(--t-font-size-sm);
191
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
- --tds-checkbox-description-line-height:1.3;
193
- }
194
-
195
1
  @layer t-critical{
196
2
  tds-page-header:not(.hydrated){
197
3
  display:none;
@@ -471,30 +277,6 @@
471
277
  }
472
278
 
473
279
 
474
- :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{
475
- -webkit-appearance:none;
476
- appearance:none;
477
- }
478
-
479
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
480
- inline-size:1em;
481
- block-size:2em;
482
- }
483
-
484
- @supports (field-sizing: content){
485
- .tds-input--auto-width{
486
- inline-size:-moz-fit-content;
487
- inline-size:fit-content;
488
- min-inline-size:min(100%, 122px);
489
- }
490
-
491
- .tds-input--auto-width input{
492
- field-sizing:content;
493
- inline-size:auto;
494
- }
495
- }
496
-
497
-
498
280
  @media (prefers-reduced-motion: no-preference){
499
281
 
500
282
  :root{
@@ -856,37 +638,231 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
856
638
  flex-direction:column;
857
639
  }
858
640
 
859
- .tds-radio{
860
- --tds-radio-font-size:var(--t-font-size-md);
861
- --tds-radio-cursor:pointer;
862
- --tds-radio-line-height:1.4;
863
- --tds-radio-transition-property:border-width;
641
+ .tds-checkbox{
642
+ --tds-checkbox-font-size:var(--t-font-size-md);
643
+ --tds-checkbox-cursor:pointer;
644
+ --tds-checkbox-line-height:1.4;
645
+ --tds-checkbox-transition-property:background-color, border-color;
864
646
 
865
- --tds-radio-input-size:var(--t-element-size-md);
866
- --tds-radio-input-border-radius:var(--t-border-radius-round);
867
- --tds-radio-input-border-color:var(--t-form-border-color);
868
- --tds-radio-input-border-width:var(--t-form-border-width);
869
- --tds-radio-input-background-color:transparent;
647
+ --tds-checkbox-input-size:var(--t-element-size-md);
648
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
649
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
650
+ --tds-checkbox-input-background-color:transparent;
870
651
 
871
- --tds-radio-label-color:var(--t-form-color);
652
+ --tds-checkbox-input-icon:none;
653
+ --tds-checkbox-input-icon-visibility:hidden;
654
+ --tds-checkbox-input-icon-opacity:0;
655
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
872
656
 
873
- --tds-radio-description-font-size:var(--t-font-size-sm);
874
- --tds-radio-description-line-height:1.35;
875
- --tds-radio-description-color:var(--t-text-color-secondary);
657
+ --tds-checkbox-label-color:var(--t-form-color);
658
+
659
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
660
+ --tds-checkbox-description-line-height:1.35;
661
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
662
+ --tds-checkbox-description-invalid-icon-display:none;
876
663
 
877
664
  position:relative;
878
665
  display:inline-grid;
879
666
  grid-template-columns:auto;
880
667
  grid-auto-columns:1fr;
881
668
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
882
- line-height:var(--tds-radio-line-height);
883
- cursor:var(--tds-radio-cursor);
669
+ line-height:var(--tds-checkbox-line-height);
670
+ cursor:var(--tds-checkbox-cursor);
884
671
  -webkit-user-select:none;
885
672
  -moz-user-select:none;
886
673
  user-select:none;
887
674
  }
888
675
 
889
- .tds-radio label{
676
+ .tds-checkbox label{
677
+ grid-area:1 / 2;
678
+ font-size:var(--tds-checkbox-font-size);
679
+ font-weight:var(--t-font-weight-normal);
680
+ color:var(--tds-checkbox-label-color);
681
+ cursor:var(--tds-checkbox-cursor);
682
+ }
683
+
684
+ .tds-checkbox tds-indeterminate{
685
+ display:flex;
686
+ }
687
+
688
+ .tds-checkbox input[type="checkbox"]{
689
+ position:relative;
690
+ width:1em;
691
+ height:1em;
692
+ margin:calc((1lh - 1em) / 2) 0 0;
693
+ font-size:var(--tds-checkbox-font-size);
694
+ line-height:inherit;
695
+ -webkit-appearance:none;
696
+ -moz-appearance:none;
697
+ appearance:none;
698
+ cursor:var(--tds-checkbox-cursor);
699
+ background-color:var(--tds-checkbox-input-background-color);
700
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
701
+ border-radius:var(--tds-checkbox-input-border-radius);
702
+ transition-timing-function:var(--t-ease-in-out);
703
+ transition-duration:var(--t-duration-200);
704
+ transition-property:var(--tds-checkbox-transition-property);
705
+ }
706
+
707
+ :is(.tds-checkbox input[type="checkbox"])::before{
708
+ position:absolute;
709
+ top:50%;
710
+ left:50%;
711
+ visibility:var(--tds-checkbox-input-icon-visibility);
712
+ width:100%;
713
+ height:100%;
714
+ content:"";
715
+ background-color:var(--tds-checkbox-input-icon-fill);
716
+ border-radius:var(--tds-checkbox-input-border-radius);
717
+ opacity:var(--tds-checkbox-input-icon-opacity);
718
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
719
+ mask-image:var(--tds-checkbox-input-icon);
720
+ -webkit-mask-repeat:no-repeat;
721
+ mask-repeat:no-repeat;
722
+ -webkit-mask-size:contain;
723
+ mask-size:contain;
724
+ transform:translate(-50%, -50%);
725
+ }
726
+
727
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
728
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
729
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
730
+ }
731
+
732
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
733
+ outline:var(--t-focus-ring-outline);
734
+ outline-offset:var(--t-focus-ring-offset);
735
+ }
736
+
737
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
738
+ pointer-events:none;
739
+ }
740
+
741
+ @media (prefers-reduced-motion: reduce){
742
+
743
+ .tds-checkbox input[type="checkbox"]{
744
+ --tds-checkbox-transition-property:none;
745
+ }
746
+ }
747
+
748
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
749
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
750
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
751
+ --tds-checkbox-input-icon-visibility:visible;
752
+ --tds-checkbox-input-icon-opacity:1;
753
+ }
754
+
755
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
756
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
757
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
758
+ }
759
+
760
+ .tds-checkbox:has(input:checked){
761
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
762
+ }
763
+
764
+ .tds-checkbox:has(input:indeterminate){
765
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
766
+ }
767
+
768
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
769
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
770
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
771
+ --tds-checkbox-description-invalid-icon-display:inline-block;
772
+ }
773
+
774
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
775
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
776
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
777
+ }
778
+
779
+ :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{
780
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
781
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
782
+ }
783
+
784
+ :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){
785
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
786
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
787
+ }
788
+
789
+ .tds-checkbox:has(input:required) label::after{
790
+ margin-left:.25ch;
791
+ color:var(--t-text-color-status-error);
792
+ content:"*";
793
+ }
794
+
795
+ .tds-checkbox:has(input:disabled){
796
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
797
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
798
+
799
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
800
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
801
+ --tds-checkbox-cursor:not-allowed;
802
+ }
803
+
804
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
805
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
806
+ }
807
+
808
+ .tds-checkbox-description{
809
+ display:flex;
810
+ grid-area:2 / 2;
811
+ gap:var(--t-spacing-half);
812
+ align-items:flex-start;
813
+ margin:0;
814
+ font-size:var(--tds-checkbox-description-font-size);
815
+ line-height:var(--tds-checkbox-description-line-height);
816
+ color:var(--tds-checkbox-description-color);
817
+ cursor:text;
818
+ }
819
+
820
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
821
+ display:var(--tds-checkbox-description-invalid-icon-display);
822
+ flex-shrink:0;
823
+ margin-top:calc(.5lh - .5em);
824
+ line-height:var(--tds-checkbox-description-line-height);
825
+ }
826
+
827
+ .tds-checkbox--sm{
828
+ --tds-checkbox-line-height:1.35;
829
+ --tds-checkbox-input-size:var(--t-element-size-sm);
830
+ --tds-checkbox-font-size:var(--t-font-size-sm);
831
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
832
+ --tds-checkbox-description-line-height:1.3;
833
+ }
834
+
835
+ .tds-radio{
836
+ --tds-radio-font-size:var(--t-font-size-md);
837
+ --tds-radio-cursor:pointer;
838
+ --tds-radio-line-height:1.4;
839
+ --tds-radio-transition-property:border-width;
840
+
841
+ --tds-radio-input-size:var(--t-element-size-md);
842
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
843
+ --tds-radio-input-border-color:var(--t-form-border-color);
844
+ --tds-radio-input-border-width:var(--t-form-border-width);
845
+ --tds-radio-input-background-color:transparent;
846
+
847
+ --tds-radio-label-color:var(--t-form-color);
848
+
849
+ --tds-radio-description-font-size:var(--t-font-size-sm);
850
+ --tds-radio-description-line-height:1.35;
851
+ --tds-radio-description-color:var(--t-text-color-secondary);
852
+
853
+ position:relative;
854
+ display:inline-grid;
855
+ grid-template-columns:auto;
856
+ grid-auto-columns:1fr;
857
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
858
+ line-height:var(--tds-radio-line-height);
859
+ cursor:var(--tds-radio-cursor);
860
+ -webkit-user-select:none;
861
+ -moz-user-select:none;
862
+ user-select:none;
863
+ }
864
+
865
+ .tds-radio label{
890
866
  grid-area:1 / 2;
891
867
  font-size:var(--tds-radio-font-size);
892
868
  font-weight:var(--t-font-weight-normal);
@@ -1093,61 +1069,313 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1093
1069
  }
1094
1070
  }
1095
1071
 
1096
- .tds-select{
1097
- --tds-select-border-color:var(--t-form-border-color);
1098
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1099
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1100
- --tds-select-background-color:var(--t-form-background-color);
1101
- --tds-select-color:var(--t-form-color);
1102
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1103
- --tds-select-font-size:var(--t-font-size-md);
1104
- --tds-select-min-height:var(--t-container-size-md);
1105
- --tds-select-padding-block:6px;
1106
- --tds-select-description-color:var(--t-text-color-secondary);
1107
- --tds-select-description-invalid-icon-display:none;
1108
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1109
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1110
- --tds-select-caret-size:1em;
1111
- --tds-select-caret-inline-offset:.75em;
1112
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1072
+ .tds-toggle-switch{
1073
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1074
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1075
+ --tds-toggle-switch-cursor:pointer;
1076
+ --tds-toggle-switch-display:inline-grid;
1077
+ --tds-toggle-switch-line-height:1.4;
1113
1078
 
1114
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
1115
- --tds-select-dropdown-border:1px solid var(--t-border-color);
1116
- --tds-select-dropdown-padding:var(--t-spacing-1);
1117
- --tds-select-dropdown-margin-block:5px;
1118
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
1119
- --tds-select-dropdown-scrollbar-width:thin;
1120
- --tds-select-dropdown-border-radius:var(--t-border-radius);
1121
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1122
- --tds-select-dropdown-scroll-behavior:smooth;
1123
- --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1124
- --tds-select-dropdown-closed-opacity:0;
1125
- --tds-select-dropdown-open-opacity:1;
1126
- --tds-select-dropdown-closed-translate:0 -8px;
1127
- --tds-select-dropdown-open-translate:0 0;
1079
+ --tds-toggle-switch-label-color:var(--t-form-color);
1128
1080
 
1129
- --tds-select-option-gap:var(--t-spacing-1);
1130
- --tds-select-option-padding-block:var(--t-spacing-1);
1131
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1132
- --tds-select-option-font-size:1rem;
1133
- --tds-select-option-color:var(--t-text-color);
1134
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1135
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1136
- --tds-select-option-border-radius:var(--t-border-radius);
1081
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1082
+ --tds-toggle-switch-track-outline:none;
1083
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1084
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1085
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1137
1086
 
1138
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1139
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1140
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
1141
- --tds-select-group-label-font-size:var(--t-font-size-sm);
1142
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1143
- --tds-select-group-label-letter-spacing:0;
1144
- --tds-select-group-label-color:var(--t-text-color-secondary);
1145
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1146
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1147
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1087
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1088
+ --tds-toggle-switch-thumb-transform:translateX(0);
1089
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1148
1090
 
1149
- position:relative;
1150
- display:flex;
1091
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1092
+ --tds-toggle-switch-description-line-height:1.35;
1093
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1094
+ position:relative;
1095
+
1096
+ display:var(--tds-toggle-switch-display);
1097
+ grid-template-columns:auto;
1098
+ grid-auto-columns:1fr;
1099
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1100
+ -webkit-user-select:none;
1101
+ -moz-user-select:none;
1102
+ user-select:none;
1103
+ }
1104
+
1105
+ .tds-toggle-switch input[type="checkbox"]{
1106
+ position:absolute;
1107
+ width:var(--tds-toggle-switch-track-width);
1108
+ height:var(--tds-toggle-switch-track-height);
1109
+ margin:0;
1110
+ -webkit-appearance:none;
1111
+ -moz-appearance:none;
1112
+ appearance:none;
1113
+ cursor:var(--tds-toggle-switch-cursor);
1114
+ outline:var(--tds-toggle-switch-track-outline);
1115
+ outline-offset:var(--t-focus-ring-offset);
1116
+ background-color:transparent;
1117
+ border:0;
1118
+ border-radius:var(--t-border-radius-round);
1119
+ }
1120
+
1121
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1122
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1123
+ }
1124
+
1125
+ .tds-toggle-switch label{
1126
+ display:inline-flex;
1127
+ grid-area:1 / 2;
1128
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1129
+ column-gap:var(--tds-toggle-switch-column-gap);
1130
+ margin-top:-.09375em;
1131
+ font-size:var(--tds-toggle-switch-font-size);
1132
+ font-weight:var(--t-font-weight-normal);
1133
+ line-height:var(--tds-toggle-switch-line-height);
1134
+ color:var(--tds-toggle-switch-label-color);
1135
+ cursor:var(--tds-toggle-switch-cursor);
1136
+ }
1137
+
1138
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1139
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1140
+ }
1141
+
1142
+ .tds-toggle-switch:has(input:checked){
1143
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1144
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1145
+ }
1146
+
1147
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1148
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1149
+ }
1150
+
1151
+ .tds-toggle-switch:has(input:disabled){
1152
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1153
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1154
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1155
+ --tds-toggle-switch-cursor:not-allowed;
1156
+ }
1157
+
1158
+ .tds-toggle-switch-track{
1159
+ position:relative;
1160
+ flex-shrink:0;
1161
+ width:var(--tds-toggle-switch-track-width);
1162
+ height:var(--tds-toggle-switch-track-height);
1163
+ background-color:var(--tds-toggle-switch-track-background-color);
1164
+ border-radius:var(--t-border-radius-round);
1165
+ transition:var(--tds-toggle-switch-track-transition);
1166
+ }
1167
+
1168
+ .tds-toggle-switch-track::before{
1169
+ position:absolute;
1170
+ top:var(--t-spacing-fourth);
1171
+ left:var(--t-spacing-fourth);
1172
+ width:var(--tds-toggle-switch-thumb-size);
1173
+ height:var(--tds-toggle-switch-thumb-size);
1174
+ content:"";
1175
+ background-color:#fff;
1176
+ border-radius:var(--t-border-radius-round);
1177
+ transform:var(--tds-toggle-switch-thumb-transform);
1178
+ transition:var(--tds-toggle-switch-thumb-transition);
1179
+ }
1180
+
1181
+ @media (prefers-reduced-motion: reduce){
1182
+
1183
+ .tds-toggle-switch-track{
1184
+ --tds-toggle-switch-track-transition:none;
1185
+ --tds-toggle-switch-thumb-transition:none;
1186
+ }
1187
+ }
1188
+
1189
+ .tds-toggle-switch-description{
1190
+ display:flex;
1191
+ grid-area:2 / 2;
1192
+ align-items:flex-start;
1193
+ margin:0;
1194
+ font-size:var(--tds-toggle-switch-description-font-size);
1195
+ line-height:var(--tds-toggle-switch-description-line-height);
1196
+ color:var(--tds-toggle-switch-description-color);
1197
+ cursor:text;
1198
+ }
1199
+
1200
+ .tds-toggle-switch--sm{
1201
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1202
+ --tds-toggle-switch-line-height:1.35;
1203
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1204
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1205
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1206
+ --tds-toggle-switch-description-line-height:1.3;
1207
+ }
1208
+
1209
+ .tds-toggle-switch--hide-label{
1210
+ --tds-toggle-switch-display:inline-flex;
1211
+ }
1212
+
1213
+ .tds-radio-group{
1214
+ --tds-radio-group-font-size:var(--t-font-size-md);
1215
+ --tds-radio-group-line-height:1.4;
1216
+ --tds-radio-group-gap:var(--t-spacing-1);
1217
+
1218
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1219
+
1220
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1221
+ --tds-radio-group-description-line-height:1.35;
1222
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1223
+ --tds-radio-group-description-invalid-icon-display:none;
1224
+ display:flex;
1225
+ flex-direction:column;
1226
+ gap:var(--tds-radio-group-gap);
1227
+ padding:0;
1228
+ margin:0;
1229
+
1230
+ font-size:var(--tds-radio-group-font-size);
1231
+ line-height:var(--tds-radio-group-line-height);
1232
+ border:0;
1233
+ }
1234
+
1235
+ .tds-radio-group legend{
1236
+ padding:0;
1237
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1238
+ }
1239
+
1240
+ .tds-radio-group:has(.tds-radio-group-description){
1241
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1242
+ }
1243
+
1244
+ .tds-radio-group[aria-invalid="true"]{
1245
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1246
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1247
+ }
1248
+
1249
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1250
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1251
+ }
1252
+
1253
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1254
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1255
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1256
+ }
1257
+
1258
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1259
+ --tds-radio-input-background-color:var(--t-form-background-color);
1260
+ }
1261
+
1262
+ .tds-radio-group:has(input:required) legend::after{
1263
+ margin-left:.25ch;
1264
+ color:var(--t-text-color-status-error);
1265
+ content:"*";
1266
+ }
1267
+
1268
+ .tds-radio-group-fields{
1269
+ display:flex;
1270
+ flex-direction:column;
1271
+ gap:var(--tds-radio-group-gap);
1272
+ align-items:flex-start;
1273
+ }
1274
+
1275
+ .tds-radio-group-description{
1276
+ display:flex;
1277
+ gap:var(--t-spacing-half);
1278
+ align-items:flex-start;
1279
+ margin:0;
1280
+ font-size:var(--tds-radio-group-description-font-size);
1281
+ line-height:var(--tds-radio-group-description-line-height);
1282
+ color:var(--tds-radio-group-description-color);
1283
+ cursor:text;
1284
+ }
1285
+
1286
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1287
+ display:var(--tds-radio-group-description-invalid-icon-display);
1288
+ flex-shrink:0;
1289
+ margin-top:calc(.5lh - .5em);
1290
+ line-height:var(--tds-radio-group-description-line-height);
1291
+ }
1292
+
1293
+ .tds-radio-group--sm{
1294
+ --tds-radio-group-line-height:1.35;
1295
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1296
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1297
+ --tds-radio-group-description-line-height:1.3;
1298
+ }
1299
+
1300
+
1301
+ :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{
1302
+ -webkit-appearance:none;
1303
+ appearance:none;
1304
+ }
1305
+
1306
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1307
+ inline-size:1em;
1308
+ block-size:2em;
1309
+ }
1310
+
1311
+ @supports (field-sizing: content){
1312
+ .tds-input--auto-width{
1313
+ inline-size:-moz-fit-content;
1314
+ inline-size:fit-content;
1315
+ min-inline-size:min(100%, 122px);
1316
+ }
1317
+
1318
+ .tds-input--auto-width input{
1319
+ field-sizing:content;
1320
+ inline-size:auto;
1321
+ }
1322
+ }
1323
+
1324
+ .tds-select{
1325
+ --tds-select-border-color:var(--t-form-border-color);
1326
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1327
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1328
+ --tds-select-background-color:var(--t-form-background-color);
1329
+ --tds-select-color:var(--t-form-color);
1330
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1331
+ --tds-select-font-size:var(--t-font-size-md);
1332
+ --tds-select-min-height:var(--t-container-size-md);
1333
+ --tds-select-padding-block:6px;
1334
+ --tds-select-description-color:var(--t-text-color-secondary);
1335
+ --tds-select-description-invalid-icon-display:none;
1336
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1337
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1338
+ --tds-select-caret-size:1em;
1339
+ --tds-select-caret-inline-offset:.75em;
1340
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1341
+
1342
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1343
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1344
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1345
+ --tds-select-dropdown-margin-block:5px;
1346
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1347
+ --tds-select-dropdown-scrollbar-width:thin;
1348
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1349
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1350
+ --tds-select-dropdown-scroll-behavior:smooth;
1351
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1352
+ --tds-select-dropdown-closed-opacity:0;
1353
+ --tds-select-dropdown-open-opacity:1;
1354
+ --tds-select-dropdown-closed-translate:0 -8px;
1355
+ --tds-select-dropdown-open-translate:0 0;
1356
+
1357
+ --tds-select-option-gap:var(--t-spacing-1);
1358
+ --tds-select-option-padding-block:var(--t-spacing-1);
1359
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1360
+ --tds-select-option-font-size:1rem;
1361
+ --tds-select-option-color:var(--t-text-color);
1362
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1363
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1364
+ --tds-select-option-border-radius:var(--t-border-radius);
1365
+
1366
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1367
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1368
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1369
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1370
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1371
+ --tds-select-group-label-letter-spacing:0;
1372
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1373
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1374
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1375
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1376
+
1377
+ position:relative;
1378
+ display:flex;
1151
1379
  flex-direction:column;
1152
1380
  gap:var(--t-spacing-half);
1153
1381
  }
@@ -1248,509 +1476,281 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1248
1476
  overflow:hidden;
1249
1477
  text-overflow:ellipsis;
1250
1478
  font-size:var(--tds-select-option-font-size);
1251
- color:var(--tds-select-option-color);
1252
- white-space:nowrap;
1253
- cursor:default;
1254
- border-radius:var(--tds-select-option-border-radius);
1255
- }
1256
-
1257
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1258
- outline:none;
1259
- }
1260
-
1261
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1262
- background:var(--tds-select-option-background-hover);
1263
- }
1264
-
1265
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1266
- background:var(--tds-select-option-background-active);
1267
- }
1268
-
1269
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1270
- color:var(--t-form-color-disabled);
1271
- cursor:not-allowed;
1272
- }
1273
-
1274
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1275
- background:transparent;
1276
- }
1277
-
1278
- .tds-select :is(li[role="presentation"],legend){
1279
- position:sticky;
1280
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1281
- z-index:1;
1282
- float:inline-start;
1283
- inline-size:100%;
1284
- padding-block:var(--tds-select-group-label-padding-block);
1285
- padding-inline:var(--tds-select-group-label-padding-inline);
1286
- container-type:scroll-state;
1287
- font-size:var(--tds-select-group-label-font-size);
1288
- font-weight:var(--tds-select-group-label-font-weight);
1289
- letter-spacing:var(--tds-select-group-label-letter-spacing);
1290
- background:var(--tds-select-group-label-background);
1291
- text-box:trim-both cap alphabetic;
1292
- }
1293
-
1294
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1295
- display:inline-flex;
1296
- gap:var(--t-spacing-half);
1297
- align-items:center;
1298
- color:var(--tds-select-group-label-color);
1299
- transition:var(--tds-select-group-label-transition);
1300
- }
1301
-
1302
- @container scroll-state(stuck){
1303
-
1304
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1305
- color:var(--tds-select-group-label-color-stuck);
1306
- }
1307
-
1308
- @media (forced-colors: active){
1309
-
1310
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1311
- color:var(--tds-select-group-label-color-stuck);
1312
- }
1313
- }
1314
- }
1315
-
1316
- .tds-select.tds-select--lg{
1317
- --tds-select-min-height:var(--t-container-size-lg);
1318
- --tds-select-font-size:var(--t-font-size-lg);
1319
- }
1320
-
1321
- @media (prefers-reduced-motion: reduce){
1322
-
1323
- .tds-select{
1324
- --tds-select-transition-property:none;
1325
- --tds-select-dropdown-transition:none;
1326
- --tds-select-dropdown-scroll-behavior:auto;
1327
- --tds-select-dropdown-closed-translate:none;
1328
- --tds-select-dropdown-open-translate:none;
1329
- --tds-select-caret-transition:none;
1330
- }
1331
- }
1332
-
1333
- .tds-select-description{
1334
- display:flex;
1335
- gap:var(--t-spacing-half);
1336
- align-items:flex-start;
1337
- margin:0;
1338
- font-size:var(--t-font-size-sm);
1339
- line-height:1.35;
1340
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1341
- cursor:text;
1342
- }
1343
-
1344
- .tds-select-description .tds-select-description-invalid-icon{
1345
- display:var(--tds-select-description-invalid-icon-display, none);
1346
- flex-shrink:0;
1347
- margin-block-start:calc(.5lh - .5em);
1348
- line-height:1.35;
1349
- }
1350
-
1351
- .tds-select > .tds-select-hidden-select{
1352
- position:absolute;
1353
- inline-size:1px;
1354
- block-size:1px;
1355
- padding:0;
1356
- margin:0;
1357
- pointer-events:none;
1358
- opacity:0;
1359
- }
1360
-
1361
- .tds-select:has( > button) > button{
1362
- display:block;
1363
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1364
- overflow:hidden;
1365
- text-overflow:ellipsis;
1366
- color:var(--tds-select-placeholder-color);
1367
- white-space:nowrap;
1368
- background-image:none;
1369
- anchor-name:--tds-select-anchor;
1370
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1371
- -webkit-tap-highlight-color:transparent;
1372
- }
1373
-
1374
- :is(.tds-select:has( > button) > button)::after{
1375
- position:absolute;
1376
- inset-block:0;
1377
- inset-inline-end:var(--tds-select-caret-inline-offset);
1378
- width:var(--tds-select-caret-size);
1379
- height:var(--tds-select-caret-size);
1380
- margin-block:auto;
1381
- pointer-events:none;
1382
- content:var(--tds-select-background-image);
1383
- transform:rotate(0);
1384
- transition:var(--tds-select-caret-transition);
1385
- }
1386
-
1387
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1388
- color:var(--tds-select-color);
1389
- }
1390
-
1391
- .tds-select:has( > button) [popover]{
1392
- position-anchor:--tds-select-anchor;
1393
- inset:auto;
1394
- inline-size:-moz-max-content;
1395
- inline-size:max-content;
1396
- min-inline-size:anchor-size(width);
1397
- max-inline-size:100vi;
1398
- max-block-size:min(50vh, 20rem);
1399
- padding:var(--tds-select-dropdown-padding);
1400
- margin-block:var(--tds-select-dropdown-margin-block);
1401
- position-area:block-end span-inline-start;
1402
- position-try-fallbacks:flip-block, flip-inline;
1403
- overflow:auto;
1404
- overflow-x:hidden;
1405
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1406
- overscroll-behavior:none;
1407
- -webkit-user-select:none;
1408
- -moz-user-select:none;
1409
- user-select:none;
1410
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1411
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1412
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1413
- background:var(--tds-select-dropdown-background-color);
1414
- border:var(--tds-select-dropdown-border);
1415
- border-radius:var(--tds-select-dropdown-border-radius);
1416
- box-shadow:var(--tds-select-dropdown-box-shadow);
1417
- opacity:var(--tds-select-dropdown-open-opacity);
1418
- translate:var(--tds-select-dropdown-open-translate);
1419
- transition:var(--tds-select-dropdown-transition);
1420
- }
1421
-
1422
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1423
- opacity:var(--tds-select-dropdown-closed-opacity);
1424
- translate:var(--tds-select-dropdown-closed-translate);
1425
- }
1426
-
1427
- :is(.tds-select:has( > button) [popover]) ul{
1428
- padding:0;
1429
- margin:0;
1430
- list-style:none;
1431
- }
1432
-
1433
- @starting-style{
1434
- :is(.tds-select:has( > button) [popover]):popover-open{
1435
- opacity:var(--tds-select-dropdown-closed-opacity);
1436
- translate:var(--tds-select-dropdown-closed-translate);
1437
- }
1438
- }
1439
-
1440
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1441
- .tds-select select:has(> button){
1442
- padding-inline-end:0;
1443
- background-image:none;
1444
- }
1445
- @media (hover) and (pointer: fine){
1446
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1447
- padding-block:0;
1448
- -webkit-appearance:base-select;
1449
- -moz-appearance:base-select;
1450
- appearance:base-select;
1451
- }
1452
- }
1453
- :is(.tds-select select:has( > button))::picker-icon{
1454
- flex-shrink:0;
1455
- width:var(--tds-select-caret-size);
1456
- height:var(--tds-select-caret-size);
1457
- margin-inline-end:var(--tds-select-caret-inline-offset);
1458
- content:var(--tds-select-background-image);
1459
- transition:var(--tds-select-caret-transition);
1460
- }
1461
-
1462
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1463
- opacity:var(--tds-select-dropdown-closed-opacity);
1464
- translate:var(--tds-select-dropdown-closed-translate);
1465
- }
1466
-
1467
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1468
- outline-color:var(--t-focus-ring-color);
1469
- outline-offset:var(--t-focus-ring-offset);
1470
- border-color:var(--tds-select-border-color-active);
1471
- }
1472
-
1473
- :is(.tds-select select:has( > button)):open::picker-icon{
1474
- opacity:1;
1475
- transform:rotate(.5turn);
1476
- }
1479
+ color:var(--tds-select-option-color);
1480
+ white-space:nowrap;
1481
+ cursor:default;
1482
+ border-radius:var(--tds-select-option-border-radius);
1483
+ }
1477
1484
 
1478
- :is(.tds-select select:has( > button)) selectedcontent{
1479
- overflow:hidden;
1480
- text-overflow:ellipsis;
1481
- line-height:calc(var(--tds-select-min-height) - 2px);
1482
- white-space:nowrap;
1485
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1486
+ outline:none;
1483
1487
  }
1484
1488
 
1485
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1486
- color:var(--tds-select-placeholder-color);
1489
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1490
+ background:var(--tds-select-option-background-hover);
1487
1491
  }
1488
1492
 
1489
- :is(.tds-select select:has( > button))::picker(select){
1490
- inset:auto;
1491
- inline-size:-moz-max-content;
1492
- inline-size:max-content;
1493
- min-inline-size:anchor-size(width);
1494
- max-inline-size:100vi;
1495
- padding:var(--tds-select-dropdown-padding);
1496
- margin-block:var(--tds-select-dropdown-margin-block);
1497
- position-try-fallbacks:flip-block, flip-inline;
1498
- overflow:auto;
1499
- overflow-x:hidden;
1500
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1501
- overscroll-behavior:none;
1502
- -webkit-user-select:none;
1503
- -moz-user-select:none;
1504
- user-select:none;
1505
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1506
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1507
- background:var(--tds-select-dropdown-background-color);
1508
- border:var(--tds-select-dropdown-border);
1509
- border-radius:var(--tds-select-dropdown-border-radius);
1510
- box-shadow:var(--tds-select-dropdown-box-shadow);
1511
- opacity:var(--tds-select-dropdown-open-opacity);
1512
- translate:var(--tds-select-dropdown-open-translate);
1513
- transition:var(--tds-select-dropdown-transition);
1493
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1494
+ background:var(--tds-select-option-background-active);
1514
1495
  }
1515
1496
 
1516
- :is(.tds-select select:has( > button)) option::checkmark{
1517
- display:none;
1497
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1498
+ color:var(--t-form-color-disabled);
1499
+ cursor:not-allowed;
1518
1500
  }
1519
1501
 
1520
- @starting-style{
1521
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1522
- opacity:var(--tds-select-dropdown-closed-opacity);
1523
- translate:var(--tds-select-dropdown-closed-translate);
1502
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1503
+ background:transparent;
1524
1504
  }
1525
- }
1526
- }
1527
-
1528
- .tds-radio-group{
1529
- --tds-radio-group-font-size:var(--t-font-size-md);
1530
- --tds-radio-group-line-height:1.4;
1531
- --tds-radio-group-gap:var(--t-spacing-1);
1532
-
1533
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1534
-
1535
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1536
- --tds-radio-group-description-line-height:1.35;
1537
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1538
- --tds-radio-group-description-invalid-icon-display:none;
1539
- display:flex;
1540
- flex-direction:column;
1541
- gap:var(--tds-radio-group-gap);
1542
- padding:0;
1543
- margin:0;
1544
-
1545
- font-size:var(--tds-radio-group-font-size);
1546
- line-height:var(--tds-radio-group-line-height);
1547
- border:0;
1548
- }
1549
1505
 
1550
- .tds-radio-group legend{
1551
- padding:0;
1552
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1506
+ .tds-select :is(li[role="presentation"],legend){
1507
+ position:sticky;
1508
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1509
+ z-index:1;
1510
+ float:inline-start;
1511
+ inline-size:100%;
1512
+ padding-block:var(--tds-select-group-label-padding-block);
1513
+ padding-inline:var(--tds-select-group-label-padding-inline);
1514
+ container-type:scroll-state;
1515
+ font-size:var(--tds-select-group-label-font-size);
1516
+ font-weight:var(--tds-select-group-label-font-weight);
1517
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1518
+ background:var(--tds-select-group-label-background);
1519
+ text-box:trim-both cap alphabetic;
1553
1520
  }
1554
1521
 
1555
- .tds-radio-group:has(.tds-radio-group-description){
1556
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1557
- }
1522
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1523
+ display:inline-flex;
1524
+ gap:var(--t-spacing-half);
1525
+ align-items:center;
1526
+ color:var(--tds-select-group-label-color);
1527
+ transition:var(--tds-select-group-label-transition);
1528
+ }
1558
1529
 
1559
- .tds-radio-group[aria-invalid="true"]{
1560
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1561
- --tds-radio-group-description-invalid-icon-display:inline-block;
1562
- }
1530
+ @container scroll-state(stuck){
1563
1531
 
1564
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1565
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1532
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1533
+ color:var(--tds-select-group-label-color-stuck);
1566
1534
  }
1567
1535
 
1568
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1569
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1570
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1571
- }
1536
+ @media (forced-colors: active){
1572
1537
 
1573
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1574
- --tds-radio-input-background-color:var(--t-form-background-color);
1538
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1539
+ color:var(--tds-select-group-label-color-stuck);
1540
+ }
1541
+ }
1575
1542
  }
1576
1543
 
1577
- .tds-radio-group:has(input:required) legend::after{
1578
- margin-left:.25ch;
1579
- color:var(--t-text-color-status-error);
1580
- content:"*";
1581
- }
1544
+ .tds-select.tds-select--lg{
1545
+ --tds-select-min-height:var(--t-container-size-lg);
1546
+ --tds-select-font-size:var(--t-font-size-lg);
1547
+ }
1582
1548
 
1583
- .tds-radio-group-fields{
1584
- display:flex;
1585
- flex-direction:column;
1586
- gap:var(--tds-radio-group-gap);
1587
- align-items:flex-start;
1549
+ @media (prefers-reduced-motion: reduce){
1550
+
1551
+ .tds-select{
1552
+ --tds-select-transition-property:none;
1553
+ --tds-select-dropdown-transition:none;
1554
+ --tds-select-dropdown-scroll-behavior:auto;
1555
+ --tds-select-dropdown-closed-translate:none;
1556
+ --tds-select-dropdown-open-translate:none;
1557
+ --tds-select-caret-transition:none;
1588
1558
  }
1559
+ }
1589
1560
 
1590
- .tds-radio-group-description{
1561
+ .tds-select-description{
1591
1562
  display:flex;
1592
1563
  gap:var(--t-spacing-half);
1593
1564
  align-items:flex-start;
1594
1565
  margin:0;
1595
- font-size:var(--tds-radio-group-description-font-size);
1596
- line-height:var(--tds-radio-group-description-line-height);
1597
- color:var(--tds-radio-group-description-color);
1566
+ font-size:var(--t-font-size-sm);
1567
+ line-height:1.35;
1568
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1598
1569
  cursor:text;
1599
1570
  }
1600
1571
 
1601
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1602
- display:var(--tds-radio-group-description-invalid-icon-display);
1572
+ .tds-select-description .tds-select-description-invalid-icon{
1573
+ display:var(--tds-select-description-invalid-icon-display, none);
1603
1574
  flex-shrink:0;
1604
- margin-top:calc(.5lh - .5em);
1605
- line-height:var(--tds-radio-group-description-line-height);
1575
+ margin-block-start:calc(.5lh - .5em);
1576
+ line-height:1.35;
1606
1577
  }
1607
1578
 
1608
- .tds-radio-group--sm{
1609
- --tds-radio-group-line-height:1.35;
1610
- --tds-radio-group-font-size:var(--t-font-size-sm);
1611
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1612
- --tds-radio-group-description-line-height:1.3;
1579
+ .tds-select > .tds-select-hidden-select{
1580
+ position:absolute;
1581
+ inline-size:1px;
1582
+ block-size:1px;
1583
+ padding:0;
1584
+ margin:0;
1585
+ pointer-events:none;
1586
+ opacity:0;
1613
1587
  }
1614
1588
 
1615
- .tds-toggle-switch{
1616
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1617
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1618
- --tds-toggle-switch-cursor:pointer;
1619
- --tds-toggle-switch-display:inline-grid;
1620
- --tds-toggle-switch-line-height:1.4;
1621
-
1622
- --tds-toggle-switch-label-color:var(--t-form-color);
1623
-
1624
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1625
- --tds-toggle-switch-track-outline:none;
1626
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1627
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1628
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1629
-
1630
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1631
- --tds-toggle-switch-thumb-transform:translateX(0);
1632
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1589
+ .tds-select:has( > button) > button{
1590
+ display:block;
1591
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1592
+ overflow:hidden;
1593
+ text-overflow:ellipsis;
1594
+ color:var(--tds-select-placeholder-color);
1595
+ white-space:nowrap;
1596
+ background-image:none;
1597
+ anchor-name:--tds-select-anchor;
1598
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1599
+ -webkit-tap-highlight-color:transparent;
1600
+ }
1633
1601
 
1634
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1635
- --tds-toggle-switch-description-line-height:1.35;
1636
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1637
- position:relative;
1602
+ :is(.tds-select:has( > button) > button)::after{
1603
+ position:absolute;
1604
+ inset-block:0;
1605
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1606
+ width:var(--tds-select-caret-size);
1607
+ height:var(--tds-select-caret-size);
1608
+ margin-block:auto;
1609
+ pointer-events:none;
1610
+ content:var(--tds-select-background-image);
1611
+ transform:rotate(0);
1612
+ transition:var(--tds-select-caret-transition);
1613
+ }
1638
1614
 
1639
- display:var(--tds-toggle-switch-display);
1640
- grid-template-columns:auto;
1641
- grid-auto-columns:1fr;
1642
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1643
- -webkit-user-select:none;
1644
- -moz-user-select:none;
1645
- user-select:none;
1646
- }
1615
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1616
+ color:var(--tds-select-color);
1617
+ }
1647
1618
 
1648
- .tds-toggle-switch input[type="checkbox"]{
1649
- position:absolute;
1650
- width:var(--tds-toggle-switch-track-width);
1651
- height:var(--tds-toggle-switch-track-height);
1652
- margin:0;
1653
- -webkit-appearance:none;
1654
- -moz-appearance:none;
1655
- appearance:none;
1656
- cursor:var(--tds-toggle-switch-cursor);
1657
- outline:var(--tds-toggle-switch-track-outline);
1658
- outline-offset:var(--t-focus-ring-offset);
1659
- background-color:transparent;
1660
- border:0;
1661
- border-radius:var(--t-border-radius-round);
1619
+ .tds-select:has( > button) [popover]{
1620
+ position-anchor:--tds-select-anchor;
1621
+ inset:auto;
1622
+ inline-size:-moz-max-content;
1623
+ inline-size:max-content;
1624
+ min-inline-size:anchor-size(width);
1625
+ max-inline-size:100vi;
1626
+ max-block-size:min(50vh, 20rem);
1627
+ padding:var(--tds-select-dropdown-padding);
1628
+ margin-block:var(--tds-select-dropdown-margin-block);
1629
+ position-area:block-end span-inline-start;
1630
+ position-try-fallbacks:flip-block, flip-inline;
1631
+ overflow:auto;
1632
+ overflow-x:hidden;
1633
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1634
+ overscroll-behavior:none;
1635
+ -webkit-user-select:none;
1636
+ -moz-user-select:none;
1637
+ user-select:none;
1638
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1639
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1640
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1641
+ background:var(--tds-select-dropdown-background-color);
1642
+ border:var(--tds-select-dropdown-border);
1643
+ border-radius:var(--tds-select-dropdown-border-radius);
1644
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1645
+ opacity:var(--tds-select-dropdown-open-opacity);
1646
+ translate:var(--tds-select-dropdown-open-translate);
1647
+ transition:var(--tds-select-dropdown-transition);
1662
1648
  }
1663
1649
 
1664
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1665
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1650
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1651
+ opacity:var(--tds-select-dropdown-closed-opacity);
1652
+ translate:var(--tds-select-dropdown-closed-translate);
1666
1653
  }
1667
1654
 
1668
- .tds-toggle-switch label{
1669
- display:inline-flex;
1670
- grid-area:1 / 2;
1671
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1672
- column-gap:var(--tds-toggle-switch-column-gap);
1673
- margin-top:-.09375em;
1674
- font-size:var(--tds-toggle-switch-font-size);
1675
- font-weight:var(--t-font-weight-normal);
1676
- line-height:var(--tds-toggle-switch-line-height);
1677
- color:var(--tds-toggle-switch-label-color);
1678
- cursor:var(--tds-toggle-switch-cursor);
1679
- }
1655
+ :is(.tds-select:has( > button) [popover]) ul{
1656
+ padding:0;
1657
+ margin:0;
1658
+ list-style:none;
1659
+ }
1680
1660
 
1681
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1682
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1683
- }
1661
+ @starting-style{
1662
+ :is(.tds-select:has( > button) [popover]):popover-open{
1663
+ opacity:var(--tds-select-dropdown-closed-opacity);
1664
+ translate:var(--tds-select-dropdown-closed-translate);
1665
+ }
1666
+ }
1684
1667
 
1685
- .tds-toggle-switch:has(input:checked){
1686
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1687
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1668
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1669
+ .tds-select select:has(> button){
1670
+ padding-inline-end:0;
1671
+ background-image:none;
1688
1672
  }
1689
-
1690
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1691
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1673
+ @media (hover) and (pointer: fine){
1674
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1675
+ padding-block:0;
1676
+ -webkit-appearance:base-select;
1677
+ -moz-appearance:base-select;
1678
+ appearance:base-select;
1679
+ }
1680
+ }
1681
+ :is(.tds-select select:has( > button))::picker-icon{
1682
+ flex-shrink:0;
1683
+ width:var(--tds-select-caret-size);
1684
+ height:var(--tds-select-caret-size);
1685
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1686
+ content:var(--tds-select-background-image);
1687
+ transition:var(--tds-select-caret-transition);
1692
1688
  }
1693
1689
 
1694
- .tds-toggle-switch:has(input:disabled){
1695
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1696
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1697
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1698
- --tds-toggle-switch-cursor:not-allowed;
1699
- }
1690
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1691
+ opacity:var(--tds-select-dropdown-closed-opacity);
1692
+ translate:var(--tds-select-dropdown-closed-translate);
1693
+ }
1700
1694
 
1701
- .tds-toggle-switch-track{
1702
- position:relative;
1703
- flex-shrink:0;
1704
- width:var(--tds-toggle-switch-track-width);
1705
- height:var(--tds-toggle-switch-track-height);
1706
- background-color:var(--tds-toggle-switch-track-background-color);
1707
- border-radius:var(--t-border-radius-round);
1708
- transition:var(--tds-toggle-switch-track-transition);
1709
- }
1695
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1696
+ outline-color:var(--t-focus-ring-color);
1697
+ outline-offset:var(--t-focus-ring-offset);
1698
+ border-color:var(--tds-select-border-color-active);
1699
+ }
1710
1700
 
1711
- .tds-toggle-switch-track::before{
1712
- position:absolute;
1713
- top:var(--t-spacing-fourth);
1714
- left:var(--t-spacing-fourth);
1715
- width:var(--tds-toggle-switch-thumb-size);
1716
- height:var(--tds-toggle-switch-thumb-size);
1717
- content:"";
1718
- background-color:#fff;
1719
- border-radius:var(--t-border-radius-round);
1720
- transform:var(--tds-toggle-switch-thumb-transform);
1721
- transition:var(--tds-toggle-switch-thumb-transition);
1722
- }
1701
+ :is(.tds-select select:has( > button)):open::picker-icon{
1702
+ opacity:1;
1703
+ transform:rotate(.5turn);
1704
+ }
1723
1705
 
1724
- @media (prefers-reduced-motion: reduce){
1706
+ :is(.tds-select select:has( > button)) selectedcontent{
1707
+ overflow:hidden;
1708
+ text-overflow:ellipsis;
1709
+ line-height:calc(var(--tds-select-min-height) - 2px);
1710
+ white-space:nowrap;
1711
+ }
1725
1712
 
1726
- .tds-toggle-switch-track{
1727
- --tds-toggle-switch-track-transition:none;
1728
- --tds-toggle-switch-thumb-transition:none;
1729
- }
1730
- }
1713
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1714
+ color:var(--tds-select-placeholder-color);
1715
+ }
1731
1716
 
1732
- .tds-toggle-switch-description{
1733
- display:flex;
1734
- grid-area:2 / 2;
1735
- align-items:flex-start;
1736
- margin:0;
1737
- font-size:var(--tds-toggle-switch-description-font-size);
1738
- line-height:var(--tds-toggle-switch-description-line-height);
1739
- color:var(--tds-toggle-switch-description-color);
1740
- cursor:text;
1741
- }
1717
+ :is(.tds-select select:has( > button))::picker(select){
1718
+ inset:auto;
1719
+ inline-size:-moz-max-content;
1720
+ inline-size:max-content;
1721
+ min-inline-size:anchor-size(width);
1722
+ max-inline-size:100vi;
1723
+ padding:var(--tds-select-dropdown-padding);
1724
+ margin-block:var(--tds-select-dropdown-margin-block);
1725
+ position-try-fallbacks:flip-block, flip-inline;
1726
+ overflow:auto;
1727
+ overflow-x:hidden;
1728
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1729
+ overscroll-behavior:none;
1730
+ -webkit-user-select:none;
1731
+ -moz-user-select:none;
1732
+ user-select:none;
1733
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1734
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1735
+ background:var(--tds-select-dropdown-background-color);
1736
+ border:var(--tds-select-dropdown-border);
1737
+ border-radius:var(--tds-select-dropdown-border-radius);
1738
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1739
+ opacity:var(--tds-select-dropdown-open-opacity);
1740
+ translate:var(--tds-select-dropdown-open-translate);
1741
+ transition:var(--tds-select-dropdown-transition);
1742
+ }
1742
1743
 
1743
- .tds-toggle-switch--sm{
1744
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1745
- --tds-toggle-switch-line-height:1.35;
1746
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1747
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1748
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1749
- --tds-toggle-switch-description-line-height:1.3;
1750
- }
1744
+ :is(.tds-select select:has( > button)) option::checkmark{
1745
+ display:none;
1746
+ }
1751
1747
 
1752
- .tds-toggle-switch--hide-label{
1753
- --tds-toggle-switch-display:inline-flex;
1748
+ @starting-style{
1749
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1750
+ opacity:var(--tds-select-dropdown-closed-opacity);
1751
+ translate:var(--tds-select-dropdown-closed-translate);
1752
+ }
1753
+ }
1754
1754
  }
1755
1755
 
1756
1756
  .tds-input{
@@ -3333,7 +3333,85 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3333
3333
  }
3334
3334
  }
3335
3335
 
3336
- @media (prefers-color-scheme: dark){
3336
+ @media (prefers-color-scheme: dark){
3337
+ }
3338
+
3339
+ .tds-checkbox-group{
3340
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3341
+ --tds-checkbox-group-line-height:1.4;
3342
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3343
+
3344
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3345
+
3346
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3347
+ --tds-checkbox-group-description-line-height:1.35;
3348
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3349
+ --tds-checkbox-group-description-invalid-icon-display:none;
3350
+ display:flex;
3351
+ flex-direction:column;
3352
+ gap:var(--tds-checkbox-group-gap);
3353
+ padding:0;
3354
+ margin:0;
3355
+
3356
+ font-size:var(--tds-checkbox-group-font-size);
3357
+ line-height:var(--tds-checkbox-group-line-height);
3358
+ border:0;
3359
+ }
3360
+
3361
+ .tds-checkbox-group legend{
3362
+ padding:0;
3363
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3364
+ }
3365
+
3366
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3367
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3368
+ }
3369
+
3370
+ .tds-checkbox-group[aria-invalid="true"]{
3371
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3372
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3373
+ }
3374
+
3375
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3376
+ margin-left:.25ch;
3377
+ color:var(--t-text-color-status-error);
3378
+ content:"*";
3379
+ }
3380
+
3381
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3382
+ content:none;
3383
+ }
3384
+
3385
+ .tds-checkbox-group-fields{
3386
+ display:flex;
3387
+ flex-direction:column;
3388
+ gap:var(--tds-checkbox-group-gap);
3389
+ align-items:flex-start;
3390
+ }
3391
+
3392
+ .tds-checkbox-group-description{
3393
+ display:flex;
3394
+ gap:var(--t-spacing-half);
3395
+ align-items:flex-start;
3396
+ margin:0;
3397
+ font-size:var(--tds-checkbox-group-description-font-size);
3398
+ line-height:var(--tds-checkbox-group-description-line-height);
3399
+ color:var(--tds-checkbox-group-description-color);
3400
+ cursor:text;
3401
+ }
3402
+
3403
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3404
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3405
+ flex-shrink:0;
3406
+ margin-top:calc(.5lh - .5em);
3407
+ line-height:var(--tds-checkbox-group-description-line-height);
3408
+ }
3409
+
3410
+ .tds-checkbox-group--sm{
3411
+ --tds-checkbox-group-line-height:1.35;
3412
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3413
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3414
+ --tds-checkbox-group-description-line-height:1.3;
3337
3415
  }
3338
3416
 
3339
3417
  .tds-combo-box{
@@ -3631,91 +3709,318 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3631
3709
  cursor:text;
3632
3710
  }
3633
3711
 
3634
- .tds-combo-box-description-invalid-icon{
3635
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3712
+ .tds-combo-box-description .tds-combo-box-description-invalid-icon{
3713
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3714
+ flex-shrink:0;
3715
+ margin-block-start:calc(.5lh - .5em);
3716
+ line-height:1.35;
3717
+ }
3718
+
3719
+
3720
+ .tds-number-stepper{
3721
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3722
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3723
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3724
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3725
+ --tds-number-stepper-color:var(--t-form-color);
3726
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3727
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3728
+ --tds-number-stepper-padding-block:6px;
3729
+ --tds-number-stepper-button-offset:4px;
3730
+ --tds-number-stepper-button-gap:2px;
3731
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3732
+ --tds-number-stepper-description-invalid-icon-display:none;
3733
+
3734
+ position:relative;
3735
+ display:flex;
3736
+ flex-direction:column;
3737
+ gap:var(--t-spacing-half);
3738
+ }
3739
+
3740
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3741
+ margin-left:.25ch;
3742
+ color:var(--t-text-color-status-error);
3743
+ content:"*";
3744
+ }
3745
+
3746
+ .tds-number-stepper[data-invalid]{
3747
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3748
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3749
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3750
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3751
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3752
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3753
+ }
3754
+
3755
+ .tds-number-stepper[data-disabled]{
3756
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3757
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3758
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3759
+ }
3760
+
3761
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3762
+ cursor:not-allowed;
3763
+ }
3764
+
3765
+ .tds-number-stepper--lg{
3766
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3767
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3768
+ --tds-number-stepper-button-offset:5px;
3769
+ --tds-number-stepper-button-gap:4px;
3770
+ }
3771
+
3772
+ .tds-number-stepper-label{
3773
+ font-size:var(--t-font-size-md);
3774
+ font-weight:var(--t-font-weight-normal);
3775
+ color:var(--t-text-color);
3776
+ cursor:default;
3777
+ }
3778
+
3779
+ .tds-number-stepper-field{
3780
+ display:flex;
3781
+ gap:var(--tds-number-stepper-button-gap);
3782
+ align-items:center;
3783
+ inline-size:100%;
3784
+ min-block-size:var(--tds-number-stepper-min-height);
3785
+ font-family:inherit;
3786
+ font-size:var(--tds-number-stepper-font-size);
3787
+ line-height:1;
3788
+ color:var(--tds-number-stepper-color);
3789
+ -webkit-appearance:none;
3790
+ -moz-appearance:none;
3791
+ appearance:none;
3792
+ cursor:default;
3793
+ outline:var(--t-focus-ring-width) solid transparent;
3794
+ outline-offset:0;
3795
+ background-color:var(--tds-number-stepper-background-color);
3796
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3797
+ border-radius:var(--t-form-border-radius);
3798
+ }
3799
+
3800
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3801
+ border-color:var(--tds-number-stepper-border-color-hover);
3802
+ }
3803
+
3804
+ .tds-number-stepper-field[data-focus-within]{
3805
+ outline-color:var(--t-focus-ring-color);
3806
+ outline-offset:var(--t-focus-ring-offset);
3807
+ border-color:var(--tds-number-stepper-border-color-active);
3808
+ }
3809
+
3810
+ .tds-number-stepper-field:has([readonly]){
3811
+ --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3812
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3813
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3814
+ }
3815
+
3816
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3817
+ border-color:var(--t-form-border-color-hover);
3818
+ }
3819
+
3820
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3821
+ display:none;
3822
+ }
3823
+
3824
+ .tds-number-stepper-input{
3825
+ display:flex;
3826
+ flex:1;
3827
+ align-items:center;
3828
+ min-inline-size:0;
3829
+ padding-block:var(--tds-number-stepper-padding-block);
3830
+ padding-inline:var(--t-spacing-1);
3831
+ font-family:inherit;
3832
+ font-size:inherit;
3833
+ color:inherit;
3834
+ outline:0;
3835
+ background:transparent;
3836
+ border:0;
3837
+ }
3838
+
3839
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3840
+ margin:0;
3841
+ -webkit-appearance:none;
3842
+ appearance:none;
3843
+ }
3844
+
3845
+ .tds-number-stepper-button{
3636
3846
  flex-shrink:0;
3637
- margin-block-start:calc(.5lh - .5em);
3847
+ align-self:center;
3848
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3849
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3850
+ padding:0;
3851
+ }
3852
+
3853
+ .tds-number-stepper-button:last-of-type{
3854
+ margin-inline-end:var(--tds-number-stepper-button-offset);
3855
+ }
3856
+
3857
+ .tds-number-stepper-description{
3858
+ display:flex;
3859
+ gap:var(--t-spacing-half);
3860
+ align-items:flex-start;
3861
+ margin:0;
3862
+ font-size:var(--t-font-size-sm);
3638
3863
  line-height:1.35;
3864
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3865
+ cursor:text;
3639
3866
  }
3640
3867
 
3641
- .tds-checkbox-group{
3642
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3643
- --tds-checkbox-group-line-height:1.4;
3644
- --tds-checkbox-group-gap:var(--t-spacing-1);
3868
+ .tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
3869
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
3870
+ flex-shrink:0;
3871
+ margin-block-start:calc(.5lh - .5em);
3872
+ line-height:1.35;
3873
+ }
3645
3874
 
3646
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3647
3875
 
3648
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3649
- --tds-checkbox-group-description-line-height:1.35;
3650
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3651
- --tds-checkbox-group-description-invalid-icon-display:none;
3876
+ .tds-time-field{
3877
+ --tds-time-field-border-color:var(--t-form-border-color);
3878
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3879
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3880
+ --tds-time-field-background-color:var(--t-form-background-color);
3881
+ --tds-time-field-color:var(--t-form-color);
3882
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3883
+ --tds-time-field-font-size:var(--t-font-size-md);
3884
+ --tds-time-field-min-height:var(--t-container-size-md);
3885
+ --tds-time-field-padding-block:6px;
3886
+ --tds-time-field-description-color:var(--t-text-color-secondary);
3887
+ --tds-time-field-description-invalid-icon-display:none;
3888
+
3889
+ position:relative;
3652
3890
  display:flex;
3653
3891
  flex-direction:column;
3654
- gap:var(--tds-checkbox-group-gap);
3655
- padding:0;
3656
- margin:0;
3892
+ gap:var(--t-spacing-half);
3893
+ }
3657
3894
 
3658
- font-size:var(--tds-checkbox-group-font-size);
3659
- line-height:var(--tds-checkbox-group-line-height);
3660
- border:0;
3895
+ .tds-time-field[data-required] .tds-time-field-label::after{
3896
+ margin-left:.25ch;
3897
+ color:var(--t-text-color-status-error);
3898
+ content:"*";
3899
+ }
3900
+
3901
+ .tds-time-field[data-invalid]{
3902
+ --tds-time-field-border-color:var(--t-form-border-color-error);
3903
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3904
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3905
+ --tds-time-field-background-color:var(--t-form-background-color-error);
3906
+ --tds-time-field-description-color:var(--t-text-color-status-error);
3907
+ --tds-time-field-description-invalid-icon-display:inline-block;
3908
+ }
3909
+
3910
+ .tds-time-field[data-disabled]{
3911
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
3912
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
3913
+ --tds-time-field-color:var(--t-form-color-disabled);
3914
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3915
+ }
3916
+
3917
+ .tds-time-field[data-disabled] .tds-time-field-label{
3918
+ color:var(--t-form-color-disabled);
3919
+ }
3920
+
3921
+ .tds-time-field[data-disabled] .tds-time-field-input{
3922
+ cursor:not-allowed;
3923
+ }
3924
+
3925
+ .tds-time-field--lg{
3926
+ --tds-time-field-min-height:var(--t-container-size-lg);
3927
+ --tds-time-field-font-size:var(--t-font-size-lg);
3928
+ }
3929
+
3930
+ .tds-time-field-label{
3931
+ font-size:var(--t-font-size-md);
3932
+ font-weight:var(--t-font-weight-normal);
3933
+ color:var(--t-text-color);
3934
+ cursor:default;
3935
+ }
3936
+
3937
+ .tds-time-field-input{
3938
+ display:flex;
3939
+ align-items:center;
3940
+ inline-size:100%;
3941
+ min-block-size:var(--tds-time-field-min-height);
3942
+ padding-block:var(--tds-time-field-padding-block);
3943
+ padding-inline:var(--t-spacing-1);
3944
+ font-family:inherit;
3945
+ font-size:var(--tds-time-field-font-size);
3946
+ font-variant-numeric:tabular-nums;
3947
+ line-height:1;
3948
+ color:var(--tds-time-field-color);
3949
+ cursor:text;
3950
+ outline:var(--t-focus-ring-width) solid transparent;
3951
+ outline-offset:0;
3952
+ background-color:var(--tds-time-field-background-color);
3953
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3954
+ border-radius:var(--t-form-border-radius);
3661
3955
  }
3662
3956
 
3663
- .tds-checkbox-group legend{
3664
- padding:0;
3665
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3957
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3958
+ border-color:var(--tds-time-field-border-color-hover);
3666
3959
  }
3667
3960
 
3668
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3669
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3961
+ .tds-time-field-input[data-focus-within]{
3962
+ outline-color:var(--t-focus-ring-color);
3963
+ outline-offset:var(--t-focus-ring-offset);
3964
+ border-color:var(--tds-time-field-border-color-active);
3670
3965
  }
3671
3966
 
3672
- .tds-checkbox-group[aria-invalid="true"]{
3673
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3674
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3967
+ .tds-time-field-input[data-readonly]{
3968
+ color:var(--t-form-color-readonly);
3969
+ background-color:var(--t-form-background-color-readonly);
3970
+ border-color:var(--t-form-border-color-readonly);
3675
3971
  }
3676
3972
 
3677
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3678
- margin-left:.25ch;
3679
- color:var(--t-text-color-status-error);
3680
- content:"*";
3973
+ .tds-time-field-input[data-readonly][data-hovered]{
3974
+ border-color:var(--t-form-border-color-readonly);
3681
3975
  }
3682
3976
 
3683
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3684
- content:none;
3977
+ .tds-time-field-input[data-readonly][data-focus-within]{
3978
+ outline-color:var(--t-focus-ring-color);
3979
+ outline-offset:var(--t-focus-ring-offset);
3980
+ border-color:var(--t-form-border-color-hover);
3685
3981
  }
3686
3982
 
3687
- .tds-checkbox-group-fields{
3688
- display:flex;
3689
- flex-direction:column;
3690
- gap:var(--tds-checkbox-group-gap);
3691
- align-items:flex-start;
3983
+ .tds-time-field-segment{
3984
+ padding-inline:1px;
3985
+ font-variant-numeric:tabular-nums;
3986
+ cursor:text;
3987
+ caret-color:transparent;
3988
+ border-radius:var(--t-border-radius-sm);
3692
3989
  }
3693
3990
 
3694
- .tds-checkbox-group-description{
3991
+ .tds-time-field-segment[data-placeholder]{
3992
+ color:var(--tds-time-field-placeholder-color);
3993
+ }
3994
+
3995
+ .tds-time-field-segment[data-focused]{
3996
+ color:var(--t-text-color-inverted);
3997
+ outline:0;
3998
+ background:var(--t-fill-color-interaction);
3999
+ }
4000
+
4001
+ .tds-time-field-segment-separator{
4002
+ padding-inline:0;
4003
+ color:var(--tds-time-field-placeholder-color);
4004
+ }
4005
+
4006
+ .tds-time-field-description{
3695
4007
  display:flex;
3696
4008
  gap:var(--t-spacing-half);
3697
4009
  align-items:flex-start;
3698
4010
  margin:0;
3699
- font-size:var(--tds-checkbox-group-description-font-size);
3700
- line-height:var(--tds-checkbox-group-description-line-height);
3701
- color:var(--tds-checkbox-group-description-color);
4011
+ font-size:var(--t-font-size-sm);
4012
+ line-height:1.35;
4013
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3702
4014
  cursor:text;
3703
4015
  }
3704
4016
 
3705
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3706
- display:var(--tds-checkbox-group-description-invalid-icon-display);
4017
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4018
+ display:var(--tds-time-field-description-invalid-icon-display, none);
3707
4019
  flex-shrink:0;
3708
- margin-top:calc(.5lh - .5em);
3709
- line-height:var(--tds-checkbox-group-description-line-height);
4020
+ margin-block-start:calc(.5lh - .5em);
4021
+ line-height:1.35;
3710
4022
  }
3711
4023
 
3712
- .tds-checkbox-group--sm{
3713
- --tds-checkbox-group-line-height:1.35;
3714
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3715
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3716
- --tds-checkbox-group-description-line-height:1.3;
3717
- }
3718
-
3719
4024
  .tds-date-picker{
3720
4025
  --tds-date-picker-border-color:var(--t-form-border-color);
3721
4026
  --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
@@ -3888,603 +4193,300 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3888
4193
  --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
3889
4194
  --tds-date-picker-popover-interactive-property:color, background-color, border-color;
3890
4195
 
3891
- position:relative;
3892
- overflow:hidden;
3893
- background-color:var(--tds-date-picker-popover-background-color);
3894
- border:var(--t-border-width) solid var(--t-border-color);
3895
- border-radius:var(--t-border-radius);
3896
- box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
3897
- opacity:1;
3898
- transform:translateY(0);
3899
- transition:var(--tds-date-picker-popover-transition-enter);
3900
- }
3901
-
3902
- .tds-date-picker-popover[data-entering]{
3903
- opacity:var(--tds-date-picker-popover-closed-opacity);
3904
- transform:var(--tds-date-picker-popover-closed-transform);
3905
- }
3906
-
3907
- .tds-date-picker-popover[data-exiting]{
3908
- opacity:var(--tds-date-picker-popover-closed-opacity);
3909
- transform:var(--tds-date-picker-popover-closed-transform);
3910
- transition:var(--tds-date-picker-popover-transition-exit);
3911
- }
3912
-
3913
- @media (prefers-reduced-motion: reduce){
3914
-
3915
- .tds-date-picker-popover{
3916
- --tds-date-picker-popover-transition-enter:none;
3917
- --tds-date-picker-popover-transition-exit:none;
3918
- --tds-date-picker-popover-closed-opacity:1;
3919
- --tds-date-picker-popover-closed-transform:none;
3920
- }
3921
- }
3922
-
3923
- .tds-date-picker-overlay{
3924
- position:absolute;
3925
- inset:0;
3926
- z-index:1;
3927
- display:flex;
3928
- background-color:var(--tds-date-picker-popover-background-color);
3929
- }
3930
-
3931
- .tds-date-picker-overlay-list{
3932
- display:grid;
3933
- flex:1;
3934
- gap:var(--t-spacing-half);
3935
- padding-inline:var(--tds-date-picker-popover-padding);
3936
- outline:0;
3937
- grid-template-columns:repeat(3, 1fr);
3938
- scrollbar-width:thin;
3939
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
3940
- }
3941
-
3942
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
3943
- padding-bottom:var(--tds-date-picker-popover-padding);
3944
- grid-template-rows:repeat(4, 1fr);
3945
- }
3946
-
3947
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
3948
- padding-right:var(--t-spacing-1);
3949
- grid-auto-rows:var(--t-container-size-xl);
3950
- overflow-y:auto;
3951
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
3952
- }
3953
-
3954
- .tds-date-picker-overlay-cell{
3955
- display:flex;
3956
- align-items:center;
3957
- justify-content:center;
3958
- font-family:inherit;
3959
- font-size:var(--tds-date-picker-popover-font-size);
3960
- color:var(--t-text-color);
3961
- cursor:default;
3962
- outline:0;
3963
- background:transparent;
3964
- border:0;
3965
- border-radius:var(--t-border-radius-md);
3966
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
3967
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
3968
- transition-property:var(--tds-date-picker-popover-interactive-property);
3969
- }
3970
-
3971
- .tds-date-picker-overlay-cell[data-hovered]{
3972
- background:var(--t-fill-color-button-neutral-outline-hover);
3973
- }
3974
-
3975
- .tds-date-picker-overlay-cell[data-pressed]{
3976
- background:var(--t-fill-color-button-neutral-outline-active);
3977
- }
3978
-
3979
- .tds-date-picker-overlay-cell[data-selected]{
3980
- font-weight:var(--t-font-weight-semibold);
3981
- color:var(--t-text-color-inverted);
3982
- background:var(--t-fill-color-interaction);
3983
- }
3984
-
3985
- .tds-date-picker-overlay-cell[data-focus-visible]{
3986
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3987
- }
3988
-
3989
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
3990
- outline-offset:var(--t-focus-ring-offset);
3991
- }
3992
-
3993
- .tds-date-picker-calendar-heading{
3994
- display:flex;
3995
- flex:1;
3996
- gap:var(--t-spacing-half);
3997
- align-items:center;
3998
- justify-content:flex-start;
3999
- }
4000
-
4001
- .tds-date-picker-calendar-overlay-trigger{
4002
- padding:var(--t-spacing-half) var(--t-spacing-1);
4003
- font-family:inherit;
4004
- font-size:var(--tds-date-picker-popover-font-size);
4005
- font-weight:var(--t-font-weight-semibold);
4006
- color:var(--t-text-color);
4007
- cursor:default;
4008
- outline:0;
4009
- background:transparent;
4010
- border:0;
4011
- border-radius:var(--t-border-radius-md);
4012
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4013
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4014
- transition-property:var(--tds-date-picker-popover-interactive-property);
4015
- }
4016
-
4017
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
4018
- background:var(--t-fill-color-button-neutral-outline-hover);
4019
- }
4020
-
4021
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
4022
- background:var(--t-fill-color-button-neutral-outline-active);
4023
- }
4024
-
4025
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
4026
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4027
- outline-offset:var(--t-focus-ring-offset);
4028
- }
4029
-
4030
- .tds-date-picker-calendar{
4031
- font-size:var(--tds-date-picker-popover-font-size);
4032
- inline-size:-moz-fit-content;
4033
- inline-size:fit-content;
4034
- }
4035
-
4036
- .tds-date-picker-calendar-body{
4037
- position:relative;
4038
- padding:var(--tds-date-picker-popover-padding);
4039
- padding-block-start:0;
4040
- }
4041
-
4042
- .tds-date-picker-calendar-header{
4043
- display:flex;
4044
- align-items:center;
4045
- justify-content:space-between;
4046
- padding:var(--tds-date-picker-popover-padding);
4047
- }
4048
-
4049
- .tds-date-picker-calendar-title{
4050
- padding:var(--t-spacing-half) var(--t-spacing-1);
4051
- font-size:var(--tds-date-picker-popover-font-size);
4052
- font-weight:var(--t-font-weight-semibold);
4053
- }
4054
-
4055
- .tds-date-picker-calendar-title--visually-hidden{
4056
- position:absolute;
4057
- inline-size:1px;
4058
- block-size:1px;
4059
- padding:0;
4060
- margin:-1px;
4061
- overflow:hidden;
4062
- white-space:nowrap;
4063
- border:0;
4064
- clip-path:inset(50%);
4065
- }
4066
-
4067
- .tds-date-picker-calendar-nav{
4068
- font-size:var(--tds-date-picker-popover-font-size);
4069
- display:flex;
4070
- align-items:center;
4071
- justify-content:center;
4072
- padding:var(--t-spacing-half);
4073
- color:var(--t-text-color);
4074
- cursor:default;
4075
- outline:0;
4076
- background:transparent;
4077
- border:0;
4078
- border-radius:var(--t-border-radius-md);
4079
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4080
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4081
- transition-property:var(--tds-date-picker-popover-interactive-property);
4196
+ position:relative;
4197
+ overflow:hidden;
4198
+ background-color:var(--tds-date-picker-popover-background-color);
4199
+ border:var(--t-border-width) solid var(--t-border-color);
4200
+ border-radius:var(--t-border-radius);
4201
+ box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
4202
+ opacity:1;
4203
+ transform:translateY(0);
4204
+ transition:var(--tds-date-picker-popover-transition-enter);
4082
4205
  }
4083
4206
 
4084
- .tds-date-picker-calendar-nav[data-hovered]{
4085
- background:var(--t-fill-color-button-neutral-outline-hover);
4207
+ .tds-date-picker-popover[data-entering]{
4208
+ opacity:var(--tds-date-picker-popover-closed-opacity);
4209
+ transform:var(--tds-date-picker-popover-closed-transform);
4086
4210
  }
4087
4211
 
4088
- .tds-date-picker-calendar-nav[data-pressed]{
4089
- background:var(--t-fill-color-button-neutral-outline-active);
4212
+ .tds-date-picker-popover[data-exiting]{
4213
+ opacity:var(--tds-date-picker-popover-closed-opacity);
4214
+ transform:var(--tds-date-picker-popover-closed-transform);
4215
+ transition:var(--tds-date-picker-popover-transition-exit);
4090
4216
  }
4091
4217
 
4092
- .tds-date-picker-calendar-nav[data-focus-visible]{
4093
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4094
- outline-offset:var(--t-focus-ring-offset);
4095
- }
4218
+ @media (prefers-reduced-motion: reduce){
4096
4219
 
4097
- .tds-date-picker-calendar-nav[data-disabled]{
4098
- color:var(--t-text-color-disabled);
4099
- cursor:not-allowed;
4220
+ .tds-date-picker-popover{
4221
+ --tds-date-picker-popover-transition-enter:none;
4222
+ --tds-date-picker-popover-transition-exit:none;
4223
+ --tds-date-picker-popover-closed-opacity:1;
4224
+ --tds-date-picker-popover-closed-transform:none;
4225
+ }
4100
4226
  }
4101
4227
 
4102
- .tds-date-picker-calendar-nav svg{
4103
- transform:scale(0.875);
4228
+ .tds-date-picker-overlay{
4229
+ position:absolute;
4230
+ inset:0;
4231
+ z-index:1;
4232
+ display:flex;
4233
+ background-color:var(--tds-date-picker-popover-background-color);
4104
4234
  }
4105
4235
 
4106
- .tds-date-picker-calendar-nav--lg svg{
4107
- transform:scale(1);
4236
+ .tds-date-picker-overlay-list{
4237
+ display:grid;
4238
+ flex:1;
4239
+ gap:var(--t-spacing-half);
4240
+ padding-inline:var(--tds-date-picker-popover-padding);
4241
+ outline:0;
4242
+ grid-template-columns:repeat(3, 1fr);
4243
+ scrollbar-width:thin;
4244
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4108
4245
  }
4109
4246
 
4110
- .tds-date-picker-calendar-grid{
4111
- border-collapse:collapse;
4247
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
4248
+ padding-bottom:var(--tds-date-picker-popover-padding);
4249
+ grid-template-rows:repeat(4, 1fr);
4112
4250
  }
4113
4251
 
4114
- .tds-date-picker-calendar-header-cell{
4115
- padding-block:var(--t-spacing-half);
4116
- font-size:0.875em;
4117
- font-weight:var(--t-font-weight-medium);
4118
- color:var(--t-text-color-secondary);
4119
- text-align:center;
4252
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
4253
+ padding-right:var(--t-spacing-1);
4254
+ grid-auto-rows:var(--t-container-size-xl);
4255
+ overflow-y:auto;
4256
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
4120
4257
  }
4121
4258
 
4122
- .tds-date-picker-calendar-cell{
4259
+ .tds-date-picker-overlay-cell{
4123
4260
  display:flex;
4124
4261
  align-items:center;
4125
4262
  justify-content:center;
4126
- inline-size:2.25em;
4127
- block-size:2.25em;
4263
+ font-family:inherit;
4264
+ font-size:var(--tds-date-picker-popover-font-size);
4128
4265
  color:var(--t-text-color);
4129
4266
  cursor:default;
4130
4267
  outline:0;
4131
- border:2px solid transparent;
4268
+ background:transparent;
4269
+ border:0;
4132
4270
  border-radius:var(--t-border-radius-md);
4133
- position:relative;
4134
4271
  transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4135
4272
  transition-duration:var(--tds-date-picker-popover-interactive-duration);
4136
4273
  transition-property:var(--tds-date-picker-popover-interactive-property);
4137
4274
  }
4138
4275
 
4139
- .tds-date-picker-calendar-cell[data-today]{
4140
- border-radius:50%;
4141
- border-color:var(--t-border-color);
4142
- }
4143
-
4144
- .tds-date-picker-calendar-cell[data-outside-month]{
4145
- color:var(--t-text-color-secondary);
4146
- }
4147
-
4148
- .tds-date-picker-calendar-cell[data-hovered]{
4276
+ .tds-date-picker-overlay-cell[data-hovered]{
4149
4277
  background:var(--t-fill-color-button-neutral-outline-hover);
4150
4278
  }
4151
4279
 
4152
- .tds-date-picker-calendar-cell[data-pressed]{
4280
+ .tds-date-picker-overlay-cell[data-pressed]{
4153
4281
  background:var(--t-fill-color-button-neutral-outline-active);
4154
4282
  }
4155
4283
 
4156
- .tds-date-picker-calendar-cell[data-selected]{
4284
+ .tds-date-picker-overlay-cell[data-selected]{
4157
4285
  font-weight:var(--t-font-weight-semibold);
4158
4286
  color:var(--t-text-color-inverted);
4159
4287
  background:var(--t-fill-color-interaction);
4160
- border-color:transparent;
4161
- }
4162
-
4163
- .tds-date-picker-calendar-cell[data-unavailable]{
4164
- color:var(--t-text-color-disabled);
4165
- text-decoration:line-through;
4166
- cursor:not-allowed;
4167
- }
4168
-
4169
- .tds-date-picker-calendar-cell[data-disabled]{
4170
- color:var(--t-text-color-disabled);
4171
- cursor:not-allowed;
4172
4288
  }
4173
4289
 
4174
- .tds-date-picker-calendar-cell[data-focus-visible]{
4290
+ .tds-date-picker-overlay-cell[data-focus-visible]{
4175
4291
  outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4176
- outline-offset:-2px;
4177
4292
  }
4178
4293
 
4179
- .tds-date-picker-calendar-cell[data-focus-visible][data-selected]{
4294
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
4180
4295
  outline-offset:var(--t-focus-ring-offset);
4181
4296
  }
4182
4297
 
4183
- .tds-date-picker-popover--lg{
4184
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
4185
- }
4186
-
4187
- .tds-time-field{
4188
- --tds-time-field-border-color:var(--t-form-border-color);
4189
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4190
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4191
- --tds-time-field-background-color:var(--t-form-background-color);
4192
- --tds-time-field-color:var(--t-form-color);
4193
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4194
- --tds-time-field-font-size:var(--t-font-size-md);
4195
- --tds-time-field-min-height:var(--t-container-size-md);
4196
- --tds-time-field-padding-block:6px;
4197
- --tds-time-field-description-color:var(--t-text-color-secondary);
4198
- --tds-time-field-description-invalid-icon-display:none;
4199
-
4200
- position:relative;
4298
+ .tds-date-picker-calendar-heading{
4201
4299
  display:flex;
4202
- flex-direction:column;
4300
+ flex:1;
4203
4301
  gap:var(--t-spacing-half);
4302
+ align-items:center;
4303
+ justify-content:flex-start;
4204
4304
  }
4205
4305
 
4206
- .tds-time-field[data-required] .tds-time-field-label::after{
4207
- margin-left:.25ch;
4208
- color:var(--t-text-color-status-error);
4209
- content:"*";
4210
- }
4211
-
4212
- .tds-time-field[data-invalid]{
4213
- --tds-time-field-border-color:var(--t-form-border-color-error);
4214
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4215
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4216
- --tds-time-field-background-color:var(--t-form-background-color-error);
4217
- --tds-time-field-description-color:var(--t-text-color-status-error);
4218
- --tds-time-field-description-invalid-icon-display:inline-block;
4219
- }
4220
-
4221
- .tds-time-field[data-disabled]{
4222
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
4223
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
4224
- --tds-time-field-color:var(--t-form-color-disabled);
4225
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4226
- }
4227
-
4228
- .tds-time-field[data-disabled] .tds-time-field-label{
4229
- color:var(--t-form-color-disabled);
4230
- }
4231
-
4232
- .tds-time-field[data-disabled] .tds-time-field-input{
4233
- cursor:not-allowed;
4234
- }
4235
-
4236
- .tds-time-field--lg{
4237
- --tds-time-field-min-height:var(--t-container-size-lg);
4238
- --tds-time-field-font-size:var(--t-font-size-lg);
4239
- }
4240
-
4241
- .tds-time-field-label{
4242
- font-size:var(--t-font-size-md);
4243
- font-weight:var(--t-font-weight-normal);
4306
+ .tds-date-picker-calendar-overlay-trigger{
4307
+ padding:var(--t-spacing-half) var(--t-spacing-1);
4308
+ font-family:inherit;
4309
+ font-size:var(--tds-date-picker-popover-font-size);
4310
+ font-weight:var(--t-font-weight-semibold);
4244
4311
  color:var(--t-text-color);
4245
4312
  cursor:default;
4313
+ outline:0;
4314
+ background:transparent;
4315
+ border:0;
4316
+ border-radius:var(--t-border-radius-md);
4317
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4318
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
4319
+ transition-property:var(--tds-date-picker-popover-interactive-property);
4246
4320
  }
4247
4321
 
4248
- .tds-time-field-input{
4249
- display:flex;
4250
- align-items:center;
4251
- inline-size:100%;
4252
- min-block-size:var(--tds-time-field-min-height);
4253
- padding-block:var(--tds-time-field-padding-block);
4254
- padding-inline:var(--t-spacing-1);
4255
- font-family:inherit;
4256
- font-size:var(--tds-time-field-font-size);
4257
- font-variant-numeric:tabular-nums;
4258
- line-height:1;
4259
- color:var(--tds-time-field-color);
4260
- cursor:text;
4261
- outline:var(--t-focus-ring-width) solid transparent;
4262
- outline-offset:0;
4263
- background-color:var(--tds-time-field-background-color);
4264
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4265
- border-radius:var(--t-form-border-radius);
4266
- }
4267
-
4268
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4269
- border-color:var(--tds-time-field-border-color-hover);
4270
- }
4271
-
4272
- .tds-time-field-input[data-focus-within]{
4273
- outline-color:var(--t-focus-ring-color);
4274
- outline-offset:var(--t-focus-ring-offset);
4275
- border-color:var(--tds-time-field-border-color-active);
4276
- }
4277
-
4278
- .tds-time-field-input[data-readonly]{
4279
- color:var(--t-form-color-readonly);
4280
- background-color:var(--t-form-background-color-readonly);
4281
- border-color:var(--t-form-border-color-readonly);
4322
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
4323
+ background:var(--t-fill-color-button-neutral-outline-hover);
4282
4324
  }
4283
4325
 
4284
- .tds-time-field-input[data-readonly][data-hovered]{
4285
- border-color:var(--t-form-border-color-readonly);
4286
- }
4287
-
4288
- .tds-time-field-input[data-readonly][data-focus-within]{
4289
- outline-color:var(--t-focus-ring-color);
4290
- outline-offset:var(--t-focus-ring-offset);
4291
- border-color:var(--t-form-border-color-hover);
4292
- }
4293
-
4294
- .tds-time-field-segment{
4295
- padding-inline:1px;
4296
- font-variant-numeric:tabular-nums;
4297
- cursor:text;
4298
- caret-color:transparent;
4299
- border-radius:var(--t-border-radius-sm);
4300
- }
4301
-
4302
- .tds-time-field-segment[data-placeholder]{
4303
- color:var(--tds-time-field-placeholder-color);
4326
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
4327
+ background:var(--t-fill-color-button-neutral-outline-active);
4304
4328
  }
4305
4329
 
4306
- .tds-time-field-segment[data-focused]{
4307
- color:var(--t-text-color-inverted);
4308
- outline:0;
4309
- background:var(--t-fill-color-interaction);
4330
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
4331
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4332
+ outline-offset:var(--t-focus-ring-offset);
4310
4333
  }
4311
4334
 
4312
- .tds-time-field-segment-separator{
4313
- padding-inline:0;
4314
- color:var(--tds-time-field-placeholder-color);
4335
+ .tds-date-picker-calendar{
4336
+ font-size:var(--tds-date-picker-popover-font-size);
4337
+ inline-size:-moz-fit-content;
4338
+ inline-size:fit-content;
4315
4339
  }
4316
4340
 
4317
- .tds-time-field-description{
4341
+ .tds-date-picker-calendar-body{
4342
+ position:relative;
4343
+ padding:var(--tds-date-picker-popover-padding);
4344
+ padding-block-start:0;
4345
+ }
4346
+
4347
+ .tds-date-picker-calendar-header{
4318
4348
  display:flex;
4319
- gap:var(--t-spacing-half);
4320
- align-items:flex-start;
4321
- margin:0;
4322
- font-size:var(--t-font-size-sm);
4323
- line-height:1.35;
4324
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4325
- cursor:text;
4349
+ align-items:center;
4350
+ justify-content:space-between;
4351
+ padding:var(--tds-date-picker-popover-padding);
4326
4352
  }
4327
4353
 
4328
- .tds-time-field-description .tds-time-field-description-invalid-icon{
4329
- display:var(--tds-time-field-description-invalid-icon-display, none);
4330
- flex-shrink:0;
4331
- margin-block-start:calc(.5lh - .5em);
4332
- line-height:1.35;
4333
- }
4354
+ .tds-date-picker-calendar-title{
4355
+ padding:var(--t-spacing-half) var(--t-spacing-1);
4356
+ font-size:var(--tds-date-picker-popover-font-size);
4357
+ font-weight:var(--t-font-weight-semibold);
4358
+ }
4334
4359
 
4335
- .tds-number-stepper{
4336
- --tds-number-stepper-border-color:var(--t-form-border-color);
4337
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4338
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4339
- --tds-number-stepper-background-color:var(--t-form-background-color);
4340
- --tds-number-stepper-color:var(--t-form-color);
4341
- --tds-number-stepper-font-size:var(--t-font-size-md);
4342
- --tds-number-stepper-min-height:var(--t-container-size-md);
4343
- --tds-number-stepper-padding-block:6px;
4344
- --tds-number-stepper-button-offset:4px;
4345
- --tds-number-stepper-button-gap:2px;
4346
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
4347
- --tds-number-stepper-description-invalid-icon-display:none;
4360
+ .tds-date-picker-calendar-title--visually-hidden{
4361
+ position:absolute;
4362
+ inline-size:1px;
4363
+ block-size:1px;
4364
+ padding:0;
4365
+ margin:-1px;
4366
+ overflow:hidden;
4367
+ white-space:nowrap;
4368
+ border:0;
4369
+ clip-path:inset(50%);
4370
+ }
4348
4371
 
4349
- position:relative;
4372
+ .tds-date-picker-calendar-nav{
4373
+ font-size:var(--tds-date-picker-popover-font-size);
4350
4374
  display:flex;
4351
- flex-direction:column;
4352
- gap:var(--t-spacing-half);
4375
+ align-items:center;
4376
+ justify-content:center;
4377
+ padding:var(--t-spacing-half);
4378
+ color:var(--t-text-color);
4379
+ cursor:default;
4380
+ outline:0;
4381
+ background:transparent;
4382
+ border:0;
4383
+ border-radius:var(--t-border-radius-md);
4384
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4385
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
4386
+ transition-property:var(--tds-date-picker-popover-interactive-property);
4353
4387
  }
4354
4388
 
4355
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4356
- margin-left:.25ch;
4357
- color:var(--t-text-color-status-error);
4358
- content:"*";
4389
+ .tds-date-picker-calendar-nav[data-hovered]{
4390
+ background:var(--t-fill-color-button-neutral-outline-hover);
4359
4391
  }
4360
4392
 
4361
- .tds-number-stepper[data-invalid]{
4362
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
4363
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4364
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4365
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
4366
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
4367
- --tds-number-stepper-description-invalid-icon-display:inline-block;
4393
+ .tds-date-picker-calendar-nav[data-pressed]{
4394
+ background:var(--t-fill-color-button-neutral-outline-active);
4368
4395
  }
4369
4396
 
4370
- .tds-number-stepper[data-disabled]{
4371
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4372
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4373
- --tds-number-stepper-color:var(--t-form-color-disabled);
4397
+ .tds-date-picker-calendar-nav[data-focus-visible]{
4398
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4399
+ outline-offset:var(--t-focus-ring-offset);
4374
4400
  }
4375
4401
 
4376
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4377
- cursor:not-allowed;
4378
- }
4402
+ .tds-date-picker-calendar-nav[data-disabled]{
4403
+ color:var(--t-text-color-disabled);
4404
+ cursor:not-allowed;
4405
+ }
4379
4406
 
4380
- .tds-number-stepper--lg{
4381
- --tds-number-stepper-min-height:var(--t-container-size-lg);
4382
- --tds-number-stepper-font-size:var(--t-font-size-lg);
4383
- --tds-number-stepper-button-offset:5px;
4384
- --tds-number-stepper-button-gap:4px;
4407
+ .tds-date-picker-calendar-nav svg{
4408
+ transform:scale(0.875);
4385
4409
  }
4386
4410
 
4387
- .tds-number-stepper-label{
4388
- font-size:var(--t-font-size-md);
4389
- font-weight:var(--t-font-weight-normal);
4390
- color:var(--t-text-color);
4391
- cursor:default;
4411
+ .tds-date-picker-calendar-nav--lg svg{
4412
+ transform:scale(1);
4392
4413
  }
4393
4414
 
4394
- .tds-number-stepper-field{
4415
+ .tds-date-picker-calendar-grid{
4416
+ border-collapse:collapse;
4417
+ }
4418
+
4419
+ .tds-date-picker-calendar-header-cell{
4420
+ padding-block:var(--t-spacing-half);
4421
+ font-size:0.875em;
4422
+ font-weight:var(--t-font-weight-medium);
4423
+ color:var(--t-text-color-secondary);
4424
+ text-align:center;
4425
+ }
4426
+
4427
+ .tds-date-picker-calendar-cell{
4395
4428
  display:flex;
4396
- gap:var(--tds-number-stepper-button-gap);
4397
4429
  align-items:center;
4398
- inline-size:100%;
4399
- min-block-size:var(--tds-number-stepper-min-height);
4400
- font-family:inherit;
4401
- font-size:var(--tds-number-stepper-font-size);
4402
- line-height:1;
4403
- color:var(--tds-number-stepper-color);
4404
- -webkit-appearance:none;
4405
- -moz-appearance:none;
4406
- appearance:none;
4430
+ justify-content:center;
4431
+ inline-size:2.25em;
4432
+ block-size:2.25em;
4433
+ color:var(--t-text-color);
4407
4434
  cursor:default;
4408
- outline:var(--t-focus-ring-width) solid transparent;
4409
- outline-offset:0;
4410
- background-color:var(--tds-number-stepper-background-color);
4411
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4412
- border-radius:var(--t-form-border-radius);
4435
+ outline:0;
4436
+ border:2px solid transparent;
4437
+ border-radius:var(--t-border-radius-md);
4438
+ position:relative;
4439
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4440
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
4441
+ transition-property:var(--tds-date-picker-popover-interactive-property);
4413
4442
  }
4414
4443
 
4415
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4416
- border-color:var(--tds-number-stepper-border-color-hover);
4444
+ .tds-date-picker-calendar-cell[data-today]{
4445
+ border-radius:50%;
4446
+ border-color:var(--t-border-color);
4417
4447
  }
4418
4448
 
4419
- .tds-number-stepper-field[data-focus-within]{
4420
- outline-color:var(--t-focus-ring-color);
4421
- outline-offset:var(--t-focus-ring-offset);
4422
- border-color:var(--tds-number-stepper-border-color-active);
4449
+ .tds-date-picker-calendar-cell[data-outside-month]{
4450
+ color:var(--t-text-color-secondary);
4423
4451
  }
4424
4452
 
4425
- .tds-number-stepper-field:has([readonly]){
4426
- --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
4427
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
4428
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4453
+ .tds-date-picker-calendar-cell[data-hovered]{
4454
+ background:var(--t-fill-color-button-neutral-outline-hover);
4429
4455
  }
4430
4456
 
4431
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
4432
- border-color:var(--t-form-border-color-hover);
4433
- }
4434
-
4435
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
4436
- display:none;
4437
- }
4457
+ .tds-date-picker-calendar-cell[data-pressed]{
4458
+ background:var(--t-fill-color-button-neutral-outline-active);
4459
+ }
4438
4460
 
4439
- .tds-number-stepper-input{
4440
- display:flex;
4441
- flex:1;
4442
- align-items:center;
4443
- min-inline-size:0;
4444
- padding-block:var(--tds-number-stepper-padding-block);
4445
- padding-inline:var(--t-spacing-1);
4446
- font-family:inherit;
4447
- font-size:inherit;
4448
- color:inherit;
4449
- outline:0;
4450
- background:transparent;
4451
- border:0;
4452
- }
4461
+ .tds-date-picker-calendar-cell[data-selected]{
4462
+ font-weight:var(--t-font-weight-semibold);
4463
+ color:var(--t-text-color-inverted);
4464
+ background:var(--t-fill-color-interaction);
4465
+ border-color:transparent;
4466
+ }
4453
4467
 
4454
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4455
- margin:0;
4456
- -webkit-appearance:none;
4457
- appearance:none;
4468
+ .tds-date-picker-calendar-cell[data-unavailable]{
4469
+ color:var(--t-text-color-disabled);
4470
+ text-decoration:line-through;
4471
+ cursor:not-allowed;
4458
4472
  }
4459
4473
 
4460
- .tds-number-stepper-button{
4461
- flex-shrink:0;
4462
- align-self:center;
4463
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4464
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4465
- padding:0;
4466
- }
4474
+ .tds-date-picker-calendar-cell[data-disabled]{
4475
+ color:var(--t-text-color-disabled);
4476
+ cursor:not-allowed;
4477
+ }
4467
4478
 
4468
- .tds-number-stepper-button:last-of-type{
4469
- margin-inline-end:var(--tds-number-stepper-button-offset);
4479
+ .tds-date-picker-calendar-cell[data-focus-visible]{
4480
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4481
+ outline-offset:-2px;
4470
4482
  }
4471
4483
 
4472
- .tds-number-stepper-description{
4473
- display:flex;
4474
- gap:var(--t-spacing-half);
4475
- align-items:flex-start;
4476
- margin:0;
4477
- font-size:var(--t-font-size-sm);
4478
- line-height:1.35;
4479
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4480
- cursor:text;
4481
- }
4484
+ .tds-date-picker-calendar-cell[data-focus-visible][data-selected]{
4485
+ outline-offset:var(--t-focus-ring-offset);
4486
+ }
4482
4487
 
4483
- .tds-number-stepper-description-invalid-icon{
4484
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
4485
- flex-shrink:0;
4486
- margin-block-start:calc(.5lh - .5em);
4487
- line-height:1.35;
4488
+ .tds-date-picker-popover--lg{
4489
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
4488
4490
  }
4489
4491
 
4490
4492
  .t-banner{