@planningcenter/tapestry 3.2.3-rc.21 → 3.2.3-rc.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +768 -768
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +768 -768
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,3 +1,281 @@
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
5
+ }
6
+
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:transparent;
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
25
+
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
28
+
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
+
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
35
+
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
39
+
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
45
+ }
46
+
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
49
+ }
50
+
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
56
+ }
57
+
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
76
+ }
77
+ }
78
+ }
79
+
80
+ .tds-page-header{
81
+ display:flex;
82
+ flex-direction:column;
83
+ padding-top:var(--tds-page-header-padding-y);
84
+ color:var(--tds-page-header-color);
85
+ background:var(--tds-page-header-background-color);
86
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
87
+ }
88
+
89
+ .tds-page-header:not(.has-nav){
90
+ padding-bottom:var(--tds-page-header-padding-y);
91
+ }
92
+
93
+ .tds-page-header.inactive{
94
+ background:var(--tds-page-header-background-color-inactive);
95
+ }
96
+
97
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
+ width:100%;
99
+ }
100
+
101
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
102
+ display:flex;
103
+ flex-flow:row wrap;
104
+ gap:var(--t-spacing-half) var(--t-spacing-1);
105
+ align-items:flex-start;
106
+ justify-content:flex-start;
107
+ min-width:0;
108
+ }
109
+
110
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
111
+ display:flex;
112
+ gap:var(--tds-page-header-nav-gap);
113
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
+ margin:0 0 -1px;
115
+ overflow:auto;
116
+ list-style:none;
117
+ background:var(--tds-page-header-nav-background);
118
+ }
119
+
120
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
+ position:relative;
122
+ display:inline-flex;
123
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
+ font-size:var(--t-font-size-sm);
125
+ line-height:22px;
126
+ color:var(--tds-page-header-nav-item-color);
127
+ white-space:nowrap;
128
+ text-decoration:none;
129
+ -webkit-appearance:none;
130
+ -moz-appearance:none;
131
+ appearance:none;
132
+ cursor:pointer;
133
+ outline-offset:-2px;
134
+ background-color:var(--tds-page-header-nav-item-background-color);
135
+ background-clip:padding-box;
136
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
+ }
140
+
141
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
146
+ }
147
+
148
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
+ }
154
+
155
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
+ background-color:var(--tds-page-header-nav-item-background-color-active);
157
+ border-color:var(--tds-page-header-nav-item-border-color-active);
158
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
+ }
160
+
161
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
+ color:var(--tds-page-header-nav-item-color-disabled);
164
+ cursor:not-allowed;
165
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
+ opacity:1;
167
+ }
168
+
169
+ @media (min-width: 600px){
170
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
+ position:absolute;
172
+ inset:auto -1px -1px;
173
+ height:1px;
174
+ pointer-events:none;
175
+ content:"";
176
+ background-color:var(--tds-page-header-bottom-border-color);
177
+ }
178
+ }
179
+
180
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
+ position:relative;
182
+ }
183
+
184
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
187
+ }
188
+
189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
190
+ position:absolute;
191
+ top:-5px;
192
+ right:-2px;
193
+ width:10px;
194
+ height:10px;
195
+ content:"";
196
+ background:var(--tds-page-header-nav-item-indicator-color);
197
+ border-radius:50%;
198
+ }
199
+
200
+ @media (prefers-reduced-motion: no-preference){
201
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
+ animation:indicator-pulse 1.25s ease infinite;
203
+ }
204
+ }
205
+
206
+ .tds-page-header__title-bar{
207
+ display:flex;
208
+ flex-direction:column;
209
+ gap:var(--t-spacing-2) var(--t-spacing-1);
210
+ align-items:flex-start;
211
+ justify-content:space-between;
212
+ padding:0 var(--tds-page-header-padding-x);
213
+ }
214
+
215
+ .tds-page-header--profile > .tds-page-header__title-bar{
216
+ align-items:center;
217
+ }
218
+
219
+ .tds-page-header__primary{
220
+ width:100%;
221
+ }
222
+
223
+ .tds-page-header__primary h1{
224
+ margin:0;
225
+ font-size:var(--tds-page-header-headline-font-size);
226
+ font-weight:var(--t-font-weight-normal);
227
+ line-height:32px;
228
+ color:var(--tds-page-header-headline-color);
229
+ overflow-wrap:break-word;
230
+ }
231
+
232
+ @media (min-width: 960px){
233
+ .tds-page-header__primary{
234
+ flex:1 1 max-content;
235
+ width:auto;
236
+ min-width:0;
237
+ max-width:100%;
238
+ }
239
+
240
+ .tds-page-header__title-bar,
241
+ .tds-page-header--profile .tds-page-header__title-bar{
242
+ flex-flow:row nowrap;
243
+ row-gap:12px;
244
+ align-items:flex-start;
245
+ }
246
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
+ width:auto;
248
+ }
249
+
250
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
+ justify-content:flex-end;
252
+ }
253
+ }
254
+
255
+ .tds-page-header-phone,
256
+ .tds-page-header-email{
257
+ color:var(--tds-page-header-color);
258
+ white-space:nowrap;
259
+ }
260
+
261
+ .tds-page-header-email{
262
+ max-width:100%;
263
+ overflow:hidden;
264
+ text-overflow:ellipsis;
265
+ }
266
+
267
+ @keyframes indicator-pulse{
268
+ 0%{
269
+ opacity:.3;
270
+ transform:scale(.9);
271
+ }
272
+
273
+ 100%{
274
+ opacity:0;
275
+ transform:scale(1.75);
276
+ }
277
+ }
278
+
1
279
 
2
280
  @media (prefers-reduced-motion: no-preference){
3
281
 
@@ -487,348 +765,94 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
487
765
  --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
488
766
  }
489
767
 
