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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1443 -1443
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1443 -1443
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,782 +1,844 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
1
+
2
+ @media (prefers-reduced-motion: no-preference){
3
+
4
+ :root{
5
+ interpolate-size:allow-keywords;
5
6
  }
7
+ }
6
8
 
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;
9
+ @layer tds-component{
10
+ tds-sidenav,
11
+ .tds-sidenav{
12
+ --tds-sidenav-indent:12px;
13
+ --tds-sidenav-item-depth:0;
25
14
 
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);
15
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
28
16
 
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);
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);
32
23
 
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);
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);
35
28
 
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);
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;
39
32
 
40
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
45
- }
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);
46
36
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
37
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
49
39
  }
50
40
 
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));
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;
48
+ }
55
49
  }
50
+
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);
56
57
  }
58
+ }
57
59
 
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
- }
60
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
+ display:flex;
62
+ }
63
+
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%;
76
68
  }
69
+
70
+ .tds-sidenav-section-list{
71
+ width:100%;
72
+ padding:0;
73
+ margin:0;
74
+ list-style:none;
77
75
  }
78
76
 
79
- .tds-page-header{
77
+ .tds-sidenav-section-header{
80
78
  display:flex;
81
- flex-direction:column;
82
- padding-top:var(--tds-page-header-padding-y);
83
- color:var(--tds-page-header-color);
84
- background:var(--tds-page-header-background-color);
85
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
79
+ align-items:baseline;
80
+ justify-content:space-between;
81
+ padding-top:var(--t-spacing-2);
86
82
  }
87
83
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
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;
90
91
  }
91
92
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
93
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
+ padding-top:0;
94
95
  }
95
96
 
96
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
- width:100%;
97
+ .tds-sidenav-section-header [slot="label-actions"]{
98
+ display:flex;
99
+ gap:var(--t-spacing-half);
100
+ align-items:center;
98
101
  }
99
102
 
100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
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;
101
120
  display:flex;
102
- flex-flow:row wrap;
103
- gap:var(--t-spacing-half) var(--t-spacing-1);
104
- align-items:flex-start;
105
- justify-content:flex-start;
106
- min-width:0;
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);
107
139
  }
108
140
 
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);
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;
117
148
  }
118
149
 
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;
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);
127
153
  text-decoration:none;
128
- -webkit-appearance:none;
129
- -moz-appearance:none;
130
- appearance:none;
131
- cursor:pointer;
132
- outline-offset:-2px;
133
- background-color:var(--tds-page-header-nav-item-background-color);
134
- background-clip:padding-box;
135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
138
154
  }
139
155
 
140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
145
- }
156
+ :is(.tds-sidenav-item :is(a,button)):active{
157
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
+ }
146
159
 
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
- }
160
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
+ overflow:hidden;
162
+ color:var(--tds-sidenav-item-icon-color);
163
+ }
152
164
 
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
- }
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);
169
+ }
157
170
 
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
- }
171
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
+ --tds-sidenav-indent:19px;
173
+ }
164
174
 
165
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
- position:relative;
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;
167
179
  }
168
180
 
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);
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
+ }
207
+
208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
+ --tds-sidenav-item-depth:2;
210
+ }
211
+
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;
218
+ }
219
+
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);
172
229
  }
173
230
 
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{
231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
175
232
  position:absolute;
176
- top:-5px;
177
- right:-2px;
178
- width:10px;
179
- height:10px;
233
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
+ z-index:-1;
235
+ height:100%;
180
236
  content:"";
181
- background:var(--tds-page-header-nav-item-indicator-color);
182
- border-radius:50%;
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);
183
240
  }
184
241
 
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
- }
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;
189
246
  }
190
247
 
191
- .tds-page-header__title-bar{
192
- display:flex;
193
- flex-direction:column;
194
- gap:var(--t-spacing-2) var(--t-spacing-1);
195
- align-items:flex-start;
196
- justify-content:space-between;
197
- padding:0 var(--tds-page-header-padding-x);
198
- }
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);
251
+ }
199
252
 
200
- .tds-page-header--profile > .tds-page-header__title-bar{
201
- align-items:center;
202
- }
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);
255
+ }
203
256
 
204
- .tds-page-header__primary{
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{
263
+ display:flex;
264
+ gap:var(--t-spacing-2);
265
+ align-items:center;
205
266
  width:100%;
206
267
  }
207
268
 
208
- .tds-page-header__primary h1{
269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
+ order:0;
271
+ }
272
+
273
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
+ flex:1;
275
+ order:1;
209
276
  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;
277
+ font-size:var(--t-font-size-lg);
278
+ font-weight:var(--t-font-weight-medium);
279
+ color:var(--t-text-color-headline);
215
280
  }
216
281
 
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%;
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;
223
300
  }
224
301
 
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;
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;
230
310
  }
231
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
- width:auto;
233
- }
234
311
 
235
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
- justify-content:flex-end;
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
314
+ }
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
237
318
  }
238
- }
239
-
240
- .tds-page-header-phone,
241
- .tds-page-header-email{
242
- color:var(--tds-page-header-color);
243
- white-space:nowrap;
244
- }
245
319
 
246
- .tds-page-header-email{
247
- max-width:100%;
248
- overflow:hidden;
249
- text-overflow:ellipsis;
250
- }
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
251
324
 
252
- @keyframes indicator-pulse{
253
- 0%{
254
- opacity:.3;
255
- transform:scale(.9);
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
+ }
256
331
  }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
335
+ }
257
336
 
258
- 100%{
259
- opacity:0;
260
- transform:scale(1.75);
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
261
341
  }
262
342
  }
263
343
 
264
-
265
- @media (prefers-reduced-motion: no-preference){
266
-
267
- :root{
268
- interpolate-size:allow-keywords;
269
- }
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
270
347
  }
348
+ }
271
349
 
272
- @layer tds-component{
273
- tds-sidenav,
274
- .tds-sidenav{
275
- --tds-sidenav-indent:12px;
276
- --tds-sidenav-item-depth:0;
277
-
278
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
279
353
 
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);
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
286
357
 
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);
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
361
+ }
291
362
 
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;
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
366
+ }
367
+ }
295
368
 
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);
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;
299
387
 
300
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
301
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
302
- }
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);
303
390
 
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;
311
- }
312
- }
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);
313
394
 
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);
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);
397
+
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);
401
+
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);
320
407
  }
321
- }
322
408
 
323
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
324
- display:flex;
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
325
411
  }
326
412
 
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%;
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
+ }
331
418
  }
332
419
 
333
- .tds-sidenav-section-list{
334
- width:100%;
335
- padding:0;
336
- margin:0;
337
- list-style:none;
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
+ }
438
+ }
338
439
  }
339
440
 
340
- .tds-sidenav-section-header{
441
+ .tds-page-header{
341
442
  display:flex;
342
- align-items:baseline;
343
- justify-content:space-between;
344
- padding-top:var(--t-spacing-2);
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);
345
448
  }
346
449
 
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;
450
+ .tds-page-header:not(.has-nav){
451
+ padding-bottom:var(--tds-page-header-padding-y);
354
452
  }
355
453
 
356
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
357
- padding-top:0;
454
+ .tds-page-header.inactive{
455
+ background:var(--tds-page-header-background-color-inactive);
358
456
  }
359
457
 
360
- .tds-sidenav-section-header [slot="label-actions"]{
361
- display:flex;
362
- gap:var(--t-spacing-half);
363
- align-items:center;
458
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
459
+ width:100%;
364
460
  }
