@planningcenter/tapestry 3.2.2 → 3.2.3-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1467 -1467
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1467 -1467
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,788 +1,982 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
1
+
2
+ @media (prefers-reduced-motion: no-preference){
3
+
4
+ :root{
5
+ interpolate-size:allow-keywords;
5
6
  }
7
+ }
6
8
 
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
9
+ @layer tds-component{
10
+ tds-sidenav,
11
+ .tds-sidenav{
12
+ --tds-sidenav-indent:12px;
13
+ --tds-sidenav-item-depth:0;
25
14
 
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
15
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
28
16
 
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
17
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
+ --tds-sidenav-collapse-closed-opacity:0;
20
+ --tds-sidenav-collapse-open-opacity:1;
21
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
+ --tds-sidenav-collapse-open-transform:translateY(0);
32
23
 
33
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
24
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
35
28
 
36
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
29
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
+ --tds-sidenav-item-nested-background-selected:transparent;
39
32
 
40
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
45
- }
33
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
46
36
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
37
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
49
39
  }
50
40
 
51
- @supports (color: light-dark(#fff, #000)){
52
- .tds-page-header{
53
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
41
+ @media (prefers-reduced-motion: reduce){
42
+ tds-sidenav,
43
+ .tds-sidenav{
44
+ --tds-sidenav-collapse-transition-enter:none;
45
+ --tds-sidenav-collapse-transition-exit:none;
46
+ --tds-sidenav-collapse-closed-transform:none;
47
+ --tds-sidenav-collapse-open-transform:none;
48
+ }
55
49
  }
50
+
51
+ .tds-sidenav--theme-gray{
52
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
56
57
  }
58
+ }
57
59
 
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
- }
60
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
+ display:flex;
62
+ }
63
+
64
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
+ flex-direction:column;
66
+ gap:var(--t-spacing-half);
67
+ width:100%;
76
68
  }
69
+
70
+ .tds-sidenav-section-list{
71
+ width:100%;
72
+ padding:0;
73
+ margin:0;
74
+ list-style:none;
77
75
  }
78
76
 
79
- .tds-page-header{
77
+ .tds-sidenav-section-header{
80
78
  display:flex;
81
- flex-direction:column;
82
- padding-top:var(--tds-page-header-padding-y);
83
- color:var(--tds-page-header-color);
84
- background:var(--tds-page-header-background-color);
85
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
79
+ align-items:baseline;
80
+ justify-content:space-between;
81
+ padding-top:var(--t-spacing-2);
86
82
  }
87
83
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
84
+ .tds-sidenav-section-header h2{
85
+ margin:0;
86
+ font-size:var(--t-font-size-sm);
87
+ font-weight:var(--t-font-weight-semibold);
88
+ line-height:1.35;
89
+ color:var(--t-text-color-secondary);
90
+ text-transform:uppercase;
90
91
  }
91
92
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
93
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
+ padding-top:0;
94
95
  }
95
96
 
96
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
- width:100%;
97
+ .tds-sidenav-section-header [slot="label-actions"]{
98
+ display:flex;
99
+ gap:var(--t-spacing-half);
100
+ align-items:center;
98
101
  }
99
102
 
100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
103
+ .tds-sidenav-section [slot="section-actions"]{
104
+ display:flex;
105
+ gap:12px;
106
+ align-items:center;
107
+ min-height:42px;
108
+ padding:var(--t-spacing-1) 0;
109
+ }
110
+
111
+ .tds-sidenav-section-list,
112
+ .tds-sidenav-item{
113
+ width:100%;
114
+ padding:0;
115
+ margin:0;
116
+ }
117
+
118
+ .tds-sidenav-item :is(a,button){
119
+ position:relative;
101
120
  display:flex;
102
- flex-flow:row wrap;
103
- gap:var(--t-spacing-half) var(--t-spacing-1);
104
- align-items:flex-start;
105
- justify-content:flex-start;
106
- min-width:0;
121
+ gap:12px;
122
+ align-items:center;
123
+ width:100%;
124
+ padding:12px;
125
+ overflow:hidden;
126
+ font-size:var(--t-font-size-sm);
127
+ line-height:18px;
128
+ color:var(--t-text-color-headline);
129
+ white-space:nowrap;
130
+ text-decoration:none;
131
+ -webkit-appearance:none;
132
+ -moz-appearance:none;
133
+ appearance:none;
134
+ cursor:pointer;
135
+ background-color:var(--tds-sidenav-item-background, transparent);
136
+ border:0;
137
+ border-radius:var(--t-border-radius);
138
+ transition:var(--tds-sidenav-item-transition);
107
139
  }
108
140
 
109
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
- display:flex;
111
- gap:var(--tds-page-header-nav-gap);
112
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
- margin:0 0 -1px;
114
- overflow:auto;
115
- list-style:none;
116
- background:var(--tds-page-header-nav-background);
141
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
+ display:block;
143
+ flex:1;
144
+ overflow:hidden;
145
+ text-overflow:ellipsis;
146
+ text-align:left;
147
+ white-space:nowrap;
117
148
  }
118
149
 
119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
- position:relative;
121
- display:inline-flex;
122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
- font-size:var(--t-font-size-sm);
124
- line-height:22px;
125
- color:var(--tds-page-header-nav-item-color);
126
- white-space:nowrap;
150
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
+ color:var(--t-text-color-headline);
127
153
  text-decoration:none;
128
- -webkit-appearance:none;
129
- -moz-appearance:none;
130
- appearance:none;
131
- cursor:pointer;
132
- outline-offset:-2px;
133
- background-color:var(--tds-page-header-nav-item-background-color);
134
- background-clip:padding-box;
135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
138
154
  }
139
155
 
140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
145
- }
156
+ :is(.tds-sidenav-item :is(a,button)):active{
157
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
+ }
146
159
 
147
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
- }
160
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
+ overflow:hidden;
162
+ color:var(--tds-sidenav-item-icon-color);
163
+ }
152
164
 
153
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
- background-color:var(--tds-page-header-nav-item-background-color-active);
155
- border-color:var(--tds-page-header-nav-item-border-color-active);
156
- }
165
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
+ display:block;
167
+ width:var(--tds-sidenav-item-icon-size);
168
+ height:var(--tds-sidenav-item-icon-size);
169
+ }
157
170
 
158
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
- color:var(--tds-page-header-nav-item-color-disabled);
160
- cursor:not-allowed;
161
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
- opacity:1;
163
- }
171
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
+ --tds-sidenav-indent:19px;
173
+ }
164
174
 
165
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
- position:relative;
175
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
+ visibility:visible;
177
+ block-size:auto;
178
+ opacity:1;
167
179
  }
168
180
 
169
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
181
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
+
185
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
+ font-weight:var(--t-font-weight-semibold);
187
+ }
188
+
189
+ .tds-sidenav-item:has(.tds-sidenav-section){
190
+ display:flex;
191
+ flex-direction:column;
192
+ gap:var(--t-spacing-half);
193
+ }
194
+
195
+ .tds-sidenav-item .tds-sidenav-section-list{
196
+ --tds-sidenav-item-depth:1;
197
+ gap:0;
198
+ }
199
+
200
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
+ visibility:hidden;
202
+ block-size:0;
203
+ overflow-y:clip;
204
+ opacity:0;
205
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
+ }
207
+
208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
+ --tds-sidenav-item-depth:2;
210
+ }
211
+
212
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
+ min-height:var(--t-element-size-2xl);
214
+ padding-block:9px;
215
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
+ line-height:1;
217
+ background-color:transparent;
218
+ }
219
+
220
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
+ position:absolute;
222
+ top:0;
223
+ bottom:0;
224
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
+ width:2px;
226
+ content:"";
227
+ background-color:var(--tds-sidenav-item-nested-border-color);
228
+ transition:var(--tds-sidenav-item-transition);
172
229
  }
173
230
 
174
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
175
232
  position:absolute;
176
- top:-5px;
177
- right:-2px;
178
- width:10px;
179
- height:10px;
233
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
+ z-index:-1;
235
+ height:100%;
180
236
  content:"";
181
- background:var(--tds-page-header-nav-item-indicator-color);
182
- border-radius:50%;
237
+ background-color:var(--tds-sidenav-item-nested-background);
238
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
+ transition:var(--tds-sidenav-item-transition);
183
240
  }
184
241
 
185
- @media (prefers-reduced-motion: no-preference){
186
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
- animation:indicator-pulse 1.25s ease infinite;
188
- }
242
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
+ display:block;
244
+ text-align:left;
245
+ white-space:normal;
189
246
  }
190
247
 
191
- .tds-page-header__title-bar{
192
- display:flex;
193
- flex-direction:column;
194
- gap:var(--t-spacing-2) var(--t-spacing-1);
195
- align-items:flex-start;
196
- justify-content:space-between;
197
- padding:0 var(--tds-page-header-padding-x);
198
- }
248
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
251
+ }
199
252
 
200
- .tds-page-header--profile > .tds-page-header__title-bar{
201
- align-items:center;
202
- }
253
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
255
+ }
203
256
 
204
- .tds-page-header__primary{
257
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
+ font-weight:var(--t-font-weight-medium);
260
+ }
261
+
262
+ .tds-sidenav-responsive-header{
263
+ display:flex;
264
+ gap:var(--t-spacing-2);
265
+ align-items:center;
205
266
  width:100%;
206
267
  }
207
268
 
208
- .tds-page-header__primary h1{
269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
+ order:0;
271
+ }
272
+
273
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
+ flex:1;
275
+ order:1;
209
276
  margin:0;
210
- font-size:var(--tds-page-header-headline-font-size);
211
- font-weight:var(--t-font-weight-normal);
212
- line-height:32px;
213
- color:var(--tds-page-header-headline-color);
214
- overflow-wrap:break-word;
277
+ font-size:var(--t-font-size-lg);
278
+ font-weight:var(--t-font-weight-medium);
279
+ color:var(--t-text-color-headline);
215
280
  }
216
281
 
217
- @media (min-width: 960px){
218
- .tds-page-header__primary{
219
- flex:1 1 max-content;
220
- width:auto;
221
- min-width:0;
222
- max-width:100%;
282
+ @media (max-width: 719px){
283
+ .tds-sidenav-collapse{
284
+ z-index:10001;
285
+ display:none;
286
+ max-width:min(448px, calc(100vw - 48px));
287
+ padding:0;
288
+ margin:12px 0;
289
+ position-area:bottom span-right;
290
+ overflow:hidden;
291
+ outline:0;
292
+ background:var(--t-surface-color-card);
293
+ border:0;
294
+ border-radius:6px;
295
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
+ opacity:var(--tds-sidenav-collapse-open-opacity);
297
+ transform:var(--tds-sidenav-collapse-open-transform);
298
+ transition:var(--tds-sidenav-collapse-transition-enter);
299
+ will-change:transform;
223
300
  }
224
301
 
225
- .tds-page-header__title-bar,
226
- .tds-page-header--profile .tds-page-header__title-bar{
227
- flex-flow:row nowrap;
228
- row-gap:12px;
229
- align-items:flex-start;
302
+ .tds-sidenav-scroll-container{
303
+ --webkit-overflow-scrolling:touch;
304
+ display:block;
305
+ width:100%;
306
+ height:-moz-fit-content;
307
+ height:fit-content;
308
+ padding:var(--t-spacing-2);
309
+ overflow-y:auto;
230
310
  }
231
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
- width:auto;
233
- }
234
311
 
235
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
- justify-content:flex-end;
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
314
+ }
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
237
318
  }
238
- }
239
319
 