490
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
- --tds-checkbox-description-color:var(--t-text-color-status-error);
493
- --tds-checkbox-description-invalid-icon-display:inline-block;
494
- }
495
-
496
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
499
- }
500
-
501
- :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{
502
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
504
- }
505
-
506
- :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){
507
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
509
- }
510
-
511
- .tds-checkbox:has(input:required) label::after{
512
- margin-left:.25ch;
513
- color:var(--t-text-color-status-error);
514
- content:"*";
515
- }
516
-
517
- .tds-checkbox:has(input:disabled){
518
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
520
-
521
- --tds-checkbox-label-color:var(--t-form-color-disabled);
522
- --tds-checkbox-description-color:var(--t-form-color-disabled);
523
- --tds-checkbox-cursor:not-allowed;
524
- }
525
-
526
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
528
- }
529
-
530
- .tds-checkbox-description{
531
- display:flex;
532
- grid-area:2 / 2;
533
- gap:var(--t-spacing-half);
534
- align-items:flex-start;
535
- margin:0;
536
- font-size:var(--tds-checkbox-description-font-size);
537
- line-height:var(--tds-checkbox-description-line-height);
538
- color:var(--tds-checkbox-description-color);
539
- cursor:text;
540
- }
541
-
542
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
- display:var(--tds-checkbox-description-invalid-icon-display);
544
- flex-shrink:0;
545
- margin-top:calc(.5lh - .5em);
546
- line-height:var(--tds-checkbox-description-line-height);
547
- }
548
-
549
- .tds-checkbox--sm{
550
- --tds-checkbox-line-height:1.35;
551
- --tds-checkbox-input-size:var(--t-element-size-sm);
552
- --tds-checkbox-font-size:var(--t-font-size-sm);
553
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
- --tds-checkbox-description-line-height:1.3;
555
- }
556
-
557
- @layer t-critical{
558
- tds-page-header:not(.hydrated){
559
- display:none;
560
- }
561
- }
562
-
563
- @layer t-component{
564
- .tds-page-header{
565
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
566
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
567
- --tds-page-header-color:var(--t-text-color);
568
- --tds-page-header-bottom-border-color:transparent;
569
- --tds-page-header-headline-color:var(--t-text-color-headline);
570
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
571
- --tds-page-header-padding-x:var(--t-spacing-2);
572
- --tds-page-header-padding-y:var(--t-spacing-2);
573
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
574
- --tds-page-header-nav-gap:var(--t-spacing-1);
575
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
576
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
577
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
578
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
579
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
580
- --tds-page-header-nav-item-border-width:1px;
581
-
582
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
583
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
584
-
585
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
586
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
587
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
588
-
589
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
590
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
591
-
592
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
593
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
594
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
595
-
596
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
597
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
598
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
599
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
600
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
601
- }
602
-
603
- .tds-page-header--profile{
604
- --tds-page-header-padding-y:20px;
605
- }
606
-
607
- @supports (color: light-dark(#fff, #000)){
608
- .tds-page-header{
609
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
610
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
611
- }
612
- }
613
-
614
- @media (min-width: 600px){
615
- .tds-page-header{
616
- --tds-page-header-background-color:var(--t-surface-color-canvas);
617
- --tds-page-header-color:var(--t-text-color-secondary);
618
- --tds-page-header-bottom-border-color:var(--t-border-color);
619
- --tds-page-header-padding-x:var(--t-spacing-3);
620
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
621
- --tds-page-header-nav-gap:var(--t-spacing-half);
622
- --tds-page-header-nav-background:transparent;
623
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
624
- --tds-page-header-nav-item-border-width:1px;
625
- --tds-page-header-nav-item-color:var(--t-text-color);
626
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
627
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
628
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
629
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
630
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
631
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
632
- }
633
- }
634
- }
635
-
636
- .tds-page-header{
637
- display:flex;
638
- flex-direction:column;
639
- padding-top:var(--tds-page-header-padding-y);
640
- color:var(--tds-page-header-color);
641
- background:var(--tds-page-header-background-color);
642
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
643
- }
644
-
645
- .tds-page-header:not(.has-nav){
646
- padding-bottom:var(--tds-page-header-padding-y);
647
- }
648
-
649
- .tds-page-header.inactive{
650
- background:var(--tds-page-header-background-color-inactive);
651
- }
652
-
653
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
654
- width:100%;
655
- }
656
-
657
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
658
- display:flex;
659
- flex-flow:row wrap;
660
- gap:var(--t-spacing-half) var(--t-spacing-1);
661
- align-items:flex-start;
662
- justify-content:flex-start;
663
- min-width:0;
664
- }
665
-
666
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
667
- display:flex;
668
- gap:var(--tds-page-header-nav-gap);
669
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
670
- margin:0 0 -1px;
671
- overflow:auto;
672
- list-style:none;
673
- background:var(--tds-page-header-nav-background);
674
- }
675
-
676
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
677
- position:relative;
678
- display:inline-flex;
679
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
680
- font-size:var(--t-font-size-sm);
681
- line-height:22px;
682
- color:var(--tds-page-header-nav-item-color);
683
- white-space:nowrap;
684
- text-decoration:none;
685
- -webkit-appearance:none;
686
- -moz-appearance:none;
687
- appearance:none;
688
- cursor:pointer;
689
- outline-offset:-2px;
690
- background-color:var(--tds-page-header-nav-item-background-color);
691
- background-clip:padding-box;
692
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
693
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
694
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
695
- }
696
-
697
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
698
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
699
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
700
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
701
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
702
- }
703
-
704
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
705
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
706
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
707
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
708
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
709
- }
710
-
711
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
712
- background-color:var(--tds-page-header-nav-item-background-color-active);
713
- border-color:var(--tds-page-header-nav-item-border-color-active);
714
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
715
- }
716
-
717
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
718
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
719
- color:var(--tds-page-header-nav-item-color-disabled);
720
- cursor:not-allowed;
721
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
722
- opacity:1;
723
- }
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
+ }
724
773
 
