@planningcenter/tapestry 3.2.1 → 3.2.2-qa-801.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +3 -0
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +613 -610
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +613 -610
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/unstable.css +3 -0
  8. package/dist/unstable.css.map +1 -1
  9. package/package.json +5 -5
package/dist/reactRender.css CHANGED
@@ -1,3 +1,197 @@
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
+
1
195
 
2
196
  @media (prefers-reduced-motion: no-preference){
3
197
 
@@ -638,6 +832,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
638
832
  .tds-input--auto-width{
639
833
  inline-size:-moz-fit-content;
640
834
  inline-size:fit-content;
835
+ min-inline-size:min(100%, 122px);
641
836
  }
642
837
 
643
838
  .tds-input--auto-width input{
@@ -646,332 +841,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
646
841
  }
647
842
  }
648
843
 
649
- .tds-radio{
650
- --tds-radio-font-size:var(--t-font-size-md);
651
- --tds-radio-cursor:pointer;
652
- --tds-radio-line-height:1.4;
653
- --tds-radio-transition-property:border-width;
654
-
655
- --tds-radio-input-size:var(--t-element-size-md);
656
- --tds-radio-input-border-radius:var(--t-border-radius-round);
657
- --tds-radio-input-border-color:var(--t-form-border-color);
658
- --tds-radio-input-border-width:var(--t-form-border-width);
659
- --tds-radio-input-background-color:transparent;
660
-
661
- --tds-radio-label-color:var(--t-form-color);
844
+ .tds-input:has(textarea){
845
+ --tds-input-padding-block:6px;
846
+ --tds-input-resizer-size:var(--t-element-size-sm);
847
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
848
+ }
662
849
 
663
- --tds-radio-description-font-size:var(--t-font-size-sm);
664
- --tds-radio-description-line-height:1.35;
665
- --tds-radio-description-color:var(--t-text-color-secondary);
850
+ @supports (x: attr(x type(*))){
666
851
 
667
- position:relative;
668
- display:inline-grid;
669
- grid-template-columns:auto;
670
- grid-auto-columns:1fr;
671
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
672
- line-height:var(--tds-radio-line-height);
673
- cursor:var(--tds-radio-cursor);
674
- -webkit-user-select:none;
675
- -moz-user-select:none;
676
- user-select:none;
852
+ .tds-input:has(textarea){
853
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
677
854
  }
678
-
679
- .tds-radio label{
680
- grid-area:1 / 2;
681
- font-size:var(--tds-radio-font-size);
682
- font-weight:var(--t-font-weight-normal);
683
- color:var(--tds-radio-label-color);
684
- cursor:var(--tds-radio-cursor);
685
855
  }
686
856
 
687
- .tds-radio input[type="radio"]{
688
- position:relative;
689
- width:1em;
690
- height:1em;
691
- margin:calc((1lh - 1em) / 2) 0 0;
692
- font-size:var(--tds-radio-font-size);
693
- line-height:inherit;
694
- -webkit-appearance:none;
695
- -moz-appearance:none;
696
- appearance:none;
697
- cursor:var(--tds-radio-cursor);
698
- background-color:var(--tds-radio-input-background-color);
699
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
700
- border-radius:var(--tds-radio-input-border-radius);
701
- transition-timing-function:var(--t-ease-in-out);
702
- transition-duration:var(--t-duration-200);
703
- transition-property:var(--tds-radio-transition-property);
704
- }
857
+ .tds-input.tds-textarea--resize-vertical textarea{
858
+ resize:vertical;
859
+ }
705
860
 
706
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
707
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
708
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
709
- }
710
-
711
- :is(.tds-radio input[type="radio"]):focus-visible{
712
- outline:var(--t-focus-ring-outline);
713
- outline-offset:var(--t-focus-ring-offset);
714
- }
715
-
716
- :is(.tds-radio input[type="radio"]):disabled{
717
- pointer-events:none;
718
- }
719
-
720
- @media (prefers-reduced-motion: reduce){
721
-
722
- .tds-radio input[type="radio"]{
723
- --tds-radio-transition-property:none;
724
- }
725
- }
726
-
727
- .tds-radio:has(input:checked){
728
- --tds-radio-input-background-color:var(--t-form-background-color);
729
- --tds-radio-input-border-color:var(--t-border-color-control-info);
730
- --tds-radio-input-border-width:4px;
731
- }
732
-
733
- .tds-radio:has(input:checked) input:hover:not(:disabled){
734
- --tds-radio-input-background-color:var(--t-form-background-color);
735
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
861
+ .tds-input.tds-textarea--resize-none textarea{
862
+ resize:none;
736
863
  }
737
864
 
738
- .tds-radio:has(input:user-invalid){
739
- --tds-radio-input-border-color:var(--t-form-border-color-error);
740
- }
741
-
742
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
743
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
744
- --tds-radio-input-background-color:var(--t-form-background-color-error);
865
+ .tds-input.tds-textarea--resize-auto textarea{
866
+ resize:vertical;
745
867
  }
746
868
 
747
- .tds-radio:has(input:disabled){
748
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
749
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
750
-
751
- --tds-radio-label-color:var(--t-form-color-disabled);
752
- --tds-radio-description-color:var(--t-form-color-disabled);
753
- --tds-radio-cursor:not-allowed;
754
- }
755
-
756
- .tds-radio:has(input:disabled) input:checked{
757
- --tds-radio-input-background-color:var(--t-form-background-color);
758
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
869
+ @supports (field-sizing: content){
870
+ .tds-input.tds-textarea--resize-auto textarea{
871
+ field-sizing:content;
872
+ resize:none;
873
+ }
759
874
  }
760
875
 
761
- .tds-radio-description{
762
- display:flex;
763
- grid-area:2 / 2;
764
- gap:var(--t-spacing-half);
765
- align-items:flex-start;
766
- margin:0;
767
- font-size:var(--tds-radio-description-font-size);
768
- line-height:var(--tds-radio-description-line-height);
769
- color:var(--tds-radio-description-color);
770
- cursor:text;
771
- }
772
-
773
- .tds-radio--sm{
774
- --tds-radio-line-height:1.35;
775
- --tds-radio-input-size:var(--t-element-size-sm);
776
- --tds-radio-font-size:var(--t-font-size-sm);
777
- --tds-radio-description-font-size:var(--t-font-size-xs);
778
- --tds-radio-description-line-height:1.3;
779
- }
780
-
781
- .tds-checkbox{
782
- --tds-checkbox-font-size:var(--t-font-size-md);
783
- --tds-checkbox-cursor:pointer;
784
- --tds-checkbox-line-height:1.4;
785
- --tds-checkbox-transition-property:background-color, border-color;
786
-
787
- --tds-checkbox-input-size:var(--t-element-size-md);
788
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
789
- --tds-checkbox-input-border-color:var(--t-form-border-color);
790
- --tds-checkbox-input-background-color:transparent;
791
-
792
- --tds-checkbox-input-icon:none;
793
- --tds-checkbox-input-icon-visibility:hidden;
794
- --tds-checkbox-input-icon-opacity:0;
795
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
796
-
797
- --tds-checkbox-label-color:var(--t-form-color);
798
-
799
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
800
- --tds-checkbox-description-line-height:1.35;
801
- --tds-checkbox-description-color:var(--t-text-color-secondary);
802
- --tds-checkbox-description-invalid-icon-display:none;
803
-
804
- position:relative;
805
- display:inline-grid;
806
- grid-template-columns:auto;
807
- grid-auto-columns:1fr;
808
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
809
- line-height:var(--tds-checkbox-line-height);
810
- cursor:var(--tds-checkbox-cursor);
811
- -webkit-user-select:none;
812
- -moz-user-select:none;
813
- user-select:none;
876
+ .tds-input textarea{
877
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
878
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
879
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
880
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
881
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
882
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
883
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
884
+ --tds-input-scrollbar-thumb-border-radius:999px;
885
+ --tds-input-scrollbar-thumb-border-width:3px;
886
+ --tds-input-scrollbar-track-margin-block:.125rem;
887
+ scrollbar-color:initial;
888
+ transition-timing-function:var(--t-ease-in-out);
889
+ transition-duration:var(--t-duration-200);
890
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
814
891
  }
815
892
 
816
- .tds-checkbox label{
817
- grid-area:1 / 2;
818
- font-size:var(--tds-checkbox-font-size);
819
- font-weight:var(--t-font-weight-normal);
820
- color:var(--tds-checkbox-label-color);
821
- cursor:var(--tds-checkbox-cursor);
822
- }
823
-
824
- .tds-checkbox tds-indeterminate{
825
- display:flex;
826
- }
827
-
828
- .tds-checkbox input[type="checkbox"]{
829
- position:relative;
830
- width:1em;
831
- height:1em;
832
- margin:calc((1lh - 1em) / 2) 0 0;
833
- font-size:var(--tds-checkbox-font-size);
834
- line-height:inherit;
835
- -webkit-appearance:none;
836
- -moz-appearance:none;
837
- appearance:none;
838
- cursor:var(--tds-checkbox-cursor);
839
- background-color:var(--tds-checkbox-input-background-color);
840
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
841
- border-radius:var(--tds-checkbox-input-border-radius);
842
- transition-timing-function:var(--t-ease-in-out);
843
- transition-duration:var(--t-duration-200);
844
- transition-property:var(--tds-checkbox-transition-property);
845
- }
846
-
847
- :is(.tds-checkbox input[type="checkbox"])::before{
848
- position:absolute;
849
- top:50%;
850
- left:50%;
851
- visibility:var(--tds-checkbox-input-icon-visibility);
852
- width:100%;
853
- height:100%;
854
- content:"";
855
- background-color:var(--tds-checkbox-input-icon-fill);
856
- border-radius:var(--tds-checkbox-input-border-radius);
857
- opacity:var(--tds-checkbox-input-icon-opacity);
858
- -webkit-mask-image:var(--tds-checkbox-input-icon);
859
- mask-image:var(--tds-checkbox-input-icon);
860
- -webkit-mask-repeat:no-repeat;
861
- mask-repeat:no-repeat;
862
- -webkit-mask-size:contain;
863
- mask-size:contain;
864
- transform:translate(-50%, -50%);
893
+ @media (pointer: fine){
894
+ :is(.tds-input textarea)::-webkit-scrollbar{
895
+ width:12px;
896
+ height:12px;
897
+ cursor:default;
865
898
  }
866
899
 
867
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
868
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
869
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
900
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
901
+ cursor:default;
902
+ background:var(--tds-input-scrollbar-thumb-color);
903
+ background-clip:content-box;
904
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
905
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
870
906
  }
871
907
 
872
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
873
- outline:var(--t-focus-ring-outline);
874
- outline-offset:var(--t-focus-ring-offset);
908
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
909
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
875
910
  }
876
911
 
877
- :is(.tds-checkbox input[type="checkbox"]):disabled{
878
- pointer-events:none;
912
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
913
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
879
914
  }
880
915
 
881
- @media (prefers-reduced-motion: reduce){
882
-
883
- .tds-checkbox input[type="checkbox"]{
884
- --tds-checkbox-transition-property:none;
885
- }
916
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
917
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
886
918
  }
887
919
 
888
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
889
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
890
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
891
- --tds-checkbox-input-icon-visibility:visible;
892
- --tds-checkbox-input-icon-opacity:1;
893
- }
894
-
895
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
896
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
897
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
920
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
921
+ background:var(--tds-input-scrollbar-surface-color);
898
922
  }
899
923
 
900
- .tds-checkbox:has(input:checked){
901
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
902
- }
903
-
904
- .tds-checkbox:has(input:indeterminate){
905
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
906
- }
907
-
908
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
909
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
910
- --tds-checkbox-description-color:var(--t-text-color-status-error);
911
- --tds-checkbox-description-invalid-icon-display:inline-block;
912
- }
913
-
914
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
915
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
916
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
924
+ :is(.tds-input textarea)::-webkit-resizer{
925
+ background:var(--tds-input-resizer-icon) no-repeat;
926
+ background-position:right bottom;
927
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
917
928
  }
918
929
 
919
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
920
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
921
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
930
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
931
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
932
+ cursor:default;
922
933
  }
