@planningcenter/tapestry 3.2.2-rc.11 → 3.2.2-rc.13

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 (8) hide show
  1. package/dist/components/date-picker/DatePicker.d.ts +7 -5
  2. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  3. package/dist/components/date-picker/DatePicker.js.map +1 -1
  4. package/dist/reactRender.css +1841 -1841
  5. package/dist/reactRender.css.map +1 -1
  6. package/dist/reactRenderLegacy.css +1841 -1841
  7. package/dist/reactRenderLegacy.css.map +1 -1
  8. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,364 +1,265 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
7
4
  }
5
+ }
8
6
 
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
14
-
15
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
-
17
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
- --tds-sidenav-collapse-closed-opacity:0;
20
- --tds-sidenav-collapse-open-opacity:1;
21
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
- --tds-sidenav-collapse-open-transform:translateY(0);
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
23
25
 
24
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
28
28
 
29
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
- --tds-sidenav-item-nested-background-selected:transparent;
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
32
 
33
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
36
35
 
37
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
- }
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
40
39
 
41
- @media (prefers-reduced-motion: reduce){
42
- tds-sidenav,
43
- .tds-sidenav{
44
- --tds-sidenav-collapse-transition-enter:none;
45
- --tds-sidenav-collapse-transition-exit:none;
46
- --tds-sidenav-collapse-closed-transform:none;
47
- --tds-sidenav-collapse-open-transform:none;
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
48
45
  }
49
- }
50
46
 
51
- .tds-sidenav--theme-gray{
52
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
57
49
  }
58
- }
59
50
 
60
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
- display:flex;
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
62
56
  }
63
57
 
64
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
- flex-direction:column;
66
- gap:var(--t-spacing-half);
67
- width:100%;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
+ }
68
76
  }
69
-
70
- .tds-sidenav-section-list{
71
- width:100%;
72
- padding:0;
73
- margin:0;
74
- list-style:none;
75
77
  }
76
78
 
77
- .tds-sidenav-section-header{
79
+ .tds-page-header{
78
80
  display:flex;
79
- align-items:baseline;
80
- justify-content:space-between;
81
- padding-top:var(--t-spacing-2);
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
82
86
  }
83
87
 
84
- .tds-sidenav-section-header h2{
85
- margin:0;
86
- font-size:var(--t-font-size-sm);
87
- font-weight:var(--t-font-weight-semibold);
88
- line-height:1.35;
89
- color:var(--t-text-color-secondary);
90
- text-transform:uppercase;
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
91
90
  }
92
91
 
93
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
- padding-top:0;
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
95
94
  }
96
95
 
97
- .tds-sidenav-section-header [slot="label-actions"]{
98
- display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
101
98
  }
102
99
 
103
- .tds-sidenav-section [slot="section-actions"]{
104
- display:flex;
105
- gap:12px;
106
- align-items:center;
107
- min-height:42px;
108
- padding:var(--t-spacing-1) 0;
109
- }
110
-
111
- .tds-sidenav-section-list,
112
- .tds-sidenav-item{
113
- width:100%;
114
- padding:0;
115
- margin:0;
116
- }
117
-
118
- .tds-sidenav-item :is(a,button){
119
- position:relative;
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
120
101
  display:flex;
121
- gap:12px;
122
- align-items:center;
123
- width:100%;
124
- padding:12px;
125
- overflow:hidden;
126
- font-size:var(--t-font-size-sm);
127
- line-height:18px;
128
- color:var(--t-text-color-headline);
129
- white-space:nowrap;
130
- text-decoration:none;
131
- -webkit-appearance:none;
132
- -moz-appearance:none;
133
- appearance:none;
134
- cursor:pointer;
135
- background-color:var(--tds-sidenav-item-background, transparent);
136
- border:0;
137
- border-radius:var(--t-border-radius);
138
- transition:var(--tds-sidenav-item-transition);
102
+ flex-flow:row wrap;
103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
104
+ align-items:flex-start;
105
+ justify-content:flex-start;
106
+ min-width:0;
139
107
  }
140
108
 
141
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
- display:block;
143
- flex:1;
144
- overflow:hidden;
145
- text-overflow:ellipsis;
146
- text-align:left;
147
- white-space:nowrap;
109
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
+ display:flex;
111
+ gap:var(--tds-page-header-nav-gap);
112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
+ margin:0 0 -1px;
114
+ overflow:auto;
115
+ list-style:none;
116
+ background:var(--tds-page-header-nav-background);
148
117
  }
149
118
 
150
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
- color:var(--t-text-color-headline);
119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
+ position:relative;
121
+ display:inline-flex;
122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
+ font-size:var(--t-font-size-sm);
124
+ line-height:22px;
125
+ color:var(--tds-page-header-nav-item-color);
126
+ white-space:nowrap;
153
127
  text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
154
138
  }
155
139
 
156
- :is(.tds-sidenav-item :is(a,button)):active{
157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
- }
159
-
160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
- overflow:hidden;
162
- color:var(--tds-sidenav-item-icon-color);
163
- }
164
-
165
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
- display:block;
167
- width:var(--tds-sidenav-item-icon-size);
168
- height:var(--tds-sidenav-item-icon-size);
140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
169
145
  }
170
146
 
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
173
- }
147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
+ }
174
152
 
175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
- visibility:visible;
177
- block-size:auto;
178
- opacity:1;
179
- }
180
-
181
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
-
185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
- font-weight:var(--t-font-weight-semibold);
187
- }
188
-
189
- .tds-sidenav-item:has(.tds-sidenav-section){
190
- display:flex;
191
- flex-direction:column;
192
- gap:var(--t-spacing-half);
193
- }
194
-
195
- .tds-sidenav-item .tds-sidenav-section-list{
196
- --tds-sidenav-item-depth:1;
197
- gap:0;
198
- }
199
-
200
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
- visibility:hidden;
202
- block-size:0;
203
- overflow-y:clip;
204
- opacity:0;
205
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
- }
153
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
+ background-color:var(--tds-page-header-nav-item-background-color-active);
155
+ border-color:var(--tds-page-header-nav-item-border-color-active);
156
+ }
207
157
 
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
210
- }
158
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
+ color:var(--tds-page-header-nav-item-color-disabled);
160
+ cursor:not-allowed;
161
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
+ opacity:1;
163
+ }
211
164
 
212
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
- min-height:var(--t-element-size-2xl);
214
- padding-block:9px;
215
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
- line-height:1;
217
- background-color:transparent;
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
218
167
  }
219
168
 
220
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
- position:absolute;
222
- top:0;
223
- bottom:0;
224
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
- width:2px;
226
- content:"";
227
- background-color:var(--tds-sidenav-item-nested-border-color);
228
- transition:var(--tds-sidenav-item-transition);
169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
229
172
  }
230
173
 
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
174
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
232
175
  position:absolute;
233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
- z-index:-1;
235
- height:100%;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
236
180
  content:"";
237
- background-color:var(--tds-sidenav-item-nested-background);
238
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
- transition:var(--tds-sidenav-item-transition);
240
- }
241
-
242
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
- display:block;
244
- text-align:left;
245
- white-space:normal;
246
- }
247
-
248
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
251
183
  }
252
184
 
253
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
185
+ @media (prefers-reduced-motion: no-preference){
186
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
+ animation:indicator-pulse 1.25s ease infinite;
188
+ }
255
189
  }
256
190
 
257
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
- font-weight:var(--t-font-weight-medium);
260
- }
261
-
262
- .tds-sidenav-responsive-header{
191
+ .tds-page-header__title-bar{
263
192
  display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
195
+ align-items:flex-start;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
267
198
  }
268
199
 
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
271
- }
272
-
273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
- flex:1;
275
- order:1;
276
- margin:0;
277
- font-size:var(--t-font-size-lg);
278
- font-weight:var(--t-font-weight-medium);
279
- color:var(--t-text-color-headline);
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
280
202
  }
281
203
 
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;
300
- }
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
301
207
 
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;
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
310
215
  }
311
216
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
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%;
314
223
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
318
- }
319
-
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
323
- }
324
224
 
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
- }
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;
331
230
  }
332
- @supports not selector(:popover-open){
333
- .tds-sidenav-collapse.\:popover-open{
334
- display:flex;
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
335
233
  }
336
234
 
337
- .tds-sidenav-collapse:not(.\:popover-open){
338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
339
- transition:var(--tds-sidenav-collapse-transition-exit);
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
340
237
  }
341
- }
342
238
  }
343
239
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
347
- }
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
348
244
  }
349
245
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
250
+ }
353
251
 
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
256
+ }
357
257
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
262
+ }
362
263
 
363
264
  .tds-checkbox{
364
265
  --tds-checkbox-font-size:var(--t-font-size-md);
@@ -554,1191 +455,1290 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
554
455
  --tds-checkbox-description-line-height:1.3;
555
456
  }
556
457
 
557
- @layer t-critical{
558
- tds-page-header:not(.hydrated){
559
- display:none;
458
+
459
+ :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{
460
+ -webkit-appearance:none;
461
+ appearance:none;
462
+ }
463
+
464
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
465
+ inline-size:1em;
466
+ block-size:2em;
467
+ }
468
+
469
+ @supports (field-sizing: content){
470
+ .tds-input--auto-width{
471
+ inline-size:-moz-fit-content;
472
+ inline-size:fit-content;
473
+ min-inline-size:min(100%, 122px);
474
+ }
475
+
476
+ .tds-input--auto-width input{
477
+ field-sizing:content;
478
+ inline-size:auto;
560
479
  }
561
480
  }
562
481
 
563
- @layer t-component{
564
- .tds-page-header{
565
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
566
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
567
- --tds-page-header-color:var(--t-text-color);
568
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
569
- --tds-page-header-headline-color:var(--t-text-color-headline);
570
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
571
- --tds-page-header-padding-x:var(--t-spacing-2);
572
- --tds-page-header-padding-y:var(--t-spacing-2);
573
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
574
- --tds-page-header-nav-gap:var(--t-spacing-1);
575
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
576
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
577
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
578
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
579
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
580
- --tds-page-header-nav-item-border-width:1px;
482
+ .tds-radio-group{
483
+ --tds-radio-group-font-size:var(--t-font-size-md);
484
+ --tds-radio-group-line-height:1.4;
485
+ --tds-radio-group-gap:var(--t-spacing-1);
581
486
 
582
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
583
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
487
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
584
488
 
585
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
586
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
587
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
489
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
490
+ --tds-radio-group-description-line-height:1.35;
491
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
492
+ --tds-radio-group-description-invalid-icon-display:none;
493
+ display:flex;
494
+ flex-direction:column;
495
+ gap:var(--tds-radio-group-gap);
496
+ padding:0;
497
+ margin:0;
588
498
 
589
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
590
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
499
+ font-size:var(--tds-radio-group-font-size);
500
+ line-height:var(--tds-radio-group-line-height);
501
+ border:0;
502
+ }
591
503
 
592
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
593
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
594
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
504
+ .tds-radio-group legend{
505
+ padding:0;
506
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
507
+ }
595
508
 
596
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
597
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
598
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
599
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
600
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
509
+ .tds-radio-group:has(.tds-radio-group-description){
510
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
601
511
  }
602
512
 
603
- .tds-page-header--profile{
604
- --tds-page-header-padding-y:20px;
513
+ .tds-radio-group[aria-invalid="true"]{
514
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
515
+ --tds-radio-group-description-invalid-icon-display:inline-block;
605
516
  }
606
517
 
607
- @supports (color: light-dark(#fff, #000)){
608
- .tds-page-header{
609
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
610
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
518
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
519
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
611
520
  }
612
- }
613
521
 
614
- @media (min-width: 600px){
615
- .tds-page-header{
616
- --tds-page-header-background-color:var(--t-surface-color-canvas);
617
- --tds-page-header-color:var(--t-text-color-secondary);
618
- --tds-page-header-bottom-border-color:var(--t-border-color);
619
- --tds-page-header-padding-x:var(--t-spacing-3);
620
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
621
- --tds-page-header-nav-gap:var(--t-spacing-half);
622
- --tds-page-header-nav-background:transparent;
623
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
624
- --tds-page-header-nav-item-border-width:1px;
625
- --tds-page-header-nav-item-color:var(--t-text-color);
626
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
627
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
628
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
629
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
630
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
522
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
523
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
524
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
525
+ }
526
+
527
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
528
+ --tds-radio-input-background-color:var(--t-form-background-color);
529
+ }
530
+
531
+ .tds-radio-group:has(input:required) legend::after{
532
+ margin-left:.25ch;
533
+ color:var(--t-text-color-status-error);
534
+ content:"*";
631
535
  }
632
- }
633
- }
634
536
 
635
- .tds-page-header{
537
+ .tds-radio-group-fields{
636
538
  display:flex;
637
539
  flex-direction:column;
638
- padding-top:var(--tds-page-header-padding-y);
639
- color:var(--tds-page-header-color);
640
- background:var(--tds-page-header-background-color);
641
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
540
+ gap:var(--tds-radio-group-gap);
541
+ align-items:flex-start;
642
542
  }
643
543
 
644
- .tds-page-header:not(.has-nav){
645
- padding-bottom:var(--tds-page-header-padding-y);
646
- }
544
+ .tds-radio-group-description{
545
+ display:flex;
546
+ gap:var(--t-spacing-half);
547
+ align-items:flex-start;
548
+ margin:0;
549
+ font-size:var(--tds-radio-group-description-font-size);
550
+ line-height:var(--tds-radio-group-description-line-height);
551
+ color:var(--tds-radio-group-description-color);
552
+ cursor:text;
553
+ }
647
554
 
648
- .tds-page-header.inactive{
649
- background:var(--tds-page-header-background-color-inactive);
555
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
556
+ display:var(--tds-radio-group-description-invalid-icon-display);
557
+ flex-shrink:0;
558
+ margin-top:calc(.5lh - .5em);
559
+ line-height:var(--tds-radio-group-description-line-height);
650
560
  }
651
561
 
652
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
653
- width:100%;
562
+ .tds-radio-group--sm{
563
+ --tds-radio-group-line-height:1.35;
564
+ --tds-radio-group-font-size:var(--t-font-size-sm);
565
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
566
+ --tds-radio-group-description-line-height:1.3;
567
+ }
568
+
569
+ .tds-radio{
570
+ --tds-radio-font-size:var(--t-font-size-md);
571
+ --tds-radio-cursor:pointer;
572
+ --tds-radio-line-height:1.4;
573
+ --tds-radio-transition-property:border-width;
574
+
575
+ --tds-radio-input-size:var(--t-element-size-md);
576
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
577
+ --tds-radio-input-border-color:var(--t-form-border-color);
578
+ --tds-radio-input-border-width:var(--t-form-border-width);
579
+ --tds-radio-input-background-color:transparent;
580
+
581
+ --tds-radio-label-color:var(--t-form-color);
582
+
583
+ --tds-radio-description-font-size:var(--t-font-size-sm);
584
+ --tds-radio-description-line-height:1.35;
585
+ --tds-radio-description-color:var(--t-text-color-secondary);
586
+
587
+ position:relative;
588
+ display:inline-grid;
589
+ grid-template-columns:auto;
590
+ grid-auto-columns:1fr;
591
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
592
+ line-height:var(--tds-radio-line-height);
593
+ cursor:var(--tds-radio-cursor);
594
+ -webkit-user-select:none;
595
+ -moz-user-select:none;
596
+ user-select:none;
597
+ }
598
+
599
+ .tds-radio label{
600
+ grid-area:1 / 2;
601
+ font-size:var(--tds-radio-font-size);
602
+ font-weight:var(--t-font-weight-normal);
603
+ color:var(--tds-radio-label-color);
604
+ cursor:var(--tds-radio-cursor);
654
605
  }
655
606
 
656
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
657
- display:flex;
658
- flex-flow:row wrap;
659
- gap:var(--t-spacing-half) var(--t-spacing-1);
660
- align-items:flex-start;
661
- justify-content:flex-start;
662
- min-width:0;
607
+ .tds-radio input[type="radio"]{
608
+ position:relative;
609
+ width:1em;
610
+ height:1em;
611
+ margin:calc((1lh - 1em) / 2) 0 0;
612
+ font-size:var(--tds-radio-font-size);
613
+ line-height:inherit;
614
+ -webkit-appearance:none;
615
+ -moz-appearance:none;
616
+ appearance:none;
617
+ cursor:var(--tds-radio-cursor);
618
+ background-color:var(--tds-radio-input-background-color);
619
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
620
+ border-radius:var(--tds-radio-input-border-radius);
621
+ transition-timing-function:var(--t-ease-in-out);
622
+ transition-duration:var(--t-duration-200);
623
+ transition-property:var(--tds-radio-transition-property);
663
624
  }
664
625
 
665
- :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{
666
- display:flex;
667
- gap:var(--tds-page-header-nav-gap);
668
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
669
- margin:0 0 -1px;
670
- overflow:auto;
671
- list-style:none;
672
- background:var(--tds-page-header-nav-background);
626
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
627
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
628
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
673
629
  }
674
630
 
675
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
676
- position:relative;
677
- display:inline-flex;
678
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
679
- font-size:var(--t-font-size-sm);
680
- line-height:22px;
681
- color:var(--tds-page-header-nav-item-color);
682
- white-space:nowrap;
683
- text-decoration:none;
684
- -webkit-appearance:none;
685
- -moz-appearance:none;
686
- appearance:none;
687
- cursor:pointer;
688
- outline-offset:-2px;
689
- background-color:var(--tds-page-header-nav-item-background-color);
690
- background-clip:padding-box;
691
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
692
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
693
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
631
+ :is(.tds-radio input[type="radio"]):focus-visible{
632
+ outline:var(--t-focus-ring-outline);
633
+ outline-offset:var(--t-focus-ring-offset);
694
634
  }
695
635
 
696
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
697
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
698
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
699
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
700
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
701
- }
636
+ :is(.tds-radio input[type="radio"]):disabled{
637
+ pointer-events:none;
638
+ }
702
639
 
703
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
704
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
705
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
706
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
707
- }
640
+ @media (prefers-reduced-motion: reduce){
708
641
 
709
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
710
- background-color:var(--tds-page-header-nav-item-background-color-active);
711
- border-color:var(--tds-page-header-nav-item-border-color-active);
712
- }
642
+ .tds-radio input[type="radio"]{
643
+ --tds-radio-transition-property:none;
644
+ }
645
+ }
713
646
 
714
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
715
- color:var(--tds-page-header-nav-item-color-disabled);
716
- cursor:not-allowed;
717
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
718
- opacity:1;
719
- }
647
+ .tds-radio:has(input:checked){
648
+ --tds-radio-input-background-color:var(--t-form-background-color);
649
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
650
+ --tds-radio-input-border-width:4px;
651
+ }
720
652
 
