@planningcenter/tapestry 3.4.1-rc.9 → 3.4.1

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 (9) hide show
  1. package/dist/index.css +5 -3
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +1374 -1372
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +1374 -1372
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/unstable.css +5 -3
  8. package/dist/unstable.css.map +1 -1
  9. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -1,641 +1,461 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
7
4
  }
5
+ }
8
6
 
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
14
-
15
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
-
17
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
- --tds-sidenav-collapse-closed-opacity:0;
20
- --tds-sidenav-collapse-open-opacity:1;
21
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
- --tds-sidenav-collapse-open-transform:translateY(0);
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:transparent;
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
23
25
 
24
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
28
28
 
29
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
- --tds-sidenav-item-nested-background-selected:transparent;
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
32
 
33
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
36
35
 
37
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
- }
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
40
39
 
41
- @media (prefers-reduced-motion: reduce){
42
- tds-sidenav,
43
- .tds-sidenav{
44
- --tds-sidenav-collapse-transition-enter:none;
45
- --tds-sidenav-collapse-transition-exit:none;
46
- --tds-sidenav-collapse-closed-transform:none;
47
- --tds-sidenav-collapse-open-transform:none;
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
48
45
  }
49
- }
50
46
 
51
- .tds-sidenav--theme-gray{
52
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
57
49
  }
58
- }
59
50
 
60
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
- display:flex;
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
62
56
  }
63
57
 
64
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
- flex-direction:column;
66
- gap:var(--t-spacing-half);
67
- width:100%;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
76
+ }
68
77
  }
69
-
70
- .tds-sidenav-section-list{
71
- width:100%;
72
- padding:0;
73
- margin:0;
74
- list-style:none;
75
78
  }
76
79
 
77
- .tds-sidenav-section-header{
80
+ .tds-page-header{
78
81
  display:flex;
79
- align-items:baseline;
80
- justify-content:space-between;
81
- padding-top:var(--t-spacing-2);
82
+ flex-direction:column;
83
+ padding-top:var(--tds-page-header-padding-y);
84
+ color:var(--tds-page-header-color);
85
+ background:var(--tds-page-header-background-color);
86
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
82
87
  }
83
88
 
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;
89
+ .tds-page-header:not(.has-nav){
90
+ padding-bottom:var(--tds-page-header-padding-y);
91
91
  }
92
92
 
93
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
- padding-top:0;
93
+ .tds-page-header.inactive{
94
+ background:var(--tds-page-header-background-color-inactive);
95
95
  }
96
96
 
97
- .tds-sidenav-section-header [slot="label-actions"]{
98
- display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
97
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
+ width:100%;
101
99
  }
102
100
 
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
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
120
102
  display:flex;
121
- gap:12px;
122
- align-items:center;
123
- width:100%;
124
- padding:12px;
125
- overflow:hidden;
126
- font-size:var(--t-font-size-sm);
127
- line-height:18px;
128
- color:var(--t-text-color-headline);
129
- white-space:nowrap;
130
- text-decoration:none;
131
- -webkit-appearance:none;
132
- -moz-appearance:none;
133
- appearance:none;
134
- cursor:pointer;
135
- background-color:var(--tds-sidenav-item-background, transparent);
136
- border:0;
137
- border-radius:var(--t-border-radius);
138
- transition:var(--tds-sidenav-item-transition);
103
+ flex-flow:row wrap;
104
+ gap:var(--t-spacing-half) var(--t-spacing-1);
105
+ align-items:flex-start;
106
+ justify-content:flex-start;
107
+ min-width:0;
139
108
  }
140
109
 
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;
110
+ :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{
111
+ display:flex;
112
+ gap:var(--tds-page-header-nav-gap);
113
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
+ margin:0 0 -1px;
115
+ overflow:auto;
116
+ list-style:none;
117
+ background:var(--tds-page-header-nav-background);
148
118
  }
149
119
 
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);
120
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
+ position:relative;
122
+ display:inline-flex;
123
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
+ font-size:var(--t-font-size-sm);
125
+ line-height:22px;
126
+ color:var(--tds-page-header-nav-item-color);
127
+ white-space:nowrap;
153
128
  text-decoration:none;
129
+ -webkit-appearance:none;
130
+ -moz-appearance:none;
131
+ appearance:none;
132
+ cursor:pointer;
133
+ outline-offset:-2px;
134
+ background-color:var(--tds-page-header-nav-item-background-color);
135
+ background-clip:padding-box;
136
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
154
139
  }
155
140
 
156
- :is(.tds-sidenav-item :is(a,button)):active{
157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
- }
159
-
160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
- overflow:hidden;
162
- color:var(--tds-sidenav-item-icon-color);
163
- }
164
-
165
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
- display:block;
167
- width:var(--tds-sidenav-item-icon-size);
168
- height:var(--tds-sidenav-item-icon-size);
141
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
169
146
  }
170
147
 
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
173
- }
148
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
+ }
174
154
 
175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
- visibility:visible;
177
- block-size:auto;
178
- opacity:1;
179
- }
180
-
181
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
-
185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
- font-weight:var(--t-font-weight-semibold);
187
- }
188
-
189
- .tds-sidenav-item:has(.tds-sidenav-section){
190
- display:flex;
191
- flex-direction:column;
192
- gap:var(--t-spacing-half);
193
- }
194
-
195
- .tds-sidenav-item .tds-sidenav-section-list{
196
- --tds-sidenav-item-depth:1;
197
- gap:0;
198
- }
155
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
+ background-color:var(--tds-page-header-nav-item-background-color-active);
157
+ border-color:var(--tds-page-header-nav-item-border-color-active);
158
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
+ }
199
160
 
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
- }
161
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
+ color:var(--tds-page-header-nav-item-color-disabled);
164
+ cursor:not-allowed;
165
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
+ opacity:1;
167
+ }
207
168
 
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
210
- }
169
+ @media (min-width: 600px){
170
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
+ position:absolute;
172
+ inset:auto -1px -1px;
173
+ height:1px;
174
+ pointer-events:none;
175
+ content:"";
176
+ background-color:var(--tds-page-header-bottom-border-color);
177
+ }
178
+ }
211
179
 
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;
180
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
+ position:relative;
218
182
  }
219
183
 
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);
184
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
229
187
  }
230
188
 
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
232
190
  position:absolute;
233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
- z-index:-1;
235
- height:100%;
191
+ top:-5px;
192
+ right:-2px;
193
+ width:10px;
194
+ height:10px;
236
195
  content:"";
237
- background-color:var(--tds-sidenav-item-nested-background);
238
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
- transition:var(--tds-sidenav-item-transition);
240
- }
241
-
242
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
- display:block;
244
- text-align:left;
245
- white-space:normal;
246
- }
247
-
248
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
196
+ background:var(--tds-page-header-nav-item-indicator-color);
197
+ border-radius:50%;
251
198
  }
252
199
 
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);
200
+ @media (prefers-reduced-motion: no-preference){
201
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
+ animation:indicator-pulse 1.25s ease infinite;
203
+ }
255
204
  }
256
205
 
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{
206
+ .tds-page-header__title-bar{
263
207
  display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
208
+ flex-direction:column;
209
+ gap:var(--t-spacing-2) var(--t-spacing-1);
210
+ align-items:flex-start;
211
+ justify-content:space-between;
212
+ padding:0 var(--tds-page-header-padding-x);
267
213
  }
268
214
 
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
215
+ .tds-page-header--profile > .tds-page-header__title-bar{
216
+ align-items:center;
271
217
  }
272
218
 
273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
- flex:1;
275
- order:1;
276
- margin:0;
277
- font-size:var(--t-font-size-lg);
278
- font-weight:var(--t-font-weight-medium);
279
- color:var(--t-text-color-headline);
280
- }
219
+ .tds-page-header__primary{
220
+ width:100%;
221
+ }
281
222
 
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
+ .tds-page-header__primary h1{
224
+ margin:0;
225
+ font-size:var(--tds-page-header-headline-font-size);
226
+ font-weight:var(--t-font-weight-normal);
227
+ line-height:32px;
228
+ color:var(--tds-page-header-headline-color);
229
+ overflow-wrap:break-word;
300
230
  }
301
231
 
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;
232
+ @media (min-width: 960px){
233
+ .tds-page-header__primary{
234
+ flex:1 1 max-content;
235
+ width:auto;
236
+ min-width:0;
237
+ max-width:100%;
310
238
  }
311
239
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
240
+ .tds-page-header__title-bar,
241
+ .tds-page-header--profile .tds-page-header__title-bar{
242
+ flex-flow:row nowrap;
243
+ row-gap:12px;
244
+ align-items:flex-start;
314
245
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
246
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
+ width:auto;
318
248
  }
319
249
 
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
250
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
+ justify-content:flex-end;
323
252
  }
253
+ }
324
254
 
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
- }
255
+ .tds-page-header-phone,
256
+ .tds-page-header-email{
257
+ color:var(--tds-page-header-color);
258
+ white-space:nowrap;
259
+ }
336
260
 
337
- .tds-sidenav-collapse:not(.\:popover-open){
338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
339
- transition:var(--tds-sidenav-collapse-transition-exit);
340
- }
341
- }
261
+ .tds-page-header-email{
262
+ max-width:100%;
263
+ overflow:hidden;
264
+ text-overflow:ellipsis;
342
265
  }
343
266
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
267
+ @keyframes indicator-pulse{
268
+ 0%{
269
+ opacity:.3;
270
+ transform:scale(.9);
271
+ }
272
+
273
+ 100%{
274
+ opacity:0;
275
+ transform:scale(1.75);
347
276
  }
348
277
  }
349
278
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
279
+ .tds-combo-box{
280
+ --tds-combo-box-button-offset:4px;
281
+ }
353
282
 
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
283
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
284
+ transform:rotate(.5turn);
285
+ }
357
286
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
287
+ .tds-combo-box--lg{
288
+ --tds-combo-box-button-offset:5px;
289
+ }
362
290
 
363
- @layer t-critical{
364
- tds-page-header:not(.hydrated){
365
- display:none;
366
- }
291
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
292
+ display:none;
367
293
  }
368
294
 