240
- .tds-page-header-phone,
241
- .tds-page-header-email{
242
- color:var(--tds-page-header-color);
243
- white-space:nowrap;
244
- }
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
245
324
 
246
- .tds-page-header-email{
247
- max-width:100%;
248
- overflow:hidden;
249
- text-overflow:ellipsis;
250
- }
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
+ }
331
+ }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
335
+ }
251
336
 
252
- @keyframes indicator-pulse{
253
- 0%{
254
- opacity:.3;
255
- transform:scale(.9);
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
256
341
  }
342
+ }
257
343
 
258
- 100%{
259
- opacity:0;
260
- transform:scale(1.75);
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
261
347
  }
262
348
  }
263
349
 
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
264
353
 
265
- :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{
266
- -webkit-appearance:none;
267
- appearance:none;
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
268
356
  }
269
357
 
270
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
271
- inline-size:1em;
272
- block-size:2em;
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
273
361
  }
274
362
 
275
- @supports (field-sizing: content){
276
- .tds-input--auto-width{
277
- inline-size:-moz-fit-content;
278
- inline-size:fit-content;
279
- min-inline-size:min(100%, 122px);
280
- }
363
+ .tds-checkbox{
364
+ --tds-checkbox-font-size:var(--t-font-size-md);
365
+ --tds-checkbox-cursor:pointer;
366
+ --tds-checkbox-line-height:1.4;
367
+ --tds-checkbox-transition-property:background-color, border-color;
281
368
 
282
- .tds-input--auto-width input{
283
- field-sizing:content;
284
- inline-size:auto;
285
- }
286
- }
369
+ --tds-checkbox-input-size:var(--t-element-size-md);
370
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
371
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
372
+ --tds-checkbox-input-background-color:transparent;
287
373
 
288
- .tds-radio{
289
- --tds-radio-font-size:var(--t-font-size-md);
290
- --tds-radio-cursor:pointer;
291
- --tds-radio-line-height:1.4;
292
- --tds-radio-transition-property:border-width;
293
-
294
- --tds-radio-input-size:var(--t-element-size-md);
295
- --tds-radio-input-border-radius:var(--t-border-radius-round);
296
- --tds-radio-input-border-color:var(--t-form-border-color);
297
- --tds-radio-input-border-width:var(--t-form-border-width);
298
- --tds-radio-input-background-color:transparent;
374
+ --tds-checkbox-input-icon:none;
375
+ --tds-checkbox-input-icon-visibility:hidden;
376
+ --tds-checkbox-input-icon-opacity:0;
377
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
299
378
 
300
- --tds-radio-label-color:var(--t-form-color);
379
+ --tds-checkbox-label-color:var(--t-form-color);
301
380
 
302
- --tds-radio-description-font-size:var(--t-font-size-sm);
303
- --tds-radio-description-line-height:1.35;
304
- --tds-radio-description-color:var(--t-text-color-secondary);
381
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
382
+ --tds-checkbox-description-line-height:1.35;
383
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
384
+ --tds-checkbox-description-invalid-icon-display:none;
305
385
 
306
386
  position:relative;
307
387
  display:inline-grid;
308
388
  grid-template-columns:auto;
309
389
  grid-auto-columns:1fr;
310
390
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
311
- line-height:var(--tds-radio-line-height);
312
- cursor:var(--tds-radio-cursor);
391
+ line-height:var(--tds-checkbox-line-height);
392
+ cursor:var(--tds-checkbox-cursor);
313
393
  -webkit-user-select:none;
314
394
  -moz-user-select:none;
315
395
  user-select:none;
316
396
  }
317
397
 
318
- .tds-radio label{
398
+ .tds-checkbox label{
319
399
  grid-area:1 / 2;
320
- font-size:var(--tds-radio-font-size);
400
+ font-size:var(--tds-checkbox-font-size);
321
401
  font-weight:var(--t-font-weight-normal);
322
- color:var(--tds-radio-label-color);
323
- cursor:var(--tds-radio-cursor);
402
+ color:var(--tds-checkbox-label-color);
403
+ cursor:var(--tds-checkbox-cursor);
324
404
  }
325
405
 
326
- .tds-radio input[type="radio"]{
406
+ .tds-checkbox tds-indeterminate{
407
+ display:flex;
408
+ }
409
+
410
+ .tds-checkbox input[type="checkbox"]{
327
411
  position:relative;
328
412
  width:1em;
329
413
  height:1em;
330
414
  margin:calc((1lh - 1em) / 2) 0 0;
331
- font-size:var(--tds-radio-font-size);
415
+ font-size:var(--tds-checkbox-font-size);
332
416
  line-height:inherit;
333
417
  -webkit-appearance:none;
334
418
  -moz-appearance:none;
335
419
  appearance:none;
336
- cursor:var(--tds-radio-cursor);
337
- background-color:var(--tds-radio-input-background-color);
338
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
339
- border-radius:var(--tds-radio-input-border-radius);
420
+ cursor:var(--tds-checkbox-cursor);
421
+ background-color:var(--tds-checkbox-input-background-color);
422
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
423
+ border-radius:var(--tds-checkbox-input-border-radius);
340
424
  transition-timing-function:var(--t-ease-in-out);
341
425
  transition-duration:var(--t-duration-200);
342
- transition-property:var(--tds-radio-transition-property);
426
+ transition-property:var(--tds-checkbox-transition-property);
343
427
  }
344
428
 
345
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
346
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
347
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
429
+ :is(.tds-checkbox input[type="checkbox"])::before{
430
+ position:absolute;
431
+ top:50%;
432
+ left:50%;
433
+ visibility:var(--tds-checkbox-input-icon-visibility);
434
+ width:100%;
435
+ height:100%;
436
+ content:"";
437
+ background-color:var(--tds-checkbox-input-icon-fill);
438
+ border-radius:var(--tds-checkbox-input-border-radius);
439
+ opacity:var(--tds-checkbox-input-icon-opacity);
440
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
441
+ mask-image:var(--tds-checkbox-input-icon);
442
+ -webkit-mask-repeat:no-repeat;
443
+ mask-repeat:no-repeat;
444
+ -webkit-mask-size:contain;
445
+ mask-size:contain;
446
+ transform:translate(-50%, -50%);
348
447
  }
349
448
 
350
- :is(.tds-radio input[type="radio"]):focus-visible{
449
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
450
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
451
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
452
+ }
453
+
454
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
351
455
  outline:var(--t-focus-ring-outline);
352
456
  outline-offset:var(--t-focus-ring-offset);
353
457
  }
354
458
 
355
- :is(.tds-radio input[type="radio"]):disabled{
459
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
356
460
  pointer-events:none;
357
461
  }
358
462
 
359
463
  @media (prefers-reduced-motion: reduce){
360
464
 
361
- .tds-radio input[type="radio"]{
362
- --tds-radio-transition-property:none;
465
+ .tds-checkbox input[type="checkbox"]{
466
+ --tds-checkbox-transition-property:none;
363
467
  }
364
468
  }
365
469
 
366
- .tds-radio:has(input:checked){
367
- --tds-radio-input-background-color:var(--t-form-background-color);
368
- --tds-radio-input-border-color:var(--t-border-color-control-info);
369
- --tds-radio-input-border-width:4px;
470
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
471
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
472
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
473
+ --tds-checkbox-input-icon-visibility:visible;
474
+ --tds-checkbox-input-icon-opacity:1;
370
475
  }
371
476
 
372
- .tds-radio:has(input:checked) input:hover:not(:disabled){
373
- --tds-radio-input-background-color:var(--t-form-background-color);
374
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
477
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
478
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
479
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
375
480
  }
376
481
 
377
- .tds-radio:has(input:user-invalid){
378
- --tds-radio-input-border-color:var(--t-form-border-color-error);
482
+ .tds-checkbox:has(input:checked){
483
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
379
484
  }
380
485
 
381
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
382
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
383
- --tds-radio-input-background-color:var(--t-form-background-color-error);
486
+ .tds-checkbox:has(input:indeterminate){
487
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
488
+ }
489
+
490
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
493
+ --tds-checkbox-description-invalid-icon-display:inline-block;
494
+ }
495
+
496
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
384
499
  }
385
500
 
386
- .tds-radio:has(input:disabled){
387
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
388
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
501
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
502
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
504
+ }
389
505
 
390
- --tds-radio-label-color:var(--t-form-color-disabled);
391
- --tds-radio-description-color:var(--t-form-color-disabled);
392
- --tds-radio-cursor:not-allowed;
506
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
507
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
509
+ }
510
+
511
+ .tds-checkbox:has(input:required) label::after{
512
+ margin-left:.25ch;
513
+ color:var(--t-text-color-status-error);
514
+ content:"*";
515
+ }
516
+
517
+ .tds-checkbox:has(input:disabled){
518
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
520
+
521
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
522
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
523
+ --tds-checkbox-cursor:not-allowed;
393
524
  }
394
525
 
395
- .tds-radio:has(input:disabled) input:checked{
396
- --tds-radio-input-background-color:var(--t-form-background-color);
397
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
526
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
398
528
  }
399
529
 
400
- .tds-radio-description{
530
+ .tds-checkbox-description{
401
531
  display:flex;
402
532
  grid-area:2 / 2;
403
533
  gap:var(--t-spacing-half);
404
534
  align-items:flex-start;
405
535
  margin:0;
406
- font-size:var(--tds-radio-description-font-size);
407
- line-height:var(--tds-radio-description-line-height);
408
- color:var(--tds-radio-description-color);
536
+ font-size:var(--tds-checkbox-description-font-size);
537
+ line-height:var(--tds-checkbox-description-line-height);
538
+ color:var(--tds-checkbox-description-color);
409
539
  cursor:text;
410
540
  }
411
541
 
412
- .tds-radio--sm{
413
- --tds-radio-line-height:1.35;
414
- --tds-radio-input-size:var(--t-element-size-sm);
415
- --tds-radio-font-size:var(--t-font-size-sm);
416
- --tds-radio-description-font-size:var(--t-font-size-xs);
417
- --tds-radio-description-line-height:1.3;
418
- }
419
-
420
-
421
- @media (prefers-reduced-motion: no-preference){
542
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
+ display:var(--tds-checkbox-description-invalid-icon-display);
544
+ flex-shrink:0;
545
+ margin-top:calc(.5lh - .5em);
546
+ line-height:var(--tds-checkbox-description-line-height);
547
+ }
422
548
 
423
- :root{
424
- interpolate-size:allow-keywords;
549
+ .tds-checkbox--sm{
550
+ --tds-checkbox-line-height:1.35;
551
+ --tds-checkbox-input-size:var(--t-element-size-sm);
552
+ --tds-checkbox-font-size:var(--t-font-size-sm);
553
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
+ --tds-checkbox-description-line-height:1.3;
425
555
  }
556
+
557
+ @layer t-critical{
558
+ tds-page-header:not(.hydrated){
559
+ display:none;
426
560
  }
561
+ }
427
562
 
428
- @layer tds-component{
429
- tds-sidenav,
430
- .tds-sidenav{
431
- --tds-sidenav-indent:12px;
432
- --tds-sidenav-item-depth:0;
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;
433
581
 
434
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
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);
435
584
 
436
- --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;
437
- --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;
438
- --tds-sidenav-collapse-closed-opacity:0;
439
- --tds-sidenav-collapse-open-opacity:1;
440
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
441
- --tds-sidenav-collapse-open-transform:translateY(0);
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);
442
588
 
443
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
444
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
445
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
446
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
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);
447
591
 
448
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
449
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
450
- --tds-sidenav-item-nested-background-selected:transparent;
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);
451
595
 
452
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
453
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
454
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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);
601
+ }
455
602
 
