@planningcenter/tapestry 3.2.2-rc.5 → 3.2.2-rc.7

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 (17) hide show
  1. package/dist/components/combo-box/ComboBox.d.ts +21 -40
  2. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  3. package/dist/components/combo-box/ComboBox.js +12 -10
  4. package/dist/components/combo-box/ComboBox.js.map +1 -1
  5. package/dist/components/combo-box/index.d.ts +1 -1
  6. package/dist/components/combo-box/index.d.ts.map +1 -1
  7. package/dist/index.css +2 -0
  8. package/dist/index.css.map +1 -1
  9. package/dist/reactRender.css +1282 -1280
  10. package/dist/reactRender.css.map +1 -1
  11. package/dist/reactRenderLegacy.css +1282 -1280
  12. package/dist/reactRenderLegacy.css.map +1 -1
  13. package/dist/unstable.css +2 -0
  14. package/dist/unstable.css.map +1 -1
  15. package/dist/utilities/reactAriaProps.d.ts +7 -0
  16. package/dist/utilities/reactAriaProps.d.ts.map +1 -0
  17. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -1,931 +1,782 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
7
4
  }
5
+ }
8
6
 
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
14
-
15
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
-
17
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
- --tds-sidenav-collapse-closed-opacity:0;
20
- --tds-sidenav-collapse-open-opacity:1;
21
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
- --tds-sidenav-collapse-open-transform:translateY(0);
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;
23
25
 
24
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
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);
28
28
 
29
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
- --tds-sidenav-item-nested-background-selected:transparent;
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
32
 
33
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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);
36
35
 
37
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
- }
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);
40
39
 
41
- @media (prefers-reduced-motion: reduce){
42
- tds-sidenav,
43
- .tds-sidenav{
44
- --tds-sidenav-collapse-transition-enter:none;
45
- --tds-sidenav-collapse-transition-exit:none;
46
- --tds-sidenav-collapse-closed-transform:none;
47
- --tds-sidenav-collapse-open-transform:none;
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);
48
45
  }
49
- }
50
46
 
51
- .tds-sidenav--theme-gray{
52
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
57
49
  }
58
- }
59
50
 
60
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
- display:flex;
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
62
56
  }
63
57
 
64
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
- flex-direction:column;
66
- gap:var(--t-spacing-half);
67
- width:100%;
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);
75
+ }
68
76
  }
69
-
70
- .tds-sidenav-section-list{
71
- width:100%;
72
- padding:0;
73
- margin:0;
74
- list-style:none;
75
77
  }
76
78
 
77
- .tds-sidenav-section-header{
79
+ .tds-page-header{
78
80
  display:flex;
79
- align-items:baseline;
80
- justify-content:space-between;
81
- padding-top:var(--t-spacing-2);
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);
82
86
  }
83
87
 
84
- .tds-sidenav-section-header h2{
85
- margin:0;
86
- font-size:var(--t-font-size-sm);
87
- font-weight:var(--t-font-weight-semibold);
88
- line-height:1.35;
89
- color:var(--t-text-color-secondary);
90
- text-transform:uppercase;
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
91
90
  }
92
91
 
93
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
- padding-top:0;
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
95
94
  }
96
95
 
97
- .tds-sidenav-section-header [slot="label-actions"]{
98
- display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
101
98
  }
102
99
 
103
- .tds-sidenav-section [slot="section-actions"]{
104
- display:flex;
105
- gap:12px;
106
- align-items:center;
107
- min-height:42px;
108
- padding:var(--t-spacing-1) 0;
109
- }
110
-
111
- .tds-sidenav-section-list,
112
- .tds-sidenav-item{
113
- width:100%;
114
- padding:0;
115
- margin:0;
116
- }
117
-
118
- .tds-sidenav-item :is(a,button){
119
- position:relative;
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
120
101
  display:flex;
121
- gap:12px;
122
- align-items:center;
123
- width:100%;
124
- padding:12px;
125
- overflow:hidden;
126
- font-size:var(--t-font-size-sm);
127
- line-height:18px;
128
- color:var(--t-text-color-headline);
129
- white-space:nowrap;
130
- text-decoration:none;
131
- -webkit-appearance:none;
132
- -moz-appearance:none;
133
- appearance:none;
134
- cursor:pointer;
135
- background-color:var(--tds-sidenav-item-background, transparent);
136
- border:0;
137
- border-radius:var(--t-border-radius);
138
- transition:var(--tds-sidenav-item-transition);
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;
139
107
  }
140
108
 
141
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
- display:block;
143
- flex:1;
144
- overflow:hidden;
145
- text-overflow:ellipsis;
146
- text-align:left;
147
- white-space:nowrap;
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);
148
117
  }
149
118
 
150
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
- color:var(--t-text-color-headline);
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;
153
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;
154
138
  }
155
139
 
156
- :is(.tds-sidenav-item :is(a,button)):active{
157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
- }
159
-
160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
- overflow:hidden;
162
- color:var(--tds-sidenav-item-icon-color);
163
- }
164
-
165
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
- display:block;
167
- width:var(--tds-sidenav-item-icon-size);
168
- height:var(--tds-sidenav-item-icon-size);
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);
169
145
  }
170
146
 
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
173
- }
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
+ }
174
152
 
175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
- visibility:visible;
177
- block-size:auto;
178
- opacity:1;
179
- }
180
-
181
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
-
185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
- font-weight:var(--t-font-weight-semibold);
187
- }
188
-
189
- .tds-sidenav-item:has(.tds-sidenav-section){
190
- display:flex;
191
- flex-direction:column;
192
- gap:var(--t-spacing-half);
193
- }
194
-
195
- .tds-sidenav-item .tds-sidenav-section-list{
196
- --tds-sidenav-item-depth:1;
197
- gap:0;
198
- }
199
-
200
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
- visibility:hidden;
202
- block-size:0;
203
- overflow-y:clip;
204
- opacity:0;
205
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
- }
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
+ }
207
157
 
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
210
- }
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
+ }
211
164
 
212
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
- min-height:var(--t-element-size-2xl);
214
- padding-block:9px;
215
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
- line-height:1;
217
- background-color:transparent;
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
218
167
  }
219
168
 
220
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
- position:absolute;
222
- top:0;
223
- bottom:0;
224
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
- width:2px;
226
- content:"";
227
- background-color:var(--tds-sidenav-item-nested-border-color);
228
- transition:var(--tds-sidenav-item-transition);
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);
229
172
  }
230
173
 
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
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{
232
175
  position:absolute;
233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
- z-index:-1;
235
- height:100%;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
236
180
  content:"";
237
- background-color:var(--tds-sidenav-item-nested-background);
238
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
- transition:var(--tds-sidenav-item-transition);
240
- }
241
-
242
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
- display:block;
244
- text-align:left;
245
- white-space:normal;
246
- }
247
-
248
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
251
183
  }
252
184
 
253
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
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
+ }
255
189
  }
256
190
 
257
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
- font-weight:var(--t-font-weight-medium);
260
- }
261
-
262
- .tds-sidenav-responsive-header{
191
+ .tds-page-header__title-bar{
263
192
  display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
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);
267
198
  }
268
199
 
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
271
202
  }
272
203
 
273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
- flex:1;
275
- order:1;
276
- margin:0;
277
- font-size:var(--t-font-size-lg);
278
- font-weight:var(--t-font-weight-medium);
279
- color:var(--t-text-color-headline);
280
- }
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
281
207
 
282
- @media (max-width: 719px){
283
- .tds-sidenav-collapse{
284
- z-index:10001;
285
- display:none;
286
- max-width:min(448px, calc(100vw - 48px));
287
- padding:0;
288
- margin:12px 0;
289
- position-area:bottom span-right;
290
- overflow:hidden;
291
- outline:0;
292
- background:var(--t-surface-color-card);
293
- border:0;
294
- border-radius:6px;
295
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
- opacity:var(--tds-sidenav-collapse-open-opacity);
297
- transform:var(--tds-sidenav-collapse-open-transform);
298
- transition:var(--tds-sidenav-collapse-transition-enter);
299
- will-change:transform;
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;
300
215
  }
301
216
 
302
- .tds-sidenav-scroll-container{
303
- --webkit-overflow-scrolling:touch;
304
- display:block;
305
- width:100%;
306
- height:-moz-fit-content;
307
- height:fit-content;
308
- padding:var(--t-spacing-2);
309
- overflow-y:auto;
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%;
310
223
  }
311
224
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
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;
314
230
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
318
233
  }
319
234
 
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
323
237
  }
238
+ }
324
239
 
325
- @starting-style{
326
- .tds-sidenav-collapse:popover-open{
327
- opacity:var(--tds-sidenav-collapse-closed-opacity);
328
- transform:var(--tds-sidenav-collapse-closed-transform);
329
- }
330
- }
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);
331
256
  }
332
- @supports not selector(:popover-open){
333
- .tds-sidenav-collapse.\:popover-open{
334
- display:flex;
335
- }
336
257
 
337
- .tds-sidenav-collapse:not(.\:popover-open){
338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
339
- transition:var(--tds-sidenav-collapse-transition-exit);
340
- }
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
341
261
  }
342
262
  }