923
934
 
924
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
925
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
926
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
935
+ @supports (-moz-appearance: none){
936
+ :is(.tds-input textarea){
937
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
938
+ scrollbar-width:thin;
927
939
  }
928
940
 
929
- .tds-checkbox:has(input:required) label::after{
930
- margin-left:.25ch;
931
- color:var(--t-text-color-status-error);
932
- content:"*";
941
+ @media (hover){
942
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
943
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
944
+ }
945
+ }
933
946
  }
934
-
935
- .tds-checkbox:has(input:disabled){
936
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
937
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
938
-
939
- --tds-checkbox-label-color:var(--t-form-color-disabled);
940
- --tds-checkbox-description-color:var(--t-form-color-disabled);
941
- --tds-checkbox-cursor:not-allowed;
942
947
  }
943
948
 
944
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
945
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
946
- }
947
-
948
- .tds-checkbox-description{
949
- display:flex;
950
- grid-area:2 / 2;
951
- gap:var(--t-spacing-half);
952
- align-items:flex-start;
953
- margin:0;
954
- font-size:var(--tds-checkbox-description-font-size);
955
- line-height:var(--tds-checkbox-description-line-height);
956
- color:var(--tds-checkbox-description-color);
957
- cursor:text;
958
- }
959
-
960
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
961
- display:var(--tds-checkbox-description-invalid-icon-display);
962
- flex-shrink:0;
963
- margin-top:calc(.5lh - .5em);
964
- line-height:var(--tds-checkbox-description-line-height);
965
- }
966
-
967
- .tds-checkbox--sm{
968
- --tds-checkbox-line-height:1.35;
969
- --tds-checkbox-input-size:var(--t-element-size-sm);
970
- --tds-checkbox-font-size:var(--t-font-size-sm);
971
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
972
- --tds-checkbox-description-line-height:1.3;
973
- }
974
-
975
949
  .tds-radio-group{
976
950
  --tds-radio-group-font-size:var(--t-font-size-md);
977
951
  --tds-radio-group-line-height:1.4;
@@ -1200,110 +1174,137 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1200
1174
  --tds-toggle-switch-display:inline-flex;
1201
1175
  }