456
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
457
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
603
+ .tds-page-header--profile{
604
+ --tds-page-header-padding-y:20px;
458
605
  }
459
606
 
460
- @media (prefers-reduced-motion: reduce){
461
- tds-sidenav,
462
- .tds-sidenav{
463
- --tds-sidenav-collapse-transition-enter:none;
464
- --tds-sidenav-collapse-transition-exit:none;
465
- --tds-sidenav-collapse-closed-transform:none;
466
- --tds-sidenav-collapse-open-transform:none;
467
- }
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));
468
611
  }
469
-
470
- .tds-sidenav--theme-gray{
471
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
472
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
473
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
474
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
475
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
476
- }
477
- }
478
-
479
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
480
- display:flex;
481
612
  }
482
613
 
483
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
484
- flex-direction:column;
485
- gap:var(--t-spacing-half);
486
- width:100%;
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);
631
+ }
487
632
  }
488
-
489
- .tds-sidenav-section-list{
490
- width:100%;
491
- padding:0;
492
- margin:0;
493
- list-style:none;
494
633
  }
495
634
 
496
- .tds-sidenav-section-header{
635
+ .tds-page-header{
497
636
  display:flex;
498
- align-items:baseline;
499
- justify-content:space-between;
500
- padding-top:var(--t-spacing-2);
637
+ 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);
501
642
  }
502
643
 
503
- .tds-sidenav-section-header h2{
504
- margin:0;
505
- font-size:var(--t-font-size-sm);
506
- font-weight:var(--t-font-weight-semibold);
507
- line-height:1.35;
508
- color:var(--t-text-color-secondary);
509
- text-transform:uppercase;
644
+ .tds-page-header:not(.has-nav){
645
+ padding-bottom:var(--tds-page-header-padding-y);
510
646
  }
511
647
 
512
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
513
- padding-top:0;
648
+ .tds-page-header.inactive{
649
+ background:var(--tds-page-header-background-color-inactive);
514
650
  }
515
651
 
516
- .tds-sidenav-section-header [slot="label-actions"]{
517
- display:flex;
518
- gap:var(--t-spacing-half);
519
- align-items:center;
652
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
653
+ width:100%;
520
654
  }
521
655
 
522
- .tds-sidenav-section [slot="section-actions"]{
523
- display:flex;
524
- gap:12px;
525
- align-items:center;
526
- min-height:42px;
527
- padding:var(--t-spacing-1) 0;
528
- }
529
-
530
- .tds-sidenav-section-list,
531
- .tds-sidenav-item{
532
- width:100%;
533
- padding:0;
534
- margin:0;
535
- }
536
-
537
- .tds-sidenav-item :is(a,button){
538
- position:relative;
656
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
539
657
  display:flex;
540
- gap:12px;
541
- align-items:center;
542
- width:100%;
543
- padding:12px;
544
- overflow:hidden;
545
- font-size:var(--t-font-size-sm);
546
- line-height:18px;
547
- color:var(--t-text-color-headline);
548
- white-space:nowrap;
549
- text-decoration:none;
550
- -webkit-appearance:none;
551
- -moz-appearance:none;
552
- appearance:none;
553
- cursor:pointer;
554
- background-color:var(--tds-sidenav-item-background, transparent);
555
- border:0;
556
- border-radius:var(--t-border-radius);
557
- transition:var(--tds-sidenav-item-transition);
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;
558
663
  }
559
664
 
560
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
561
- display:block;
562
- flex:1;
563
- overflow:hidden;
564
- text-overflow:ellipsis;
565
- text-align:left;
566
- white-space:nowrap;
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);
567
673
  }
568
674
 
569
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
570
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
571
- color:var(--t-text-color-headline);
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;
572
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;
573
694
  }
574
695
 
575
- :is(.tds-sidenav-item :is(a,button)):active{
576
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
577
- }
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
+ }
578
702
 
579
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
580
- overflow:hidden;
581
- color:var(--tds-sidenav-item-icon-color);
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
+ }
708
+
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
+ }
713
+
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
+ }
720
+
721
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
722
+ position:relative;
582
723
  }
583
724
 
584
- :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{
585
- display:block;
586
- width:var(--tds-sidenav-item-icon-size);
587
- height:var(--tds-sidenav-item-icon-size);
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);
588
728
  }
589
729
 
590
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
591
- --tds-sidenav-indent:19px;
592
- }
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
+ }
593
740
 
594
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
595
- visibility:visible;
596
- block-size:auto;
597
- opacity:1;
598
- }
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
+ }
599
746
 
600
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
601
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
602
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
747
+ .tds-page-header__title-bar{
748
+ display:flex;
749
+ flex-direction:column;
750
+ gap:var(--t-spacing-2) var(--t-spacing-1);
751
+ align-items:flex-start;
752
+ justify-content:space-between;
753
+ padding:0 var(--tds-page-header-padding-x);
754
+ }
603
755
 
604
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
605
- font-weight:var(--t-font-weight-semibold);
756
+ .tds-page-header--profile > .tds-page-header__title-bar{
757
+ align-items:center;
606
758
  }
607
759
 
608
- .tds-sidenav-item:has(.tds-sidenav-section){
609
- display:flex;
610
- flex-direction:column;
611
- gap:var(--t-spacing-half);
760
+ .tds-page-header__primary{
761
+ width:100%;
762
+ }
763
+
764
+ .tds-page-header__primary h1{
765
+ margin:0;
766
+ font-size:var(--tds-page-header-headline-font-size);
767
+ font-weight:var(--t-font-weight-normal);
768
+ line-height:32px;
769
+ color:var(--tds-page-header-headline-color);
770
+ overflow-wrap:break-word;
612
771
  }
613
772
 
614
- .tds-sidenav-item .tds-sidenav-section-list{
615
- --tds-sidenav-item-depth:1;
616
- gap:0;
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%;
617
779
  }
618
780
 
619
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
620
- visibility:hidden;
621
- block-size:0;
622
- overflow-y:clip;
623
- opacity:0;
624
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
625
- }
626
-
627
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
628
- --tds-sidenav-item-depth:2;
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;
786
+ }
787
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
788
+ width:auto;
629
789
  }
630
790
 
631
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
632
- min-height:var(--t-element-size-2xl);
633
- padding-block:9px;
634
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
635
- line-height:1;
636
- background-color:transparent;
791
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
792
+ justify-content:flex-end;
637
793
  }
794
+ }
638
795
 
639
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
640
- position:absolute;
641
- top:0;
642
- bottom:0;
643
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
644
- width:2px;
645
- content:"";
646
- background-color:var(--tds-sidenav-item-nested-border-color);
647
- transition:var(--tds-sidenav-item-transition);
648
- }
796
+ .tds-page-header-phone,
797
+ .tds-page-header-email{
798
+ color:var(--tds-page-header-color);
799
+ white-space:nowrap;
800
+ }
649
801
 
650
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
651
- position:absolute;
652
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
653
- z-index:-1;
654
- height:100%;
655
- content:"";
656
- background-color:var(--tds-sidenav-item-nested-background);
657
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
658
- transition:var(--tds-sidenav-item-transition);
659
- }
802
+ .tds-page-header-email{
803
+ max-width:100%;
804
+ overflow:hidden;
805
+ text-overflow:ellipsis;
806
+ }
660
807
 
661
- :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)){
662
- display:block;
663
- text-align:left;
664
- white-space:normal;
665
- }
808
+ @keyframes indicator-pulse{
809
+ 0%{
810
+ opacity:.3;
811
+ transform:scale(.9);
812
+ }
666
813
 
667
- :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{
668
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
669
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
670
- }
814
+ 100%{
815
+ opacity:0;
816
+ transform:scale(1.75);
817
+ }
818
+ }
671
819
 
672
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
673
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
674
- }
675
820
 
676
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
677
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
678
- font-weight:var(--t-font-weight-medium);
821
+ :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{
822
+ -webkit-appearance:none;
823
+ appearance:none;
679
824
  }
680
825
 
681
- .tds-sidenav-responsive-header{
682
- display:flex;
683
- gap:var(--t-spacing-2);
684
- align-items:center;
685
- width:100%;
686
- }
826
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
827
+ inline-size:1em;
828
+ block-size:2em;
829
+ }
687
830
 
688
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
689
- order:0;
831
+ @supports (field-sizing: content){
832
+ .tds-input--auto-width{
833
+ inline-size:-moz-fit-content;
834
+ inline-size:fit-content;
835
+ min-inline-size:min(100%, 122px);
690
836
  }
691
837
 
692
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
693
- flex:1;
694
- order:1;
695
- margin:0;
696
- font-size:var(--t-font-size-lg);
697
- font-weight:var(--t-font-weight-medium);
698
- color:var(--t-text-color-headline);
838
+ .tds-input--auto-width input{
839
+ field-sizing:content;
840
+ inline-size:auto;
699
841
  }
842
+ }
700
843
 