343
263
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
347
- }
264
+
265
+ @media (prefers-reduced-motion: no-preference){
266
+
267
+ :root{
268
+ interpolate-size:allow-keywords;
348
269
  }
270
+ }
349
271
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
272
+ @layer tds-component{
273
+ tds-sidenav,
274
+ .tds-sidenav{
275
+ --tds-sidenav-indent:12px;
276
+ --tds-sidenav-item-depth:0;
353
277
 
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
278
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
357
279
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
280
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
281
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
282
+ --tds-sidenav-collapse-closed-opacity:0;
283
+ --tds-sidenav-collapse-open-opacity:1;
284
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
285
+ --tds-sidenav-collapse-open-transform:translateY(0);
362
286
 
363
- @layer t-critical{
364
- tds-page-header:not(.hydrated){
365
- display:none;
366
- }
367
- }
287
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
288
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
289
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
290
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
368
291
 
369
- @layer t-component{
370
- .tds-page-header{
371
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
- --tds-page-header-color:var(--t-text-color);
374
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
375
- --tds-page-header-headline-color:var(--t-text-color-headline);
376
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
- --tds-page-header-padding-x:var(--t-spacing-2);
378
- --tds-page-header-padding-y:var(--t-spacing-2);
379
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
- --tds-page-header-nav-gap:var(--t-spacing-1);
381
- --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%);
382
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
- --tds-page-header-nav-item-border-width:1px;
387
-
388
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
390
-
391
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
292
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
293
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
294
+ --tds-sidenav-item-nested-background-selected:transparent;
394
295
 
395
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
296
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
297
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
298
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
397
299
 
398
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
300
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
301
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
302
+ }
401
303
 
402
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
304
+ @media (prefers-reduced-motion: reduce){
305
+ tds-sidenav,
306
+ .tds-sidenav{
307
+ --tds-sidenav-collapse-transition-enter:none;
308
+ --tds-sidenav-collapse-transition-exit:none;
309
+ --tds-sidenav-collapse-closed-transform:none;
310
+ --tds-sidenav-collapse-open-transform:none;
407
311
  }
312
+ }
408
313
 
409
- .tds-page-header--profile{
410
- --tds-page-header-padding-y:20px;
314
+ .tds-sidenav--theme-gray{
315
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
316
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
317
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
318
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
319
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
411
320
  }
321
+ }
412
322
 
413
- @supports (color: light-dark(#fff, #000)){
414
- .tds-page-header{
415
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
417
- }
323
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
324
+ display:flex;
418
325
  }
419
326
 
420
- @media (min-width: 600px){
421
- .tds-page-header{
422
- --tds-page-header-background-color:var(--t-surface-color-canvas);
423
- --tds-page-header-color:var(--t-text-color-secondary);
424
- --tds-page-header-bottom-border-color:var(--t-border-color);
425
- --tds-page-header-padding-x:var(--t-spacing-3);
426
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
- --tds-page-header-nav-gap:var(--t-spacing-half);
428
- --tds-page-header-nav-background:transparent;
429
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
- --tds-page-header-nav-item-border-width:1px;
431
- --tds-page-header-nav-item-color:var(--t-text-color);
432
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
434
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
435
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
436
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
437
- }
327
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
328
+ flex-direction:column;
329
+ gap:var(--t-spacing-half);
330
+ width:100%;
438
331
  }
332
+
333
+ .tds-sidenav-section-list{
334
+ width:100%;
335
+ padding:0;
336
+ margin:0;
337
+ list-style:none;
439
338
  }
440
339
 
441
- .tds-page-header{
340
+ .tds-sidenav-section-header{
442
341
  display:flex;
443
- flex-direction:column;
444
- padding-top:var(--tds-page-header-padding-y);
445
- color:var(--tds-page-header-color);
446
- background:var(--tds-page-header-background-color);
447
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
342
+ align-items:baseline;
343
+ justify-content:space-between;
344
+ padding-top:var(--t-spacing-2);
448
345
  }
449
346
 
450
- .tds-page-header:not(.has-nav){
451
- padding-bottom:var(--tds-page-header-padding-y);
347
+ .tds-sidenav-section-header h2{
348
+ margin:0;
349
+ font-size:var(--t-font-size-sm);
350
+ font-weight:var(--t-font-weight-semibold);
351
+ line-height:1.35;
352
+ color:var(--t-text-color-secondary);
353
+ text-transform:uppercase;
452
354
  }
453
355
 
454
- .tds-page-header.inactive{
455
- background:var(--tds-page-header-background-color-inactive);
356
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
357
+ padding-top:0;
456
358
  }
457
359
 
458
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
459
- width:100%;
360
+ .tds-sidenav-section-header [slot="label-actions"]{
361
+ display:flex;
362
+ gap:var(--t-spacing-half);
363
+ align-items:center;
460
364
  }
461
365
 
462
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
366
+ .tds-sidenav-section [slot="section-actions"]{
367
+ display:flex;
368
+ gap:12px;
369
+ align-items:center;
370
+ min-height:42px;
371
+ padding:var(--t-spacing-1) 0;
372
+ }
373
+
374
+ .tds-sidenav-section-list,
375
+ .tds-sidenav-item{
376
+ width:100%;
377
+ padding:0;
378
+ margin:0;
379
+ }
380
+
381
+ .tds-sidenav-item :is(a,button){
382
+ position:relative;
463
383
  display:flex;
464
- flex-flow:row wrap;
465
- gap:var(--t-spacing-half) var(--t-spacing-1);
466
- align-items:flex-start;
467
- justify-content:flex-start;
468
- min-width:0;
384
+ gap:12px;
385
+ align-items:center;
386
+ width:100%;
387
+ padding:12px;
388
+ overflow:hidden;
389
+ font-size:var(--t-font-size-sm);
390
+ line-height:18px;
391
+ color:var(--t-text-color-headline);
392
+ white-space:nowrap;
393
+ text-decoration:none;
394
+ -webkit-appearance:none;
395
+ -moz-appearance:none;
396
+ appearance:none;
397
+ cursor:pointer;
398
+ background-color:var(--tds-sidenav-item-background, transparent);
399
+ border:0;
400
+ border-radius:var(--t-border-radius);
401
+ transition:var(--tds-sidenav-item-transition);
469
402
  }
470
403
 
471
- :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{
472
- display:flex;
473
- gap:var(--tds-page-header-nav-gap);
474
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
475
- margin:0 0 -1px;
476
- overflow:auto;
477
- list-style:none;
478
- background:var(--tds-page-header-nav-background);
404
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
405
+ display:block;
406
+ flex:1;
407
+ overflow:hidden;
408
+ text-overflow:ellipsis;
409
+ text-align:left;
410
+ white-space:nowrap;
479
411
  }
480
412
 
481
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
482
- position:relative;
483
- display:inline-flex;
484
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
485
- font-size:var(--t-font-size-sm);
486
- line-height:22px;
487
- color:var(--tds-page-header-nav-item-color);
488
- white-space:nowrap;
413
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
414
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
415
+ color:var(--t-text-color-headline);
489
416
  text-decoration:none;
490
- -webkit-appearance:none;
491
- -moz-appearance:none;
492
- appearance:none;
493
- cursor:pointer;
494
- outline-offset:-2px;
495
- background-color:var(--tds-page-header-nav-item-background-color);
496
- background-clip:padding-box;
497
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
498
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
499
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
500
417
  }
501
418
 
502
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
503
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
504
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
505
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
506
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
507
- }
419
+ :is(.tds-sidenav-item :is(a,button)):active{
420
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
421
+ }
508
422
 
509
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
510
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
511
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
512
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
513
- }
423
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
424
+ overflow:hidden;
425
+ color:var(--tds-sidenav-item-icon-color);
426
+ }
514
427
 
515
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
516
- background-color:var(--tds-page-header-nav-item-background-color-active);
517
- border-color:var(--tds-page-header-nav-item-border-color-active);
518
- }
428
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
429
+ display:block;
430
+ width:var(--tds-sidenav-item-icon-size);
431
+ height:var(--tds-sidenav-item-icon-size);
432
+ }
519
433
 
520
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
521
- color:var(--tds-page-header-nav-item-color-disabled);
522
- cursor:not-allowed;
523
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
524
- opacity:1;
525
- }
434
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
435
+ --tds-sidenav-indent:19px;
436
+ }
526
437
 
527
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
- position:relative;
438
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
439
+ visibility:visible;
440
+ block-size:auto;
441
+ opacity:1;
529
442
  }
530
443
 
531
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
532
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
533
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
534
- }
444
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
445
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
446
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
535
447
 
536
- :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{
537
- position:absolute;
538
- top:-5px;
539
- right:-2px;
540
- width:10px;
541
- height:10px;
542
- content:"";
543
- background:var(--tds-page-header-nav-item-indicator-color);
544
- border-radius:50%;
545
- }
546
-
547
- @media (prefers-reduced-motion: no-preference){
548
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
549
- animation:indicator-pulse 1.25s ease infinite;
550
- }
551
- }
552
-
553
- .tds-page-header__title-bar{
554
- display:flex;
555
- flex-direction:column;
556
- gap:var(--t-spacing-2) var(--t-spacing-1);
557
- align-items:flex-start;
558
- justify-content:space-between;
559
- padding:0 var(--tds-page-header-padding-x);
560
- }
561
-
562
- .tds-page-header--profile > .tds-page-header__title-bar{
563
- align-items:center;
448
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
449
+ font-weight:var(--t-font-weight-semibold);
564
450
  }
565
451
 
566
- .tds-page-header__primary{
567
- width:100%;
568
- }
569
-
570
- .tds-page-header__primary h1{
571
- margin:0;
572
- font-size:var(--tds-page-header-headline-font-size);
573
- font-weight:var(--t-font-weight-normal);
574
- line-height:32px;
575
- color:var(--tds-page-header-headline-color);
576
- overflow-wrap:break-word;
452
+ .tds-sidenav-item:has(.tds-sidenav-section){
453
+ display:flex;
454
+ flex-direction:column;
455
+ gap:var(--t-spacing-half);
577
456
  }
578
457
 
579
- @media (min-width: 960px){
580
- .tds-page-header__primary{
581
- flex:1 1 max-content;
582
- width:auto;
583
- min-width:0;
584
- max-width:100%;
458
+ .tds-sidenav-item .tds-sidenav-section-list{
459
+ --tds-sidenav-item-depth:1;
460
+ gap:0;
585
461
  }
586
462
 
587
- .tds-page-header__title-bar,
588
- .tds-page-header--profile .tds-page-header__title-bar{
589
- flex-flow:row nowrap;
590
- row-gap:12px;
591
- align-items:flex-start;
592
- }
593
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
- width:auto;
463
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
464
+ visibility:hidden;
465
+ block-size:0;
466
+ overflow-y:clip;
467
+ opacity:0;
468
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
595
469
  }
596
470
 
597
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
- justify-content:flex-end;
471
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
472
+ --tds-sidenav-item-depth:2;
599
473
  }
600
- }
601
474
 
602
- .tds-page-header-phone,
603
- .tds-page-header-email{
604
- color:var(--tds-page-header-color);
605
- white-space:nowrap;
606
- }
475
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
476
+ min-height:var(--t-element-size-2xl);
477
+ padding-block:9px;
478
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
479
+ line-height:1;
480
+ background-color:transparent;
481
+ }
607
482
 
608
- .tds-page-header-email{
609
- max-width:100%;
610
- overflow:hidden;
611
- text-overflow:ellipsis;
612
- }
483
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
484
+ position:absolute;
485
+ top:0;
486
+ bottom:0;
487
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
488
+ width:2px;
489
+ content:"";
490
+ background-color:var(--tds-sidenav-item-nested-border-color);
491
+ transition:var(--tds-sidenav-item-transition);
492
+ }
613
493
 
614
- @keyframes indicator-pulse{
615
- 0%{
616
- opacity:.3;
617
- transform:scale(.9);
618
- }
494
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
495
+ position:absolute;
496
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
497
+ z-index:-1;
498
+ height:100%;
499
+ content:"";
500
+ background-color:var(--tds-sidenav-item-nested-background);
501
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
502
+ transition:var(--tds-sidenav-item-transition);
503
+ }
619
504
 
620
- 100%{
621
- opacity:0;
622
- transform:scale(1.75);
623
- }
624
- }
505
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
506
+ display:block;
507
+ text-align:left;
508
+ white-space:normal;
509
+ }
625
510
 
626
- .tds-radio-group{
627
- --tds-radio-group-font-size:var(--t-font-size-md);
628
- --tds-radio-group-line-height:1.4;
629
- --tds-radio-group-gap:var(--t-spacing-1);
511
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
512
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
513
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
514
+ }
630
515
 