365
461
 
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;
462
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
383
463
  display:flex;
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);
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;
402
469
  }
403
470
 
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;
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);
411
479
  }
412
480
 
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);
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;
416
489
  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;
417
500
  }
418
501
 
419
- :is(.tds-sidenav-item :is(a,button)):active{
420
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
421
- }
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
+ }
422
508
 
423
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
424
- overflow:hidden;
425
- color:var(--tds-sidenav-item-icon-color);
426
- }
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
+ }
427
514
 
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
- }
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
+ }
433
519
 
434
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
435
- --tds-sidenav-indent:19px;
436
- }
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
+ }
437
526
 
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;
527
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
+ position:relative;
442
529
  }
443
530
 
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);
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
+ }
447
535
 
448
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
449
- font-weight:var(--t-font-weight-semibold);
450
- }
451
-
452
- .tds-sidenav-item:has(.tds-sidenav-section){
453
- display:flex;
454
- flex-direction:column;
455
- gap:var(--t-spacing-half);
456
- }
457
-
458
- .tds-sidenav-item .tds-sidenav-section-list{
459
- --tds-sidenav-item-depth:1;
460
- gap:0;
461
- }
462
-
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);
469
- }
470
-
471
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
472
- --tds-sidenav-item-depth:2;
473
- }
474
-
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
- }
482
-
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
- }
493
-
494
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
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{
495
537
  position:absolute;
496
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
497
- z-index:-1;
498
- height:100%;
538
+ top:-5px;
539
+ right:-2px;
540
+ width:10px;
541
+ height:10px;
499
542
  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
- }
504
-
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
- }
510
-
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);
543
+ background:var(--tds-page-header-nav-item-indicator-color);
544
+ border-radius:50%;
514
545
  }
515
546
 
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);
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
+ }
518
551
  }
519
552
 
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
- }
524
-
525
- .tds-sidenav-responsive-header{
553
+ .tds-page-header__title-bar{
526
554
  display:flex;
527
- gap:var(--t-spacing-2);
528
- align-items:center;
529
- width:100%;
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);
530
560
  }
531
561
 
532
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
533
- order:0;
562
+ .tds-page-header--profile > .tds-page-header__title-bar{
563
+ align-items:center;
534
564
  }
535
565
 
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);
543
- }
566
+ .tds-page-header__primary{
567
+ width:100%;
568
+ }
544
569
 
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;
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;
563
577
  }
564
578
 
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;
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%;
573
585
  }
574
586
 
575
- .tds-sidenav-item :is(a, button) :is(.prefix){
576
- display:none;
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;
577
592
  }
578
- @supports selector(:popover-open){
579
- .tds-sidenav-collapse:popover-open{
580
- display:flex;
593
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
+ width:auto;
581
595
  }
582
596
 
583
- .tds-sidenav-collapse:not(:popover-open){
584
- opacity:var(--tds-sidenav-collapse-closed-opacity);
585
- transition:var(--tds-sidenav-collapse-transition-exit);
597
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
+ justify-content:flex-end;
586
599
  }
600
+ }
587
601
 
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);
592
- }
593
- }
594
- }
595
- @supports not selector(:popover-open){
596
- .tds-sidenav-collapse.\:popover-open{
597
- display:flex;
598
- }
602
+ .tds-page-header-phone,
603
+ .tds-page-header-email{
604
+ color:var(--tds-page-header-color);
605
+ white-space:nowrap;
606
+ }
599
607
 
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
- }
608
+ .tds-page-header-email{
609
+ max-width:100%;
610
+ overflow:hidden;
611
+ text-overflow:ellipsis;
605
612
  }
606
613
 
607
- @media (min-width: 720px){
608
- .tds-sidenav-responsive-header{
609
- display:none;
614
+ @keyframes indicator-pulse{
615
+ 0%{
616
+ opacity:.3;
617
+ transform:scale(.9);
618
+ }
619
+
620
+ 100%{
621
+ opacity:0;
622
+ transform:scale(1.75);
610
623
  }
611
624
  }
612
625
 
613
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
- display:none;
615
- }
616
626
 
617
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
- display:block;
627
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
628
+ -webkit-appearance:none;
629
+ appearance:none;
619
630
  }
620
631
 
621
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
622
- display:flex;
623
- flex-direction:column;
632
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
633
+ inline-size:1em;
634
+ block-size:2em;
624
635
  }
625
636
 
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;
637
+ @supports (field-sizing: content){
638
+ .tds-input--auto-width{
639
+ inline-size:-moz-fit-content;
640
+ inline-size:fit-content;
641
+ min-inline-size:min(100%, 122px);
642
+ }
631
643
 
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;
644
+ .tds-input--auto-width input{
645
+ field-sizing:content;
646
+ inline-size:auto;
647
+ }
648
+ }
637
649
 
638
- --tds-radio-label-color:var(--t-form-color);
650
+ .tds-checkbox{
651
+ --tds-checkbox-font-size:var(--t-font-size-md);
652
+ --tds-checkbox-cursor:pointer;
653
+ --tds-checkbox-line-height:1.4;
654
+ --tds-checkbox-transition-property:background-color, border-color;
639
655
 
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);
656
+ --tds-checkbox-input-size:var(--t-element-size-md);
657
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
658
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
659
+ --tds-checkbox-input-background-color:transparent;
643
660
 
644
- position:relative;
645
- display:inline-grid;
646
- grid-template-columns:auto;
647
- grid-auto-columns:1fr;
648
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
649
- line-height:var(--tds-radio-line-height);
650
- cursor:var(--tds-radio-cursor);
651
- -webkit-user-select:none;
652
- -moz-user-select:none;
661
+ --tds-checkbox-input-icon:none;
662
+ --tds-checkbox-input-icon-visibility:hidden;
663
+ --tds-checkbox-input-icon-opacity:0;
664
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
665
+
666
+ --tds-checkbox-label-color:var(--t-form-color);
667
+
668
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
669
+ --tds-checkbox-description-line-height:1.35;
670
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
671
+ --tds-checkbox-description-invalid-icon-display:none;
672
+
673
+ position:relative;
674
+ display:inline-grid;
675
+ grid-template-columns:auto;
676
+ grid-auto-columns:1fr;
677
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
678
+ line-height:var(--tds-checkbox-line-height);
679
+ cursor:var(--tds-checkbox-cursor);
680
+ -webkit-user-select:none;
681
+ -moz-user-select:none;
653
682
  user-select:none;
654
683
  }
655
684
 
