@planningcenter/tapestry 3.2.0-rc.2 → 3.2.0-rc.3

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 (32) hide show
  1. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  2. package/dist/components/date-picker/DatePicker.js +1 -1
  3. package/dist/components/date-picker/DatePicker.js.map +1 -1
  4. package/dist/components/page-header/index.js +1 -1
  5. package/dist/components/sidenav/index.js +1 -1
  6. package/dist/reactRender.css +550 -550
  7. package/dist/reactRender.css.map +1 -1
  8. package/dist/reactRenderLegacy.css +550 -550
  9. package/dist/reactRenderLegacy.css.map +1 -1
  10. package/dist/tapestry-wc/dist/components/{p-D5D8ChKE.js → p-Bg1wdM3w.js} +3 -3
  11. package/dist/tapestry-wc/dist/components/{p-D5D8ChKE.js.map → p-Bg1wdM3w.js.map} +1 -1
  12. package/dist/tapestry-wc/dist/components/{p-CyhBTTxR.js → p-BoYusIUa.js} +2 -2
  13. package/dist/tapestry-wc/dist/components/{p-CyhBTTxR.js.map → p-BoYusIUa.js.map} +1 -1
  14. package/dist/tapestry-wc/dist/components/{p-BH1OEQ72.js → p-BsMAyoS-.js} +3 -3
  15. package/dist/tapestry-wc/dist/components/{p-BH1OEQ72.js.map → p-BsMAyoS-.js.map} +1 -1
  16. package/dist/tapestry-wc/dist/components/{p-Ou7nmicT.js → p-Dle7yETR.js} +3 -3
  17. package/dist/tapestry-wc/dist/components/{p-Ou7nmicT.js.map → p-Dle7yETR.js.map} +1 -1
  18. package/dist/tapestry-wc/dist/components/{p-xgFPmKYP.js → p-wFOQvxnB.js} +2 -2
  19. package/dist/tapestry-wc/dist/components/{p-xgFPmKYP.js.map → p-wFOQvxnB.js.map} +1 -1
  20. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  21. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  22. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  23. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  27. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  28. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  29. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  30. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  31. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  32. package/package.json +5 -5
package/dist/reactRenderLegacy.css CHANGED
@@ -1,327 +1,396 @@
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);
102
-
103
- --tds-radio-label-color:var(--t-form-color-disabled);
104
- --tds-radio-description-color:var(--t-form-color-disabled);
105
- --tds-radio-cursor:not-allowed;
106
- }
107
-
108
- .tds-radio:has(input:disabled) input:checked{
109
- --tds-radio-input-background-color:var(--t-form-background-color);
110
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
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;
111
138
  }
112
139
 
113
- .tds-radio-description{
114
- display:flex;
115
- grid-area:2 / 2;
116
- gap:var(--t-spacing-half);
117
- align-items:flex-start;
118
- margin:0;
119
- font-size:var(--tds-radio-description-font-size);
120
- line-height:var(--tds-radio-description-line-height);
121
- color:var(--tds-radio-description-color);
122
- cursor:text;
123
- }
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
+ }
124
146
 
125
- .tds-radio--sm{
126
- --tds-radio-line-height:1.35;
127
- --tds-radio-input-size:var(--t-element-size-sm);
128
- --tds-radio-font-size:var(--t-font-size-sm);
129
- --tds-radio-description-font-size:var(--t-font-size-xs);
130
- --tds-radio-description-line-height:1.3;
131
- }
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
+ }
132
152
 
133
- .tds-checkbox{
134
- --tds-checkbox-font-size:var(--t-font-size-md);
135
- --tds-checkbox-cursor:pointer;
136
- --tds-checkbox-line-height:1.4;
137
- --tds-checkbox-transition-property:background-color, border-color;
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
+ }
138
157
 
139
- --tds-checkbox-input-size:var(--t-element-size-md);
140
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
141
- --tds-checkbox-input-border-color:var(--t-form-border-color);
142
- --tds-checkbox-input-background-color:transparent;
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
+ }
143
164
 
144
- --tds-checkbox-input-icon:none;
145
- --tds-checkbox-input-icon-visibility:hidden;
146
- --tds-checkbox-input-icon-opacity:0;
147
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
167
+ }
148
168
 