631
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
516
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
517
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
518
+ }
632
519
 
633
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
634
- --tds-radio-group-description-line-height:1.35;
635
- --tds-radio-group-description-color:var(--t-text-color-secondary);
636
- --tds-radio-group-description-invalid-icon-display:none;
637
- display:flex;
638
- flex-direction:column;
639
- gap:var(--tds-radio-group-gap);
640
- padding:0;
641
- margin:0;
520
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
521
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
522
+ font-weight:var(--t-font-weight-medium);
523
+ }
642
524
 
643
- font-size:var(--tds-radio-group-font-size);
644
- line-height:var(--tds-radio-group-line-height);
645
- border:0;
525
+ .tds-sidenav-responsive-header{
526
+ display:flex;
527
+ gap:var(--t-spacing-2);
528
+ align-items:center;
529
+ width:100%;
646
530
  }
647
531
 
648
- .tds-radio-group legend{
649
- padding:0;
650
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
532
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
533
+ order:0;
651
534
  }
652
535
 
653
- .tds-radio-group:has(.tds-radio-group-description){
654
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
536
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
537
+ flex:1;
538
+ order:1;
539
+ margin:0;
540
+ font-size:var(--t-font-size-lg);
541
+ font-weight:var(--t-font-weight-medium);
542
+ color:var(--t-text-color-headline);
655
543
  }
656
544
 