1202
1176
 
1203
- .tds-input:has(textarea){
1204
- --tds-input-padding-block:6px;
1205
- --tds-input-resizer-size:var(--t-element-size-sm);
1206
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1207
- }
1177
+ .tds-radio{
1178
+ --tds-radio-font-size:var(--t-font-size-md);
1179
+ --tds-radio-cursor:pointer;
1180
+ --tds-radio-line-height:1.4;
1181
+ --tds-radio-transition-property:border-width;
1208
1182
 
1209
- @supports (x: attr(x type(*))){
1183
+ --tds-radio-input-size:var(--t-element-size-md);
1184
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
1185
+ --tds-radio-input-border-color:var(--t-form-border-color);
1186
+ --tds-radio-input-border-width:var(--t-form-border-width);
1187
+ --tds-radio-input-background-color:transparent;
1210
1188
 
1211
- .tds-input:has(textarea){
1212
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1189
+ --tds-radio-label-color:var(--t-form-color);
1190
+
1191
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1192
+ --tds-radio-description-line-height:1.35;
1193
+ --tds-radio-description-color:var(--t-text-color-secondary);
1194
+
1195
+ position:relative;
1196
+ display:inline-grid;
1197
+ grid-template-columns:auto;
1198
+ grid-auto-columns:1fr;
1199
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1200
+ line-height:var(--tds-radio-line-height);
1201
+ cursor:var(--tds-radio-cursor);
1202
+ -webkit-user-select:none;
1203
+ -moz-user-select:none;
1204
+ user-select:none;
1213
1205
  }
1206
+
1207
+ .tds-radio label{
1208
+ grid-area:1 / 2;
1209
+ font-size:var(--tds-radio-font-size);
1210
+ font-weight:var(--t-font-weight-normal);
1211
+ color:var(--tds-radio-label-color);
1212
+ cursor:var(--tds-radio-cursor);
1214
1213
  }
1215
1214
 
1216
- .tds-input.tds-textarea--resize-vertical textarea{
1217
- resize:vertical;
1218
- }
1215
+ .tds-radio input[type="radio"]{
1216
+ position:relative;
1217
+ width:1em;
1218
+ height:1em;
1219
+ margin:calc((1lh - 1em) / 2) 0 0;
1220
+ font-size:var(--tds-radio-font-size);
1221
+ line-height:inherit;
1222
+ -webkit-appearance:none;
1223
+ -moz-appearance:none;
1224
+ appearance:none;
1225
+ cursor:var(--tds-radio-cursor);
1226
+ background-color:var(--tds-radio-input-background-color);
1227
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1228
+ border-radius:var(--tds-radio-input-border-radius);
1229
+ transition-timing-function:var(--t-ease-in-out);
1230
+ transition-duration:var(--t-duration-200);
1231
+ transition-property:var(--tds-radio-transition-property);
1232
+ }
1219
1233
 
1220
- .tds-input.tds-textarea--resize-none textarea{
1221
- resize:none;
1234
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1235
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1236
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1222
1237
  }
1223
1238
 
1224
- .tds-input.tds-textarea--resize-auto textarea{
1225
- resize:vertical;
1239
+ :is(.tds-radio input[type="radio"]):focus-visible{
1240
+ outline:var(--t-focus-ring-outline);
1241
+ outline-offset:var(--t-focus-ring-offset);
1226
1242
  }
1227
1243
 
1228
- @supports (field-sizing: content){
1229
- .tds-input.tds-textarea--resize-auto textarea{
1230
- field-sizing:content;
1231
- resize:none;
1232
- }
1244
+ :is(.tds-radio input[type="radio"]):disabled{
1245
+ pointer-events:none;
1233
1246
  }
1234
1247
 
1235
- .tds-input textarea{
1236
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1237
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1238
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1239
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1240
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1241
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1242
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1243
- --tds-input-scrollbar-thumb-border-radius:999px;
1244
- --tds-input-scrollbar-thumb-border-width:3px;
1245
- --tds-input-scrollbar-track-margin-block:.125rem;
1246
- scrollbar-color:initial;
1247
- transition-timing-function:var(--t-ease-in-out);
1248
- transition-duration:var(--t-duration-200);
1249
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1250
- }
1248
+ @media (prefers-reduced-motion: reduce){
1251
1249
 
1252
- @media (pointer: fine){
1253
- :is(.tds-input textarea)::-webkit-scrollbar{
1254
- width:12px;
1255
- height:12px;
1256
- cursor:default;
1250
+ .tds-radio input[type="radio"]{
1251
+ --tds-radio-transition-property:none;
1252
+ }
1257
1253
  }
1258
1254
 
1259
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1260
- cursor:default;
1261
- background:var(--tds-input-scrollbar-thumb-color);
1262
- background-clip:content-box;
1263
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1264
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1265
- }
1255
+ .tds-radio:has(input:checked){
1256
+ --tds-radio-input-background-color:var(--t-form-background-color);
1257
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1258
+ --tds-radio-input-border-width:4px;
1259
+ }
1266
1260
 
1267
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1268
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1261
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1262
+ --tds-radio-input-background-color:var(--t-form-background-color);
1263
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1269
1264
  }
1270
1265
 
1271
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1272
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1273
- }
1266
+ .tds-radio:has(input:user-invalid){
1267
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1268
+ }
1274
1269
 
1275
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1276
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1270
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1271
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1272
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1277
1273
  }
1278
1274
 
1279
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1280
- background:var(--tds-input-scrollbar-surface-color);
1281
- }
1275
+ .tds-radio:has(input:disabled){
1276
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1277
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1282
1278
 
1283
- :is(.tds-input textarea)::-webkit-resizer{
1284
- background:var(--tds-input-resizer-icon) no-repeat;
1285
- background-position:right bottom;
1286
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1287
- }
1279
+ --tds-radio-label-color:var(--t-form-color-disabled);
1280
+ --tds-radio-description-color:var(--t-form-color-disabled);
1281
+ --tds-radio-cursor:not-allowed;
1282
+ }
1288
1283
 
1289
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1290
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1291
- cursor:default;
1284
+ .tds-radio:has(input:disabled) input:checked{
1285
+ --tds-radio-input-background-color:var(--t-form-background-color);
1286
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1292
1287
  }
1293
1288
 
1294
- @supports (-moz-appearance: none){
1295
- :is(.tds-input textarea){
1296
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1297
- scrollbar-width:thin;
1298
- }
1289
+ .tds-radio-description{
1290
+ display:flex;
1291
+ grid-area:2 / 2;
1292
+ gap:var(--t-spacing-half);
1293
+ align-items:flex-start;
1294
+ margin:0;
1295
+ font-size:var(--tds-radio-description-font-size);
1296
+ line-height:var(--tds-radio-description-line-height);
1297
+ color:var(--tds-radio-description-color);
1298
+ cursor:text;
1299
+ }
1299
1300
 
1300
- @media (hover){
1301
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1302
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1303
- }
1304
- }
1305
- }
1306
- }
1301
+ .tds-radio--sm{
1302
+ --tds-radio-line-height:1.35;
1303
+ --tds-radio-input-size:var(--t-element-size-sm);
1304
+ --tds-radio-font-size:var(--t-font-size-sm);
1305
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1306
+ --tds-radio-description-line-height:1.3;
1307
+ }
1307
1308
 