701
- @media (max-width: 719px){
702
- .tds-sidenav-collapse{
703
- z-index:10001;
704
- display:none;
705
- max-width:min(448px, calc(100vw - 48px));
706
- padding:0;
707
- margin:12px 0;
708
- position-area:bottom span-right;
709
- overflow:hidden;
710
- outline:0;
711
- background:var(--t-surface-color-card);
712
- border:0;
713
- border-radius:6px;
714
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
715
- opacity:var(--tds-sidenav-collapse-open-opacity);
716
- transform:var(--tds-sidenav-collapse-open-transform);
717
- transition:var(--tds-sidenav-collapse-transition-enter);
718
- will-change:transform;
719
- }
844
+ .tds-radio{
845
+ --tds-radio-font-size:var(--t-font-size-md);
846
+ --tds-radio-cursor:pointer;
847
+ --tds-radio-line-height:1.4;
848
+ --tds-radio-transition-property:border-width;
720
849
 
721
- .tds-sidenav-scroll-container{
722
- --webkit-overflow-scrolling:touch;
723
- display:block;
724
- width:100%;
725
- height:-moz-fit-content;
726
- height:fit-content;
727
- padding:var(--t-spacing-2);
728
- overflow-y:auto;
850
+ --tds-radio-input-size:var(--t-element-size-md);
851
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
852
+ --tds-radio-input-border-color:var(--t-form-border-color);
853
+ --tds-radio-input-border-width:var(--t-form-border-width);
854
+ --tds-radio-input-background-color:transparent;
855
+
856
+ --tds-radio-label-color:var(--t-form-color);
857
+
858
+ --tds-radio-description-font-size:var(--t-font-size-sm);
859
+ --tds-radio-description-line-height:1.35;
860
+ --tds-radio-description-color:var(--t-text-color-secondary);
861
+
862
+ position:relative;
863
+ display:inline-grid;
864
+ grid-template-columns:auto;
865
+ grid-auto-columns:1fr;
866
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
867
+ line-height:var(--tds-radio-line-height);
868
+ cursor:var(--tds-radio-cursor);
869
+ -webkit-user-select:none;
870
+ -moz-user-select:none;
871
+ user-select:none;
872
+ }
873
+
874
+ .tds-radio label{
875
+ grid-area:1 / 2;
876
+ font-size:var(--tds-radio-font-size);
877
+ font-weight:var(--t-font-weight-normal);
878
+ color:var(--tds-radio-label-color);
879
+ cursor:var(--tds-radio-cursor);
729
880
  }
730
881
 
731
- .tds-sidenav-item :is(a, button) :is(.prefix){
732
- display:none;
882
+ .tds-radio input[type="radio"]{
883
+ position:relative;
884
+ width:1em;
885
+ height:1em;
886
+ margin:calc((1lh - 1em) / 2) 0 0;
887
+ font-size:var(--tds-radio-font-size);
888
+ line-height:inherit;
889
+ -webkit-appearance:none;
890
+ -moz-appearance:none;
891
+ appearance:none;
892
+ cursor:var(--tds-radio-cursor);
893
+ background-color:var(--tds-radio-input-background-color);
894
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
895
+ border-radius:var(--tds-radio-input-border-radius);
896
+ transition-timing-function:var(--t-ease-in-out);
897
+ transition-duration:var(--t-duration-200);
898
+ transition-property:var(--tds-radio-transition-property);
733
899
  }
734
- @supports selector(:popover-open){
735
- .tds-sidenav-collapse:popover-open{
736
- display:flex;
737
- }
738
900
 
739
- .tds-sidenav-collapse:not(:popover-open){
740
- opacity:var(--tds-sidenav-collapse-closed-opacity);
741
- transition:var(--tds-sidenav-collapse-transition-exit);
901
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
902
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
903
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
742
904
  }
743
905
 
744
- @starting-style{
745
- .tds-sidenav-collapse:popover-open{
746
- opacity:var(--tds-sidenav-collapse-closed-opacity);
747
- transform:var(--tds-sidenav-collapse-closed-transform);
748
- }
749
- }
750
- }
751
- @supports not selector(:popover-open){
752
- .tds-sidenav-collapse.\:popover-open{
753
- display:flex;
906
+ :is(.tds-radio input[type="radio"]):focus-visible{
907
+ outline:var(--t-focus-ring-outline);
908
+ outline-offset:var(--t-focus-ring-offset);
754
909
  }
755
910
 
756
- .tds-sidenav-collapse:not(.\:popover-open){
757
- opacity:var(--tds-sidenav-collapse-closed-opacity);
758
- transition:var(--tds-sidenav-collapse-transition-exit);
911
+ :is(.tds-radio input[type="radio"]):disabled{
912
+ pointer-events:none;
759
913
  }
914
+
915
+ @media (prefers-reduced-motion: reduce){
916
+
917
+ .tds-radio input[type="radio"]{
918
+ --tds-radio-transition-property:none;
760
919
  }
761
- }
920
+ }
762
921
 
763
- @media (min-width: 720px){
764
- .tds-sidenav-responsive-header{
765
- display:none;
922
+ .tds-radio:has(input:checked){
923
+ --tds-radio-input-background-color:var(--t-form-background-color);
924
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
925
+ --tds-radio-input-border-width:4px;
766
926
  }
767
- }
768
927
 
769
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
770
- display:none;
928
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
929
+ --tds-radio-input-background-color:var(--t-form-background-color);
930
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
771
931
  }
772
932
 
773
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
774
- display:block;
775
- }
933
+ .tds-radio:has(input:user-invalid){
934
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
935
+ }
776
936
 
777
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
778
- display:flex;
779
- flex-direction:column;
937
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
938
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
939
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
780
940
  }
781
941
 
782
- .tds-radio-group{
783
- --tds-radio-group-font-size:var(--t-font-size-md);
784
- --tds-radio-group-line-height:1.4;
785
- --tds-radio-group-gap:var(--t-spacing-1);
942
+ .tds-radio:has(input:disabled){
943
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
944
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
945
+
946
+ --tds-radio-label-color:var(--t-form-color-disabled);
947
+ --tds-radio-description-color:var(--t-form-color-disabled);
948
+ --tds-radio-cursor:not-allowed;
949
+ }
950
+
951
+ .tds-radio:has(input:disabled) input:checked{
952
+ --tds-radio-input-background-color:var(--t-form-background-color);
953
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
954
+ }
955
+
956
+ .tds-radio-description{
957
+ display:flex;
958
+ grid-area:2 / 2;
959
+ gap:var(--t-spacing-half);
960
+ align-items:flex-start;
961
+ margin:0;
962
+ font-size:var(--tds-radio-description-font-size);
963
+ line-height:var(--tds-radio-description-line-height);
964
+ color:var(--tds-radio-description-color);
965
+ cursor:text;
966
+ }
967
+
968
+ .tds-radio--sm{
969
+ --tds-radio-line-height:1.35;
970
+ --tds-radio-input-size:var(--t-element-size-sm);
971
+ --tds-radio-font-size:var(--t-font-size-sm);
972
+ --tds-radio-description-font-size:var(--t-font-size-xs);
973
+ --tds-radio-description-line-height:1.3;
974
+ }
975
+
976
+ .tds-radio-group{
977
+ --tds-radio-group-font-size:var(--t-font-size-md);
978
+ --tds-radio-group-line-height:1.4;
979
+ --tds-radio-group-gap:var(--t-spacing-1);
786
980
 
787
981
  --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
788
982
 
@@ -866,879 +1060,685 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
866
1060
  --tds-radio-group-description-line-height:1.3;
867
1061
  }
868
1062
 
869
- .tds-toggle-switch{
870
- --tds-toggle-switch-font-size:var(--t-font-size-md);
871
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
872
- --tds-toggle-switch-cursor:pointer;
873
- --tds-toggle-switch-display:inline-grid;
874
- --tds-toggle-switch-line-height:1.4;
1063
+ .tds-select{
1064
+ --tds-select-border-color:var(--t-form-border-color);
1065
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1066
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1067
+ --tds-select-background-color:var(--t-form-background-color);
1068
+ --tds-select-color:var(--t-form-color);
1069
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1070
+ --tds-select-font-size:var(--t-font-size-md);
1071
+ --tds-select-min-height:var(--t-container-size-md);
1072
+ --tds-select-padding-block:6px;
1073
+ --tds-select-description-color:var(--t-text-color-secondary);
1074
+ --tds-select-description-invalid-icon-display:none;
1075
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1076
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1077
+ --tds-select-caret-size:1em;
1078
+ --tds-select-caret-inline-offset:.75em;
1079
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
875
1080
 
876
- --tds-toggle-switch-label-color:var(--t-form-color);
1081
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1082
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1083
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1084
+ --tds-select-dropdown-margin-block:5px;
1085
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1086
+ --tds-select-dropdown-scrollbar-width:thin;
1087
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1088
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1089
+ --tds-select-dropdown-scroll-behavior:smooth;
1090
+ --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;
1091
+ --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;
1092
+ --tds-select-dropdown-closed-opacity:0;
1093
+ --tds-select-dropdown-open-opacity:1;
1094
+ --tds-select-dropdown-closed-transform:translateY(-8px);
1095
+ --tds-select-dropdown-open-transform:translateY(0);
877
1096
 
878
- --tds-toggle-switch-track-width:var(--t-container-size-md);
879
- --tds-toggle-switch-track-outline:none;
880
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
881
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
882
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1097
+ --tds-select-option-gap:var(--t-spacing-1);
1098
+ --tds-select-option-padding-block:var(--t-spacing-1);
1099
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1100
+ --tds-select-option-font-size:1rem;
1101
+ --tds-select-option-color:var(--t-text-color);
1102
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1103
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1104
+ --tds-select-option-border-radius:var(--t-border-radius);
883
1105
 
884
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
885
- --tds-toggle-switch-thumb-transform:translateX(0);
886
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1106
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1107
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1108
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1109
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1110
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1111
+ --tds-select-group-label-letter-spacing:0;
1112
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1113
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1114
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1115
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
887
1116
 
888
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
889
- --tds-toggle-switch-description-line-height:1.35;
890
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
891
1117
  position:relative;
892
-
893
- display:var(--tds-toggle-switch-display);
894
- grid-template-columns:auto;
895
- grid-auto-columns:1fr;
896
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
897
- -webkit-user-select:none;
898
- -moz-user-select:none;
899
- user-select:none;
1118
+ display:flex;
1119
+ flex-direction:column;
1120
+ gap:var(--t-spacing-half);
900
1121
  }
901
1122
 
902
- .tds-toggle-switch input[type="checkbox"]{
903
- position:absolute;
904
- width:var(--tds-toggle-switch-track-width);
905
- height:var(--tds-toggle-switch-track-height);
906
- margin:0;
1123
+ .tds-select :is(label,.tds-select-label){
1124
+ font-size:var(--t-font-size-md);
1125
+ font-weight:var(--t-font-weight-normal);
1126
+ color:var(--t-text-color);
1127
+ cursor:default;
1128
+ }
1129
+
1130
+ .tds-select :is(select,button){
1131
+ position:relative;
1132
+ place-items:center;
1133
+ inline-size:100%;
1134
+ min-block-size:var(--tds-select-min-height);
1135
+ padding-block:var(--tds-select-padding-block);
1136
+ padding-inline:var(--t-spacing-1);
1137
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1138
+ font-family:inherit;
1139
+ font-size:var(--tds-select-font-size);
1140
+ line-height:1;
1141
+ color:var(--tds-select-color);
1142
+ text-align:left;
907
1143
  -webkit-appearance:none;
908
1144
  -moz-appearance:none;
909
1145
  appearance:none;
910
- cursor:var(--tds-toggle-switch-cursor);
911
- outline:var(--tds-toggle-switch-track-outline);
912
- outline-offset:var(--t-focus-ring-offset);
913
- background-color:transparent;
914
- border:0;
915
- border-radius:var(--t-border-radius-round);
1146
+ cursor:var(--tds-select-cursor, default);
1147
+ outline:var(--t-focus-ring-width) solid transparent;
1148
+ outline-offset:0;
1149
+ background-color:var(--tds-select-background-color);
1150
+ background-image:var(--tds-select-background-image);
1151
+ background-repeat:no-repeat;
1152
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1153
+ background-size:var(--tds-select-caret-size);
1154
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1155
+ border-radius:var(--t-form-border-radius);
1156
+ transition-timing-function:var(--t-ease-in-out);
1157
+ transition-duration:var(--t-duration-300);
1158
+ transition-property:var(--tds-select-transition-property);
916
1159
  }
917
1160
 
918
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
919
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1161
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1162
+ border-color:var(--tds-select-border-color-hover);
920
1163
  }
921
1164
 
922
- .tds-toggle-switch label{
923
- display:inline-flex;
924
- grid-area:1 / 2;
925
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
926
- column-gap:var(--tds-toggle-switch-column-gap);
927
- margin-top:-.09375em;
928
- font-size:var(--tds-toggle-switch-font-size);
929
- font-weight:var(--t-font-weight-normal);
930
- line-height:var(--tds-toggle-switch-line-height);
931
- color:var(--tds-toggle-switch-label-color);
932
- cursor:var(--tds-toggle-switch-cursor);
933
- }
1165
+ :is(.tds-select :is(select,button)):focus{
1166
+ outline-color:var(--t-focus-ring-color);
1167
+ outline-offset:var(--t-focus-ring-offset);
1168
+ border-color:var(--tds-select-border-color-active);
1169
+ }
934
1170
 
935
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
936
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
937
- }
1171
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1172
+ color:var(--tds-select-placeholder-color);
1173
+ }
938
1174
 
939
- .tds-toggle-switch:has(input:checked){
940
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
941
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1175
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1176
+ --tds-select-border-color:var(--t-form-border-color-error);
1177
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1178
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1179
+ --tds-select-background-color:var(--t-form-background-color-error);
1180
+ --tds-select-description-color:var(--t-text-color-status-error);
1181
+ --tds-select-description-invalid-icon-display:inline-block;
942
1182
  }
943
1183
 
944
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
945
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1184
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1185
+ margin-left:.25ch;
1186
+ color:var(--t-text-color-status-error);
1187
+ content:"*";
946
1188
  }
947
1189
 
948
- .tds-toggle-switch:has(input:disabled){
949
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
950
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
951
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
952
- --tds-toggle-switch-cursor:not-allowed;
1190
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1191
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1192
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1193
+ --tds-select-color:var(--t-form-color-disabled);
1194
+ --tds-select-cursor:not-allowed;
953
1195
  }
954
1196
 
955
- .tds-toggle-switch-track{
956
- position:relative;
957
- flex-shrink:0;
958
- width:var(--tds-toggle-switch-track-width);
959
- height:var(--tds-toggle-switch-track-height);
960
- background-color:var(--tds-toggle-switch-track-background-color);
961
- border-radius:var(--t-border-radius-round);
962
- transition:var(--tds-toggle-switch-track-transition);
963
- }
964
-
965
- .tds-toggle-switch-track::before{
966
- position:absolute;
967
- top:var(--t-spacing-fourth);
968
- left:var(--t-spacing-fourth);
969
- width:var(--tds-toggle-switch-thumb-size);
970
- height:var(--tds-toggle-switch-thumb-size);
971
- content:"";
972
- background-color:#fff;
973
- border-radius:var(--t-border-radius-round);
974
- transform:var(--tds-toggle-switch-thumb-transform);
975
- transition:var(--tds-toggle-switch-thumb-transition);
1197
+ .tds-select:has( > [popover]:popover-open) > button{
1198
+ border-color:var(--tds-select-border-color-active);
976
1199
  }
977
1200
 
978
- @media (prefers-reduced-motion: reduce){
1201
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1202
+ transform:rotate(.5turn);
1203
+ }
979
1204
 
980
- .tds-toggle-switch-track{
981
- --tds-toggle-switch-track-transition:none;
982
- --tds-toggle-switch-thumb-transition:none;
983
- }
1205
+ .tds-select :is(hr,li[role="separator"]){
1206
+ margin-block:var(--t-spacing-half);
1207
+ color:var(--tds-select-border-color);
1208
+ border:0;
1209
+ border-top:1px solid;
984
1210
  }
985
1211
 
986
- .tds-toggle-switch-description{
987
- display:flex;
988
- grid-area:2 / 2;
989
- align-items:flex-start;
990
- margin:0;
991
- font-size:var(--tds-toggle-switch-description-font-size);
992
- line-height:var(--tds-toggle-switch-description-line-height);
993
- color:var(--tds-toggle-switch-description-color);
994
- cursor:text;
995
- }
996
-
997
- .tds-toggle-switch--sm{
998
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
999
- --tds-toggle-switch-line-height:1.35;
1000
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1001
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1002
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1003
- --tds-toggle-switch-description-line-height:1.3;
1004
- }
1005
-
1006
- .tds-toggle-switch--hide-label{
1007
- --tds-toggle-switch-display:inline-flex;
1008
- }
1009
-
1010
- .tds-checkbox{
1011
- --tds-checkbox-font-size:var(--t-font-size-md);
1012
- --tds-checkbox-cursor:pointer;
1013
- --tds-checkbox-line-height:1.4;
1014
- --tds-checkbox-transition-property:background-color, border-color;
1015
-
1016
- --tds-checkbox-input-size:var(--t-element-size-md);
1017
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1018
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1019
- --tds-checkbox-input-background-color:transparent;
1020
-
1021
- --tds-checkbox-input-icon:none;
1022
- --tds-checkbox-input-icon-visibility:hidden;
1023
- --tds-checkbox-input-icon-opacity:0;
1024
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1025
-
1026
- --tds-checkbox-label-color:var(--t-form-color);
1027
-
1028
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1029
- --tds-checkbox-description-line-height:1.35;
1030
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1031
- --tds-checkbox-description-invalid-icon-display:none;
1032
-
1033
- position:relative;
1034
- display:inline-grid;
1035
- grid-template-columns:auto;
1036
- grid-auto-columns:1fr;
1037
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1038
- line-height:var(--tds-checkbox-line-height);
1039
- cursor:var(--tds-checkbox-cursor);
1040
- -webkit-user-select:none;
1041
- -moz-user-select:none;
1042
- user-select:none;
1043
- }
1044
-
1045
- .tds-checkbox label{
1046
- grid-area:1 / 2;
1047
- font-size:var(--tds-checkbox-font-size);
1048
- font-weight:var(--t-font-weight-normal);
1049
- color:var(--tds-checkbox-label-color);
1050
- cursor:var(--tds-checkbox-cursor);
1051
- }
1052
-
1053
- .tds-checkbox tds-indeterminate{
1054
- display:flex;
1055
- }
1056
-
1057
- .tds-checkbox input[type="checkbox"]{
1058
- position:relative;
1059
- width:1em;
1060
- height:1em;
1061
- margin:calc((1lh - 1em) / 2) 0 0;
1062
- font-size:var(--tds-checkbox-font-size);
1063
- line-height:inherit;
1064
- -webkit-appearance:none;
1065
- -moz-appearance:none;
1066
- appearance:none;
1067
- cursor:var(--tds-checkbox-cursor);
1068
- background-color:var(--tds-checkbox-input-background-color);
1069
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1070
- border-radius:var(--tds-checkbox-input-border-radius);
1071
- transition-timing-function:var(--t-ease-in-out);
1072
- transition-duration:var(--t-duration-200);
1073
- transition-property:var(--tds-checkbox-transition-property);
1212
+ .tds-select :is(li[role="option"],option:not([hidden])){
1213
+ display:block;
1214
+ padding-block:var(--tds-select-option-padding-block);
1215
+ padding-inline:var(--tds-select-option-padding-inline);
1216
+ overflow:hidden;
1217
+ text-overflow:ellipsis;
1218
+ font-size:var(--tds-select-option-font-size);
1219
+ color:var(--tds-select-option-color);
1220
+ white-space:nowrap;
1221
+ cursor:default;
1222
+ border-radius:var(--tds-select-option-border-radius);
1074
1223
  }
1075
1224
 
1076
- :is(.tds-checkbox input[type="checkbox"])::before{
1077
- position:absolute;
1078
- top:50%;
1079
- left:50%;
1080
- visibility:var(--tds-checkbox-input-icon-visibility);
1081
- width:100%;
1082
- height:100%;
1083
- content:"";
1084
- background-color:var(--tds-checkbox-input-icon-fill);
1085
- border-radius:var(--tds-checkbox-input-border-radius);
1086
- opacity:var(--tds-checkbox-input-icon-opacity);
1087
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1088
- mask-image:var(--tds-checkbox-input-icon);
1089
- -webkit-mask-repeat:no-repeat;
1090
- mask-repeat:no-repeat;
1091
- -webkit-mask-size:contain;
1092
- mask-size:contain;
1093
- transform:translate(-50%, -50%);
1225
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1226
+ outline:none;
1094
1227
  }
1095
1228
 
1096
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1097
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1098
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1229
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1230
+ background:var(--tds-select-option-background-hover);
1099
1231
  }
1100
1232
 
1101
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1102
- outline:var(--t-focus-ring-outline);
1103
- outline-offset:var(--t-focus-ring-offset);
1233
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1234
+ background:var(--tds-select-option-background-active);
1104
1235
  }
1105
1236
 
1106
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1107
- pointer-events:none;
1237
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1238
+ color:var(--t-form-color-disabled);
1239
+ cursor:not-allowed;
1108
1240
  }
1109
1241
 
1110
- @media (prefers-reduced-motion: reduce){
1111
-
1112
- .tds-checkbox input[type="checkbox"]{
1113
- --tds-checkbox-transition-property:none;
1114
- }
1115
- }
1242
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1243
+ background:transparent;
1244
+ }
1116
1245
 