369
- @layer t-component{
370
- .tds-page-header{
371
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
- --tds-page-header-color:var(--t-text-color);
374
- --tds-page-header-bottom-border-color:transparent;
375
- --tds-page-header-headline-color:var(--t-text-color-headline);
376
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
- --tds-page-header-padding-x:var(--t-spacing-2);
378
- --tds-page-header-padding-y:var(--t-spacing-2);
379
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
- --tds-page-header-nav-gap:var(--t-spacing-1);
381
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
382
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
- --tds-page-header-nav-item-border-width:1px;
295
+ .tds-combo-box-input{
296
+ display:flex;
297
+ flex:1;
298
+ align-items:center;
299
+ padding-block:var(--tds-field-padding-block);
300
+ padding-inline:var(--tds-field-padding-inline);
301
+ font-family:inherit;
302
+ font-size:inherit;
303
+ color:inherit;
304
+ outline:0;
305
+ background:transparent;
306
+ border:0;
307
+ }
387
308
 
388
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
309
+ .tds-combo-box-input:has( + .tds-combo-box-button){
310
+ padding-inline-end:0;
311
+ }
390
312
 
391
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
313
+ .tds-combo-box-input::-moz-placeholder{
314
+ color:var(--tds-field-placeholder-color);
315
+ -moz-user-select:none;
316
+ user-select:none;
317
+ }
394
318
 
395
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
319
+ .tds-combo-box-input::placeholder{
320
+ color:var(--tds-field-placeholder-color);
321
+ -webkit-user-select:none;
322
+ -moz-user-select:none;
323
+ user-select:none;
324
+ }
397
325
 
398
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
326
+ .tds-combo-box-button{
327
+ flex-shrink:0;
328
+ align-self:center;
329
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
330
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
331
+ padding:0;
332
+ margin-inline-end:var(--tds-combo-box-button-offset);
333
+ }
401
334
 
402
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
335
+ .tds-combo-box-button > svg{
336
+ inline-size:var(--tds-field-font-size);
337
+ block-size:var(--tds-field-font-size);
338
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
407
339
  }
408
340
 
409
- .tds-page-header--profile{
410
- --tds-page-header-padding-y:20px;
341
+ .tds-combo-box-popover{
342
+ width:var(--trigger-width);
343
+ max-block-size:inherit;
344
+ padding:var(--t-spacing-1);
345
+ overflow:auto;
346
+ scroll-behavior:smooth;
347
+ overscroll-behavior:none;
348
+ -webkit-user-select:none;
349
+ -moz-user-select:none;
350
+ user-select:none;
351
+ outline:0;
352
+ scrollbar-color:#0004 var(--t-surface-color-card);
353
+ scrollbar-width:thin;
354
+ background:var(--t-surface-color-card);
355
+ background-clip:padding-box;
356
+ border:1px solid var(--t-border-color);
357
+ border-radius:var(--t-border-radius);
358
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
359
+ }
360
+
361
+ .tds-combo-box-popover[data-entering]{
362
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
411
363
  }
412
364
 
413
- @supports (color: light-dark(#fff, #000)){
414
- .tds-page-header{
415
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
417
- }
365
+ .tds-combo-box-popover[data-exiting]{
366
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
418
367
  }
419
368
 
420
- @media (min-width: 600px){
421
- .tds-page-header{
422
- --tds-page-header-background-color:var(--t-surface-color-canvas);
423
- --tds-page-header-color:var(--t-text-color-secondary);
424
- --tds-page-header-bottom-border-color:var(--t-border-color);
425
- --tds-page-header-padding-x:var(--t-spacing-3);
426
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
- --tds-page-header-nav-gap:var(--t-spacing-half);
428
- --tds-page-header-nav-background:transparent;
429
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
- --tds-page-header-nav-item-border-width:1px;
431
- --tds-page-header-nav-item-color:var(--t-text-color);
432
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
434
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
435
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
436
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
437
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
369
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
370
+ will-change:opacity, transform;
371
+ }
372
+
373
+ @keyframes tds-combo-box-popover{
374
+ from{
375
+ opacity:0;
376
+ transform:translateY(-8px);
377
+ }
378
+ }
379
+
380
+ @media (prefers-reduced-motion: reduce){
381
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
382
+ animation:none;
438
383
  }
384
+
385
+ .tds-combo-box-button > svg{
386
+ transition:none;
439
387
  }
440
388
  }
441
389
 
442
- .tds-page-header{
443
- display:flex;
444
- flex-direction:column;
445
- padding-top:var(--tds-page-header-padding-y);
446
- color:var(--tds-page-header-color);
447
- background:var(--tds-page-header-background-color);
448
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
390
+ .tds-combo-box-list{
391
+ padding:0;
392
+ margin:0;
449
393
  }
450
394
 
451
- .tds-page-header:not(.has-nav){
452
- padding-bottom:var(--tds-page-header-padding-y);
395
+ .tds-combo-box-list-item{
396
+ display:block;
397
+ padding-block:var(--t-spacing-1);
398
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
399
+ overflow:hidden;
400
+ text-overflow:ellipsis;
401
+ font-size:1rem;
402
+ color:var(--t-text-color);
403
+ white-space:nowrap;
404
+ cursor:default;
405
+ border-radius:var(--t-border-radius);
406
+ }
407
+
408
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
409
+ background:var(--t-fill-color-neutral-070);
453
410
  }
454
411
 
455
- .tds-page-header.inactive{
456
- background:var(--tds-page-header-background-color-inactive);
412
+ .tds-combo-box-list-item[data-selected]{
413
+ background:var(--t-fill-color-button-interaction-ghost-active);
457
414
  }
458
415
 
459
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
460
- width:100%;
416
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
417
+ background:var(--t-fill-color-neutral-060);
461
418
  }
462
419
 
463
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
464
- display:flex;
465
- flex-flow:row wrap;
466
- gap:var(--t-spacing-half) var(--t-spacing-1);
467
- align-items:flex-start;
468
- justify-content:flex-start;
469
- min-width:0;
420
+ .tds-combo-box-list-item[data-disabled]{
421
+ color:var(--t-form-color-disabled);
422
+ cursor:not-allowed;
470
423
  }
471
424
 
472
- :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{
473
- display:flex;
474
- gap:var(--tds-page-header-nav-gap);
475
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
476
- margin:0 0 -1px;
477
- overflow:auto;
478
- list-style:none;
479
- background:var(--tds-page-header-nav-background);
425
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
426
+ background:transparent;
480
427
  }
481
428
 
482
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
483
- position:relative;
484
- display:inline-flex;
485
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
486
- font-size:var(--t-font-size-sm);
487
- line-height:22px;
488
- color:var(--tds-page-header-nav-item-color);
489
- white-space:nowrap;
490
- text-decoration:none;
491
- -webkit-appearance:none;
492
- -moz-appearance:none;
493
- appearance:none;
494
- cursor:pointer;
495
- outline-offset:-2px;
496
- background-color:var(--tds-page-header-nav-item-background-color);
497
- background-clip:padding-box;
498
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
499
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
500
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
501
- }
429
+ .tds-combo-box-empty-state{
430
+ position:relative;
431
+ min-block-size:var(--t-spacing-3);
432
+ padding-block:var(--t-spacing-1);
433
+ padding-inline:var(--t-spacing-2);
434
+ font-size:var(--t-font-size-md);
435
+ color:var(--t-text-color-secondary);
436
+ }
502
437
 
503
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
504
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
505
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
506
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
507
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
508
- }
438
+ .tds-combo-box-load-more{
439
+ position:relative;
440
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
441
+ }
509
442
 
510
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
511
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
512
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
513
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
514
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
515
- }
443
+ .tds-combo-box-empty-state,
444
+ .tds-combo-box-load-more{
445
+ --tds-loading-spinner-visibility:visible;
446
+ --tds-loading-spinner-animation-play-state:running;
447
+ }
516
448
 
517
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
518
- background-color:var(--tds-page-header-nav-item-background-color-active);
519
- border-color:var(--tds-page-header-nav-item-border-color-active);
520
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
521
- }
449
+ .tds-combo-box-list-section:not(:first-child){
450
+ margin-block-start:var(--t-spacing-half);
451
+ }
522
452
 
523
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
524
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
525
- color:var(--tds-page-header-nav-item-color-disabled);
526
- cursor:not-allowed;
527
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
528
- opacity:1;
529
- }
530
-
531
- @media (min-width: 600px){
532
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
533
- position:absolute;
534
- inset:auto -1px -1px;
535
- height:1px;
536
- pointer-events:none;
537
- content:"";
538
- background-color:var(--tds-page-header-bottom-border-color);
539
- }
540
- }
541
-
542
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
543
- position:relative;
544
- }
545
-
546
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
547
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
548
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
549
- }
550
-
551
- :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{
552
- position:absolute;
553
- top:-5px;
554
- right:-2px;
555
- width:10px;
556
- height:10px;
557
- content:"";
558
- background:var(--tds-page-header-nav-item-indicator-color);
559
- border-radius:50%;
560
- }
561
-
562
- @media (prefers-reduced-motion: no-preference){
563
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
564
- animation:indicator-pulse 1.25s ease infinite;
565
- }
566
- }
567
-
568
- .tds-page-header__title-bar{
569
- display:flex;
570
- flex-direction:column;
571
- gap:var(--t-spacing-2) var(--t-spacing-1);
572
- align-items:flex-start;
573
- justify-content:space-between;
574
- padding:0 var(--tds-page-header-padding-x);
575
- }
576
-
577
- .tds-page-header--profile > .tds-page-header__title-bar{
578
- align-items:center;
579
- }
580
-
581
- .tds-page-header__primary{
582
- width:100%;
583
- }
584
-
585
- .tds-page-header__primary h1{
586
- margin:0;
587
- font-size:var(--tds-page-header-headline-font-size);
588
- font-weight:var(--t-font-weight-normal);
589
- line-height:32px;
590
- color:var(--tds-page-header-headline-color);
591
- overflow-wrap:break-word;
592
- }
593
-
594
- @media (min-width: 960px){
595
- .tds-page-header__primary{
596
- flex:1 1 max-content;
597
- width:auto;
598
- min-width:0;
599
- max-width:100%;
600
- }
601
-
602
- .tds-page-header__title-bar,
603
- .tds-page-header--profile .tds-page-header__title-bar{
604
- flex-flow:row nowrap;
605
- row-gap:12px;
606
- align-items:flex-start;
607
- }
608
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
609
- width:auto;
610
- }
611
-
612
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
613
- justify-content:flex-end;
614
- }
615
- }
616
-
617
- .tds-page-header-phone,
618
- .tds-page-header-email{
619
- color:var(--tds-page-header-color);
620
- white-space:nowrap;
621
- }
622
-
623
- .tds-page-header-email{
624
- max-width:100%;
625
- overflow:hidden;
626
- text-overflow:ellipsis;
627
- }
628
-
629
- @keyframes indicator-pulse{
630
- 0%{
631
- opacity:.3;
632
- transform:scale(.9);
633
- }
634
-
635
- 100%{
636
- opacity:0;
637
- transform:scale(1.75);
638
- }
453
+ .tds-combo-box-section-header{
454
+ padding-block:var(--t-spacing-1);
455
+ padding-inline:var(--t-spacing-1);
456
+ font-size:var(--t-font-size-sm);
457
+ font-weight:var(--t-font-weight-semibold);
458
+ color:var(--t-text-color-secondary);
639
459
  }
640
460
 
641
461
  .tds-checkbox{
@@ -833,6 +653,30 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
833
653
  --tds-checkbox-description-line-height:1.3;
834
654
  }
835
655
 
656
+
657
+ :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{
658
+ -webkit-appearance:none;
659
+ appearance:none;
660
+ }
661
+
662
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
663
+ inline-size:1em;
664
+ block-size:2em;
665
+ }
666
+
667
+ @supports (field-sizing: content){
668
+ .tds-input--auto-width{
669
+ inline-size:-moz-fit-content;
670
+ inline-size:fit-content;
671
+ min-inline-size:min(100%, 122px);
672
+ }
673
+
674
+ .tds-input--auto-width input{
675
+ field-sizing:content;
676
+ inline-size:auto;
677
+ }
678
+ }
679
+
836
680
  .tds-checkbox-group{
837
681
  --tds-checkbox-group-font-size:var(--t-font-size-md);
838
682
  --tds-checkbox-group-line-height:1.4;
@@ -1263,26 +1107,25 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1263
1107
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1264
1108
  }
1265
1109
 
1266
- .tds-combo-box{
1267
- --tds-combo-box-button-offset:4px;
1110
+ .tds-number-stepper{
1111
+ --tds-number-stepper-button-offset:4px;
1112
+ --tds-number-stepper-button-gap:2px;
1268
1113
  }
1269
1114
 
1270
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
1271
- transform:rotate(.5turn);
1272
- }
1273
-
1274
- .tds-combo-box--lg{
1275
- --tds-combo-box-button-offset:5px;
1115
+ .tds-number-stepper--lg{
1116
+ --tds-number-stepper-button-offset:5px;
1117
+ --tds-number-stepper-button-gap:4px;
1276
1118
  }
1277
1119
 
1278
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
1120
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1279
1121
  display:none;
1280
1122
  }
1281
1123
 