725
- @media (min-width: 600px){
726
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
727
- position:absolute;
728
- inset:auto -1px -1px;
729
- height:1px;
730
- pointer-events:none;
731
- content:"";
732
- background-color:var(--tds-page-header-bottom-border-color);
733
- }
734
- }
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
+ }
735
778
 
736
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
737
- position:relative;
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);
738
782
  }
739
783
 
740
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
741
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
742
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
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);
743
787
  }
744
788
 
745
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
746
- position:absolute;
747
- top:-5px;
748
- right:-2px;
749
- width:10px;
750
- height:10px;
751
- content:"";
752
- background:var(--tds-page-header-nav-item-indicator-color);
753
- border-radius:50%;
754
- }
789
+ .tds-checkbox:has(input:required) label::after{
790
+ margin-left:.25ch;
791
+ color:var(--t-text-color-status-error);
792
+ content:"*";
793
+ }
755
794
 
756
- @media (prefers-reduced-motion: no-preference){
757
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
758
- animation:indicator-pulse 1.25s ease infinite;
759
- }
760
- }
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);
761
798
 
762
- .tds-page-header__title-bar{
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{
763
809
  display:flex;
764
- flex-direction:column;
765
- gap:var(--t-spacing-2) var(--t-spacing-1);
810
+ grid-area:2 / 2;
811
+ gap:var(--t-spacing-half);
766
812
  align-items:flex-start;
767
- justify-content:space-between;
768
- padding:0 var(--tds-page-header-padding-x);
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;
769
818
  }
770
819
 
771
- .tds-page-header--profile > .tds-page-header__title-bar{
772
- align-items:center;
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);
773
825
  }
774
826
 
775
- .tds-page-header__primary{
776
- width:100%;
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;
777
833
  }
778
834
 
779
- .tds-page-header__primary h1{
780
- margin:0;
781
- font-size:var(--tds-page-header-headline-font-size);
782
- font-weight:var(--t-font-weight-normal);
783
- line-height:32px;
784
- color:var(--tds-page-header-headline-color);
785
- overflow-wrap:break-word;
786
- }
787
-
788
- @media (min-width: 960px){
789
- .tds-page-header__primary{
790
- flex:1 1 max-content;
791
- width:auto;
792
- min-width:0;
793
- max-width:100%;
794
- }
795
835
 
796
- .tds-page-header__title-bar,
797
- .tds-page-header--profile .tds-page-header__title-bar{
798
- flex-flow:row nowrap;
799
- row-gap:12px;
800
- align-items:flex-start;
801
- }
802
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
803
- width:auto;
836
+ :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{
837
+ -webkit-appearance:none;
838
+ appearance:none;
804
839
  }
805
840
 
806
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
807
- justify-content:flex-end;
841
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
842
+ inline-size:1em;
843
+ block-size:2em;
808
844
  }
809
- }
810
-
811
- .tds-page-header-phone,
812
- .tds-page-header-email{
813
- color:var(--tds-page-header-color);
814
- white-space:nowrap;
815
- }
816
-
817
- .tds-page-header-email{
818
- max-width:100%;
819
- overflow:hidden;
820
- text-overflow:ellipsis;
821
- }
822
845
 