1117
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1118
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1119
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1120
- --tds-checkbox-input-icon-visibility:visible;
1121
- --tds-checkbox-input-icon-opacity:1;
1246
+ .tds-select :is(li[role="presentation"],legend){
1247
+ position:sticky;
1248
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1249
+ z-index:1;
1250
+ float:inline-start;
1251
+ inline-size:100%;
1252
+ padding-block:var(--tds-select-group-label-padding-block);
1253
+ padding-inline:var(--tds-select-group-label-padding-inline);
1254
+ container-type:scroll-state;
1255
+ font-size:var(--tds-select-group-label-font-size);
1256
+ font-weight:var(--tds-select-group-label-font-weight);
1257
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1258
+ background:var(--tds-select-group-label-background);
1259
+ text-box:trim-both cap alphabetic;
1122
1260
  }
1123
1261
 
1124
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1125
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1126
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1262
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1263
+ display:inline-flex;
1264
+ gap:var(--t-spacing-half);
1265
+ align-items:center;
1266
+ color:var(--tds-select-group-label-color);
1267
+ transition:var(--tds-select-group-label-transition);
1127
1268
  }
1128
1269
 
1129
- .tds-checkbox:has(input:checked){
1130
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1131
- }
1132
-
1133
- .tds-checkbox:has(input:indeterminate){
1134
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1135
- }
1136
-
1137
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1138
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1139
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1140
- --tds-checkbox-description-invalid-icon-display:inline-block;
1141
- }
1270
+ @container scroll-state(stuck){
1142
1271
 
1143
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1144
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1145
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1272
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1273
+ color:var(--tds-select-group-label-color-stuck);
1146
1274
  }
1147
1275
 
1148
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1149
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1150
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1151
- }
1276
+ @media (forced-colors: active){
1152
1277
 
1153
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1154
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1155
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1278
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1279
+ color:var(--tds-select-group-label-color-stuck);
1280
+ }
1281
+ }
1156
1282
  }
1157
1283
 
1158
- .tds-checkbox:has(input:required) label::after{
1159
- margin-left:.25ch;
1160
- color:var(--t-text-color-status-error);
1161
- content:"*";
1162
- }
1284
+ .tds-select.tds-select--lg{
1285
+ --tds-select-min-height:var(--t-container-size-lg);
1286
+ --tds-select-font-size:var(--t-font-size-lg);
1287
+ }
1163
1288
 