1308
1309
  .tds-select{
1309
1310
  --tds-select-border-color:var(--t-form-border-color);
@@ -1615,6 +1616,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1615
1616
  overflow:auto;
1616
1617
  overflow-x:hidden;
1617
1618
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1619
+ overscroll-behavior:none;
1618
1620
  -webkit-user-select:none;
1619
1621
  -moz-user-select:none;
1620
1622
  user-select:none;
@@ -1711,6 +1713,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1711
1713
  overflow:auto;
1712
1714
  overflow-x:hidden;
1713
1715
  scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1716
+ overscroll-behavior:none;
1714
1717
  -webkit-user-select:none;
1715
1718
  -moz-user-select:none;
1716
1719
  user-select:none;
@@ -3320,6 +3323,84 @@ a[class="tds-btn"]{
3320
3323
  @media (prefers-color-scheme: dark){
3321
3324
  }
3322
3325
 
3326
+ .tds-checkbox-group{
3327
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3328
+ --tds-checkbox-group-line-height:1.4;
3329
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3330
+
3331
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3332
+
3333
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3334
+ --tds-checkbox-group-description-line-height:1.35;
3335
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3336
+ --tds-checkbox-group-description-invalid-icon-display:none;
3337
+ display:flex;
3338
+ flex-direction:column;
3339
+ gap:var(--tds-checkbox-group-gap);
3340
+ padding:0;
3341
+ margin:0;
3342
+
3343
+ font-size:var(--tds-checkbox-group-font-size);
3344
+ line-height:var(--tds-checkbox-group-line-height);
3345
+ border:0;
3346
+ }
3347
+
3348
+ .tds-checkbox-group legend{
3349
+ padding:0;
3350
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3351
+ }
3352
+
3353
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3354
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3355
+ }
3356
+
3357
+ .tds-checkbox-group[aria-invalid="true"]{
3358
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3359
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3360
+ }
3361
+
3362
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3363
+ margin-left:.25ch;
3364
+ color:var(--t-text-color-status-error);
3365
+ content:"*";
3366
+ }
3367
+
3368
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3369
+ content:none;
3370
+ }
3371
+
3372
+ .tds-checkbox-group-fields{
3373
+ display:flex;
3374
+ flex-direction:column;
3375
+ gap:var(--tds-checkbox-group-gap);
3376
+ align-items:flex-start;
3377
+ }
3378
+
3379
+ .tds-checkbox-group-description{
3380
+ display:flex;
3381
+ gap:var(--t-spacing-half);
3382
+ align-items:flex-start;
3383
+ margin:0;
3384
+ font-size:var(--tds-checkbox-group-description-font-size);
3385
+ line-height:var(--tds-checkbox-group-description-line-height);
3386
+ color:var(--tds-checkbox-group-description-color);
3387
+ cursor:text;
3388
+ }
3389
+
3390
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3391
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3392
+ flex-shrink:0;
3393
+ margin-top:calc(.5lh - .5em);
3394
+ line-height:var(--tds-checkbox-group-description-line-height);
3395
+ }
3396
+
3397
+ .tds-checkbox-group--sm{
3398
+ --tds-checkbox-group-line-height:1.35;
3399
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3400
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3401
+ --tds-checkbox-group-description-line-height:1.3;
3402
+ }
3403
+
3323
3404
  .tds-combo-box{
3324
3405
  --tds-combo-box-border-color:var(--t-form-border-color);
3325
3406
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -3576,27 +3657,180 @@ a[class="tds-btn"]{
3576
3657
  margin-block-start:var(--t-spacing-half);
3577
3658
  }
3578
3659
 
3579
- .tds-combo-box-section-header{
3580
- padding-block:var(--t-spacing-1);
3581
- padding-inline:var(--t-spacing-1);
3582
- font-size:var(--t-font-size-sm);
3583
- font-weight:var(--t-font-weight-semibold);
3584
- color:var(--t-text-color-secondary);
3660
+ .tds-combo-box-section-header{
3661
+ padding-block:var(--t-spacing-1);
3662
+ padding-inline:var(--t-spacing-1);
3663
+ font-size:var(--t-font-size-sm);
3664
+ font-weight:var(--t-font-weight-semibold);
3665
+ color:var(--t-text-color-secondary);
3666
+ }
3667
+
3668
+ .tds-combo-box-description{
3669
+ display:flex;
3670
+ gap:var(--t-spacing-half);
3671
+ align-items:flex-start;
3672
+ margin:0;
3673
+ font-size:var(--t-font-size-sm);
3674
+ line-height:1.35;
3675
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3676
+ cursor:text;
3677
+ }
3678
+
3679
+ .tds-combo-box-description-invalid-icon{
3680
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3681
+ flex-shrink:0;
3682
+ margin-block-start:calc(.5lh - .5em);
3683
+ line-height:1.35;
3684
+ }
3685
+
3686
+ .tds-number-stepper{
3687
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3688
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3689
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3690
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3691
+ --tds-number-stepper-color:var(--t-form-color);
3692
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3693
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3694
+ --tds-number-stepper-padding-block:6px;
3695
+ --tds-number-stepper-button-offset:4px;
3696
+ --tds-number-stepper-button-gap:2px;
3697
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3698
+ --tds-number-stepper-description-invalid-icon-display:none;
3699
+
3700
+ position:relative;
3701
+ display:flex;
3702
+ flex-direction:column;
3703
+ gap:var(--t-spacing-half);
3704
+ }
3705
+
3706
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3707
+ margin-left:.25ch;
3708
+ color:var(--t-text-color-status-error);
3709
+ content:"*";
3710
+ }
3711
+
3712
+ .tds-number-stepper[data-invalid]{
3713
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3714
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3715
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3716
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3717
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3718
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3719
+ }
3720
+
3721
+ .tds-number-stepper[data-disabled]{
3722
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3723
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3724
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3725
+ }
3726
+
3727
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3728
+ color:var(--t-form-color-disabled);
3729
+ }
3730
+
3731
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3732
+ cursor:not-allowed;
3733
+ }
3734
+
3735
+ .tds-number-stepper--lg{
3736
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3737
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3738
+ --tds-number-stepper-button-offset:5px;
3739
+ --tds-number-stepper-button-gap:4px;
3740
+ }
3741
+
3742
+ .tds-number-stepper-label{
3743
+ font-size:var(--t-font-size-md);
3744
+ font-weight:var(--t-font-weight-normal);
3745
+ color:var(--t-text-color);
3746
+ cursor:default;
3747
+ }
3748
+
3749
+ .tds-number-stepper-field{
3750
+ display:flex;
3751
+ gap:var(--tds-number-stepper-button-gap);
3752
+ align-items:center;
3753
+ inline-size:100%;
3754
+ min-block-size:var(--tds-number-stepper-min-height);
3755
+ font-family:inherit;
3756
+ font-size:var(--tds-number-stepper-font-size);
3757
+ line-height:1;
3758
+ color:var(--tds-number-stepper-color);
3759
+ -webkit-appearance:none;
3760
+ -moz-appearance:none;
3761
+ appearance:none;
3762
+ cursor:default;
3763
+ outline:var(--t-focus-ring-width) solid transparent;
3764
+ outline-offset:0;
3765
+ background-color:var(--tds-number-stepper-background-color);
3766
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3767
+ border-radius:var(--t-form-border-radius);
3768
+ }
3769
+
3770
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3771
+ border-color:var(--tds-number-stepper-border-color-hover);
3772
+ }
3773
+
3774
+ .tds-number-stepper-field[data-focus-within]{
3775
+ outline-color:var(--t-focus-ring-color);
3776
+ outline-offset:var(--t-focus-ring-offset);
3777
+ border-color:var(--tds-number-stepper-border-color-active);
3778
+ }
3779
+
3780
+ .tds-number-stepper-field:has([readonly]){
3781
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3782
+ }
3783
+
3784
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3785
+ border-color:var(--t-form-border-color-hover);
3786
+ }
3787
+
3788
+ .tds-number-stepper-input{
3789
+ display:flex;
3790
+ flex:1;
3791
+ align-items:center;
3792
+ min-inline-size:0;
3793
+ padding-block:var(--tds-number-stepper-padding-block);
3794
+ padding-inline:var(--t-spacing-1);
3795
+ font-family:inherit;
3796
+ font-size:inherit;
3797
+ color:inherit;
3798
+ outline:0;
3799
+ background:transparent;
3800
+ border:0;
3801
+ }
3802
+
3803
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3804
+ margin:0;
3805
+ -webkit-appearance:none;
3806
+ appearance:none;
3807
+ }
3808
+
3809
+ .tds-number-stepper-button{
3810
+ flex-shrink:0;
3811
+ align-self:center;
3812
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3813
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3814
+ padding:0;
3585
3815
  }