823
- @keyframes indicator-pulse{
824
- 0%{
825
- opacity:.3;
826
- transform:scale(.9);
846
+ @supports (field-sizing: content){
847
+ .tds-input--auto-width{
848
+ inline-size:-moz-fit-content;
849
+ inline-size:fit-content;
850
+ min-inline-size:min(100%, 122px);
827
851
  }
828
852
 
829
- 100%{
830
- opacity:0;
831
- transform:scale(1.75);
853
+ .tds-input--auto-width input{
854
+ field-sizing:content;
855
+ inline-size:auto;
832
856
  }
833
857
  }
834
858
 
@@ -910,82 +934,199 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
910
934
  }
911
935
  }
912
936
 
913
- .tds-radio:has(input:checked){
914
- --tds-radio-input-background-color:var(--t-form-background-color);
915
- --tds-radio-input-border-color:var(--t-border-color-control-info);
916
- --tds-radio-input-border-width:4px;
937
+ .tds-radio:has(input:checked){
938
+ --tds-radio-input-background-color:var(--t-form-background-color);
939
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
940
+ --tds-radio-input-border-width:4px;
941
+ }
942
+
943
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
944
+ --tds-radio-input-background-color:var(--t-form-background-color);
945
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
946
+ }
947
+
948
+ .tds-radio:has(input:user-invalid){
949
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
950
+ }
951
+
952
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
953
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
954
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
955
+ }
956
+
957
+ .tds-radio:has(input:disabled){
958
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
959
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
960
+
961
+ --tds-radio-label-color:var(--t-form-color-disabled);
962
+ --tds-radio-description-color:var(--t-form-color-disabled);
963
+ --tds-radio-cursor:not-allowed;
964
+ }
965
+
966
+ .tds-radio:has(input:disabled) input:checked{
967
+ --tds-radio-input-background-color:var(--t-form-background-color);
968
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
969
+ }
970
+
971
+ .tds-radio-description{
972
+ display:flex;
973
+ grid-area:2 / 2;
974
+ gap:var(--t-spacing-half);
975
+ align-items:flex-start;
976
+ margin:0;
977
+ font-size:var(--tds-radio-description-font-size);
978
+ line-height:var(--tds-radio-description-line-height);
979
+ color:var(--tds-radio-description-color);
980
+ cursor:text;
981
+ }
982
+
983
+ .tds-radio--sm{
984
+ --tds-radio-line-height:1.35;
985
+ --tds-radio-input-size:var(--t-element-size-sm);
986
+ --tds-radio-font-size:var(--t-font-size-sm);
987
+ --tds-radio-description-font-size:var(--t-font-size-xs);
988
+ --tds-radio-description-line-height:1.3;
989
+ }
990
+
991
+ .tds-toggle-switch{
992
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
993
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
994
+ --tds-toggle-switch-cursor:pointer;
995
+ --tds-toggle-switch-display:inline-grid;
996
+ --tds-toggle-switch-line-height:1.4;
997
+
998
+ --tds-toggle-switch-label-color:var(--t-form-color);
999
+
1000
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1001
+ --tds-toggle-switch-track-outline:none;
1002
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1003
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1004
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1005
+
1006
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1007
+ --tds-toggle-switch-thumb-transform:translateX(0);
1008
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1009
+
1010
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1011
+ --tds-toggle-switch-description-line-height:1.35;
1012
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1013
+ position:relative;
1014
+
1015
+ display:var(--tds-toggle-switch-display);
1016
+ grid-template-columns:auto;
1017
+ grid-auto-columns:1fr;
1018
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1019
+ -webkit-user-select:none;
1020
+ -moz-user-select:none;
1021
+ user-select:none;
1022
+ }
1023
+
1024
+ .tds-toggle-switch input[type="checkbox"]{
1025
+ position:absolute;
1026
+ width:var(--tds-toggle-switch-track-width);
1027
+ height:var(--tds-toggle-switch-track-height);
1028
+ margin:0;
1029
+ -webkit-appearance:none;
1030
+ -moz-appearance:none;
1031
+ appearance:none;
1032
+ cursor:var(--tds-toggle-switch-cursor);
1033
+ outline:var(--tds-toggle-switch-track-outline);
1034
+ outline-offset:var(--t-focus-ring-offset);
1035
+ background-color:transparent;
1036
+ border:0;
1037
+ border-radius:var(--t-border-radius-round);
1038
+ }
1039
+
1040
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1041
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1042
+ }
1043
+
1044
+ .tds-toggle-switch label{
1045
+ display:inline-flex;
1046
+ grid-area:1 / 2;
1047
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1048
+ column-gap:var(--tds-toggle-switch-column-gap);
1049
+ margin-top:-.09375em;
1050
+ font-size:var(--tds-toggle-switch-font-size);
1051
+ font-weight:var(--t-font-weight-normal);
1052
+ line-height:var(--tds-toggle-switch-line-height);
1053
+ color:var(--tds-toggle-switch-label-color);
1054
+ cursor:var(--tds-toggle-switch-cursor);
917
1055
  }
918
1056
 
919
- .tds-radio:has(input:checked) input:hover:not(:disabled){
920
- --tds-radio-input-background-color:var(--t-form-background-color);
921
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
922
- }
1057
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1058
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1059
+ }
923
1060
 
924
- .tds-radio:has(input:user-invalid){
925
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1061
+ .tds-toggle-switch:has(input:checked){
1062
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1063
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
926
1064
  }
927
1065
 
928
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
929
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
930
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1066
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1067
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
931
1068
  }
932
1069
 