149
- --tds-checkbox-label-color:var(--t-form-color);
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
+ }
150
173
 
151
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
152
- --tds-checkbox-description-line-height:1.35;
153
- --tds-checkbox-description-color:var(--t-text-color-secondary);
154
- --tds-checkbox-description-invalid-icon-display:none;
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{
192
+ display:flex;
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
195
+ align-items:flex-start;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
198
+ }
199
+
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
+ }
262
+ }
263
+
264
+ .tds-radio{
265
+ --tds-radio-font-size:var(--t-font-size-md);
266
+ --tds-radio-cursor:pointer;
267
+ --tds-radio-line-height:1.4;
268
+ --tds-radio-transition-property:border-width;
269
+
270
+ --tds-radio-input-size:var(--t-element-size-md);
271
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
272
+ --tds-radio-input-border-color:var(--t-form-border-color);
273
+ --tds-radio-input-border-width:var(--t-form-border-width);
274
+ --tds-radio-input-background-color:transparent;
275
+
276
+ --tds-radio-label-color:var(--t-form-color);
277
+
278
+ --tds-radio-description-font-size:var(--t-font-size-sm);
279
+ --tds-radio-description-line-height:1.35;
280
+ --tds-radio-description-color:var(--t-text-color-secondary);
155
281
 
156
282
  position:relative;
157
283
  display:inline-grid;
158
284
  grid-template-columns:auto;
159
285
  grid-auto-columns:1fr;
160
286
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
161
- line-height:var(--tds-checkbox-line-height);
162
- cursor:var(--tds-checkbox-cursor);
287
+ line-height:var(--tds-radio-line-height);
288
+ cursor:var(--tds-radio-cursor);
163
289
  -webkit-user-select:none;
164
290
  -moz-user-select:none;
165
291
  user-select:none;
166
292
  }
167
293
 