1282
- .tds-combo-box-input{
1124
+ .tds-number-stepper-input{
1283
1125
  display:flex;
1284
1126
  flex:1;
1285
1127
  align-items:center;
1128
+ min-inline-size:0;
1286
1129
  padding-block:var(--tds-field-padding-block);
1287
1130
  padding-inline:var(--tds-field-padding-inline);
1288
1131
  font-family:inherit;
@@ -1293,477 +1136,721 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1293
1136
  border:0;
1294
1137
  }
1295
1138
 
1296
- .tds-combo-box-input:has( + .tds-combo-box-button){
1297
- padding-inline-end:0;
1298
- }
1299
-
1300
- .tds-combo-box-input::-moz-placeholder{
1301
- color:var(--tds-field-placeholder-color);
1302
- -moz-user-select:none;
1303
- user-select:none;
1304
- }
1305
-
1306
- .tds-combo-box-input::placeholder{
1307
- color:var(--tds-field-placeholder-color);
1308
- -webkit-user-select:none;
1309
- -moz-user-select:none;
1310
- user-select:none;
1139
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1140
+ margin:0;
1141
+ -webkit-appearance:none;
1142
+ appearance:none;
1311
1143
  }
1312
1144
 
1313
- .tds-combo-box-button{
1145
+ .tds-number-stepper-button{
1314
1146
  flex-shrink:0;
1315
1147
  align-self:center;
1316
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1317
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
1148
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1149
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1318
1150
  padding:0;
1319
- margin-inline-end:var(--tds-combo-box-button-offset);
1320
- }
1321
-
1322
- .tds-combo-box-button > svg{
1323
- inline-size:var(--tds-field-font-size);
1324
- block-size:var(--tds-field-font-size);
1325
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
1326
- }
1327
-
1328
- .tds-combo-box-popover{
1329
- width:var(--trigger-width);
1330
- max-block-size:inherit;
1331
- padding:var(--t-spacing-1);
1332
- overflow:auto;
1333
- scroll-behavior:smooth;
1334
- overscroll-behavior:none;
1335
- -webkit-user-select:none;
1336
- -moz-user-select:none;
1337
- user-select:none;
1338
- outline:0;
1339
- scrollbar-color:#0004 var(--t-surface-color-card);
1340
- scrollbar-width:thin;
1341
- background:var(--t-surface-color-card);
1342
- background-clip:padding-box;
1343
- border:1px solid var(--t-border-color);
1344
- border-radius:var(--t-border-radius);
1345
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
1346
1151
  }
1347
1152
 
1348
- .tds-combo-box-popover[data-entering]{
1349
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
1350
- }
1351
-
1352
- .tds-combo-box-popover[data-exiting]{
1353
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
1153
+ .tds-number-stepper-button + .tds-number-stepper-button{
1154
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1354
1155
  }
1355
1156
 
1356
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1357
- will-change:opacity, transform;
1157
+ .tds-number-stepper-button:last-of-type{
1158
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1358
1159
  }
1359
1160
 
1360
- @keyframes tds-combo-box-popover{
1361
- from{
1362
- opacity:0;
1363
- transform:translateY(-8px);
1364
- }
1161
+ .tds-time-field-input{
1162
+ --tds-field-date-segment-padding-inline:1px;
1163
+ padding-block:var(--tds-field-padding-block);
1164
+ padding-inline:var(--tds-field-padding-inline);
1165
+ font-variant-numeric:tabular-nums;
1365
1166
  }
1366
1167
 
1367
- @media (prefers-reduced-motion: reduce){
1368
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
1369
- animation:none;
1370
- }
1168
+ .tds-toggle-switch{
1169
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
1170
+ --tds-toggle-switch-cursor:pointer;
1171
+ --tds-toggle-switch-display:inline-grid;
1172
+ --tds-toggle-switch-line-height:1.4;
1371
1173
 
1372
- .tds-combo-box-button > svg{
1373
- transition:none;
1374
- }
1375
- }
1174
+ --tds-toggle-switch-label-color:var(--t-form-color);
1376
1175
 
1377
- .tds-combo-box-list{
1378
- padding:0;
1379
- margin:0;
1380
- }
1176
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
1177
+ --tds-toggle-switch-track-outline:none;
1178
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
1179
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1180
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1381
1181
 
1382
- .tds-combo-box-list-item{
1383
- display:block;
1384
- padding-block:var(--t-spacing-1);
1385
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1386
- overflow:hidden;
1387
- text-overflow:ellipsis;
1388
- font-size:1rem;
1389
- color:var(--t-text-color);
1390
- white-space:nowrap;
1391
- cursor:default;
1392
- border-radius:var(--t-border-radius);
1182
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1183
+ --tds-toggle-switch-thumb-transform:translateX(0);
1184
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1185
+
1186
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1187
+ --tds-toggle-switch-description-line-height:1.35;
1188
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1189
+ position:relative;
1190
+
1191
+ display:var(--tds-toggle-switch-display);
1192
+ grid-template-columns:auto;
1193
+ grid-auto-columns:1fr;
1194
+ gap:var(--t-spacing-fourth) 0;
1195
+ -webkit-user-select:none;
1196
+ -moz-user-select:none;
1197
+ user-select:none;
1393
1198
  }
1394
1199
 
1395
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
1396
- background:var(--t-fill-color-neutral-070);
1200
+ .tds-toggle-switch input[type="checkbox"]{
1201
+ position:absolute;
1202
+ width:var(--tds-toggle-switch-track-width);
1203
+ height:var(--tds-toggle-switch-track-height);
1204
+ margin:0;
1205
+ -webkit-appearance:none;
1206
+ -moz-appearance:none;
1207
+ appearance:none;
1208
+ cursor:var(--tds-toggle-switch-cursor);
1209
+ outline:var(--tds-toggle-switch-track-outline);
1210
+ outline-offset:var(--t-focus-ring-offset);
1211
+ background-color:transparent;
1212
+ border:0;
1213
+ border-radius:var(--t-border-radius-round);
1397
1214
  }
1398
1215
 
1399
- .tds-combo-box-list-item[data-selected]{
1400
- background:var(--t-fill-color-button-interaction-ghost-active);
1216
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1217
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1218
+ }
1219
+
1220
+ .tds-toggle-switch label{
1221
+ display:inline-flex;
1222
+ grid-area:1 / 2;
1223
+ padding-inline-start:var(--t-spacing-1);
1224
+ margin-top:-.09375em;
1225
+ font-size:var(--tds-toggle-switch-font-size);
1226
+ font-weight:var(--t-font-weight-normal);
1227
+ line-height:var(--tds-toggle-switch-line-height);
1228
+ color:var(--tds-toggle-switch-label-color);
1229
+ cursor:var(--tds-toggle-switch-cursor);
1401
1230
  }
1402
1231
 
1403
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
1404
- background:var(--t-fill-color-neutral-060);
1232
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1233
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1405
1234
  }
1406
1235
 
1407
- .tds-combo-box-list-item[data-disabled]{
1408
- color:var(--t-form-color-disabled);
1409
- cursor:not-allowed;
1236
+ .tds-toggle-switch:has(input:checked){
1237
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1238
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1410
1239
  }
1411
1240
 
1412
- .tds-combo-box-list-item[data-disabled][data-hovered]{
1413
- background:transparent;
1241
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1242
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1414
1243
  }
1415
1244
 
1416
- .tds-combo-box-empty-state{
1245
+ .tds-toggle-switch:has(input:disabled){
1246
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1247
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1248
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1249
+ --tds-toggle-switch-cursor:not-allowed;
1250
+ }
1251
+
1252
+ .tds-toggle-switch-track{
1417
1253
  position:relative;
1418
- min-block-size:var(--t-spacing-3);
1419
- padding-block:var(--t-spacing-1);
1420
- padding-inline:var(--t-spacing-2);
1421
- font-size:var(--t-font-size-md);
1422
- color:var(--t-text-color-secondary);
1254
+ flex-shrink:0;
1255
+ width:var(--tds-toggle-switch-track-width);
1256
+ height:var(--tds-toggle-switch-track-height);
1257
+ background-color:var(--tds-toggle-switch-track-background-color);
1258
+ border-radius:var(--t-border-radius-round);
1259
+ transition:var(--tds-toggle-switch-track-transition);
1423
1260
  }
1424
1261
 
1425
- .tds-combo-box-load-more{
1426
- position:relative;
1427
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
1262
+ .tds-toggle-switch-track::before{
1263
+ position:absolute;
1264
+ top:var(--t-spacing-fourth);
1265
+ left:var(--t-spacing-fourth);
1266
+ width:var(--tds-toggle-switch-thumb-size);
1267
+ height:var(--tds-toggle-switch-thumb-size);
1268
+ content:"";
1269
+ background-color:#fff;
1270
+ border-radius:var(--t-border-radius-round);
1271
+ transform:var(--tds-toggle-switch-thumb-transform);
1272
+ transition:var(--tds-toggle-switch-thumb-transition);
1273
+ }
1274
+
1275
+ @media (prefers-reduced-motion: reduce){
1276
+
1277
+ .tds-toggle-switch-track{
1278
+ --tds-toggle-switch-track-transition:none;
1279
+ --tds-toggle-switch-thumb-transition:none;
1428
1280
  }
1281
+ }
1429
1282
 
1430
- .tds-combo-box-empty-state,
1431
- .tds-combo-box-load-more{
1432
- --tds-loading-spinner-visibility:visible;
1433
- --tds-loading-spinner-animation-play-state:running;
1283
+ .tds-toggle-switch-description{
1284
+ display:flex;
1285
+ grid-area:2 / 2;
1286
+ align-items:flex-start;
1287
+ padding-inline-start:var(--t-spacing-1);
1288
+ margin:0;
1289
+ font-size:var(--tds-toggle-switch-description-font-size);
1290
+ line-height:var(--tds-toggle-switch-description-line-height);
1291
+ color:var(--tds-toggle-switch-description-color);
1292
+ cursor:text;
1434
1293
  }
1435
1294
 
1436
- .tds-combo-box-list-section:not(:first-child){
1437
- margin-block-start:var(--t-spacing-half);
1438
- }
1295
+ .tds-toggle-switch--sm{
1296
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
1297
+ --tds-toggle-switch-line-height:1.35;
1298
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
1299
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1300
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1301
+ --tds-toggle-switch-description-line-height:1.3;
1302
+ }
1439
1303
 
1440
- .tds-combo-box-section-header{
1441
- padding-block:var(--t-spacing-1);
1442
- padding-inline:var(--t-spacing-1);
1443
- font-size:var(--t-font-size-sm);
1444
- font-weight:var(--t-font-weight-semibold);
1445
- color:var(--t-text-color-secondary);
1304
+ .tds-toggle-switch--hide-label{
1305
+ --tds-toggle-switch-display:inline-flex;
1446
1306
  }
1447
1307
 
1308
+ .tds-input:has(textarea){
1309
+ --tds-input-padding-block:6px;
1310
+ --tds-input-resizer-size:var(--t-element-size-sm);
1311
+ --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");
1312
+ }
1448
1313
 
1449
- :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{
1450
- -webkit-appearance:none;
1451
- appearance:none;
1314
+ @supports (x: attr(x type(*))){
1315
+
1316
+ .tds-input textarea{
1317
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1318
+ }
1319
+ }
1320
+
1321
+ .tds-input.tds-textarea--resize-vertical textarea{
1322
+ resize:vertical;
1452
1323
  }
1453
1324
 
1454
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1455
- inline-size:1em;
1456
- block-size:2em;
1325
+ .tds-input.tds-textarea--resize-none textarea{
1326
+ resize:none;
1327
+ }
1328
+
1329
+ .tds-input.tds-textarea--resize-auto textarea{
1330
+ resize:vertical;
1457
1331
  }
1458
1332
 
1459
1333
  @supports (field-sizing: content){
1460
- .tds-input--auto-width{
1461
- inline-size:-moz-fit-content;
1462
- inline-size:fit-content;
1463
- min-inline-size:min(100%, 122px);
1464
- }
1334
+ .tds-input.tds-textarea--resize-auto textarea{
1335
+ field-sizing:content;
1336
+ resize:none;
1337
+ }
1338
+ }
1465
1339
 
1466
- .tds-input--auto-width input{
1467
- field-sizing:content;
1468
- inline-size:auto;
1469
- }
1340
+ .tds-input textarea{
1341
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1342
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1343
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1344
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1345
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1346
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1347
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1348
+ --tds-input-scrollbar-thumb-border-radius:999px;
1349
+ --tds-input-scrollbar-thumb-border-width:3px;
1350
+ --tds-input-scrollbar-track-margin-block:.125rem;
1351
+ scrollbar-color:initial;
1352
+ transition-timing-function:var(--t-ease-in-out);
1353
+ transition-duration:var(--t-duration-200);
1354
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1470
1355
  }
1471
1356
 
1472
- .tds-radio{
1473
- --tds-radio-font-size:var(--t-font-size-md);
1474
- --tds-radio-cursor:pointer;
1475
- --tds-radio-line-height:1.4;
1476
- --tds-radio-transition-property:border-width;
1357
+ @media (pointer: fine){
1358
+ :is(.tds-input textarea)::-webkit-scrollbar{
1359
+ width:12px;
1360
+ height:12px;
1361
+ cursor:default;
1362
+ }
1477
1363
 
1478
- --tds-radio-input-size:var(--t-element-size-md);
1479
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1480
- --tds-radio-input-border-color:var(--t-form-border-color);
1481
- --tds-radio-input-border-width:var(--t-form-border-width);
1482
- --tds-radio-input-background-color:var(--t-form-background-color);
1364
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1365
+ cursor:default;
1366
+ background:var(--tds-input-scrollbar-thumb-color);
1367
+ background-clip:content-box;
1368
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1369
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1370
+ }
1483
1371
 
1484
- --tds-radio-label-color:var(--t-form-color);
1372
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1373
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1374
+ }
1485
1375
 
1486
- --tds-radio-description-font-size:var(--t-font-size-sm);
1487
- --tds-radio-description-line-height:1.35;
1488
- --tds-radio-description-color:var(--t-text-color-secondary);
1376
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1377
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1378
+ }
1379
+
1380
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1381
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1382
+ }
1383
+
1384
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1385
+ background:var(--tds-input-scrollbar-surface-color);
1386
+ }
1387
+
1388
+ :is(.tds-input textarea)::-webkit-resizer{
1389
+ background:var(--tds-input-resizer-icon) no-repeat;
1390
+ background-position:right bottom;
1391
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1392
+ }
1393
+
1394
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1395
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1396
+ cursor:default;
1397
+ }
1398
+
1399
+ @supports (-moz-appearance: none){
1400
+ :is(.tds-input textarea){
1401
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1402
+ scrollbar-width:thin;
1403
+ }
1404
+
1405
+ @media (hover){
1406
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1407
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1408
+ }
1409
+ }
1410
+ }
1411
+ }
1412
+
1413
+ .tds-select{
1414
+ --tds-select-border-color:var(--t-form-border-color);
1415
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1416
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1417
+ --tds-select-background-color:var(--t-form-background-color);
1418
+ --tds-select-color:var(--t-form-color);
1419
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1420
+ --tds-select-font-size:var(--t-font-size-md);
1421
+ --tds-select-min-height:var(--t-container-size-md);
1422
+ --tds-select-padding-block:0;
1423
+ --tds-select-description-color:var(--t-text-color-secondary);
1424
+ --tds-select-description-invalid-icon-display:none;
1425
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1426
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1427
+ --tds-select-caret-size:1em;
1428
+ --tds-select-caret-inline-offset:.75em;
1429
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1430
+
1431
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1432
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1433
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1434
+ --tds-select-dropdown-margin-block:5px;
1435
+ --tds-select-dropdown-scrollbar-color:#0004 var(--t-surface-color-card);
1436
+ --tds-select-dropdown-scrollbar-width:thin;
1437
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1438
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1439
+ --tds-select-dropdown-scroll-behavior:smooth;
1440
+ --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1441
+ --tds-select-dropdown-closed-opacity:0;
1442
+ --tds-select-dropdown-open-opacity:1;
1443
+ --tds-select-dropdown-closed-translate:0 -8px;
1444
+ --tds-select-dropdown-open-translate:0 0;
1445
+
1446
+ --tds-select-option-gap:var(--t-spacing-1);
1447
+ --tds-select-option-padding-block:var(--t-spacing-fourth);
1448
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1449
+ --tds-select-option-font-size:1rem;
1450
+ --tds-select-option-color:var(--t-text-color);
1451
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1452
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1453
+ --tds-select-option-border-radius:var(--t-border-radius);
1454
+
1455
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1456
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1457
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1458
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1459
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1460
+ --tds-select-group-label-letter-spacing:0;
1461
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1462
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1463
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1464
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1489
1465
 
1490
1466
  position:relative;
1491
- display:inline-grid;
1492
- grid-template-columns:auto;
1493
- grid-auto-columns:1fr;
1494
- gap:var(--t-spacing-fourth) 0;
1495
- line-height:var(--tds-radio-line-height);
1496
- -webkit-user-select:none;
1497
- -moz-user-select:none;
1498
- user-select:none;
1467
+ display:flex;
1468
+ flex-direction:column;
1469
+ gap:var(--t-spacing-half);
1499
1470
  }
1500
1471
 
1501
- .tds-radio label{
1502
- grid-area:1 / 2;
1503
- padding-inline-start:var(--t-spacing-1);
1504
- font-size:var(--tds-radio-font-size);
1472
+ .tds-select :is(label,.tds-select-label){
1473
+ font-size:var(--t-font-size-md);
1505
1474
  font-weight:var(--t-font-weight-normal);
1506
- color:var(--tds-radio-label-color);
1507
- cursor:var(--tds-radio-cursor);
1475
+ color:var(--t-text-color);
1476
+ cursor:default;
1508
1477
  }
1509
1478
 
1510
- .tds-radio input[type="radio"]{
1479
+ .tds-select :is(select,button){
1511
1480
  position:relative;
1512
- width:1em;
1513
- height:1em;
1514
- margin:calc((1lh - 1em) / 2) 0 0;
1515
- font-size:var(--tds-radio-font-size);
1516
- line-height:inherit;
1481
+ place-items:center;
1482
+ inline-size:100%;
1483
+ min-block-size:var(--tds-select-min-height);
1484
+ padding-block:var(--tds-select-padding-block);
1485
+ padding-inline:var(--t-spacing-1);
1486
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1487
+ font-family:inherit;
1488
+ font-size:var(--tds-select-font-size);
1489
+ line-height:1.15;
1490
+ color:var(--tds-select-color);
1491
+ text-align:left;
1517
1492
  -webkit-appearance:none;
1518
1493
  -moz-appearance:none;
1519
1494
  appearance:none;
1520
- cursor:var(--tds-radio-cursor);
1521
- background-color:var(--tds-radio-input-background-color);
1522
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1523
- border-radius:var(--tds-radio-input-border-radius);
1495
+ cursor:var(--tds-select-cursor, default);
1496
+ outline:var(--t-focus-ring-width) solid transparent;
1497
+ outline-offset:0;
1498
+ background-color:var(--tds-select-background-color);
1499
+ background-image:var(--tds-select-background-image);
1500
+ background-repeat:no-repeat;
1501
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1502
+ background-size:var(--tds-select-caret-size);
1503
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1504
+ border-radius:var(--t-form-border-radius);
1524
1505
  transition-timing-function:var(--t-ease-in-out);
1525
- transition-duration:var(--t-duration-200);
1526
- transition-property:var(--tds-radio-transition-property);
1506
+ transition-duration:var(--t-duration-300);
1507
+ transition-property:var(--tds-select-transition-property);
1508
+ }
1509
+
1510
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1511
+ border-color:var(--tds-select-border-color-hover);
1512
+ }
1513
+
1514
+ :is(.tds-select :is(select,button)):focus{
1515
+ outline-color:var(--t-focus-ring-color);
1516
+ outline-offset:var(--t-focus-ring-offset);
1517
+ border-color:var(--tds-select-border-color-active);
1518
+ }
1519
+
1520
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1521
+ color:var(--tds-select-placeholder-color);
1522
+ }
1523
+
1524
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1525
+ --tds-select-border-color:var(--t-form-border-color-error);
1526
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1527
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1528
+ --tds-select-background-color:var(--t-form-background-color-error);
1529
+ --tds-select-description-color:var(--t-text-color-status-error);
1530
+ --tds-select-description-invalid-icon-display:inline-block;
1531
+ }
1532
+
1533
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1534
+ margin-left:.25ch;
1535
+ color:var(--t-text-color-status-error);
1536
+ content:"*";
1537
+ }
1538
+
1539
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1540
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1541
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1542
+ --tds-select-color:var(--t-form-color-disabled);
1543
+ --tds-select-cursor:not-allowed;
1544
+ }
1545
+
1546
+ .tds-select:has( > [popover]:popover-open) > button{
1547
+ border-color:var(--tds-select-border-color-active);
1548
+ }
1549
+
1550
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1551
+ transform:rotate(.5turn);
1552
+ }
1553
+
1554
+ .tds-select :is(hr,li[role="separator"]){
1555
+ margin-block:var(--t-spacing-half);
1556
+ color:var(--tds-select-border-color);
1557
+ border:0;
1558
+ border-top:1px solid;
1559
+ }
1560
+
1561
+ .tds-select :is(li[role="option"],option:not([hidden])){
1562
+ display:block;
1563
+ align-content:center;
1564
+ min-height:var(--t-container-size-md);
1565
+ padding-block:var(--tds-select-option-padding-block);
1566
+ padding-inline:var(--tds-select-option-padding-inline);
1567
+ overflow:hidden;
1568
+ text-overflow:ellipsis;
1569
+ font-size:var(--tds-select-option-font-size);
1570
+ line-height:1.15;
1571
+ color:var(--tds-select-option-color);
1572
+ white-space:nowrap;
1573
+ cursor:default;
1574
+ border-radius:var(--tds-select-option-border-radius);
1527
1575
  }