657
- .tds-radio-group[aria-invalid="true"]{
658
- --tds-radio-group-description-color:var(--t-text-color-status-error);
659
- --tds-radio-group-description-invalid-icon-display:inline-block;
545
+ @media (max-width: 719px){
546
+ .tds-sidenav-collapse{
547
+ z-index:10001;
548
+ display:none;
549
+ max-width:min(448px, calc(100vw - 48px));
550
+ padding:0;
551
+ margin:12px 0;
552
+ position-area:bottom span-right;
553
+ overflow:hidden;
554
+ outline:0;
555
+ background:var(--t-surface-color-card);
556
+ border:0;
557
+ border-radius:6px;
558
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
559
+ opacity:var(--tds-sidenav-collapse-open-opacity);
560
+ transform:var(--tds-sidenav-collapse-open-transform);
561
+ transition:var(--tds-sidenav-collapse-transition-enter);
562
+ will-change:transform;
660
563
  }
661
564
 
662
- .tds-radio-group[aria-invalid="true"] .tds-radio{
663
- --tds-radio-input-border-color:var(--t-form-border-color-error);
565
+ .tds-sidenav-scroll-container{
566
+ --webkit-overflow-scrolling:touch;
567
+ display:block;
568
+ width:100%;
569
+ height:-moz-fit-content;
570
+ height:fit-content;
571
+ padding:var(--t-spacing-2);
572
+ overflow-y:auto;
573
+ }
574
+
575
+ .tds-sidenav-item :is(a, button) :is(.prefix){
576
+ display:none;
577
+ }
578
+ @supports selector(:popover-open){
579
+ .tds-sidenav-collapse:popover-open{
580
+ display:flex;
664
581
  }
665
582
 
666
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
667
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
668
- --tds-radio-input-background-color:var(--t-form-background-color-error);
669
- }
583
+ .tds-sidenav-collapse:not(:popover-open){
584
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
585
+ transition:var(--tds-sidenav-collapse-transition-exit);
586
+ }
670
587
 
671
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
672
- --tds-radio-input-background-color:var(--t-form-background-color);
588
+ @starting-style{
589
+ .tds-sidenav-collapse:popover-open{
590
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
591
+ transform:var(--tds-sidenav-collapse-closed-transform);
673
592
  }
674
-
675
- .tds-radio-group:has(input:required) legend::after{
676
- margin-left:.25ch;
677
- color:var(--t-text-color-status-error);
678
- content:"*";
593
+ }
594
+ }
595
+ @supports not selector(:popover-open){
596
+ .tds-sidenav-collapse.\:popover-open{
597
+ display:flex;
679
598
  }
680
599
 
681
- .tds-radio-group-fields{
682
- display:flex;
683
- flex-direction:column;
684
- gap:var(--tds-radio-group-gap);
685
- align-items:flex-start;
600
+ .tds-sidenav-collapse:not(.\:popover-open){
601
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
602
+ transition:var(--tds-sidenav-collapse-transition-exit);
603
+ }
604
+ }
686
605
  }
687
606
 
688
- .tds-radio-group-description{
689
- display:flex;
690
- gap:var(--t-spacing-half);
691
- align-items:flex-start;
692
- margin:0;
693
- font-size:var(--tds-radio-group-description-font-size);
694
- line-height:var(--tds-radio-group-description-line-height);
695
- color:var(--tds-radio-group-description-color);
696
- cursor:text;
607
+ @media (min-width: 720px){
608
+ .tds-sidenav-responsive-header{
609
+ display:none;
610
+ }
697
611
  }
698
612
 
699
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
700
- display:var(--tds-radio-group-description-invalid-icon-display);
701
- flex-shrink:0;
702
- margin-top:calc(.5lh - .5em);
703
- line-height:var(--tds-radio-group-description-line-height);
704
- }
705
-
706
- .tds-radio-group--sm{
707
- --tds-radio-group-line-height:1.35;
708
- --tds-radio-group-font-size:var(--t-font-size-sm);
709
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
710
- --tds-radio-group-description-line-height:1.3;
711
- }
712
-
713
-
714
- :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{
715
- -webkit-appearance:none;
716
- appearance:none;
613
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
+ display:none;
717
615
  }
718
616
 
719
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
720
- inline-size:1em;
721
- block-size:2em;
617
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
+ display:block;
722
619
  }
723
620
 
724
- @supports (field-sizing: content){
725
- .tds-input--auto-width{
726
- inline-size:-moz-fit-content;
727
- inline-size:fit-content;
728
- min-inline-size:min(100%, 122px);
729
- }
730
-
731
- .tds-input--auto-width input{
732
- field-sizing:content;
733
- inline-size:auto;
734
- }
735
- }
736
-
737
- .tds-checkbox{
738
- --tds-checkbox-font-size:var(--t-font-size-md);
739
- --tds-checkbox-cursor:pointer;
740
- --tds-checkbox-line-height:1.4;
741
- --tds-checkbox-transition-property:background-color, border-color;
621
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
622
+ display:flex;
623
+ flex-direction:column;
624
+ }
742
625
 
743
- --tds-checkbox-input-size:var(--t-element-size-md);
744
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
745
- --tds-checkbox-input-border-color:var(--t-form-border-color);
746
- --tds-checkbox-input-background-color:transparent;
626
+ .tds-radio{
627
+ --tds-radio-font-size:var(--t-font-size-md);
628
+ --tds-radio-cursor:pointer;
629
+ --tds-radio-line-height:1.4;
630
+ --tds-radio-transition-property:border-width;
747
631
 
748
- --tds-checkbox-input-icon:none;
749
- --tds-checkbox-input-icon-visibility:hidden;
750
- --tds-checkbox-input-icon-opacity:0;
751
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
632
+ --tds-radio-input-size:var(--t-element-size-md);
633
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
634
+ --tds-radio-input-border-color:var(--t-form-border-color);
635
+ --tds-radio-input-border-width:var(--t-form-border-width);
636
+ --tds-radio-input-background-color:transparent;
752
637
 
753
- --tds-checkbox-label-color:var(--t-form-color);
638
+ --tds-radio-label-color:var(--t-form-color);
754
639
 
755
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
756
- --tds-checkbox-description-line-height:1.35;
757
- --tds-checkbox-description-color:var(--t-text-color-secondary);
758
- --tds-checkbox-description-invalid-icon-display:none;
640
+ --tds-radio-description-font-size:var(--t-font-size-sm);
641
+ --tds-radio-description-line-height:1.35;
642
+ --tds-radio-description-color:var(--t-text-color-secondary);
759
643
 
760
644
  position:relative;
761
645
  display:inline-grid;
762
646
  grid-template-columns:auto;
763
647
  grid-auto-columns:1fr;
764
648
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
765
- line-height:var(--tds-checkbox-line-height);
766
- cursor:var(--tds-checkbox-cursor);
649
+ line-height:var(--tds-radio-line-height);
650
+ cursor:var(--tds-radio-cursor);
767
651
  -webkit-user-select:none;
768
652
  -moz-user-select:none;
769
653
  user-select:none;
770
654
  }
771
655
 
772
- .tds-checkbox label{
656
+ .tds-radio label{
773
657
  grid-area:1 / 2;
774
- font-size:var(--tds-checkbox-font-size);
658
+ font-size:var(--tds-radio-font-size);
775
659
  font-weight:var(--t-font-weight-normal);
776
- color:var(--tds-checkbox-label-color);
777
- cursor:var(--tds-checkbox-cursor);
778
- }
779
-
780
- .tds-checkbox tds-indeterminate{
781
- display:flex;
660
+ color:var(--tds-radio-label-color);
661
+ cursor:var(--tds-radio-cursor);
782
662
  }
783
663
 
784
- .tds-checkbox input[type="checkbox"]{
664
+ .tds-radio input[type="radio"]{
785
665
  position:relative;
786
666
  width:1em;
787
667
  height:1em;
788
668
  margin:calc((1lh - 1em) / 2) 0 0;
789
- font-size:var(--tds-checkbox-font-size);
669
+ font-size:var(--tds-radio-font-size);
790
670
  line-height:inherit;
791
671
  -webkit-appearance:none;
792
672
  -moz-appearance:none;
793
673
  appearance:none;
794
- cursor:var(--tds-checkbox-cursor);
795
- background-color:var(--tds-checkbox-input-background-color);
796
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
797
- border-radius:var(--tds-checkbox-input-border-radius);
674
+ cursor:var(--tds-radio-cursor);
675
+ background-color:var(--tds-radio-input-background-color);
676
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
677
+ border-radius:var(--tds-radio-input-border-radius);
798
678
  transition-timing-function:var(--t-ease-in-out);
799
679
  transition-duration:var(--t-duration-200);
800
- transition-property:var(--tds-checkbox-transition-property);
680
+ transition-property:var(--tds-radio-transition-property);
801
681
  }
802
682
 
803
- :is(.tds-checkbox input[type="checkbox"])::before{
804
- position:absolute;
805
- top:50%;
806
- left:50%;
807
- visibility:var(--tds-checkbox-input-icon-visibility);
808
- width:100%;
809
- height:100%;
810
- content:"";
811
- background-color:var(--tds-checkbox-input-icon-fill);
812
- border-radius:var(--tds-checkbox-input-border-radius);
813
- opacity:var(--tds-checkbox-input-icon-opacity);
814
- -webkit-mask-image:var(--tds-checkbox-input-icon);
815
- mask-image:var(--tds-checkbox-input-icon);
816
- -webkit-mask-repeat:no-repeat;
817
- mask-repeat:no-repeat;
818
- -webkit-mask-size:contain;
819
- mask-size:contain;
820
- transform:translate(-50%, -50%);
821
- }
822
-
823
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
824
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
825
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
683
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
684
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
685
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
826
686
  }
827
687
 
828
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
688
+ :is(.tds-radio input[type="radio"]):focus-visible{
829
689
  outline:var(--t-focus-ring-outline);
830
690
  outline-offset:var(--t-focus-ring-offset);
831
691
  }
832
692
 
833
- :is(.tds-checkbox input[type="checkbox"]):disabled{
693
+ :is(.tds-radio input[type="radio"]):disabled{
834
694
  pointer-events:none;
835
695
  }
836
696
 
837
697
  @media (prefers-reduced-motion: reduce){
838
698
 
839
- .tds-checkbox input[type="checkbox"]{
840
- --tds-checkbox-transition-property:none;
699
+ .tds-radio input[type="radio"]{
700
+ --tds-radio-transition-property:none;
841
701
  }
842
702
  }
843
703
 
844
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
845
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
846
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
847
- --tds-checkbox-input-icon-visibility:visible;
848
- --tds-checkbox-input-icon-opacity:1;
704
+ .tds-radio:has(input:checked){
705
+ --tds-radio-input-background-color:var(--t-form-background-color);
706
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
707
+ --tds-radio-input-border-width:4px;
849
708
  }
850
709
 
851
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
852
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
853
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
710
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
711
+ --tds-radio-input-background-color:var(--t-form-background-color);
712
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
854
713
  }
855
714
 
856
- .tds-checkbox:has(input:checked){
857
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
858
- }
859
-
860
- .tds-checkbox:has(input:indeterminate){
861
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
862
- }
863
-
864
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
865
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
866
- --tds-checkbox-description-color:var(--t-text-color-status-error);
867
- --tds-checkbox-description-invalid-icon-display:inline-block;
715
+ .tds-radio:has(input:user-invalid){
716
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
868
717
  }
869
718
 
870
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
871
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
872
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
873
- }
874
-
875
- :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{
876
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
877
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
878
- }
879
-
880
- :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){
881
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
882
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
883
- }
884
-
885
- .tds-checkbox:has(input:required) label::after{
886
- margin-left:.25ch;
887
- color:var(--t-text-color-status-error);
888
- content:"*";
719
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
720
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
721
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
889
722
  }
890
723
 
891
- .tds-checkbox:has(input:disabled){
892
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
893
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
724
+ .tds-radio:has(input:disabled){
725
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
726
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
894
727
 
895
- --tds-checkbox-label-color:var(--t-form-color-disabled);
896
- --tds-checkbox-description-color:var(--t-form-color-disabled);
897
- --tds-checkbox-cursor:not-allowed;
728
+ --tds-radio-label-color:var(--t-form-color-disabled);
729
+ --tds-radio-description-color:var(--t-form-color-disabled);
730
+ --tds-radio-cursor:not-allowed;
898
731
  }
899
732
 
900
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
901
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
733
+ .tds-radio:has(input:disabled) input:checked{
734
+ --tds-radio-input-background-color:var(--t-form-background-color);
735
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
902
736
  }
903
737
 
904
- .tds-checkbox-description{
738
+ .tds-radio-description{
905
739
  display:flex;
906
740
  grid-area:2 / 2;
907
741
  gap:var(--t-spacing-half);
908
742
  align-items:flex-start;
909
743
  margin:0;
910
- font-size:var(--tds-checkbox-description-font-size);
911
- line-height:var(--tds-checkbox-description-line-height);
912
- color:var(--tds-checkbox-description-color);
744
+ font-size:var(--tds-radio-description-font-size);
745
+ line-height:var(--tds-radio-description-line-height);
746
+ color:var(--tds-radio-description-color);
913
747
  cursor:text;
914
748
  }
915
749
 
916
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
917
- display:var(--tds-checkbox-description-invalid-icon-display);
918
- flex-shrink:0;
919
- margin-top:calc(.5lh - .5em);
920
- line-height:var(--tds-checkbox-description-line-height);
750
+ .tds-radio--sm{
751
+ --tds-radio-line-height:1.35;
752
+ --tds-radio-input-size:var(--t-element-size-sm);
753
+ --tds-radio-font-size:var(--t-font-size-sm);
754
+ --tds-radio-description-font-size:var(--t-font-size-xs);
755
+ --tds-radio-description-line-height:1.3;
756
+ }
757
+
758
+
759
+ :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{
760
+ -webkit-appearance:none;
761
+ appearance:none;
762
+ }
763
+
764
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
765
+ inline-size:1em;
766
+ block-size:2em;
767
+ }
768
+
769
+ @supports (field-sizing: content){
770
+ .tds-input--auto-width{
771
+ inline-size:-moz-fit-content;
772
+ inline-size:fit-content;
773
+ min-inline-size:min(100%, 122px);
921
774
  }
922
775
 
923
- .tds-checkbox--sm{
924
- --tds-checkbox-line-height:1.35;
925
- --tds-checkbox-input-size:var(--t-element-size-sm);
926
- --tds-checkbox-font-size:var(--t-font-size-sm);
927
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
928
- --tds-checkbox-description-line-height:1.3;
776
+ .tds-input--auto-width input{
777
+ field-sizing:content;
778
+ inline-size:auto;
779
+ }
929
780
  }
930
781
 
931
782
  .tds-input:has(textarea){
@@ -1174,138 +1025,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1174
1025
  --tds-toggle-switch-display:inline-flex;
1175
1026
  }
1176
1027
 
1177
- .tds-radio{
1178
- --tds-radio-font-size:var(--t-font-size-md);
1179
- --tds-radio-cursor:pointer;
1180
- --tds-radio-line-height:1.4;
1181
- --tds-radio-transition-property:border-width;
1182
-
1183
- --tds-radio-input-size:var(--t-element-size-md);
1184
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1185
- --tds-radio-input-border-color:var(--t-form-border-color);
1186
- --tds-radio-input-border-width:var(--t-form-border-width);
1187
- --tds-radio-input-background-color:transparent;
1188
-
1189
- --tds-radio-label-color:var(--t-form-color);
1190
-
1191
- --tds-radio-description-font-size:var(--t-font-size-sm);
1192
- --tds-radio-description-line-height:1.35;
1193
- --tds-radio-description-color:var(--t-text-color-secondary);
1194
-
1195
- position:relative;
1196
- display:inline-grid;
1197
- grid-template-columns:auto;
1198
- grid-auto-columns:1fr;
1199
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1200
- line-height:var(--tds-radio-line-height);
1201
- cursor:var(--tds-radio-cursor);
1202
- -webkit-user-select:none;
1203
- -moz-user-select:none;
1204
- user-select:none;
1205
- }
1206
-
1207
- .tds-radio label{
1208
- grid-area:1 / 2;
1209
- font-size:var(--tds-radio-font-size);
1210
- font-weight:var(--t-font-weight-normal);
1211
- color:var(--tds-radio-label-color);
1212
- cursor:var(--tds-radio-cursor);
1213
- }
1214
-
1215
- .tds-radio input[type="radio"]{
1216
- position:relative;
1217
- width:1em;
1218
- height:1em;
1219
- margin:calc((1lh - 1em) / 2) 0 0;
1220
- font-size:var(--tds-radio-font-size);
1221
- line-height:inherit;
1222
- -webkit-appearance:none;
1223
- -moz-appearance:none;
1224
- appearance:none;
1225
- cursor:var(--tds-radio-cursor);
1226
- background-color:var(--tds-radio-input-background-color);
1227
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1228
- border-radius:var(--tds-radio-input-border-radius);
1229
- transition-timing-function:var(--t-ease-in-out);
1230
- transition-duration:var(--t-duration-200);
1231
- transition-property:var(--tds-radio-transition-property);
1232
- }
1233
-
1234
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1235
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1236
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1237
- }
1238
-
1239
- :is(.tds-radio input[type="radio"]):focus-visible{
1240
- outline:var(--t-focus-ring-outline);
1241
- outline-offset:var(--t-focus-ring-offset);
1242
- }
1243
-
1244
- :is(.tds-radio input[type="radio"]):disabled{
1245
- pointer-events:none;
1246
- }
1247
-
1248
- @media (prefers-reduced-motion: reduce){
1249
-
1250
- .tds-radio input[type="radio"]{
1251
- --tds-radio-transition-property:none;
1252
- }
1253
- }
1254
-
1255
- .tds-radio:has(input:checked){
1256
- --tds-radio-input-background-color:var(--t-form-background-color);
1257
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1258
- --tds-radio-input-border-width:4px;
1259
- }
1260
-
1261
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1262
- --tds-radio-input-background-color:var(--t-form-background-color);
1263
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1264
- }
1265
-
1266
- .tds-radio:has(input:user-invalid){
1267
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1268
- }
1269
-
1270
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1271
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1272
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1273
- }
1274
-
1275
- .tds-radio:has(input:disabled){
1276
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1277
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1278
-
1279
- --tds-radio-label-color:var(--t-form-color-disabled);
1280
- --tds-radio-description-color:var(--t-form-color-disabled);
1281
- --tds-radio-cursor:not-allowed;
1282
- }
1283
-
1284
- .tds-radio:has(input:disabled) input:checked{
1285
- --tds-radio-input-background-color:var(--t-form-background-color);
1286
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1287
- }
1288
-
1289
- .tds-radio-description{
1290
- display:flex;
1291
- grid-area:2 / 2;
1292
- gap:var(--t-spacing-half);
1293
- align-items:flex-start;
1294
- margin:0;
1295
- font-size:var(--tds-radio-description-font-size);
1296
- line-height:var(--tds-radio-description-line-height);
1297
- color:var(--tds-radio-description-color);
1298
- cursor:text;
1299
- }
1300
-
1301
- .tds-radio--sm{
1302
- --tds-radio-line-height:1.35;
1303
- --tds-radio-input-size:var(--t-element-size-sm);
1304
- --tds-radio-font-size:var(--t-font-size-sm);
1305
- --tds-radio-description-font-size:var(--t-font-size-xs);
1306
- --tds-radio-description-line-height:1.3;
1307
- }
1308
-
1309
1028
  .tds-select{
1310
1029
  --tds-select-border-color:var(--t-form-border-color);
1311
1030
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -1433,309 +1152,592 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1433
1152
  content:"*";
1434
1153
  }
1435
1154
 
1436
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1437
- --tds-select-border-color:var(--t-form-border-color-disabled);
1438
- --tds-select-background-color:var(--t-form-background-color-disabled);
1439
- --tds-select-color:var(--t-form-color-disabled);
1440
- --tds-select-cursor:not-allowed;
1441
- }
1155
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1156
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1157
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1158
+ --tds-select-color:var(--t-form-color-disabled);
1159
+ --tds-select-cursor:not-allowed;
1160
+ }
1161
+
1162
+ .tds-select:has( > [popover]:popover-open) > button{
1163
+ border-color:var(--tds-select-border-color-active);
1164
+ }
1165
+
1166
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1167
+ transform:rotate(.5turn);
1168
+ }
1169
+
1170
+ .tds-select :is(hr,li[role="separator"]){
1171
+ margin-block:var(--t-spacing-half);
1172
+ color:var(--tds-select-border-color);
1173
+ border:0;
1174
+ border-top:1px solid;
1175
+ }
1176
+
1177
+ .tds-select :is(li[role="option"],option:not([hidden])){
1178
+ display:block;
1179
+ padding-block:var(--tds-select-option-padding-block);
1180
+ padding-inline:var(--tds-select-option-padding-inline);
1181
+ overflow:hidden;
1182
+ text-overflow:ellipsis;
1183
+ font-size:var(--tds-select-option-font-size);
1184
+ color:var(--tds-select-option-color);
1185
+ white-space:nowrap;
1186
+ cursor:default;
1187
+ border-radius:var(--tds-select-option-border-radius);
1188
+ }
1189
+
1190
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1191
+ outline:none;
1192
+ }
1193
+
1194
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1195
+ background:var(--tds-select-option-background-hover);
1196
+ }
1197
+
1198
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1199
+ background:var(--tds-select-option-background-active);
1200
+ }
1201
+
1202
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1203
+ color:var(--t-form-color-disabled);
1204
+ cursor:not-allowed;
1205
+ }
1206
+
1207
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1208
+ background:transparent;
1209
+ }
1210
+
1211
+ .tds-select :is(li[role="presentation"],legend){
1212
+ position:sticky;
1213
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1214
+ z-index:1;
1215
+ float:inline-start;
1216
+ inline-size:100%;
1217
+ padding-block:var(--tds-select-group-label-padding-block);
1218
+ padding-inline:var(--tds-select-group-label-padding-inline);
1219
+ container-type:scroll-state;
1220
+ font-size:var(--tds-select-group-label-font-size);
1221
+ font-weight:var(--tds-select-group-label-font-weight);
1222
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1223
+ background:var(--tds-select-group-label-background);
1224
+ text-box:trim-both cap alphabetic;
1225
+ }
1226
+
1227
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1228
+ display:inline-flex;
1229
+ gap:var(--t-spacing-half);
1230
+ align-items:center;
1231
+ color:var(--tds-select-group-label-color);
1232
+ transition:var(--tds-select-group-label-transition);
1233
+ }
1234
+
1235
+ @container scroll-state(stuck){
1236
+
1237
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1238
+ color:var(--tds-select-group-label-color-stuck);
1239
+ }
1240
+
1241
+ @media (forced-colors: active){
1242
+
1243
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1244
+ color:var(--tds-select-group-label-color-stuck);
1245
+ }
1246
+ }
1247
+ }
1248
+
1249
+ .tds-select.tds-select--lg{
1250
+ --tds-select-min-height:var(--t-container-size-lg);
1251
+ --tds-select-font-size:var(--t-font-size-lg);
1252
+ }
1253
+
1254
+ @media (prefers-reduced-motion: reduce){
1255
+
1256
+ .tds-select{
1257
+ --tds-select-transition-property:none;
1258
+ --tds-select-dropdown-transition-enter:none;
1259
+ --tds-select-dropdown-transition-exit:none;
1260
+ --tds-select-dropdown-scroll-behavior:auto;
1261
+ --tds-select-dropdown-closed-transform:none;
1262
+ --tds-select-dropdown-open-transform:none;
1263
+ --tds-select-caret-transition:none;
1264
+ }
1265
+ }
1266
+
1267
+ .tds-select-description{
1268
+ display:flex;
1269
+ gap:var(--t-spacing-half);
1270
+ align-items:flex-start;
1271
+ margin:0;
1272
+ font-size:var(--t-font-size-sm);
1273
+ line-height:1.35;
1274
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1275
+ cursor:text;
1276
+ }
1277
+
1278
+ .tds-select-description .tds-select-description-invalid-icon{
1279
+ display:var(--tds-select-description-invalid-icon-display, none);
1280
+ flex-shrink:0;
1281
+ margin-block-start:calc(.5lh - .5em);
1282
+ line-height:1.35;
1283
+ }
1284
+
1285
+ .tds-select > .tds-select-hidden-select{
1286
+ position:absolute;
1287
+ inline-size:1px;
1288
+ block-size:1px;
1289
+ padding:0;
1290
+ margin:0;
1291
+ pointer-events:none;
1292
+ opacity:0;
1293
+ }
1294
+
1295
+ .tds-select:has( > button) > button{
1296
+ display:block;
1297
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1298
+ overflow:hidden;
1299
+ text-overflow:ellipsis;
1300
+ color:var(--tds-select-placeholder-color);
1301
+ white-space:nowrap;
1302
+ background-image:none;
1303
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1304
+ -webkit-tap-highlight-color:transparent;
1305
+ }
1306
+
1307
+ :is(.tds-select:has( > button) > button)::after{
1308
+ position:absolute;
1309
+ inset-block:0;
1310
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1311
+ width:var(--tds-select-caret-size);
1312
+ height:var(--tds-select-caret-size);
1313
+ margin-block:auto;
1314
+ pointer-events:none;
1315
+ content:var(--tds-select-background-image);
1316
+ transform:rotate(0);
1317
+ transition:var(--tds-select-caret-transition);
1318
+ }
1319
+
1320
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1321
+ color:var(--tds-select-color);
1322
+ }
1323
+
1324
+ .tds-select:has( > button) [popover]{
1325
+ inset:auto;
1326
+ inline-size:-moz-max-content;
1327
+ inline-size:max-content;
1328
+ min-inline-size:anchor-size(width);
1329
+ max-inline-size:100vi;
1330
+ max-block-size:min(50vh, 20rem);
1331
+ padding:var(--tds-select-dropdown-padding);
1332
+ margin-block:var(--tds-select-dropdown-margin-block);
1333
+ position-area:block-end span-inline-start;
1334
+ position-try-fallbacks:flip-block, flip-inline;
1335
+ overflow:auto;
1336
+ overflow-x:hidden;
1337
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1338
+ overscroll-behavior:none;
1339
+ -webkit-user-select:none;
1340
+ -moz-user-select:none;
1341
+ user-select:none;
1342
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1343
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1344
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1345
+ background:var(--tds-select-dropdown-background-color);
1346
+ border:var(--tds-select-dropdown-border);
1347
+ border-radius:var(--tds-select-dropdown-border-radius);
1348
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1349
+ opacity:var(--tds-select-dropdown-open-opacity);
1350
+ transform:var(--tds-select-dropdown-open-transform);
1351
+ transition:var(--tds-select-dropdown-transition-enter);
1352
+ }
1353
+
1354
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1355
+ opacity:var(--tds-select-dropdown-closed-opacity);
1356
+ transform:var(--tds-select-dropdown-closed-transform);
1357
+ transition:var(--tds-select-dropdown-transition-exit);
1358
+ }
1359
+
1360
+ :is(.tds-select:has( > button) [popover]) ul{
1361
+ padding:0;
1362
+ margin:0;
1363
+ list-style:none;
1364
+ }
1365
+
1366
+ @starting-style{
1367
+ :is(.tds-select:has( > button) [popover]):popover-open{
1368
+ opacity:var(--tds-select-dropdown-closed-opacity);
1369
+ transform:var(--tds-select-dropdown-closed-transform);
1370
+ }
1371
+ }
1372
+
1373
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1374
+ .tds-select select:has(> button){
1375
+ padding-inline-end:0;
1376
+ background-image:none;
1377
+ }
1378
+ @media (hover) and (pointer: fine){
1379
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1380
+ padding-block:0;
1381
+ -webkit-appearance:base-select;
1382
+ -moz-appearance:base-select;
1383
+ appearance:base-select;
1384
+ }
1385
+ }
1386
+ :is(.tds-select select:has( > button))::picker-icon{
1387
+ flex-shrink:0;
1388
+ width:var(--tds-select-caret-size);
1389
+ height:var(--tds-select-caret-size);
1390
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1391
+ content:var(--tds-select-background-image);
1392
+ transition:var(--tds-select-caret-transition);
1393
+ }
1394
+
1395
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1396
+ opacity:var(--tds-select-dropdown-closed-opacity);
1397
+ transform:var(--tds-select-dropdown-closed-transform);
1398
+ transition:var(--tds-select-dropdown-transition-exit);
1399
+ }
1400
+
1401
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1402
+ outline-color:var(--t-focus-ring-color);
1403
+ outline-offset:var(--t-focus-ring-offset);
1404
+ border-color:var(--tds-select-border-color-active);
1405
+ }
1406
+
1407
+ :is(.tds-select select:has( > button)):open::picker-icon{
1408
+ opacity:1;
1409
+ transform:rotate(.5turn);
1410
+ }
1411
+
1412
+ :is(.tds-select select:has( > button)) selectedcontent{
1413
+ overflow:hidden;
1414
+ text-overflow:ellipsis;
1415
+ line-height:calc(var(--tds-select-min-height) - 2px);
1416
+ white-space:nowrap;
1417
+ }
1418
+
1419
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1420
+ color:var(--tds-select-placeholder-color);
1421
+ }
1422
+
1423
+ :is(.tds-select select:has( > button))::picker(select){
1424
+ inset:auto;
1425
+ inline-size:-moz-max-content;
1426
+ inline-size:max-content;
1427
+ min-inline-size:anchor-size(width);
1428
+ max-inline-size:100vi;
1429
+ padding:var(--tds-select-dropdown-padding);
1430
+ margin-block:var(--tds-select-dropdown-margin-block);
1431
+ position-try-fallbacks:flip-block, flip-inline;
1432
+ overflow:auto;
1433
+ overflow-x:hidden;
1434
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1435
+ overscroll-behavior:none;
1436
+ -webkit-user-select:none;
1437
+ -moz-user-select:none;
1438
+ user-select:none;
1439
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1440
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1441
+ background:var(--tds-select-dropdown-background-color);
1442
+ border:var(--tds-select-dropdown-border);
1443
+ border-radius:var(--tds-select-dropdown-border-radius);
1444
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1445
+ opacity:var(--tds-select-dropdown-open-opacity);
1446
+ transform:var(--tds-select-dropdown-open-transform);
1447
+ transition:var(--tds-select-dropdown-transition-enter);
1448
+ }
1449
+
1450
+ :is(.tds-select select:has( > button)) option::checkmark{
1451
+ display:none;
1452
+ }
1453
+
1454
+ @starting-style{
1455
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1456
+ opacity:var(--tds-select-dropdown-closed-opacity);
1457
+ transform:var(--tds-select-dropdown-closed-transform);
1458
+ }
1459
+ }
1460
+ }
1461
+
1462
+ .tds-checkbox{
1463
+ --tds-checkbox-font-size:var(--t-font-size-md);
1464
+ --tds-checkbox-cursor:pointer;
1465
+ --tds-checkbox-line-height:1.4;
1466
+ --tds-checkbox-transition-property:background-color, border-color;
1467
+
1468
+ --tds-checkbox-input-size:var(--t-element-size-md);
1469
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1470
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1471
+ --tds-checkbox-input-background-color:transparent;
1472
+
1473
+ --tds-checkbox-input-icon:none;
1474
+ --tds-checkbox-input-icon-visibility:hidden;
1475
+ --tds-checkbox-input-icon-opacity:0;
1476
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1477
+
1478
+ --tds-checkbox-label-color:var(--t-form-color);
1479
+
1480
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1481
+ --tds-checkbox-description-line-height:1.35;
1482
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1483
+ --tds-checkbox-description-invalid-icon-display:none;
1484
+
1485
+ position:relative;
1486
+ display:inline-grid;
1487
+ grid-template-columns:auto;
1488
+ grid-auto-columns:1fr;
1489
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1490
+ line-height:var(--tds-checkbox-line-height);
1491
+ cursor:var(--tds-checkbox-cursor);
1492
+ -webkit-user-select:none;
1493
+ -moz-user-select:none;
1494
+ user-select:none;
1495
+ }
1496
+
1497
+ .tds-checkbox label{
1498
+ grid-area:1 / 2;
1499
+ font-size:var(--tds-checkbox-font-size);
1500
+ font-weight:var(--t-font-weight-normal);
1501
+ color:var(--tds-checkbox-label-color);
1502
+ cursor:var(--tds-checkbox-cursor);
1503
+ }
1504
+
1505
+ .tds-checkbox tds-indeterminate{
1506
+ display:flex;
1507
+ }
1508
+
1509
+ .tds-checkbox input[type="checkbox"]{
1510
+ position:relative;
1511
+ width:1em;
1512
+ height:1em;
1513
+ margin:calc((1lh - 1em) / 2) 0 0;
1514
+ font-size:var(--tds-checkbox-font-size);
1515
+ line-height:inherit;
1516
+ -webkit-appearance:none;
1517
+ -moz-appearance:none;
1518
+ appearance:none;
1519
+ cursor:var(--tds-checkbox-cursor);
1520
+ background-color:var(--tds-checkbox-input-background-color);
1521
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1522
+ border-radius:var(--tds-checkbox-input-border-radius);
1523
+ transition-timing-function:var(--t-ease-in-out);
1524
+ transition-duration:var(--t-duration-200);
1525
+ transition-property:var(--tds-checkbox-transition-property);
1526
+ }
1527
+
1528
+ :is(.tds-checkbox input[type="checkbox"])::before{
1529
+ position:absolute;
1530
+ top:50%;
1531
+ left:50%;
1532
+ visibility:var(--tds-checkbox-input-icon-visibility);
1533
+ width:100%;
1534
+ height:100%;
1535
+ content:"";
1536
+ background-color:var(--tds-checkbox-input-icon-fill);
1537
+ border-radius:var(--tds-checkbox-input-border-radius);
1538
+ opacity:var(--tds-checkbox-input-icon-opacity);
1539
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1540
+ mask-image:var(--tds-checkbox-input-icon);
1541
+ -webkit-mask-repeat:no-repeat;
1542
+ mask-repeat:no-repeat;
1543
+ -webkit-mask-size:contain;
1544
+ mask-size:contain;
1545
+ transform:translate(-50%, -50%);
1546
+ }
1547
+
1548
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1549
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1550
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1551
+ }
1442
1552
 
