@planningcenter/tapestry 3.2.0 → 3.2.1-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/reactRender.css +518 -514
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +518 -514
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/unstable.css +19 -15
  6. package/dist/unstable.css.map +1 -1
  7. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,133 +1,264 @@
1
- .tds-radio{
2
- --tds-radio-font-size:var(--t-font-size-md);
3
- --tds-radio-cursor:pointer;
4
- --tds-radio-line-height:1.4;
5
- --tds-radio-transition-property:border-width;
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
5
+ }
6
6
 
7
- --tds-radio-input-size:var(--t-element-size-md);
8
- --tds-radio-input-border-radius:var(--t-border-radius-round);
9
- --tds-radio-input-border-color:var(--t-form-border-color);
10
- --tds-radio-input-border-width:var(--t-form-border-width);
11
- --tds-radio-input-background-color:transparent;
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:var(--t-surface-color-canvas);
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;
12
25
 
13
- --tds-radio-label-color:var(--t-form-color);
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-bottom-border-color);
14
28
 
15
- --tds-radio-description-font-size:var(--t-font-size-sm);
16
- --tds-radio-description-line-height:1.35;
17
- --tds-radio-description-color:var(--t-text-color-secondary);
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);
18
32
 
19
- position:relative;
20
- display:inline-grid;
21
- grid-template-columns:auto;
22
- grid-auto-columns:1fr;
23
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
24
- line-height:var(--tds-radio-line-height);
25
- cursor:var(--tds-radio-cursor);
26
- -webkit-user-select:none;
27
- -moz-user-select:none;
28
- user-select:none;
29
- }
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);
30
35
 
31
- .tds-radio label{
32
- grid-area:1 / 2;
33
- font-size:var(--tds-radio-font-size);
34
- font-weight:var(--t-font-weight-normal);
35
- color:var(--tds-radio-label-color);
36
- cursor:var(--tds-radio-cursor);
37
- }
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);
38
39
 
39
- .tds-radio input[type="radio"]{
40
- position:relative;
41
- width:1em;
42
- height:1em;
43
- margin:calc((1lh - 1em) / 2) 0 0;
44
- font-size:var(--tds-radio-font-size);
45
- line-height:inherit;
46
- -webkit-appearance:none;
47
- -moz-appearance:none;
48
- appearance:none;
49
- cursor:var(--tds-radio-cursor);
50
- background-color:var(--tds-radio-input-background-color);
51
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
52
- border-radius:var(--tds-radio-input-border-radius);
53
- transition-timing-function:var(--t-ease-in-out);
54
- transition-duration:var(--t-duration-200);
55
- transition-property:var(--tds-radio-transition-property);
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);
56
45
  }
57
46
 
58
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
59
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
60
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
61
- }
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
49
+ }
62
50
 
63
- :is(.tds-radio input[type="radio"]):focus-visible{
64
- outline:var(--t-focus-ring-outline);
65
- outline-offset:var(--t-focus-ring-offset);
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));
66
55
  }
56
+ }
67
57
 
68
- :is(.tds-radio input[type="radio"]):disabled{
69
- pointer-events:none;
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-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
70
75
  }
76
+ }
77
+ }
71
78
 
72
- @media (prefers-reduced-motion: reduce){
79
+ .tds-page-header{
80
+ display:flex;
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
86
+ }
73
87
 
74
- .tds-radio input[type="radio"]{
75
- --tds-radio-transition-property:none;
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
76
90
  }
77
- }
78
91
 
79
- .tds-radio:has(input:checked){
80
- --tds-radio-input-background-color:var(--t-form-background-color);
81
- --tds-radio-input-border-color:var(--t-border-color-control-info);
82
- --tds-radio-input-border-width:4px;
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
83
94
  }
84
95
 
85
- .tds-radio:has(input:checked) input:hover:not(:disabled){
86
- --tds-radio-input-background-color:var(--t-form-background-color);
87
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
88
- }
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
98
+ }
89
99
 
90
- .tds-radio:has(input:user-invalid){
91
- --tds-radio-input-border-color:var(--t-form-border-color-error);
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
101
+ display:flex;
102
+ flex-flow:row wrap;
103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
104
+ align-items:flex-start;
105
+ justify-content:flex-start;
106
+ min-width:0;
92
107
  }