1528
1576
 
1529
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1530
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1531
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1577
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1578
+ outline:0;
1532
1579
  }
1533
1580
 
1534
- :is(.tds-radio input[type="radio"]):focus-visible{
1535
- outline:var(--t-focus-ring-outline);
1536
- outline-offset:var(--t-focus-ring-offset);
1581
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1582
+ background:var(--tds-select-option-background-hover);
1537
1583
  }
1538
1584
 
1539
- :is(.tds-radio input[type="radio"]):disabled{
1540
- pointer-events:none;
1585
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1586
+ background:var(--tds-select-option-background-active);
1541
1587
  }
1542
1588
 
1543
- @media (prefers-reduced-motion: reduce){
1544
-
1545
- .tds-radio input[type="radio"]{
1546
- --tds-radio-transition-property:none;
1547
- }
1589
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1590
+ color:var(--t-form-color-disabled);
1591
+ cursor:not-allowed;
1548
1592
  }
1549
1593
 
1550
- .tds-radio:has(input:checked){
1551
- --tds-radio-input-background-color:var(--t-form-background-color);
1552
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1553
- --tds-radio-input-border-width:4px;
1594
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1595
+ background:transparent;
1596
+ }
1597
+
1598
+ .tds-select :is(li[role="presentation"],legend){
1599
+ position:sticky;
1600
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1601
+ z-index:1;
1602
+ float:inline-start;
1603
+ inline-size:100%;
1604
+ padding-block:var(--tds-select-group-label-padding-block);
1605
+ padding-inline:var(--tds-select-group-label-padding-inline);
1606
+ container-type:scroll-state;
1607
+ font-size:var(--tds-select-group-label-font-size);
1608
+ font-weight:var(--tds-select-group-label-font-weight);
1609
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1610
+ background:var(--tds-select-group-label-background);
1611
+ text-box:trim-both cap alphabetic;
1554
1612
  }
1555
1613
 
1556
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1557
- --tds-radio-input-background-color:var(--t-form-background-color);
1558
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1614
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1615
+ display:inline-flex;
1616
+ gap:var(--t-spacing-half);
1617
+ align-items:center;
1618
+ color:var(--tds-select-group-label-color);
1619
+ transition:var(--tds-select-group-label-transition);
1559
1620
  }
1560
1621
 
1561
- .tds-radio:has(input:user-invalid){
1562
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1563
- }
1622
+ @container scroll-state(stuck){
1564
1623
 
1565
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1566
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1567
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1624
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1625
+ color:var(--tds-select-group-label-color-stuck);
1568
1626
  }
1569
1627
 
1570
- .tds-radio:has(input:disabled){
1571
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1572
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1628
+ @media (forced-colors: active){
1573
1629
 
1574
- --tds-radio-label-color:var(--t-form-color-disabled);
1575
- --tds-radio-description-color:var(--t-form-color-disabled);
1576
- --tds-radio-cursor:not-allowed;
1630
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1631
+ color:var(--tds-select-group-label-color-stuck);
1632
+ }
1633
+ }
1634
+ }
1635
+
1636
+ .tds-select.tds-select--lg{
1637
+ --tds-select-min-height:var(--t-container-size-lg);
1638
+ --tds-select-font-size:var(--t-font-size-lg);
1577
1639
  }
1578
1640
 