933
- .tds-radio:has(input:disabled){
934
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
935
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1070
+ .tds-toggle-switch:has(input:disabled){
1071
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1072
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1073
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1074
+ --tds-toggle-switch-cursor:not-allowed;
1075
+ }
936
1076
 
937
- --tds-radio-label-color:var(--t-form-color-disabled);
938
- --tds-radio-description-color:var(--t-form-color-disabled);
939
- --tds-radio-cursor:not-allowed;
1077
+ .tds-toggle-switch-track{
1078
+ position:relative;
1079
+ flex-shrink:0;
1080
+ width:var(--tds-toggle-switch-track-width);
1081
+ height:var(--tds-toggle-switch-track-height);
1082
+ background-color:var(--tds-toggle-switch-track-background-color);
1083
+ border-radius:var(--t-border-radius-round);
1084
+ transition:var(--tds-toggle-switch-track-transition);
1085
+ }
1086
+
1087
+ .tds-toggle-switch-track::before{
1088
+ position:absolute;
1089
+ top:var(--t-spacing-fourth);
1090
+ left:var(--t-spacing-fourth);
1091
+ width:var(--tds-toggle-switch-thumb-size);
1092
+ height:var(--tds-toggle-switch-thumb-size);
1093
+ content:"";
1094
+ background-color:#fff;
1095
+ border-radius:var(--t-border-radius-round);
1096
+ transform:var(--tds-toggle-switch-thumb-transform);
1097
+ transition:var(--tds-toggle-switch-thumb-transition);
940
1098
  }
941
1099
 
942
- .tds-radio:has(input:disabled) input:checked{
943
- --tds-radio-input-background-color:var(--t-form-background-color);
944
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
945
- }
1100
+ @media (prefers-reduced-motion: reduce){
946
1101
 
947
- .tds-radio-description{
1102
+ .tds-toggle-switch-track{
1103
+ --tds-toggle-switch-track-transition:none;
1104
+ --tds-toggle-switch-thumb-transition:none;
1105
+ }
1106
+ }
1107
+
1108
+ .tds-toggle-switch-description{
948
1109
  display:flex;
949
1110
  grid-area:2 / 2;
950
- gap:var(--t-spacing-half);
951
1111
  align-items:flex-start;
952
1112
  margin:0;
953
- font-size:var(--tds-radio-description-font-size);
954
- line-height:var(--tds-radio-description-line-height);
955
- color:var(--tds-radio-description-color);
1113
+ font-size:var(--tds-toggle-switch-description-font-size);
1114
+ line-height:var(--tds-toggle-switch-description-line-height);
1115
+ color:var(--tds-toggle-switch-description-color);
956
1116
  cursor:text;
957
1117
  }
958
1118
 
959
- .tds-radio--sm{
960
- --tds-radio-line-height:1.35;
961
- --tds-radio-input-size:var(--t-element-size-sm);
962
- --tds-radio-font-size:var(--t-font-size-sm);
963
- --tds-radio-description-font-size:var(--t-font-size-xs);
964
- --tds-radio-description-line-height:1.3;
1119
+ .tds-toggle-switch--sm{
1120
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1121
+ --tds-toggle-switch-line-height:1.35;
1122
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1123
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1124
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1125
+ --tds-toggle-switch-description-line-height:1.3;
965
1126
  }
966
1127
 
967
-
968
- :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{
969
- -webkit-appearance:none;
970
- appearance:none;
971
- }
972
-
973
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
974
- inline-size:1em;
975
- block-size:2em;
976
- }
977
-
978
- @supports (field-sizing: content){
979
- .tds-input--auto-width{
980
- inline-size:-moz-fit-content;
981
- inline-size:fit-content;
982
- min-inline-size:min(100%, 122px);
983
- }
984
-
985
- .tds-input--auto-width input{
986
- field-sizing:content;
987
- inline-size:auto;
988
- }
1128
+ .tds-toggle-switch--hide-label{
1129
+ --tds-toggle-switch-display:inline-flex;
989
1130
  }
990
1131
 
991
1132
  .tds-radio-group{
@@ -1121,205 +1262,64 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1121
1262
  scrollbar-color:initial;
1122
1263
  transition-timing-function:var(--t-ease-in-out);
1123
1264
  transition-duration:var(--t-duration-200);
1124
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1125
- }
1126
-
1127
- @media (pointer: fine){
1128
- :is(.tds-input textarea)::-webkit-scrollbar{
1129
- width:12px;
1130
- height:12px;
1131
- cursor:default;
1132
- }
1133
-
1134
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1135
- cursor:default;
1136
- background:var(--tds-input-scrollbar-thumb-color);
1137
- background-clip:content-box;
1138
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1139
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1140
- }
1141
-
1142
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1143
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1144
- }
1145
-
1146
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1147
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1148
- }
1149
-
1150
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1151
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1152
- }
1153
-
1154
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1155
- background:var(--tds-input-scrollbar-surface-color);
1156
- }
1157
-
1158
- :is(.tds-input textarea)::-webkit-resizer{
1159
- background:var(--tds-input-resizer-icon) no-repeat;
1160
- background-position:right bottom;
1161
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1162
- }
1163
-
1164
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1165
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1166
- cursor:default;
1167
- }
1168
-
1169
- @supports (-moz-appearance: none){
1170
- :is(.tds-input textarea){
1171
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1172
- scrollbar-width:thin;
1173
- }
1174
-
1175
- @media (hover){
1176
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1177
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1178
- }
1179
- }
1180
- }
1181
- }
1182
-
1183
- .tds-toggle-switch{
1184
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1185
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1186
- --tds-toggle-switch-cursor:pointer;
1187
- --tds-toggle-switch-display:inline-grid;
1188
- --tds-toggle-switch-line-height:1.4;
1189
-
1190
- --tds-toggle-switch-label-color:var(--t-form-color);
1191
-
1192
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1193
- --tds-toggle-switch-track-outline:none;
1194
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1195
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1196
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1197
-
1198
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1199
- --tds-toggle-switch-thumb-transform:translateX(0);
1200
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1201
-
1202
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1203
- --tds-toggle-switch-description-line-height:1.35;
1204
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1205
- position:relative;
1206
-
1207
- display:var(--tds-toggle-switch-display);
1208
- grid-template-columns:auto;
1209
- grid-auto-columns:1fr;
1210
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1211
- -webkit-user-select:none;
1212
- -moz-user-select:none;
1213
- user-select:none;
1214
- }
1215
-
1216
- .tds-toggle-switch input[type="checkbox"]{
1217
- position:absolute;
1218
- width:var(--tds-toggle-switch-track-width);
1219
- height:var(--tds-toggle-switch-track-height);
1220
- margin:0;
1221
- -webkit-appearance:none;
1222
- -moz-appearance:none;
1223
- appearance:none;
1224
- cursor:var(--tds-toggle-switch-cursor);
1225
- outline:var(--tds-toggle-switch-track-outline);
1226
- outline-offset:var(--t-focus-ring-offset);
1227
- background-color:transparent;
1228
- border:0;
1229
- border-radius:var(--t-border-radius-round);
1230
- }
1231
-
1232
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1233
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1234
- }
1235
-
1236
- .tds-toggle-switch label{
1237
- display:inline-flex;
1238
- grid-area:1 / 2;
1239
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1240
- column-gap:var(--tds-toggle-switch-column-gap);
1241
- margin-top:-.09375em;
1242
- font-size:var(--tds-toggle-switch-font-size);
1243
- font-weight:var(--t-font-weight-normal);
1244
- line-height:var(--tds-toggle-switch-line-height);
1245
- color:var(--tds-toggle-switch-label-color);
1246
- cursor:var(--tds-toggle-switch-cursor);
1247
- }
1248
-
1249
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1250
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1251
- }
1252
-
1253
- .tds-toggle-switch:has(input:checked){
1254
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1255
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1256
- }
1265
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1266
+ }
1257
1267
 
1258
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1259
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1268
+ @media (pointer: fine){
1269
+ :is(.tds-input textarea)::-webkit-scrollbar{
1270
+ width:12px;
1271
+ height:12px;
1272
+ cursor:default;
1260
1273
  }
1261
1274
 
1262
- .tds-toggle-switch:has(input:disabled){
1263
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1264
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1265
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1266
- --tds-toggle-switch-cursor:not-allowed;
1267
- }
1275
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1276
+ cursor:default;
1277
+ background:var(--tds-input-scrollbar-thumb-color);
1278
+ background-clip:content-box;
1279
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1280
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1281
+ }
1268
1282
 