168
- .tds-checkbox label{
294
+ .tds-radio label{
169
295
  grid-area:1 / 2;
170
- font-size:var(--tds-checkbox-font-size);
296
+ font-size:var(--tds-radio-font-size);
171
297
  font-weight:var(--t-font-weight-normal);
172
- color:var(--tds-checkbox-label-color);
173
- cursor:var(--tds-checkbox-cursor);
174
- }
175
-
176
- .tds-checkbox tds-indeterminate{
177
- display:flex;
298
+ color:var(--tds-radio-label-color);
299
+ cursor:var(--tds-radio-cursor);
178
300
  }
179
301
 
180
- .tds-checkbox input[type="checkbox"]{
302
+ .tds-radio input[type="radio"]{
181
303
  position:relative;
182
304
  width:1em;
183
305
  height:1em;
184
306
  margin:calc((1lh - 1em) / 2) 0 0;
185
- font-size:var(--tds-checkbox-font-size);
307
+ font-size:var(--tds-radio-font-size);
186
308
  line-height:inherit;
187
309
  -webkit-appearance:none;
188
310
  -moz-appearance:none;
189
311
  appearance:none;
190
- cursor:var(--tds-checkbox-cursor);
191
- background-color:var(--tds-checkbox-input-background-color);
192
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
193
- border-radius:var(--tds-checkbox-input-border-radius);
312
+ cursor:var(--tds-radio-cursor);
313
+ background-color:var(--tds-radio-input-background-color);
314
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
315
+ border-radius:var(--tds-radio-input-border-radius);
194
316
  transition-timing-function:var(--t-ease-in-out);
195
317
  transition-duration:var(--t-duration-200);
196
- transition-property:var(--tds-checkbox-transition-property);
318
+ transition-property:var(--tds-radio-transition-property);
197
319
  }
198
320
 
199
- :is(.tds-checkbox input[type="checkbox"])::before{
200
- position:absolute;
201
- top:50%;
202
- left:50%;
203
- visibility:var(--tds-checkbox-input-icon-visibility);
204
- width:100%;
205
- height:100%;
206
- content:"";
207
- background-color:var(--tds-checkbox-input-icon-fill);
208
- border-radius:var(--tds-checkbox-input-border-radius);
209
- opacity:var(--tds-checkbox-input-icon-opacity);
210
- -webkit-mask-image:var(--tds-checkbox-input-icon);
211
- mask-image:var(--tds-checkbox-input-icon);
212
- -webkit-mask-repeat:no-repeat;
213
- mask-repeat:no-repeat;
214
- -webkit-mask-size:contain;
215
- mask-size:contain;
216
- transform:translate(-50%, -50%);
217
- }
218
-
219
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
220
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
221
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
321
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
322
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
323
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
222
324
  }
223
325
 
224
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
326
+ :is(.tds-radio input[type="radio"]):focus-visible{
225
327
  outline:var(--t-focus-ring-outline);
226
328
  outline-offset:var(--t-focus-ring-offset);
227
329
  }
228
330
 
229
- :is(.tds-checkbox input[type="checkbox"]):disabled{
331
+ :is(.tds-radio input[type="radio"]):disabled{
230
332
  pointer-events:none;
231
333
  }
232
334
 
233
335
  @media (prefers-reduced-motion: reduce){
234
336
 
235
- .tds-checkbox input[type="checkbox"]{
236
- --tds-checkbox-transition-property:none;
337
+ .tds-radio input[type="radio"]{
338
+ --tds-radio-transition-property:none;
237
339
  }
238
340
  }
239
341
 
240
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
241
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
242
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
243
- --tds-checkbox-input-icon-visibility:visible;
244
- --tds-checkbox-input-icon-opacity:1;
342
+ .tds-radio:has(input:checked){
343
+ --tds-radio-input-background-color:var(--t-form-background-color);
344
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
345
+ --tds-radio-input-border-width:4px;
245
346
  }
246
347
 
247
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
248
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
249
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
348
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
349
+ --tds-radio-input-background-color:var(--t-form-background-color);
350
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
250
351
  }
251
352
 
252
- .tds-checkbox:has(input:checked){
253
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
254
- }
255
-
256
- .tds-checkbox:has(input:indeterminate){
257
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
258
- }
259
-
260
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
261
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
262
- --tds-checkbox-description-color:var(--t-text-color-status-error);
263
- --tds-checkbox-description-invalid-icon-display:inline-block;
353
+ .tds-radio:has(input:user-invalid){
354
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
264
355
  }
265
356
 
266
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
267
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
268
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
269
- }
270
-
271
- :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{
272
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
273
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
274
- }
275
-
276
- :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){
277
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
278
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
279
- }
280
-
281
- .tds-checkbox:has(input:required) label::after{
282
- margin-left:.25ch;
283
- color:var(--t-text-color-status-error);
284
- content:"*";
357
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
358
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
359
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
285
360
  }
286
361
 