93
108
 
94
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
95
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
96
- --tds-radio-input-background-color:var(--t-form-background-color-error);
109
+ :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{
110
+ display:flex;
111
+ gap:var(--tds-page-header-nav-gap);
112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
+ margin:0 0 -1px;
114
+ overflow:auto;
115
+ list-style:none;
116
+ background:var(--tds-page-header-nav-background);
97
117
  }
98
118
 
99
- .tds-radio:has(input:disabled){
100
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
101
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
+ position:relative;
121
+ display:inline-flex;
122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
+ font-size:var(--t-font-size-sm);
124
+ line-height:22px;
125
+ color:var(--tds-page-header-nav-item-color);
126
+ white-space:nowrap;
127
+ text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
138
+ }
102
139
 
103
- --tds-radio-label-color:var(--t-form-color-disabled);
104
- --tds-radio-description-color:var(--t-form-color-disabled);
105
- --tds-radio-cursor:not-allowed;
106
- }
140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
145
+ }
107
146
 
108
- .tds-radio:has(input:disabled) input:checked{
109
- --tds-radio-input-background-color:var(--t-form-background-color);
110
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
+ }
152
+
153
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
+ background-color:var(--tds-page-header-nav-item-background-color-active);
155
+ border-color:var(--tds-page-header-nav-item-border-color-active);
156
+ }
157
+
158
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
+ color:var(--tds-page-header-nav-item-color-disabled);
160
+ cursor:not-allowed;
161
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
+ opacity:1;
163
+ }
164
+
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
111
167
  }
112
168
 
113
- .tds-radio-description{
169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
172
+ }
173
+
174
+ :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{
175
+ position:absolute;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
180
+ content:"";
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
183
+ }
184
+
185
+ @media (prefers-reduced-motion: no-preference){
186
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
+ animation:indicator-pulse 1.25s ease infinite;
188
+ }
189
+ }
190
+
191
+ .tds-page-header__title-bar{
114
192
  display:flex;
115
- grid-area:2 / 2;
116
- gap:var(--t-spacing-half);
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
117
195
  align-items:flex-start;
118
- margin:0;
119
- font-size:var(--tds-radio-description-font-size);
120
- line-height:var(--tds-radio-description-line-height);
121
- color:var(--tds-radio-description-color);
122
- cursor:text;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
123
198
  }
124
199
 
125
- .tds-radio--sm{
126
- --tds-radio-line-height:1.35;
127
- --tds-radio-input-size:var(--t-element-size-sm);
128
- --tds-radio-font-size:var(--t-font-size-sm);
129
- --tds-radio-description-font-size:var(--t-font-size-xs);
130
- --tds-radio-description-line-height:1.3;
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
202
+ }
203
+
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
207
+
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
215
+ }
216
+
217
+ @media (min-width: 960px){
218
+ .tds-page-header__primary{
219
+ flex:1 1 max-content;
220
+ width:auto;
221
+ min-width:0;
222
+ max-width:100%;
223
+ }
224
+
225
+ .tds-page-header__title-bar,
226
+ .tds-page-header--profile .tds-page-header__title-bar{
227
+ flex-flow:row nowrap;
228
+ row-gap:12px;
229
+ align-items:flex-start;
230
+ }
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
233
+ }
234
+
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
237
+ }
238
+ }
239
+
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
244
+ }
245
+
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
250
+ }
251
+
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
256
+ }
257
+
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
131
262
  }
132
263
 
133
264
 
@@ -492,6 +623,29 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
492
623
  flex-direction:column;
493
624
  }
494
625
 
626
+
627
+ :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{
628
+ -webkit-appearance:none;
629
+ appearance:none;
630
+ }
631
+
632
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
633
+ inline-size:1em;
634
+ block-size:2em;
635
+ }
636
+
637
+ @supports (field-sizing: content){
638
+ .tds-input--auto-width{
639
+ inline-size:-moz-fit-content;
640
+ inline-size:fit-content;
641
+ }
642
+
643
+ .tds-input--auto-width input{
644
+ field-sizing:content;
645
+ inline-size:auto;
646
+ }
647
+ }
648
+
495
649
  .tds-checkbox{
496
650
  --tds-checkbox-font-size:var(--t-font-size-md);
497
651
  --tds-checkbox-cursor:pointer;
@@ -686,6 +840,138 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
686
840
  --tds-checkbox-description-line-height:1.3;
687
841
  }