1579
- .tds-radio:has(input:disabled) input:checked{
1580
- --tds-radio-input-background-color:var(--t-form-background-color);
1581
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1582
- }
1641
+ @media (prefers-reduced-motion: reduce){
1583
1642
 
1584
- .tds-radio-description{
1643
+ .tds-select{
1644
+ --tds-select-transition-property:none;
1645
+ --tds-select-dropdown-transition:none;
1646
+ --tds-select-dropdown-scroll-behavior:auto;
1647
+ --tds-select-dropdown-closed-translate:none;
1648
+ --tds-select-dropdown-open-translate:none;
1649
+ --tds-select-caret-transition:none;
1650
+ }
1651
+ }
1652
+
1653
+ .tds-select-description{
1585
1654
  display:flex;
1586
- grid-area:2 / 2;
1587
1655
  gap:var(--t-spacing-half);
1588
1656
  align-items:flex-start;
1589
- padding-inline-start:var(--t-spacing-1);
1590
1657
  margin:0;
1591
- font-size:var(--tds-radio-description-font-size);
1592
- line-height:var(--tds-radio-description-line-height);
1593
- color:var(--tds-radio-description-color);
1658
+ font-size:var(--t-font-size-sm);
1659
+ line-height:1.35;
1660
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1594
1661
  cursor:text;
1595
1662
  }
1596
1663
 
1597
- .tds-radio--sm{
1598
- --tds-radio-line-height:1.35;
1599
- --tds-radio-input-size:var(--t-element-size-sm);
1600
- --tds-radio-font-size:var(--t-font-size-sm);
1601
- --tds-radio-description-font-size:var(--t-font-size-xs);
1602
- --tds-radio-description-line-height:1.3;
1603
- }
1604
-
1605
- .tds-number-stepper{
1606
- --tds-number-stepper-button-offset:4px;
1607
- --tds-number-stepper-button-gap:2px;
1608
- }
1609
-
1610
- .tds-number-stepper--lg{
1611
- --tds-number-stepper-button-offset:5px;
1612
- --tds-number-stepper-button-gap:4px;
1613
- }
1614
-
1615
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1616
- display:none;
1617
- }
1618
-
1619
- .tds-number-stepper-input{
1620
- display:flex;
1621
- flex:1;
1622
- align-items:center;
1623
- min-inline-size:0;
1624
- padding-block:var(--tds-field-padding-block);
1625
- padding-inline:var(--tds-field-padding-inline);
1626
- font-family:inherit;
1627
- font-size:inherit;
1628
- color:inherit;
1629
- outline:0;
1630
- background:transparent;
1631
- border:0;
1632
- }
1633
-
1634
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1635
- margin:0;
1636
- -webkit-appearance:none;
1637
- appearance:none;
1664
+ .tds-select-description .tds-select-description-invalid-icon{
1665
+ display:var(--tds-select-description-invalid-icon-display, none);
1666
+ flex-shrink:0;
1667
+ margin-block-start:calc(.5lh - .5em);
1668
+ line-height:1.35;
1638
1669
  }
1639
1670
 
1640
- .tds-number-stepper-button{
1641
- flex-shrink:0;
1642
- align-self:center;
1643
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1644
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1671
+ .tds-select > .tds-select-hidden-select{
1672
+ position:absolute;
1673
+ inline-size:1px;
1674
+ block-size:1px;
1645
1675
  padding:0;
1676
+ margin:0;
1677
+ pointer-events:none;
1678
+ opacity:0;
1646
1679
  }
1647
1680
 
1648
- .tds-number-stepper-button + .tds-number-stepper-button{
1649
- margin-inline-start:var(--tds-number-stepper-button-gap);
1650
- }
1651
-
1652
- .tds-number-stepper-button:last-of-type{
1653
- margin-inline-end:var(--tds-number-stepper-button-offset);
1654
- }
1655
-
1656
- .tds-time-field-input{
1657
- --tds-field-date-segment-padding-inline:1px;
1658
- padding-block:var(--tds-field-padding-block);
1659
- padding-inline:var(--tds-field-padding-inline);
1660
- font-variant-numeric:tabular-nums;
1681
+ .tds-select:has(> button){
1682
+ anchor-scope:--tds-select-anchor;
1661
1683
  }
1662
1684
 
1663
- .tds-input:has(textarea){
1664
- --tds-input-padding-block:6px;
1665
- --tds-input-resizer-size:var(--t-element-size-sm);
1666
- --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");
1667
- }
1685
+ .tds-select:has( > button) > button{
1686
+ display:block;
1687
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1688
+ anchor-name:--tds-select-anchor;
1689
+ overflow:hidden;
1690
+ text-overflow:ellipsis;
1691
+ color:var(--tds-select-placeholder-color);
1692
+ white-space:nowrap;
1693
+ background-image:none;
1694
+ 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);
1695
+ -webkit-tap-highlight-color:transparent;
1696
+ }
1668
1697
 
1669
- @supports (x: attr(x type(*))){
1698
+ :is(.tds-select:has( > button) > button)::after{
1699
+ position:absolute;
1700
+ inset-block:0;
1701
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1702
+ width:var(--tds-select-caret-size);
1703
+ height:var(--tds-select-caret-size);
1704
+ margin-block:auto;
1705
+ line-height:1;
1706
+ pointer-events:none;
1707
+ content:var(--tds-select-background-image);
1708
+ transform:rotate(0);
1709
+ transition:var(--tds-select-caret-transition);
1710
+ }
1670
1711
 
1671
- .tds-input textarea{
1672
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1673
- }
1712
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1713
+ color:var(--tds-select-color);
1674
1714
  }
1675
1715
 
1676
- .tds-input.tds-textarea--resize-vertical textarea{
1677
- resize:vertical;
1678
- }
1716
+ .tds-select:has( > button) [popover]{
1717
+ inset:auto;
1718
+ inline-size:-moz-max-content;
1719
+ inline-size:max-content;
1720
+ min-inline-size:anchor-size(width);
1721
+ max-inline-size:100vi;
1722
+ max-block-size:min(50vh, 20rem);
1723
+ padding:var(--tds-select-dropdown-padding);
1724
+ margin-block:var(--tds-select-dropdown-margin-block);
1725
+ position-area:block-end span-inline-start;
1726
+ position-anchor:--tds-select-anchor;
1727
+ position-try-fallbacks:flip-block, flip-inline;
1728
+ overflow:auto;
1729
+ overflow-x:hidden;
1730
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1731
+ overscroll-behavior:none;
1732
+ -webkit-user-select:none;
1733
+ -moz-user-select:none;
1734
+ user-select:none;
1735
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1736
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1737
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1738
+ background:var(--tds-select-dropdown-background-color);
1739
+ border:var(--tds-select-dropdown-border);
1740
+ border-radius:var(--tds-select-dropdown-border-radius);
1741
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1742
+ opacity:var(--tds-select-dropdown-open-opacity);
1743
+ translate:var(--tds-select-dropdown-open-translate);
1744
+ transition:var(--tds-select-dropdown-transition);
1745
+ }
1679
1746
 
1680
- .tds-input.tds-textarea--resize-none textarea{
1681
- resize:none;
1747
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1748
+ opacity:var(--tds-select-dropdown-closed-opacity);
1749
+ translate:var(--tds-select-dropdown-closed-translate);
1682
1750
  }
1683
1751
 
1684
- .tds-input.tds-textarea--resize-auto textarea{
1685
- resize:vertical;
1752
+ :is(.tds-select:has( > button) [popover]) ul{
1753
+ padding:0;
1754
+ margin:0;
1755
+ list-style:none;
1686
1756
  }
1687
1757
 
1688
- @supports (field-sizing: content){
1689
- .tds-input.tds-textarea--resize-auto textarea{
1690
- field-sizing:content;
1691
- resize:none;
1758
+ @starting-style{
1759
+ :is(.tds-select:has( > button) [popover]):popover-open{
1760
+ opacity:var(--tds-select-dropdown-closed-opacity);
1761
+ translate:var(--tds-select-dropdown-closed-translate);
1692
1762
  }
1693
1763
  }
1694
1764
 
1695
- .tds-input textarea{
1696
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1697
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1698
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1699
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1700
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1701
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1702
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1703
- --tds-input-scrollbar-thumb-border-radius:999px;
1704
- --tds-input-scrollbar-thumb-border-width:3px;
1705
- --tds-input-scrollbar-track-margin-block:.125rem;
1706
- scrollbar-color:initial;
1707
- transition-timing-function:var(--t-ease-in-out);
1708
- transition-duration:var(--t-duration-200);
1709
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1710
- }
1711
-
1712
- @media (pointer: fine){
1713
- :is(.tds-input textarea)::-webkit-scrollbar{
1714
- width:12px;
1715
- height:12px;
1716
- cursor:default;
1765
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1766
+ .tds-select select:has(> button){
1767
+ padding-inline-end:0;
1768
+ background-image:none;
1769
+ }
1770
+ @media (hover) and (pointer: fine){
1771
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1772
+ padding-block:0;
1773
+ -webkit-appearance:base-select;
1774
+ -moz-appearance:base-select;
1775
+ appearance:base-select;
1776
+ }
1717
1777
  }
1718
-
1719
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1720
- cursor:default;
1721
- background:var(--tds-input-scrollbar-thumb-color);
1722
- background-clip:content-box;
1723
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1724
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1778
+ :is(.tds-select select:has( > button))::picker-icon{
1779
+ flex-shrink:0;
1780
+ width:var(--tds-select-caret-size);
1781
+ height:var(--tds-select-caret-size);
1782
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1783
+ line-height:1;
1784
+ content:var(--tds-select-background-image);
1785
+ transition:var(--tds-select-caret-transition);
1725
1786
  }
1726
1787
 
1727
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1728
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1788
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1789
+ opacity:var(--tds-select-dropdown-closed-opacity);
1790
+ translate:var(--tds-select-dropdown-closed-translate);
1729
1791
  }
1730
1792
 
1731
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1732
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1793
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1794
+ outline-color:var(--t-focus-ring-color);
1795
+ outline-offset:var(--t-focus-ring-offset);
1796
+ border-color:var(--tds-select-border-color-active);
1733
1797
  }
1734
1798
 
1735
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1736
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1799
+ :is(.tds-select select:has( > button)):open::picker-icon{
1800
+ opacity:1;
1801
+ transform:rotate(.5turn);
1737
1802
  }
1738
1803
 
1739
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1740
- background:var(--tds-input-scrollbar-surface-color);
1804
+ :is(.tds-select select:has( > button)) selectedcontent{
1805
+ overflow:hidden;
1806
+ text-overflow:ellipsis;
1807
+ line-height:calc(var(--tds-select-min-height) - 2px);
1808
+ white-space:nowrap;
1741
1809
  }
1742
1810
 
1743
- :is(.tds-input textarea)::-webkit-resizer{
1744
- background:var(--tds-input-resizer-icon) no-repeat;
1745
- background-position:right bottom;
1746
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1811
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1812
+ color:var(--tds-select-placeholder-color);
1747
1813
  }
1748
1814
 
1749
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1750
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1751
- cursor:default;
1815
+ :is(.tds-select select:has( > button))::picker(select){
1816
+ inset:auto;
1817
+ inline-size:-moz-max-content;
1818
+ inline-size:max-content;
1819
+ min-inline-size:anchor-size(width);
1820
+ max-inline-size:100vi;
1821
+ padding:var(--tds-select-dropdown-padding);
1822
+ margin-block:var(--tds-select-dropdown-margin-block);
1823
+ position-area:block-end span-inline-start;
1824
+ position-try-fallbacks:flip-block, flip-inline;
1825
+ overflow:auto;
1826
+ overflow-x:hidden;
1827
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1828
+ overscroll-behavior:none;
1829
+ -webkit-user-select:none;
1830
+ -moz-user-select:none;
1831
+ user-select:none;
1832
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1833
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1834
+ background:var(--tds-select-dropdown-background-color);
1835
+ border:var(--tds-select-dropdown-border);
1836
+ border-radius:var(--tds-select-dropdown-border-radius);
1837
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1838
+ opacity:var(--tds-select-dropdown-open-opacity);
1839
+ translate:var(--tds-select-dropdown-open-translate);
1840
+ transition:var(--tds-select-dropdown-transition);
1752
1841
  }
1753
1842
 
1754
- @supports (-moz-appearance: none){
1755
- :is(.tds-input textarea){
1756
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1757
- scrollbar-width:thin;
1758
- }
1843
+ :is(.tds-select select:has( > button)) option::checkmark{
1844
+ display:none;
1845
+ }
1759
1846
 
1760
- @media (hover){
1761
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1762
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1763
- }
1847
+ @starting-style{
1848
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1849
+ opacity:var(--tds-select-dropdown-closed-opacity);
1850
+ translate:var(--tds-select-dropdown-closed-translate);
1764
1851
  }
1765
1852
  }
1766
- }
1853
+ }
1767
1854
 
1768
1855
  .tds-radio-group{
1769
1856
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -2123,594 +2210,509 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2123
2210
  background-color:var(--t-fill-color-interaction);
2124
2211
  }
2125
2212
 
2126
- .tds-field-date-segment-separator{
2127
- padding-inline:0;
2128
- color:var(--tds-field-placeholder-color);
2213
+ .tds-field-date-segment-separator{
2214
+ padding-inline:0;
2215
+ color:var(--tds-field-placeholder-color);
2216
+ }
2217
+
2218
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2219
+ color:var(--tds-field-color);
2220
+ }
2221
+
2222
+ .tds-radio{
2223
+ --tds-radio-font-size:var(--t-font-size-md);
2224
+ --tds-radio-cursor:pointer;
2225
+ --tds-radio-line-height:1.4;
2226
+ --tds-radio-transition-property:border-width;
2227
+
2228
+ --tds-radio-input-size:var(--t-element-size-md);
2229
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
2230
+ --tds-radio-input-border-color:var(--t-form-border-color);
2231
+ --tds-radio-input-border-width:var(--t-form-border-width);
2232
+ --tds-radio-input-background-color:var(--t-form-background-color);
2233
+
2234
+ --tds-radio-label-color:var(--t-form-color);
2235
+
2236
+ --tds-radio-description-font-size:var(--t-font-size-sm);
2237
+ --tds-radio-description-line-height:1.35;
2238
+ --tds-radio-description-color:var(--t-text-color-secondary);
2239
+
2240
+ position:relative;
2241
+ display:inline-grid;
2242
+ grid-template-columns:auto;
2243
+ grid-auto-columns:1fr;
2244
+ gap:var(--t-spacing-fourth) 0;
2245
+ line-height:var(--tds-radio-line-height);
2246
+ -webkit-user-select:none;
2247
+ -moz-user-select:none;
2248
+ user-select:none;
2249
+ }
2250
+
2251
+ .tds-radio label{
2252
+ grid-area:1 / 2;
2253
+ padding-inline-start:var(--t-spacing-1);
2254
+ font-size:var(--tds-radio-font-size);
2255
+ font-weight:var(--t-font-weight-normal);
2256
+ color:var(--tds-radio-label-color);
2257
+ cursor:var(--tds-radio-cursor);
2258
+ }
2259
+
2260
+ .tds-radio input[type="radio"]{
2261
+ position:relative;
2262
+ width:1em;
2263
+ height:1em;
2264
+ margin:calc((1lh - 1em) / 2) 0 0;
2265
+ font-size:var(--tds-radio-font-size);
2266
+ line-height:inherit;
2267
+ -webkit-appearance:none;
2268
+ -moz-appearance:none;
2269
+ appearance:none;
2270
+ cursor:var(--tds-radio-cursor);
2271
+ background-color:var(--tds-radio-input-background-color);
2272
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
2273
+ border-radius:var(--tds-radio-input-border-radius);
2274
+ transition-timing-function:var(--t-ease-in-out);
2275
+ transition-duration:var(--t-duration-200);
2276
+ transition-property:var(--tds-radio-transition-property);
2277
+ }
2278
+
2279
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
2280
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2281
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
2282
+ }
2283
+
2284
+ :is(.tds-radio input[type="radio"]):focus-visible{
2285
+ outline:var(--t-focus-ring-outline);
2286
+ outline-offset:var(--t-focus-ring-offset);
2287
+ }
2288
+
2289
+ :is(.tds-radio input[type="radio"]):disabled{
2290
+ pointer-events:none;
2291
+ }
2292
+
2293
+ @media (prefers-reduced-motion: reduce){
2294
+
2295
+ .tds-radio input[type="radio"]{
2296
+ --tds-radio-transition-property:none;
2297
+ }
2298
+ }
2299
+
2300
+ .tds-radio:has(input:checked){
2301
+ --tds-radio-input-background-color:var(--t-form-background-color);
2302
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
2303
+ --tds-radio-input-border-width:4px;
2304
+ }
2305
+
2306
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
2307
+ --tds-radio-input-background-color:var(--t-form-background-color);
2308
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
2309
+ }
2310
+
2311
+ .tds-radio:has(input:user-invalid){
2312
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
2313
+ }
2314
+
2315
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
2316
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
2317
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
2318
+ }
2319
+
2320
+ .tds-radio:has(input:disabled){
2321
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
2322
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2323
+
2324
+ --tds-radio-label-color:var(--t-form-color-disabled);
2325
+ --tds-radio-description-color:var(--t-form-color-disabled);
2326
+ --tds-radio-cursor:not-allowed;
2327
+ }
2328
+
2329
+ .tds-radio:has(input:disabled) input:checked{
2330
+ --tds-radio-input-background-color:var(--t-form-background-color);
2331
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
2332
+ }
2333
+
2334
+ .tds-radio-description{
2335
+ display:flex;
2336
+ grid-area:2 / 2;
2337
+ gap:var(--t-spacing-half);
2338
+ align-items:flex-start;
2339
+ padding-inline-start:var(--t-spacing-1);
2340
+ margin:0;
2341
+ font-size:var(--tds-radio-description-font-size);
2342
+ line-height:var(--tds-radio-description-line-height);
2343
+ color:var(--tds-radio-description-color);
2344
+ cursor:text;
2129
2345
  }