1269
- .tds-toggle-switch-track{
1270
- position:relative;
1271
- flex-shrink:0;
1272
- width:var(--tds-toggle-switch-track-width);
1273
- height:var(--tds-toggle-switch-track-height);
1274
- background-color:var(--tds-toggle-switch-track-background-color);
1275
- border-radius:var(--t-border-radius-round);
1276
- transition:var(--tds-toggle-switch-track-transition);
1277
- }
1283
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1284
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1285
+ }
1278
1286
 
1279
- .tds-toggle-switch-track::before{
1280
- position:absolute;
1281
- top:var(--t-spacing-fourth);
1282
- left:var(--t-spacing-fourth);
1283
- width:var(--tds-toggle-switch-thumb-size);
1284
- height:var(--tds-toggle-switch-thumb-size);
1285
- content:"";
1286
- background-color:#fff;
1287
- border-radius:var(--t-border-radius-round);
1288
- transform:var(--tds-toggle-switch-thumb-transform);
1289
- transition:var(--tds-toggle-switch-thumb-transition);
1290
- }
1287
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1288
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1289
+ }
1291
1290
 
1292
- @media (prefers-reduced-motion: reduce){
1291
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1292
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1293
+ }
1293
1294
 
1294
- .tds-toggle-switch-track{
1295
- --tds-toggle-switch-track-transition:none;
1296
- --tds-toggle-switch-thumb-transition:none;
1297
- }
1298
- }
1295
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1296
+ background:var(--tds-input-scrollbar-surface-color);
1297
+ }
1299
1298
 
1300
- .tds-toggle-switch-description{
1301
- display:flex;
1302
- grid-area:2 / 2;
1303
- align-items:flex-start;
1304
- margin:0;
1305
- font-size:var(--tds-toggle-switch-description-font-size);
1306
- line-height:var(--tds-toggle-switch-description-line-height);
1307
- color:var(--tds-toggle-switch-description-color);
1308
- cursor:text;
1309
- }
1299
+ :is(.tds-input textarea)::-webkit-resizer{
1300
+ background:var(--tds-input-resizer-icon) no-repeat;
1301
+ background-position:right bottom;
1302
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1303
+ }
1310
1304
 
1311
- .tds-toggle-switch--sm{
1312
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1313
- --tds-toggle-switch-line-height:1.35;
1314
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1315
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1316
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1317
- --tds-toggle-switch-description-line-height:1.3;
1318
- }
1305
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1306
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1307
+ cursor:default;
1308
+ }
1319
1309
 
1320
- .tds-toggle-switch--hide-label{
1321
- --tds-toggle-switch-display:inline-flex;
1322
- }
1310
+ @supports (-moz-appearance: none){
1311
+ :is(.tds-input textarea){
1312
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1313
+ scrollbar-width:thin;
1314
+ }
1315
+
1316
+ @media (hover){
1317
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1318
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1319
+ }
1320
+ }
1321
+ }
1322
+ }
1323
1323
 
1324
1324
  .tds-select{
1325
1325
  --tds-select-border-color:var(--t-form-border-color);
@@ -3336,161 +3336,83 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3336
3336
  @media (prefers-color-scheme: dark){
3337
3337
  }
3338
3338
 
3339
- .tds-number-stepper{
3340
- --tds-number-stepper-border-color:var(--t-form-border-color);
3341
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3342
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3343
- --tds-number-stepper-background-color:var(--t-form-background-color);
3344
- --tds-number-stepper-color:var(--t-form-color);
3345
- --tds-number-stepper-font-size:var(--t-font-size-md);
3346
- --tds-number-stepper-min-height:var(--t-container-size-md);
3347
- --tds-number-stepper-padding-block:6px;
3348
- --tds-number-stepper-button-offset:4px;
3349
- --tds-number-stepper-button-gap:2px;
3350
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
3351
- --tds-number-stepper-description-invalid-icon-display:none;
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);
3352
3343
 
3353
- position:relative;
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;
3354
3350
  display:flex;
3355
3351
  flex-direction:column;
3356
- gap:var(--t-spacing-half);
3357
- }
3358
-
3359
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3360
- margin-left:.25ch;
3361
- color:var(--t-text-color-status-error);
3362
- content:"*";
3363
- }
3364
-
3365
- .tds-number-stepper[data-invalid]{
3366
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
3367
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3368
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3369
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
3370
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
3371
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3372
- }
3373
-
3374
- .tds-number-stepper[data-disabled]{
3375
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3376
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3377
- --tds-number-stepper-color:var(--t-form-color-disabled);
3378
- }
3379
-
3380
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3381
- cursor:not-allowed;
3382
- }
3383
-
3384
- .tds-number-stepper--lg{
3385
- --tds-number-stepper-min-height:var(--t-container-size-lg);
3386
- --tds-number-stepper-font-size:var(--t-font-size-lg);
3387
- --tds-number-stepper-button-offset:5px;
3388
- --tds-number-stepper-button-gap:4px;
3389
- }
3390
-
3391
- .tds-number-stepper-label{
3392
- font-size:var(--t-font-size-md);
3393
- font-weight:var(--t-font-weight-normal);
3394
- color:var(--t-text-color);
3395
- cursor:default;
3396
- }
3352
+ gap:var(--tds-checkbox-group-gap);
3353
+ padding:0;
3354
+ margin:0;
3397
3355
 