1164
- .tds-checkbox:has(input:disabled){
1165
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1166
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1289
+ @media (prefers-reduced-motion: reduce){
1167
1290
 
1168
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1169
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1170
- --tds-checkbox-cursor:not-allowed;
1291
+ .tds-select{
1292
+ --tds-select-transition-property:none;
1293
+ --tds-select-dropdown-transition-enter:none;
1294
+ --tds-select-dropdown-transition-exit:none;
1295
+ --tds-select-dropdown-scroll-behavior:auto;
1296
+ --tds-select-dropdown-closed-transform:none;
1297
+ --tds-select-dropdown-open-transform:none;
1298
+ --tds-select-caret-transition:none;
1299
+ }
1171
1300
  }
1172
1301
 
1173
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1174
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1175
- }
1176
-
1177
- .tds-checkbox-description{
1302
+ .tds-select-description{
1178
1303
  display:flex;
1179
- grid-area:2 / 2;
1180
1304
  gap:var(--t-spacing-half);
1181
1305
  align-items:flex-start;
1182
1306
  margin:0;
1183
- font-size:var(--tds-checkbox-description-font-size);
1184
- line-height:var(--tds-checkbox-description-line-height);
1185
- color:var(--tds-checkbox-description-color);
1307
+ font-size:var(--t-font-size-sm);
1308
+ line-height:1.35;
1309
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1186
1310
  cursor:text;
1187
1311
  }
1188
1312
 
1189
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1190
- display:var(--tds-checkbox-description-invalid-icon-display);
1313
+ .tds-select-description .tds-select-description-invalid-icon{
1314
+ display:var(--tds-select-description-invalid-icon-display, none);
1191
1315
  flex-shrink:0;
1192
- margin-top:calc(.5lh - .5em);
1193
- line-height:var(--tds-checkbox-description-line-height);
1316
+ margin-block-start:calc(.5lh - .5em);
1317
+ line-height:1.35;
1194
1318
  }
1195
1319
 
1196
- .tds-checkbox--sm{
1197
- --tds-checkbox-line-height:1.35;
1198
- --tds-checkbox-input-size:var(--t-element-size-sm);
1199
- --tds-checkbox-font-size:var(--t-font-size-sm);
1200
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1201
- --tds-checkbox-description-line-height:1.3;
1320
+ .tds-select > .tds-select-hidden-select{
1321
+ position:absolute;
1322
+ inline-size:1px;
1323
+ block-size:1px;
1324
+ padding:0;
1325
+ margin:0;
1326
+ pointer-events:none;
1327
+ opacity:0;
1202
1328
  }
1203
1329
 
1204
- .tds-input:has(textarea){
1205
- --tds-input-padding-block:6px;
1206
- --tds-input-resizer-size:var(--t-element-size-sm);
1207
- --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");
1208
- }
1330
+ .tds-select:has( > button) > button{
1331
+ display:block;
1332
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1333
+ overflow:hidden;
1334
+ text-overflow:ellipsis;
1335
+ color:var(--tds-select-placeholder-color);
1336
+ white-space:nowrap;
1337
+ background-image:none;
1338
+ 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);
1339
+ -webkit-tap-highlight-color:transparent;
1340
+ }
1209
1341
 
1210
- @supports (x: attr(x type(*))){
1342
+ :is(.tds-select:has( > button) > button)::after{
1343
+ position:absolute;
1344
+ inset-block:0;
1345
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1346
+ width:var(--tds-select-caret-size);
1347
+ height:var(--tds-select-caret-size);
1348
+ margin-block:auto;
1349
+ pointer-events:none;
1350
+ content:var(--tds-select-background-image);
1351
+ transform:rotate(0);
1352
+ transition:var(--tds-select-caret-transition);
1353
+ }
1211
1354
 
1212
- .tds-input:has(textarea){
1213
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1214
- }
1355
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1356
+ color:var(--tds-select-color);
1215
1357
  }
1216
1358
 
1217
- .tds-input.tds-textarea--resize-vertical textarea{
1218
- resize:vertical;
1219
- }
1359
+ .tds-select:has( > button) [popover]{
1360
+ inset:auto;
1361
+ inline-size:-moz-max-content;
1362
+ inline-size:max-content;
1363
+ min-inline-size:anchor-size(width);
1364
+ max-inline-size:100vi;
1365
+ max-block-size:min(50vh, 20rem);
1366
+ padding:var(--tds-select-dropdown-padding);
1367
+ margin-block:var(--tds-select-dropdown-margin-block);
1368
+ position-area:block-end span-inline-start;
1369
+ position-try-fallbacks:flip-block, flip-inline;
1370
+ overflow:auto;
1371
+ overflow-x:hidden;
1372
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1373
+ overscroll-behavior:none;
1374
+ -webkit-user-select:none;
1375
+ -moz-user-select:none;
1376
+ user-select:none;
1377
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1378
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1379
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1380
+ background:var(--tds-select-dropdown-background-color);
1381
+ border:var(--tds-select-dropdown-border);
1382
+ border-radius:var(--tds-select-dropdown-border-radius);
1383
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1384
+ opacity:var(--tds-select-dropdown-open-opacity);
1385
+ transform:var(--tds-select-dropdown-open-transform);
1386
+ transition:var(--tds-select-dropdown-transition-enter);
1387
+ }
1220
1388
 
1221
- .tds-input.tds-textarea--resize-none textarea{
1222
- resize:none;
1389
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1390
+ opacity:var(--tds-select-dropdown-closed-opacity);
1391
+ transform:var(--tds-select-dropdown-closed-transform);
1392
+ transition:var(--tds-select-dropdown-transition-exit);
1223
1393
  }
1224
1394
 
1225
- .tds-input.tds-textarea--resize-auto textarea{
1226
- resize:vertical;
1395
+ :is(.tds-select:has( > button) [popover]) ul{
1396
+ padding:0;
1397
+ margin:0;
1398
+ list-style:none;
1227
1399
  }
1228
1400
 
1229
- @supports (field-sizing: content){
1230
- .tds-input.tds-textarea--resize-auto textarea{
1231
- field-sizing:content;
1232
- resize:none;
1401
+ @starting-style{
1402
+ :is(.tds-select:has( > button) [popover]):popover-open{
1403
+ opacity:var(--tds-select-dropdown-closed-opacity);
1404
+ transform:var(--tds-select-dropdown-closed-transform);
1233
1405
  }
1234
1406
  }
1235
1407
 
1236
- .tds-input textarea{
1237
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1238
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1239
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1240
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1241
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1242
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1243
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1244
- --tds-input-scrollbar-thumb-border-radius:999px;
1245
- --tds-input-scrollbar-thumb-border-width:3px;
1246
- --tds-input-scrollbar-track-margin-block:.125rem;
1247
- scrollbar-color:initial;
1248
- transition-timing-function:var(--t-ease-in-out);
1249
- transition-duration:var(--t-duration-200);
1250
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1251
- }
1252
-
1253
- @media (pointer: fine){
1254
- :is(.tds-input textarea)::-webkit-scrollbar{
1255
- width:12px;
1256
- height:12px;
1257
- cursor:default;
1408
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1409
+ .tds-select select:has(> button){
1410
+ padding-inline-end:0;
1411
+ background-image:none;
1412
+ }
1413
+ @media (hover) and (pointer: fine){
1414
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1415
+ padding-block:0;
1416
+ -webkit-appearance:base-select;
1417
+ -moz-appearance:base-select;
1418
+ appearance:base-select;
1419
+ }
1258
1420
  }
1259
-
1260
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1261
- cursor:default;
1262
- background:var(--tds-input-scrollbar-thumb-color);
1263
- background-clip:content-box;
1264
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1265
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1421
+ :is(.tds-select select:has( > button))::picker-icon{
1422
+ flex-shrink:0;
1423
+ width:var(--tds-select-caret-size);
1424
+ height:var(--tds-select-caret-size);
1425
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1426
+ content:var(--tds-select-background-image);
1427
+ transition:var(--tds-select-caret-transition);
1266
1428
  }
1267
1429
 
1268
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1430
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1431
+ opacity:var(--tds-select-dropdown-closed-opacity);
1432
+ transform:var(--tds-select-dropdown-closed-transform);
1433
+ transition:var(--tds-select-dropdown-transition-exit);
1270
1434
  }
1271
1435
 
1272
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1436
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1437
+ outline-color:var(--t-focus-ring-color);
1438
+ outline-offset:var(--t-focus-ring-offset);
1439
+ border-color:var(--tds-select-border-color-active);
1274
1440
  }
1275
1441
 
1276
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1442
+ :is(.tds-select select:has( > button)):open::picker-icon{
1443
+ opacity:1;
1444
+ transform:rotate(.5turn);
1278
1445
  }
1279
1446
 
1280
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
- background:var(--tds-input-scrollbar-surface-color);
1447
+ :is(.tds-select select:has( > button)) selectedcontent{
1448
+ overflow:hidden;
1449
+ text-overflow:ellipsis;
1450
+ line-height:calc(var(--tds-select-min-height) - 2px);
1451
+ white-space:nowrap;
1282
1452
  }
1283
1453
 
1284
- :is(.tds-input textarea)::-webkit-resizer{
1285
- background:var(--tds-input-resizer-icon) no-repeat;
1286
- background-position:right bottom;
1287
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1454
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1455
+ color:var(--tds-select-placeholder-color);
1288
1456
  }
1289
1457
 
1290
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
- cursor:default;
1458
+ :is(.tds-select select:has( > button))::picker(select){
1459
+ inset:auto;
1460
+ inline-size:-moz-max-content;
1461
+ inline-size:max-content;
1462
+ min-inline-size:anchor-size(width);
1463
+ max-inline-size:100vi;
1464
+ padding:var(--tds-select-dropdown-padding);
1465
+ margin-block:var(--tds-select-dropdown-margin-block);
1466
+ position-try-fallbacks:flip-block, flip-inline;
1467
+ overflow:auto;
1468
+ overflow-x:hidden;
1469
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1470
+ overscroll-behavior:none;
1471
+ -webkit-user-select:none;
1472
+ -moz-user-select:none;
1473
+ user-select:none;
1474
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1475
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1476
+ background:var(--tds-select-dropdown-background-color);
1477
+ border:var(--tds-select-dropdown-border);
1478
+ border-radius:var(--tds-select-dropdown-border-radius);
1479
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1480
+ opacity:var(--tds-select-dropdown-open-opacity);
1481
+ transform:var(--tds-select-dropdown-open-transform);
1482
+ transition:var(--tds-select-dropdown-transition-enter);
1293
1483
  }
1294
1484
 
1295
- @supports (-moz-appearance: none){
1296
- :is(.tds-input textarea){
1297
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1298
- scrollbar-width:thin;
1299
- }
1485
+ :is(.tds-select select:has( > button)) option::checkmark{
1486
+ display:none;
1487
+ }
1300
1488
 
1301
- @media (hover){
1302
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1303
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1304
- }
1489
+ @starting-style{
1490
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1491
+ opacity:var(--tds-select-dropdown-closed-opacity);
1492
+ transform:var(--tds-select-dropdown-closed-transform);
1305
1493
  }
1306
1494
  }
1307
- }
1308
-
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);
1351
-
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);
1362
-
1363
- position:relative;
1364
- display:flex;
1365
- flex-direction:column;
1366
- gap:var(--t-spacing-half);
1367
1495
  }
1368
1496
 
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
- }
1375
-
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
- }
1406
-
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);
1409
- }
1410
-
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);
1415
- }
1416
-
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);
1419
- }
1420
-
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
- }
1429
-
1430
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1431
- margin-left:.25ch;
1432
- color:var(--t-text-color-status-error);
1433
- content:"*";
1434
- }
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
- }
1442
-
1443
- .tds-select:has( > [popover]:popover-open) > button{
1444
- border-color:var(--tds-select-border-color-active);
1445
- }
1446
-
1447
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1448
- transform:rotate(.5turn);
1449
- }
1450
-
1451
- .tds-select :is(hr,li[role="separator"]){
1452
- margin-block:var(--t-spacing-half);
1453
- color:var(--tds-select-border-color);
1454
- border:0;
1455
- border-top:1px solid;
1456
- }
1457
-
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
- }
1497
+ .tds-toggle-switch{
1498
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1499
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
1500
+ --tds-toggle-switch-cursor:pointer;
1501
+ --tds-toggle-switch-display:inline-grid;
1502
+ --tds-toggle-switch-line-height:1.4;
1470
1503
 
1471
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1472
- outline:none;
1473
- }
1504
+ --tds-toggle-switch-label-color:var(--t-form-color);
1474
1505
 
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
- }
1506
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1507
+ --tds-toggle-switch-track-outline:none;
1508
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1509
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1510
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1478
1511
 
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
- }
1512
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1513
+ --tds-toggle-switch-thumb-transform:translateX(0);
1514
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1482
1515
 
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
- }
1516
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1517
+ --tds-toggle-switch-description-line-height:1.35;
1518
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1519
+ position:relative;
1487
1520
 