721
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
722
- position:relative;
653
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
654
+ --tds-radio-input-background-color:var(--t-form-background-color);
655
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
723
656
  }
724
657
 
725
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
726
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
727
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
728
- }
658
+ .tds-radio:has(input:user-invalid){
659
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
660
+ }
729
661
 
730
- :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{
731
- position:absolute;
732
- top:-5px;
733
- right:-2px;
734
- width:10px;
735
- height:10px;
736
- content:"";
737
- background:var(--tds-page-header-nav-item-indicator-color);
738
- border-radius:50%;
739
- }
662
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
663
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
664
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
665
+ }
740
666
 
741
- @media (prefers-reduced-motion: no-preference){
742
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
743
- animation:indicator-pulse 1.25s ease infinite;
744
- }
745
- }
667
+ .tds-radio:has(input:disabled){
668
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
669
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
746
670
 
747
- .tds-page-header__title-bar{
671
+ --tds-radio-label-color:var(--t-form-color-disabled);
672
+ --tds-radio-description-color:var(--t-form-color-disabled);
673
+ --tds-radio-cursor:not-allowed;
674
+ }
675
+
676
+ .tds-radio:has(input:disabled) input:checked{
677
+ --tds-radio-input-background-color:var(--t-form-background-color);
678
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
679
+ }
680
+
681
+ .tds-radio-description{
748
682
  display:flex;
749
- flex-direction:column;
750
- gap:var(--t-spacing-2) var(--t-spacing-1);
683
+ grid-area:2 / 2;
684
+ gap:var(--t-spacing-half);
751
685
  align-items:flex-start;
752
- justify-content:space-between;
753
- padding:0 var(--tds-page-header-padding-x);
686
+ margin:0;
687
+ font-size:var(--tds-radio-description-font-size);
688
+ line-height:var(--tds-radio-description-line-height);
689
+ color:var(--tds-radio-description-color);
690
+ cursor:text;
754
691
  }
755
692
 
756
- .tds-page-header--profile > .tds-page-header__title-bar{
757
- align-items:center;
758
- }
693
+ .tds-radio--sm{
694
+ --tds-radio-line-height:1.35;
695
+ --tds-radio-input-size:var(--t-element-size-sm);
696
+ --tds-radio-font-size:var(--t-font-size-sm);
697
+ --tds-radio-description-font-size:var(--t-font-size-xs);
698
+ --tds-radio-description-line-height:1.3;
699
+ }
759
700
 
760
- .tds-page-header__primary{
761
- width:100%;
701
+ .tds-toggle-switch{
702
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
703
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
704
+ --tds-toggle-switch-cursor:pointer;
705
+ --tds-toggle-switch-display:inline-grid;
706
+ --tds-toggle-switch-line-height:1.4;
707
+
708
+ --tds-toggle-switch-label-color:var(--t-form-color);
709
+
710
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
711
+ --tds-toggle-switch-track-outline:none;
712
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
713
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
714
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
715
+
716
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
717
+ --tds-toggle-switch-thumb-transform:translateX(0);
718
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
719
+
720
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
721
+ --tds-toggle-switch-description-line-height:1.35;
722
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
723
+ position:relative;
724
+
725
+ display:var(--tds-toggle-switch-display);
726
+ grid-template-columns:auto;
727
+ grid-auto-columns:1fr;
728
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
729
+ -webkit-user-select:none;
730
+ -moz-user-select:none;
731
+ user-select:none;
762
732
  }
763
733
 
764
- .tds-page-header__primary h1{
734
+ .tds-toggle-switch input[type="checkbox"]{
735
+ position:absolute;
736
+ width:var(--tds-toggle-switch-track-width);
737
+ height:var(--tds-toggle-switch-track-height);
765
738
  margin:0;
766
- font-size:var(--tds-page-header-headline-font-size);
739
+ -webkit-appearance:none;
740
+ -moz-appearance:none;
741
+ appearance:none;
742
+ cursor:var(--tds-toggle-switch-cursor);
743
+ outline:var(--tds-toggle-switch-track-outline);
744
+ outline-offset:var(--t-focus-ring-offset);
745
+ background-color:transparent;
746
+ border:0;
747
+ border-radius:var(--t-border-radius-round);
748
+ }
749
+
750
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
751
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
752
+ }
753
+
754
+ .tds-toggle-switch label{
755
+ display:inline-flex;
756
+ grid-area:1 / 2;
757
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
758
+ column-gap:var(--tds-toggle-switch-column-gap);
759
+ margin-top:-.09375em;
760
+ font-size:var(--tds-toggle-switch-font-size);
767
761
  font-weight:var(--t-font-weight-normal);
768
- line-height:32px;
769
- color:var(--tds-page-header-headline-color);
770
- overflow-wrap:break-word;
762
+ line-height:var(--tds-toggle-switch-line-height);
763
+ color:var(--tds-toggle-switch-label-color);
764
+ cursor:var(--tds-toggle-switch-cursor);
771
765
  }
772
766
 
773
- @media (min-width: 960px){
774
- .tds-page-header__primary{
775
- flex:1 1 max-content;
776
- width:auto;
777
- min-width:0;
778
- max-width:100%;
767
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
768
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
779
769
  }
780
770
 
781
- .tds-page-header__title-bar,
782
- .tds-page-header--profile .tds-page-header__title-bar{
783
- flex-flow:row nowrap;
784
- row-gap:12px;
785
- align-items:flex-start;
771
+ .tds-toggle-switch:has(input:checked){
772
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
773
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
786
774
  }
787
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
788
- width:auto;
789
- }
790
775
 
791
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
792
- justify-content:flex-end;
776
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
777
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
793
778
  }
794
- }
795
-
796
- .tds-page-header-phone,
797
- .tds-page-header-email{
798
- color:var(--tds-page-header-color);
799
- white-space:nowrap;
800
- }
801
-
802
- .tds-page-header-email{
803
- max-width:100%;
804
- overflow:hidden;
805
- text-overflow:ellipsis;
806
- }
807
779
 
808
- @keyframes indicator-pulse{
809
- 0%{
810
- opacity:.3;
811
- transform:scale(.9);
780
+ .tds-toggle-switch:has(input:disabled){
781
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
782
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
783
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
784
+ --tds-toggle-switch-cursor:not-allowed;
812
785
  }
813
786
 
814
- 100%{
815
- opacity:0;
816
- transform:scale(1.75);
817
- }
787
+ .tds-toggle-switch-track{
788
+ position:relative;
789
+ flex-shrink:0;
790
+ width:var(--tds-toggle-switch-track-width);
791
+ height:var(--tds-toggle-switch-track-height);
792
+ background-color:var(--tds-toggle-switch-track-background-color);
793
+ border-radius:var(--t-border-radius-round);
794
+ transition:var(--tds-toggle-switch-track-transition);
818
795
  }
819
796
 
820
- .tds-input:has(textarea){
821
- --tds-input-padding-block:6px;
822
- --tds-input-resizer-size:var(--t-element-size-sm);
823
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
824
- }
797
+ .tds-toggle-switch-track::before{
798
+ position:absolute;
799
+ top:var(--t-spacing-fourth);
800
+ left:var(--t-spacing-fourth);
801
+ width:var(--tds-toggle-switch-thumb-size);
802
+ height:var(--tds-toggle-switch-thumb-size);
803
+ content:"";
804
+ background-color:#fff;
805
+ border-radius:var(--t-border-radius-round);
806
+ transform:var(--tds-toggle-switch-thumb-transform);
807
+ transition:var(--tds-toggle-switch-thumb-transition);
808
+ }
825
809
 
826
- @supports (x: attr(x type(*))){
810
+ @media (prefers-reduced-motion: reduce){
827
811
 
828
- .tds-input:has(textarea){
829
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
812
+ .tds-toggle-switch-track{
813
+ --tds-toggle-switch-track-transition:none;
814
+ --tds-toggle-switch-thumb-transition:none;
830
815
  }
831
816
  }
832
817
 
833
- .tds-input.tds-textarea--resize-vertical textarea{
834
- resize:vertical;
835
- }
818
+ .tds-toggle-switch-description{
819
+ display:flex;
820
+ grid-area:2 / 2;
821
+ align-items:flex-start;
822
+ margin:0;
823
+ font-size:var(--tds-toggle-switch-description-font-size);
824
+ line-height:var(--tds-toggle-switch-description-line-height);
825
+ color:var(--tds-toggle-switch-description-color);
826
+ cursor:text;
827
+ }
836
828
 
837
- .tds-input.tds-textarea--resize-none textarea{
838
- resize:none;
839
- }
829
+ .tds-toggle-switch--sm{
830
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
831
+ --tds-toggle-switch-line-height:1.35;
832
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
833
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
834
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
835
+ --tds-toggle-switch-description-line-height:1.3;
836
+ }
840
837
 
841
- .tds-input.tds-textarea--resize-auto textarea{
842
- resize:vertical;
843
- }
838
+ .tds-toggle-switch--hide-label{
839
+ --tds-toggle-switch-display:inline-flex;
840
+ }
844
841
 
845
- @supports (field-sizing: content){
846
- .tds-input.tds-textarea--resize-auto textarea{
847
- field-sizing:content;
848
- resize:none;
849
- }
850
- }
842
+ .tds-select{
843
+ --tds-select-border-color:var(--t-form-border-color);
844
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
845
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
846
+ --tds-select-background-color:var(--t-form-background-color);
847
+ --tds-select-color:var(--t-form-color);
848
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
849
+ --tds-select-font-size:var(--t-font-size-md);
850
+ --tds-select-min-height:var(--t-container-size-md);
851
+ --tds-select-padding-block:6px;
852
+ --tds-select-description-color:var(--t-text-color-secondary);
853
+ --tds-select-description-invalid-icon-display:none;
854
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
855
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
856
+ --tds-select-caret-size:1em;
857
+ --tds-select-caret-inline-offset:.75em;
858
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
851
859
 
852
- .tds-input textarea{
853
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
854
- --tds-input-scrollbar-thumb-color-hidden:transparent;
855
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
856
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
857
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
858
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
859
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
860
- --tds-input-scrollbar-thumb-border-radius:999px;
861
- --tds-input-scrollbar-thumb-border-width:3px;
862
- --tds-input-scrollbar-track-margin-block:.125rem;
863
- scrollbar-color:initial;
864
- transition-timing-function:var(--t-ease-in-out);
865
- transition-duration:var(--t-duration-200);
866
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
867
- }
860
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
861
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
862
+ --tds-select-dropdown-padding:var(--t-spacing-1);
863
+ --tds-select-dropdown-margin-block:5px;
864
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
865
+ --tds-select-dropdown-scrollbar-width:thin;
866
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
867
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
868
+ --tds-select-dropdown-scroll-behavior:smooth;
869
+ --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;
870
+ --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;
871
+ --tds-select-dropdown-closed-opacity:0;
872
+ --tds-select-dropdown-open-opacity:1;
873
+ --tds-select-dropdown-closed-transform:translateY(-8px);
874
+ --tds-select-dropdown-open-transform:translateY(0);
868
875
 
869
- @media (pointer: fine){
870
- :is(.tds-input textarea)::-webkit-scrollbar{
871
- width:12px;
872
- height:12px;
873
- cursor:default;
874
- }
876
+ --tds-select-option-gap:var(--t-spacing-1);
877
+ --tds-select-option-padding-block:var(--t-spacing-1);
878
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
879
+ --tds-select-option-font-size:1rem;
880
+ --tds-select-option-color:var(--t-text-color);
881
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
882
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
883
+ --tds-select-option-border-radius:var(--t-border-radius);
875
884
 
876
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
877
- cursor:default;
878
- background:var(--tds-input-scrollbar-thumb-color);
879
- background-clip:content-box;
880
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
881
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
882
- }
885
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
886
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
887
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
888
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
889
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
890
+ --tds-select-group-label-letter-spacing:0;
891
+ --tds-select-group-label-color:var(--t-text-color-secondary);
892
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
893
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
894
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
883
895
 
884
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
885
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
886
- }
896
+ position:relative;
897
+ display:flex;
898
+ flex-direction:column;
899
+ gap:var(--t-spacing-half);
900
+ }
887
901
 
888
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
889
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
890
- }
902
+ .tds-select :is(label,.tds-select-label){
903
+ font-size:var(--t-font-size-md);
904
+ font-weight:var(--t-font-weight-normal);
905
+ color:var(--t-text-color);
906
+ cursor:default;
907
+ }
891
908
 
892
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
893
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
894
- }
909
+ .tds-select :is(select,button){
910
+ position:relative;
911
+ place-items:center;
912
+ inline-size:100%;
913
+ min-block-size:var(--tds-select-min-height);
914
+ padding-block:var(--tds-select-padding-block);
915
+ padding-inline:var(--t-spacing-1);
916
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
917
+ font-family:inherit;
918
+ font-size:var(--tds-select-font-size);
919
+ line-height:1;
920
+ color:var(--tds-select-color);
921
+ text-align:left;
922
+ -webkit-appearance:none;
923
+ -moz-appearance:none;
924
+ appearance:none;
925
+ cursor:var(--tds-select-cursor, default);
926
+ outline:var(--t-focus-ring-width) solid transparent;
927
+ outline-offset:0;
928
+ background-color:var(--tds-select-background-color);
929
+ background-image:var(--tds-select-background-image);
930
+ background-repeat:no-repeat;
931
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
932
+ background-size:var(--tds-select-caret-size);
933
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
934
+ border-radius:var(--t-form-border-radius);
935
+ transition-timing-function:var(--t-ease-in-out);
936
+ transition-duration:var(--t-duration-300);
937
+ transition-property:var(--tds-select-transition-property);
938
+ }
895
939
 
896
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
897
- background:var(--tds-input-scrollbar-surface-color);
940
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
941
+ border-color:var(--tds-select-border-color-hover);
898
942
  }
899
943
 
900
- :is(.tds-input textarea)::-webkit-resizer{
901
- background:var(--tds-input-resizer-icon) no-repeat;
902
- background-position:right bottom;
903
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
944
+ :is(.tds-select :is(select,button)):focus{
945
+ outline-color:var(--t-focus-ring-color);
946
+ outline-offset:var(--t-focus-ring-offset);
947
+ border-color:var(--tds-select-border-color-active);
904
948
  }
905
949
 
906
- :is(.tds-input textarea)::-webkit-scrollbar-track{
907
- margin-block:var(--tds-input-scrollbar-track-margin-block);
908
- cursor:default;
950
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
951
+ color:var(--tds-select-placeholder-color);
909
952
  }
910
953
 
911
- @supports (-moz-appearance: none){
912
- :is(.tds-input textarea){
913
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
914
- scrollbar-width:thin;
915
- }
916
-
917
- @media (hover){
918
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
919
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
920
- }
921
- }
922
- }
954
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
955
+ --tds-select-border-color:var(--t-form-border-color-error);
956
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
957
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
958
+ --tds-select-background-color:var(--t-form-background-color-error);
959
+ --tds-select-description-color:var(--t-text-color-status-error);
960
+ --tds-select-description-invalid-icon-display:inline-block;
923
961
  }