2130
2346
 
2131
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2132
- color:var(--tds-field-color);
2347
+ .tds-radio--sm{
2348
+ --tds-radio-line-height:1.35;
2349
+ --tds-radio-input-size:var(--t-element-size-sm);
2350
+ --tds-radio-font-size:var(--t-font-size-sm);
2351
+ --tds-radio-description-font-size:var(--t-font-size-xs);
2352
+ --tds-radio-description-line-height:1.3;
2133
2353
  }
2134
2354
 
2135
- .tds-toggle-switch{
2136
- --tds-toggle-switch-font-size:var(--t-font-size-md);
2137
- --tds-toggle-switch-cursor:pointer;
2138
- --tds-toggle-switch-display:inline-grid;
2139
- --tds-toggle-switch-line-height:1.4;
2140
2355
 
2141
- --tds-toggle-switch-label-color:var(--t-form-color);
2356
+ @media (prefers-reduced-motion: no-preference){
2142
2357
 
2143
- --tds-toggle-switch-track-width:var(--t-container-size-md);
2144
- --tds-toggle-switch-track-outline:none;
2145
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
2146
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2147
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2358
+ :root{
2359
+ interpolate-size:allow-keywords;
2360
+ }
2361
+ }
2148
2362
 
2149
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2150
- --tds-toggle-switch-thumb-transform:translateX(0);
2151
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2363
+ @layer tds-component{
2364
+ tds-sidenav,
2365
+ .tds-sidenav{
2366
+ --tds-sidenav-indent:12px;
2367
+ --tds-sidenav-item-depth:0;
2152
2368
 
2153
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2154
- --tds-toggle-switch-description-line-height:1.35;
2155
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2156
- position:relative;
2369
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2157
2370
 
2158
- display:var(--tds-toggle-switch-display);
2159
- grid-template-columns:auto;
2160
- grid-auto-columns:1fr;
2161
- gap:var(--t-spacing-fourth) 0;
2162
- -webkit-user-select:none;
2163
- -moz-user-select:none;
2164
- user-select:none;
2165
- }
2371
+ --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;
2372
+ --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;
2373
+ --tds-sidenav-collapse-closed-opacity:0;
2374
+ --tds-sidenav-collapse-open-opacity:1;
2375
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
2376
+ --tds-sidenav-collapse-open-transform:translateY(0);
2166
2377
 
2167
- .tds-toggle-switch input[type="checkbox"]{
2168
- position:absolute;
2169
- width:var(--tds-toggle-switch-track-width);
2170
- height:var(--tds-toggle-switch-track-height);
2171
- margin:0;
2172
- -webkit-appearance:none;
2173
- -moz-appearance:none;
2174
- appearance:none;
2175
- cursor:var(--tds-toggle-switch-cursor);
2176
- outline:var(--tds-toggle-switch-track-outline);
2177
- outline-offset:var(--t-focus-ring-offset);
2178
- background-color:transparent;
2179
- border:0;
2180
- border-radius:var(--t-border-radius-round);
2181
- }
2378
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
2379
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
2380
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
2381
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2182
2382
 
2183
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2184
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2185
- }
2383
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
2384
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
2385
+ --tds-sidenav-item-nested-background-selected:transparent;
2186
2386
 
2187
- .tds-toggle-switch label{
2188
- display:inline-flex;
2189
- grid-area:1 / 2;
2190
- padding-inline-start:var(--t-spacing-1);
2191
- margin-top:-.09375em;
2192
- font-size:var(--tds-toggle-switch-font-size);
2193
- font-weight:var(--t-font-weight-normal);
2194
- line-height:var(--tds-toggle-switch-line-height);
2195
- color:var(--tds-toggle-switch-label-color);
2196
- cursor:var(--tds-toggle-switch-cursor);
2197
- }
2387
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
2388
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2389
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2198
2390
 
2199
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2200
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2391
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
2392
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
2201
2393
  }
2202
2394
 