1443
- .tds-select:has( > [popover]:popover-open) > button{
1444
- border-color:var(--tds-select-border-color-active);
1445
- }
1553
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1554
+ outline:var(--t-focus-ring-outline);
1555
+ outline-offset:var(--t-focus-ring-offset);
1556
+ }
1446
1557
 
1447
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1448
- transform:rotate(.5turn);
1558
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1559
+ pointer-events:none;
1449
1560
  }
1450
1561
 
1451
- .tds-select :is(hr,li[role="separator"]){
1452
- margin-block:var(--t-spacing-half);
1453
- color:var(--tds-select-border-color);
1454
- border:0;
1455
- border-top:1px solid;
1456
- }
1562
+ @media (prefers-reduced-motion: reduce){
1457
1563
 
1458
- .tds-select :is(li[role="option"],option:not([hidden])){
1459
- display:block;
1460
- padding-block:var(--tds-select-option-padding-block);
1461
- padding-inline:var(--tds-select-option-padding-inline);
1462
- overflow:hidden;
1463
- text-overflow:ellipsis;
1464
- font-size:var(--tds-select-option-font-size);
1465
- color:var(--tds-select-option-color);
1466
- white-space:nowrap;
1467
- cursor:default;
1468
- border-radius:var(--tds-select-option-border-radius);
1564
+ .tds-checkbox input[type="checkbox"]{
1565
+ --tds-checkbox-transition-property:none;
1469
1566
  }
1470
-
1471
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1472
- outline:none;
1473
1567
  }
1474
1568
 
1475
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1476
- background:var(--tds-select-option-background-hover);
1477
- }
1569
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1570
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1571
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1572
+ --tds-checkbox-input-icon-visibility:visible;
1573
+ --tds-checkbox-input-icon-opacity:1;
1574
+ }
1478
1575
 