924
962
 
925
- .tds-radio-group{
926
- --tds-radio-group-font-size:var(--t-font-size-md);
927
- --tds-radio-group-line-height:1.4;
928
- --tds-radio-group-gap:var(--t-spacing-1);
929
-
930
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
931
-
932
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
933
- --tds-radio-group-description-line-height:1.35;
934
- --tds-radio-group-description-color:var(--t-text-color-secondary);
935
- --tds-radio-group-description-invalid-icon-display:none;
936
- display:flex;
937
- flex-direction:column;
938
- gap:var(--tds-radio-group-gap);
939
- padding:0;
940
- margin:0;
963
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
964
+ margin-left:.25ch;
965
+ color:var(--t-text-color-status-error);
966
+ content:"*";
967
+ }
941
968
 
942
- font-size:var(--tds-radio-group-font-size);
943
- line-height:var(--tds-radio-group-line-height);
944
- border:0;
945
- }
969
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
970
+ --tds-select-border-color:var(--t-form-border-color-disabled);
971
+ --tds-select-background-color:var(--t-form-background-color-disabled);
972
+ --tds-select-color:var(--t-form-color-disabled);
973
+ --tds-select-cursor:not-allowed;
974
+ }
946
975
 
947
- .tds-radio-group legend{
948
- padding:0;
949
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
976
+ .tds-select:has( > [popover]:popover-open) > button{
977
+ border-color:var(--tds-select-border-color-active);
950
978
  }
951
979
 
952
- .tds-radio-group:has(.tds-radio-group-description){
953
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
980
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
981
+ transform:rotate(.5turn);
982
+ }
983
+
984
+ .tds-select :is(hr,li[role="separator"]){
985
+ margin-block:var(--t-spacing-half);
986
+ color:var(--tds-select-border-color);
987
+ border:0;
988
+ border-top:1px solid;
954
989
  }
955
990
 
956
- .tds-radio-group[aria-invalid="true"]{
957
- --tds-radio-group-description-color:var(--t-text-color-status-error);
958
- --tds-radio-group-description-invalid-icon-display:inline-block;
991
+ .tds-select :is(li[role="option"],option:not([hidden])){
992
+ display:block;
993
+ padding-block:var(--tds-select-option-padding-block);
994
+ padding-inline:var(--tds-select-option-padding-inline);
995
+ overflow:hidden;
996
+ text-overflow:ellipsis;
997
+ font-size:var(--tds-select-option-font-size);
998
+ color:var(--tds-select-option-color);
999
+ white-space:nowrap;
1000
+ cursor:default;
1001
+ border-radius:var(--tds-select-option-border-radius);
959
1002
  }
960
1003
 
961
- .tds-radio-group[aria-invalid="true"] .tds-radio{
962
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1004
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1005
+ outline:none;
963
1006
  }
964
1007
 
965
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
966
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
967
- --tds-radio-input-background-color:var(--t-form-background-color-error);
968
- }
1008
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1009
+ background:var(--tds-select-option-background-hover);
1010
+ }
969
1011
 
970
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
971
- --tds-radio-input-background-color:var(--t-form-background-color);
972
- }
1012
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1013
+ background:var(--tds-select-option-background-active);
1014
+ }
973
1015
 
974
- .tds-radio-group:has(input:required) legend::after{
975
- margin-left:.25ch;
976
- color:var(--t-text-color-status-error);
977
- content:"*";
1016
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1017
+ color:var(--t-form-color-disabled);
1018
+ cursor:not-allowed;
978
1019
  }
979
1020
 
980
- .tds-radio-group-fields{
981
- display:flex;
982
- flex-direction:column;
983
- gap:var(--tds-radio-group-gap);
984
- align-items:flex-start;
985
- }
986
-
987
- .tds-radio-group-description{
988
- display:flex;
989
- gap:var(--t-spacing-half);
990
- align-items:flex-start;
991
- margin:0;
992
- font-size:var(--tds-radio-group-description-font-size);
993
- line-height:var(--tds-radio-group-description-line-height);
994
- color:var(--tds-radio-group-description-color);
995
- cursor:text;
996
- }
997
-
998
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
999
- display:var(--tds-radio-group-description-invalid-icon-display);
1000
- flex-shrink:0;
1001
- margin-top:calc(.5lh - .5em);
1002
- line-height:var(--tds-radio-group-description-line-height);
1003
- }
1004
-
1005
- .tds-radio-group--sm{
1006
- --tds-radio-group-line-height:1.35;
1007
- --tds-radio-group-font-size:var(--t-font-size-sm);
1008
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1009
- --tds-radio-group-description-line-height:1.3;
1010
- }
1011
-
1012
- .tds-toggle-switch{
1013
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1014
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1015
- --tds-toggle-switch-cursor:pointer;
1016
- --tds-toggle-switch-display:inline-grid;
1017
- --tds-toggle-switch-line-height:1.4;
1018
-
1019
- --tds-toggle-switch-label-color:var(--t-form-color);
1020
-
1021
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1022
- --tds-toggle-switch-track-outline:none;
1023
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1024
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1025
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1026
-
1027
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1028
- --tds-toggle-switch-thumb-transform:translateX(0);
1029
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1030
-
1031
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1032
- --tds-toggle-switch-description-line-height:1.35;
1033
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1034
- position:relative;
1035
-
1036
- display:var(--tds-toggle-switch-display);
1037
- grid-template-columns:auto;
1038
- grid-auto-columns:1fr;
1039
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1040
- -webkit-user-select:none;
1041
- -moz-user-select:none;
1042
- user-select:none;
1043
- }
1021
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1022
+ background:transparent;
1023
+ }
1044
1024
 
1045
- .tds-toggle-switch input[type="checkbox"]{
1046
- position:absolute;
1047
- width:var(--tds-toggle-switch-track-width);
1048
- height:var(--tds-toggle-switch-track-height);
1049
- margin:0;
1050
- -webkit-appearance:none;
1051
- -moz-appearance:none;
1052
- appearance:none;
1053
- cursor:var(--tds-toggle-switch-cursor);
1054
- outline:var(--tds-toggle-switch-track-outline);
1055
- outline-offset:var(--t-focus-ring-offset);
1056
- background-color:transparent;
1057
- border:0;
1058
- border-radius:var(--t-border-radius-round);
1025
+ .tds-select :is(li[role="presentation"],legend){
1026
+ position:sticky;
1027
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1028
+ z-index:1;
1029
+ float:inline-start;
1030
+ inline-size:100%;
1031
+ padding-block:var(--tds-select-group-label-padding-block);
1032
+ padding-inline:var(--tds-select-group-label-padding-inline);
1033
+ container-type:scroll-state;
1034
+ font-size:var(--tds-select-group-label-font-size);
1035
+ font-weight:var(--tds-select-group-label-font-weight);
1036
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1037
+ background:var(--tds-select-group-label-background);
1038
+ text-box:trim-both cap alphabetic;
1059
1039
  }
1060
1040
 
1061
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1062
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1041
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1042
+ display:inline-flex;
1043
+ gap:var(--t-spacing-half);
1044
+ align-items:center;
1045
+ color:var(--tds-select-group-label-color);
1046
+ transition:var(--tds-select-group-label-transition);
1063
1047
  }
1064
1048
 
1065
- .tds-toggle-switch label{
1066
- display:inline-flex;
1067
- grid-area:1 / 2;
1068
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1069
- column-gap:var(--tds-toggle-switch-column-gap);
1070
- margin-top:-.09375em;
1071
- font-size:var(--tds-toggle-switch-font-size);
1072
- font-weight:var(--t-font-weight-normal);
1073
- line-height:var(--tds-toggle-switch-line-height);
1074
- color:var(--tds-toggle-switch-label-color);
1075
- cursor:var(--tds-toggle-switch-cursor);
1076
- }
1077
-
1078
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1079
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1080
- }
1081
-
1082
- .tds-toggle-switch:has(input:checked){
1083
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1084
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1085
- }
1049
+ @container scroll-state(stuck){
1086
1050
 
1087
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1088
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1051
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1052
+ color:var(--tds-select-group-label-color-stuck);
1089
1053
  }
1090
1054
 
1091
- .tds-toggle-switch:has(input:disabled){
1092
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1093
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1094
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1095
- --tds-toggle-switch-cursor:not-allowed;
1096
- }
1055
+ @media (forced-colors: active){
1097
1056
 
1098
- .tds-toggle-switch-track{
1099
- position:relative;
1100
- flex-shrink:0;
1101
- width:var(--tds-toggle-switch-track-width);
1102
- height:var(--tds-toggle-switch-track-height);
1103
- background-color:var(--tds-toggle-switch-track-background-color);
1104
- border-radius:var(--t-border-radius-round);
1105
- transition:var(--tds-toggle-switch-track-transition);
1106
- }
1057
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1058
+ color:var(--tds-select-group-label-color-stuck);
1059
+ }
1060
+ }
1061
+ }
1107
1062
 