2203
- .tds-toggle-switch:has(input:checked){
2204
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2205
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2395
+ @media (prefers-reduced-motion: reduce){
2396
+ tds-sidenav,
2397
+ .tds-sidenav{
2398
+ --tds-sidenav-collapse-transition-enter:none;
2399
+ --tds-sidenav-collapse-transition-exit:none;
2400
+ --tds-sidenav-collapse-closed-transform:none;
2401
+ --tds-sidenav-collapse-open-transform:none;
2206
2402
  }
2207
-
2208
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2209
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2210
2403
  }
2211
2404
 
2212
- .tds-toggle-switch:has(input:disabled){
2213
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2214
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2215
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2216
- --tds-toggle-switch-cursor:not-allowed;
2405
+ .tds-sidenav--theme-gray{
2406
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
2407
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
2408
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
2409
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
2410
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2217
2411
  }
2218
-
2219
- .tds-toggle-switch-track{
2220
- position:relative;
2221
- flex-shrink:0;
2222
- width:var(--tds-toggle-switch-track-width);
2223
- height:var(--tds-toggle-switch-track-height);
2224
- background-color:var(--tds-toggle-switch-track-background-color);
2225
- border-radius:var(--t-border-radius-round);
2226
- transition:var(--tds-toggle-switch-track-transition);
2227
2412
  }
2228
2413
 
2229
- .tds-toggle-switch-track::before{
2230
- position:absolute;
2231
- top:var(--t-spacing-fourth);
2232
- left:var(--t-spacing-fourth);
2233
- width:var(--tds-toggle-switch-thumb-size);
2234
- height:var(--tds-toggle-switch-thumb-size);
2235
- content:"";
2236
- background-color:#fff;
2237
- border-radius:var(--t-border-radius-round);
2238
- transform:var(--tds-toggle-switch-thumb-transform);
2239
- transition:var(--tds-toggle-switch-thumb-transition);
2414
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2415
+ display:flex;
2240
2416
  }
2241
2417
 
2242
- @media (prefers-reduced-motion: reduce){
2243
-
2244
- .tds-toggle-switch-track{
2245
- --tds-toggle-switch-track-transition:none;
2246
- --tds-toggle-switch-thumb-transition:none;
2247
- }
2418
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2419
+ flex-direction:column;
2420
+ gap:var(--t-spacing-half);
2421
+ width:100%;
2248
2422
  }
2249
2423
 
2250
- .tds-toggle-switch-description{
2251
- display:flex;
2252
- grid-area:2 / 2;
2253
- align-items:flex-start;
2254
- padding-inline-start:var(--t-spacing-1);
2424
+ .tds-sidenav-section-list{
2425
+ width:100%;
2426
+ padding:0;
2255
2427
  margin:0;
2256
- font-size:var(--tds-toggle-switch-description-font-size);
2257
- line-height:var(--tds-toggle-switch-description-line-height);
2258
- color:var(--tds-toggle-switch-description-color);
2259
- cursor:text;
2260
- }
2261
-
2262
- .tds-toggle-switch--sm{
2263
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
2264
- --tds-toggle-switch-line-height:1.35;
2265
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
2266
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2267
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2268
- --tds-toggle-switch-description-line-height:1.3;
2428
+ list-style:none;
2269
2429
  }
2270
2430
 
2271
- .tds-toggle-switch--hide-label{
2272
- --tds-toggle-switch-display:inline-flex;
2431
+ .tds-sidenav-section-header{
2432
+ display:flex;
2433
+ align-items:baseline;
2434
+ justify-content:space-between;
2435
+ padding-top:var(--t-spacing-2);
2273
2436
  }
2274
2437
 
2275
- .tds-select{
2276
- --tds-select-border-color:var(--t-form-border-color);
2277
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
2278
- --tds-select-border-color-active:var(--t-form-border-color-hover);
2279
- --tds-select-background-color:var(--t-form-background-color);
2280
- --tds-select-color:var(--t-form-color);
2281
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
2282
- --tds-select-font-size:var(--t-font-size-md);
2283
- --tds-select-min-height:var(--t-container-size-md);
2284
- --tds-select-padding-block:0;
2285
- --tds-select-description-color:var(--t-text-color-secondary);
2286
- --tds-select-description-invalid-icon-display:none;
2287
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2288
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2289
- --tds-select-caret-size:1em;
2290
- --tds-select-caret-inline-offset:.75em;
2291
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2292
-
2293
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
2294
- --tds-select-dropdown-border:1px solid var(--t-border-color);
2295
- --tds-select-dropdown-padding:var(--t-spacing-1);
2296
- --tds-select-dropdown-margin-block:5px;
2297
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
2298
- --tds-select-dropdown-scrollbar-width:thin;
2299
- --tds-select-dropdown-border-radius:var(--t-border-radius);
2300
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2301
- --tds-select-dropdown-scroll-behavior:smooth;
2302
- --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
2303
- --tds-select-dropdown-closed-opacity:0;
2304
- --tds-select-dropdown-open-opacity:1;
2305
- --tds-select-dropdown-closed-translate:0 -8px;
2306
- --tds-select-dropdown-open-translate:0 0;
2307
-
2308
- --tds-select-option-gap:var(--t-spacing-1);
2309
- --tds-select-option-padding-block:var(--t-spacing-1);
2310
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2311
- --tds-select-option-font-size:1rem;
2312
- --tds-select-option-color:var(--t-text-color);
2313
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2314
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2315
- --tds-select-option-border-radius:var(--t-border-radius);
2438
+ .tds-sidenav-section-header h2{
2439
+ margin:0;
2440
+ font-size:var(--t-font-size-sm);
2441
+ font-weight:var(--t-font-weight-semibold);
2442
+ line-height:1.35;
2443
+ color:var(--t-text-color-secondary);
2444
+ text-transform:uppercase;
2445
+ }
2316
2446
 
2317
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2318
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2319
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
2320
- --tds-select-group-label-font-size:var(--t-font-size-sm);
2321
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2322
- --tds-select-group-label-letter-spacing:0;
2323
- --tds-select-group-label-color:var(--t-text-color-secondary);
2324
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2325
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2326
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
2447
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2448
+ padding-top:0;
2449
+ }
2327
2450
 
2328
- position:relative;
2451
+ .tds-sidenav-section-header [slot="label-actions"]{
2452
+ display:flex;
2453
+ gap:var(--t-spacing-half);
2454
+ align-items:center;
2455
+ }
2456
+
2457
+ .tds-sidenav-section [slot="section-actions"]{
2329
2458
  display:flex;
2330
- flex-direction:column;
2331
- gap:var(--t-spacing-half);
2459
+ gap:12px;
2460
+ align-items:center;
2461
+ min-height:42px;
2462
+ padding:var(--t-spacing-1) 0;
2332
2463
  }
2333
2464
 
2334
- .tds-select :is(label,.tds-select-label){
2335
- font-size:var(--t-font-size-md);
2336
- font-weight:var(--t-font-weight-normal);
2337
- color:var(--t-text-color);
2338
- cursor:default;
2339
- }
2465
+ .tds-sidenav-section-list,
2466
+ .tds-sidenav-item{
2467
+ width:100%;
2468
+ padding:0;
2469
+ margin:0;
2470
+ }
2340
2471
 
2341
- .tds-select :is(select,button){
2472
+ .tds-sidenav-item :is(a,button){
2342
2473
  position:relative;
2343
- place-items:center;
2344
- inline-size:100%;
2345
- min-block-size:var(--tds-select-min-height);
2346
- padding-block:var(--tds-select-padding-block);
2347
- padding-inline:var(--t-spacing-1);
2348
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2349
- font-family:inherit;
2350
- font-size:var(--tds-select-font-size);
2351
- line-height:1.15;
2352
- color:var(--tds-select-color);
2353
- text-align:left;
2474
+ display:flex;
2475
+ gap:12px;
2476
+ align-items:center;
2477
+ width:100%;
2478
+ padding:12px;
2479
+ overflow:hidden;
2480
+ font-size:var(--t-font-size-sm);
2481
+ line-height:18px;
2482
+ color:var(--t-text-color-headline);
2483
+ white-space:nowrap;
2484
+ text-decoration:none;
2354
2485
  -webkit-appearance:none;
2355
2486
  -moz-appearance:none;
2356
2487
  appearance:none;
2357
- cursor:var(--tds-select-cursor, default);
2358
- outline:var(--t-focus-ring-width) solid transparent;
2359
- outline-offset:0;
2360
- background-color:var(--tds-select-background-color);
2361
- background-image:var(--tds-select-background-image);
2362
- background-repeat:no-repeat;
2363
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
2364
- background-size:var(--tds-select-caret-size);
2365
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
2366
- border-radius:var(--t-form-border-radius);
2367
- transition-timing-function:var(--t-ease-in-out);
2368
- transition-duration:var(--t-duration-300);
2369
- transition-property:var(--tds-select-transition-property);
2488
+ cursor:pointer;
2489
+ background-color:var(--tds-sidenav-item-background, transparent);
2490
+ border:0;
2491
+ border-radius:var(--t-border-radius);
2492
+ transition:var(--tds-sidenav-item-transition);
2370
2493
  }
2371
2494
 
2372
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2373
- border-color:var(--tds-select-border-color-hover);
2495
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2496
+ display:block;
2497
+ flex:1;
2498
+ overflow:hidden;
2499
+ text-overflow:ellipsis;
2500
+ text-align:left;
2501
+ white-space:nowrap;
2374
2502
  }
2375
2503
 
2376
- :is(.tds-select :is(select,button)):focus{
2377
- outline-color:var(--t-focus-ring-color);
2378
- outline-offset:var(--t-focus-ring-offset);
2379
- border-color:var(--tds-select-border-color-active);
2504
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2505
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2506
+ color:var(--t-text-color-headline);
2507
+ text-decoration:none;
2380
2508
  }
2381
2509
 
2382
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2383
- color:var(--tds-select-placeholder-color);
2510
+ :is(.tds-sidenav-item :is(a,button)):active{
2511
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2384
2512
  }
2385
2513
 
2386
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2387
- --tds-select-border-color:var(--t-form-border-color-error);
2388
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2389
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2390
- --tds-select-background-color:var(--t-form-background-color-error);
2391
- --tds-select-description-color:var(--t-text-color-status-error);
2392
- --tds-select-description-invalid-icon-display:inline-block;
2393
- }
2394
-
2395
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2396
- margin-left:.25ch;
2397
- color:var(--t-text-color-status-error);
2398
- content:"*";
2514
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2515
+ overflow:hidden;
2516
+ color:var(--tds-sidenav-item-icon-color);
2399
2517
  }
2400
2518
 
2401
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2402
- --tds-select-border-color:var(--t-form-border-color-disabled);
2403
- --tds-select-background-color:var(--t-form-background-color-disabled);
2404
- --tds-select-color:var(--t-form-color-disabled);
2405
- --tds-select-cursor:not-allowed;
2406
- }
2519
+ :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{
2520
+ display:block;
2521
+ width:var(--tds-sidenav-item-icon-size);
2522
+ height:var(--tds-sidenav-item-icon-size);
2523
+ }
2407
2524
 
2408
- .tds-select:has( > [popover]:popover-open) > button{
2409
- border-color:var(--tds-select-border-color-active);
2410
- }
2525
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2526
+ --tds-sidenav-indent:19px;
2527
+ }
2411
2528
 
2412
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2413
- transform:rotate(.5turn);
2529
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2530
+ visibility:visible;
2531
+ block-size:auto;
2532
+ opacity:1;
2414
2533
  }
2415
2534
 
2416
- .tds-select :is(hr,li[role="separator"]){
2417
- margin-block:var(--t-spacing-half);
2418
- color:var(--tds-select-border-color);
2419
- border:0;
2420
- border-top:1px solid;
2535
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2536
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2537
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2538
+
2539
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2540
+ font-weight:var(--t-font-weight-semibold);
2421
2541
  }
2422
2542
 
2423
- .tds-select :is(li[role="option"],option:not([hidden])){
2424
- display:block;
2425
- padding-block:var(--tds-select-option-padding-block);
2426
- padding-inline:var(--tds-select-option-padding-inline);
2427
- overflow:hidden;
2428
- text-overflow:ellipsis;
2429
- font-size:var(--tds-select-option-font-size);
2430
- line-height:1;
2431
- color:var(--tds-select-option-color);
2432
- white-space:nowrap;
2433
- cursor:default;
2434
- border-radius:var(--tds-select-option-border-radius);
2543
+ .tds-sidenav-item:has(.tds-sidenav-section){
2544
+ display:flex;
2545
+ flex-direction:column;
2546
+ gap:var(--t-spacing-half);
2435
2547
  }
2436
2548
 
2437
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2438
- outline:0;
2439
- }
2549
+ .tds-sidenav-item .tds-sidenav-section-list{
2550
+ --tds-sidenav-item-depth:1;
2551
+ gap:0;
2552
+ }
2440
2553
 
2441
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2442
- background:var(--tds-select-option-background-hover);
2554
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2555
+ visibility:hidden;
2556
+ block-size:0;
2557
+ overflow-y:clip;
2558
+ opacity:0;
2559
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2443
2560
  }
2444
2561
 
2445
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2446
- background:var(--tds-select-option-background-active);
2562
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2563
+ --tds-sidenav-item-depth:2;
2447
2564
  }
2448
2565
 
2449
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2450
- color:var(--t-form-color-disabled);
2451
- cursor:not-allowed;
2566
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2567
+ min-height:var(--t-element-size-2xl);
2568
+ padding-block:9px;
2569
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2570
+ line-height:1;
2571
+ background-color:transparent;
2452
2572
  }
2453
2573
 
2454
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2455
- background:transparent;
2574
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2575
+ position:absolute;
2576
+ top:0;
2577
+ bottom:0;
2578
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2579
+ width:2px;
2580
+ content:"";
2581
+ background-color:var(--tds-sidenav-item-nested-border-color);
2582
+ transition:var(--tds-sidenav-item-transition);
2456
2583
  }
2457
2584
 