1479
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1480
- background:var(--tds-select-option-background-active);
1576
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1577
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1578
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1481
1579
  }
1482
1580
 
1483
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1484
- color:var(--t-form-color-disabled);
1485
- cursor:not-allowed;
1486
- }
1581
+ .tds-checkbox:has(input:checked){
1582
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1583
+ }
1487
1584
 
1488
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1489
- background:transparent;
1490
- }
1585
+ .tds-checkbox:has(input:indeterminate){
1586
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1587
+ }
1491
1588
 
1492
- .tds-select :is(li[role="presentation"],legend){
1493
- position:sticky;
1494
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1495
- z-index:1;
1496
- float:inline-start;
1497
- inline-size:100%;
1498
- padding-block:var(--tds-select-group-label-padding-block);
1499
- padding-inline:var(--tds-select-group-label-padding-inline);
1500
- container-type:scroll-state;
1501
- font-size:var(--tds-select-group-label-font-size);
1502
- font-weight:var(--tds-select-group-label-font-weight);
1503
- letter-spacing:var(--tds-select-group-label-letter-spacing);
1504
- background:var(--tds-select-group-label-background);
1505
- text-box:trim-both cap alphabetic;
1589
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1590
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1591
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1592
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1506
1593
  }
1507
1594
 
1508
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1509
- display:inline-flex;
1510
- gap:var(--t-spacing-half);
1511
- align-items:center;
1512
- color:var(--tds-select-group-label-color);
1513
- transition:var(--tds-select-group-label-transition);
1595
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1596
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1597
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1514
1598
  }
1515
1599
 
1516
- @container scroll-state(stuck){
1517
-
1518
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1519
- color:var(--tds-select-group-label-color-stuck);
1600
+ :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{
1601
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1602
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1520
1603
  }
1521
1604
 
1522
- @media (forced-colors: active){
1523
-
1524
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1525
- color:var(--tds-select-group-label-color-stuck);
1526
- }
1527
- }
1605
+ :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){
1606
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1607
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1528
1608
  }
1529
1609
 
1530
- .tds-select.tds-select--lg{
1531
- --tds-select-min-height:var(--t-container-size-lg);
1532
- --tds-select-font-size:var(--t-font-size-lg);
1533
- }
1610
+ .tds-checkbox:has(input:required) label::after{
1611
+ margin-left:.25ch;
1612
+ color:var(--t-text-color-status-error);
1613
+ content:"*";
1614
+ }
1534
1615
 
1535
- @media (prefers-reduced-motion: reduce){
1616
+ .tds-checkbox:has(input:disabled){
1617
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1618
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1536
1619
 
1537
- .tds-select{
1538
- --tds-select-transition-property:none;
1539
- --tds-select-dropdown-transition-enter:none;
1540
- --tds-select-dropdown-transition-exit:none;
1541
- --tds-select-dropdown-scroll-behavior:auto;
1542
- --tds-select-dropdown-closed-transform:none;
1543
- --tds-select-dropdown-open-transform:none;
1544
- --tds-select-caret-transition:none;
1545
- }
1620
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1621
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1622
+ --tds-checkbox-cursor:not-allowed;
1546
1623
  }
1547
1624
 
1548
- .tds-select-description{
1625
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1626
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1627
+ }
1628
+
1629
+ .tds-checkbox-description{
1549
1630
  display:flex;
1631
+ grid-area:2 / 2;
1550
1632
  gap:var(--t-spacing-half);
1551
1633
  align-items:flex-start;
1552
1634
  margin:0;
1553
- font-size:var(--t-font-size-sm);
1554
- line-height:1.35;
1555
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1635
+ font-size:var(--tds-checkbox-description-font-size);
1636
+ line-height:var(--tds-checkbox-description-line-height);
1637
+ color:var(--tds-checkbox-description-color);
1556
1638
  cursor:text;
1557
1639
  }
1558
1640
 
1559
- .tds-select-description .tds-select-description-invalid-icon{
1560
- display:var(--tds-select-description-invalid-icon-display, none);
1641
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1642
+ display:var(--tds-checkbox-description-invalid-icon-display);
1561
1643
  flex-shrink:0;
1562
- margin-block-start:calc(.5lh - .5em);
1563
- line-height:1.35;
1644
+ margin-top:calc(.5lh - .5em);
1645
+ line-height:var(--tds-checkbox-description-line-height);
1564
1646
  }
1565
1647
 
1566
- .tds-select > .tds-select-hidden-select{
1567
- position:absolute;
1568
- inline-size:1px;
1569
- block-size:1px;
1570
- padding:0;
1571
- margin:0;
1572
- pointer-events:none;
1573
- opacity:0;
1648
+ .tds-checkbox--sm{
1649
+ --tds-checkbox-line-height:1.35;
1650
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1651
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1652
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1653
+ --tds-checkbox-description-line-height:1.3;
1574
1654
  }
1575
1655
 
1576
- .tds-select:has( > button) > button{
1577
- display:block;
1578
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1579
- overflow:hidden;
1580
- text-overflow:ellipsis;
1581
- color:var(--tds-select-placeholder-color);
1582
- white-space:nowrap;
1583
- background-image:none;
1584
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1585
- -webkit-tap-highlight-color:transparent;
1586
- }
1587
-
1588
- :is(.tds-select:has( > button) > button)::after{
1589
- position:absolute;
1590
- inset-block:0;
1591
- inset-inline-end:var(--tds-select-caret-inline-offset);
1592
- width:var(--tds-select-caret-size);
1593
- height:var(--tds-select-caret-size);
1594
- margin-block:auto;
1595
- pointer-events:none;
1596
- content:var(--tds-select-background-image);
1597
- transform:rotate(0);
1598
- transition:var(--tds-select-caret-transition);
1599
- }
1656
+ .tds-radio-group{
1657
+ --tds-radio-group-font-size:var(--t-font-size-md);
1658
+ --tds-radio-group-line-height:1.4;
1659
+ --tds-radio-group-gap:var(--t-spacing-1);
1600
1660
 
1601
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1602
- color:var(--tds-select-color);
1603
- }
1661
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1604
1662
 
1605
- .tds-select:has( > button) [popover]{
1606
- inset:auto;
1607
- inline-size:-moz-max-content;
1608
- inline-size:max-content;
1609
- min-inline-size:anchor-size(width);
1610
- max-inline-size:100vi;
1611
- max-block-size:min(50vh, 20rem);
1612
- padding:var(--tds-select-dropdown-padding);
1613
- margin-block:var(--tds-select-dropdown-margin-block);
1614
- position-area:block-end span-inline-start;
1615
- position-try-fallbacks:flip-block, flip-inline;
1616
- overflow:auto;
1617
- overflow-x:hidden;
1618
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1619
- -webkit-user-select:none;
1620
- -moz-user-select:none;
1621
- user-select:none;
1622
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1623
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1624
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1625
- background:var(--tds-select-dropdown-background-color);
1626
- border:var(--tds-select-dropdown-border);
1627
- border-radius:var(--tds-select-dropdown-border-radius);
1628
- box-shadow:var(--tds-select-dropdown-box-shadow);
1629
- opacity:var(--tds-select-dropdown-open-opacity);
1630
- transform:var(--tds-select-dropdown-open-transform);
1631
- transition:var(--tds-select-dropdown-transition-enter);
1632
- }
1663
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1664
+ --tds-radio-group-description-line-height:1.35;
1665
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1666
+ --tds-radio-group-description-invalid-icon-display:none;
1667
+ display:flex;
1668
+ flex-direction:column;
1669
+ gap:var(--tds-radio-group-gap);
1670
+ padding:0;
1671
+ margin:0;
1633
1672
 
1634
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1635
- opacity:var(--tds-select-dropdown-closed-opacity);
1636
- transform:var(--tds-select-dropdown-closed-transform);
1637
- transition:var(--tds-select-dropdown-transition-exit);
1638
- }
1673
+ font-size:var(--tds-radio-group-font-size);
1674
+ line-height:var(--tds-radio-group-line-height);
1675
+ border:0;
1676
+ }
1639
1677
 