1108
- .tds-toggle-switch-track::before{
1109
- position:absolute;
1110
- top:var(--t-spacing-fourth);
1111
- left:var(--t-spacing-fourth);
1112
- width:var(--tds-toggle-switch-thumb-size);
1113
- height:var(--tds-toggle-switch-thumb-size);
1114
- content:"";
1115
- background-color:#fff;
1116
- border-radius:var(--t-border-radius-round);
1117
- transform:var(--tds-toggle-switch-thumb-transform);
1118
- transition:var(--tds-toggle-switch-thumb-transition);
1063
+ .tds-select.tds-select--lg{
1064
+ --tds-select-min-height:var(--t-container-size-lg);
1065
+ --tds-select-font-size:var(--t-font-size-lg);
1119
1066
  }
1120
1067
 
1121
1068
  @media (prefers-reduced-motion: reduce){
1122
1069
 
1123
- .tds-toggle-switch-track{
1124
- --tds-toggle-switch-track-transition:none;
1125
- --tds-toggle-switch-thumb-transition:none;
1070
+ .tds-select{
1071
+ --tds-select-transition-property:none;
1072
+ --tds-select-dropdown-transition-enter:none;
1073
+ --tds-select-dropdown-transition-exit:none;
1074
+ --tds-select-dropdown-scroll-behavior:auto;
1075
+ --tds-select-dropdown-closed-transform:none;
1076
+ --tds-select-dropdown-open-transform:none;
1077
+ --tds-select-caret-transition:none;
1126
1078
  }
1127
1079
  }
1128
1080
 
1129
- .tds-toggle-switch-description{
1081
+ .tds-select-description{
1130
1082
  display:flex;
1131
- grid-area:2 / 2;
1083
+ gap:var(--t-spacing-half);
1132
1084
  align-items:flex-start;
1133
1085
  margin:0;
1134
- font-size:var(--tds-toggle-switch-description-font-size);
1135
- line-height:var(--tds-toggle-switch-description-line-height);
1136
- color:var(--tds-toggle-switch-description-color);
1086
+ font-size:var(--t-font-size-sm);
1087
+ line-height:1.35;
1088
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1137
1089
  cursor:text;
1138
1090
  }
1139
1091
 
1140
- .tds-toggle-switch--sm{
1141
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1142
- --tds-toggle-switch-line-height:1.35;
1143
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1144
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1145
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1146
- --tds-toggle-switch-description-line-height:1.3;
1147
- }
1092
+ .tds-select-description .tds-select-description-invalid-icon{
1093
+ display:var(--tds-select-description-invalid-icon-display, none);
1094
+ flex-shrink:0;
1095
+ margin-block-start:calc(.5lh - .5em);
1096
+ line-height:1.35;
1097
+ }
1148
1098
 
1149
- .tds-toggle-switch--hide-label{
1150
- --tds-toggle-switch-display:inline-flex;
1099
+ .tds-select > .tds-select-hidden-select{
1100
+ position:absolute;
1101
+ inline-size:1px;
1102
+ block-size:1px;
1103
+ padding:0;
1104
+ margin:0;
1105
+ pointer-events:none;
1106
+ opacity:0;
1151
1107
  }
1152
1108
 
1153
- .tds-radio{
1154
- --tds-radio-font-size:var(--t-font-size-md);
1155
- --tds-radio-cursor:pointer;
1156
- --tds-radio-line-height:1.4;
1157
- --tds-radio-transition-property:border-width;
1158
-
1159
- --tds-radio-input-size:var(--t-element-size-md);
1160
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1161
- --tds-radio-input-border-color:var(--t-form-border-color);
1162
- --tds-radio-input-border-width:var(--t-form-border-width);
1163
- --tds-radio-input-background-color:transparent;
1109
+ .tds-select:has( > button) > button{
1110
+ display:block;
1111
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1112
+ overflow:hidden;
1113
+ text-overflow:ellipsis;
1114
+ color:var(--tds-select-placeholder-color);
1115
+ white-space:nowrap;
1116
+ background-image:none;
1117
+ 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);
1118
+ -webkit-tap-highlight-color:transparent;
1119
+ }
1164
1120
 
1165
- --tds-radio-label-color:var(--t-form-color);
1121
+ :is(.tds-select:has( > button) > button)::after{
1122
+ position:absolute;
1123
+ inset-block:0;
1124
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1125
+ width:var(--tds-select-caret-size);
1126
+ height:var(--tds-select-caret-size);
1127
+ margin-block:auto;
1128
+ pointer-events:none;
1129
+ content:var(--tds-select-background-image);
1130
+ transform:rotate(0);
1131
+ transition:var(--tds-select-caret-transition);
1132
+ }
1166
1133
 
1167
- --tds-radio-description-font-size:var(--t-font-size-sm);
1168
- --tds-radio-description-line-height:1.35;
1169
- --tds-radio-description-color:var(--t-text-color-secondary);
1134
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1135
+ color:var(--tds-select-color);
1136
+ }
1170
1137
 
1171
- position:relative;
1172
- display:inline-grid;
1173
- grid-template-columns:auto;
1174
- grid-auto-columns:1fr;
1175
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1176
- line-height:var(--tds-radio-line-height);
1177
- cursor:var(--tds-radio-cursor);
1178
- -webkit-user-select:none;
1179
- -moz-user-select:none;
1180
- user-select:none;
1181
- }
1182
-
1183
- .tds-radio label{
1184
- grid-area:1 / 2;
1185
- font-size:var(--tds-radio-font-size);
1186
- font-weight:var(--t-font-weight-normal);
1187
- color:var(--tds-radio-label-color);
1188
- cursor:var(--tds-radio-cursor);
1189
- }
1190
-
1191
- .tds-radio input[type="radio"]{
1192
- position:relative;
1193
- width:1em;
1194
- height:1em;
1195
- margin:calc((1lh - 1em) / 2) 0 0;
1196
- font-size:var(--tds-radio-font-size);
1197
- line-height:inherit;
1198
- -webkit-appearance:none;
1199
- -moz-appearance:none;
1200
- appearance:none;
1201
- cursor:var(--tds-radio-cursor);
1202
- background-color:var(--tds-radio-input-background-color);
1203
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1204
- border-radius:var(--tds-radio-input-border-radius);
1205
- transition-timing-function:var(--t-ease-in-out);
1206
- transition-duration:var(--t-duration-200);
1207
- transition-property:var(--tds-radio-transition-property);
1138
+ .tds-select:has( > button) [popover]{
1139
+ inset:auto;
1140
+ inline-size:-moz-max-content;
1141
+ inline-size:max-content;
1142
+ min-inline-size:anchor-size(width);
1143
+ max-inline-size:100vi;
1144
+ max-block-size:min(50vh, 20rem);
1145
+ padding:var(--tds-select-dropdown-padding);
1146
+ margin-block:var(--tds-select-dropdown-margin-block);
1147
+ position-area:block-end span-inline-start;
1148
+ position-try-fallbacks:flip-block, flip-inline;
1149
+ overflow:auto;
1150
+ overflow-x:hidden;
1151
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1152
+ overscroll-behavior:none;
1153
+ -webkit-user-select:none;
1154
+ -moz-user-select:none;
1155
+ user-select:none;
1156
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1157
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1158
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1159
+ background:var(--tds-select-dropdown-background-color);
1160
+ border:var(--tds-select-dropdown-border);
1161
+ border-radius:var(--tds-select-dropdown-border-radius);
1162
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1163
+ opacity:var(--tds-select-dropdown-open-opacity);
1164
+ transform:var(--tds-select-dropdown-open-transform);
1165
+ transition:var(--tds-select-dropdown-transition-enter);
1208
1166
  }
1209
1167
 
1210
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1211
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1212
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1168
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1169
+ opacity:var(--tds-select-dropdown-closed-opacity);
1170
+ transform:var(--tds-select-dropdown-closed-transform);
1171
+ transition:var(--tds-select-dropdown-transition-exit);
1213
1172
  }
1214
1173
 
1215
- :is(.tds-radio input[type="radio"]):focus-visible{
1216
- outline:var(--t-focus-ring-outline);
1217
- outline-offset:var(--t-focus-ring-offset);
1174
+ :is(.tds-select:has( > button) [popover]) ul{
1175
+ padding:0;
1176
+ margin:0;
1177
+ list-style:none;
1218
1178
  }
1219
1179
 
1220
- :is(.tds-radio input[type="radio"]):disabled{
1221
- pointer-events:none;
1180
+ @starting-style{
1181
+ :is(.tds-select:has( > button) [popover]):popover-open{
1182
+ opacity:var(--tds-select-dropdown-closed-opacity);
1183
+ transform:var(--tds-select-dropdown-closed-transform);
1184
+ }
1222
1185
  }
1223
1186
 
1224
- @media (prefers-reduced-motion: reduce){
1225
-
1226
- .tds-radio input[type="radio"]{
1227
- --tds-radio-transition-property:none;
1187
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1188
+ .tds-select select:has(> button){
1189
+ padding-inline-end:0;
1190
+ background-image:none;
1228
1191
  }
1192
+ @media (hover) and (pointer: fine){
1193
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1194
+ padding-block:0;
1195
+ -webkit-appearance:base-select;
1196
+ -moz-appearance:base-select;
1197
+ appearance:base-select;
1198
+ }
1199
+ }
1200
+ :is(.tds-select select:has( > button))::picker-icon{
1201
+ flex-shrink:0;
1202
+ width:var(--tds-select-caret-size);
1203
+ height:var(--tds-select-caret-size);
1204
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1205
+ content:var(--tds-select-background-image);
1206
+ transition:var(--tds-select-caret-transition);
1229
1207
  }
1230
1208
 
1231
- .tds-radio:has(input:checked){
1232
- --tds-radio-input-background-color:var(--t-form-background-color);
1233
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1234
- --tds-radio-input-border-width:4px;
1235
- }
1209
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1210
+ opacity:var(--tds-select-dropdown-closed-opacity);
1211
+ transform:var(--tds-select-dropdown-closed-transform);
1212
+ transition:var(--tds-select-dropdown-transition-exit);
1213
+ }
1236
1214
 
1237
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1238
- --tds-radio-input-background-color:var(--t-form-background-color);
1239
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1215
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1216
+ outline-color:var(--t-focus-ring-color);
1217
+ outline-offset:var(--t-focus-ring-offset);
1218
+ border-color:var(--tds-select-border-color-active);
1240
1219
  }
1241
1220
 
1242
- .tds-radio:has(input:user-invalid){
1243
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1244
- }
1221
+ :is(.tds-select select:has( > button)):open::picker-icon{
1222
+ opacity:1;
1223
+ transform:rotate(.5turn);
1224
+ }
1245
1225
 
1246
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1247
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1248
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1226
+ :is(.tds-select select:has( > button)) selectedcontent{
1227
+ overflow:hidden;
1228
+ text-overflow:ellipsis;
1229
+ line-height:calc(var(--tds-select-min-height) - 2px);
1230
+ white-space:nowrap;
1249
1231
  }
1250
1232
 
1251
- .tds-radio:has(input:disabled){
1252
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1253
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1233
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1234
+ color:var(--tds-select-placeholder-color);
1235
+ }
1254
1236
 
1255
- --tds-radio-label-color:var(--t-form-color-disabled);
1256
- --tds-radio-description-color:var(--t-form-color-disabled);
1257
- --tds-radio-cursor:not-allowed;
1258
- }
1237
+ :is(.tds-select select:has( > button))::picker(select){
1238
+ inset:auto;
1239
+ inline-size:-moz-max-content;
1240
+ inline-size:max-content;
1241
+ min-inline-size:anchor-size(width);
1242
+ max-inline-size:100vi;
1243
+ padding:var(--tds-select-dropdown-padding);
1244
+ margin-block:var(--tds-select-dropdown-margin-block);
1245
+ position-try-fallbacks:flip-block, flip-inline;
1246
+ overflow:auto;
1247
+ overflow-x:hidden;
1248
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1249
+ overscroll-behavior:none;
1250
+ -webkit-user-select:none;
1251
+ -moz-user-select:none;
1252
+ user-select:none;
1253
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1254
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1255
+ background:var(--tds-select-dropdown-background-color);
1256
+ border:var(--tds-select-dropdown-border);
1257
+ border-radius:var(--tds-select-dropdown-border-radius);
1258
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1259
+ opacity:var(--tds-select-dropdown-open-opacity);
1260
+ transform:var(--tds-select-dropdown-open-transform);
1261
+ transition:var(--tds-select-dropdown-transition-enter);
1262
+ }
1259
1263
 
1260
- .tds-radio:has(input:disabled) input:checked{
1261
- --tds-radio-input-background-color:var(--t-form-background-color);
1262
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1264
+ :is(.tds-select select:has( > button)) option::checkmark{
1265
+ display:none;
1263
1266
  }
1264
1267
 
1265
- .tds-radio-description{
1266
- display:flex;
1267
- grid-area:2 / 2;
1268
- gap:var(--t-spacing-half);
1269
- align-items:flex-start;
1270
- margin:0;
1271
- font-size:var(--tds-radio-description-font-size);
1272
- line-height:var(--tds-radio-description-line-height);
1273
- color:var(--tds-radio-description-color);
1274
- cursor:text;
1268
+ @starting-style{
1269
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1270
+ opacity:var(--tds-select-dropdown-closed-opacity);
1271
+ transform:var(--tds-select-dropdown-closed-transform);
1272
+ }
1273
+ }
1275
1274
  }
1276
1275
 
1277
- .tds-radio--sm{
1278
- --tds-radio-line-height:1.35;
1279
- --tds-radio-input-size:var(--t-element-size-sm);
1280
- --tds-radio-font-size:var(--t-font-size-sm);
1281
- --tds-radio-description-font-size:var(--t-font-size-xs);
1282
- --tds-radio-description-line-height:1.3;
1276
+ .tds-input:has(textarea){
1277
+ --tds-input-padding-block:6px;
1278
+ --tds-input-resizer-size:var(--t-element-size-sm);
1279
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1283
1280
  }
1284
1281
 
1282
+ @supports (x: attr(x type(*))){
1283
+
1284
+ .tds-input:has(textarea){
1285
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1286
+ }
1287
+ }
1285
1288
 
1286
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1287
- -webkit-appearance:none;
1288
- appearance:none;
1289
+ .tds-input.tds-textarea--resize-vertical textarea{
1290
+ resize:vertical;
1289
1291
  }
1290
1292
 
1291
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1292
- inline-size:1em;
1293
- block-size:2em;
1293
+ .tds-input.tds-textarea--resize-none textarea{
1294
+ resize:none;
1295
+ }
1296
+
1297
+ .tds-input.tds-textarea--resize-auto textarea{
1298
+ resize:vertical;
1294
1299
  }
1295
1300
 
1296
1301
  @supports (field-sizing: content){
1297
- .tds-input--auto-width{
1298
- inline-size:-moz-fit-content;
1299
- inline-size:fit-content;
1300
- min-inline-size:min(100%, 122px);
1301
- }
1302
+ .tds-input.tds-textarea--resize-auto textarea{
1303
+ field-sizing:content;
1304
+ resize:none;
1305
+ }
1306
+ }
1302
1307
 
1303
- .tds-input--auto-width input{
1304
- field-sizing:content;
1305
- inline-size:auto;
1306
- }
1308
+ .tds-input textarea{
1309
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1310
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1311
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1312
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1313
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1314
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1315
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1316
+ --tds-input-scrollbar-thumb-border-radius:999px;
1317
+ --tds-input-scrollbar-thumb-border-width:3px;
1318
+ --tds-input-scrollbar-track-margin-block:.125rem;
1319
+ scrollbar-color:initial;
1320
+ transition-timing-function:var(--t-ease-in-out);
1321
+ transition-duration:var(--t-duration-200);
1322
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1307
1323
  }
1308
1324
 
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);
1326
-
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);
1342
-
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);
1325
+ @media (pointer: fine){
1326
+ :is(.tds-input textarea)::-webkit-scrollbar{
1327
+ width:12px;
1328
+ height:12px;
1329
+ cursor:default;
1330
+ }
1351
1331
 
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);
1332
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1333
+ cursor:default;
1334
+ background:var(--tds-input-scrollbar-thumb-color);
1335
+ background-clip:content-box;
1336
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1337
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1338
+ }
1362
1339
 
1363
- position:relative;
1364
- display:flex;
1365
- flex-direction:column;
1366
- gap:var(--t-spacing-half);
1367
- }
1340
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1341
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1342
+ }
1368
1343
 
1369
- .tds-select :is(label,.tds-select-label){
1370
- font-size:var(--t-font-size-md);
1371
- font-weight:var(--t-font-weight-normal);
1372
- color:var(--t-text-color);
1373
- cursor:default;
1374
- }
1344
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1345
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1346
+ }
1375
1347
 
1376
- .tds-select :is(select,button){
1377
- position:relative;
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;
1389
- -webkit-appearance:none;
1390
- -moz-appearance:none;
1391
- appearance:none;
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);
1402
- transition-timing-function:var(--t-ease-in-out);
1403
- transition-duration:var(--t-duration-300);
1404
- transition-property:var(--tds-select-transition-property);
1405
- }
1348
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1349
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1350
+ }
1406
1351
 
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);
1352
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1353
+ background:var(--tds-input-scrollbar-surface-color);
1409
1354
  }
1410
1355
 
1411
- :is(.tds-select :is(select,button)):focus{
1412
- outline-color:var(--t-focus-ring-color);
1413
- outline-offset:var(--t-focus-ring-offset);
1414
- border-color:var(--tds-select-border-color-active);
1356
+ :is(.tds-input textarea)::-webkit-resizer{
1357
+ background:var(--tds-input-resizer-icon) no-repeat;
1358
+ background-position:right bottom;
1359
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1415
1360
  }
1416
1361
 
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);
1362
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1363
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1364
+ cursor:default;
1419
1365
  }
1420
1366
 
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;
1428
- }
1367
+ @supports (-moz-appearance: none){
1368
+ :is(.tds-input textarea){
1369
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1370
+ scrollbar-width:thin;
1371
+ }
1429
1372
 
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:"*";
1373
+ @media (hover){
1374
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1375
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1376
+ }
1377
+ }
1434
1378
  }
1435
-
1436
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1437
- --tds-select-border-color:var(--t-form-border-color-disabled);
1438
- --tds-select-background-color:var(--t-form-background-color-disabled);
1439
- --tds-select-color:var(--t-form-color-disabled);
1440
- --tds-select-cursor:not-allowed;
1441
1379
  }
1442
1380
 
1443
- .tds-select:has( > [popover]:popover-open) > button{
1444
- border-color:var(--tds-select-border-color-active);
1445
- }
1446
1381
 
1447
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1448
- transform:rotate(.5turn);
1449
- }
1382
+ @media (prefers-reduced-motion: no-preference){
1450
1383
 
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;
1384
+ :root{
1385
+ interpolate-size:allow-keywords;
1386
+ }
1456
1387
  }
1457
1388
 
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);
1469
- }
1389
+ @layer tds-component{
1390
+ tds-sidenav,
1391
+ .tds-sidenav{
1392
+ --tds-sidenav-indent:12px;
1393
+ --tds-sidenav-item-depth:0;
1470
1394
 
1471
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1472
- outline:none;
1473
- }
1395
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
1474
1396
 
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
- }
1397
+ --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;
1398
+ --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;
1399
+ --tds-sidenav-collapse-closed-opacity:0;
1400
+ --tds-sidenav-collapse-open-opacity:1;
1401
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1402
+ --tds-sidenav-collapse-open-transform:translateY(0);
1478
1403
 
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
- }
1404
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1405
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1406
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1407
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1482
1408
 
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
- }
1409
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1410
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1411
+ --tds-sidenav-item-nested-background-selected:transparent;
1487
1412
 
1488
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1489
- background:transparent;
1490
- }
1413
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1414
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1415
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1491
1416
 
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;
1417
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1418
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1506
1419
  }
1507
1420
 
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);
1421
+ @media (prefers-reduced-motion: reduce){
1422
+ tds-sidenav,
1423
+ .tds-sidenav{
1424
+ --tds-sidenav-collapse-transition-enter:none;
1425
+ --tds-sidenav-collapse-transition-exit:none;
1426
+ --tds-sidenav-collapse-closed-transform:none;
1427
+ --tds-sidenav-collapse-open-transform:none;
1428
+ }
1514
1429
  }
1515
1430
 
1516
- @container scroll-state(stuck){
1431
+ .tds-sidenav--theme-gray{
1432
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1433
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1434
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1435
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1436
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1437
+ }
1438
+ }
1517
1439
 
1518
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1519
- color:var(--tds-select-group-label-color-stuck);
1520
- }
1521
-
1522
- @media (forced-colors: active){
1523
-
1524
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1525
- color:var(--tds-select-group-label-color-stuck);
1526
- }
1527
- }
1528
- }
1529
-
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);
1440
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1441
+ display:flex;
1533
1442
  }
1534
1443
 
1535
- @media (prefers-reduced-motion: reduce){
1444
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1445
+ flex-direction:column;
1446
+ gap:var(--t-spacing-half);
1447
+ width:100%;
1448
+ }
1536
1449
 
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;
1450
+ .tds-sidenav-section-list{
1451
+ width:100%;
1452
+ padding:0;
1453
+ margin:0;
1454
+ list-style:none;
1545
1455
  }
1546
- }
1547
1456
 