2458
- .tds-select :is(li[role="presentation"],legend){
2459
- position:sticky;
2460
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2461
- z-index:1;
2462
- float:inline-start;
2463
- inline-size:100%;
2464
- padding-block:var(--tds-select-group-label-padding-block);
2465
- padding-inline:var(--tds-select-group-label-padding-inline);
2466
- container-type:scroll-state;
2467
- font-size:var(--tds-select-group-label-font-size);
2468
- font-weight:var(--tds-select-group-label-font-weight);
2469
- letter-spacing:var(--tds-select-group-label-letter-spacing);
2470
- background:var(--tds-select-group-label-background);
2471
- text-box:trim-both cap alphabetic;
2472
- }
2473
-
2474
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2475
- display:inline-flex;
2476
- gap:var(--t-spacing-half);
2477
- align-items:center;
2478
- color:var(--tds-select-group-label-color);
2479
- transition:var(--tds-select-group-label-transition);
2480
- }
2481
-
2482
- @container scroll-state(stuck){
2483
-
2484
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2485
- color:var(--tds-select-group-label-color-stuck);
2486
- }
2487
-
2488
- @media (forced-colors: active){
2585
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2586
+ position:absolute;
2587
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2588
+ z-index:-1;
2589
+ height:100%;
2590
+ content:"";
2591
+ background-color:var(--tds-sidenav-item-nested-background);
2592
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2593
+ transition:var(--tds-sidenav-item-transition);
2594
+ }
2489
2595
 
2490
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2491
- color:var(--tds-select-group-label-color-stuck);
2492
- }
2493
- }
2596
+ :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)){
2597
+ display:block;
2598
+ text-align:left;
2599
+ white-space:normal;
2494
2600
  }
2495
2601
 
2496
- .tds-select.tds-select--lg{
2497
- --tds-select-min-height:var(--t-container-size-lg);
2498
- --tds-select-font-size:var(--t-font-size-lg);
2499
- }
2602
+ :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{
2603
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2604
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2605
+ }
2500
2606
 
2501
- @media (prefers-reduced-motion: reduce){
2607
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2608
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2609
+ }
2502
2610
 
2503
- .tds-select{
2504
- --tds-select-transition-property:none;
2505
- --tds-select-dropdown-transition:none;
2506
- --tds-select-dropdown-scroll-behavior:auto;
2507
- --tds-select-dropdown-closed-translate:none;
2508
- --tds-select-dropdown-open-translate:none;
2509
- --tds-select-caret-transition:none;
2510
- }
2511
- }
2611
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2612
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2613
+ font-weight:var(--t-font-weight-medium);
2614
+ }
2512
2615
 
2513
- .tds-select-description{
2616
+ .tds-sidenav-responsive-header{
2514
2617
  display:flex;
2515
- gap:var(--t-spacing-half);
2516
- align-items:flex-start;
2517
- margin:0;
2518
- font-size:var(--t-font-size-sm);
2519
- line-height:1.35;
2520
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
2521
- cursor:text;
2618
+ gap:var(--t-spacing-2);
2619
+ align-items:center;
2620
+ width:100%;
2522
2621
  }
2523
2622
 
2524
- .tds-select-description .tds-select-description-invalid-icon{
2525
- display:var(--tds-select-description-invalid-icon-display, none);
2526
- flex-shrink:0;
2527
- margin-block-start:calc(.5lh - .5em);
2528
- line-height:1.35;
2623
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2624
+ order:0;
2529
2625
  }
2530
2626
 
2531
- .tds-select > .tds-select-hidden-select{
2532
- position:absolute;
2533
- inline-size:1px;
2534
- block-size:1px;
2535
- padding:0;
2536
- margin:0;
2537
- pointer-events:none;
2538
- opacity:0;
2539
- }
2540
-
2541
- .tds-select:has(> button){
2542
- anchor-scope:--tds-select-anchor;
2543
- }
2627
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2628
+ flex:1;
2629
+ order:1;
2630
+ margin:0;
2631
+ font-size:var(--t-font-size-lg);
2632
+ font-weight:var(--t-font-weight-medium);
2633
+ color:var(--t-text-color-headline);
2634
+ }
2544
2635
 
2545
- .tds-select:has( > button) > button{
2546
- display:block;
2547
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2548
- anchor-name:--tds-select-anchor;
2636
+ @media (max-width: 719px){
2637
+ .tds-sidenav-collapse{
2638
+ z-index:10001;
2639
+ display:none;
2640
+ max-width:min(448px, calc(100vw - 48px));
2641
+ padding:0;
2642
+ margin:12px 0;
2643
+ position-area:bottom span-right;
2549
2644
  overflow:hidden;
2550
- text-overflow:ellipsis;
2551
- color:var(--tds-select-placeholder-color);
2552
- white-space:nowrap;
2553
- background-image:none;
2554
- 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);
2555
- -webkit-tap-highlight-color:transparent;
2645
+ outline:0;
2646
+ background:var(--t-surface-color-card);
2647
+ border:0;
2648
+ border-radius:6px;
2649
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2650
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2651
+ transform:var(--tds-sidenav-collapse-open-transform);
2652
+ transition:var(--tds-sidenav-collapse-transition-enter);
2653
+ will-change:transform;
2556
2654
  }
2557
2655
 
2558
- :is(.tds-select:has( > button) > button)::after{
2559
- position:absolute;
2560
- inset-block:0;
2561
- inset-inline-end:var(--tds-select-caret-inline-offset);
2562
- width:var(--tds-select-caret-size);
2563
- height:var(--tds-select-caret-size);
2564
- margin-block:auto;
2565
- line-height:1;
2566
- pointer-events:none;
2567
- content:var(--tds-select-background-image);
2568
- transform:rotate(0);
2569
- transition:var(--tds-select-caret-transition);
2570
- }
2571
-
2572
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
2573
- color:var(--tds-select-color);
2656
+ .tds-sidenav-scroll-container{
2657
+ --webkit-overflow-scrolling:touch;
2658
+ display:block;
2659
+ width:100%;
2660
+ height:-moz-fit-content;
2661
+ height:fit-content;
2662
+ padding:var(--t-spacing-2);
2663
+ overflow-y:auto;
2574
2664
  }
2575
2665
 
2576
- .tds-select:has( > button) [popover]{
2577
- inset:auto;
2578
- inline-size:-moz-max-content;
2579
- inline-size:max-content;
2580
- min-inline-size:anchor-size(width);
2581
- max-inline-size:100vi;
2582
- max-block-size:min(50vh, 20rem);
2583
- padding:var(--tds-select-dropdown-padding);
2584
- margin-block:var(--tds-select-dropdown-margin-block);
2585
- position-area:block-end span-inline-start;
2586
- position-anchor:--tds-select-anchor;
2587
- position-try-fallbacks:flip-block, flip-inline;
2588
- overflow:auto;
2589
- overflow-x:hidden;
2590
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2591
- overscroll-behavior:none;
2592
- -webkit-user-select:none;
2593
- -moz-user-select:none;
2594
- user-select:none;
2595
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2596
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2597
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2598
- background:var(--tds-select-dropdown-background-color);
2599
- border:var(--tds-select-dropdown-border);
2600
- border-radius:var(--tds-select-dropdown-border-radius);
2601
- box-shadow:var(--tds-select-dropdown-box-shadow);
2602
- opacity:var(--tds-select-dropdown-open-opacity);
2603
- translate:var(--tds-select-dropdown-open-translate);
2604
- transition:var(--tds-select-dropdown-transition);
2666
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2667
+ display:none;
2605
2668
  }
2606
-
2607
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
2608
- opacity:var(--tds-select-dropdown-closed-opacity);
2609
- translate:var(--tds-select-dropdown-closed-translate);
2669
+ @supports selector(:popover-open){
2670
+ .tds-sidenav-collapse:popover-open{
2671
+ display:flex;
2610
2672
  }
2611
2673
 
2612
- :is(.tds-select:has( > button) [popover]) ul{
2613
- padding:0;
2614
- margin:0;
2615
- list-style:none;
2674
+ .tds-sidenav-collapse:not(:popover-open){
2675
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2676
+ transition:var(--tds-sidenav-collapse-transition-exit);
2616
2677
  }
2617
2678
 
2618
- @starting-style{
2619
- :is(.tds-select:has( > button) [popover]):popover-open{
2620
- opacity:var(--tds-select-dropdown-closed-opacity);
2621
- translate:var(--tds-select-dropdown-closed-translate);
2679
+ @starting-style{
2680
+ .tds-sidenav-collapse:popover-open{
2681
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2682
+ transform:var(--tds-sidenav-collapse-closed-transform);
2622
2683
  }
2623
2684
  }
2624
-
2625
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2626
- .tds-select select:has(> button){
2627
- padding-inline-end:0;
2628
- background-image:none;
2629
2685
  }
2630
- @media (hover) and (pointer: fine){
2631
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2632
- padding-block:0;
2633
- -webkit-appearance:base-select;
2634
- -moz-appearance:base-select;
2635
- appearance:base-select;
2636
- }
2637
- }
2638
- :is(.tds-select select:has( > button))::picker-icon{
2639
- flex-shrink:0;
2640
- width:var(--tds-select-caret-size);
2641
- height:var(--tds-select-caret-size);
2642
- margin-inline-end:var(--tds-select-caret-inline-offset);
2643
- line-height:1;
2644
- content:var(--tds-select-background-image);
2645
- transition:var(--tds-select-caret-transition);
2646
- }
2647
-
2648
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2649
- opacity:var(--tds-select-dropdown-closed-opacity);
2650
- translate:var(--tds-select-dropdown-closed-translate);
2651
- }
2652
-
2653
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2654
- outline-color:var(--t-focus-ring-color);
2655
- outline-offset:var(--t-focus-ring-offset);
2656
- border-color:var(--tds-select-border-color-active);
2657
- }
2658
-
2659
- :is(.tds-select select:has( > button)):open::picker-icon{
2660
- opacity:1;
2661
- transform:rotate(.5turn);
2686
+ @supports not selector(:popover-open){
2687
+ .tds-sidenav-collapse.\:popover-open{
2688
+ display:flex;
2662
2689
  }
2663
2690
 
2664
- :is(.tds-select select:has( > button)) selectedcontent{
2665
- overflow:hidden;
2666
- text-overflow:ellipsis;
2667
- line-height:calc(var(--tds-select-min-height) - 2px);
2668
- white-space:nowrap;
2691
+ .tds-sidenav-collapse:not(.\:popover-open){
2692
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2693
+ transition:var(--tds-sidenav-collapse-transition-exit);
2669
2694
  }
2695
+ }
2696
+ }
2670
2697
 
2671
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2672
- color:var(--tds-select-placeholder-color);
2673
- }
2698
+ @media (min-width: 720px){
2699
+ .tds-sidenav-responsive-header{
2700
+ display:none;
2701
+ }
2702
+ }
2674
2703
 
2675
- :is(.tds-select select:has( > button))::picker(select){
2676
- inset:auto;
2677
- inline-size:-moz-max-content;
2678
- inline-size:max-content;
2679
- min-inline-size:anchor-size(width);
2680
- max-inline-size:100vi;
2681
- padding:var(--tds-select-dropdown-padding);
2682
- margin-block:var(--tds-select-dropdown-margin-block);
2683
- position-area:block-end span-inline-start;
2684
- position-try-fallbacks:flip-block, flip-inline;
2685
- overflow:auto;
2686
- overflow-x:hidden;
2687
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2688
- overscroll-behavior:none;
2689
- -webkit-user-select:none;
2690
- -moz-user-select:none;
2691
- user-select:none;
2692
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2693
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2694
- background:var(--tds-select-dropdown-background-color);
2695
- border:var(--tds-select-dropdown-border);
2696
- border-radius:var(--tds-select-dropdown-border-radius);
2697
- box-shadow:var(--tds-select-dropdown-box-shadow);
2698
- opacity:var(--tds-select-dropdown-open-opacity);
2699
- translate:var(--tds-select-dropdown-open-translate);
2700
- transition:var(--tds-select-dropdown-transition);
2704
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2705
+ display:none;
2701
2706
  }
2702
2707
 
2703
- :is(.tds-select select:has( > button)) option::checkmark{
2704
- display:none;
2708
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2709
+ display:block;
2705
2710
  }
2706
2711
 
2707
- @starting-style{
2708
- :is(.tds-select select:has( > button))::picker(select):popover-open{
2709
- opacity:var(--tds-select-dropdown-closed-opacity);
2710
- translate:var(--tds-select-dropdown-closed-translate);
2711
- }
2712
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2713
+ display:flex;
2714
+ flex-direction:column;
2712
2715
  }
2713
- }
2714
2716
 
2715
2717
  .tds-loading-spinner{
2716
2718
  --tds-loading-spinner-size:1.25em;