1640
- :is(.tds-select:has( > button) [popover]) ul{
1641
- padding:0;
1642
- margin:0;
1643
- list-style:none;
1644
- }
1678
+ .tds-radio-group legend{
1679
+ padding:0;
1680
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1681
+ }
1645
1682
 
1646
- @starting-style{
1647
- :is(.tds-select:has( > button) [popover]):popover-open{
1648
- opacity:var(--tds-select-dropdown-closed-opacity);
1649
- transform:var(--tds-select-dropdown-closed-transform);
1650
- }
1651
- }
1683
+ .tds-radio-group:has(.tds-radio-group-description){
1684
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1685
+ }
1652
1686
 
1653
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1654
- .tds-select select:has(> button){
1655
- padding-inline-end:0;
1656
- background-image:none;
1687
+ .tds-radio-group[aria-invalid="true"]{
1688
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1689
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1657
1690
  }
1658
- @media (hover) and (pointer: fine){
1659
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1660
- padding-block:0;
1661
- -webkit-appearance:base-select;
1662
- -moz-appearance:base-select;
1663
- appearance:base-select;
1664
- }
1665
- }
1666
- :is(.tds-select select:has( > button))::picker-icon{
1667
- flex-shrink:0;
1668
- width:var(--tds-select-caret-size);
1669
- height:var(--tds-select-caret-size);
1670
- margin-inline-end:var(--tds-select-caret-inline-offset);
1671
- content:var(--tds-select-background-image);
1672
- transition:var(--tds-select-caret-transition);
1673
- }
1674
1691
 
1675
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1676
- opacity:var(--tds-select-dropdown-closed-opacity);
1677
- transform:var(--tds-select-dropdown-closed-transform);
1678
- transition:var(--tds-select-dropdown-transition-exit);
1692
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1693
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1679
1694
  }
1680
1695
 
1681
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1682
- outline-color:var(--t-focus-ring-color);
1683
- outline-offset:var(--t-focus-ring-offset);
1684
- border-color:var(--tds-select-border-color-active);
1685
- }
1696
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1697
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1698
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1699
+ }
1686
1700
 
1687
- :is(.tds-select select:has( > button)):open::picker-icon{
1688
- opacity:1;
1689
- transform:rotate(.5turn);
1690
- }
1701
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1702
+ --tds-radio-input-background-color:var(--t-form-background-color);
1703
+ }
1691
1704
 
1692
- :is(.tds-select select:has( > button)) selectedcontent{
1693
- overflow:hidden;
1694
- text-overflow:ellipsis;
1695
- line-height:calc(var(--tds-select-min-height) - 2px);
1696
- white-space:nowrap;
1705
+ .tds-radio-group:has(input:required) legend::after{
1706
+ margin-left:.25ch;
1707
+ color:var(--t-text-color-status-error);
1708
+ content:"*";
1697
1709
  }
1698
1710
 
1699
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1700
- color:var(--tds-select-placeholder-color);
1701
- }
1711
+ .tds-radio-group-fields{
1712
+ display:flex;
1713
+ flex-direction:column;
1714
+ gap:var(--tds-radio-group-gap);
1715
+ align-items:flex-start;
1716
+ }
1702
1717
 
1703
- :is(.tds-select select:has( > button))::picker(select){
1704
- inset:auto;
1705
- inline-size:-moz-max-content;
1706
- inline-size:max-content;
1707
- min-inline-size:anchor-size(width);
1708
- max-inline-size:100vi;
1709
- padding:var(--tds-select-dropdown-padding);
1710
- margin-block:var(--tds-select-dropdown-margin-block);
1711
- position-try-fallbacks:flip-block, flip-inline;
1712
- overflow:auto;
1713
- overflow-x:hidden;
1714
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1715
- -webkit-user-select:none;
1716
- -moz-user-select:none;
1717
- user-select:none;
1718
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1719
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1720
- background:var(--tds-select-dropdown-background-color);
1721
- border:var(--tds-select-dropdown-border);
1722
- border-radius:var(--tds-select-dropdown-border-radius);
1723
- box-shadow:var(--tds-select-dropdown-box-shadow);
1724
- opacity:var(--tds-select-dropdown-open-opacity);
1725
- transform:var(--tds-select-dropdown-open-transform);
1726
- transition:var(--tds-select-dropdown-transition-enter);
1727
- }
1718
+ .tds-radio-group-description{
1719
+ display:flex;
1720
+ gap:var(--t-spacing-half);
1721
+ align-items:flex-start;
1722
+ margin:0;
1723
+ font-size:var(--tds-radio-group-description-font-size);
1724
+ line-height:var(--tds-radio-group-description-line-height);
1725
+ color:var(--tds-radio-group-description-color);
1726
+ cursor:text;
1727
+ }
1728
1728
 
1729
- :is(.tds-select select:has( > button)) option::checkmark{
1730
- display:none;
1731
- }
1729
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1730
+ display:var(--tds-radio-group-description-invalid-icon-display);
1731
+ flex-shrink:0;
1732
+ margin-top:calc(.5lh - .5em);
1733
+ line-height:var(--tds-radio-group-description-line-height);
1734
+ }
1732
1735
 
1733
- @starting-style{
1734
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1735
- opacity:var(--tds-select-dropdown-closed-opacity);
1736
- transform:var(--tds-select-dropdown-closed-transform);
1737
- }
1738
- }
1736
+ .tds-radio-group--sm{
1737
+ --tds-radio-group-line-height:1.35;
1738
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1739
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1740
+ --tds-radio-group-description-line-height:1.3;
1739
1741
  }
1740
1742
 
1741
1743
  .tds-input{
@@ -3615,67 +3617,220 @@ a[class="tds-btn"]{
3615
3617
  margin:0;
3616
3618
  }
3617
3619
 
3618
- .tds-combo-box-list-item{
3619
- display:block;
3620
- padding-block:var(--t-spacing-1);
3621
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3622
- overflow:hidden;
3623
- text-overflow:ellipsis;
3624
- font-size:1rem;
3620
+ .tds-combo-box-list-item{
3621
+ display:block;
3622
+ padding-block:var(--t-spacing-1);
3623
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3624
+ overflow:hidden;
3625
+ text-overflow:ellipsis;
3626
+ font-size:1rem;
3627
+ color:var(--t-text-color);
3628
+ white-space:nowrap;
3629
+ cursor:default;
3630
+ outline-offset:-1px;
3631
+ border-radius:var(--t-border-radius);
3632
+ }
3633
+
3634
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3635
+ background:var(--t-fill-color-neutral-070);
3636
+ }
3637
+
3638
+ .tds-combo-box-list-item[data-selected]{
3639
+ background:var(--t-fill-color-button-interaction-ghost-active);
3640
+ }
3641
+
3642
+ .tds-combo-box-list-item[data-focus-visible]{
3643
+ outline:var(--t-focus-ring-outline);
3644
+ outline-offset:-1px;
3645
+ }
3646
+
3647
+ .tds-combo-box-list-item[data-disabled]{
3648
+ color:var(--t-form-color-disabled);
3649
+ cursor:not-allowed;
3650
+ }
3651
+
3652
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3653
+ background:transparent;
3654
+ }
3655
+
3656
+ .tds-combo-box-list-section:not(:first-child){
3657
+ margin-block-start:var(--t-spacing-half);
3658
+ }
3659
+
3660
+ .tds-combo-box-section-header{
3661
+ padding-block:var(--t-spacing-1);
3662
+ padding-inline:var(--t-spacing-1);
3663
+ font-size:var(--t-font-size-sm);
3664
+ font-weight:var(--t-font-weight-semibold);
3665
+ color:var(--t-text-color-secondary);
3666
+ }
3667
+
3668
+ .tds-combo-box-description{
3669
+ display:flex;
3670
+ gap:var(--t-spacing-half);
3671
+ align-items:flex-start;
3672
+ margin:0;
3673
+ font-size:var(--t-font-size-sm);
3674
+ line-height:1.35;
3675
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3676
+ cursor:text;
3677
+ }
3678
+
3679
+ .tds-combo-box-description-invalid-icon{
3680
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3681
+ flex-shrink:0;
3682
+ margin-block-start:calc(.5lh - .5em);
3683
+ line-height:1.35;
3684
+ }
3685
+
3686
+ .tds-number-stepper{
3687
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3688
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3689
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3690
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3691
+ --tds-number-stepper-color:var(--t-form-color);
3692
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3693
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3694
+ --tds-number-stepper-padding-block:6px;
3695
+ --tds-number-stepper-button-offset:4px;
3696
+ --tds-number-stepper-button-gap:2px;
3697
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3698
+ --tds-number-stepper-description-invalid-icon-display:none;
3699
+
3700
+ position:relative;
3701
+ display:flex;
3702
+ flex-direction:column;
3703
+ gap:var(--t-spacing-half);
3704
+ }
3705
+
3706
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3707
+ margin-left:.25ch;
3708
+ color:var(--t-text-color-status-error);
3709
+ content:"*";
3710
+ }
3711
+
3712
+ .tds-number-stepper[data-invalid]{
3713
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3714
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3715
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3716
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3717
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3718
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3719
+ }
3720
+
3721
+ .tds-number-stepper[data-disabled]{
3722
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3723
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3724
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3725
+ }
3726
+
3727
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3728
+ color:var(--t-form-color-disabled);
3729
+ }
3730
+
3731
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3732
+ cursor:not-allowed;
3733
+ }
3734
+
3735
+ .tds-number-stepper--lg{
3736
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3737
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3738
+ --tds-number-stepper-button-offset:5px;
3739
+ --tds-number-stepper-button-gap:4px;
3740
+ }
3741
+
3742
+ .tds-number-stepper-label{
3743
+ font-size:var(--t-font-size-md);
3744
+ font-weight:var(--t-font-weight-normal);
3625
3745
  color:var(--t-text-color);
3626
- white-space:nowrap;
3627
3746
  cursor:default;
3628
- outline-offset:-1px;
3629
- border-radius:var(--t-border-radius);
3630
3747
  }