3586
3816
 
3587
- .tds-combo-box-description{
3817
+ .tds-number-stepper-button:last-of-type{
3818
+ margin-inline-end:var(--tds-number-stepper-button-offset);
3819
+ }
3820
+
3821
+ .tds-number-stepper-description{
3588
3822
  display:flex;
3589
3823
  gap:var(--t-spacing-half);
3590
3824
  align-items:flex-start;
3591
3825
  margin:0;
3592
3826
  font-size:var(--t-font-size-sm);
3593
3827
  line-height:1.35;
3594
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3828
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3595
3829
  cursor:text;
3596
3830
  }
3597
3831
 
3598
- .tds-combo-box-description-invalid-icon{
3599
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3832
+ .tds-number-stepper-description-invalid-icon{
3833
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
3600
3834
  flex-shrink:0;
3601
3835
  margin-block-start:calc(.5lh - .5em);
3602
3836
  line-height:1.35;
@@ -3907,237 +4141,6 @@ a[class="tds-btn"]{
3907
4141
  color:var(--t-text-color-secondary);
3908
4142
  }
3909
4143
 
3910
- .tds-checkbox-group{
3911
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3912
- --tds-checkbox-group-line-height:1.4;
3913
- --tds-checkbox-group-gap:var(--t-spacing-1);
3914
-
3915
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3916
-
3917
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3918
- --tds-checkbox-group-description-line-height:1.35;
3919
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3920
- --tds-checkbox-group-description-invalid-icon-display:none;
3921
- display:flex;
3922
- flex-direction:column;
3923
- gap:var(--tds-checkbox-group-gap);
3924
- padding:0;
3925
- margin:0;
3926
-
3927
- font-size:var(--tds-checkbox-group-font-size);
3928
- line-height:var(--tds-checkbox-group-line-height);
3929
- border:0;
3930
- }
3931
-
3932
- .tds-checkbox-group legend{
3933
- padding:0;
3934
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3935
- }
3936
-
3937
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3938
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3939
- }
3940
-
3941
- .tds-checkbox-group[aria-invalid="true"]{
3942
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3943
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3944
- }
3945
-
3946
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3947
- margin-left:.25ch;
3948
- color:var(--t-text-color-status-error);
3949
- content:"*";
3950
- }
3951
-
3952
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3953
- content:none;
3954
- }
3955
-
3956
- .tds-checkbox-group-fields{
3957
- display:flex;
3958
- flex-direction:column;
3959
- gap:var(--tds-checkbox-group-gap);
3960
- align-items:flex-start;
3961
- }
3962
-
3963
- .tds-checkbox-group-description{
3964
- display:flex;
3965
- gap:var(--t-spacing-half);
3966
- align-items:flex-start;
3967
- margin:0;
3968
- font-size:var(--tds-checkbox-group-description-font-size);
3969
- line-height:var(--tds-checkbox-group-description-line-height);
3970
- color:var(--tds-checkbox-group-description-color);
3971
- cursor:text;
3972
- }
3973
-
3974
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3975
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3976
- flex-shrink:0;
3977
- margin-top:calc(.5lh - .5em);
3978
- line-height:var(--tds-checkbox-group-description-line-height);
3979
- }
3980
-
3981
- .tds-checkbox-group--sm{
3982
- --tds-checkbox-group-line-height:1.35;
3983
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3984
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3985
- --tds-checkbox-group-description-line-height:1.3;
3986
- }
3987
-
3988
- .tds-number-stepper{
3989
- --tds-number-stepper-border-color:var(--t-form-border-color);
3990
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3991
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3992
- --tds-number-stepper-background-color:var(--t-form-background-color);
3993
- --tds-number-stepper-color:var(--t-form-color);
3994
- --tds-number-stepper-font-size:var(--t-font-size-md);
3995
- --tds-number-stepper-min-height:var(--t-container-size-md);
3996
- --tds-number-stepper-padding-block:6px;
3997
- --tds-number-stepper-button-offset:4px;
3998
- --tds-number-stepper-button-gap:2px;
3999
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
4000
- --tds-number-stepper-description-invalid-icon-display:none;
4001
-
4002
- position:relative;
4003
- display:flex;
4004
- flex-direction:column;
4005
- gap:var(--t-spacing-half);
4006
- }
4007
-
4008
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4009
- margin-left:.25ch;
4010
- color:var(--t-text-color-status-error);
4011
- content:"*";
4012
- }
4013
-
4014
- .tds-number-stepper[data-invalid]{
4015
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
4016
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4017
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4018
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
4019
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
4020
- --tds-number-stepper-description-invalid-icon-display:inline-block;
4021
- }
4022
-
4023
- .tds-number-stepper[data-disabled]{
4024
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4025
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4026
- --tds-number-stepper-color:var(--t-form-color-disabled);
4027
- }
4028
-
4029
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4030
- color:var(--t-form-color-disabled);
4031
- }
4032
-
4033
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4034
- cursor:not-allowed;
4035
- }
4036
-
4037
- .tds-number-stepper--lg{
4038
- --tds-number-stepper-min-height:var(--t-container-size-lg);
4039
- --tds-number-stepper-font-size:var(--t-font-size-lg);
4040
- --tds-number-stepper-button-offset:5px;
4041
- --tds-number-stepper-button-gap:4px;
4042
- }
4043
-
4044
- .tds-number-stepper-label{
4045
- font-size:var(--t-font-size-md);
4046
- font-weight:var(--t-font-weight-normal);
4047
- color:var(--t-text-color);
4048
- cursor:default;
4049
- }
4050
-
4051
- .tds-number-stepper-field{
4052
- display:flex;
4053
- gap:var(--tds-number-stepper-button-gap);
4054
- align-items:center;
4055
- inline-size:100%;
4056
- min-block-size:var(--tds-number-stepper-min-height);
4057
- font-family:inherit;
4058
- font-size:var(--tds-number-stepper-font-size);
4059
- line-height:1;
4060
- color:var(--tds-number-stepper-color);
4061
- -webkit-appearance:none;
4062
- -moz-appearance:none;
4063
- appearance:none;
4064
- cursor:default;
4065
- outline:var(--t-focus-ring-width) solid transparent;
4066
- outline-offset:0;
4067
- background-color:var(--tds-number-stepper-background-color);
4068
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4069
- border-radius:var(--t-form-border-radius);
4070
- }
4071
-
4072
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4073
- border-color:var(--tds-number-stepper-border-color-hover);
4074
- }
4075
-
4076
- .tds-number-stepper-field[data-focus-within]{
4077
- outline-color:var(--t-focus-ring-color);
4078
- outline-offset:var(--t-focus-ring-offset);
4079
- border-color:var(--tds-number-stepper-border-color-active);
4080
- }
4081
-
4082
- .tds-number-stepper-field:has([readonly]){
4083
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4084
- }
4085
-
4086
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
4087
- border-color:var(--t-form-border-color-hover);
4088
- }
4089
-
4090
- .tds-number-stepper-input{
4091
- display:flex;
4092
- flex:1;
4093
- align-items:center;
4094
- min-inline-size:0;
4095
- padding-block:var(--tds-number-stepper-padding-block);
4096
- padding-inline:var(--t-spacing-1);
4097
- font-family:inherit;
4098
- font-size:inherit;
4099
- color:inherit;
4100
- outline:0;
4101
- background:transparent;
4102
- border:0;
4103
- }
4104
-
4105
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4106
- margin:0;
4107
- -webkit-appearance:none;
4108
- appearance:none;
4109
- }
4110
-
4111
- .tds-number-stepper-button{
4112
- flex-shrink:0;
4113
- align-self:center;
4114
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4115
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4116
- padding:0;
4117
- }
4118
-
4119
- .tds-number-stepper-button:last-of-type{
4120
- margin-inline-end:var(--tds-number-stepper-button-offset);
4121
- }
4122
-
4123
- .tds-number-stepper-description{
4124
- display:flex;
4125
- gap:var(--t-spacing-half);
4126
- align-items:flex-start;
4127
- margin:0;
4128
- font-size:var(--t-font-size-sm);
4129
- line-height:1.35;
4130
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4131
- cursor:text;
4132
- }
4133
-
4134
- .tds-number-stepper-description-invalid-icon{
4135
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
4136
- flex-shrink:0;
4137
- margin-block-start:calc(.5lh - .5em);
4138
- line-height:1.35;
4139
- }
4140
-
4141
4144
  .tds-time-field{
4142
4145
  --tds-time-field-border-color:var(--t-form-border-color);
4143
4146
  --tds-time-field-border-color-hover:var(--t-form-border-color-hover);