3398
- .tds-number-stepper-field{
3399
- display:flex;
3400
- gap:var(--tds-number-stepper-button-gap);
3401
- align-items:center;
3402
- inline-size:100%;
3403
- min-block-size:var(--tds-number-stepper-min-height);
3404
- font-family:inherit;
3405
- font-size:var(--tds-number-stepper-font-size);
3406
- line-height:1;
3407
- color:var(--tds-number-stepper-color);
3408
- -webkit-appearance:none;
3409
- -moz-appearance:none;
3410
- appearance:none;
3411
- cursor:default;
3412
- outline:var(--t-focus-ring-width) solid transparent;
3413
- outline-offset:0;
3414
- background-color:var(--tds-number-stepper-background-color);
3415
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3416
- border-radius:var(--t-form-border-radius);
3356
+ font-size:var(--tds-checkbox-group-font-size);
3357
+ line-height:var(--tds-checkbox-group-line-height);
3358
+ border:0;
3417
3359
  }
3418
3360
 
3419
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3420
- border-color:var(--tds-number-stepper-border-color-hover);
3361
+ .tds-checkbox-group legend{
3362
+ padding:0;
3363
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3421
3364
  }
3422
3365
 
3423
- .tds-number-stepper-field[data-focus-within]{
3424
- outline-color:var(--t-focus-ring-color);
3425
- outline-offset:var(--t-focus-ring-offset);
3426
- border-color:var(--tds-number-stepper-border-color-active);
3366
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3367
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3427
3368
  }
3428
3369
 
3429
- .tds-number-stepper-field:has([readonly]){
3430
- --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3431
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3432
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
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;
3433
3373
  }
3434
3374
 
3435
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3436
- border-color:var(--t-form-border-color-hover);
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:"*";
3437
3379
  }
3438
3380
 
3439
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3440
- display:none;
3381
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3382
+ content:none;
3441
3383
  }
3442
3384
 
3443
- .tds-number-stepper-input{
3385
+ .tds-checkbox-group-fields{
3444
3386
  display:flex;
3445
- flex:1;
3446
- align-items:center;
3447
- min-inline-size:0;
3448
- padding-block:var(--tds-number-stepper-padding-block);
3449
- padding-inline:var(--t-spacing-1);
3450
- font-family:inherit;
3451
- font-size:inherit;
3452
- color:inherit;
3453
- outline:0;
3454
- background:transparent;
3455
- border:0;
3456
- }
3457
-
3458
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3459
- margin:0;
3460
- -webkit-appearance:none;
3461
- appearance:none;
3462
- }
3463
-
3464
- .tds-number-stepper-button{
3465
- flex-shrink:0;
3466
- align-self:center;
3467
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3468
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3469
- padding:0;
3387
+ flex-direction:column;
3388
+ gap:var(--tds-checkbox-group-gap);
3389
+ align-items:flex-start;
3470
3390
  }
3471
3391
 
3472
- .tds-number-stepper-button:last-of-type{
3473
- margin-inline-end:var(--tds-number-stepper-button-offset);
3474
- }
3475
-
3476
- .tds-number-stepper-description{
3392
+ .tds-checkbox-group-description{
3477
3393
  display:flex;
3478
3394
  gap:var(--t-spacing-half);
3479
3395
  align-items:flex-start;
3480
3396
  margin:0;
3481
- font-size:var(--t-font-size-sm);
3482
- line-height:1.35;
3483
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
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);
3484
3400
  cursor:text;
3485
3401
  }
3486
3402
 
3487
- .tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
3488
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3403
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3404
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3489
3405
  flex-shrink:0;
3490
- margin-block-start:calc(.5lh - .5em);
3491
- line-height:1.35;
3406
+ margin-top:calc(.5lh - .5em);
3407
+ line-height:var(--tds-checkbox-group-description-line-height);
3492
3408
  }
3493
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;
3415
+ }
3494
3416
 
3495
3417
  .tds-date-picker{
3496
3418
  --tds-date-picker-border-color:var(--t-form-border-color);
@@ -3959,6 +3881,162 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3959
3881
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
3960
3882
  }
3961
3883
 