287
- .tds-checkbox:has(input:disabled){
288
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
289
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
362
+ .tds-radio:has(input:disabled){
363
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
364
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
290
365
 
291
- --tds-checkbox-label-color:var(--t-form-color-disabled);
292
- --tds-checkbox-description-color:var(--t-form-color-disabled);
293
- --tds-checkbox-cursor:not-allowed;
366
+ --tds-radio-label-color:var(--t-form-color-disabled);
367
+ --tds-radio-description-color:var(--t-form-color-disabled);
368
+ --tds-radio-cursor:not-allowed;
294
369
  }
295
370
 
296
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
297
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
371
+ .tds-radio:has(input:disabled) input:checked{
372
+ --tds-radio-input-background-color:var(--t-form-background-color);
373
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
298
374
  }
299
375
 
300
- .tds-checkbox-description{
376
+ .tds-radio-description{
301
377
  display:flex;
302
378
  grid-area:2 / 2;
303
379
  gap:var(--t-spacing-half);
304
380
  align-items:flex-start;
305
381
  margin:0;
306
- font-size:var(--tds-checkbox-description-font-size);
307
- line-height:var(--tds-checkbox-description-line-height);
308
- color:var(--tds-checkbox-description-color);
382
+ font-size:var(--tds-radio-description-font-size);
383
+ line-height:var(--tds-radio-description-line-height);
384
+ color:var(--tds-radio-description-color);
309
385
  cursor:text;
310
386
  }
311
387
 
312
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
313
- display:var(--tds-checkbox-description-invalid-icon-display);
314
- flex-shrink:0;
315
- margin-top:calc(.5lh - .5em);
316
- line-height:var(--tds-checkbox-description-line-height);
317
- }
318
-
319
- .tds-checkbox--sm{
320
- --tds-checkbox-line-height:1.35;
321
- --tds-checkbox-input-size:var(--t-element-size-sm);
322
- --tds-checkbox-font-size:var(--t-font-size-sm);
323
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
324
- --tds-checkbox-description-line-height:1.3;
388
+ .tds-radio--sm{
389
+ --tds-radio-line-height:1.35;
390
+ --tds-radio-input-size:var(--t-element-size-sm);
391
+ --tds-radio-font-size:var(--t-font-size-sm);
392
+ --tds-radio-description-font-size:var(--t-font-size-xs);
393
+ --tds-radio-description-line-height:1.3;
325
394
  }
326
395
 
327
396
 
@@ -686,290 +755,285 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
686
755
  flex-direction:column;
687
756
  }
688
757
 
758
+ .tds-radio-group{
759
+ --tds-radio-group-font-size:var(--t-font-size-md);
760
+ --tds-radio-group-line-height:1.4;
761
+ --tds-radio-group-gap:var(--t-spacing-1);
689
762
 
690
- :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{
691
- -webkit-appearance:none;
692
- appearance:none;
693
- }
694
-
695
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
696
- inline-size:1em;
697
- block-size:2em;
698
- }
763
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
699
764
 
700
- @supports (field-sizing: content){
701
- .tds-input--auto-width{
702
- inline-size:-moz-fit-content;
703
- inline-size:fit-content;
704
- }
765
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
766
+ --tds-radio-group-description-line-height:1.35;
767
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
768
+ --tds-radio-group-description-invalid-icon-display:none;
769
+ display:flex;
770
+ flex-direction:column;
771
+ gap:var(--tds-radio-group-gap);
772
+ padding:0;
773
+ margin:0;
705
774
 
706
- .tds-input--auto-width input{
707
- field-sizing:content;
708
- inline-size:auto;
709
- }
775
+ font-size:var(--tds-radio-group-font-size);
776
+ line-height:var(--tds-radio-group-line-height);
777
+ border:0;
710
778
  }
711
779
 
712
- @layer t-critical{
713
- tds-page-header:not(.hydrated){
714
- display:none;
780
+ .tds-radio-group legend{
781
+ padding:0;
782
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
715
783
  }
716
- }
717
-
718
- @layer t-component{
719
- .tds-page-header{
720
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
721
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
722
- --tds-page-header-color:var(--t-text-color);
723
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
724
- --tds-page-header-headline-color:var(--t-text-color-headline);
725
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
726
- --tds-page-header-padding-x:var(--t-spacing-2);
727
- --tds-page-header-padding-y:var(--t-spacing-2);
728
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
729
- --tds-page-header-nav-gap:var(--t-spacing-1);
730
- --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%);
731
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
732
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
733
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
734
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
735
- --tds-page-header-nav-item-border-width:1px;
736
-
737
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
738
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
739
784
 
740
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
741
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
742
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
743
-
744
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
745
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
746
-
747
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
748
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
749
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
750
-
751
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
752
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
753
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
754
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
755
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
785
+ .tds-radio-group:has(.tds-radio-group-description){
786
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
756
787
  }
757
788
 
758
- .tds-page-header--profile{
759
- --tds-page-header-padding-y:20px;
789
+ .tds-radio-group[aria-invalid="true"]{
790
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
791
+ --tds-radio-group-description-invalid-icon-display:inline-block;
760
792
  }
761
793
 
762
- @supports (color: light-dark(#fff, #000)){
763
- .tds-page-header{
764
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
765
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
794
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
795
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
766
796
  }
767
- }
768
797
 
769
- @media (min-width: 600px){
770
- .tds-page-header{
771
- --tds-page-header-background-color:var(--t-surface-color-canvas);
772
- --tds-page-header-color:var(--t-text-color-secondary);
773
- --tds-page-header-bottom-border-color:var(--t-border-color);
774
- --tds-page-header-padding-x:var(--t-spacing-3);
775
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
776
- --tds-page-header-nav-gap:var(--t-spacing-half);
777
- --tds-page-header-nav-background:transparent;
778
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
779
- --tds-page-header-nav-item-border-width:1px;
780
- --tds-page-header-nav-item-color:var(--t-text-color);
781
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
782
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
783
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
784
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
785
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
798
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
799
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
800
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
801
+ }
802
+
803
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
804
+ --tds-radio-input-background-color:var(--t-form-background-color);
805
+ }
806
+
807
+ .tds-radio-group:has(input:required) legend::after{
808
+ margin-left:.25ch;
809
+ color:var(--t-text-color-status-error);
810
+ content:"*";
786
811
  }
787
- }
788
- }
789
812
 
790
- .tds-page-header{
813
+ .tds-radio-group-fields{
791
814
  display:flex;
792
815
  flex-direction:column;
793
- padding-top:var(--tds-page-header-padding-y);
794
- color:var(--tds-page-header-color);
795
- background:var(--tds-page-header-background-color);
796
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
816
+ gap:var(--tds-radio-group-gap);
817
+ align-items:flex-start;
797
818
  }
798
819
 
799
- .tds-page-header:not(.has-nav){
800
- padding-bottom:var(--tds-page-header-padding-y);
801
- }
820
+ .tds-radio-group-description{
821
+ display:flex;
822
+ gap:var(--t-spacing-half);
823
+ align-items:flex-start;
824
+ margin:0;
825
+ font-size:var(--tds-radio-group-description-font-size);
826
+ line-height:var(--tds-radio-group-description-line-height);
827
+ color:var(--tds-radio-group-description-color);
828
+ cursor:text;
829
+ }
802
830
 
803
- .tds-page-header.inactive{
804
- background:var(--tds-page-header-background-color-inactive);
805
- }
831
+ .tds-radio-group-description-invalid-icon{
832
+ display:var(--tds-radio-group-description-invalid-icon-display);
833
+ flex-shrink:0;
834
+ margin-top:calc(.5lh - .5em);
835
+ line-height:var(--tds-radio-group-description-line-height);
836
+ }
806
837
 
807
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
808
- width:100%;
809
- }
838
+ .tds-radio-group--sm{
839
+ --tds-radio-group-line-height:1.35;
840
+ --tds-radio-group-font-size:var(--t-font-size-sm);
841
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
842
+ --tds-radio-group-description-line-height:1.3;
843
+ }
810
844
 
811
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
812
- display:flex;
813
- flex-flow:row wrap;
814
- gap:var(--t-spacing-half) var(--t-spacing-1);
815
- align-items:flex-start;
816
- justify-content:flex-start;
817
- min-width:0;
818
- }
845
+ .tds-checkbox{
846
+ --tds-checkbox-font-size:var(--t-font-size-md);
847
+ --tds-checkbox-cursor:pointer;
848
+ --tds-checkbox-line-height:1.4;
849
+ --tds-checkbox-transition-property:background-color, border-color;
819
850
 
820
- :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{
821
- display:flex;
822
- gap:var(--tds-page-header-nav-gap);
823
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
824
- margin:0 0 -1px;
825
- overflow:auto;
826
- list-style:none;
827
- background:var(--tds-page-header-nav-background);
828
- }
851
+ --tds-checkbox-input-size:var(--t-element-size-md);
852
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
853
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
854
+ --tds-checkbox-input-background-color:transparent;
829
855
 
830
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
831
- position:relative;
832
- display:inline-flex;
833
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
834
- font-size:var(--t-font-size-sm);
835
- line-height:22px;
836
- color:var(--tds-page-header-nav-item-color);
837
- white-space:nowrap;
838
- text-decoration:none;
839
- -webkit-appearance:none;
840
- -moz-appearance:none;
841
- appearance:none;
842
- cursor:pointer;
843
- outline-offset:-2px;
844
- background-color:var(--tds-page-header-nav-item-background-color);
845
- background-clip:padding-box;
846
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
847
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
848
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
849
- }
856
+ --tds-checkbox-input-icon:none;
857
+ --tds-checkbox-input-icon-visibility:hidden;
858
+ --tds-checkbox-input-icon-opacity:0;
859
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
850
860
 
851
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
852
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
853
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
854
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
855
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
856
- }
861
+ --tds-checkbox-label-color:var(--t-form-color);
857
862
 
858
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
859
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
860
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
861
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
862
- }
863
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
864
+ --tds-checkbox-description-line-height:1.35;
865
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
866
+ --tds-checkbox-description-invalid-icon-display:none;
863
867
 