1488
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1489
- background:transparent;
1490
- }
1521
+ display:var(--tds-toggle-switch-display);
1522
+ grid-template-columns:auto;
1523
+ grid-auto-columns:1fr;
1524
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1525
+ -webkit-user-select:none;
1526
+ -moz-user-select:none;
1527
+ user-select:none;
1528
+ }
1491
1529
 
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;
1530
+ .tds-toggle-switch input[type="checkbox"]{
1531
+ position:absolute;
1532
+ width:var(--tds-toggle-switch-track-width);
1533
+ height:var(--tds-toggle-switch-track-height);
1534
+ margin:0;
1535
+ -webkit-appearance:none;
1536
+ -moz-appearance:none;
1537
+ appearance:none;
1538
+ cursor:var(--tds-toggle-switch-cursor);
1539
+ outline:var(--tds-toggle-switch-track-outline);
1540
+ outline-offset:var(--t-focus-ring-offset);
1541
+ background-color:transparent;
1542
+ border:0;
1543
+ border-radius:var(--t-border-radius-round);
1506
1544
  }
1507
1545
 
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);
1546
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1547
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1514
1548
  }
1515
1549
 
1516
- @container scroll-state(stuck){
1550
+ .tds-toggle-switch label{
1551
+ display:inline-flex;
1552
+ grid-area:1 / 2;
1553
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
1554
+ column-gap:var(--tds-toggle-switch-column-gap);
1555
+ margin-top:-.09375em;
1556
+ font-size:var(--tds-toggle-switch-font-size);
1557
+ font-weight:var(--t-font-weight-normal);
1558
+ line-height:var(--tds-toggle-switch-line-height);
1559
+ color:var(--tds-toggle-switch-label-color);
1560
+ cursor:var(--tds-toggle-switch-cursor);
1561
+ }
1517
1562
 
1518
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1519
- color:var(--tds-select-group-label-color-stuck);
1520
- }
1563
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1564
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1565
+ }
1521
1566
 
1522
- @media (forced-colors: active){
1567
+ .tds-toggle-switch:has(input:checked){
1568
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1569
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1570
+ }
1523
1571
 
1524
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1525
- color:var(--tds-select-group-label-color-stuck);
1572
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1573
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1526
1574
  }
1527
- }
1528
- }
1529
1575
 
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);
1576
+ .tds-toggle-switch:has(input:disabled){
1577
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1578
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1579
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1580
+ --tds-toggle-switch-cursor:not-allowed;
1581
+ }
1582
+
1583
+ .tds-toggle-switch-track{
1584
+ position:relative;
1585
+ flex-shrink:0;
1586
+ width:var(--tds-toggle-switch-track-width);
1587
+ height:var(--tds-toggle-switch-track-height);
1588
+ background-color:var(--tds-toggle-switch-track-background-color);
1589
+ border-radius:var(--t-border-radius-round);
1590
+ transition:var(--tds-toggle-switch-track-transition);
1591
+ }
1592
+
1593
+ .tds-toggle-switch-track::before{
1594
+ position:absolute;
1595
+ top:var(--t-spacing-fourth);
1596
+ left:var(--t-spacing-fourth);
1597
+ width:var(--tds-toggle-switch-thumb-size);
1598
+ height:var(--tds-toggle-switch-thumb-size);
1599
+ content:"";
1600
+ background-color:#fff;
1601
+ border-radius:var(--t-border-radius-round);
1602
+ transform:var(--tds-toggle-switch-thumb-transform);
1603
+ transition:var(--tds-toggle-switch-thumb-transition);
1533
1604
  }
1534
1605
 
1535
1606
  @media (prefers-reduced-motion: reduce){
1536
1607
 
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;
1608
+ .tds-toggle-switch-track{
1609
+ --tds-toggle-switch-track-transition:none;
1610
+ --tds-toggle-switch-thumb-transition:none;
1545
1611
  }
1546
1612
  }
1547
1613
 
1548
- .tds-select-description{
1614
+ .tds-toggle-switch-description{
1549
1615
  display:flex;
1550
- gap:var(--t-spacing-half);
1616
+ grid-area:2 / 2;
1551
1617
  align-items:flex-start;
1552
1618
  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));
1619
+ font-size:var(--tds-toggle-switch-description-font-size);
1620
+ line-height:var(--tds-toggle-switch-description-line-height);
1621
+ color:var(--tds-toggle-switch-description-color);
1556
1622
  cursor:text;
1557
1623
  }
1558
1624
 
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);
1563
- line-height:1.35;
1564
- }
1565
-
1566
- .tds-select > .tds-select-hidden-select{
1567
- position:absolute;
1568
- inline-size:1px;
1569
- block-size:1px;
1570
- padding:0;
1571
- margin:0;
1572
- pointer-events:none;
1573
- opacity:0;
1625
+ .tds-toggle-switch--sm{
1626
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1627
+ --tds-toggle-switch-line-height:1.35;
1628
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1629
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1630
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1631
+ --tds-toggle-switch-description-line-height:1.3;
1574
1632
  }
1575
1633
 
1576
- .tds-select:has( > button) > button{
1577
- display:block;
1578
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1579
- overflow:hidden;
1580
- text-overflow:ellipsis;
1581
- color:var(--tds-select-placeholder-color);
1582
- white-space:nowrap;
1583
- background-image:none;
1584
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1585
- -webkit-tap-highlight-color:transparent;
1586
- }
1634
+ .tds-toggle-switch--hide-label{
1635
+ --tds-toggle-switch-display:inline-flex;
1636
+ }
1587
1637
 
1588
- :is(.tds-select:has( > button) > button)::after{
1589
- position:absolute;
1590
- inset-block:0;
1591
- inset-inline-end:var(--tds-select-caret-inline-offset);
1592
- width:var(--tds-select-caret-size);
1593
- height:var(--tds-select-caret-size);
1594
- margin-block:auto;
1595
- pointer-events:none;
1596
- content:var(--tds-select-background-image);
1597
- transform:rotate(0);
1598
- transition:var(--tds-select-caret-transition);
1599
- }
1638
+ .tds-input:has(textarea){
1639
+ --tds-input-padding-block:6px;
1640
+ --tds-input-resizer-size:var(--t-element-size-sm);
1641
+ --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");
1642
+ }
1600
1643
 
1601
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1602
- color:var(--tds-select-color);
1603
- }
1644
+ @supports (x: attr(x type(*))){
1604
1645
 
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);
1646
+ .tds-input:has(textarea){
1647
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1648
+ }
1633
1649
  }
1634
1650
 
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);
1651
+ .tds-input.tds-textarea--resize-vertical textarea{
1652
+ resize:vertical;
1639
1653
  }
1640
1654
 
1641
- :is(.tds-select:has( > button) [popover]) ul{
1642
- padding:0;
1643
- margin:0;
1644
- list-style:none;
1655
+ .tds-input.tds-textarea--resize-none textarea{
1656
+ resize:none;
1645
1657
  }
1646
1658
 
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);
1651
- }
1659
+ .tds-input.tds-textarea--resize-auto textarea{
1660
+ resize:vertical;
1652
1661
  }
1653
1662
 
1654
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1655
- .tds-select select:has(> button){
1656
- padding-inline-end:0;
1657
- background-image:none;
1658
- }
1659
- @media (hover) and (pointer: fine){
1660
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1661
- padding-block:0;
1662
- -webkit-appearance:base-select;
1663
- -moz-appearance:base-select;
1664
- appearance:base-select;
1663
+ @supports (field-sizing: content){
1664
+ .tds-input.tds-textarea--resize-auto textarea{
1665
+ field-sizing:content;
1666
+ resize:none;
1665
1667
  }
1666
1668
  }
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);
1669
+
1670
+ .tds-input textarea{
1671
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1672
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1673
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1674
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1675
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1676
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1677
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1678
+ --tds-input-scrollbar-thumb-border-radius:999px;
1679
+ --tds-input-scrollbar-thumb-border-width:3px;
1680
+ --tds-input-scrollbar-track-margin-block:.125rem;
1681
+ scrollbar-color:initial;
1682
+ transition-timing-function:var(--t-ease-in-out);
1683
+ transition-duration:var(--t-duration-200);
1684
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1685
+ }
1686
+
1687
+ @media (pointer: fine){
1688
+ :is(.tds-input textarea)::-webkit-scrollbar{
1689
+ width:12px;
1690
+ height:12px;
1691
+ cursor:default;
1674
1692
  }
1675
1693
 
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);
1694
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1695
+ cursor:default;
1696
+ background:var(--tds-input-scrollbar-thumb-color);
1697
+ background-clip:content-box;
1698
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1699
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1680
1700
  }
1681
1701
 
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);
1702
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1703
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1686
1704
  }
1687
1705
 
1688
- :is(.tds-select select:has( > button)):open::picker-icon{
1689
- opacity:1;
1690
- transform:rotate(.5turn);
1706
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1707
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1691
1708
  }
1692
1709
 
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;
1710
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1711
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1698
1712
  }
1699
1713
 
1700
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1701
- color:var(--tds-select-placeholder-color);
1714
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1715
+ background:var(--tds-input-scrollbar-surface-color);
1702
1716
  }
1703
1717
 
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);
1718
+ :is(.tds-input textarea)::-webkit-resizer{
1719
+ background:var(--tds-input-resizer-icon) no-repeat;
1720
+ background-position:right bottom;
1721
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1729
1722
  }
1730
1723
 
1731
- :is(.tds-select select:has( > button)) option::checkmark{
1732
- display:none;
1724
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1725
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1726
+ cursor:default;
1733
1727
  }
1734
1728
 
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);
1729
+ @supports (-moz-appearance: none){
1730
+ :is(.tds-input textarea){
1731
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1732
+ scrollbar-width:thin;
1733
+ }
1734
+
1735
+ @media (hover){
1736
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1737
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1738
+ }
1739
1739
  }
1740
1740
  }
1741
- }
1741
+ }
1742
1742
 