3884
+ .tds-number-stepper{
3885
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3886
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3887
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3888
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3889
+ --tds-number-stepper-color:var(--t-form-color);
3890
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3891
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3892
+ --tds-number-stepper-padding-block:6px;
3893
+ --tds-number-stepper-button-offset:4px;
3894
+ --tds-number-stepper-button-gap:2px;
3895
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3896
+ --tds-number-stepper-description-invalid-icon-display:none;
3897
+
3898
+ position:relative;
3899
+ display:flex;
3900
+ flex-direction:column;
3901
+ gap:var(--t-spacing-half);
3902
+ }
3903
+
3904
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3905
+ margin-left:.25ch;
3906
+ color:var(--t-text-color-status-error);
3907
+ content:"*";
3908
+ }
3909
+
3910
+ .tds-number-stepper[data-invalid]{
3911
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3912
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3913
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3914
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3915
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3916
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3917
+ }
3918
+
3919
+ .tds-number-stepper[data-disabled]{
3920
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3921
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3922
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3923
+ }
3924
+
3925
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3926
+ cursor:not-allowed;
3927
+ }
3928
+
3929
+ .tds-number-stepper--lg{
3930
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3931
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3932
+ --tds-number-stepper-button-offset:5px;
3933
+ --tds-number-stepper-button-gap:4px;
3934
+ }
3935
+
3936
+ .tds-number-stepper-label{
3937
+ font-size:var(--t-font-size-md);
3938
+ font-weight:var(--t-font-weight-normal);
3939
+ color:var(--t-text-color);
3940
+ cursor:default;
3941
+ }
3942
+
3943
+ .tds-number-stepper-field{
3944
+ display:flex;
3945
+ gap:var(--tds-number-stepper-button-gap);
3946
+ align-items:center;
3947
+ inline-size:100%;
3948
+ min-block-size:var(--tds-number-stepper-min-height);
3949
+ font-family:inherit;
3950
+ font-size:var(--tds-number-stepper-font-size);
3951
+ line-height:1;
3952
+ color:var(--tds-number-stepper-color);
3953
+ -webkit-appearance:none;
3954
+ -moz-appearance:none;
3955
+ appearance:none;
3956
+ cursor:default;
3957
+ outline:var(--t-focus-ring-width) solid transparent;
3958
+ outline-offset:0;
3959
+ background-color:var(--tds-number-stepper-background-color);
3960
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3961
+ border-radius:var(--t-form-border-radius);
3962
+ }
3963
+
3964
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3965
+ border-color:var(--tds-number-stepper-border-color-hover);
3966
+ }
3967
+
3968
+ .tds-number-stepper-field[data-focus-within]{
3969
+ outline-color:var(--t-focus-ring-color);
3970
+ outline-offset:var(--t-focus-ring-offset);
3971
+ border-color:var(--tds-number-stepper-border-color-active);
3972
+ }
3973
+
3974
+ .tds-number-stepper-field:has([readonly]){
3975
+ --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3976
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3977
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3978
+ }
3979
+
3980
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3981
+ border-color:var(--t-form-border-color-hover);
3982
+ }
3983
+
3984
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3985
+ display:none;
3986
+ }
3987
+
3988
+ .tds-number-stepper-input{
3989
+ display:flex;
3990
+ flex:1;
3991
+ align-items:center;
3992
+ min-inline-size:0;
3993
+ padding-block:var(--tds-number-stepper-padding-block);
3994
+ padding-inline:var(--t-spacing-1);
3995
+ font-family:inherit;
3996
+ font-size:inherit;
3997
+ color:inherit;
3998
+ outline:0;
3999
+ background:transparent;
4000
+ border:0;
4001
+ }
4002
+
4003
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4004
+ margin:0;
4005
+ -webkit-appearance:none;
4006
+ appearance:none;
4007
+ }
4008
+
4009
+ .tds-number-stepper-button{
4010
+ flex-shrink:0;
4011
+ align-self:center;
4012
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4013
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4014
+ padding:0;
4015
+ }
4016
+
4017
+ .tds-number-stepper-button:last-of-type{
4018
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4019
+ }
4020
+
4021
+ .tds-number-stepper-description{
4022
+ display:flex;
4023
+ gap:var(--t-spacing-half);
4024
+ align-items:flex-start;
4025
+ margin:0;
4026
+ font-size:var(--t-font-size-sm);
4027
+ line-height:1.35;
4028
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4029
+ cursor:text;
4030
+ }
4031
+
4032
+ .tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
4033
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4034
+ flex-shrink:0;
4035
+ margin-block-start:calc(.5lh - .5em);
4036
+ line-height:1.35;
4037
+ }
4038
+
4039
+
3962
4040
  .tds-combo-box{
3963
4041
  --tds-combo-box-border-color:var(--t-form-border-color);
3964
4042
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -4261,84 +4339,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4261
4339
  }
4262
4340
 
4263
4341
 
4264
- .tds-checkbox-group{
4265
- --tds-checkbox-group-font-size:var(--t-font-size-md);
4266
- --tds-checkbox-group-line-height:1.4;
4267
- --tds-checkbox-group-gap:var(--t-spacing-1);
4268
-
4269
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4270
-
4271
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4272
- --tds-checkbox-group-description-line-height:1.35;
4273
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4274
- --tds-checkbox-group-description-invalid-icon-display:none;
4275
- display:flex;
4276
- flex-direction:column;
4277
- gap:var(--tds-checkbox-group-gap);
4278
- padding:0;
4279
- margin:0;
4280
-
4281
- font-size:var(--tds-checkbox-group-font-size);
4282
- line-height:var(--tds-checkbox-group-line-height);
4283
- border:0;
4284
- }
4285
-
4286
- .tds-checkbox-group legend{
4287
- padding:0;
4288
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4289
- }
4290
-
4291
- .tds-checkbox-group:has(.tds-checkbox-group-description){
4292
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4293
- }
4294
-
4295
- .tds-checkbox-group[aria-invalid="true"]{
4296
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4297
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
4298
- }
4299
-
4300
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4301
- margin-left:.25ch;
4302
- color:var(--t-text-color-status-error);
4303
- content:"*";
4304
- }
4305
-
4306
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4307
- content:none;
4308
- }
4309
-
4310
- .tds-checkbox-group-fields{
4311
- display:flex;
4312
- flex-direction:column;
4313
- gap:var(--tds-checkbox-group-gap);
4314
- align-items:flex-start;
4315
- }
4316
-
4317
- .tds-checkbox-group-description{
4318
- display:flex;
4319
- gap:var(--t-spacing-half);
4320
- align-items:flex-start;
4321
- margin:0;
4322
- font-size:var(--tds-checkbox-group-description-font-size);
4323
- line-height:var(--tds-checkbox-group-description-line-height);
4324
- color:var(--tds-checkbox-group-description-color);
4325
- cursor:text;
4326
- }
4327
-
4328
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4329
- display:var(--tds-checkbox-group-description-invalid-icon-display);
4330
- flex-shrink:0;
4331
- margin-top:calc(.5lh - .5em);
4332
- line-height:var(--tds-checkbox-group-description-line-height);
4333
- }
4334
-
4335
- .tds-checkbox-group--sm{
4336
- --tds-checkbox-group-line-height:1.35;
4337
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
4338
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4339
- --tds-checkbox-group-description-line-height:1.3;
4340
- }
4341
-
4342
4342
  .tds-time-field{
4343
4343
  --tds-time-field-border-color:var(--t-form-border-color);
4344
4344
  --tds-time-field-border-color-hover:var(--t-form-border-color-hover);