864
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
865
- background-color:var(--tds-page-header-nav-item-background-color-active);
866
- border-color:var(--tds-page-header-nav-item-border-color-active);
867
- }
868
+ position:relative;
869
+ display:inline-grid;
870
+ grid-template-columns:auto;
871
+ grid-auto-columns:1fr;
872
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
873
+ line-height:var(--tds-checkbox-line-height);
874
+ cursor:var(--tds-checkbox-cursor);
875
+ -webkit-user-select:none;
876
+ -moz-user-select:none;
877
+ user-select:none;
878
+ }
868
879
 
869
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
870
- color:var(--tds-page-header-nav-item-color-disabled);
871
- cursor:not-allowed;
872
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
873
- opacity:1;
874
- }
880
+ .tds-checkbox label{
881
+ grid-area:1 / 2;
882
+ font-size:var(--tds-checkbox-font-size);
883
+ font-weight:var(--t-font-weight-normal);
884
+ color:var(--tds-checkbox-label-color);
885
+ cursor:var(--tds-checkbox-cursor);
886
+ }
875
887
 
876
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
877
- position:relative;
888
+ .tds-checkbox tds-indeterminate{
889
+ display:flex;
890
+ }
891
+
892
+ .tds-checkbox input[type="checkbox"]{
893
+ position:relative;
894
+ width:1em;
895
+ height:1em;
896
+ margin:calc((1lh - 1em) / 2) 0 0;
897
+ font-size:var(--tds-checkbox-font-size);
898
+ line-height:inherit;
899
+ -webkit-appearance:none;
900
+ -moz-appearance:none;
901
+ appearance:none;
902
+ cursor:var(--tds-checkbox-cursor);
903
+ background-color:var(--tds-checkbox-input-background-color);
904
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
905
+ border-radius:var(--tds-checkbox-input-border-radius);
906
+ transition-timing-function:var(--t-ease-in-out);
907
+ transition-duration:var(--t-duration-200);
908
+ transition-property:var(--tds-checkbox-transition-property);
909
+ }
910
+
911
+ :is(.tds-checkbox input[type="checkbox"])::before{
912
+ position:absolute;
913
+ top:50%;
914
+ left:50%;
915
+ visibility:var(--tds-checkbox-input-icon-visibility);
916
+ width:100%;
917
+ height:100%;
918
+ content:"";
919
+ background-color:var(--tds-checkbox-input-icon-fill);
920
+ border-radius:var(--tds-checkbox-input-border-radius);
921
+ opacity:var(--tds-checkbox-input-icon-opacity);
922
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
923
+ mask-image:var(--tds-checkbox-input-icon);
924
+ -webkit-mask-repeat:no-repeat;
925
+ mask-repeat:no-repeat;
926
+ -webkit-mask-size:contain;
927
+ mask-size:contain;
928
+ transform:translate(-50%, -50%);
878
929
  }