656
- .tds-radio label{
685
+ .tds-checkbox label{
657
686
  grid-area:1 / 2;
658
- font-size:var(--tds-radio-font-size);
687
+ font-size:var(--tds-checkbox-font-size);
659
688
  font-weight:var(--t-font-weight-normal);
660
- color:var(--tds-radio-label-color);
661
- cursor:var(--tds-radio-cursor);
689
+ color:var(--tds-checkbox-label-color);
690
+ cursor:var(--tds-checkbox-cursor);
662
691
  }
663
692
 
664
- .tds-radio input[type="radio"]{
693
+ .tds-checkbox tds-indeterminate{
694
+ display:flex;
695
+ }
696
+
697
+ .tds-checkbox input[type="checkbox"]{
665
698
  position:relative;
666
699
  width:1em;
667
700
  height:1em;
668
701
  margin:calc((1lh - 1em) / 2) 0 0;
669
- font-size:var(--tds-radio-font-size);
702
+ font-size:var(--tds-checkbox-font-size);
670
703
  line-height:inherit;
671
704
  -webkit-appearance:none;
672
705
  -moz-appearance:none;
673
706
  appearance:none;
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);
707
+ cursor:var(--tds-checkbox-cursor);
708
+ background-color:var(--tds-checkbox-input-background-color);
709
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
710
+ border-radius:var(--tds-checkbox-input-border-radius);
678
711
  transition-timing-function:var(--t-ease-in-out);
679
712
  transition-duration:var(--t-duration-200);
680
- transition-property:var(--tds-radio-transition-property);
713
+ transition-property:var(--tds-checkbox-transition-property);
681
714
  }
682
715
 
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);
716
+ :is(.tds-checkbox input[type="checkbox"])::before{
717
+ position:absolute;
718
+ top:50%;
719
+ left:50%;
720
+ visibility:var(--tds-checkbox-input-icon-visibility);
721
+ width:100%;
722
+ height:100%;
723
+ content:"";
724
+ background-color:var(--tds-checkbox-input-icon-fill);
725
+ border-radius:var(--tds-checkbox-input-border-radius);
726
+ opacity:var(--tds-checkbox-input-icon-opacity);
727
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
728
+ mask-image:var(--tds-checkbox-input-icon);
729
+ -webkit-mask-repeat:no-repeat;
730
+ mask-repeat:no-repeat;
731
+ -webkit-mask-size:contain;
732
+ mask-size:contain;
733
+ transform:translate(-50%, -50%);
686
734
  }
687
735
 
688
- :is(.tds-radio input[type="radio"]):focus-visible{
736
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
737
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
738
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
739
+ }
740
+
741
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
689
742
  outline:var(--t-focus-ring-outline);
690
743
  outline-offset:var(--t-focus-ring-offset);
691
744
  }
692
745
 
693
- :is(.tds-radio input[type="radio"]):disabled{
746
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
694
747
  pointer-events:none;
695
748
  }
696
749
 
697
750
  @media (prefers-reduced-motion: reduce){
698
751
 
699
- .tds-radio input[type="radio"]{
700
- --tds-radio-transition-property:none;
752
+ .tds-checkbox input[type="checkbox"]{
753
+ --tds-checkbox-transition-property:none;
701
754
  }
702
755
  }
703
756
 
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;
757
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
758
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
759
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
760
+ --tds-checkbox-input-icon-visibility:visible;
761
+ --tds-checkbox-input-icon-opacity:1;
708
762
  }
709
763
 
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);
764
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
765
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
766
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
713
767
  }
714
768
 
715
- .tds-radio:has(input:user-invalid){
716
- --tds-radio-input-border-color:var(--t-form-border-color-error);
769
+ .tds-checkbox:has(input:checked){
770
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
717
771
  }
718
772
 
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);
773
+ .tds-checkbox:has(input:indeterminate){
774
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
775
+ }
776
+
777
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
778
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
779
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
780
+ --tds-checkbox-description-invalid-icon-display:inline-block;
781
+ }
782
+
783
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
784
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
785
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
722
786
  }
723
787
 
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);
788
+ :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{
789
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
790
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
791
+ }
727
792
 
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;
793
+ :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){
794
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
795
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
796
+ }
797
+
798
+ .tds-checkbox:has(input:required) label::after{
799
+ margin-left:.25ch;
800
+ color:var(--t-text-color-status-error);
801
+ content:"*";
802
+ }
803
+
804
+ .tds-checkbox:has(input:disabled){
805
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
806
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
807
+
808
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
809
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
810
+ --tds-checkbox-cursor:not-allowed;
731
811
  }
732
812
 
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);
813
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
814
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
736
815
  }
737
816
 
738
- .tds-radio-description{
817
+ .tds-checkbox-description{
739
818
  display:flex;
740
819
  grid-area:2 / 2;
741
820
  gap:var(--t-spacing-half);
742
821
  align-items:flex-start;
743
822
  margin:0;
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);
823
+ font-size:var(--tds-checkbox-description-font-size);
824
+ line-height:var(--tds-checkbox-description-line-height);
825
+ color:var(--tds-checkbox-description-color);
747
826
  cursor:text;
748
827
  }
749
828
 
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);
829
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
830
+ display:var(--tds-checkbox-description-invalid-icon-display);
831
+ flex-shrink:0;
832
+ margin-top:calc(.5lh - .5em);
833
+ line-height:var(--tds-checkbox-description-line-height);
774
834
  }
775
835
 
776
- .tds-input--auto-width input{
777
- field-sizing:content;
778
- inline-size:auto;
779
- }
836
+ .tds-checkbox--sm{
837
+ --tds-checkbox-line-height:1.35;
838
+ --tds-checkbox-input-size:var(--t-element-size-sm);
839
+ --tds-checkbox-font-size:var(--t-font-size-sm);
840
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
841
+ --tds-checkbox-description-line-height:1.3;
780
842
  }
781
843
 
782
844
  .tds-input:has(textarea){
@@ -884,47 +946,134 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
884
946
  }
885
947
  }
886
948
 
887
- .tds-toggle-switch{
888
- --tds-toggle-switch-font-size:var(--t-font-size-md);
889
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
890
- --tds-toggle-switch-cursor:pointer;
891
- --tds-toggle-switch-display:inline-grid;
892
- --tds-toggle-switch-line-height:1.4;
949
+ .tds-radio-group{
950
+ --tds-radio-group-font-size:var(--t-font-size-md);
951
+ --tds-radio-group-line-height:1.4;
952
+ --tds-radio-group-gap:var(--t-spacing-1);
893
953
 
894
- --tds-toggle-switch-label-color:var(--t-form-color);
954
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
895
955
 
896
- --tds-toggle-switch-track-width:var(--t-container-size-md);
897
- --tds-toggle-switch-track-outline:none;
898
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
899
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
900
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
956
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
957
+ --tds-radio-group-description-line-height:1.35;
958
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
959
+ --tds-radio-group-description-invalid-icon-display:none;
960
+ display:flex;
961
+ flex-direction:column;
962
+ gap:var(--tds-radio-group-gap);
963
+ padding:0;
964
+ margin:0;
901
965
 
902
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
903
- --tds-toggle-switch-thumb-transform:translateX(0);
904
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
966
+ font-size:var(--tds-radio-group-font-size);
967
+ line-height:var(--tds-radio-group-line-height);
968
+ border:0;
969
+ }
905
970
 
906
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
907
- --tds-toggle-switch-description-line-height:1.35;
908
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
909
- position:relative;
971
+ .tds-radio-group legend{
972
+ padding:0;
973
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
974
+ }
910
975
 
911
- display:var(--tds-toggle-switch-display);
912
- grid-template-columns:auto;
913
- grid-auto-columns:1fr;
914
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
915
- -webkit-user-select:none;
916
- -moz-user-select:none;
917
- user-select:none;
918
- }
976
+ .tds-radio-group:has(.tds-radio-group-description){
977
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
978
+ }
919
979
 