3631
3748
 
3632
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3633
- background:var(--t-fill-color-neutral-070);
3634
- }
3749
+ .tds-number-stepper-field{
3750
+ display:flex;
3751
+ gap:var(--tds-number-stepper-button-gap);
3752
+ align-items:center;
3753
+ inline-size:100%;
3754
+ min-block-size:var(--tds-number-stepper-min-height);
3755
+ font-family:inherit;
3756
+ font-size:var(--tds-number-stepper-font-size);
3757
+ line-height:1;
3758
+ color:var(--tds-number-stepper-color);
3759
+ -webkit-appearance:none;
3760
+ -moz-appearance:none;
3761
+ appearance:none;
3762
+ cursor:default;
3763
+ outline:var(--t-focus-ring-width) solid transparent;
3764
+ outline-offset:0;
3765
+ background-color:var(--tds-number-stepper-background-color);
3766
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3767
+ border-radius:var(--t-form-border-radius);
3768
+ }
3635
3769
 
3636
- .tds-combo-box-list-item[data-selected]{
3637
- background:var(--t-fill-color-button-interaction-ghost-active);
3770
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3771
+ border-color:var(--tds-number-stepper-border-color-hover);
3638
3772
  }
3639
3773
 
3640
- .tds-combo-box-list-item[data-focus-visible]{
3641
- outline:var(--t-focus-ring-outline);
3642
- outline-offset:-1px;
3774
+ .tds-number-stepper-field[data-focus-within]{
3775
+ outline-color:var(--t-focus-ring-color);
3776
+ outline-offset:var(--t-focus-ring-offset);
3777
+ border-color:var(--tds-number-stepper-border-color-active);
3643
3778
  }
3644
3779
 
3645
- .tds-combo-box-list-item[data-disabled]{
3646
- color:var(--t-form-color-disabled);
3647
- cursor:not-allowed;
3780
+ .tds-number-stepper-field:has([readonly]){
3781
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3648
3782
  }
3649
3783
 
3650
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3651
- background:transparent;
3784
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3785
+ border-color:var(--t-form-border-color-hover);
3652
3786
  }
3653
3787
 
3654
- .tds-combo-box-list-section:not(:first-child){
3655
- margin-block-start:var(--t-spacing-half);
3788
+ .tds-number-stepper-input{
3789
+ display:flex;
3790
+ flex:1;
3791
+ align-items:center;
3792
+ min-inline-size:0;
3793
+ padding-block:var(--tds-number-stepper-padding-block);
3794
+ padding-inline:var(--t-spacing-1);
3795
+ font-family:inherit;
3796
+ font-size:inherit;
3797
+ color:inherit;
3798
+ outline:0;
3799
+ background:transparent;
3800
+ border:0;
3801
+ }
3802
+
3803
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3804
+ margin:0;
3805
+ -webkit-appearance:none;
3806
+ appearance:none;
3656
3807
  }
3657
3808
 
3658
- .tds-combo-box-section-header{
3659
- padding-block:var(--t-spacing-1);
3660
- padding-inline:var(--t-spacing-1);
3661
- font-size:var(--t-font-size-sm);
3662
- font-weight:var(--t-font-weight-semibold);
3663
- color:var(--t-text-color-secondary);
3809
+ .tds-number-stepper-button{
3810
+ flex-shrink:0;
3811
+ align-self:center;
3812
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3813
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3814
+ padding:0;
3664
3815
  }
3665
3816
 
3666
- .tds-combo-box-description{
3817
+ .tds-number-stepper-button:last-of-type{
3818
+ margin-inline-end:var(--tds-number-stepper-button-offset);
3819
+ }
3820
+
3821
+ .tds-number-stepper-description{
3667
3822
  display:flex;
3668
3823
  gap:var(--t-spacing-half);
3669
3824
  align-items:flex-start;
3670
3825
  margin:0;
3671
3826
  font-size:var(--t-font-size-sm);
3672
3827
  line-height:1.35;
3673
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3828
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3674
3829
  cursor:text;
3675
3830
  }
3676
3831
 
3677
- .tds-combo-box-description-invalid-icon{
3678
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3832
+ .tds-number-stepper-description-invalid-icon{
3833
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
3679
3834
  flex-shrink:0;
3680
3835
  margin-block-start:calc(.5lh - .5em);
3681
3836
  line-height:1.35;
@@ -3986,159 +4141,6 @@ a[class="tds-btn"]{
3986
4141
  color:var(--t-text-color-secondary);
3987
4142
  }
3988
4143
 
3989
- .tds-number-stepper{
3990
- --tds-number-stepper-border-color:var(--t-form-border-color);
3991
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3992
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3993
- --tds-number-stepper-background-color:var(--t-form-background-color);
3994
- --tds-number-stepper-color:var(--t-form-color);
3995
- --tds-number-stepper-font-size:var(--t-font-size-md);
3996
- --tds-number-stepper-min-height:var(--t-container-size-md);
3997
- --tds-number-stepper-padding-block:6px;
3998
- --tds-number-stepper-button-offset:4px;
3999
- --tds-number-stepper-button-gap:2px;
4000
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
4001
- --tds-number-stepper-description-invalid-icon-display:none;
4002
-
4003
- position:relative;
4004
- display:flex;
4005
- flex-direction:column;
4006
- gap:var(--t-spacing-half);
4007
- }
4008
-
4009
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4010
- margin-left:.25ch;
4011
- color:var(--t-text-color-status-error);
4012
- content:"*";
4013
- }
4014
-
4015
- .tds-number-stepper[data-invalid]{
4016
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
4017
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4018
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4019
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
4020
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
4021
- --tds-number-stepper-description-invalid-icon-display:inline-block;
4022
- }
4023
-
4024
- .tds-number-stepper[data-disabled]{
4025
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4026
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4027
- --tds-number-stepper-color:var(--t-form-color-disabled);
4028
- }
4029
-
4030
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4031
- color:var(--t-form-color-disabled);
4032
- }
4033
-
4034
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4035
- cursor:not-allowed;
4036
- }
4037
-
4038
- .tds-number-stepper--lg{
4039
- --tds-number-stepper-min-height:var(--t-container-size-lg);
4040
- --tds-number-stepper-font-size:var(--t-font-size-lg);
4041
- --tds-number-stepper-button-offset:5px;
4042
- --tds-number-stepper-button-gap:4px;
4043
- }
4044
-
4045
- .tds-number-stepper-label{
4046
- font-size:var(--t-font-size-md);
4047
- font-weight:var(--t-font-weight-normal);
4048
- color:var(--t-text-color);
4049
- cursor:default;
4050
- }
4051
-
4052
- .tds-number-stepper-field{
4053
- display:flex;
4054
- gap:var(--tds-number-stepper-button-gap);
4055
- align-items:center;
4056
- inline-size:100%;
4057
- min-block-size:var(--tds-number-stepper-min-height);
4058
- font-family:inherit;
4059
- font-size:var(--tds-number-stepper-font-size);
4060
- line-height:1;
4061
- color:var(--tds-number-stepper-color);
4062
- -webkit-appearance:none;
4063
- -moz-appearance:none;
4064
- appearance:none;
4065
- cursor:default;
4066
- outline:var(--t-focus-ring-width) solid transparent;
4067
- outline-offset:0;
4068
- background-color:var(--tds-number-stepper-background-color);
4069
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4070
- border-radius:var(--t-form-border-radius);
4071
- }
4072
-
4073
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4074
- border-color:var(--tds-number-stepper-border-color-hover);
4075
- }
4076
-
4077
- .tds-number-stepper-field[data-focus-within]{
4078
- outline-color:var(--t-focus-ring-color);
4079
- outline-offset:var(--t-focus-ring-offset);
4080
- border-color:var(--tds-number-stepper-border-color-active);
4081
- }
4082
-
4083
- .tds-number-stepper-field:has([readonly]){
4084
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4085
- }
4086
-
4087
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
4088
- border-color:var(--t-form-border-color-hover);
4089
- }
4090
-
4091
- .tds-number-stepper-input{
4092
- display:flex;
4093
- flex:1;
4094
- align-items:center;
4095
- min-inline-size:0;
4096
- padding-block:var(--tds-number-stepper-padding-block);
4097
- padding-inline:var(--t-spacing-1);
4098
- font-family:inherit;
4099
- font-size:inherit;
4100
- color:inherit;
4101
- outline:0;
4102
- background:transparent;
4103
- border:0;
4104
- }
4105
-
4106
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4107
- margin:0;
4108
- -webkit-appearance:none;
4109
- appearance:none;
4110
- }
4111
-
4112
- .tds-number-stepper-button{
4113
- flex-shrink:0;
4114
- align-self:center;
4115
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4116
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4117
- padding:0;
4118
- }
4119
-
4120
- .tds-number-stepper-button:last-of-type{
4121
- margin-inline-end:var(--tds-number-stepper-button-offset);
4122
- }
4123
-
4124
- .tds-number-stepper-description{
4125
- display:flex;
4126
- gap:var(--t-spacing-half);
4127
- align-items:flex-start;
4128
- margin:0;
4129
- font-size:var(--t-font-size-sm);
4130
- line-height:1.35;
4131
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4132
- cursor:text;
4133
- }
4134
-
4135
- .tds-number-stepper-description-invalid-icon{
4136
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
4137
- flex-shrink:0;
4138
- margin-block-start:calc(.5lh - .5em);
4139
- line-height:1.35;
4140
- }
4141
-
4142
4144
  .tds-time-field{
4143
4145
  --tds-time-field-border-color:var(--t-form-border-color);
4144
4146
  --tds-time-field-border-color-hover:var(--t-form-border-color-hover);