879
930
 
880
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
881
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
882
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
883
- }
931
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
932
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
933
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
934
+ }
935
+
936
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
937
+ outline:var(--t-focus-ring-outline);
938
+ outline-offset:var(--t-focus-ring-offset);
939
+ }
884
940
 
885
- :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{
886
- position:absolute;
887
- top:-5px;
888
- right:-2px;
889
- width:10px;
890
- height:10px;
891
- content:"";
892
- background:var(--tds-page-header-nav-item-indicator-color);
893
- border-radius:50%;
894
- }
941
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
942
+ pointer-events:none;
943
+ }
895
944
 
896
- @media (prefers-reduced-motion: no-preference){
897
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
898
- animation:indicator-pulse 1.25s ease infinite;
899
- }
900
- }
945
+ @media (prefers-reduced-motion: reduce){
901
946
 
902
- .tds-page-header__title-bar{
903
- display:flex;
904
- flex-direction:column;
905
- gap:var(--t-spacing-2) var(--t-spacing-1);
906
- align-items:flex-start;
907
- justify-content:space-between;
908
- padding:0 var(--tds-page-header-padding-x);
909
- }
947
+ .tds-checkbox input[type="checkbox"]{
948
+ --tds-checkbox-transition-property:none;
949
+ }
950
+ }
910
951
 