920
- .tds-toggle-switch input[type="checkbox"]{
921
- position:absolute;
922
- width:var(--tds-toggle-switch-track-width);
923
- height:var(--tds-toggle-switch-track-height);
924
- margin:0;
925
- -webkit-appearance:none;
926
- -moz-appearance:none;
927
- appearance:none;
980
+ .tds-radio-group[aria-invalid="true"]{
981
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
982
+ --tds-radio-group-description-invalid-icon-display:inline-block;
983
+ }
984
+
985
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
986
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
987
+ }
988
+
989
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
990
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
991
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
992
+ }
993
+
994
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
995
+ --tds-radio-input-background-color:var(--t-form-background-color);
996
+ }
997
+
998
+ .tds-radio-group:has(input:required) legend::after{
999
+ margin-left:.25ch;
1000
+ color:var(--t-text-color-status-error);
1001
+ content:"*";
1002
+ }
1003
+
1004
+ .tds-radio-group-fields{
1005
+ display:flex;
1006
+ flex-direction:column;
1007
+ gap:var(--tds-radio-group-gap);
1008
+ align-items:flex-start;
1009
+ }
1010
+
1011
+ .tds-radio-group-description{
1012
+ display:flex;
1013
+ gap:var(--t-spacing-half);
1014
+ align-items:flex-start;
1015
+ margin:0;
1016
+ font-size:var(--tds-radio-group-description-font-size);
1017
+ line-height:var(--tds-radio-group-description-line-height);
1018
+ color:var(--tds-radio-group-description-color);
1019
+ cursor:text;
1020
+ }
1021
+
1022
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1023
+ display:var(--tds-radio-group-description-invalid-icon-display);
1024
+ flex-shrink:0;
1025
+ margin-top:calc(.5lh - .5em);
1026
+ line-height:var(--tds-radio-group-description-line-height);
1027
+ }
1028
+
1029
+ .tds-radio-group--sm{
1030
+ --tds-radio-group-line-height:1.35;
1031
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1032
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1033
+ --tds-radio-group-description-line-height:1.3;
1034
+ }
1035
+
1036
+ .tds-toggle-switch{
1037
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1038
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1039
+ --tds-toggle-switch-cursor:pointer;
1040
+ --tds-toggle-switch-display:inline-grid;
1041
+ --tds-toggle-switch-line-height:1.4;
1042
+
1043
+ --tds-toggle-switch-label-color:var(--t-form-color);
1044
+
1045
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1046
+ --tds-toggle-switch-track-outline:none;
1047
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1048
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1049
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1050
+
1051
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1052
+ --tds-toggle-switch-thumb-transform:translateX(0);
1053
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1054
+
1055
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1056
+ --tds-toggle-switch-description-line-height:1.35;
1057
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1058
+ position:relative;
1059
+
1060
+ display:var(--tds-toggle-switch-display);
1061
+ grid-template-columns:auto;
1062
+ grid-auto-columns:1fr;
1063
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1064
+ -webkit-user-select:none;
1065
+ -moz-user-select:none;
1066
+ user-select:none;
1067
+ }
1068
+
1069
+ .tds-toggle-switch input[type="checkbox"]{
1070
+ position:absolute;
1071
+ width:var(--tds-toggle-switch-track-width);
1072
+ height:var(--tds-toggle-switch-track-height);
1073
+ margin:0;
1074
+ -webkit-appearance:none;
1075
+ -moz-appearance:none;
1076
+ appearance:none;
928
1077
  cursor:var(--tds-toggle-switch-cursor);
929
1078
  outline:var(--tds-toggle-switch-track-outline);
930
1079
  outline-offset:var(--t-focus-ring-offset);
@@ -1025,719 +1174,570 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1025
1174
  --tds-toggle-switch-display:inline-flex;
1026
1175
  }
1027
1176
 
1028
- .tds-select{
1029
- --tds-select-border-color:var(--t-form-border-color);
1030
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1031
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1032
- --tds-select-background-color:var(--t-form-background-color);
1033
- --tds-select-color:var(--t-form-color);
1034
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1035
- --tds-select-font-size:var(--t-font-size-md);
1036
- --tds-select-min-height:var(--t-container-size-md);
1037
- --tds-select-padding-block:6px;
1038
- --tds-select-description-color:var(--t-text-color-secondary);
1039
- --tds-select-description-invalid-icon-display:none;
1040
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1041
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1042
- --tds-select-caret-size:1em;
1043
- --tds-select-caret-inline-offset:.75em;
1044
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
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;
1045
1182
 
1046
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
1047
- --tds-select-dropdown-border:1px solid var(--t-border-color);
1048
- --tds-select-dropdown-padding:var(--t-spacing-1);
1049
- --tds-select-dropdown-margin-block:5px;
1050
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
1051
- --tds-select-dropdown-scrollbar-width:thin;
1052
- --tds-select-dropdown-border-radius:var(--t-border-radius);
1053
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1054
- --tds-select-dropdown-scroll-behavior:smooth;
1055
- --tds-select-dropdown-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;
1056
- --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1057
- --tds-select-dropdown-closed-opacity:0;
1058
- --tds-select-dropdown-open-opacity:1;
1059
- --tds-select-dropdown-closed-transform:translateY(-8px);
1060
- --tds-select-dropdown-open-transform:translateY(0);
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;
1061
1188
 
1062
- --tds-select-option-gap:var(--t-spacing-1);
1063
- --tds-select-option-padding-block:var(--t-spacing-1);
1064
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1065
- --tds-select-option-font-size:1rem;
1066
- --tds-select-option-color:var(--t-text-color);
1067
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1068
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1069
- --tds-select-option-border-radius:var(--t-border-radius);
1189
+ --tds-radio-label-color:var(--t-form-color);
1070
1190
 
1071
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1072
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1073
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
1074
- --tds-select-group-label-font-size:var(--t-font-size-sm);
1075
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1076
- --tds-select-group-label-letter-spacing:0;
1077
- --tds-select-group-label-color:var(--t-text-color-secondary);
1078
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1079
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1080
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
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);
1081
1194
 
1082
1195
  position:relative;
1083
- display:flex;
1084
- flex-direction:column;
1085
- gap:var(--t-spacing-half);
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;
1086
1205
  }
1087
1206
 
1088
- .tds-select :is(label,.tds-select-label){
1089
- font-size:var(--t-font-size-md);
1207
+ .tds-radio label{
1208
+ grid-area:1 / 2;
1209
+ font-size:var(--tds-radio-font-size);
1090
1210
  font-weight:var(--t-font-weight-normal);
1091
- color:var(--t-text-color);
1092
- cursor:default;
1211
+ color:var(--tds-radio-label-color);
1212
+ cursor:var(--tds-radio-cursor);
1093
1213
  }
1094
1214
 
1095
- .tds-select :is(select,button){
1215
+ .tds-radio input[type="radio"]{
1096
1216
  position:relative;
1097
- place-items:center;
1098
- inline-size:100%;
1099
- min-block-size:var(--tds-select-min-height);
1100
- padding-block:var(--tds-select-padding-block);
1101
- padding-inline:var(--t-spacing-1);
1102
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1103
- font-family:inherit;
1104
- font-size:var(--tds-select-font-size);
1105
- line-height:1;
1106
- color:var(--tds-select-color);
1107
- text-align:left;
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;
1108
1222
  -webkit-appearance:none;
1109
1223
  -moz-appearance:none;
1110
1224
  appearance:none;
1111
- cursor:var(--tds-select-cursor, default);
1112
- outline:var(--t-focus-ring-width) solid transparent;
1113
- outline-offset:0;
1114
- background-color:var(--tds-select-background-color);
1115
- background-image:var(--tds-select-background-image);
1116
- background-repeat:no-repeat;
1117
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
1118
- background-size:var(--tds-select-caret-size);
1119
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
1120
- border-radius:var(--t-form-border-radius);
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);
1121
1229
  transition-timing-function:var(--t-ease-in-out);
1122
- transition-duration:var(--t-duration-300);
1123
- transition-property:var(--tds-select-transition-property);
1230
+ transition-duration:var(--t-duration-200);
1231
+ transition-property:var(--tds-radio-transition-property);
1124
1232
  }
1125
1233
 
1126
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1127
- border-color:var(--tds-select-border-color-hover);
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);
1128
1237
  }