688
842
 
843
+ .tds-radio{
844
+ --tds-radio-font-size:var(--t-font-size-md);
845
+ --tds-radio-cursor:pointer;
846
+ --tds-radio-line-height:1.4;
847
+ --tds-radio-transition-property:border-width;
848
+
849
+ --tds-radio-input-size:var(--t-element-size-md);
850
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
851
+ --tds-radio-input-border-color:var(--t-form-border-color);
852
+ --tds-radio-input-border-width:var(--t-form-border-width);
853
+ --tds-radio-input-background-color:transparent;
854
+
855
+ --tds-radio-label-color:var(--t-form-color);
856
+
857
+ --tds-radio-description-font-size:var(--t-font-size-sm);
858
+ --tds-radio-description-line-height:1.35;
859
+ --tds-radio-description-color:var(--t-text-color-secondary);
860
+
861
+ position:relative;
862
+ display:inline-grid;
863
+ grid-template-columns:auto;
864
+ grid-auto-columns:1fr;
865
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
866
+ line-height:var(--tds-radio-line-height);
867
+ cursor:var(--tds-radio-cursor);
868
+ -webkit-user-select:none;
869
+ -moz-user-select:none;
870
+ user-select:none;
871
+ }
872
+
873
+ .tds-radio label{
874
+ grid-area:1 / 2;
875
+ font-size:var(--tds-radio-font-size);
876
+ font-weight:var(--t-font-weight-normal);
877
+ color:var(--tds-radio-label-color);
878
+ cursor:var(--tds-radio-cursor);
879
+ }
880
+
881
+ .tds-radio input[type="radio"]{
882
+ position:relative;
883
+ width:1em;
884
+ height:1em;
885
+ margin:calc((1lh - 1em) / 2) 0 0;
886
+ font-size:var(--tds-radio-font-size);
887
+ line-height:inherit;
888
+ -webkit-appearance:none;
889
+ -moz-appearance:none;
890
+ appearance:none;
891
+ cursor:var(--tds-radio-cursor);
892
+ background-color:var(--tds-radio-input-background-color);
893
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
894
+ border-radius:var(--tds-radio-input-border-radius);
895
+ transition-timing-function:var(--t-ease-in-out);
896
+ transition-duration:var(--t-duration-200);
897
+ transition-property:var(--tds-radio-transition-property);
898
+ }
899
+
900
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
901
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
902
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
903
+ }
904
+
905
+ :is(.tds-radio input[type="radio"]):focus-visible{
906
+ outline:var(--t-focus-ring-outline);
907
+ outline-offset:var(--t-focus-ring-offset);
908
+ }
909
+
910
+ :is(.tds-radio input[type="radio"]):disabled{
911
+ pointer-events:none;
912
+ }
913
+
914
+ @media (prefers-reduced-motion: reduce){
915
+
916
+ .tds-radio input[type="radio"]{
917
+ --tds-radio-transition-property:none;
918
+ }
919
+ }
920
+
921
+ .tds-radio:has(input:checked){
922
+ --tds-radio-input-background-color:var(--t-form-background-color);
923
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
924
+ --tds-radio-input-border-width:4px;
925
+ }
926
+
927
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
928
+ --tds-radio-input-background-color:var(--t-form-background-color);
929
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
930
+ }
931
+
932
+ .tds-radio:has(input:user-invalid){
933
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
934
+ }
935
+
936
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
937
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
938
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
939
+ }
940
+
941
+ .tds-radio:has(input:disabled){
942
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
943
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
944
+
945
+ --tds-radio-label-color:var(--t-form-color-disabled);
946
+ --tds-radio-description-color:var(--t-form-color-disabled);
947
+ --tds-radio-cursor:not-allowed;
948
+ }
949
+
950
+ .tds-radio:has(input:disabled) input:checked{
951
+ --tds-radio-input-background-color:var(--t-form-background-color);
952
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
953
+ }
954
+
955
+ .tds-radio-description{
956
+ display:flex;
957
+ grid-area:2 / 2;
958
+ gap:var(--t-spacing-half);
959
+ align-items:flex-start;
960
+ margin:0;
961
+ font-size:var(--tds-radio-description-font-size);
962
+ line-height:var(--tds-radio-description-line-height);
963
+ color:var(--tds-radio-description-color);
964
+ cursor:text;
965
+ }
966
+
967
+ .tds-radio--sm{
968
+ --tds-radio-line-height:1.35;
969
+ --tds-radio-input-size:var(--t-element-size-sm);
970
+ --tds-radio-font-size:var(--t-font-size-sm);
971
+ --tds-radio-description-font-size:var(--t-font-size-xs);
972
+ --tds-radio-description-line-height:1.3;
973
+ }
974
+
689
975
  .tds-input:has(textarea){
690
976
  --tds-input-padding-block:6px;
691
977
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -791,29 +1077,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
791
1077
  }