911
- .tds-page-header--profile > .tds-page-header__title-bar{
912
- align-items:center;
952
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
953
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
954
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
955
+ --tds-checkbox-input-icon-visibility:visible;
956
+ --tds-checkbox-input-icon-opacity:1;
913
957
  }
914
958
 
915
- .tds-page-header__primary{
916
- width:100%;
917
- }
959
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
960
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
961
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
962
+ }
918
963
 
919
- .tds-page-header__primary h1{
920
- margin:0;
921
- font-size:var(--tds-page-header-headline-font-size);
922
- font-weight:var(--t-font-weight-normal);
923
- line-height:32px;
924
- color:var(--tds-page-header-headline-color);
925
- overflow-wrap:break-word;
964
+ .tds-checkbox:has(input:checked){
965
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
926
966
  }
927
967
 
928
- @media (min-width: 960px){
929
- .tds-page-header__primary{
930
- flex:1 1 max-content;
931
- width:auto;
932
- min-width:0;
933
- max-width:100%;
968
+ .tds-checkbox:has(input:indeterminate){
969
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
934
970
  }
935
971
 
936
- .tds-page-header__title-bar,
937
- .tds-page-header--profile .tds-page-header__title-bar{
938
- flex-flow:row nowrap;
939
- row-gap:12px;
940
- align-items:flex-start;
972
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
973
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
974
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
975
+ --tds-checkbox-description-invalid-icon-display:inline-block;
941
976
  }
942
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
943
- width:auto;
977
+
978
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
979
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
980
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
944
981
  }
945
982
 
946
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
947
- justify-content:flex-end;
983
+ :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{
984
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
985
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
948
986
  }
949
- }
950
987
 
951
- .tds-page-header-phone,
952
- .tds-page-header-email{
953
- color:var(--tds-page-header-color);
954
- white-space:nowrap;
955
- }
988
+ :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){
989
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
990
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
991
+ }
956
992
 
957
- .tds-page-header-email{
958
- max-width:100%;
959
- overflow:hidden;
960
- text-overflow:ellipsis;
961
- }
993
+ .tds-checkbox:has(input:required) label::after{
994
+ margin-left:.25ch;
995
+ color:var(--t-text-color-status-error);
996
+ content:"*";
997
+ }
962
998
 