1129
1238
 
1130
- :is(.tds-select :is(select,button)):focus{
1131
- outline-color:var(--t-focus-ring-color);
1239
+ :is(.tds-radio input[type="radio"]):focus-visible{
1240
+ outline:var(--t-focus-ring-outline);
1132
1241
  outline-offset:var(--t-focus-ring-offset);
1133
- border-color:var(--tds-select-border-color-active);
1134
1242
  }
1135
1243
 
1136
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1137
- color:var(--tds-select-placeholder-color);
1244
+ :is(.tds-radio input[type="radio"]):disabled{
1245
+ pointer-events:none;
1138
1246
  }
1139
1247
 
1140
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1141
- --tds-select-border-color:var(--t-form-border-color-error);
1142
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1143
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1144
- --tds-select-background-color:var(--t-form-background-color-error);
1145
- --tds-select-description-color:var(--t-text-color-status-error);
1146
- --tds-select-description-invalid-icon-display:inline-block;
1147
- }
1148
-
1149
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1150
- margin-left:.25ch;
1151
- color:var(--t-text-color-status-error);
1152
- content:"*";
1153
- }
1248
+ @media (prefers-reduced-motion: reduce){
1154
1249
 
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;
1250
+ .tds-radio input[type="radio"]{
1251
+ --tds-radio-transition-property:none;
1160
1252
  }
1253
+ }
1161
1254
 
1162
- .tds-select:has( > [popover]:popover-open) > button{
1163
- border-color:var(--tds-select-border-color-active);
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;
1164
1259
  }
1165
1260
 
1166
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1167
- transform:rotate(.5turn);
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);
1168
1264
  }
1169
1265
 
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);
1266
+ .tds-radio:has(input:user-invalid){
1267
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1188
1268
  }
1189
1269
 
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;
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);
1205
1273
  }
1206
1274
 
1207
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1208
- background:transparent;
1209
- }
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);
1210
1278
 
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;
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;
1225
1282
  }
1226
1283
 
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);
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);
1239
1287
  }
1240
1288
 
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{
1289
+ .tds-radio-description{
1268
1290
  display:flex;
1291
+ grid-area:2 / 2;
1269
1292
  gap:var(--t-spacing-half);
1270
1293
  align-items:flex-start;
1271
1294
  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));
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);
1275
1298
  cursor:text;
1276
1299
  }
1277
1300
 
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
- }
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;
1460
1307
  }
1461
1308
 
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;
1309
+ .tds-select{
1310
+ --tds-select-border-color:var(--t-form-border-color);
1311
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1312
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1313
+ --tds-select-background-color:var(--t-form-background-color);
1314
+ --tds-select-color:var(--t-form-color);
1315
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1316
+ --tds-select-font-size:var(--t-font-size-md);
1317
+ --tds-select-min-height:var(--t-container-size-md);
1318
+ --tds-select-padding-block:6px;
1319
+ --tds-select-description-color:var(--t-text-color-secondary);
1320
+ --tds-select-description-invalid-icon-display:none;
1321
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1322
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1323
+ --tds-select-caret-size:1em;
1324
+ --tds-select-caret-inline-offset:.75em;
1325
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1472
1326
 
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);
1327
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1328
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1329
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1330
+ --tds-select-dropdown-margin-block:5px;
1331
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1332
+ --tds-select-dropdown-scrollbar-width:thin;
1333
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1334
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1335
+ --tds-select-dropdown-scroll-behavior:smooth;
1336
+ --tds-select-dropdown-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;
1337
+ --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1338
+ --tds-select-dropdown-closed-opacity:0;
1339
+ --tds-select-dropdown-open-opacity:1;
1340
+ --tds-select-dropdown-closed-transform:translateY(-8px);
1341
+ --tds-select-dropdown-open-transform:translateY(0);
1477
1342
 
1478
- --tds-checkbox-label-color:var(--t-form-color);
1343
+ --tds-select-option-gap:var(--t-spacing-1);
1344
+ --tds-select-option-padding-block:var(--t-spacing-1);
1345
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1346
+ --tds-select-option-font-size:1rem;
1347
+ --tds-select-option-color:var(--t-text-color);
1348
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1349
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1350
+ --tds-select-option-border-radius:var(--t-border-radius);
1479
1351
 
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;
1352
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1353
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1354
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1355
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1356
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1357
+ --tds-select-group-label-letter-spacing:0;
1358
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1359
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1360
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1361
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1484
1362
 
1485
1363
  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;
1364
+ display:flex;
1365
+ flex-direction:column;
1366
+ gap:var(--t-spacing-half);
1495
1367
  }
1496
1368
 
1497
- .tds-checkbox label{
1498
- grid-area:1 / 2;
1499
- font-size:var(--tds-checkbox-font-size);
1369
+ .tds-select :is(label,.tds-select-label){
1370
+ font-size:var(--t-font-size-md);
1500
1371
  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;
1372
+ color:var(--t-text-color);
1373
+ cursor:default;
1507
1374
  }
1508
1375
 
1509
- .tds-checkbox input[type="checkbox"]{
1376
+ .tds-select :is(select,button){
1510
1377
  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;
1378
+ place-items:center;
1379
+ inline-size:100%;
1380
+ min-block-size:var(--tds-select-min-height);
1381
+ padding-block:var(--tds-select-padding-block);
1382
+ padding-inline:var(--t-spacing-1);
1383
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1384
+ font-family:inherit;
1385
+ font-size:var(--tds-select-font-size);
1386
+ line-height:1;
1387
+ color:var(--tds-select-color);
1388
+ text-align:left;
1516
1389
  -webkit-appearance:none;
1517
1390
  -moz-appearance:none;
1518
1391
  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);
1392
+ cursor:var(--tds-select-cursor, default);
1393
+ outline:var(--t-focus-ring-width) solid transparent;
1394
+ outline-offset:0;
1395
+ background-color:var(--tds-select-background-color);
1396
+ background-image:var(--tds-select-background-image);
1397
+ background-repeat:no-repeat;
1398
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1399
+ background-size:var(--tds-select-caret-size);
1400
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1401
+ border-radius:var(--t-form-border-radius);
1523
1402
  transition-timing-function:var(--t-ease-in-out);
1524
- transition-duration:var(--t-duration-200);
1525
- transition-property:var(--tds-checkbox-transition-property);
1403
+ transition-duration:var(--t-duration-300);
1404
+ transition-property:var(--tds-select-transition-property);
1526
1405
  }
1527
1406
 
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);
1407
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1408
+ border-color:var(--tds-select-border-color-hover);
1551
1409
  }
1552
1410
 
1553
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1554
- outline:var(--t-focus-ring-outline);
1411
+ :is(.tds-select :is(select,button)):focus{
1412
+ outline-color:var(--t-focus-ring-color);
1555
1413
  outline-offset:var(--t-focus-ring-offset);
1414
+ border-color:var(--tds-select-border-color-active);
1556
1415
  }
1557
1416
 
1558
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1559
- pointer-events:none;
1417
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1418
+ color:var(--tds-select-placeholder-color);
1560
1419
  }
1561
1420
 