1548
- .tds-select-description{
1457
+ .tds-sidenav-section-header{
1549
1458
  display:flex;
1550
- gap:var(--t-spacing-half);
1551
- align-items:flex-start;
1552
- margin:0;
1553
- font-size:var(--t-font-size-sm);
1554
- line-height:1.35;
1555
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1556
- cursor:text;
1459
+ align-items:baseline;
1460
+ justify-content:space-between;
1461
+ padding-top:var(--t-spacing-2);
1557
1462
  }
1558
1463
 
1559
- .tds-select-description .tds-select-description-invalid-icon{
1560
- display:var(--tds-select-description-invalid-icon-display, none);
1561
- flex-shrink:0;
1562
- margin-block-start:calc(.5lh - .5em);
1464
+ .tds-sidenav-section-header h2{
1465
+ margin:0;
1466
+ font-size:var(--t-font-size-sm);
1467
+ font-weight:var(--t-font-weight-semibold);
1563
1468
  line-height:1.35;
1469
+ color:var(--t-text-color-secondary);
1470
+ text-transform:uppercase;
1564
1471
  }
1565
1472
 
1566
- .tds-select > .tds-select-hidden-select{
1567
- position:absolute;
1568
- inline-size:1px;
1569
- block-size:1px;
1473
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1474
+ padding-top:0;
1475
+ }
1476
+
1477
+ .tds-sidenav-section-header [slot="label-actions"]{
1478
+ display:flex;
1479
+ gap:var(--t-spacing-half);
1480
+ align-items:center;
1481
+ }
1482
+
1483
+ .tds-sidenav-section [slot="section-actions"]{
1484
+ display:flex;
1485
+ gap:12px;
1486
+ align-items:center;
1487
+ min-height:42px;
1488
+ padding:var(--t-spacing-1) 0;
1489
+ }
1490
+
1491
+ .tds-sidenav-section-list,
1492
+ .tds-sidenav-item{
1493
+ width:100%;
1570
1494
  padding:0;
1571
1495
  margin:0;
1572
- pointer-events:none;
1573
- opacity:0;
1574
1496
  }
1575
1497
 
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);
1498
+ .tds-sidenav-item :is(a,button){
1499
+ position:relative;
1500
+ display:flex;
1501
+ gap:12px;
1502
+ align-items:center;
1503
+ width:100%;
1504
+ padding:12px;
1579
1505
  overflow:hidden;
1580
- text-overflow:ellipsis;
1581
- color:var(--tds-select-placeholder-color);
1506
+ font-size:var(--t-font-size-sm);
1507
+ line-height:18px;
1508
+ color:var(--t-text-color-headline);
1582
1509
  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;
1510
+ text-decoration:none;
1511
+ -webkit-appearance:none;
1512
+ -moz-appearance:none;
1513
+ appearance:none;
1514
+ cursor:pointer;
1515
+ background-color:var(--tds-sidenav-item-background, transparent);
1516
+ border:0;
1517
+ border-radius:var(--t-border-radius);
1518
+ transition:var(--tds-sidenav-item-transition);
1586
1519
  }
1587
1520
 
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);
1521
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1522
+ display:block;
1523
+ flex:1;
1524
+ overflow:hidden;
1525
+ text-overflow:ellipsis;
1526
+ text-align:left;
1527
+ white-space:nowrap;
1599
1528
  }
1600
1529
 
1601
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1602
- color:var(--tds-select-color);
1603
- }
1604
-
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);
1633
- }
1530
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1531
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1532
+ color:var(--t-text-color-headline);
1533
+ text-decoration:none;
1534
+ }
1634
1535
 
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);
1536
+ :is(.tds-sidenav-item :is(a,button)):active{
1537
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1639
1538
  }
1640
1539
 
1641
- :is(.tds-select:has( > button) [popover]) ul{
1642
- padding:0;
1643
- margin:0;
1644
- list-style:none;
1540
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1541
+ overflow:hidden;
1542
+ color:var(--tds-sidenav-item-icon-color);
1645
1543
  }
1646
1544
 
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);
1545
+ :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{
1546
+ display:block;
1547
+ width:var(--tds-sidenav-item-icon-size);
1548
+ height:var(--tds-sidenav-item-icon-size);
1651
1549
  }
1550
+
1551
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1552
+ --tds-sidenav-indent:19px;
1652
1553
  }
1653
1554
 
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;
1555
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1556
+ visibility:visible;
1557
+ block-size:auto;
1558
+ opacity:1;
1559
+ }
1560
+
1561
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1562
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1563
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1564
+
1565
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1566
+ font-weight:var(--t-font-weight-semibold);
1658
1567
  }
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;
1665
- }
1568
+
1569
+ .tds-sidenav-item:has(.tds-sidenav-section){
1570
+ display:flex;
1571
+ flex-direction:column;
1572
+ gap:var(--t-spacing-half);
1573
+ }
1574
+
1575
+ .tds-sidenav-item .tds-sidenav-section-list{
1576
+ --tds-sidenav-item-depth:1;
1577
+ gap:0;
1578
+ }
1579
+
1580
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1581
+ visibility:hidden;
1582
+ block-size:0;
1583
+ overflow-y:clip;
1584
+ opacity:0;
1585
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
1666
1586
  }
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);
1587
+
1588
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1589
+ --tds-sidenav-item-depth:2;
1674
1590
  }
1675
1591
 
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);
1592
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1593
+ min-height:var(--t-element-size-2xl);
1594
+ padding-block:9px;
1595
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1596
+ line-height:1;
1597
+ background-color:transparent;
1680
1598
  }
1681
1599
 
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);
1600
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1601
+ position:absolute;
1602
+ top:0;
1603
+ bottom:0;
1604
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1605
+ width:2px;
1606
+ content:"";
1607
+ background-color:var(--tds-sidenav-item-nested-border-color);
1608
+ transition:var(--tds-sidenav-item-transition);
1609
+ }
1610
+
1611
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1612
+ position:absolute;
1613
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1614
+ z-index:-1;
1615
+ height:100%;
1616
+ content:"";
1617
+ background-color:var(--tds-sidenav-item-nested-background);
1618
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1619
+ transition:var(--tds-sidenav-item-transition);
1620
+ }
1621
+
1622
+ :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)){
1623
+ display:block;
1624
+ text-align:left;
1625
+ white-space:normal;
1626
+ }
1627
+
1628
+ :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{
1629
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1630
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1631
+ }
1632
+
1633
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1634
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1635
+ }
1636
+
1637
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1638
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1639
+ font-weight:var(--t-font-weight-medium);
1640
+ }
1641
+
1642
+ .tds-sidenav-responsive-header{
1643
+ display:flex;
1644
+ gap:var(--t-spacing-2);
1645
+ align-items:center;
1646
+ width:100%;
1647
+ }
1648
+
1649
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1650
+ order:0;
1651
+ }
1652
+
1653
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1654
+ flex:1;
1655
+ order:1;
1656
+ margin:0;
1657
+ font-size:var(--t-font-size-lg);
1658
+ font-weight:var(--t-font-weight-medium);
1659
+ color:var(--t-text-color-headline);
1660
+ }
1661
+
1662
+ @media (max-width: 719px){
1663
+ .tds-sidenav-collapse{
1664
+ z-index:10001;
1665
+ display:none;
1666
+ max-width:min(448px, calc(100vw - 48px));
1667
+ padding:0;
1668
+ margin:12px 0;
1669
+ position-area:bottom span-right;
1670
+ overflow:hidden;
1671
+ outline:0;
1672
+ background:var(--t-surface-color-card);
1673
+ border:0;
1674
+ border-radius:6px;
1675
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1676
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1677
+ transform:var(--tds-sidenav-collapse-open-transform);
1678
+ transition:var(--tds-sidenav-collapse-transition-enter);
1679
+ will-change:transform;
1680
+ }
1681
+
1682
+ .tds-sidenav-scroll-container{
1683
+ --webkit-overflow-scrolling:touch;
1684
+ display:block;
1685
+ width:100%;
1686
+ height:-moz-fit-content;
1687
+ height:fit-content;
1688
+ padding:var(--t-spacing-2);
1689
+ overflow-y:auto;
1690
+ }
1691
+
1692
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1693
+ display:none;
1694
+ }
1695
+ @supports selector(:popover-open){
1696
+ .tds-sidenav-collapse:popover-open{
1697
+ display:flex;
1686
1698
  }
1687
1699
 
1688
- :is(.tds-select select:has( > button)):open::picker-icon{
1689
- opacity:1;
1690
- transform:rotate(.5turn);
1700
+ .tds-sidenav-collapse:not(:popover-open){
1701
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1702
+ transition:var(--tds-sidenav-collapse-transition-exit);
1691
1703
  }
1692
1704
 
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;
1705
+ @starting-style{
1706
+ .tds-sidenav-collapse:popover-open{
1707
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1708
+ transform:var(--tds-sidenav-collapse-closed-transform);
1709
+ }
1698
1710
  }
1699
-
1700
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1701
- color:var(--tds-select-placeholder-color);
1711
+ }
1712
+ @supports not selector(:popover-open){
1713
+ .tds-sidenav-collapse.\:popover-open{
1714
+ display:flex;
1702
1715
  }
1703
1716
 
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);
1717
+ .tds-sidenav-collapse:not(.\:popover-open){
1718
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1719
+ transition:var(--tds-sidenav-collapse-transition-exit);
1729
1720
  }
1721
+ }
1722
+ }
1730
1723
 
1731
- :is(.tds-select select:has( > button)) option::checkmark{
1724
+ @media (min-width: 720px){
1725
+ .tds-sidenav-responsive-header{
1726
+ display:none;
1727
+ }
1728
+ }
1729
+
1730
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1732
1731
  display:none;
1733
1732
  }
1734
1733
 
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
- }
1734
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1735
+ display:block;
1736
+ }
1737
+
1738
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1739
+ display:flex;
1740
+ flex-direction:column;
1740
1741
  }
1741
- }
1742
1742
 