792
1078
  }
793
1079
 
794
-
795
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
796
- -webkit-appearance:none;
797
- appearance:none;
798
- }
799
-
800
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
801
- inline-size:1em;
802
- block-size:2em;
803
- }
804
-
805
- @supports (field-sizing: content){
806
- .tds-input--auto-width{
807
- inline-size:-moz-fit-content;
808
- inline-size:fit-content;
809
- }
810
-
811
- .tds-input--auto-width input{
812
- field-sizing:content;
813
- inline-size:auto;
814
- }
815
- }
816
-
817
1080
  .tds-radio-group{
818
1081
  --tds-radio-group-font-size:var(--t-font-size-md);
819
1082
  --tds-radio-group-line-height:1.4;
@@ -1555,323 +1818,60 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1555
1818
  }
1556
1819
 
1557
1820
  .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1558
- --tds-input-background-color:var(--t-form-background-color-error);
1559
- --tds-input-border-color:var(--t-form-border-color-error);
1560
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1561
- --tds-input-description-color:var(--t-text-color-status-error);
1562
- --tds-input-description-invalid-icon-display:inline-block;
1563
- }
1564
-
1565
- .tds-input:has(:is(input,textarea):required) label::after{
1566
- margin-left:.25ch;
1567
- color:var(--t-text-color-status-error);
1568
- content:"*";
1569
- }
1570
-
1571
- .tds-input:where(:has(:is(input,textarea):disabled)){
1572
- --tds-input-border-color:var(--t-form-border-color-disabled);
1573
- --tds-input-background-color:var(--t-form-background-color-disabled);
1574
- --tds-input-color:var(--t-form-color-disabled);
1575
- }
1576
-
1577
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1578
- cursor:not-allowed;
1579
- }
1580
-
1581
- .tds-input:where(:has(:is(input,textarea)[readonly])){
1582
- --tds-input-border-color:var(--t-form-border-color-readonly);
1583
- --tds-input-background-color:var(--t-form-background-color-readonly);
1584
- }
1585
-
1586
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1587
- border-color:var(--tds-input-border-color-hover);
1588
- }
1589
-
1590
- .tds-input.tds-input--lg{
1591
- --tds-input-min-height:var(--t-container-size-lg);
1592
- --tds-input-font-size:var(--t-font-size-lg);
1593
- }
1594
-
1595
- .tds-input-description{
1596
- display:flex;
1597
- gap:var(--t-spacing-half);
1598
- align-items:flex-start;
1599
- margin:0;
1600
- font-size:var(--t-font-size-sm);
1601
- line-height:1.35;
1602
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
1603
- cursor:text;
1604
- }
1605
-
1606
- .tds-input-description .tds-input-description-invalid-icon{
1607
- display:var(--tds-input-description-invalid-icon-display, none);
1608
- flex-shrink:0;
1609
- margin-block-start:calc(.5lh - .5em);
1610
- line-height:1.35;
1611
- }
1612
-
1613
- @layer t-critical{
1614
- tds-page-header:not(.hydrated){
1615
- display:none;
1616
- }
1617
- }
1618
-
1619
- @layer t-component{
1620
- .tds-page-header{
1621
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1622
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1623
- --tds-page-header-color:var(--t-text-color);
1624
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1625
- --tds-page-header-headline-color:var(--t-text-color-headline);
1626
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1627
- --tds-page-header-padding-x:var(--t-spacing-2);
1628
- --tds-page-header-padding-y:var(--t-spacing-2);
1629
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1630
- --tds-page-header-nav-gap:var(--t-spacing-1);
1631
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1632
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1633
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1634
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1635
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1636
- --tds-page-header-nav-item-border-width:1px;
1637
-
1638
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1639
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1640
-
1641
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1642
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1643
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1644
-
1645
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1646
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1647
-
1648
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1649
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1650
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1651
-
1652
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1653
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1654
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1655
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1656
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1657
- }
1658
-
1659
- .tds-page-header--profile{
1660
- --tds-page-header-padding-y:20px;
1661
- }
1662
-
1663
- @supports (color: light-dark(#fff, #000)){
1664
- .tds-page-header{
1665
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1666
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1667
- }
1668
- }
1669
-
1670
- @media (min-width: 600px){
1671
- .tds-page-header{
1672
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1673
- --tds-page-header-color:var(--t-text-color-secondary);
1674
- --tds-page-header-bottom-border-color:var(--t-border-color);
1675
- --tds-page-header-padding-x:var(--t-spacing-3);
1676
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1677
- --tds-page-header-nav-gap:var(--t-spacing-half);
1678
- --tds-page-header-nav-background:transparent;
1679
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1680
- --tds-page-header-nav-item-border-width:1px;
1681
- --tds-page-header-nav-item-color:var(--t-text-color);
1682
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1683
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1684
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1685
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1686
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1687
- }
1688
- }
1689
- }
1690
-
1691
- .tds-page-header{
1692
- display:flex;
1693
- flex-direction:column;
1694
- padding-top:var(--tds-page-header-padding-y);
1695
- color:var(--tds-page-header-color);
1696
- background:var(--tds-page-header-background-color);
1697
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1698
- }
1699
-
1700
- .tds-page-header:not(.has-nav){
1701
- padding-bottom:var(--tds-page-header-padding-y);
1702
- }
1703
-
1704
- .tds-page-header.inactive{
1705
- background:var(--tds-page-header-background-color-inactive);
1706
- }
1707
-
1708
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1709
- width:100%;
1710
- }
1711
-
1712
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1713
- display:flex;
1714
- flex-flow:row wrap;
1715
- gap:var(--t-spacing-half) var(--t-spacing-1);
1716
- align-items:flex-start;
1717
- justify-content:flex-start;
1718
- min-width:0;
1719
- }
1720
-
1721
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1722
- display:flex;
1723
- gap:var(--tds-page-header-nav-gap);
1724
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1725
- margin:0 0 -1px;
1726
- overflow:auto;
1727
- list-style:none;
1728
- background:var(--tds-page-header-nav-background);
1729
- }
1730
-
1731
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1732
- position:relative;
1733
- display:inline-flex;
1734
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1735
- font-size:var(--t-font-size-sm);
1736
- line-height:22px;
1737
- color:var(--tds-page-header-nav-item-color);
1738
- white-space:nowrap;
1739
- text-decoration:none;
1740
- -webkit-appearance:none;
1741
- -moz-appearance:none;
1742
- appearance:none;
1743
- cursor:pointer;
1744
- outline-offset:-2px;
1745
- background-color:var(--tds-page-header-nav-item-background-color);
1746
- background-clip:padding-box;
1747
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1748
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1749
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1750
- }
1751
-
1752
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1753
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1754
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1755
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1756
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1757
- }
1758
-
1759
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1760
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1761
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1762
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1763
- }
1764
-
1765
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1766
- background-color:var(--tds-page-header-nav-item-background-color-active);
1767
- border-color:var(--tds-page-header-nav-item-border-color-active);
1768
- }
1769
-
1770
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1771
- color:var(--tds-page-header-nav-item-color-disabled);
1772
- cursor:not-allowed;
1773
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1774
- opacity:1;
1775
- }
1776
-
1777
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1778
- position:relative;
1779
- }
1780
-
1781
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1782
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1783
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1784
- }
1785
-
1786
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1787
- position:absolute;
1788
- top:-5px;
1789
- right:-2px;
1790
- width:10px;
1791
- height:10px;
1792
- content:"";
1793
- background:var(--tds-page-header-nav-item-indicator-color);
1794
- border-radius:50%;
1795
- }
1796
-
1797
- @media (prefers-reduced-motion: no-preference){
1798
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1799
- animation:indicator-pulse 1.25s ease infinite;
1800
- }
1801
- }
1802
-
1803
- .tds-page-header__title-bar{
1804
- display:flex;
1805
- flex-direction:column;
1806
- gap:var(--t-spacing-2) var(--t-spacing-1);
1807
- align-items:flex-start;
1808
- justify-content:space-between;
1809
- padding:0 var(--tds-page-header-padding-x);
1810
- }
1811
-
1812
- .tds-page-header--profile > .tds-page-header__title-bar{
1813
- align-items:center;
1821
+ --tds-input-background-color:var(--t-form-background-color-error);
1822
+ --tds-input-border-color:var(--t-form-border-color-error);
1823
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1824
+ --tds-input-description-color:var(--t-text-color-status-error);
1825
+ --tds-input-description-invalid-icon-display:inline-block;
1814
1826
  }