1562
- @media (prefers-reduced-motion: reduce){
1563
-
1564
- .tds-checkbox input[type="checkbox"]{
1565
- --tds-checkbox-transition-property:none;
1421
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1422
+ --tds-select-border-color:var(--t-form-border-color-error);
1423
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1424
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1425
+ --tds-select-background-color:var(--t-form-background-color-error);
1426
+ --tds-select-description-color:var(--t-text-color-status-error);
1427
+ --tds-select-description-invalid-icon-display:inline-block;
1566
1428
  }
1429
+
1430
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1431
+ margin-left:.25ch;
1432
+ color:var(--t-text-color-status-error);
1433
+ content:"*";
1567
1434
  }
1568
1435
 
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;
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;
1574
1441
  }
1575
1442
 
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);
1443
+ .tds-select:has( > [popover]:popover-open) > button{
1444
+ border-color:var(--tds-select-border-color-active);
1445
+ }
1446
+
1447
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1448
+ transform:rotate(.5turn);
1579
1449
  }
1580
1450
 
1581
- .tds-checkbox:has(input:checked){
1582
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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;
1583
1456
  }
1584
1457
 
1585
- .tds-checkbox:has(input:indeterminate){
1586
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
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);
1587
1469
  }
1588
1470
 
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;
1471
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1472
+ outline:none;
1473
+ }
1474
+
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
+ }
1478
+
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);
1481
+ }
1482
+
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
+ }
1487
+
1488
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1489
+ background:transparent;
1490
+ }
1491
+
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;
1593
1506
  }
1594
1507
 
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);
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);
1514
+ }
1515
+
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);
1598
1520
  }
1599
1521
 
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);
1603
- }
1522
+ @media (forced-colors: active){
1604
1523
 
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);
1524
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1525
+ color:var(--tds-select-group-label-color-stuck);
1526
+ }
1527
+ }
1608
1528
  }
1609
1529
 
1610
- .tds-checkbox:has(input:required) label::after{
1611
- margin-left:.25ch;
1612
- color:var(--t-text-color-status-error);
1613
- content:"*";
1614
- }
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
+ }
1615
1534
 
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);
1535
+ @media (prefers-reduced-motion: reduce){
1619
1536
 
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;
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
+ }
1623
1546
  }
1624
1547
 
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{
1548
+ .tds-select-description{
1630
1549
  display:flex;
1631
- grid-area:2 / 2;
1632
1550
  gap:var(--t-spacing-half);
1633
1551
  align-items:flex-start;
1634
1552
  margin:0;
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);
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));
1638
1556
  cursor:text;
1639
1557
  }
1640
1558
 
1641
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1642
- display:var(--tds-checkbox-description-invalid-icon-display);
1559
+ .tds-select-description .tds-select-description-invalid-icon{
1560
+ display:var(--tds-select-description-invalid-icon-display, none);
1643
1561
  flex-shrink:0;
1644
- margin-top:calc(.5lh - .5em);
1645
- line-height:var(--tds-checkbox-description-line-height);
1562
+ margin-block-start:calc(.5lh - .5em);
1563
+ line-height:1.35;
1646
1564
  }
1647
1565
 
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;
1654
- }
1655
-
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);
1660
-
1661
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1662
-
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);
1566
+ .tds-select > .tds-select-hidden-select{
1567
+ position:absolute;
1568
+ inline-size:1px;
1569
+ block-size:1px;
1670
1570
  padding:0;
1671
1571
  margin:0;
1672
-
1673
- font-size:var(--tds-radio-group-font-size);
1674
- line-height:var(--tds-radio-group-line-height);
1675
- border:0;
1572
+ pointer-events:none;
1573
+ opacity:0;
1676
1574
  }
1677
1575
 
1678
- .tds-radio-group legend{
1679
- padding:0;
1680
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
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;
1681
1586
  }
1682
1587
 
1683
- .tds-radio-group:has(.tds-radio-group-description){
1684
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
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
+ }
1600
+
1601
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1602
+ color:var(--tds-select-color);
1685
1603
  }
1686
1604
 
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;
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
+ overscroll-behavior:none;
1620
+ -webkit-user-select:none;
1621
+ -moz-user-select:none;
1622
+ user-select:none;
1623
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1624
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1625
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1626
+ background:var(--tds-select-dropdown-background-color);
1627
+ border:var(--tds-select-dropdown-border);
1628
+ border-radius:var(--tds-select-dropdown-border-radius);
1629
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1630
+ opacity:var(--tds-select-dropdown-open-opacity);
1631
+ transform:var(--tds-select-dropdown-open-transform);
1632
+ transition:var(--tds-select-dropdown-transition-enter);
1690
1633
  }
1691
1634
 
1692
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1693
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1635
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1636
+ opacity:var(--tds-select-dropdown-closed-opacity);
1637
+ transform:var(--tds-select-dropdown-closed-transform);
1638
+ transition:var(--tds-select-dropdown-transition-exit);
1694
1639
  }
1695
1640
 
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);
1641
+ :is(.tds-select:has( > button) [popover]) ul{
1642
+ padding:0;
1643
+ margin:0;
1644
+ list-style:none;
1645
+ }
1646
+
1647
+ @starting-style{
1648
+ :is(.tds-select:has( > button) [popover]):popover-open{
1649
+ opacity:var(--tds-select-dropdown-closed-opacity);
1650
+ transform:var(--tds-select-dropdown-closed-transform);
1699
1651
  }
1652
+ }
1700
1653
 
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);
1654
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1655
+ .tds-select select:has(> button){
1656
+ padding-inline-end:0;
1657
+ background-image:none;
1658
+ }
1659
+ @media (hover) and (pointer: fine){
1660
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1661
+ padding-block:0;
1662
+ -webkit-appearance:base-select;
1663
+ -moz-appearance:base-select;
1664
+ appearance:base-select;
1703
1665
  }
1666
+ }
1667
+ :is(.tds-select select:has( > button))::picker-icon{
1668
+ flex-shrink:0;
1669
+ width:var(--tds-select-caret-size);
1670
+ height:var(--tds-select-caret-size);
1671
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1672
+ content:var(--tds-select-background-image);
1673
+ transition:var(--tds-select-caret-transition);
1674
+ }
1704
1675
 
1705
- .tds-radio-group:has(input:required) legend::after{
1706
- margin-left:.25ch;
1707
- color:var(--t-text-color-status-error);
1708
- content:"*";
1676
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1677
+ opacity:var(--tds-select-dropdown-closed-opacity);
1678
+ transform:var(--tds-select-dropdown-closed-transform);
1679
+ transition:var(--tds-select-dropdown-transition-exit);
1709
1680
  }