1743
1743
  .tds-input{
1744
1744
  --tds-input-border-color:var(--t-form-border-color);
@@ -3323,97 +3323,19 @@ 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
- .tds-combo-box{
3405
- --tds-combo-box-border-color:var(--t-form-border-color);
3406
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3407
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3408
- --tds-combo-box-background-color:var(--t-form-background-color);
3409
- --tds-combo-box-color:var(--t-form-color);
3410
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3411
- --tds-combo-box-font-size:var(--t-font-size-md);
3412
- --tds-combo-box-min-height:var(--t-container-size-md);
3413
- --tds-combo-box-padding-block:6px;
3414
- --tds-combo-box-button-offset:4px;
3415
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3416
- --tds-combo-box-description-invalid-icon-display:none;
3326
+ .tds-date-picker{
3327
+ --tds-date-picker-border-color:var(--t-form-border-color);
3328
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3329
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3330
+ --tds-date-picker-background-color:var(--t-form-background-color);
3331
+ --tds-date-picker-color:var(--t-form-color);
3332
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3333
+ --tds-date-picker-font-size:var(--t-font-size-md);
3334
+ --tds-date-picker-min-height:var(--t-container-size-md);
3335
+ --tds-date-picker-padding-block:6px;
3336
+ --tds-date-picker-button-offset:4px;
3337
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3338
+ --tds-date-picker-description-invalid-icon-display:none;
3417
3339
 
3418
3340
  position:relative;
3419
3341
  display:flex;
@@ -3421,181 +3343,170 @@ a[class="tds-btn"]{
3421
3343
  gap:var(--t-spacing-half);
3422
3344
  }
3423
3345
 
3424
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3346
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3425
3347
  margin-left:.25ch;
3426
3348
  color:var(--t-text-color-status-error);
3427
3349
  content:"*";
3428
3350
  }
3429
3351
 
3430
- .tds-combo-box[data-invalid]{
3431
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3432
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3433
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3434
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3435
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3436
- --tds-combo-box-description-invalid-icon-display:inline-block;
3352
+ .tds-date-picker[data-invalid]{
3353
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3354
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3355
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3356
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3357
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3358
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3437
3359
  }
3438
3360
 
3439
- .tds-combo-box[data-disabled]{
3440
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3441
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3442
- --tds-combo-box-color:var(--t-form-color-disabled);
3361
+ .tds-date-picker[data-disabled]{
3362
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3363
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3364
+ --tds-date-picker-color:var(--t-form-color-disabled);
3365
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3443
3366
  }
3444
3367
 
3445
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3446
- color:var(--t-form-color-disabled);
3447
- }
3448
-
3449
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3368
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3450
3369
  cursor:not-allowed;
3451
3370
  }
3452
3371
 
3453
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3454
- transform:rotate(.5turn);
3455
- }
3456
-
3457
- .tds-combo-box--lg{
3458
- --tds-combo-box-min-height:var(--t-container-size-lg);
3459
- --tds-combo-box-font-size:var(--t-font-size-lg);
3460
- --tds-combo-box-button-offset:5px;
3372
+ .tds-date-picker--lg{
3373
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3374
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3375
+ --tds-date-picker-button-offset:5px;
3461
3376
  }
3462
3377
 
3463
- .tds-combo-box-label{
3378
+ .tds-date-picker-label{
3464
3379
  font-size:var(--t-font-size-md);
3465
3380
  font-weight:var(--t-font-weight-normal);
3466
3381
  color:var(--t-text-color);
3467
3382
  cursor:default;
3468
3383
  }
3469
3384
 
3470
- .tds-combo-box-field{
3385
+ .tds-date-picker-field{
3471
3386
  display:flex;
3472
3387
  align-items:center;
3473
3388
  inline-size:100%;
3474
- min-block-size:var(--tds-combo-box-min-height);
3389
+ min-block-size:var(--tds-date-picker-min-height);
3475
3390
  font-family:inherit;
3476
- font-size:var(--tds-combo-box-font-size);
3391
+ font-size:var(--tds-date-picker-font-size);
3477
3392
  line-height:1;
3478
- color:var(--tds-combo-box-color);
3393
+ color:var(--tds-date-picker-color);
3479
3394
  -webkit-appearance:none;
3480
3395
  -moz-appearance:none;
3481
3396
  appearance:none;
3482
- cursor:default;
3397
+ cursor:text;
3483
3398
  outline:var(--t-focus-ring-width) solid transparent;
3484
3399
  outline-offset:0;
3485
- background-color:var(--tds-combo-box-background-color);
3486
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3400
+ background-color:var(--tds-date-picker-background-color);
3401
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3487
3402
  border-radius:var(--t-form-border-radius);
3488
3403
  }
3489
3404
 
3490
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3491
- border-color:var(--tds-combo-box-border-color-hover);
3405
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3406
+ border-color:var(--tds-date-picker-border-color-hover);
3492
3407
  }
3493
3408
 
3494
- .tds-combo-box-field[data-focus-within]{
3409
+ .tds-date-picker-field[data-focus-within]{
3495
3410
  outline-color:var(--t-focus-ring-color);
3496
3411
  outline-offset:var(--t-focus-ring-offset);
3497
- border-color:var(--tds-combo-box-border-color-active);
3412
+ border-color:var(--tds-date-picker-border-color-active);
3498
3413
  }
3499
3414
 
3500
- .tds-combo-box-field:has([readonly]){
3501
- --tds-input-border-color:var(--t-form-border-color-readonly);
3502
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3415
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3416
+ color:var(--t-form-color-readonly);
3417
+ background-color:var(--t-form-background-color-readonly);
3418
+ border-color:var(--t-form-border-color-readonly);
3503
3419
  }
3504
3420
 
3505
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3421
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3422
+ border-color:var(--t-form-border-color-readonly);
3423
+ }
3424
+
3425
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3426
+ outline-color:var(--t-focus-ring-color);
3427
+ outline-offset:var(--t-focus-ring-offset);
3506
3428
  border-color:var(--t-form-border-color-hover);
3507
3429
  }
3508
3430
 
3509
- .tds-combo-box-input{
3510
- display:flex;
3431
+ .tds-date-picker-input{
3511
3432
  flex:1;
3512
- align-items:center;
3513
- padding-block:var(--tds-combo-box-padding-block);
3433
+ padding-block:var(--tds-date-picker-padding-block);
3514
3434
  padding-inline-start:var(--t-spacing-1);
3515
- font-family:inherit;
3516
- font-size:inherit;
3517
- color:inherit;
3518
- outline:0;
3519
- background:transparent;
3520
- border:0;
3435
+ font-variant-numeric:tabular-nums;
3521
3436
  }
3522
3437
 
3523
- .tds-combo-box-input::-moz-placeholder{
3524
- color:var(--tds-combo-box-placeholder-color);
3525
- -moz-user-select:none;
3526
- user-select:none;
3438
+ .tds-date-picker-segment{
3439
+ padding-inline:2px;
3440
+ caret-color:transparent;
3441
+ border-radius:var(--t-border-radius-sm);
3442
+ }
3443
+
3444
+ .tds-date-picker-segment[data-placeholder]{
3445
+ color:var(--tds-date-picker-placeholder-color);
3527
3446
  }
3528
3447
 
3529
- .tds-combo-box-input::placeholder{
3530
- color:var(--tds-combo-box-placeholder-color);
3531
- -webkit-user-select:none;
3532
- -moz-user-select:none;
3533
- user-select:none;
3448
+ .tds-date-picker-segment[data-focused]{
3449
+ color:var(--t-text-color-inverted);
3450
+ outline:0;
3451
+ background:var(--t-fill-color-interaction);
3534
3452
  }
3535
3453
 
3536
- .tds-combo-box-button{
3537
- flex-shrink:0;
3538
- align-self:center;
3539
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3540
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3541
- padding:0;
3542
- margin-inline-end:var(--tds-combo-box-button-offset);
3454
+ .tds-date-picker-segment-separator{
3455
+ padding-inline:0;
3456
+ color:var(--tds-date-picker-placeholder-color);
3543
3457
  }
3544
3458
 
3545
- .tds-combo-box-button > svg{
3546
- inline-size:var(--tds-combo-box-font-size);
3547
- block-size:var(--tds-combo-box-font-size);
3548
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3549
- }
3459
+ .tds-date-picker-description{
3460
+ display:flex;
3461
+ gap:var(--t-spacing-half);
3462
+ align-items:flex-start;
3463
+ margin:0;
3464
+ font-size:var(--t-font-size-sm);
3465
+ line-height:1.35;
3466
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3467
+ cursor:text;
3468
+ }
3550
3469
 
3551
- .tds-combo-box-button:not(.tds-btn){
3552
- display:inline-flex;
3553
- align-items:center;
3554
- justify-content:center;
3555
- inline-size:auto;
3556
- block-size:auto;
3557
- margin-inline-end:.75em;
3558
- color:var(--t-icon-color);
3559
- cursor:default;
3560
- background:transparent;
3561
- border:0;
3470
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3471
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3472
+ flex-shrink:0;
3473
+ margin-block-start:calc(.5lh - .5em);
3474
+ line-height:1.35;
3562
3475
  }
3563
3476
 
3564
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3565
- outline:0;
3566
- }
3477
+ .tds-date-picker-button{
3478
+ flex-shrink:0;
3479
+ align-self:center;
3480
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3481
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3482
+ padding:0;
3483
+ margin-inline-end:var(--tds-date-picker-button-offset);
3484
+ }
3567
3485
 
3568
- .tds-combo-box-popover{
3569
- width:var(--trigger-width);
3570
- max-block-size:inherit;
3571
- padding:var(--t-spacing-1);
3572
- overflow:auto;
3573
- outline:0;
3574
- scrollbar-color:#0004 #0000;
3575
- scrollbar-width:thin;
3486
+ .tds-date-picker-popover{
3487
+ padding:var(--t-spacing-2);
3576
3488
  background:var(--t-surface-color-card);
3577
- background-clip:padding-box;
3578
3489
  border:1px solid var(--t-border-color);
3579
3490
  border-radius:var(--t-border-radius);
3580
3491
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3581
3492
  }
3582
3493
 
3583
- .tds-combo-box-popover[data-entering]{
3584
- animation:tds-combo-box-popover-enter 160ms ease;
3494
+ .tds-date-picker-popover[data-entering]{
3495
+ animation:tds-date-picker-popover-enter 160ms ease;
3585
3496
  }
3586
3497
 
3587
- .tds-combo-box-popover[data-exiting]{
3588
- animation:tds-combo-box-popover-exit 130ms ease;
3498
+ .tds-date-picker-popover[data-exiting]{
3499
+ animation:tds-date-picker-popover-exit 130ms ease;
3589
3500
  }
3590
3501
 
3591
- @keyframes tds-combo-box-popover-enter{
3502
+ @keyframes tds-date-picker-popover-enter{
3592
3503
  from{
3593
3504
  opacity:0;
3594
3505
  transform:translateY(-8px);
3595
3506
  }
3596
3507
  }
3597
3508
 
3598
- @keyframes tds-combo-box-popover-exit{
3509
+ @keyframes tds-date-picker-popover-exit{
3599
3510
  to{
3600
3511
  opacity:0;
3601
3512
  transform:translateY(-8px);
@@ -3603,98 +3514,133 @@ a[class="tds-btn"]{
3603
3514
  }
3604
3515
 
3605
3516
  @media (prefers-reduced-motion: reduce){
3606
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3517
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3607
3518
  animation:none;
3608
3519
  }
3520
+ }
3609
3521
 
3610
- .tds-combo-box-button > svg{
3611
- transition:none;
3612
- }
3522
+ .tds-date-picker-calendar{
3523
+ inline-size:-moz-fit-content;
3524
+ inline-size:fit-content;
3613
3525
  }
3614
3526
 
3615
- .tds-combo-box-list{
3616
- padding:0;
3527
+ .tds-date-picker-calendar-header{
3528
+ display:flex;
3529
+ align-items:center;
3530
+ justify-content:space-between;
3531
+ padding-block-end:var(--t-spacing-1);
3532
+ }
3533
+
3534
+ .tds-date-picker-calendar-title{
3535
+ flex:1;
3617
3536
  margin:0;
3537
+ font-size:var(--t-font-size-md);
3538
+ font-weight:var(--t-font-weight-semibold);
3539
+ text-align:center;
3618
3540
  }
3619
3541
 
3620
- .tds-combo-box-list-item{
3621
- display:block;
3622
- padding-block:var(--t-spacing-1);
3623
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3624
- overflow:hidden;
3625
- text-overflow:ellipsis;
3626
- font-size:1rem;
3542
+ .tds-date-picker-calendar-nav{
3543
+ display:flex;
3544
+ align-items:center;
3545
+ justify-content:center;
3546
+ padding:var(--t-spacing-half);
3627
3547
  color:var(--t-text-color);
3628
- white-space:nowrap;
3629
3548
  cursor:default;
3630
- outline-offset:-1px;
3631
- border-radius:var(--t-border-radius);
3549
+ outline:0;
3550
+ background:transparent;
3551
+ border:0;
3552
+ border-radius:var(--t-border-radius-sm);
3632
3553
  }
3633
3554
 
3634
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3555
+ .tds-date-picker-calendar-nav[data-hovered]{
3635
3556
  background:var(--t-fill-color-neutral-070);
3636
3557
  }
3637
3558
 
3638
- .tds-combo-box-list-item[data-selected]{
3559
+ .tds-date-picker-calendar-nav[data-pressed]{
3639
3560
  background:var(--t-fill-color-button-interaction-ghost-active);
3640
3561
  }
3641
3562
 
3642
- .tds-combo-box-list-item[data-focus-visible]{
3643
- outline:var(--t-focus-ring-outline);
3644
- outline-offset:-1px;
3563
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3564
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3565
+ outline-offset:var(--t-focus-ring-offset);
3645
3566
  }
3646
3567
 
3647
- .tds-combo-box-list-item[data-disabled]{
3568
+ .tds-date-picker-calendar-nav[data-disabled]{
3648
3569
  color:var(--t-form-color-disabled);
3649
3570
  cursor:not-allowed;
3650
3571
  }
3651
3572
 
3652
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3653
- background:transparent;
3654
- }
3655
-
3656
- .tds-combo-box-list-section:not(:first-child){
3657
- margin-block-start:var(--t-spacing-half);
3658
- }
3573
+ .tds-date-picker-calendar-grid{
3574
+ border-collapse:collapse;
3575
+ }
3659
3576
 
3660
- .tds-combo-box-section-header{
3661
- padding-block:var(--t-spacing-1);
3662
- padding-inline:var(--t-spacing-1);
3577
+ .tds-date-picker-calendar-header-cell{
3578
+ padding-block:var(--t-spacing-half);
3663
3579
  font-size:var(--t-font-size-sm);
3664
- font-weight:var(--t-font-weight-semibold);
3580
+ font-weight:var(--t-font-weight-normal);
3665
3581
  color:var(--t-text-color-secondary);
3582
+ text-align:center;
3666
3583
  }
3667
3584
 
3668
- .tds-combo-box-description{
3585
+ .tds-date-picker-calendar-cell{
3669
3586
  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;
3587
+ align-items:center;
3588
+ justify-content:center;
3589
+ inline-size:2.25rem;
3590
+ block-size:2.25rem;
3591
+ font-size:var(--t-font-size-md);
3592
+ color:var(--t-text-color);
3593
+ cursor:default;
3594
+ outline:0;
3595
+ border-radius:var(--t-border-radius-sm);
3677
3596
  }
3678
3597
 
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
- }
3598
+ .tds-date-picker-calendar-cell[data-hovered]{
3599
+ background:var(--t-fill-color-neutral-070);
3600
+ }
3685
3601
 
3686
- .tds-time-field{
3687
- --tds-time-field-border-color:var(--t-form-border-color);
3688
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3689
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3690
- --tds-time-field-background-color:var(--t-form-background-color);
3691
- --tds-time-field-color:var(--t-form-color);
3692
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3693
- --tds-time-field-font-size:var(--t-font-size-md);
3694
- --tds-time-field-min-height:var(--t-container-size-md);
3695
- --tds-time-field-padding-block:6px;
3696
- --tds-time-field-description-color:var(--t-text-color-secondary);
3697
- --tds-time-field-description-invalid-icon-display:none;
3602
+ .tds-date-picker-calendar-cell[data-pressed]{
3603
+ background:var(--t-fill-color-button-interaction-ghost-active);
3604
+ }
3605
+
3606
+ .tds-date-picker-calendar-cell[data-selected]{
3607
+ color:var(--t-text-color-inverted);
3608
+ background:var(--t-fill-color-interaction);
3609
+ }
3610
+
3611
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3612
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3613
+ outline-offset:var(--t-focus-ring-offset);
3614
+ }
3615
+
3616
+ .tds-date-picker-calendar-cell[data-unavailable]{
3617
+ color:var(--t-text-color-secondary);
3618
+ text-decoration:line-through;
3619
+ cursor:not-allowed;
3620
+ }
3621
+
3622
+ .tds-date-picker-calendar-cell[data-disabled]{
3623
+ color:var(--t-form-color-disabled);
3624
+ cursor:not-allowed;
3625
+ }
3626
+
3627
+ .tds-date-picker-calendar-cell[data-outside-month]{
3628
+ color:var(--t-text-color-secondary);
3629
+ }
3630
+
3631
+ .tds-combo-box{
3632
+ --tds-combo-box-border-color:var(--t-form-border-color);
3633
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3634
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3635
+ --tds-combo-box-background-color:var(--t-form-background-color);
3636
+ --tds-combo-box-color:var(--t-form-color);
3637
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3638
+ --tds-combo-box-font-size:var(--t-font-size-md);
3639
+ --tds-combo-box-min-height:var(--t-container-size-md);
3640
+ --tds-combo-box-padding-block:6px;
3641
+ --tds-combo-box-button-offset:4px;
3642
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3643
+ --tds-combo-box-description-invalid-icon-display:none;
3698
3644
 
3699
3645
  position:relative;
3700
3646
  display:flex;
@@ -3702,301 +3648,280 @@ a[class="tds-btn"]{
3702
3648
  gap:var(--t-spacing-half);
3703
3649
  }
3704
3650
 
3705
- .tds-time-field[data-required] .tds-time-field-label::after{
3651
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3706
3652
  margin-left:.25ch;
3707
3653
  color:var(--t-text-color-status-error);
3708
3654
  content:"*";
3709
3655
  }
3710
3656
 
3711
- .tds-time-field[data-invalid]{
3712
- --tds-time-field-border-color:var(--t-form-border-color-error);
3713
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3714
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3715
- --tds-time-field-background-color:var(--t-form-background-color-error);
3716
- --tds-time-field-description-color:var(--t-text-color-status-error);
3717
- --tds-time-field-description-invalid-icon-display:inline-block;
3657
+ .tds-combo-box[data-invalid]{
3658
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3659
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3660
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3661
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3662
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3663
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3718
3664
  }
3719
3665
 
3720
- .tds-time-field[data-disabled]{
3721
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3722
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3723
- --tds-time-field-color:var(--t-form-color-disabled);
3724
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3666
+ .tds-combo-box[data-disabled]{
3667
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3668
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3669
+ --tds-combo-box-color:var(--t-form-color-disabled);
3725
3670
  }
3726
3671
 
3727
- .tds-time-field[data-disabled] .tds-time-field-label{
3672
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3728
3673
  color:var(--t-form-color-disabled);
3729
3674
  }
3730
3675
 
3731
- .tds-time-field[data-disabled] .tds-time-field-input{
3676
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3732
3677
  cursor:not-allowed;
3733
3678
  }
3734
3679
 
3735
- .tds-time-field--lg{
3736
- --tds-time-field-min-height:var(--t-container-size-lg);
3737
- --tds-time-field-font-size:var(--t-font-size-lg);
3680
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3681
+ transform:rotate(.5turn);
3682
+ }
3683
+
3684
+ .tds-combo-box--lg{
3685
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3686
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3687
+ --tds-combo-box-button-offset:5px;
3738
3688
  }
3739
3689
 
3740
- .tds-time-field-label{
3690
+ .tds-combo-box-label{
3741
3691
  font-size:var(--t-font-size-md);
3742
3692
  font-weight:var(--t-font-weight-normal);
3743
3693
  color:var(--t-text-color);
3744
3694
  cursor:default;
3745
3695
  }
3746
3696
 
3747
- .tds-time-field-input{
3697
+ .tds-combo-box-field{
3748
3698
  display:flex;
3749
3699
  align-items:center;
3750
3700
  inline-size:100%;
3751
- min-block-size:var(--tds-time-field-min-height);
3752
- padding-block:var(--tds-time-field-padding-block);
3753
- padding-inline:var(--t-spacing-1);
3701
+ min-block-size:var(--tds-combo-box-min-height);
3754
3702
  font-family:inherit;
3755
- font-size:var(--tds-time-field-font-size);
3756
- font-variant-numeric:tabular-nums;
3703
+ font-size:var(--tds-combo-box-font-size);
3757
3704
  line-height:1;
3758
- color:var(--tds-time-field-color);
3759
- cursor:text;
3705
+ color:var(--tds-combo-box-color);
3706
+ -webkit-appearance:none;
3707
+ -moz-appearance:none;
3708
+ appearance:none;
3709
+ cursor:default;
3760
3710
  outline:var(--t-focus-ring-width) solid transparent;
3761
3711
  outline-offset:0;
3762
- background-color:var(--tds-time-field-background-color);
3763
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3712
+ background-color:var(--tds-combo-box-background-color);
3713
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3764
3714
  border-radius:var(--t-form-border-radius);
3765
3715
  }
3766
3716
 
3767
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3768
- border-color:var(--tds-time-field-border-color-hover);
3717
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3718
+ border-color:var(--tds-combo-box-border-color-hover);
3769
3719
  }
3770
3720
 
3771
- .tds-time-field-input[data-focus-within]{
3721
+ .tds-combo-box-field[data-focus-within]{
3772
3722
  outline-color:var(--t-focus-ring-color);
3773
3723
  outline-offset:var(--t-focus-ring-offset);
3774
- border-color:var(--tds-time-field-border-color-active);
3724
+ border-color:var(--tds-combo-box-border-color-active);
3775
3725
  }
3776
3726
 
3777
- .tds-time-field-input[data-readonly]{
3778
- color:var(--t-form-color-readonly);
3779
- background-color:var(--t-form-background-color-readonly);
3780
- border-color:var(--t-form-border-color-readonly);
3727
+ .tds-combo-box-field:has([readonly]){
3728
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3729
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3781
3730
  }
3782
3731
 
3783
- .tds-time-field-input[data-readonly][data-hovered]{
3784
- border-color:var(--t-form-border-color-readonly);
3785
- }
3786
-
3787
- .tds-time-field-input[data-readonly][data-focus-within]{
3788
- outline-color:var(--t-focus-ring-color);
3789
- outline-offset:var(--t-focus-ring-offset);
3732
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3790
3733
  border-color:var(--t-form-border-color-hover);
3791
3734
  }
3792
3735
 
3793
- .tds-time-field-segment{
3794
- padding-inline:1px;
3795
- font-variant-numeric:tabular-nums;
3796
- cursor:text;
3797
- caret-color:transparent;
3798
- border-radius:var(--t-border-radius-sm);
3736
+ .tds-combo-box-input{
3737
+ display:flex;
3738
+ flex:1;
3739
+ align-items:center;
3740
+ padding-block:var(--tds-combo-box-padding-block);
3741
+ padding-inline-start:var(--t-spacing-1);
3742
+ font-family:inherit;
3743
+ font-size:inherit;
3744
+ color:inherit;
3745
+ outline:0;
3746
+ background:transparent;
3747
+ border:0;
3799
3748
  }
3800
3749
 
3801
- .tds-time-field-segment[data-placeholder]{
3802
- color:var(--tds-time-field-placeholder-color);
3750
+ .tds-combo-box-input::-moz-placeholder{
3751
+ color:var(--tds-combo-box-placeholder-color);
3752
+ -moz-user-select:none;
3753
+ user-select:none;
3803
3754
  }
3804
3755
 
3805
- .tds-time-field-segment[data-focused]{
3806
- color:var(--t-text-color-inverted);
3807
- outline:0;
3808
- background:var(--t-fill-color-interaction);
3756
+ .tds-combo-box-input::placeholder{
3757
+ color:var(--tds-combo-box-placeholder-color);
3758
+ -webkit-user-select:none;
3759
+ -moz-user-select:none;
3760
+ user-select:none;
3809
3761
  }
3810
3762
 
3811
- .tds-time-field-segment-separator{
3812
- padding-inline:0;
3813
- color:var(--tds-time-field-placeholder-color);
3763
+ .tds-combo-box-button{
3764
+ flex-shrink:0;
3765
+ align-self:center;
3766
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3767
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3768
+ padding:0;
3769
+ margin-inline-end:var(--tds-combo-box-button-offset);
3814
3770
  }
3815
3771
 
3816
- .tds-time-field-description{
3817
- display:flex;
3818
- gap:var(--t-spacing-half);
3819
- align-items:flex-start;
3820
- margin:0;
3821
- font-size:var(--t-font-size-sm);
3822
- line-height:1.35;
3823
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3824
- cursor:text;
3825
- }
3772
+ .tds-combo-box-button > svg{
3773
+ inline-size:var(--tds-combo-box-font-size);
3774
+ block-size:var(--tds-combo-box-font-size);
3775
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3776
+ }
3826
3777
 
3827
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3828
- display:var(--tds-time-field-description-invalid-icon-display, none);
3829
- flex-shrink:0;
3830
- margin-block-start:calc(.5lh - .5em);
3831
- line-height:1.35;
3778
+ .tds-combo-box-button:not(.tds-btn){
3779
+ display:inline-flex;
3780
+ align-items:center;
3781
+ justify-content:center;
3782
+ inline-size:auto;
3783
+ block-size:auto;
3784
+ margin-inline-end:.75em;
3785
+ color:var(--t-icon-color);
3786
+ cursor:default;
3787
+ background:transparent;
3788
+ border:0;
3832
3789
  }
3833
3790
 
3834
- .tds-number-stepper{
3835
- --tds-number-stepper-border-color:var(--t-form-border-color);
3836
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3837
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3838
- --tds-number-stepper-background-color:var(--t-form-background-color);
3839
- --tds-number-stepper-color:var(--t-form-color);
3840
- --tds-number-stepper-font-size:var(--t-font-size-md);
3841
- --tds-number-stepper-min-height:var(--t-container-size-md);
3842
- --tds-number-stepper-padding-block:6px;
3843
- --tds-number-stepper-button-offset:4px;
3844
- --tds-number-stepper-button-gap:2px;
3845
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
3846
- --tds-number-stepper-description-invalid-icon-display:none;
3791
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3792
+ outline:0;
3793
+ }
3847
3794
 
3848
- position:relative;
3849
- display:flex;
3850
- flex-direction:column;
3851
- gap:var(--t-spacing-half);
3795
+ .tds-combo-box-popover{
3796
+ width:var(--trigger-width);
3797
+ max-block-size:inherit;
3798
+ padding:var(--t-spacing-1);
3799
+ overflow:auto;
3800
+ outline:0;
3801
+ scrollbar-color:#0004 #0000;
3802
+ scrollbar-width:thin;
3803
+ background:var(--t-surface-color-card);
3804
+ background-clip:padding-box;
3805
+ border:1px solid var(--t-border-color);
3806
+ border-radius:var(--t-border-radius);
3807
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3852
3808
  }
3853
3809
 
3854
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3855
- margin-left:.25ch;
3856
- color:var(--t-text-color-status-error);
3857
- content:"*";
3810
+ .tds-combo-box-popover[data-entering]{
3811
+ animation:tds-combo-box-popover-enter 160ms ease;
3858
3812
  }
3859
3813
 
3860
- .tds-number-stepper[data-invalid]{
3861
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
3862
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3863
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3864
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
3865
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
3866
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3814
+ .tds-combo-box-popover[data-exiting]{
3815
+ animation:tds-combo-box-popover-exit 130ms ease;
3867
3816
  }
3868
3817
 
3869
- .tds-number-stepper[data-disabled]{
3870
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3871
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3872
- --tds-number-stepper-color:var(--t-form-color-disabled);
3818
+ @keyframes tds-combo-box-popover-enter{
3819
+ from{
3820
+ opacity:0;
3821
+ transform:translateY(-8px);
3873
3822
  }
3823
+ }
3874
3824
 
3875
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3876
- color:var(--t-form-color-disabled);
3877
- }
3825
+ @keyframes tds-combo-box-popover-exit{
3826
+ to{
3827
+ opacity:0;
3828
+ transform:translateY(-8px);
3829
+ }
3830
+ }
3878
3831
 
3879
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3880
- cursor:not-allowed;
3832
+ @media (prefers-reduced-motion: reduce){
3833
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3834
+ animation:none;
3881
3835
  }
3882
3836
 
3883
- .tds-number-stepper--lg{
3884
- --tds-number-stepper-min-height:var(--t-container-size-lg);
3885
- --tds-number-stepper-font-size:var(--t-font-size-lg);
3886
- --tds-number-stepper-button-offset:5px;
3887
- --tds-number-stepper-button-gap:4px;
3837
+ .tds-combo-box-button > svg{
3838
+ transition:none;
3839
+ }
3888
3840
  }
3889
3841
 
3890
- .tds-number-stepper-label{
3891
- font-size:var(--t-font-size-md);
3892
- font-weight:var(--t-font-weight-normal);
3893
- color:var(--t-text-color);
3894
- cursor:default;
3842
+ .tds-combo-box-list{
3843
+ padding:0;
3844
+ margin:0;
3895
3845
  }
3896
3846
 
3897
- .tds-number-stepper-field{
3898
- display:flex;
3899
- gap:var(--tds-number-stepper-button-gap);
3900
- align-items:center;
3901
- inline-size:100%;
3902
- min-block-size:var(--tds-number-stepper-min-height);
3903
- font-family:inherit;
3904
- font-size:var(--tds-number-stepper-font-size);
3905
- line-height:1;
3906
- color:var(--tds-number-stepper-color);
3907
- -webkit-appearance:none;
3908
- -moz-appearance:none;
3909
- appearance:none;
3847
+ .tds-combo-box-list-item{
3848
+ display:block;
3849
+ padding-block:var(--t-spacing-1);
3850
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3851
+ overflow:hidden;
3852
+ text-overflow:ellipsis;
3853
+ font-size:1rem;
3854
+ color:var(--t-text-color);
3855
+ white-space:nowrap;
3910
3856
  cursor:default;
3911
- outline:var(--t-focus-ring-width) solid transparent;
3912
- outline-offset:0;
3913
- background-color:var(--tds-number-stepper-background-color);
3914
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3915
- border-radius:var(--t-form-border-radius);
3857
+ outline-offset:-1px;
3858
+ border-radius:var(--t-border-radius);
3916
3859
  }
3917
3860
 
3918
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3919
- border-color:var(--tds-number-stepper-border-color-hover);
3861
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3862
+ background:var(--t-fill-color-neutral-070);
3920
3863
  }
3921
3864
 
3922
- .tds-number-stepper-field[data-focus-within]{
3923
- outline-color:var(--t-focus-ring-color);
3924
- outline-offset:var(--t-focus-ring-offset);
3925
- border-color:var(--tds-number-stepper-border-color-active);
3865
+ .tds-combo-box-list-item[data-selected]{
3866
+ background:var(--t-fill-color-button-interaction-ghost-active);
3926
3867
  }
3927
3868
 
3928
- .tds-number-stepper-field:has([readonly]){
3929
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3869
+ .tds-combo-box-list-item[data-focus-visible]{
3870
+ outline:var(--t-focus-ring-outline);
3871
+ outline-offset:-1px;
3930
3872
  }
3931
3873
 
3932
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3933
- border-color:var(--t-form-border-color-hover);
3934
- }
3874
+ .tds-combo-box-list-item[data-disabled]{
3875
+ color:var(--t-form-color-disabled);
3876
+ cursor:not-allowed;
3877
+ }
3935
3878
 
3936
- .tds-number-stepper-input{
3937
- display:flex;
3938
- flex:1;
3939
- align-items:center;
3940
- min-inline-size:0;
3941
- padding-block:var(--tds-number-stepper-padding-block);
3942
- padding-inline:var(--t-spacing-1);
3943
- font-family:inherit;
3944
- font-size:inherit;
3945
- color:inherit;
3946
- outline:0;
3947
- background:transparent;
3948
- border:0;
3949
- }
3879
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3880
+ background:transparent;
3881
+ }
3950
3882
 
3951
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3952
- margin:0;
3953
- -webkit-appearance:none;
3954
- appearance:none;
3883
+ .tds-combo-box-list-section:not(:first-child){
3884
+ margin-block-start:var(--t-spacing-half);
3955
3885
  }
3956
3886
 
3957
- .tds-number-stepper-button{
3958
- flex-shrink:0;
3959
- align-self:center;
3960
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3961
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3962
- padding:0;
3887
+ .tds-combo-box-section-header{
3888
+ padding-block:var(--t-spacing-1);
3889
+ padding-inline:var(--t-spacing-1);
3890
+ font-size:var(--t-font-size-sm);
3891
+ font-weight:var(--t-font-weight-semibold);
3892
+ color:var(--t-text-color-secondary);
3963
3893
  }
3964
3894
 
3965
- .tds-number-stepper-button:last-of-type{
3966
- margin-inline-end:var(--tds-number-stepper-button-offset);
3967
- }
3968
-
3969
- .tds-number-stepper-description{
3895
+ .tds-combo-box-description{
3970
3896
  display:flex;
3971
3897
  gap:var(--t-spacing-half);
3972
3898
  align-items:flex-start;
3973
3899
  margin:0;
3974
3900
  font-size:var(--t-font-size-sm);
3975
3901
  line-height:1.35;
3976
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3902
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3977
3903
  cursor:text;
3978
3904
  }
3979
3905
 
3980
- .tds-number-stepper-description-invalid-icon{
3981
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3906
+ .tds-combo-box-description-invalid-icon{
3907
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3982
3908
  flex-shrink:0;
3983
3909
  margin-block-start:calc(.5lh - .5em);
3984
3910
  line-height:1.35;
3985
3911
  }
3986
3912
 
3987
- .tds-date-picker{
3988
- --tds-date-picker-border-color:var(--t-form-border-color);
3989
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3990
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3991
- --tds-date-picker-background-color:var(--t-form-background-color);
3992
- --tds-date-picker-color:var(--t-form-color);
3993
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3994
- --tds-date-picker-font-size:var(--t-font-size-md);
3995
- --tds-date-picker-min-height:var(--t-container-size-md);
3996
- --tds-date-picker-padding-block:6px;
3997
- --tds-date-picker-button-offset:4px;
3998
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3999
- --tds-date-picker-description-invalid-icon-display:none;
3913
+ .tds-time-field{
3914
+ --tds-time-field-border-color:var(--t-form-border-color);
3915
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3916
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3917
+ --tds-time-field-background-color:var(--t-form-background-color);
3918
+ --tds-time-field-color:var(--t-form-color);
3919
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3920
+ --tds-time-field-font-size:var(--t-font-size-md);
3921
+ --tds-time-field-min-height:var(--t-container-size-md);
3922
+ --tds-time-field-padding-block:6px;
3923
+ --tds-time-field-description-color:var(--t-text-color-secondary);
3924
+ --tds-time-field-description-invalid-icon-display:none;
4000
3925
 
4001
3926
  position:relative;
4002
3927
  display:flex;
@@ -4004,291 +3929,366 @@ a[class="tds-btn"]{
4004
3929
  gap:var(--t-spacing-half);
4005
3930
  }
4006
3931
 
4007
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3932
+ .tds-time-field[data-required] .tds-time-field-label::after{
4008
3933
  margin-left:.25ch;
4009
3934
  color:var(--t-text-color-status-error);
4010
3935
  content:"*";
4011
3936
  }
4012
3937
 
4013
- .tds-date-picker[data-invalid]{
4014
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4015
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4016
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4017
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4018
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4019
- --tds-date-picker-description-invalid-icon-display:inline-block;
3938
+ .tds-time-field[data-invalid]{
3939
+ --tds-time-field-border-color:var(--t-form-border-color-error);
3940
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3941
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3942
+ --tds-time-field-background-color:var(--t-form-background-color-error);
3943
+ --tds-time-field-description-color:var(--t-text-color-status-error);
3944
+ --tds-time-field-description-invalid-icon-display:inline-block;
4020
3945
  }
4021
3946
 
4022
- .tds-date-picker[data-disabled]{
4023
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4024
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4025
- --tds-date-picker-color:var(--t-form-color-disabled);
4026
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3947
+ .tds-time-field[data-disabled]{
3948
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
3949
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
3950
+ --tds-time-field-color:var(--t-form-color-disabled);
3951
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4027
3952
  }
4028
3953
 
4029
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3954
+ .tds-time-field[data-disabled] .tds-time-field-label{
3955
+ color:var(--t-form-color-disabled);
3956
+ }
3957
+
3958
+ .tds-time-field[data-disabled] .tds-time-field-input{
4030
3959
  cursor:not-allowed;
4031
3960
  }
4032
3961
 
4033
- .tds-date-picker--lg{
4034
- --tds-date-picker-min-height:var(--t-container-size-lg);
4035
- --tds-date-picker-font-size:var(--t-font-size-lg);
4036
- --tds-date-picker-button-offset:5px;
3962
+ .tds-time-field--lg{
3963
+ --tds-time-field-min-height:var(--t-container-size-lg);
3964
+ --tds-time-field-font-size:var(--t-font-size-lg);
4037
3965
  }
4038
3966
 
4039
- .tds-date-picker-label{
3967
+ .tds-time-field-label{
4040
3968
  font-size:var(--t-font-size-md);
4041
3969
  font-weight:var(--t-font-weight-normal);
4042
3970
  color:var(--t-text-color);
4043
3971
  cursor:default;
4044
3972
  }
4045
3973
 
4046
- .tds-date-picker-field{
3974
+ .tds-time-field-input{
4047
3975
  display:flex;
4048
3976
  align-items:center;
4049
3977
  inline-size:100%;
4050
- min-block-size:var(--tds-date-picker-min-height);
3978
+ min-block-size:var(--tds-time-field-min-height);
3979
+ padding-block:var(--tds-time-field-padding-block);
3980
+ padding-inline:var(--t-spacing-1);
4051
3981
  font-family:inherit;
4052
- font-size:var(--tds-date-picker-font-size);
3982
+ font-size:var(--tds-time-field-font-size);
3983
+ font-variant-numeric:tabular-nums;
4053
3984
  line-height:1;
4054
- color:var(--tds-date-picker-color);
4055
- -webkit-appearance:none;
4056
- -moz-appearance:none;
4057
- appearance:none;
3985
+ color:var(--tds-time-field-color);
4058
3986
  cursor:text;
4059
3987
  outline:var(--t-focus-ring-width) solid transparent;
4060
3988
  outline-offset:0;
4061
- background-color:var(--tds-date-picker-background-color);
4062
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3989
+ background-color:var(--tds-time-field-background-color);
3990
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4063
3991
  border-radius:var(--t-form-border-radius);
4064
3992
  }
4065
3993
 
4066
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4067
- border-color:var(--tds-date-picker-border-color-hover);
3994
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3995
+ border-color:var(--tds-time-field-border-color-hover);
4068
3996
  }
4069
3997
 
4070
- .tds-date-picker-field[data-focus-within]{
3998
+ .tds-time-field-input[data-focus-within]{
4071
3999
  outline-color:var(--t-focus-ring-color);
4072
4000
  outline-offset:var(--t-focus-ring-offset);
4073
- border-color:var(--tds-date-picker-border-color-active);
4001
+ border-color:var(--tds-time-field-border-color-active);
4074
4002
  }
4075
4003
 
4076
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4004
+ .tds-time-field-input[data-readonly]{
4077
4005
  color:var(--t-form-color-readonly);
4078
4006
  background-color:var(--t-form-background-color-readonly);
4079
4007
  border-color:var(--t-form-border-color-readonly);
4080
4008
  }
4081
4009
 
4082
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4010
+ .tds-time-field-input[data-readonly][data-hovered]{
4083
4011
  border-color:var(--t-form-border-color-readonly);
4084
4012
  }
4085
4013
 
4086
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4014
+ .tds-time-field-input[data-readonly][data-focus-within]{
4087
4015
  outline-color:var(--t-focus-ring-color);
4088
4016
  outline-offset:var(--t-focus-ring-offset);
4089
4017
  border-color:var(--t-form-border-color-hover);
4090
4018
  }
4091
4019
 
4092
- .tds-date-picker-input{
4093
- flex:1;
4094
- padding-block:var(--tds-date-picker-padding-block);
4095
- padding-inline-start:var(--t-spacing-1);
4020
+ .tds-time-field-segment{
4021
+ padding-inline:1px;
4096
4022
  font-variant-numeric:tabular-nums;
4097
- }
4098
-
4099
- .tds-date-picker-segment{
4100
- padding-inline:2px;
4023
+ cursor:text;
4101
4024
  caret-color:transparent;
4102
4025
  border-radius:var(--t-border-radius-sm);
4103
4026
  }
4104
4027
 
4105
- .tds-date-picker-segment[data-placeholder]{
4106
- color:var(--tds-date-picker-placeholder-color);
4028
+ .tds-time-field-segment[data-placeholder]{
4029
+ color:var(--tds-time-field-placeholder-color);
4107
4030
  }
4108
4031
 
4109
- .tds-date-picker-segment[data-focused]{
4032
+ .tds-time-field-segment[data-focused]{
4110
4033
  color:var(--t-text-color-inverted);
4111
4034
  outline:0;
4112
4035
  background:var(--t-fill-color-interaction);
4113
4036
  }
4114
4037
 
4115
- .tds-date-picker-segment-separator{
4038
+ .tds-time-field-segment-separator{
4116
4039
  padding-inline:0;
4117
- color:var(--tds-date-picker-placeholder-color);
4040
+ color:var(--tds-time-field-placeholder-color);
4118
4041
  }
4119
4042
 
4120
- .tds-date-picker-description{
4043
+ .tds-time-field-description{
4121
4044
  display:flex;
4122
4045
  gap:var(--t-spacing-half);
4123
4046
  align-items:flex-start;
4124
4047
  margin:0;
4125
4048
  font-size:var(--t-font-size-sm);
4126
4049
  line-height:1.35;
4127
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4050
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4128
4051
  cursor:text;
4129
4052
  }
4130
4053
 
4131
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4132
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4054
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4055
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4133
4056
  flex-shrink:0;
4134
4057
  margin-block-start:calc(.5lh - .5em);
4135
4058
  line-height:1.35;
4136
4059
  }
4137
4060
 
4138
- .tds-date-picker-button{
4139
- flex-shrink:0;
4140
- align-self:center;
4141
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4142
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4143
- padding:0;
4144
- margin-inline-end:var(--tds-date-picker-button-offset);
4145
- }
4061
+ .tds-number-stepper{
4062
+ --tds-number-stepper-border-color:var(--t-form-border-color);
4063
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4064
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4065
+ --tds-number-stepper-background-color:var(--t-form-background-color);
4066
+ --tds-number-stepper-color:var(--t-form-color);
4067
+ --tds-number-stepper-font-size:var(--t-font-size-md);
4068
+ --tds-number-stepper-min-height:var(--t-container-size-md);
4069
+ --tds-number-stepper-padding-block:6px;
4070
+ --tds-number-stepper-button-offset:4px;
4071
+ --tds-number-stepper-button-gap:2px;
4072
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
4073
+ --tds-number-stepper-description-invalid-icon-display:none;
4146
4074
 
4147
- .tds-date-picker-popover{
4148
- padding:var(--t-spacing-2);
4149
- background:var(--t-surface-color-card);
4150
- border:1px solid var(--t-border-color);
4151
- border-radius:var(--t-border-radius);
4152
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4075
+ position:relative;
4076
+ display:flex;
4077
+ flex-direction:column;
4078
+ gap:var(--t-spacing-half);
4153
4079
  }
4154
4080
 
4155
- .tds-date-picker-popover[data-entering]{
4156
- animation:tds-date-picker-popover-enter 160ms ease;
4081
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4082
+ margin-left:.25ch;
4083
+ color:var(--t-text-color-status-error);
4084
+ content:"*";
4157
4085
  }
4158
4086
 
4159
- .tds-date-picker-popover[data-exiting]{
4160
- animation:tds-date-picker-popover-exit 130ms ease;
4087
+ .tds-number-stepper[data-invalid]{
4088
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
4089
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4090
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4091
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
4092
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
4093
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
4161
4094
  }
4162
4095
 
4163
- @keyframes tds-date-picker-popover-enter{
4164
- from{
4165
- opacity:0;
4166
- transform:translateY(-8px);
4096
+ .tds-number-stepper[data-disabled]{
4097
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4098
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4099
+ --tds-number-stepper-color:var(--t-form-color-disabled);
4167
4100
  }
4168
- }
4169
4101
 
4170
- @keyframes tds-date-picker-popover-exit{
4171
- to{
4172
- opacity:0;
4173
- transform:translateY(-8px);
4174
- }
4175
- }
4102
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4103
+ color:var(--t-form-color-disabled);
4104
+ }
4176
4105
 
4177
- @media (prefers-reduced-motion: reduce){
4178
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4179
- animation:none;
4106
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4107
+ cursor:not-allowed;
4180
4108
  }
4109
+
4110
+ .tds-number-stepper--lg{
4111
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
4112
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
4113
+ --tds-number-stepper-button-offset:5px;
4114
+ --tds-number-stepper-button-gap:4px;
4181
4115
  }
4182
4116
 
4183
- .tds-date-picker-calendar{
4184
- inline-size:-moz-fit-content;
4185
- inline-size:fit-content;
4117
+ .tds-number-stepper-label{
4118
+ font-size:var(--t-font-size-md);
4119
+ font-weight:var(--t-font-weight-normal);
4120
+ color:var(--t-text-color);
4121
+ cursor:default;
4186
4122
  }
4187
4123
 
4188
- .tds-date-picker-calendar-header{
4124
+ .tds-number-stepper-field{
4189
4125
  display:flex;
4126
+ gap:var(--tds-number-stepper-button-gap);
4190
4127
  align-items:center;
4191
- justify-content:space-between;
4192
- padding-block-end:var(--t-spacing-1);
4128
+ inline-size:100%;
4129
+ min-block-size:var(--tds-number-stepper-min-height);
4130
+ font-family:inherit;
4131
+ font-size:var(--tds-number-stepper-font-size);
4132
+ line-height:1;
4133
+ color:var(--tds-number-stepper-color);
4134
+ -webkit-appearance:none;
4135
+ -moz-appearance:none;
4136
+ appearance:none;
4137
+ cursor:default;
4138
+ outline:var(--t-focus-ring-width) solid transparent;
4139
+ outline-offset:0;
4140
+ background-color:var(--tds-number-stepper-background-color);
4141
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4142
+ border-radius:var(--t-form-border-radius);
4193
4143
  }
4194
4144
 
4195
- .tds-date-picker-calendar-title{
4196
- flex:1;
4197
- margin:0;
4198
- font-size:var(--t-font-size-md);
4199
- font-weight:var(--t-font-weight-semibold);
4200
- text-align:center;
4201
- }
4145
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4146
+ border-color:var(--tds-number-stepper-border-color-hover);
4147
+ }
4202
4148
 
4203
- .tds-date-picker-calendar-nav{
4149
+ .tds-number-stepper-field[data-focus-within]{
4150
+ outline-color:var(--t-focus-ring-color);
4151
+ outline-offset:var(--t-focus-ring-offset);
4152
+ border-color:var(--tds-number-stepper-border-color-active);
4153
+ }
4154
+
4155
+ .tds-number-stepper-field:has([readonly]){
4156
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4157
+ }
4158
+
4159
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
4160
+ border-color:var(--t-form-border-color-hover);
4161
+ }
4162
+
4163
+ .tds-number-stepper-input{
4204
4164
  display:flex;
4165
+ flex:1;
4205
4166
  align-items:center;
4206
- justify-content:center;
4207
- padding:var(--t-spacing-half);
4208
- color:var(--t-text-color);
4209
- cursor:default;
4167
+ min-inline-size:0;
4168
+ padding-block:var(--tds-number-stepper-padding-block);
4169
+ padding-inline:var(--t-spacing-1);
4170
+ font-family:inherit;
4171
+ font-size:inherit;
4172
+ color:inherit;
4210
4173
  outline:0;
4211
4174
  background:transparent;
4212
4175
  border:0;
4213
- border-radius:var(--t-border-radius-sm);
4214
4176
  }
4215
4177
 
4216
- .tds-date-picker-calendar-nav[data-hovered]{
4217
- background:var(--t-fill-color-neutral-070);
4218
- }
4219
-
4220
- .tds-date-picker-calendar-nav[data-pressed]{
4221
- background:var(--t-fill-color-button-interaction-ghost-active);
4178
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4179
+ margin:0;
4180
+ -webkit-appearance:none;
4181
+ appearance:none;
4222
4182
  }
4223
4183
 
4224
- .tds-date-picker-calendar-nav[data-focus-visible]{
4225
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4226
- outline-offset:var(--t-focus-ring-offset);
4227
- }
4184
+ .tds-number-stepper-button{
4185
+ flex-shrink:0;
4186
+ align-self:center;
4187
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4188
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4189
+ padding:0;
4190
+ }
4228
4191
 
4229
- .tds-date-picker-calendar-nav[data-disabled]{
4230
- color:var(--t-form-color-disabled);
4231
- cursor:not-allowed;
4192
+ .tds-number-stepper-button:last-of-type{
4193
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4232
4194
  }
4233
4195
 
4234
- .tds-date-picker-calendar-grid{
4235
- border-collapse:collapse;
4196
+ .tds-number-stepper-description{
4197
+ display:flex;
4198
+ gap:var(--t-spacing-half);
4199
+ align-items:flex-start;
4200
+ margin:0;
4201
+ font-size:var(--t-font-size-sm);
4202
+ line-height:1.35;
4203
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4204
+ cursor:text;
4236
4205
  }
4237
4206
 
4238
- .tds-date-picker-calendar-header-cell{
4239
- padding-block:var(--t-spacing-half);
4240
- font-size:var(--t-font-size-sm);
4241
- font-weight:var(--t-font-weight-normal);
4242
- color:var(--t-text-color-secondary);
4243
- text-align:center;
4207
+ .tds-number-stepper-description-invalid-icon{
4208
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4209
+ flex-shrink:0;
4210
+ margin-block-start:calc(.5lh - .5em);
4211
+ line-height:1.35;
4244
4212
  }
4245
4213
 
4246
- .tds-date-picker-calendar-cell{
4214
+ .tds-checkbox-group{
4215
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
4216
+ --tds-checkbox-group-line-height:1.4;
4217
+ --tds-checkbox-group-gap:var(--t-spacing-1);
4218
+
4219
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4220
+
4221
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4222
+ --tds-checkbox-group-description-line-height:1.35;
4223
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4224
+ --tds-checkbox-group-description-invalid-icon-display:none;
4247
4225
  display:flex;
4248
- align-items:center;
4249
- justify-content:center;
4250
- inline-size:2.25rem;
4251
- block-size:2.25rem;
4252
- font-size:var(--t-font-size-md);
4253
- color:var(--t-text-color);
4254
- cursor:default;
4255
- outline:0;
4256
- border-radius:var(--t-border-radius-sm);
4226
+ flex-direction:column;
4227
+ gap:var(--tds-checkbox-group-gap);
4228
+ padding:0;
4229
+ margin:0;
4230
+
4231
+ font-size:var(--tds-checkbox-group-font-size);
4232
+ line-height:var(--tds-checkbox-group-line-height);
4233
+ border:0;
4257
4234
  }
4258
4235
 
4259
- .tds-date-picker-calendar-cell[data-hovered]{
4260
- background:var(--t-fill-color-neutral-070);
4236
+ .tds-checkbox-group legend{
4237
+ padding:0;
4238
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4261
4239
  }
4262
4240
 
4263
- .tds-date-picker-calendar-cell[data-pressed]{
4264
- background:var(--t-fill-color-button-interaction-ghost-active);
4241
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
4242
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4265
4243
  }
4266
4244
 
4267
- .tds-date-picker-calendar-cell[data-selected]{
4268
- color:var(--t-text-color-inverted);
4269
- background:var(--t-fill-color-interaction);
4245
+ .tds-checkbox-group[aria-invalid="true"]{
4246
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4247
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
4270
4248
  }
4271
4249
 
4272
- .tds-date-picker-calendar-cell[data-focus-visible]{
4273
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4274
- outline-offset:var(--t-focus-ring-offset);
4275
- }
4250
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4251
+ margin-left:.25ch;
4252
+ color:var(--t-text-color-status-error);
4253
+ content:"*";
4254
+ }
4276
4255
 
4277
- .tds-date-picker-calendar-cell[data-unavailable]{
4278
- color:var(--t-text-color-secondary);
4279
- text-decoration:line-through;
4280
- cursor:not-allowed;
4281
- }
4256
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4257
+ content:none;
4258
+ }
4282
4259
 
4283
- .tds-date-picker-calendar-cell[data-disabled]{
4284
- color:var(--t-form-color-disabled);
4285
- cursor:not-allowed;
4286
- }
4260
+ .tds-checkbox-group-fields{
4261
+ display:flex;
4262
+ flex-direction:column;
4263
+ gap:var(--tds-checkbox-group-gap);
4264
+ align-items:flex-start;
4265
+ }
4287
4266
 
4288
- .tds-date-picker-calendar-cell[data-outside-month]{
4289
- color:var(--t-text-color-secondary);
4267
+ .tds-checkbox-group-description{
4268
+ display:flex;
4269
+ gap:var(--t-spacing-half);
4270
+ align-items:flex-start;
4271
+ margin:0;
4272
+ font-size:var(--tds-checkbox-group-description-font-size);
4273
+ line-height:var(--tds-checkbox-group-description-line-height);
4274
+ color:var(--tds-checkbox-group-description-color);
4275
+ cursor:text;
4276
+ }
4277
+
4278
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4279
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
4280
+ flex-shrink:0;
4281
+ margin-top:calc(.5lh - .5em);
4282
+ line-height:var(--tds-checkbox-group-description-line-height);
4290
4283
  }
4291
4284
 
4285
+ .tds-checkbox-group--sm{
4286
+ --tds-checkbox-group-line-height:1.35;
4287
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
4288
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4289
+ --tds-checkbox-group-description-line-height:1.3;
4290
+ }
4291
+
4292
4292
  .t-banner{
4293
4293
  --t-banner-font-size:var(--t-font-size-md);
4294
4294
  --t-banner-font-color:var(--t-text-color);