963
- @keyframes indicator-pulse{
964
- 0%{
965
- opacity:.3;
966
- transform:scale(.9);
999
+ .tds-checkbox:has(input:disabled){
1000
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1001
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1002
+
1003
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1004
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1005
+ --tds-checkbox-cursor:not-allowed;
967
1006
  }
968
1007
 
969
- 100%{
970
- opacity:0;
971
- transform:scale(1.75);
1008
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1009
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1010
+ }
1011
+
1012
+ .tds-checkbox-description{
1013
+ display:flex;
1014
+ grid-area:2 / 2;
1015
+ gap:var(--t-spacing-half);
1016
+ align-items:flex-start;
1017
+ margin:0;
1018
+ font-size:var(--tds-checkbox-description-font-size);
1019
+ line-height:var(--tds-checkbox-description-line-height);
1020
+ color:var(--tds-checkbox-description-color);
1021
+ cursor:text;
1022
+ }
1023
+
1024
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1025
+ display:var(--tds-checkbox-description-invalid-icon-display);
1026
+ flex-shrink:0;
1027
+ margin-top:calc(.5lh - .5em);
1028
+ line-height:var(--tds-checkbox-description-line-height);
972
1029
  }
1030
+
1031
+ .tds-checkbox--sm{
1032
+ --tds-checkbox-line-height:1.35;
1033
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1034
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1035
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1036
+ --tds-checkbox-description-line-height:1.3;
973
1037
  }
974
1038
 
975
1039
  .tds-toggle-switch{
@@ -1113,93 +1177,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1113
1177
  --tds-toggle-switch-display:inline-flex;
1114
1178
  }
1115
1179
 
1116
- .tds-radio-group{
1117
- --tds-radio-group-font-size:var(--t-font-size-md);
1118
- --tds-radio-group-line-height:1.4;
1119
- --tds-radio-group-gap:var(--t-spacing-1);
1120
-
1121
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1122
-
1123
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1124
- --tds-radio-group-description-line-height:1.35;
1125
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1126
- --tds-radio-group-description-invalid-icon-display:none;
1127
- display:flex;
1128
- flex-direction:column;
1129
- gap:var(--tds-radio-group-gap);
1130
- padding:0;
1131
- margin:0;
1132
-
1133
- font-size:var(--tds-radio-group-font-size);
1134
- line-height:var(--tds-radio-group-line-height);
1135
- border:0;
1136
- }
1137
-
1138
- .tds-radio-group legend{
1139
- padding:0;
1140
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1141
- }
1142
-
1143
- .tds-radio-group:has(.tds-radio-group-description){
1144
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1145
- }
1146
-
1147
- .tds-radio-group[aria-invalid="true"]{
1148
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1149
- --tds-radio-group-description-invalid-icon-display:inline-block;
1150
- }
1151
-
1152
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1153
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1154
- }
1155
-
1156
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1157
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1158
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1159
- }
1160
-
1161
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1162
- --tds-radio-input-background-color:var(--t-form-background-color);
1163
- }
1164
-
1165
- .tds-radio-group:has(input:required) legend::after{
1166
- margin-left:.25ch;
1167
- color:var(--t-text-color-status-error);
1168
- content:"*";
1169
- }
1170
-
1171
- .tds-radio-group-fields{
1172
- display:flex;
1173
- flex-direction:column;
1174
- gap:var(--tds-radio-group-gap);
1175
- align-items:flex-start;
1176
- }
1177
-
1178
- .tds-radio-group-description{
1179
- display:flex;
1180
- gap:var(--t-spacing-half);
1181
- align-items:flex-start;
1182
- margin:0;
1183
- font-size:var(--tds-radio-group-description-font-size);
1184
- line-height:var(--tds-radio-group-description-line-height);
1185
- color:var(--tds-radio-group-description-color);
1186
- cursor:text;
1187
- }
1188
-
1189
- .tds-radio-group-description-invalid-icon{
1190
- display:var(--tds-radio-group-description-invalid-icon-display);
1191
- flex-shrink:0;
1192
- margin-top:calc(.5lh - .5em);
1193
- line-height:var(--tds-radio-group-description-line-height);
1194
- }
1195
-
1196
- .tds-radio-group--sm{
1197
- --tds-radio-group-line-height:1.35;
1198
- --tds-radio-group-font-size:var(--t-font-size-sm);
1199
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1200
- --tds-radio-group-description-line-height:1.3;
1201
- }
1202
-
1203
1180
  .tds-input:has(textarea){
1204
1181
  --tds-input-padding-block:6px;
1205
1182
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -1305,6 +1282,29 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1305
1282
  }
1306
1283
  }
1307
1284
 
1285
+
1286
+ :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{
1287
+ -webkit-appearance:none;
1288
+ appearance:none;
1289
+ }
1290
+
1291
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1292
+ inline-size:1em;
1293
+ block-size:2em;
1294
+ }
1295
+
1296
+ @supports (field-sizing: content){
1297
+ .tds-input--auto-width{
1298
+ inline-size:-moz-fit-content;
1299
+ inline-size:fit-content;
1300
+ }
1301
+
1302
+ .tds-input--auto-width input{
1303
+ field-sizing:content;
1304
+ inline-size:auto;
1305
+ }
1306
+ }
1307
+
1308
1308
  .tds-select{
1309
1309
  --tds-select-border-color:var(--t-form-border-color);
1310
1310
  --tds-select-border-color-hover:var(--t-form-border-color-hover);