1710
1681
 
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
- }
1682
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1683
+ outline-color:var(--t-focus-ring-color);
1684
+ outline-offset:var(--t-focus-ring-offset);
1685
+ border-color:var(--tds-select-border-color-active);
1686
+ }
1717
1687
 
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
- }
1688
+ :is(.tds-select select:has( > button)):open::picker-icon{
1689
+ opacity:1;
1690
+ transform:rotate(.5turn);
1691
+ }
1692
+
1693
+ :is(.tds-select select:has( > button)) selectedcontent{
1694
+ overflow:hidden;
1695
+ text-overflow:ellipsis;
1696
+ line-height:calc(var(--tds-select-min-height) - 2px);
1697
+ white-space:nowrap;
1698
+ }
1699
+
1700
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1701
+ color:var(--tds-select-placeholder-color);
1702
+ }
1703
+
1704
+ :is(.tds-select select:has( > button))::picker(select){
1705
+ inset:auto;
1706
+ inline-size:-moz-max-content;
1707
+ inline-size:max-content;
1708
+ min-inline-size:anchor-size(width);
1709
+ max-inline-size:100vi;
1710
+ padding:var(--tds-select-dropdown-padding);
1711
+ margin-block:var(--tds-select-dropdown-margin-block);
1712
+ position-try-fallbacks:flip-block, flip-inline;
1713
+ overflow:auto;
1714
+ overflow-x:hidden;
1715
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1716
+ overscroll-behavior:none;
1717
+ -webkit-user-select:none;
1718
+ -moz-user-select:none;
1719
+ user-select:none;
1720
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1721
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1722
+ background:var(--tds-select-dropdown-background-color);
1723
+ border:var(--tds-select-dropdown-border);
1724
+ border-radius:var(--tds-select-dropdown-border-radius);
1725
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1726
+ opacity:var(--tds-select-dropdown-open-opacity);
1727
+ transform:var(--tds-select-dropdown-open-transform);
1728
+ transition:var(--tds-select-dropdown-transition-enter);
1729
+ }
1728
1730
 
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
- }
1731
+ :is(.tds-select select:has( > button)) option::checkmark{
1732
+ display:none;
1733
+ }
1735
1734
 
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;
1735
+ @starting-style{
1736
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1737
+ opacity:var(--tds-select-dropdown-closed-opacity);
1738
+ transform:var(--tds-select-dropdown-closed-transform);
1739
+ }
1740
+ }
1741
1741
  }
1742
1742
 
1743
1743
  .tds-input{
@@ -3323,84 +3323,6 @@ a[class="tds-btn"]{
3323
3323
  @media (prefers-color-scheme: dark){
3324
3324
  }
3325
3325
 
3326
- .tds-checkbox-group{
3327
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3328
- --tds-checkbox-group-line-height:1.4;
3329
- --tds-checkbox-group-gap:var(--t-spacing-1);
3330
-
3331
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3332
-
3333
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3334
- --tds-checkbox-group-description-line-height:1.35;
3335
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3336
- --tds-checkbox-group-description-invalid-icon-display:none;
3337
- display:flex;
3338
- flex-direction:column;
3339
- gap:var(--tds-checkbox-group-gap);
3340
- padding:0;
3341
- margin:0;
3342
-
3343
- font-size:var(--tds-checkbox-group-font-size);
3344
- line-height:var(--tds-checkbox-group-line-height);
3345
- border:0;
3346
- }
3347
-
3348
- .tds-checkbox-group legend{
3349
- padding:0;
3350
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3351
- }
3352
-
3353
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3354
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3355
- }
3356
-
3357
- .tds-checkbox-group[aria-invalid="true"]{
3358
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3359
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3360
- }
3361
-
3362
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3363
- margin-left:.25ch;
3364
- color:var(--t-text-color-status-error);
3365
- content:"*";
3366
- }
3367
-
3368
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3369
- content:none;
3370
- }
3371
-
3372
- .tds-checkbox-group-fields{
3373
- display:flex;
3374
- flex-direction:column;
3375
- gap:var(--tds-checkbox-group-gap);
3376
- align-items:flex-start;
3377
- }
3378
-
3379
- .tds-checkbox-group-description{
3380
- display:flex;
3381
- gap:var(--t-spacing-half);
3382
- align-items:flex-start;
3383
- margin:0;
3384
- font-size:var(--tds-checkbox-group-description-font-size);
3385
- line-height:var(--tds-checkbox-group-description-line-height);
3386
- color:var(--tds-checkbox-group-description-color);
3387
- cursor:text;
3388
- }
3389
-
3390
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3391
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3392
- flex-shrink:0;
3393
- margin-top:calc(.5lh - .5em);
3394
- line-height:var(--tds-checkbox-group-description-line-height);
3395
- }
3396
-
3397
- .tds-checkbox-group--sm{
3398
- --tds-checkbox-group-line-height:1.35;
3399
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3400
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3401
- --tds-checkbox-group-description-line-height:1.3;
3402
- }
3403
-
3404
3326
  .tds-combo-box{
3405
3327
  --tds-combo-box-border-color:var(--t-form-border-color);
3406
3328
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -3654,183 +3576,30 @@ a[class="tds-btn"]{
3654
3576
  }
3655
3577
 
3656
3578
  .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);
3745
- color:var(--t-text-color);
3746
- cursor:default;
3747
- }
3748
-
3749
- .tds-number-stepper-field{
3750
- display:flex;
3751
- gap:var(--tds-number-stepper-button-gap);
3752
- align-items:center;
3753
- inline-size:100%;
3754
- min-block-size:var(--tds-number-stepper-min-height);
3755
- font-family:inherit;
3756
- font-size:var(--tds-number-stepper-font-size);
3757
- line-height:1;
3758
- color:var(--tds-number-stepper-color);
3759
- -webkit-appearance:none;
3760
- -moz-appearance:none;
3761
- appearance:none;
3762
- cursor:default;
3763
- outline:var(--t-focus-ring-width) solid transparent;
3764
- outline-offset:0;
3765
- background-color:var(--tds-number-stepper-background-color);
3766
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3767
- border-radius:var(--t-form-border-radius);
3768
- }
3769
-
3770
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3771
- border-color:var(--tds-number-stepper-border-color-hover);
3772
- }
3773
-
3774
- .tds-number-stepper-field[data-focus-within]{
3775
- outline-color:var(--t-focus-ring-color);
3776
- outline-offset:var(--t-focus-ring-offset);
3777
- border-color:var(--tds-number-stepper-border-color-active);
3778
- }
3779
-
3780
- .tds-number-stepper-field:has([readonly]){
3781
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3782
- }
3783
-
3784
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3785
- border-color:var(--t-form-border-color-hover);
3786
- }
3787
-
3788
- .tds-number-stepper-input{
3789
- display:flex;
3790
- flex:1;
3791
- align-items:center;
3792
- min-inline-size:0;
3793
- padding-block:var(--tds-number-stepper-padding-block);
3794
- padding-inline:var(--t-spacing-1);
3795
- font-family:inherit;
3796
- font-size:inherit;
3797
- color:inherit;
3798
- outline:0;
3799
- background:transparent;
3800
- border:0;
3801
- }
3802
-
3803
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3804
- margin:0;
3805
- -webkit-appearance:none;
3806
- appearance:none;
3579
+ margin-block-start:var(--t-spacing-half);
3807
3580
  }
3808
3581
 
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;
3582
+ .tds-combo-box-section-header{
3583
+ padding-block:var(--t-spacing-1);
3584
+ padding-inline:var(--t-spacing-1);
3585
+ font-size:var(--t-font-size-sm);
3586
+ font-weight:var(--t-font-weight-semibold);
3587
+ color:var(--t-text-color-secondary);
3815
3588
  }