1743
1743
  .tds-input{
1744
1744
  --tds-input-border-color:var(--t-form-border-color);
@@ -3613,223 +3613,75 @@ a[class="tds-btn"]{
3613
3613
  }
3614
3614
 
3615
3615
  .tds-combo-box-list{
3616
- padding:0;
3617
- margin:0;
3618
- }
3619
-
3620
- .tds-combo-box-list-item{
3621
- display:block;
3622
- padding-block:var(--t-spacing-1);
3623
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3624
- overflow:hidden;
3625
- text-overflow:ellipsis;
3626
- font-size:1rem;
3627
- color:var(--t-text-color);
3628
- white-space:nowrap;
3629
- cursor:default;
3630
- outline-offset:-1px;
3631
- border-radius:var(--t-border-radius);
3632
- }
3633
-
3634
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3635
- background:var(--t-fill-color-neutral-070);
3636
- }
3637
-
3638
- .tds-combo-box-list-item[data-selected]{
3639
- background:var(--t-fill-color-button-interaction-ghost-active);
3640
- }
3641
-
3642
- .tds-combo-box-list-item[data-focus-visible]{
3643
- outline:var(--t-focus-ring-outline);
3644
- outline-offset:-1px;
3645
- }
3646
-
3647
- .tds-combo-box-list-item[data-disabled]{
3648
- color:var(--t-form-color-disabled);
3649
- cursor:not-allowed;
3650
- }
3651
-
3652
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3653
- background:transparent;
3654
- }
3655
-
3656
- .tds-combo-box-list-section:not(:first-child){
3657
- margin-block-start:var(--t-spacing-half);
3658
- }
3659
-
3660
- .tds-combo-box-section-header{
3661
- padding-block:var(--t-spacing-1);
3662
- padding-inline:var(--t-spacing-1);
3663
- font-size:var(--t-font-size-sm);
3664
- font-weight:var(--t-font-weight-semibold);
3665
- color:var(--t-text-color-secondary);
3666
- }
3667
-
3668
- .tds-combo-box-description{
3669
- display:flex;
3670
- gap:var(--t-spacing-half);
3671
- align-items:flex-start;
3672
- margin:0;
3673
- font-size:var(--t-font-size-sm);
3674
- line-height:1.35;
3675
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3676
- cursor:text;
3677
- }
3678
-
3679
- .tds-combo-box-description-invalid-icon{
3680
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3681
- flex-shrink:0;
3682
- margin-block-start:calc(.5lh - .5em);
3683
- line-height:1.35;
3684
- }
3685
-
3686
- .tds-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;
3698
-
3699
- position:relative;
3700
- display:flex;
3701
- flex-direction:column;
3702
- gap:var(--t-spacing-half);
3703
- }
3704
-
3705
- .tds-time-field[data-required] .tds-time-field-label::after{
3706
- margin-left:.25ch;
3707
- color:var(--t-text-color-status-error);
3708
- content:"*";
3709
- }
3710
-
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;
3718
- }
3719
-
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);
3725
- }
3726
-
3727
- .tds-time-field[data-disabled] .tds-time-field-label{
3728
- color:var(--t-form-color-disabled);
3729
- }
3730
-
3731
- .tds-time-field[data-disabled] .tds-time-field-input{
3732
- cursor:not-allowed;
3733
- }
3734
-
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);
3616
+ padding:0;
3617
+ margin:0;
3738
3618
  }
3739
3619
 
3740
- .tds-time-field-label{
3741
- font-size:var(--t-font-size-md);
3742
- font-weight:var(--t-font-weight-normal);
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;
3743
3627
  color:var(--t-text-color);
3628
+ white-space:nowrap;
3744
3629
  cursor:default;
3630
+ outline-offset:-1px;
3631
+ border-radius:var(--t-border-radius);
3745
3632
  }
3746
3633
 
3747
- .tds-time-field-input{
3748
- display:flex;
3749
- align-items:center;
3750
- 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);
3754
- font-family:inherit;
3755
- font-size:var(--tds-time-field-font-size);
3756
- font-variant-numeric:tabular-nums;
3757
- line-height:1;
3758
- color:var(--tds-time-field-color);
3759
- cursor:text;
3760
- outline:var(--t-focus-ring-width) solid transparent;
3761
- 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);
3764
- border-radius:var(--t-form-border-radius);
3765
- }
3766
-
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);
3634
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3635
+ background:var(--t-fill-color-neutral-070);
3769
3636
  }
3770
3637
 
3771
- .tds-time-field-input[data-focus-within]{
3772
- outline-color:var(--t-focus-ring-color);
3773
- outline-offset:var(--t-focus-ring-offset);
3774
- border-color:var(--tds-time-field-border-color-active);
3638
+ .tds-combo-box-list-item[data-selected]{
3639
+ background:var(--t-fill-color-button-interaction-ghost-active);
3775
3640
  }
3776
3641
 
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);
3642
+ .tds-combo-box-list-item[data-focus-visible]{
3643
+ outline:var(--t-focus-ring-outline);
3644
+ outline-offset:-1px;
3781
3645
  }
3782
3646
 
3783
- .tds-time-field-input[data-readonly][data-hovered]{
3784
- border-color:var(--t-form-border-color-readonly);
3785
- }
3647
+ .tds-combo-box-list-item[data-disabled]{
3648
+ color:var(--t-form-color-disabled);
3649
+ cursor:not-allowed;
3650
+ }
3786
3651
 
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);
3790
- border-color:var(--t-form-border-color-hover);
3652
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3653
+ background:transparent;
3791
3654
  }
3792
3655
 
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);
3799
- }
3800
-
3801
- .tds-time-field-segment[data-placeholder]{
3802
- color:var(--tds-time-field-placeholder-color);
3803
- }
3804
-
3805
- .tds-time-field-segment[data-focused]{
3806
- color:var(--t-text-color-inverted);
3807
- outline:0;
3808
- background:var(--t-fill-color-interaction);
3656
+ .tds-combo-box-list-section:not(:first-child){
3657
+ margin-block-start:var(--t-spacing-half);
3809
3658
  }
3810
3659
 
3811
- .tds-time-field-segment-separator{
3812
- padding-inline:0;
3813
- color:var(--tds-time-field-placeholder-color);
3660
+ .tds-combo-box-section-header{
3661
+ padding-block:var(--t-spacing-1);
3662
+ padding-inline:var(--t-spacing-1);
3663
+ font-size:var(--t-font-size-sm);
3664
+ font-weight:var(--t-font-weight-semibold);
3665
+ color:var(--t-text-color-secondary);
3814
3666
  }
3815
3667
 
3816
- .tds-time-field-description{
3668
+ .tds-combo-box-description{
3817
3669
  display:flex;
3818
3670
  gap:var(--t-spacing-half);
3819
3671
  align-items:flex-start;
3820
3672
  margin:0;
3821
3673
  font-size:var(--t-font-size-sm);
3822
3674
  line-height:1.35;
3823
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3675
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3824
3676
  cursor:text;
3825
3677
  }
3826
3678
 
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;
3832
- }
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
+ }
3833
3685
 
3834
3686
  .tds-date-picker{
3835
3687
  --tds-date-picker-border-color:var(--t-form-border-color);
@@ -4270,6 +4122,154 @@ a[class="tds-btn"]{
4270
4122
  color:var(--t-text-color-secondary);
4271
4123
  }
4272
4124
 
4125
+ .tds-time-field{
4126
+ --tds-time-field-border-color:var(--t-form-border-color);
4127
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4128
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4129
+ --tds-time-field-background-color:var(--t-form-background-color);
4130
+ --tds-time-field-color:var(--t-form-color);
4131
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4132
+ --tds-time-field-font-size:var(--t-font-size-md);
4133
+ --tds-time-field-min-height:var(--t-container-size-md);
4134
+ --tds-time-field-padding-block:6px;
4135
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4136
+ --tds-time-field-description-invalid-icon-display:none;
4137
+
4138
+ position:relative;
4139
+ display:flex;
4140
+ flex-direction:column;
4141
+ gap:var(--t-spacing-half);
4142
+ }
4143
+
4144
+ .tds-time-field[data-required] .tds-time-field-label::after{
4145
+ margin-left:.25ch;
4146
+ color:var(--t-text-color-status-error);
4147
+ content:"*";
4148
+ }
4149
+
4150
+ .tds-time-field[data-invalid]{
4151
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4152
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4153
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4154
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4155
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4156
+ --tds-time-field-description-invalid-icon-display:inline-block;
4157
+ }
4158
+
4159
+ .tds-time-field[data-disabled]{
4160
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4161
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4162
+ --tds-time-field-color:var(--t-form-color-disabled);
4163
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4164
+ }
4165
+
4166
+ .tds-time-field[data-disabled] .tds-time-field-label{
4167
+ color:var(--t-form-color-disabled);
4168
+ }
4169
+
4170
+ .tds-time-field[data-disabled] .tds-time-field-input{
4171
+ cursor:not-allowed;
4172
+ }
4173
+
4174
+ .tds-time-field--lg{
4175
+ --tds-time-field-min-height:var(--t-container-size-lg);
4176
+ --tds-time-field-font-size:var(--t-font-size-lg);
4177
+ }
4178
+
4179
+ .tds-time-field-label{
4180
+ font-size:var(--t-font-size-md);
4181
+ font-weight:var(--t-font-weight-normal);
4182
+ color:var(--t-text-color);
4183
+ cursor:default;
4184
+ }
4185
+
4186
+ .tds-time-field-input{
4187
+ display:flex;
4188
+ align-items:center;
4189
+ inline-size:100%;
4190
+ min-block-size:var(--tds-time-field-min-height);
4191
+ padding-block:var(--tds-time-field-padding-block);
4192
+ padding-inline:var(--t-spacing-1);
4193
+ font-family:inherit;
4194
+ font-size:var(--tds-time-field-font-size);
4195
+ font-variant-numeric:tabular-nums;
4196
+ line-height:1;
4197
+ color:var(--tds-time-field-color);
4198
+ cursor:text;
4199
+ outline:var(--t-focus-ring-width) solid transparent;
4200
+ outline-offset:0;
4201
+ background-color:var(--tds-time-field-background-color);
4202
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4203
+ border-radius:var(--t-form-border-radius);
4204
+ }
4205
+
4206
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4207
+ border-color:var(--tds-time-field-border-color-hover);
4208
+ }
4209
+
4210
+ .tds-time-field-input[data-focus-within]{
4211
+ outline-color:var(--t-focus-ring-color);
4212
+ outline-offset:var(--t-focus-ring-offset);
4213
+ border-color:var(--tds-time-field-border-color-active);
4214
+ }
4215
+
4216
+ .tds-time-field-input[data-readonly]{
4217
+ color:var(--t-form-color-readonly);
4218
+ background-color:var(--t-form-background-color-readonly);
4219
+ border-color:var(--t-form-border-color-readonly);
4220
+ }
4221
+
4222
+ .tds-time-field-input[data-readonly][data-hovered]{
4223
+ border-color:var(--t-form-border-color-readonly);
4224
+ }
4225
+
4226
+ .tds-time-field-input[data-readonly][data-focus-within]{
4227
+ outline-color:var(--t-focus-ring-color);
4228
+ outline-offset:var(--t-focus-ring-offset);
4229
+ border-color:var(--t-form-border-color-hover);
4230
+ }
4231
+
4232
+ .tds-time-field-segment{
4233
+ padding-inline:1px;
4234
+ font-variant-numeric:tabular-nums;
4235
+ cursor:text;
4236
+ caret-color:transparent;
4237
+ border-radius:var(--t-border-radius-sm);
4238
+ }
4239
+
4240
+ .tds-time-field-segment[data-placeholder]{
4241
+ color:var(--tds-time-field-placeholder-color);
4242
+ }
4243
+
4244
+ .tds-time-field-segment[data-focused]{
4245
+ color:var(--t-text-color-inverted);
4246
+ outline:0;
4247
+ background:var(--t-fill-color-interaction);
4248
+ }
4249
+
4250
+ .tds-time-field-segment-separator{
4251
+ padding-inline:0;
4252
+ color:var(--tds-time-field-placeholder-color);
4253
+ }
4254
+
4255
+ .tds-time-field-description{
4256
+ display:flex;
4257
+ gap:var(--t-spacing-half);
4258
+ align-items:flex-start;
4259
+ margin:0;
4260
+ font-size:var(--t-font-size-sm);
4261
+ line-height:1.35;
4262
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4263
+ cursor:text;
4264
+ }
4265
+
4266
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4267
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4268
+ flex-shrink:0;
4269
+ margin-block-start:calc(.5lh - .5em);
4270
+ line-height:1.35;
4271
+ }
4272
+
4273
4273
  .tds-number-stepper{
4274
4274
  --tds-number-stepper-border-color:var(--t-form-border-color);
4275
4275
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);