1815
1827
 
1816
- .tds-page-header__primary{
1817
- width:100%;
1818
- }
1828
+ .tds-input:has(:is(input,textarea):required) label::after{
1829
+ margin-left:.25ch;
1830
+ color:var(--t-text-color-status-error);
1831
+ content:"*";
1832
+ }
1819
1833
 
1820
- .tds-page-header__primary h1{
1821
- margin:0;
1822
- font-size:var(--tds-page-header-headline-font-size);
1823
- font-weight:var(--t-font-weight-normal);
1824
- line-height:32px;
1825
- color:var(--tds-page-header-headline-color);
1826
- overflow-wrap:break-word;
1834
+ .tds-input:where(:has(:is(input,textarea):disabled)){
1835
+ --tds-input-border-color:var(--t-form-border-color-disabled);
1836
+ --tds-input-background-color:var(--t-form-background-color-disabled);
1837
+ --tds-input-color:var(--t-form-color-disabled);
1827
1838
  }
1828
1839
 
1829
- @media (min-width: 960px){
1830
- .tds-page-header__primary{
1831
- flex:1 1 max-content;
1832
- width:auto;
1833
- min-width:0;
1834
- max-width:100%;
1835
- }
1840
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1841
+ cursor:not-allowed;
1842
+ }
1836
1843
 
1837
- .tds-page-header__title-bar,
1838
- .tds-page-header--profile .tds-page-header__title-bar{
1839
- flex-flow:row nowrap;
1840
- row-gap:12px;
1841
- align-items:flex-start;
1844
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
1845
+ --tds-input-border-color:var(--t-form-border-color-readonly);
1846
+ --tds-input-background-color:var(--t-form-background-color-readonly);
1842
1847
  }
1843
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1844
- width:auto;
1845
- }
1846
1848
 