3816
3589
 
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{
3590
+ .tds-combo-box-description{
3822
3591
  display:flex;
3823
3592
  gap:var(--t-spacing-half);
3824
3593
  align-items:flex-start;
3825
3594
  margin:0;
3826
3595
  font-size:var(--t-font-size-sm);
3827
3596
  line-height:1.35;
3828
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3597
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3829
3598
  cursor:text;
3830
3599
  }
3831
3600
 
3832
- .tds-number-stepper-description-invalid-icon{
3833
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3601
+ .tds-combo-box-description-invalid-icon{
3602
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3834
3603
  flex-shrink:0;
3835
3604
  margin-block-start:calc(.5lh - .5em);
3836
3605
  line-height:1.35;
@@ -4141,6 +3910,237 @@ a[class="tds-btn"]{
4141
3910
  color:var(--t-text-color-secondary);
4142
3911
  }
4143
3912
 
3913
+ .tds-checkbox-group{
3914
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3915
+ --tds-checkbox-group-line-height:1.4;
3916
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3917
+
3918
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3919
+
3920
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3921
+ --tds-checkbox-group-description-line-height:1.35;
3922
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3923
+ --tds-checkbox-group-description-invalid-icon-display:none;
3924
+ display:flex;
3925
+ flex-direction:column;
3926
+ gap:var(--tds-checkbox-group-gap);
3927
+ padding:0;
3928
+ margin:0;
3929
+
3930
+ font-size:var(--tds-checkbox-group-font-size);
3931
+ line-height:var(--tds-checkbox-group-line-height);
3932
+ border:0;
3933
+ }
3934
+
3935
+ .tds-checkbox-group legend{
3936
+ padding:0;
3937
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3938
+ }
3939
+
3940
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3941
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3942
+ }
3943
+
3944
+ .tds-checkbox-group[aria-invalid="true"]{
3945
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3946
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3947
+ }
3948
+
3949
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3950
+ margin-left:.25ch;
3951
+ color:var(--t-text-color-status-error);
3952
+ content:"*";
3953
+ }
3954
+
3955
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3956
+ content:none;
3957
+ }
3958
+
3959
+ .tds-checkbox-group-fields{
3960
+ display:flex;
3961
+ flex-direction:column;
3962
+ gap:var(--tds-checkbox-group-gap);
3963
+ align-items:flex-start;
3964
+ }
3965
+
3966
+ .tds-checkbox-group-description{
3967
+ display:flex;
3968
+ gap:var(--t-spacing-half);
3969
+ align-items:flex-start;
3970
+ margin:0;
3971
+ font-size:var(--tds-checkbox-group-description-font-size);
3972
+ line-height:var(--tds-checkbox-group-description-line-height);
3973
+ color:var(--tds-checkbox-group-description-color);
3974
+ cursor:text;
3975
+ }
3976
+
3977
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3978
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3979
+ flex-shrink:0;
3980
+ margin-top:calc(.5lh - .5em);
3981
+ line-height:var(--tds-checkbox-group-description-line-height);
3982
+ }
3983
+
3984
+ .tds-checkbox-group--sm{
3985
+ --tds-checkbox-group-line-height:1.35;
3986
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3987
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3988
+ --tds-checkbox-group-description-line-height:1.3;
3989
+ }
3990
+
3991
+ .tds-number-stepper{
3992
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3993
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3994
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3995
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3996
+ --tds-number-stepper-color:var(--t-form-color);
3997
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3998
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3999
+ --tds-number-stepper-padding-block:6px;
4000
+ --tds-number-stepper-button-offset:4px;
4001
+ --tds-number-stepper-button-gap:2px;
4002
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
4003
+ --tds-number-stepper-description-invalid-icon-display:none;
4004
+
4005
+ position:relative;
4006
+ display:flex;
4007
+ flex-direction:column;
4008
+ gap:var(--t-spacing-half);
4009
+ }
4010
+
4011
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4012
+ margin-left:.25ch;
4013
+ color:var(--t-text-color-status-error);
4014
+ content:"*";
4015
+ }
4016
+
4017
+ .tds-number-stepper[data-invalid]{
4018
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
4019
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4020
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4021
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
4022
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
4023
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
4024
+ }
4025
+
4026
+ .tds-number-stepper[data-disabled]{
4027
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4028
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4029
+ --tds-number-stepper-color:var(--t-form-color-disabled);
4030
+ }
4031
+
4032
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4033
+ color:var(--t-form-color-disabled);
4034
+ }
4035
+
4036
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4037
+ cursor:not-allowed;
4038
+ }
4039
+
4040
+ .tds-number-stepper--lg{
4041
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
4042
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
4043
+ --tds-number-stepper-button-offset:5px;
4044
+ --tds-number-stepper-button-gap:4px;
4045
+ }
4046
+
4047
+ .tds-number-stepper-label{
4048
+ font-size:var(--t-font-size-md);
4049
+ font-weight:var(--t-font-weight-normal);
4050
+ color:var(--t-text-color);
4051
+ cursor:default;
4052
+ }
4053
+
4054
+ .tds-number-stepper-field{
4055
+ display:flex;
4056
+ gap:var(--tds-number-stepper-button-gap);
4057
+ align-items:center;
4058
+ inline-size:100%;
4059
+ min-block-size:var(--tds-number-stepper-min-height);
4060
+ font-family:inherit;
4061
+ font-size:var(--tds-number-stepper-font-size);
4062
+ line-height:1;
4063
+ color:var(--tds-number-stepper-color);
4064
+ -webkit-appearance:none;
4065
+ -moz-appearance:none;
4066
+ appearance:none;
4067
+ cursor:default;
4068
+ outline:var(--t-focus-ring-width) solid transparent;
4069
+ outline-offset:0;
4070
+ background-color:var(--tds-number-stepper-background-color);
4071
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4072
+ border-radius:var(--t-form-border-radius);
4073
+ }
4074
+
4075
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4076
+ border-color:var(--tds-number-stepper-border-color-hover);
4077
+ }
4078
+
4079
+ .tds-number-stepper-field[data-focus-within]{
4080
+ outline-color:var(--t-focus-ring-color);
4081
+ outline-offset:var(--t-focus-ring-offset);
4082
+ border-color:var(--tds-number-stepper-border-color-active);
4083
+ }
4084
+
4085
+ .tds-number-stepper-field:has([readonly]){
4086
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4087
+ }
4088
+
4089
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
4090
+ border-color:var(--t-form-border-color-hover);
4091
+ }
4092
+
4093
+ .tds-number-stepper-input{
4094
+ display:flex;
4095
+ flex:1;
4096
+ align-items:center;
4097
+ min-inline-size:0;
4098
+ padding-block:var(--tds-number-stepper-padding-block);
4099
+ padding-inline:var(--t-spacing-1);
4100
+ font-family:inherit;
4101
+ font-size:inherit;
4102
+ color:inherit;
4103
+ outline:0;
4104
+ background:transparent;
4105
+ border:0;
4106
+ }
4107
+
4108
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4109
+ margin:0;
4110
+ -webkit-appearance:none;
4111
+ appearance:none;
4112
+ }
4113
+
4114
+ .tds-number-stepper-button{
4115
+ flex-shrink:0;
4116
+ align-self:center;
4117
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4118
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4119
+ padding:0;
4120
+ }
4121
+
4122
+ .tds-number-stepper-button:last-of-type{
4123
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4124
+ }
4125
+
4126
+ .tds-number-stepper-description{
4127
+ display:flex;
4128
+ gap:var(--t-spacing-half);
4129
+ align-items:flex-start;
4130
+ margin:0;
4131
+ font-size:var(--t-font-size-sm);
4132
+ line-height:1.35;
4133
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4134
+ cursor:text;
4135
+ }
4136
+
4137
+ .tds-number-stepper-description-invalid-icon{
4138
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4139
+ flex-shrink:0;
4140
+ margin-block-start:calc(.5lh - .5em);
4141
+ line-height:1.35;
4142
+ }
4143
+
4144
4144
  .tds-time-field{
4145
4145
  --tds-time-field-border-color:var(--t-form-border-color);
4146
4146
  --tds-time-field-border-color-hover:var(--t-form-border-color-hover);