1847
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1848
- justify-content:flex-end;
1849
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1850
+ border-color:var(--tds-input-border-color-hover);
1849
1851
  }
1850
- }
1851
1852
 
1852
- .tds-page-header-phone,
1853
- .tds-page-header-email{
1854
- color:var(--tds-page-header-color);
1855
- white-space:nowrap;
1856
- }
1853
+ .tds-input.tds-input--lg{
1854
+ --tds-input-min-height:var(--t-container-size-lg);
1855
+ --tds-input-font-size:var(--t-font-size-lg);
1856
+ }
1857
1857
 
1858
- .tds-page-header-email{
1859
- max-width:100%;
1860
- overflow:hidden;
1861
- text-overflow:ellipsis;
1858
+ .tds-input-description{
1859
+ display:flex;
1860
+ gap:var(--t-spacing-half);
1861
+ align-items:flex-start;
1862
+ margin:0;
1863
+ font-size:var(--t-font-size-sm);
1864
+ line-height:1.35;
1865
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
1866
+ cursor:text;
1862
1867
  }
1863
1868
 
1864
- @keyframes indicator-pulse{
1865
- 0%{
1866
- opacity:.3;
1867
- transform:scale(.9);
1868
- }
1869
-
1870
- 100%{
1871
- opacity:0;
1872
- transform:scale(1.75);
1869
+ .tds-input-description .tds-input-description-invalid-icon{
1870
+ display:var(--tds-input-description-invalid-icon-display, none);
1871
+ flex-shrink:0;
1872
+ margin-block-start:calc(.5lh - .5em);
1873
+ line-height:1.35;
1873
1874
  }
1874
- }
1875
1875
 
1876
1876
  .tds-loading-spinner{
1877
1877
  --tds-loading-spinner-size:1.25em;
@@ -3271,6 +3271,80 @@ a[class="tds-btn"]{
3271
3271
  @media (prefers-color-scheme: dark){
3272
3272
  }
3273
3273
 
3274
+ .tds-checkbox-group{
3275
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3276
+ --tds-checkbox-group-line-height:1.4;
3277
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3278
+
3279
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3280
+
3281
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3282
+ --tds-checkbox-group-description-line-height:1.35;
3283
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3284
+ --tds-checkbox-group-description-invalid-icon-display:none;
3285
+ display:flex;
3286
+ flex-direction:column;
3287
+ gap:var(--tds-checkbox-group-gap);
3288
+ padding:0;
3289
+ margin:0;
3290
+
3291
+ font-size:var(--tds-checkbox-group-font-size);
3292
+ line-height:var(--tds-checkbox-group-line-height);
3293
+ border:0;
3294
+ }
3295
+
3296
+ .tds-checkbox-group legend{
3297
+ padding:0;
3298
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3299
+ }
3300
+
3301
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3302
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3303
+ }
3304
+
3305
+ .tds-checkbox-group[aria-invalid="true"]{
3306
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3307
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3308
+ }
3309
+
3310
+ .tds-checkbox-group:has(input:required) legend::after{
3311
+ margin-left:.25ch;
3312
+ color:var(--t-text-color-status-error);
3313
+ content:"*";
3314
+ }
3315
+
3316
+ .tds-checkbox-group-fields{
3317
+ display:flex;
3318
+ flex-direction:column;
3319
+ gap:var(--tds-checkbox-group-gap);
3320
+ align-items:flex-start;
3321
+ }
3322
+
3323
+ .tds-checkbox-group-description{
3324
+ display:flex;
3325
+ gap:var(--t-spacing-half);
3326
+ align-items:flex-start;
3327
+ margin:0;
3328
+ font-size:var(--tds-checkbox-group-description-font-size);
3329
+ line-height:var(--tds-checkbox-group-description-line-height);
3330
+ color:var(--tds-checkbox-group-description-color);
3331
+ cursor:text;
3332
+ }
3333
+
3334
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3335
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3336
+ flex-shrink:0;
3337
+ margin-top:calc(.5lh - .5em);
3338
+ line-height:var(--tds-checkbox-group-description-line-height);
3339
+ }
3340
+
3341
+ .tds-checkbox-group--sm{
3342
+ --tds-checkbox-group-line-height:1.35;
3343
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3344
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3345
+ --tds-checkbox-group-description-line-height:1.3;
3346
+ }
3347
+
3274
3348
  .tds-date-picker{
3275
3349
  --tds-date-picker-border-color:var(--t-form-border-color);
3276
3350
  --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
@@ -3309,12 +3383,9 @@ a[class="tds-btn"]{
3309
3383
  --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3310
3384
  --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3311
3385
  --tds-date-picker-color:var(--t-form-color-disabled);
3386
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3312
3387
  }
3313
3388
 
3314
- .tds-date-picker[data-disabled] .tds-date-picker-label{
3315
- color:var(--t-form-color-disabled);
3316
- }
3317
-
3318
3389
  .tds-date-picker[data-disabled] .tds-date-picker-field{
3319
3390
  cursor:not-allowed;
3320
3391
  }
@@ -3343,7 +3414,7 @@ a[class="tds-btn"]{
3343
3414
  -webkit-appearance:none;
3344
3415
  -moz-appearance:none;
3345
3416
  appearance:none;
3346
- cursor:default;
3417
+ cursor:text;
3347
3418
  outline:var(--t-focus-ring-width) solid transparent;
3348
3419
  outline-offset:0;
3349
3420
  background-color:var(--tds-date-picker-background-color);
@@ -3361,24 +3432,31 @@ a[class="tds-btn"]{
3361
3432
  border-color:var(--tds-date-picker-border-color-active);
3362
3433
  }
3363
3434
 
3435
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3436
+ color:var(--t-form-color-readonly);
3437
+ background-color:var(--t-form-background-color-readonly);
3438
+ border-color:var(--t-form-border-color-readonly);
3439
+ }
3440
+
3441
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3442
+ border-color:var(--t-form-border-color-readonly);
3443
+ }
3444
+
3445
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3446
+ outline-color:var(--t-focus-ring-color);
3447
+ outline-offset:var(--t-focus-ring-offset);
3448
+ border-color:var(--t-form-border-color-hover);
3449
+ }
3450
+
3364
3451
  .tds-date-picker-input{
3365
- display:flex;
3366
3452
  flex:1;
3367
- align-items:center;
3368
3453
  padding-block:var(--tds-date-picker-padding-block);
3369
3454
  padding-inline-start:var(--t-spacing-1);
3370
- font-family:inherit;
3371
- font-size:inherit;
3372
3455
  font-variant-numeric:tabular-nums;
3373
- color:inherit;
3374
- outline:0;
3375
- background:transparent;
3376
- border:0;
3377
3456
  }
3378
3457
 
3379
3458
  .tds-date-picker-segment{
3380
- padding-inline:1px;
3381
- font-variant-numeric:tabular-nums;
3459
+ padding-inline:2px;
3382
3460
  caret-color:transparent;
3383
3461
  border-radius:var(--t-border-radius-sm);
3384
3462
  }
@@ -3595,80 +3673,6 @@ a[class="tds-btn"]{
3595
3673
  color:var(--t-text-color-secondary);
3596
3674
  }
3597
3675
 
3598
- .tds-checkbox-group{
3599
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3600
- --tds-checkbox-group-line-height:1.4;
3601
- --tds-checkbox-group-gap:var(--t-spacing-1);
3602
-
3603
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3604
-
3605
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3606
- --tds-checkbox-group-description-line-height:1.35;
3607
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3608
- --tds-checkbox-group-description-invalid-icon-display:none;
3609
- display:flex;
3610
- flex-direction:column;
3611
- gap:var(--tds-checkbox-group-gap);
3612
- padding:0;
3613
- margin:0;
3614
-
3615
- font-size:var(--tds-checkbox-group-font-size);
3616
- line-height:var(--tds-checkbox-group-line-height);
3617
- border:0;
3618
- }
3619
-
3620
- .tds-checkbox-group legend{
3621
- padding:0;
3622
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3623
- }
3624
-
3625
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3626
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3627
- }
3628
-
3629
- .tds-checkbox-group[aria-invalid="true"]{
3630
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3631
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3632
- }
3633
-
3634
- .tds-checkbox-group:has(input:required) legend::after{
3635
- margin-left:.25ch;
3636
- color:var(--t-text-color-status-error);
3637
- content:"*";
3638
- }
3639
-
3640
- .tds-checkbox-group-fields{
3641
- display:flex;
3642
- flex-direction:column;
3643
- gap:var(--tds-checkbox-group-gap);
3644
- align-items:flex-start;
3645
- }
3646
-
3647
- .tds-checkbox-group-description{
3648
- display:flex;
3649
- gap:var(--t-spacing-half);
3650
- align-items:flex-start;
3651
- margin:0;
3652
- font-size:var(--tds-checkbox-group-description-font-size);
3653
- line-height:var(--tds-checkbox-group-description-line-height);
3654
- color:var(--tds-checkbox-group-description-color);
3655
- cursor:text;
3656
- }
3657
-
3658
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3659
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3660
- flex-shrink:0;
3661
- margin-top:calc(.5lh - .5em);
3662
- line-height:var(--tds-checkbox-group-description-line-height);
3663
- }
3664
-
3665
- .tds-checkbox-group--sm{
3666
- --tds-checkbox-group-line-height:1.35;
3667
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3668
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3669
- --tds-checkbox-group-description-line-height:1.3;
3670
- }
3671
-
3672
3676
  .t-banner{
3673
3677
  --t-banner-font-size:var(--t-font-size-md);
3674
3678
  --t-banner-font-color:var(--t-text-color);