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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1356 -1356
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1356 -1356
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -72,743 +72,742 @@
72
72
  --tds-checkbox-group-description-line-height:1.3;
73
73
  }
74
74
 
75
- .tds-checkbox{
76
- --tds-checkbox-font-size:var(--t-font-size-md);
77
- --tds-checkbox-cursor:pointer;
78
- --tds-checkbox-line-height:1.4;
79
- --tds-checkbox-transition-property:background-color, border-color;
80
-
81
- --tds-checkbox-input-size:var(--t-element-size-md);
82
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
83
- --tds-checkbox-input-border-color:var(--t-form-border-color);
84
- --tds-checkbox-input-background-color:var(--t-form-background-color);
75
+ @layer t-critical{
76
+ tds-page-header:not(.hydrated){
77
+ display:none;
78
+ }
79
+ }
85
80
 
86
- --tds-checkbox-input-icon:none;
87
- --tds-checkbox-input-icon-visibility:hidden;
88
- --tds-checkbox-input-icon-opacity:0;
89
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
81
+ @layer t-component{
82
+ .tds-page-header{
83
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
84
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
85
+ --tds-page-header-color:var(--t-text-color);
86
+ --tds-page-header-bottom-border-color:transparent;
87
+ --tds-page-header-headline-color:var(--t-text-color-headline);
88
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
89
+ --tds-page-header-padding-x:var(--t-spacing-2);
90
+ --tds-page-header-padding-y:var(--t-spacing-2);
91
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
92
+ --tds-page-header-nav-gap:var(--t-spacing-1);
93
+ --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%);
94
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
95
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
96
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
97
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
98
+ --tds-page-header-nav-item-border-width:1px;
90
99
 
91
- --tds-checkbox-label-color:var(--t-form-color);
100
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
101
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
92
102
 
93
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
94
- --tds-checkbox-description-line-height:1.35;
95
- --tds-checkbox-description-color:var(--t-text-color-secondary);
96
- --tds-checkbox-description-invalid-icon-display:none;
103
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
104
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
105
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
97
106
 
98
- position:relative;
99
- display:inline-grid;
100
- grid-template-columns:auto;
101
- grid-auto-columns:1fr;
102
- gap:var(--t-spacing-fourth) 0;
103
- line-height:var(--tds-checkbox-line-height);
104
- -webkit-user-select:none;
105
- -moz-user-select:none;
106
- user-select:none;
107
- }
107
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
108
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
108
109
 
109
- .tds-checkbox label{
110
- grid-area:1 / 2;
111
- padding-inline-start:var(--t-spacing-1);
112
- font-size:var(--tds-checkbox-font-size);
113
- font-weight:var(--t-font-weight-normal);
114
- color:var(--tds-checkbox-label-color);
115
- cursor:var(--tds-checkbox-cursor);
116
- }
110
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
111
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
112
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
117
113
 
118
- .tds-checkbox tds-indeterminate{
119
- display:flex;
114
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
115
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
116
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
117
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
118
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
120
119
  }
121
120
 
122
- .tds-checkbox input[type="checkbox"]{
123
- position:relative;
124
- width:1em;
125
- height:1em;
126
- margin:calc((1lh - 1em) / 2) 0 0;
127
- font-size:var(--tds-checkbox-font-size);
128
- line-height:inherit;
129
- -webkit-appearance:none;
130
- -moz-appearance:none;
131
- appearance:none;
132
- cursor:var(--tds-checkbox-cursor);
133
- background-color:var(--tds-checkbox-input-background-color);
134
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
135
- border-radius:var(--tds-checkbox-input-border-radius);
136
- transition-timing-function:var(--t-ease-in-out);
137
- transition-duration:var(--t-duration-200);
138
- transition-property:var(--tds-checkbox-transition-property);
121
+ .tds-page-header--profile{
122
+ --tds-page-header-padding-y:20px;
139
123
  }
140
124
 
141
- :is(.tds-checkbox input[type="checkbox"])::before{
142
- position:absolute;
143
- top:50%;
144
- left:50%;
145
- visibility:var(--tds-checkbox-input-icon-visibility);
146
- width:100%;
147
- height:100%;
148
- content:"";
149
- background-color:var(--tds-checkbox-input-icon-fill);
150
- border-radius:var(--tds-checkbox-input-border-radius);
151
- opacity:var(--tds-checkbox-input-icon-opacity);
152
- -webkit-mask-image:var(--tds-checkbox-input-icon);
153
- mask-image:var(--tds-checkbox-input-icon);
154
- -webkit-mask-repeat:no-repeat;
155
- mask-repeat:no-repeat;
156
- -webkit-mask-size:contain;
157
- mask-size:contain;
158
- transform:translate(-50%, -50%);
159
- }
160
-
161
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
162
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
163
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
164
- }
165
-
166
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
167
- outline:var(--t-focus-ring-outline);
168
- outline-offset:var(--t-focus-ring-offset);
125
+ @supports (color: light-dark(#fff, #000)){
126
+ .tds-page-header{
127
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
128
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
169
129
  }
130
+ }
170
131
 
171
- :is(.tds-checkbox input[type="checkbox"]):disabled{
172
- pointer-events:none;
132
+ @media (min-width: 600px){
133
+ .tds-page-header{
134
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
135
+ --tds-page-header-color:var(--t-text-color-secondary);
136
+ --tds-page-header-bottom-border-color:var(--t-border-color);
137
+ --tds-page-header-padding-x:var(--t-spacing-3);
138
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
139
+ --tds-page-header-nav-gap:var(--t-spacing-half);
140
+ --tds-page-header-nav-background:transparent;
141
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
142
+ --tds-page-header-nav-item-border-width:1px;
143
+ --tds-page-header-nav-item-color:var(--t-text-color);
144
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
145
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
146
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
147
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
148
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
149
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
173
150
  }
174
-
175
- @media (prefers-reduced-motion: reduce){
176
-
177
- .tds-checkbox input[type="checkbox"]{
178
- --tds-checkbox-transition-property:none;
179
151
  }
180
- }
152
+ }
181
153
 
182
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
183
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
184
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
185
- --tds-checkbox-input-icon-visibility:visible;
186
- --tds-checkbox-input-icon-opacity:1;
187
- }
154
+ .tds-page-header{
155
+ display:flex;
156
+ flex-direction:column;
157
+ padding-top:var(--tds-page-header-padding-y);
158
+ color:var(--tds-page-header-color);
159
+ background:var(--tds-page-header-background-color);
160
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
161
+ }
188
162
 
189
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
190
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
191
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
192
- }
163
+ .tds-page-header:not(.has-nav){
164
+ padding-bottom:var(--tds-page-header-padding-y);
165
+ }
193
166
 
194
- .tds-checkbox:has(input:checked){
195
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
167
+ .tds-page-header.inactive{
168
+ background:var(--tds-page-header-background-color-inactive);
196
169
  }
197
170
 
198
- .tds-checkbox:has(input:indeterminate){
199
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
171
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
172
+ width:100%;
200
173
  }
201
174
 
202
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
203
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
204
- --tds-checkbox-description-color:var(--t-text-color-status-error);
205
- --tds-checkbox-description-invalid-icon-display:inline-block;
175
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
176
+ display:flex;
177
+ flex-flow:row wrap;
178
+ gap:var(--t-spacing-half) var(--t-spacing-1);
179
+ align-items:flex-start;
180
+ justify-content:flex-start;
181
+ min-width:0;
206
182
  }
207
183
 
208
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
209
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
210
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
184
+ :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{
185
+ display:flex;
186
+ gap:var(--tds-page-header-nav-gap);
187
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
188
+ margin:0 0 -1px;
189
+ overflow:auto;
190
+ list-style:none;
191
+ background:var(--tds-page-header-nav-background);
211
192
  }
212
193
 
213
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
214
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
215
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
194
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
195
+ position:relative;
196
+ display:inline-flex;
197
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
198
+ font-size:var(--t-font-size-sm);
199
+ line-height:22px;
200
+ color:var(--tds-page-header-nav-item-color);
201
+ white-space:nowrap;
202
+ text-decoration:none;
203
+ -webkit-appearance:none;
204
+ -moz-appearance:none;
205
+ appearance:none;
206
+ cursor:pointer;
207
+ outline-offset:-2px;
208
+ background-color:var(--tds-page-header-nav-item-background-color);
209
+ background-clip:padding-box;
210
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
211
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
212
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
216
213
  }
217
214
 
218
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
219
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
220
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
215
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
216
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
217
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
218
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
219
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
221
220
  }
222
221
 
223
- .tds-checkbox:has(input:required) label::after{
224
- margin-left:.25ch;
225
- color:var(--t-text-color-status-error);
226
- content:"*";
227
- }
222
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
223
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
224
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
225
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
226
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
227
+ }
228
228
 
229
- .tds-checkbox:has(input:disabled){
230
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
231
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
229
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
230
+ background-color:var(--tds-page-header-nav-item-background-color-active);
231
+ border-color:var(--tds-page-header-nav-item-border-color-active);
232
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
233
+ }
232
234
 
233
- --tds-checkbox-label-color:var(--t-form-color-disabled);
234
- --tds-checkbox-description-color:var(--t-form-color-disabled);
235
- --tds-checkbox-cursor:not-allowed;
236
- }
235
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
236
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
237
+ color:var(--tds-page-header-nav-item-color-disabled);
238
+ cursor:not-allowed;
239
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
240
+ opacity:1;
241
+ }
237
242
 
238
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
239
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
243
+ @media (min-width: 600px){
244
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
245
+ position:absolute;
246
+ inset:auto -1px -1px;
247
+ height:1px;
248
+ pointer-events:none;
249
+ content:"";
250
+ background-color:var(--tds-page-header-bottom-border-color);
251
+ }
252
+ }
253
+
254
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
255
+ position:relative;
240
256
  }
241
257
 
242
- .tds-checkbox-description{
258
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
259
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
260
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
261
+ }
262
+
263
+ :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{
264
+ position:absolute;
265
+ top:-5px;
266
+ right:-2px;
267
+ width:10px;
268
+ height:10px;
269
+ content:"";
270
+ background:var(--tds-page-header-nav-item-indicator-color);
271
+ border-radius:50%;
272
+ }
273
+
274
+ @media (prefers-reduced-motion: no-preference){
275
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
276
+ animation:indicator-pulse 1.25s ease infinite;
277
+ }
278
+ }
279
+
280
+ .tds-page-header__title-bar{
243
281
  display:flex;
244
- grid-area:2 / 2;
245
- gap:var(--t-spacing-half);
282
+ flex-direction:column;
283
+ gap:var(--t-spacing-2) var(--t-spacing-1);
246
284
  align-items:flex-start;
247
- padding-inline-start:var(--t-spacing-1);
248
- margin:0;
249
- font-size:var(--tds-checkbox-description-font-size);
250
- line-height:var(--tds-checkbox-description-line-height);
251
- color:var(--tds-checkbox-description-color);
252
- cursor:text;
285
+ justify-content:space-between;
286
+ padding:0 var(--tds-page-header-padding-x);
253
287
  }
254
288
 
255
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
256
- display:var(--tds-checkbox-description-invalid-icon-display);
257
- flex-shrink:0;
258
- margin-top:calc(.5lh - .5em);
259
- line-height:var(--tds-checkbox-description-line-height);
289
+ .tds-page-header--profile > .tds-page-header__title-bar{
290
+ align-items:center;
260
291
  }
261
292
 
262
- .tds-checkbox--sm{
263
- --tds-checkbox-line-height:1.35;
264
- --tds-checkbox-input-size:var(--t-element-size-sm);
265
- --tds-checkbox-font-size:var(--t-font-size-sm);
266
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
267
- --tds-checkbox-description-line-height:1.3;
293
+ .tds-page-header__primary{
294
+ width:100%;
268
295
  }
269
296
 
270
-
271
- @media (prefers-reduced-motion: no-preference){
272
-
273
- :root{
274
- interpolate-size:allow-keywords;
275
- }
297
+ .tds-page-header__primary h1{
298
+ margin:0;
299
+ font-size:var(--tds-page-header-headline-font-size);
300
+ font-weight:var(--t-font-weight-normal);
301
+ line-height:32px;
302
+ color:var(--tds-page-header-headline-color);
303
+ overflow-wrap:break-word;
276
304
  }
277
305
 
278
- @layer tds-component{
279
- tds-sidenav,
280
- .tds-sidenav{
281
- --tds-sidenav-indent:12px;
282
- --tds-sidenav-item-depth:0;
283
-
284
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
306
+ @media (min-width: 960px){
307
+ .tds-page-header__primary{
308
+ flex:1 1 max-content;
309
+ width:auto;
310
+ min-width:0;
311
+ max-width:100%;
312
+ }
285
313
 
286
- --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;
287
- --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;
288
- --tds-sidenav-collapse-closed-opacity:0;
289
- --tds-sidenav-collapse-open-opacity:1;
290
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
291
- --tds-sidenav-collapse-open-transform:translateY(0);
314
+ .tds-page-header__title-bar,
315
+ .tds-page-header--profile .tds-page-header__title-bar{
316
+ flex-flow:row nowrap;
317
+ row-gap:12px;
318
+ align-items:flex-start;
319
+ }
320
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
321
+ width:auto;
322
+ }
292
323
 
293
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
294
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
295
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
296
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
324
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
325
+ justify-content:flex-end;
326
+ }
327
+ }
297
328
 
298
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
299
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
300
- --tds-sidenav-item-nested-background-selected:transparent;
329
+ .tds-page-header-phone,
330
+ .tds-page-header-email{
331
+ color:var(--tds-page-header-color);
332
+ white-space:nowrap;
333
+ }
301
334
 
302
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
303
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
304
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
335
+ .tds-page-header-email{
336
+ max-width:100%;
337
+ overflow:hidden;
338
+ text-overflow:ellipsis;
339
+ }
305
340
 
306
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
307
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
341
+ @keyframes indicator-pulse{
342
+ 0%{
343
+ opacity:.3;
344
+ transform:scale(.9);
308
345
  }
309
346
 
310
- @media (prefers-reduced-motion: reduce){
311
- tds-sidenav,
312
- .tds-sidenav{
313
- --tds-sidenav-collapse-transition-enter:none;
314
- --tds-sidenav-collapse-transition-exit:none;
315
- --tds-sidenav-collapse-closed-transform:none;
316
- --tds-sidenav-collapse-open-transform:none;
347
+ 100%{
348
+ opacity:0;
349
+ transform:scale(1.75);
317
350
  }
318
- }
351
+ }
319
352
 
320
- .tds-sidenav--theme-gray{
321
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
322
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
323
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
324
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
325
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
326
- }
353
+ .tds-combo-box{
354
+ --tds-combo-box-button-offset:4px;
327
355
  }
328
356
 
329
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
330
- display:flex;
357
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
358
+ transform:rotate(.5turn);
331
359
  }
332
360
 
333
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
334
- flex-direction:column;
335
- gap:var(--t-spacing-half);
336
- width:100%;
337
- }
361
+ .tds-combo-box--lg{
362
+ --tds-combo-box-button-offset:5px;
363
+ }
338
364
 
339
- .tds-sidenav-section-list{
340
- width:100%;
341
- padding:0;
342
- margin:0;
343
- list-style:none;
365
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
366
+ display:none;
344
367
  }
345
368
 
346
- .tds-sidenav-section-header{
369
+ .tds-combo-box-input{
347
370
  display:flex;
348
- align-items:baseline;
349
- justify-content:space-between;
350
- padding-top:var(--t-spacing-2);
371
+ flex:1;
372
+ align-items:center;
373
+ padding-block:var(--tds-field-padding-block);
374
+ padding-inline:var(--tds-field-padding-inline);
375
+ font-family:inherit;
376
+ font-size:inherit;
377
+ color:inherit;
378
+ outline:0;
379
+ background:transparent;
380
+ border:0;
351
381
  }
352
382
 
353
- .tds-sidenav-section-header h2{
354
- margin:0;
355
- font-size:var(--t-font-size-sm);
356
- font-weight:var(--t-font-weight-semibold);
357
- line-height:1.35;
358
- color:var(--t-text-color-secondary);
359
- text-transform:uppercase;
383
+ .tds-combo-box-input:has( + .tds-combo-box-button){
384
+ padding-inline-end:0;
360
385
  }
361
386
 
362
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
363
- padding-top:0;
387
+ .tds-combo-box-input::-moz-placeholder{
388
+ color:var(--tds-field-placeholder-color);
389
+ -moz-user-select:none;
390
+ user-select:none;
364
391
  }
365
392
 
366
- .tds-sidenav-section-header [slot="label-actions"]{
367
- display:flex;
368
- gap:var(--t-spacing-half);
369
- align-items:center;
393
+ .tds-combo-box-input::placeholder{
394
+ color:var(--tds-field-placeholder-color);
395
+ -webkit-user-select:none;
396
+ -moz-user-select:none;
397
+ user-select:none;
370
398
  }
371
399
 
372
- .tds-sidenav-section [slot="section-actions"]{
373
- display:flex;
374
- gap:12px;
375
- align-items:center;
376
- min-height:42px;
377
- padding:var(--t-spacing-1) 0;
378
- }
379
-
380
- .tds-sidenav-section-list,
381
- .tds-sidenav-item{
382
- width:100%;
400
+ .tds-combo-box-button{
401
+ flex-shrink:0;
402
+ align-self:center;
403
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
404
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
383
405
  padding:0;
384
- margin:0;
406
+ margin-inline-end:var(--tds-combo-box-button-offset);
385
407
  }
386
408
 
387
- .tds-sidenav-item :is(a,button){
388
- position:relative;
389
- display:flex;
390
- gap:12px;
391
- align-items:center;
392
- width:100%;
393
- padding:12px;
394
- overflow:hidden;
395
- font-size:var(--t-font-size-sm);
396
- line-height:18px;
397
- color:var(--t-text-color-headline);
398
- white-space:nowrap;
399
- text-decoration:none;
400
- -webkit-appearance:none;
401
- -moz-appearance:none;
402
- appearance:none;
403
- cursor:pointer;
404
- background-color:var(--tds-sidenav-item-background, transparent);
405
- border:0;
406
- border-radius:var(--t-border-radius);
407
- transition:var(--tds-sidenav-item-transition);
409
+ .tds-combo-box-button > svg{
410
+ inline-size:var(--tds-field-font-size);
411
+ block-size:var(--tds-field-font-size);
412
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
408
413
  }
409
414
 
410
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
411
- display:block;
412
- flex:1;
413
- overflow:hidden;
414
- text-overflow:ellipsis;
415
- text-align:left;
416
- white-space:nowrap;
417
- }
415
+ .tds-combo-box-popover{
416
+ width:var(--trigger-width);
417
+ max-block-size:inherit;
418
+ padding:var(--t-spacing-1);
419
+ overflow:auto;
420
+ scroll-behavior:smooth;
421
+ overscroll-behavior:none;
422
+ -webkit-user-select:none;
423
+ -moz-user-select:none;
424
+ user-select:none;
425
+ outline:0;
426
+ scrollbar-color:#0004 var(--t-surface-color-card);
427
+ scrollbar-width:thin;
428
+ background:var(--t-surface-color-card);
429
+ background-clip:padding-box;
430
+ border:1px solid var(--t-border-color);
431
+ border-radius:var(--t-border-radius);
432
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
433
+ }
418
434
 
419
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
420
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
421
- color:var(--t-text-color-headline);
422
- text-decoration:none;
423
- }
435
+ .tds-combo-box-popover[data-entering]{
436
+ animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
437
+ }
424
438
 
425
- :is(.tds-sidenav-item :is(a,button)):active{
426
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
427
- }
439
+ .tds-combo-box-popover[data-exiting]{
440
+ animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
441
+ }
428
442
 
429
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
430
- overflow:hidden;
431
- color:var(--tds-sidenav-item-icon-color);
432
- }
443
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
444
+ will-change:opacity, transform;
445
+ }
433
446
 
434
- :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{
435
- display:block;
436
- width:var(--tds-sidenav-item-icon-size);
437
- height:var(--tds-sidenav-item-icon-size);
438
- }
447
+ @keyframes tds-combo-box-popover{
448
+ from{
449
+ opacity:0;
450
+ transform:translateY(-8px);
451
+ }
452
+ }
439
453
 
440
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
441
- --tds-sidenav-indent:19px;
454
+ @media (prefers-reduced-motion: reduce){
455
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
456
+ animation:none;
442
457
  }
443
458
 
444
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
445
- visibility:visible;
446
- block-size:auto;
447
- opacity:1;
448
- }
459
+ .tds-combo-box-button > svg{
460
+ transition:none;
461
+ }
462
+ }
449
463
 
450
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
451
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
452
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
464
+ .tds-combo-box-list{
465
+ padding:0;
466
+ margin:0;
467
+ }
453
468
 
454
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
455
- font-weight:var(--t-font-weight-semibold);
469
+ .tds-combo-box-list-item{
470
+ display:block;
471
+ padding-block:var(--t-spacing-1);
472
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
473
+ overflow:hidden;
474
+ text-overflow:ellipsis;
475
+ font-size:1rem;
476
+ color:var(--t-text-color);
477
+ white-space:nowrap;
478
+ cursor:default;
479
+ border-radius:var(--t-border-radius);
480
+ }
481
+
482
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
483
+ background:var(--t-fill-color-neutral-070);
456
484
  }
457
485
 
458
- .tds-sidenav-item:has(.tds-sidenav-section){
459
- display:flex;
460
- flex-direction:column;
461
- gap:var(--t-spacing-half);
486
+ .tds-combo-box-list-item[data-selected]{
487
+ background:var(--t-fill-color-button-interaction-ghost-active);
462
488
  }
463
489
 
464
- .tds-sidenav-item .tds-sidenav-section-list{
465
- --tds-sidenav-item-depth:1;
466
- gap:0;
490
+ .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
491
+ background:var(--t-fill-color-neutral-060);
467
492
  }
468
493
 
469
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
470
- visibility:hidden;
471
- block-size:0;
472
- overflow-y:clip;
473
- opacity:0;
474
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
475
- }
494
+ .tds-combo-box-list-item[data-disabled]{
495
+ color:var(--t-form-color-disabled);
496
+ cursor:not-allowed;
497
+ }
476
498
 
477
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
478
- --tds-sidenav-item-depth:2;
499
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
500
+ background:transparent;
479
501
  }
480
502
 
481
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
482
- min-height:var(--t-element-size-2xl);
483
- padding-block:9px;
484
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
485
- line-height:1;
486
- background-color:transparent;
487
- }
503
+ .tds-combo-box-empty-state{
504
+ position:relative;
505
+ min-block-size:var(--t-spacing-3);
506
+ padding-block:var(--t-spacing-1);
507
+ padding-inline:var(--t-spacing-2);
508
+ font-size:var(--t-font-size-md);
509
+ color:var(--t-text-color-secondary);
510
+ }
488
511
 
489
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
490
- position:absolute;
491
- top:0;
492
- bottom:0;
493
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
494
- width:2px;
495
- content:"";
496
- background-color:var(--tds-sidenav-item-nested-border-color);
497
- transition:var(--tds-sidenav-item-transition);
498
- }
512
+ .tds-combo-box-load-more{
513
+ position:relative;
514
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
515
+ }
499
516
 
500
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
501
- position:absolute;
502
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
503
- z-index:-1;
504
- height:100%;
505
- content:"";
506
- background-color:var(--tds-sidenav-item-nested-background);
507
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
508
- transition:var(--tds-sidenav-item-transition);
509
- }
517
+ .tds-combo-box-empty-state,
518
+ .tds-combo-box-load-more{
519
+ --tds-loading-spinner-visibility:visible;
520
+ --tds-loading-spinner-animation-play-state:running;
521
+ }
510
522
 
511
- :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)){
512
- display:block;
513
- text-align:left;
514
- white-space:normal;
515
- }
523
+ .tds-combo-box-list-section:not(:first-child){
524
+ margin-block-start:var(--t-spacing-half);
525
+ }
516
526
 
517
- :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{
518
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
519
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
520
- }
527
+ .tds-combo-box-section-header{
528
+ padding-block:var(--t-spacing-1);
529
+ padding-inline:var(--t-spacing-1);
530
+ font-size:var(--t-font-size-sm);
531
+ font-weight:var(--t-font-weight-semibold);
532
+ color:var(--t-text-color-secondary);
533
+ }
521
534
 
522
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
523
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
524
- }
535
+ .tds-checkbox{
536
+ --tds-checkbox-font-size:var(--t-font-size-md);
537
+ --tds-checkbox-cursor:pointer;
538
+ --tds-checkbox-line-height:1.4;
539
+ --tds-checkbox-transition-property:background-color, border-color;
525
540
 
526
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
527
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
528
- font-weight:var(--t-font-weight-medium);
529
- }
541
+ --tds-checkbox-input-size:var(--t-element-size-md);
542
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
543
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
544
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
530
545
 
531
- .tds-sidenav-responsive-header{
532
- display:flex;
533
- gap:var(--t-spacing-2);
534
- align-items:center;
535
- width:100%;
546
+ --tds-checkbox-input-icon:none;
547
+ --tds-checkbox-input-icon-visibility:hidden;
548
+ --tds-checkbox-input-icon-opacity:0;
549
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
550
+
551
+ --tds-checkbox-label-color:var(--t-form-color);
552
+
553
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
554
+ --tds-checkbox-description-line-height:1.35;
555
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
556
+ --tds-checkbox-description-invalid-icon-display:none;
557
+
558
+ position:relative;
559
+ display:inline-grid;
560
+ grid-template-columns:auto;
561
+ grid-auto-columns:1fr;
562
+ gap:var(--t-spacing-fourth) 0;
563
+ line-height:var(--tds-checkbox-line-height);
564
+ -webkit-user-select:none;
565
+ -moz-user-select:none;
566
+ user-select:none;
536
567
  }
537
568
 
538
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
539
- order:0;
569
+ .tds-checkbox label{
570
+ grid-area:1 / 2;
571
+ padding-inline-start:var(--t-spacing-1);
572
+ font-size:var(--tds-checkbox-font-size);
573
+ font-weight:var(--t-font-weight-normal);
574
+ color:var(--tds-checkbox-label-color);
575
+ cursor:var(--tds-checkbox-cursor);
540
576
  }
541
577
 
542
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
543
- flex:1;
544
- order:1;
545
- margin:0;
546
- font-size:var(--t-font-size-lg);
547
- font-weight:var(--t-font-weight-medium);
548
- color:var(--t-text-color-headline);
578
+ .tds-checkbox tds-indeterminate{
579
+ display:flex;
549
580
  }
550
581
 
551
- @media (max-width: 719px){
552
- .tds-sidenav-collapse{
553
- z-index:10001;
554
- display:none;
555
- max-width:min(448px, calc(100vw - 48px));
556
- padding:0;
557
- margin:12px 0;
558
- position-area:bottom span-right;
559
- overflow:hidden;
560
- outline:0;
561
- background:var(--t-surface-color-card);
562
- border:0;
563
- border-radius:6px;
564
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
565
- opacity:var(--tds-sidenav-collapse-open-opacity);
566
- transform:var(--tds-sidenav-collapse-open-transform);
567
- transition:var(--tds-sidenav-collapse-transition-enter);
568
- will-change:transform;
582
+ .tds-checkbox input[type="checkbox"]{
583
+ position:relative;
584
+ width:1em;
585
+ height:1em;
586
+ margin:calc((1lh - 1em) / 2) 0 0;
587
+ font-size:var(--tds-checkbox-font-size);
588
+ line-height:inherit;
589
+ -webkit-appearance:none;
590
+ -moz-appearance:none;
591
+ appearance:none;
592
+ cursor:var(--tds-checkbox-cursor);
593
+ background-color:var(--tds-checkbox-input-background-color);
594
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
595
+ border-radius:var(--tds-checkbox-input-border-radius);
596
+ transition-timing-function:var(--t-ease-in-out);
597
+ transition-duration:var(--t-duration-200);
598
+ transition-property:var(--tds-checkbox-transition-property);
569
599
  }
570
600
 
571
- .tds-sidenav-scroll-container{
572
- --webkit-overflow-scrolling:touch;
573
- display:block;
574
- width:100%;
575
- height:-moz-fit-content;
576
- height:fit-content;
577
- padding:var(--t-spacing-2);
578
- overflow-y:auto;
579
- }
601
+ :is(.tds-checkbox input[type="checkbox"])::before{
602
+ position:absolute;
603
+ top:50%;
604
+ left:50%;
605
+ visibility:var(--tds-checkbox-input-icon-visibility);
606
+ width:100%;
607
+ height:100%;
608
+ content:"";
609
+ background-color:var(--tds-checkbox-input-icon-fill);
610
+ border-radius:var(--tds-checkbox-input-border-radius);
611
+ opacity:var(--tds-checkbox-input-icon-opacity);
612
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
613
+ mask-image:var(--tds-checkbox-input-icon);
614
+ -webkit-mask-repeat:no-repeat;
615
+ mask-repeat:no-repeat;
616
+ -webkit-mask-size:contain;
617
+ mask-size:contain;
618
+ transform:translate(-50%, -50%);
619
+ }
580
620
 
581
- .tds-sidenav-item :is(a, button) :is(.prefix){
582
- display:none;
583
- }
584
- @supports selector(:popover-open){
585
- .tds-sidenav-collapse:popover-open{
586
- display:flex;
621
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
622
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
623
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
587
624
  }
588
625
 
589
- .tds-sidenav-collapse:not(:popover-open){
590
- opacity:var(--tds-sidenav-collapse-closed-opacity);
591
- transition:var(--tds-sidenav-collapse-transition-exit);
626
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
627
+ outline:var(--t-focus-ring-outline);
628
+ outline-offset:var(--t-focus-ring-offset);
592
629
  }
593
630
 
594
- @starting-style{
595
- .tds-sidenav-collapse:popover-open{
596
- opacity:var(--tds-sidenav-collapse-closed-opacity);
597
- transform:var(--tds-sidenav-collapse-closed-transform);
598
- }
631
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
632
+ pointer-events:none;
599
633
  }
634
+
635
+ @media (prefers-reduced-motion: reduce){
636
+
637
+ .tds-checkbox input[type="checkbox"]{
638
+ --tds-checkbox-transition-property:none;
600
639
  }
601
- @supports not selector(:popover-open){
602
- .tds-sidenav-collapse.\:popover-open{
603
- display:flex;
604
640
  }
605
641
 
606
- .tds-sidenav-collapse:not(.\:popover-open){
607
- opacity:var(--tds-sidenav-collapse-closed-opacity);
608
- transition:var(--tds-sidenav-collapse-transition-exit);
642
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
643
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
644
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
645
+ --tds-checkbox-input-icon-visibility:visible;
646
+ --tds-checkbox-input-icon-opacity:1;
647
+ }
648
+
649
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
650
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
651
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
609
652
  }
653
+
654
+ .tds-checkbox:has(input:checked){
655
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
610
656
  }
611
- }
612
657
 
613
- @media (min-width: 720px){
614
- .tds-sidenav-responsive-header{
615
- display:none;
658
+ .tds-checkbox:has(input:indeterminate){
659
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
616
660
  }
617
- }
618
661
 
619
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
620
- display:none;
662
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
663
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
664
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
665
+ --tds-checkbox-description-invalid-icon-display:inline-block;
666
+ }
667
+
668
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
669
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
670
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
621
671
  }
622
672
 
623
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
624
- display:block;
673
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
674
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
675
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
625
676
  }
626
677
 
627
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
628
- display:flex;
629
- flex-direction:column;
678
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
679
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
680
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
681
+ }
682
+
683
+ .tds-checkbox:has(input:required) label::after{
684
+ margin-left:.25ch;
685
+ color:var(--t-text-color-status-error);
686
+ content:"*";
630
687
  }
631
688
 
632
- .tds-combo-box{
633
- --tds-combo-box-button-offset:4px;
634
- }
689
+ .tds-checkbox:has(input:disabled){
690
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
691
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
635
692
 
636
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
637
- transform:rotate(.5turn);
693
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
694
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
695
+ --tds-checkbox-cursor:not-allowed;
638
696
  }
639
697
 
640
- .tds-combo-box--lg{
641
- --tds-combo-box-button-offset:5px;
698
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
699
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
700
+ }
701
+
702
+ .tds-checkbox-description{
703
+ display:flex;
704
+ grid-area:2 / 2;
705
+ gap:var(--t-spacing-half);
706
+ align-items:flex-start;
707
+ padding-inline-start:var(--t-spacing-1);
708
+ margin:0;
709
+ font-size:var(--tds-checkbox-description-font-size);
710
+ line-height:var(--tds-checkbox-description-line-height);
711
+ color:var(--tds-checkbox-description-color);
712
+ cursor:text;
642
713
  }
643
714
 
644
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
645
- display:none;
715
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
716
+ display:var(--tds-checkbox-description-invalid-icon-display);
717
+ flex-shrink:0;
718
+ margin-top:calc(.5lh - .5em);
719
+ line-height:var(--tds-checkbox-description-line-height);
720
+ }
721
+
722
+ .tds-checkbox--sm{
723
+ --tds-checkbox-line-height:1.35;
724
+ --tds-checkbox-input-size:var(--t-element-size-sm);
725
+ --tds-checkbox-font-size:var(--t-font-size-sm);
726
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
727
+ --tds-checkbox-description-line-height:1.3;
646
728
  }
647
729
 
648
- .tds-combo-box-input{
730
+ .tds-radio-group{
731
+ --tds-radio-group-font-size:var(--t-font-size-md);
732
+ --tds-radio-group-line-height:1.4;
733
+ --tds-radio-group-gap:var(--t-spacing-1);
734
+
735
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
736
+ --tds-radio-group-description-line-height:1.35;
737
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
738
+ --tds-radio-group-description-invalid-icon-display:none;
649
739
  display:flex;
650
- flex:1;
651
- align-items:center;
652
- padding-block:var(--tds-field-padding-block);
653
- padding-inline:var(--tds-field-padding-inline);
654
- font-family:inherit;
655
- font-size:inherit;
656
- color:inherit;
657
- outline:0;
658
- background:transparent;
740
+ flex-direction:column;
741
+ gap:0;
742
+ padding:0;
743
+ margin:0;
744
+
745
+ font-size:var(--tds-radio-group-font-size);
746
+ line-height:var(--tds-radio-group-line-height);
659
747
  border:0;
660
748
  }
661
749
 
662
- .tds-combo-box-input:has( + .tds-combo-box-button){
663
- padding-inline-end:0;
750
+ .tds-radio-group legend{
751
+ float:left;
752
+ padding:0;
753
+ margin:0;
664
754
  }
665
755
 
666
- .tds-combo-box-input::-moz-placeholder{
667
- color:var(--tds-field-placeholder-color);
668
- -moz-user-select:none;
669
- user-select:none;
756
+ .tds-radio-group[aria-invalid="true"]{
757
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
758
+ --tds-radio-group-description-invalid-icon-display:inline-block;
670
759
  }
671
760
 
672
- .tds-combo-box-input::placeholder{
673
- color:var(--tds-field-placeholder-color);
674
- -webkit-user-select:none;
675
- -moz-user-select:none;
676
- user-select:none;
677
- }
761
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
762
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
763
+ }
678
764
 
679
- .tds-combo-box-button{
680
- flex-shrink:0;
681
- align-self:center;
682
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
683
- block-size:calc(var(--tds-field-min-height) - (var(--tds-combo-box-button-offset) * 2));
684
- padding:0;
685
- margin-inline-end:var(--tds-combo-box-button-offset);
686
- }
765
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
766
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
767
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
768
+ }
687
769
 
688
- .tds-combo-box-button > svg{
689
- inline-size:var(--tds-field-font-size);
690
- block-size:var(--tds-field-font-size);
691
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
692
- }
693
-
694
- .tds-combo-box-popover{
695
- width:var(--trigger-width);
696
- max-block-size:inherit;
697
- padding:var(--t-spacing-1);
698
- overflow:auto;
699
- scroll-behavior:smooth;
700
- overscroll-behavior:none;
701
- -webkit-user-select:none;
702
- -moz-user-select:none;
703
- user-select:none;
704
- outline:0;
705
- scrollbar-color:#0004 var(--t-surface-color-card);
706
- scrollbar-width:thin;
707
- background:var(--t-surface-color-card);
708
- background-clip:padding-box;
709
- border:1px solid var(--t-border-color);
710
- border-radius:var(--t-border-radius);
711
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
712
- }
713
-
714
- .tds-combo-box-popover[data-entering]{
715
- animation:tds-combo-box-popover var(--t-duration-300) var(--t-ease-out);
716
- }
717
-
718
- .tds-combo-box-popover[data-exiting]{
719
- animation:tds-combo-box-popover var(--t-duration-200) var(--t-ease-in) reverse;
720
- }
721
-
722
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
723
- will-change:opacity, transform;
724
- }
725
-
726
- @keyframes tds-combo-box-popover{
727
- from{
728
- opacity:0;
729
- transform:translateY(-8px);
730
- }
731
- }
732
-
733
- @media (prefers-reduced-motion: reduce){
734
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
735
- animation:none;
736
- }
737
-
738
- .tds-combo-box-button > svg{
739
- transition:none;
740
- }
741
- }
742
-
743
- .tds-combo-box-list{
744
- padding:0;
745
- margin:0;
746
- }
747
-
748
- .tds-combo-box-list-item{
749
- display:block;
750
- padding-block:var(--t-spacing-1);
751
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
752
- overflow:hidden;
753
- text-overflow:ellipsis;
754
- font-size:1rem;
755
- color:var(--t-text-color);
756
- white-space:nowrap;
757
- cursor:default;
758
- border-radius:var(--t-border-radius);
759
- }
760
-
761
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
762
- background:var(--t-fill-color-neutral-070);
763
- }
764
-
765
- .tds-combo-box-list-item[data-selected]{
766
- background:var(--t-fill-color-button-interaction-ghost-active);
767
- }
768
-
769
- .tds-combo-box-list-item[data-pressed]:not([data-disabled]){
770
- background:var(--t-fill-color-neutral-060);
771
- }
772
-
773
- .tds-combo-box-list-item[data-disabled]{
774
- color:var(--t-form-color-disabled);
775
- cursor:not-allowed;
776
- }
770
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
771
+ --tds-radio-input-background-color:var(--t-form-background-color);
772
+ }
777
773
 
778
- .tds-combo-box-list-item[data-disabled][data-hovered]{
779
- background:transparent;
774
+ .tds-radio-group:has(input:required) legend::after{
775
+ margin-left:.25ch;
776
+ color:var(--t-text-color-status-error);
777
+ content:"*";
780
778
  }
781
779
 
782
- .tds-combo-box-empty-state{
783
- position:relative;
784
- min-block-size:var(--t-spacing-3);
785
- padding-block:var(--t-spacing-1);
786
- padding-inline:var(--t-spacing-2);
787
- font-size:var(--t-font-size-md);
788
- color:var(--t-text-color-secondary);
789
- }
790
-
791
- .tds-combo-box-load-more{
792
- position:relative;
793
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
780
+ .tds-radio-group-fields{
781
+ display:flex;
782
+ flex-direction:column;
783
+ gap:var(--tds-radio-group-gap);
784
+ align-items:flex-start;
785
+ margin-top:var(--t-spacing-1);
794
786
  }
795
787
 
796
- .tds-combo-box-empty-state,
797
- .tds-combo-box-load-more{
798
- --tds-loading-spinner-visibility:visible;
799
- --tds-loading-spinner-animation-play-state:running;
788
+ .tds-radio-group-description{
789
+ display:flex;
790
+ gap:var(--t-spacing-half);
791
+ align-items:flex-start;
792
+ margin:var(--t-spacing-fourth) 0 0;
793
+ font-size:var(--tds-radio-group-description-font-size);
794
+ line-height:var(--tds-radio-group-description-line-height);
795
+ color:var(--tds-radio-group-description-color);
796
+ cursor:text;
800
797
  }
801
798
 
802
- .tds-combo-box-list-section:not(:first-child){
803
- margin-block-start:var(--t-spacing-half);
799
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
800
+ display:var(--tds-radio-group-description-invalid-icon-display);
801
+ flex-shrink:0;
802
+ margin-top:calc(.5lh - .5em);
803
+ line-height:var(--tds-radio-group-description-line-height);
804
804
  }
805
805
 
806
- .tds-combo-box-section-header{
807
- padding-block:var(--t-spacing-1);
808
- padding-inline:var(--t-spacing-1);
809
- font-size:var(--t-font-size-sm);
810
- font-weight:var(--t-font-weight-semibold);
811
- color:var(--t-text-color-secondary);
806
+ .tds-radio-group--sm{
807
+ --tds-radio-group-line-height:1.35;
808
+ --tds-radio-group-font-size:var(--t-font-size-sm);
809
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
810
+ --tds-radio-group-description-line-height:1.3;
812
811
  }
813
812
 
814
813
  .tds-date-picker{
@@ -1167,6 +1166,57 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1167
1166
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1168
1167
  }
1169
1168
 
1169
+ .tds-number-stepper{
1170
+ --tds-number-stepper-button-offset:4px;
1171
+ --tds-number-stepper-button-gap:2px;
1172
+ }
1173
+
1174
+ .tds-number-stepper--lg{
1175
+ --tds-number-stepper-button-offset:5px;
1176
+ --tds-number-stepper-button-gap:4px;
1177
+ }
1178
+
1179
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1180
+ display:none;
1181
+ }
1182
+
1183
+ .tds-number-stepper-input{
1184
+ display:flex;
1185
+ flex:1;
1186
+ align-items:center;
1187
+ min-inline-size:0;
1188
+ padding-block:var(--tds-field-padding-block);
1189
+ padding-inline:var(--tds-field-padding-inline);
1190
+ font-family:inherit;
1191
+ font-size:inherit;
1192
+ color:inherit;
1193
+ outline:0;
1194
+ background:transparent;
1195
+ border:0;
1196
+ }
1197
+
1198
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1199
+ margin:0;
1200
+ -webkit-appearance:none;
1201
+ appearance:none;
1202
+ }
1203
+
1204
+ .tds-number-stepper-button{
1205
+ flex-shrink:0;
1206
+ align-self:center;
1207
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1208
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1209
+ padding:0;
1210
+ }
1211
+
1212
+ .tds-number-stepper-button + .tds-number-stepper-button{
1213
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1214
+ }
1215
+
1216
+ .tds-number-stepper-button:last-of-type{
1217
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1218
+ }
1219
+
1170
1220
 
1171
1221
  :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{
1172
1222
  -webkit-appearance:none;
@@ -1191,170 +1241,36 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1191
1241
  }
1192
1242
  }
1193
1243
 
1194
- .tds-radio-group{
1195
- --tds-radio-group-font-size:var(--t-font-size-md);
1196
- --tds-radio-group-line-height:1.4;
1197
- --tds-radio-group-gap:var(--t-spacing-1);
1198
-
1199
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1200
- --tds-radio-group-description-line-height:1.35;
1201
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1202
- --tds-radio-group-description-invalid-icon-display:none;
1203
- display:flex;
1204
- flex-direction:column;
1205
- gap:0;
1206
- padding:0;
1207
- margin:0;
1244
+ .tds-time-field-input{
1245
+ --tds-field-date-segment-padding-inline:1px;
1246
+ padding-block:var(--tds-field-padding-block);
1247
+ padding-inline:var(--tds-field-padding-inline);
1248
+ font-variant-numeric:tabular-nums;
1249
+ }
1208
1250
 
1209
- font-size:var(--tds-radio-group-font-size);
1210
- line-height:var(--tds-radio-group-line-height);
1211
- border:0;
1251
+ .tds-input:has(textarea){
1252
+ --tds-input-padding-block:6px;
1253
+ --tds-input-resizer-size:var(--t-element-size-sm);
1254
+ --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");
1212
1255
  }
1213
1256
 
1214
- .tds-radio-group legend{
1215
- float:left;
1216
- padding:0;
1217
- margin:0;
1218
- }
1257
+ @supports (x: attr(x type(*))){
1219
1258
 
1220
- .tds-radio-group[aria-invalid="true"]{
1221
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1222
- --tds-radio-group-description-invalid-icon-display:inline-block;
1259
+ .tds-input textarea{
1260
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1261
+ }
1223
1262
  }
1224
1263
 
1225
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1226
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1264
+ .tds-input.tds-textarea--resize-vertical textarea{
1265
+ resize:vertical;
1227
1266
  }
1228
1267
 
1229
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1230
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1231
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1232
- }
1233
-
1234
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1235
- --tds-radio-input-background-color:var(--t-form-background-color);
1236
- }
1268
+ .tds-input.tds-textarea--resize-none textarea{
1269
+ resize:none;
1270
+ }
1237
1271
 
1238
- .tds-radio-group:has(input:required) legend::after{
1239
- margin-left:.25ch;
1240
- color:var(--t-text-color-status-error);
1241
- content:"*";
1242
- }
1243
-
1244
- .tds-radio-group-fields{
1245
- display:flex;
1246
- flex-direction:column;
1247
- gap:var(--tds-radio-group-gap);
1248
- align-items:flex-start;
1249
- margin-top:var(--t-spacing-1);
1250
- }
1251
-
1252
- .tds-radio-group-description{
1253
- display:flex;
1254
- gap:var(--t-spacing-half);
1255
- align-items:flex-start;
1256
- margin:var(--t-spacing-fourth) 0 0;
1257
- font-size:var(--tds-radio-group-description-font-size);
1258
- line-height:var(--tds-radio-group-description-line-height);
1259
- color:var(--tds-radio-group-description-color);
1260
- cursor:text;
1261
- }
1262
-
1263
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1264
- display:var(--tds-radio-group-description-invalid-icon-display);
1265
- flex-shrink:0;
1266
- margin-top:calc(.5lh - .5em);
1267
- line-height:var(--tds-radio-group-description-line-height);
1268
- }
1269
-
1270
- .tds-radio-group--sm{
1271
- --tds-radio-group-line-height:1.35;
1272
- --tds-radio-group-font-size:var(--t-font-size-sm);
1273
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1274
- --tds-radio-group-description-line-height:1.3;
1275
- }
1276
-
1277
- .tds-time-field-input{
1278
- --tds-field-date-segment-padding-inline:1px;
1279
- padding-block:var(--tds-field-padding-block);
1280
- padding-inline:var(--tds-field-padding-inline);
1281
- font-variant-numeric:tabular-nums;
1282
- }
1283
-
1284
- .tds-number-stepper{
1285
- --tds-number-stepper-button-offset:4px;
1286
- --tds-number-stepper-button-gap:2px;
1287
- }
1288
-
1289
- .tds-number-stepper--lg{
1290
- --tds-number-stepper-button-offset:5px;
1291
- --tds-number-stepper-button-gap:4px;
1292
- }
1293
-
1294
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1295
- display:none;
1296
- }
1297
-
1298
- .tds-number-stepper-input{
1299
- display:flex;
1300
- flex:1;
1301
- align-items:center;
1302
- min-inline-size:0;
1303
- padding-block:var(--tds-field-padding-block);
1304
- padding-inline:var(--tds-field-padding-inline);
1305
- font-family:inherit;
1306
- font-size:inherit;
1307
- color:inherit;
1308
- outline:0;
1309
- background:transparent;
1310
- border:0;
1311
- }
1312
-
1313
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1314
- margin:0;
1315
- -webkit-appearance:none;
1316
- appearance:none;
1317
- }
1318
-
1319
- .tds-number-stepper-button{
1320
- flex-shrink:0;
1321
- align-self:center;
1322
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1323
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1324
- padding:0;
1325
- }
1326
-
1327
- .tds-number-stepper-button + .tds-number-stepper-button{
1328
- margin-inline-start:var(--tds-number-stepper-button-gap);
1329
- }
1330
-
1331
- .tds-number-stepper-button:last-of-type{
1332
- margin-inline-end:var(--tds-number-stepper-button-offset);
1333
- }
1334
-
1335
- .tds-input:has(textarea){
1336
- --tds-input-padding-block:6px;
1337
- --tds-input-resizer-size:var(--t-element-size-sm);
1338
- --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");
1339
- }
1340
-
1341
- @supports (x: attr(x type(*))){
1342
-
1343
- .tds-input textarea{
1344
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1345
- }
1346
- }
1347
-
1348
- .tds-input.tds-textarea--resize-vertical textarea{
1349
- resize:vertical;
1350
- }
1351
-
1352
- .tds-input.tds-textarea--resize-none textarea{
1353
- resize:none;
1354
- }
1355
-
1356
- .tds-input.tds-textarea--resize-auto textarea{
1357
- resize:vertical;
1272
+ .tds-input.tds-textarea--resize-auto textarea{
1273
+ resize:vertical;
1358
1274
  }
1359
1275
 
1360
1276
  @supports (field-sizing: content){
@@ -1994,751 +1910,835 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1994
1910
  color:var(--tds-field-color);
1995
1911
  }
1996
1912
 
1997
- .tds-select{
1998
- --tds-select-border-color:var(--t-form-border-color);
1999
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
2000
- --tds-select-border-color-active:var(--t-form-border-color-hover);
2001
- --tds-select-background-color:var(--t-form-background-color);
2002
- --tds-select-color:var(--t-form-color);
2003
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
2004
- --tds-select-font-size:var(--t-font-size-md);
2005
- --tds-select-min-height:var(--t-container-size-md);
2006
- --tds-select-padding-block:0;
2007
- --tds-select-description-color:var(--t-text-color-secondary);
2008
- --tds-select-description-invalid-icon-display:none;
2009
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2010
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2011
- --tds-select-caret-size:1em;
2012
- --tds-select-caret-inline-offset:.75em;
2013
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2014
-
2015
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
2016
- --tds-select-dropdown-border:1px solid var(--t-border-color);
2017
- --tds-select-dropdown-padding:var(--t-spacing-1);
2018
- --tds-select-dropdown-margin-block:5px;
2019
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
2020
- --tds-select-dropdown-scrollbar-width:thin;
2021
- --tds-select-dropdown-border-radius:var(--t-border-radius);
2022
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2023
- --tds-select-dropdown-scroll-behavior:smooth;
2024
- --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;
2025
- --tds-select-dropdown-closed-opacity:0;
2026
- --tds-select-dropdown-open-opacity:1;
2027
- --tds-select-dropdown-closed-translate:0 -8px;
2028
- --tds-select-dropdown-open-translate:0 0;
2029
-
2030
- --tds-select-option-gap:var(--t-spacing-1);
2031
- --tds-select-option-padding-block:var(--t-spacing-1);
2032
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2033
- --tds-select-option-font-size:1rem;
2034
- --tds-select-option-color:var(--t-text-color);
2035
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2036
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2037
- --tds-select-option-border-radius:var(--t-border-radius);
2038
-
2039
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2040
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2041
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
2042
- --tds-select-group-label-font-size:var(--t-font-size-sm);
2043
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2044
- --tds-select-group-label-letter-spacing:0;
2045
- --tds-select-group-label-color:var(--t-text-color-secondary);
2046
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2047
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2048
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1913
+ .tds-loading-spinner{
1914
+ --tds-loading-spinner-size:1.25em;
2049
1915
 
2050
- position:relative;
2051
- display:flex;
2052
- flex-direction:column;
2053
- gap:var(--t-spacing-half);
1916
+ position:absolute;
1917
+ right:0;
1918
+ left:0;
1919
+ visibility:var(--tds-loading-spinner-visibility, hidden);
1920
+ width:var(--tds-loading-spinner-size);
1921
+ height:var(--tds-loading-spinner-size);
1922
+ margin:auto;
1923
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
1924
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
1925
+ border-radius:50%;
1926
+ animation:spinner-rotate 500ms infinite linear;
1927
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2054
1928
  }
2055
1929
 
2056
- .tds-select :is(label,.tds-select-label){
2057
- font-size:var(--t-font-size-md);
2058
- font-weight:var(--t-font-weight-normal);
2059
- color:var(--t-text-color);
2060
- cursor:default;
1930
+ @keyframes spinner-rotate{
1931
+ to{
1932
+ transform:rotate(360deg);
2061
1933
  }
1934
+ }
2062
1935
 
2063
- .tds-select :is(select,button){
2064
- position:relative;
2065
- place-items:center;
2066
- inline-size:100%;
2067
- min-block-size:var(--tds-select-min-height);
2068
- padding-block:var(--tds-select-padding-block);
2069
- padding-inline:var(--t-spacing-1);
2070
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2071
- font-family:inherit;
2072
- font-size:var(--tds-select-font-size);
2073
- line-height:1.15;
2074
- color:var(--tds-select-color);
2075
- text-align:left;
2076
- -webkit-appearance:none;
2077
- -moz-appearance:none;
2078
- appearance:none;
2079
- cursor:var(--tds-select-cursor, default);
2080
- outline:var(--t-focus-ring-width) solid transparent;
2081
- outline-offset:0;
2082
- background-color:var(--tds-select-background-color);
2083
- background-image:var(--tds-select-background-image);
2084
- background-repeat:no-repeat;
2085
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
2086
- background-size:var(--tds-select-caret-size);
2087
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
2088
- border-radius:var(--t-form-border-radius);
2089
- transition-timing-function:var(--t-ease-in-out);
2090
- transition-duration:var(--t-duration-300);
2091
- transition-property:var(--tds-select-transition-property);
1936
+ @media (prefers-reduced-motion: reduce){
1937
+ [class*="--loading"] .tds-loading-spinner{
1938
+ --tds-loading-spinner-animation-play-state:paused;
2092
1939
  }
1940
+ }
2093
1941
 
2094
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2095
- border-color:var(--tds-select-border-color-hover);
2096
- }
2097
-
2098
- :is(.tds-select :is(select,button)):focus{
2099
- outline-color:var(--t-focus-ring-color);
2100
- outline-offset:var(--t-focus-ring-offset);
2101
- border-color:var(--tds-select-border-color-active);
2102
- }
2103
1942
 
2104
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2105
- color:var(--tds-select-placeholder-color);
2106
- }
1943
+ @media (prefers-reduced-motion: no-preference){
2107
1944
 
2108
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2109
- --tds-select-border-color:var(--t-form-border-color-error);
2110
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2111
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2112
- --tds-select-background-color:var(--t-form-background-color-error);
2113
- --tds-select-description-color:var(--t-text-color-status-error);
2114
- --tds-select-description-invalid-icon-display:inline-block;
1945
+ :root{
1946
+ interpolate-size:allow-keywords;
1947
+ }
2115
1948
  }
2116
1949
 
2117
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2118
- margin-left:.25ch;
2119
- color:var(--t-text-color-status-error);
2120
- content:"*";
2121
- }
2122
-
2123
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2124
- --tds-select-border-color:var(--t-form-border-color-disabled);
2125
- --tds-select-background-color:var(--t-form-background-color-disabled);
2126
- --tds-select-color:var(--t-form-color-disabled);
2127
- --tds-select-cursor:not-allowed;
2128
- }
2129
-
2130
- .tds-select:has( > [popover]:popover-open) > button{
2131
- border-color:var(--tds-select-border-color-active);
2132
- }
1950
+ @layer tds-component{
1951
+ tds-sidenav,
1952
+ .tds-sidenav{
1953
+ --tds-sidenav-indent:12px;
1954
+ --tds-sidenav-item-depth:0;
2133
1955
 
2134
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2135
- transform:rotate(.5turn);
2136
- }
1956
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
2137
1957
 
2138
- .tds-select :is(hr,li[role="separator"]){
2139
- margin-block:var(--t-spacing-half);
2140
- color:var(--tds-select-border-color);
2141
- border:0;
2142
- border-top:1px solid;
2143
- }
1958
+ --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;
1959
+ --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;
1960
+ --tds-sidenav-collapse-closed-opacity:0;
1961
+ --tds-sidenav-collapse-open-opacity:1;
1962
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
1963
+ --tds-sidenav-collapse-open-transform:translateY(0);
2144
1964
 
2145
- .tds-select :is(li[role="option"],option:not([hidden])){
2146
- display:block;
2147
- padding-block:var(--tds-select-option-padding-block);
2148
- padding-inline:var(--tds-select-option-padding-inline);
2149
- overflow:hidden;
2150
- text-overflow:ellipsis;
2151
- font-size:var(--tds-select-option-font-size);
2152
- line-height:1;
2153
- color:var(--tds-select-option-color);
2154
- white-space:nowrap;
2155
- cursor:default;
2156
- border-radius:var(--tds-select-option-border-radius);
2157
- }
1965
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1966
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1967
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1968
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
2158
1969
 
2159
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2160
- outline:0;
2161
- }
1970
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1971
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1972
+ --tds-sidenav-item-nested-background-selected:transparent;
2162
1973
 
2163
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2164
- background:var(--tds-select-option-background-hover);
2165
- }
1974
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1975
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1976
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
2166
1977
 
2167
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2168
- background:var(--tds-select-option-background-active);
2169
- }
1978
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1979
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1980
+ }
2170
1981
 
2171
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2172
- color:var(--t-form-color-disabled);
2173
- cursor:not-allowed;
1982
+ @media (prefers-reduced-motion: reduce){
1983
+ tds-sidenav,
1984
+ .tds-sidenav{
1985
+ --tds-sidenav-collapse-transition-enter:none;
1986
+ --tds-sidenav-collapse-transition-exit:none;
1987
+ --tds-sidenav-collapse-closed-transform:none;
1988
+ --tds-sidenav-collapse-open-transform:none;
1989
+ }
2174
1990
  }
2175
1991
 
2176
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2177
- background:transparent;
2178
- }
2179
-
2180
- .tds-select :is(li[role="presentation"],legend){
2181
- position:sticky;
2182
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2183
- z-index:1;
2184
- float:inline-start;
2185
- inline-size:100%;
2186
- padding-block:var(--tds-select-group-label-padding-block);
2187
- padding-inline:var(--tds-select-group-label-padding-inline);
2188
- container-type:scroll-state;
2189
- font-size:var(--tds-select-group-label-font-size);
2190
- font-weight:var(--tds-select-group-label-font-weight);
2191
- letter-spacing:var(--tds-select-group-label-letter-spacing);
2192
- background:var(--tds-select-group-label-background);
2193
- text-box:trim-both cap alphabetic;
1992
+ .tds-sidenav--theme-gray{
1993
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1994
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1995
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1996
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1997
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
2194
1998
  }
1999
+ }
2195
2000
 
2196
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2197
- display:inline-flex;
2198
- gap:var(--t-spacing-half);
2199
- align-items:center;
2200
- color:var(--tds-select-group-label-color);
2201
- transition:var(--tds-select-group-label-transition);
2202
- }
2203
-
2204
- @container scroll-state(stuck){
2001
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
2002
+ display:flex;
2003
+ }
2205
2004
 
2206
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2207
- color:var(--tds-select-group-label-color-stuck);
2208
- }
2005
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
2006
+ flex-direction:column;
2007
+ gap:var(--t-spacing-half);
2008
+ width:100%;
2009
+ }
2209
2010
 
2210
- @media (forced-colors: active){
2011
+ .tds-sidenav-section-list{
2012
+ width:100%;
2013
+ padding:0;
2014
+ margin:0;
2015
+ list-style:none;
2016
+ }
2211
2017
 
2212
- :is(.tds-select :is(li[role="presentation"],legend)) span{
2213
- color:var(--tds-select-group-label-color-stuck);
2214
- }
2215
- }
2216
- }
2018
+ .tds-sidenav-section-header{
2019
+ display:flex;
2020
+ align-items:baseline;
2021
+ justify-content:space-between;
2022
+ padding-top:var(--t-spacing-2);
2023
+ }
2217
2024
 
2218
- .tds-select.tds-select--lg{
2219
- --tds-select-min-height:var(--t-container-size-lg);
2220
- --tds-select-font-size:var(--t-font-size-lg);
2025
+ .tds-sidenav-section-header h2{
2026
+ margin:0;
2027
+ font-size:var(--t-font-size-sm);
2028
+ font-weight:var(--t-font-weight-semibold);
2029
+ line-height:1.35;
2030
+ color:var(--t-text-color-secondary);
2031
+ text-transform:uppercase;
2221
2032
  }
2222
2033
 
2223
- @media (prefers-reduced-motion: reduce){
2034
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
2035
+ padding-top:0;
2036
+ }
2224
2037
 
2225
- .tds-select{
2226
- --tds-select-transition-property:none;
2227
- --tds-select-dropdown-transition:none;
2228
- --tds-select-dropdown-scroll-behavior:auto;
2229
- --tds-select-dropdown-closed-translate:none;
2230
- --tds-select-dropdown-open-translate:none;
2231
- --tds-select-caret-transition:none;
2232
- }
2038
+ .tds-sidenav-section-header [slot="label-actions"]{
2039
+ display:flex;
2040
+ gap:var(--t-spacing-half);
2041
+ align-items:center;
2233
2042
  }
2234
2043
 
2235
- .tds-select-description{
2044
+ .tds-sidenav-section [slot="section-actions"]{
2236
2045
  display:flex;
2237
- gap:var(--t-spacing-half);
2238
- align-items:flex-start;
2239
- margin:0;
2240
- font-size:var(--t-font-size-sm);
2241
- line-height:1.35;
2242
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
2243
- cursor:text;
2046
+ gap:12px;
2047
+ align-items:center;
2048
+ min-height:42px;
2049
+ padding:var(--t-spacing-1) 0;
2244
2050
  }
2245
2051
 
2246
- .tds-select-description .tds-select-description-invalid-icon{
2247
- display:var(--tds-select-description-invalid-icon-display, none);
2248
- flex-shrink:0;
2249
- margin-block-start:calc(.5lh - .5em);
2250
- line-height:1.35;
2251
- }
2252
-
2253
- .tds-select > .tds-select-hidden-select{
2254
- position:absolute;
2255
- inline-size:1px;
2256
- block-size:1px;
2052
+ .tds-sidenav-section-list,
2053
+ .tds-sidenav-item{
2054
+ width:100%;
2257
2055
  padding:0;
2258
2056
  margin:0;
2259
- pointer-events:none;
2260
- opacity:0;
2261
- }
2262
-
2263
- .tds-select:has(> button){
2264
- anchor-scope:--tds-select-anchor;
2265
2057
  }
2266
2058
 
2267
- .tds-select:has( > button) > button{
2268
- display:block;
2269
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2270
- anchor-name:--tds-select-anchor;
2059
+ .tds-sidenav-item :is(a,button){
2060
+ position:relative;
2061
+ display:flex;
2062
+ gap:12px;
2063
+ align-items:center;
2064
+ width:100%;
2065
+ padding:12px;
2271
2066
  overflow:hidden;
2272
- text-overflow:ellipsis;
2273
- color:var(--tds-select-placeholder-color);
2067
+ font-size:var(--t-font-size-sm);
2068
+ line-height:18px;
2069
+ color:var(--t-text-color-headline);
2274
2070
  white-space:nowrap;
2275
- background-image:none;
2276
- 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);
2277
- -webkit-tap-highlight-color:transparent;
2071
+ text-decoration:none;
2072
+ -webkit-appearance:none;
2073
+ -moz-appearance:none;
2074
+ appearance:none;
2075
+ cursor:pointer;
2076
+ background-color:var(--tds-sidenav-item-background, transparent);
2077
+ border:0;
2078
+ border-radius:var(--t-border-radius);
2079
+ transition:var(--tds-sidenav-item-transition);
2278
2080
  }
2279
2081
 
2280
- :is(.tds-select:has( > button) > button)::after{
2281
- position:absolute;
2282
- inset-block:0;
2283
- inset-inline-end:var(--tds-select-caret-inline-offset);
2284
- width:var(--tds-select-caret-size);
2285
- height:var(--tds-select-caret-size);
2286
- margin-block:auto;
2287
- line-height:1;
2288
- pointer-events:none;
2289
- content:var(--tds-select-background-image);
2290
- transform:rotate(0);
2291
- transition:var(--tds-select-caret-transition);
2082
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
2083
+ display:block;
2084
+ flex:1;
2085
+ overflow:hidden;
2086
+ text-overflow:ellipsis;
2087
+ text-align:left;
2088
+ white-space:nowrap;
2292
2089
  }
2293
2090
 
2294
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
2295
- color:var(--tds-select-color);
2296
- }
2091
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
2092
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
2093
+ color:var(--t-text-color-headline);
2094
+ text-decoration:none;
2095
+ }
2297
2096
 
2298
- .tds-select:has( > button) [popover]{
2299
- inset:auto;
2300
- inline-size:-moz-max-content;
2301
- inline-size:max-content;
2302
- min-inline-size:anchor-size(width);
2303
- max-inline-size:100vi;
2304
- max-block-size:min(50vh, 20rem);
2305
- padding:var(--tds-select-dropdown-padding);
2306
- margin-block:var(--tds-select-dropdown-margin-block);
2307
- position-area:block-end span-inline-start;
2308
- position-anchor:--tds-select-anchor;
2309
- position-try-fallbacks:flip-block, flip-inline;
2310
- overflow:auto;
2311
- overflow-x:hidden;
2312
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2313
- overscroll-behavior:none;
2314
- -webkit-user-select:none;
2315
- -moz-user-select:none;
2316
- user-select:none;
2317
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2318
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2319
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2320
- background:var(--tds-select-dropdown-background-color);
2321
- border:var(--tds-select-dropdown-border);
2322
- border-radius:var(--tds-select-dropdown-border-radius);
2323
- box-shadow:var(--tds-select-dropdown-box-shadow);
2324
- opacity:var(--tds-select-dropdown-open-opacity);
2325
- translate:var(--tds-select-dropdown-open-translate);
2326
- transition:var(--tds-select-dropdown-transition);
2327
- }
2328
-
2329
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
2330
- opacity:var(--tds-select-dropdown-closed-opacity);
2331
- translate:var(--tds-select-dropdown-closed-translate);
2097
+ :is(.tds-sidenav-item :is(a,button)):active{
2098
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
2332
2099
  }
2333
2100
 
2334
- :is(.tds-select:has( > button) [popover]) ul{
2335
- padding:0;
2336
- margin:0;
2337
- list-style:none;
2101
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
2102
+ overflow:hidden;
2103
+ color:var(--tds-sidenav-item-icon-color);
2338
2104
  }
2339
2105
 
2340
- @starting-style{
2341
- :is(.tds-select:has( > button) [popover]):popover-open{
2342
- opacity:var(--tds-select-dropdown-closed-opacity);
2343
- translate:var(--tds-select-dropdown-closed-translate);
2106
+ :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{
2107
+ display:block;
2108
+ width:var(--tds-sidenav-item-icon-size);
2109
+ height:var(--tds-sidenav-item-icon-size);
2344
2110
  }
2345
- }
2346
2111
 
2347
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2348
- .tds-select select:has(> button){
2349
- padding-inline-end:0;
2350
- background-image:none;
2351
- }
2352
- @media (hover) and (pointer: fine){
2353
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2354
- padding-block:0;
2355
- -webkit-appearance:base-select;
2356
- -moz-appearance:base-select;
2357
- appearance:base-select;
2358
- }
2359
- }
2360
- :is(.tds-select select:has( > button))::picker-icon{
2361
- flex-shrink:0;
2362
- width:var(--tds-select-caret-size);
2363
- height:var(--tds-select-caret-size);
2364
- margin-inline-end:var(--tds-select-caret-inline-offset);
2365
- line-height:1;
2366
- content:var(--tds-select-background-image);
2367
- transition:var(--tds-select-caret-transition);
2112
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
2113
+ --tds-sidenav-indent:19px;
2368
2114
  }
2369
2115
 
2370
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2371
- opacity:var(--tds-select-dropdown-closed-opacity);
2372
- translate:var(--tds-select-dropdown-closed-translate);
2116
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
2117
+ visibility:visible;
2118
+ block-size:auto;
2119
+ opacity:1;
2373
2120
  }
2374
2121
 
2375
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2376
- outline-color:var(--t-focus-ring-color);
2377
- outline-offset:var(--t-focus-ring-offset);
2378
- border-color:var(--tds-select-border-color-active);
2379
- }
2122
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
2123
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
2124
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
2380
2125
 
2381
- :is(.tds-select select:has( > button)):open::picker-icon{
2382
- opacity:1;
2383
- transform:rotate(.5turn);
2384
- }
2126
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
2127
+ font-weight:var(--t-font-weight-semibold);
2128
+ }
2385
2129
 
2386
- :is(.tds-select select:has( > button)) selectedcontent{
2387
- overflow:hidden;
2388
- text-overflow:ellipsis;
2389
- line-height:calc(var(--tds-select-min-height) - 2px);
2390
- white-space:nowrap;
2391
- }
2130
+ .tds-sidenav-item:has(.tds-sidenav-section){
2131
+ display:flex;
2132
+ flex-direction:column;
2133
+ gap:var(--t-spacing-half);
2134
+ }
2392
2135
 
2393
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2394
- color:var(--tds-select-placeholder-color);
2136
+ .tds-sidenav-item .tds-sidenav-section-list{
2137
+ --tds-sidenav-item-depth:1;
2138
+ gap:0;
2139
+ }
2140
+
2141
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
2142
+ visibility:hidden;
2143
+ block-size:0;
2144
+ overflow-y:clip;
2145
+ opacity:0;
2146
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
2395
2147
  }
2396
2148
 
2397
- :is(.tds-select select:has( > button))::picker(select){
2398
- inset:auto;
2399
- inline-size:-moz-max-content;
2400
- inline-size:max-content;
2401
- min-inline-size:anchor-size(width);
2402
- max-inline-size:100vi;
2403
- padding:var(--tds-select-dropdown-padding);
2404
- margin-block:var(--tds-select-dropdown-margin-block);
2405
- position-area:block-end span-inline-start;
2406
- position-try-fallbacks:flip-block, flip-inline;
2407
- overflow:auto;
2408
- overflow-x:hidden;
2409
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2410
- overscroll-behavior:none;
2411
- -webkit-user-select:none;
2412
- -moz-user-select:none;
2413
- user-select:none;
2414
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2415
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2416
- background:var(--tds-select-dropdown-background-color);
2417
- border:var(--tds-select-dropdown-border);
2418
- border-radius:var(--tds-select-dropdown-border-radius);
2419
- box-shadow:var(--tds-select-dropdown-box-shadow);
2420
- opacity:var(--tds-select-dropdown-open-opacity);
2421
- translate:var(--tds-select-dropdown-open-translate);
2422
- transition:var(--tds-select-dropdown-transition);
2149
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
2150
+ --tds-sidenav-item-depth:2;
2423
2151
  }
2424
2152
 
2425
- :is(.tds-select select:has( > button)) option::checkmark{
2426
- display:none;
2153
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2154
+ min-height:var(--t-element-size-2xl);
2155
+ padding-block:9px;
2156
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
2157
+ line-height:1;
2158
+ background-color:transparent;
2427
2159
  }
2428
2160
 
2429
- @starting-style{
2430
- :is(.tds-select select:has( > button))::picker(select):popover-open{
2431
- opacity:var(--tds-select-dropdown-closed-opacity);
2432
- translate:var(--tds-select-dropdown-closed-translate);
2161
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
2162
+ position:absolute;
2163
+ top:0;
2164
+ bottom:0;
2165
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2166
+ width:2px;
2167
+ content:"";
2168
+ background-color:var(--tds-sidenav-item-nested-border-color);
2169
+ transition:var(--tds-sidenav-item-transition);
2433
2170
  }
2434
- }
2435
- }
2436
2171
 
2437
- @layer t-critical{
2438
- tds-page-header:not(.hydrated){
2439
- display:none;
2440
- }
2441
- }
2172
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
2173
+ position:absolute;
2174
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
2175
+ z-index:-1;
2176
+ height:100%;
2177
+ content:"";
2178
+ background-color:var(--tds-sidenav-item-nested-background);
2179
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
2180
+ transition:var(--tds-sidenav-item-transition);
2181
+ }
2442
2182
 
2443
- @layer t-component{
2444
- .tds-page-header{
2445
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
2446
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
2447
- --tds-page-header-color:var(--t-text-color);
2448
- --tds-page-header-bottom-border-color:transparent;
2449
- --tds-page-header-headline-color:var(--t-text-color-headline);
2450
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
2451
- --tds-page-header-padding-x:var(--t-spacing-2);
2452
- --tds-page-header-padding-y:var(--t-spacing-2);
2453
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
2454
- --tds-page-header-nav-gap:var(--t-spacing-1);
2455
- --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%);
2456
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
2457
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
2458
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
2459
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
2460
- --tds-page-header-nav-item-border-width:1px;
2183
+ :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)){
2184
+ display:block;
2185
+ text-align:left;
2186
+ white-space:normal;
2187
+ }
2461
2188
 
2462
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
2463
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
2189
+ :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{
2190
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
2191
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
2192
+ }
2464
2193
 
2465
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
2466
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
2467
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
2194
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
2195
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
2196
+ }
2468
2197
 
2469
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
2470
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
2198
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
2199
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
2200
+ font-weight:var(--t-font-weight-medium);
2201
+ }
2471
2202
 
2472
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
2473
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
2474
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
2203
+ .tds-sidenav-responsive-header{
2204
+ display:flex;
2205
+ gap:var(--t-spacing-2);
2206
+ align-items:center;
2207
+ width:100%;
2208
+ }
2475
2209
 
2476
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
2477
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
2478
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2479
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
2480
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
2210
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
2211
+ order:0;
2481
2212
  }
2482
2213
 
2483
- .tds-page-header--profile{
2484
- --tds-page-header-padding-y:20px;
2214
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
2215
+ flex:1;
2216
+ order:1;
2217
+ margin:0;
2218
+ font-size:var(--t-font-size-lg);
2219
+ font-weight:var(--t-font-weight-medium);
2220
+ color:var(--t-text-color-headline);
2485
2221
  }
2486
2222
 
2487
- @supports (color: light-dark(#fff, #000)){
2488
- .tds-page-header{
2489
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
2490
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
2491
- }
2492
- }
2493
-
2494
- @media (min-width: 600px){
2495
- .tds-page-header{
2496
- --tds-page-header-background-color:var(--t-surface-color-canvas);
2497
- --tds-page-header-color:var(--t-text-color-secondary);
2498
- --tds-page-header-bottom-border-color:var(--t-border-color);
2499
- --tds-page-header-padding-x:var(--t-spacing-3);
2500
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
2501
- --tds-page-header-nav-gap:var(--t-spacing-half);
2502
- --tds-page-header-nav-background:transparent;
2503
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
2504
- --tds-page-header-nav-item-border-width:1px;
2505
- --tds-page-header-nav-item-color:var(--t-text-color);
2506
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
2507
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
2508
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
2509
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
2510
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
2511
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
2512
- }
2513
- }
2514
- }
2515
-
2516
- .tds-page-header{
2517
- display:flex;
2518
- flex-direction:column;
2519
- padding-top:var(--tds-page-header-padding-y);
2520
- color:var(--tds-page-header-color);
2521
- background:var(--tds-page-header-background-color);
2522
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
2523
- }
2524
-
2525
- .tds-page-header:not(.has-nav){
2526
- padding-bottom:var(--tds-page-header-padding-y);
2527
- }
2528
-
2529
- .tds-page-header.inactive{
2530
- background:var(--tds-page-header-background-color-inactive);
2223
+ @media (max-width: 719px){
2224
+ .tds-sidenav-collapse{
2225
+ z-index:10001;
2226
+ display:none;
2227
+ max-width:min(448px, calc(100vw - 48px));
2228
+ padding:0;
2229
+ margin:12px 0;
2230
+ position-area:bottom span-right;
2231
+ overflow:hidden;
2232
+ outline:0;
2233
+ background:var(--t-surface-color-card);
2234
+ border:0;
2235
+ border-radius:6px;
2236
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
2237
+ opacity:var(--tds-sidenav-collapse-open-opacity);
2238
+ transform:var(--tds-sidenav-collapse-open-transform);
2239
+ transition:var(--tds-sidenav-collapse-transition-enter);
2240
+ will-change:transform;
2531
2241
  }
2532
2242
 
2533
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2243
+ .tds-sidenav-scroll-container{
2244
+ --webkit-overflow-scrolling:touch;
2245
+ display:block;
2534
2246
  width:100%;
2247
+ height:-moz-fit-content;
2248
+ height:fit-content;
2249
+ padding:var(--t-spacing-2);
2250
+ overflow-y:auto;
2535
2251
  }
2536
2252
 
2537
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2538
- display:flex;
2539
- flex-flow:row wrap;
2540
- gap:var(--t-spacing-half) var(--t-spacing-1);
2541
- align-items:flex-start;
2542
- justify-content:flex-start;
2543
- min-width:0;
2253
+ .tds-sidenav-item :is(a, button) :is(.prefix){
2254
+ display:none;
2544
2255
  }
2545
-
2546
- :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{
2256
+ @supports selector(:popover-open){
2257
+ .tds-sidenav-collapse:popover-open{
2547
2258
  display:flex;
2548
- gap:var(--tds-page-header-nav-gap);
2549
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
2550
- margin:0 0 -1px;
2551
- overflow:auto;
2552
- list-style:none;
2553
- background:var(--tds-page-header-nav-background);
2554
2259
  }
2555
2260
 
2556
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
2557
- position:relative;
2558
- display:inline-flex;
2559
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
2560
- font-size:var(--t-font-size-sm);
2561
- line-height:22px;
2562
- color:var(--tds-page-header-nav-item-color);
2563
- white-space:nowrap;
2564
- text-decoration:none;
2565
- -webkit-appearance:none;
2566
- -moz-appearance:none;
2567
- appearance:none;
2568
- cursor:pointer;
2569
- outline-offset:-2px;
2570
- background-color:var(--tds-page-header-nav-item-background-color);
2571
- background-clip:padding-box;
2572
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
2573
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
2574
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
2261
+ .tds-sidenav-collapse:not(:popover-open){
2262
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2263
+ transition:var(--tds-sidenav-collapse-transition-exit);
2575
2264
  }
2576
2265
 
2577
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
2578
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
2579
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
2580
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
2581
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
2266
+ @starting-style{
2267
+ .tds-sidenav-collapse:popover-open{
2268
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2269
+ transform:var(--tds-sidenav-collapse-closed-transform);
2582
2270
  }
2271
+ }
2272
+ }
2273
+ @supports not selector(:popover-open){
2274
+ .tds-sidenav-collapse.\:popover-open{
2275
+ display:flex;
2276
+ }
2583
2277
 
2584
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
2585
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
2586
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
2587
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
2588
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
2589
- }
2278
+ .tds-sidenav-collapse:not(.\:popover-open){
2279
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
2280
+ transition:var(--tds-sidenav-collapse-transition-exit);
2281
+ }
2282
+ }
2283
+ }
2590
2284
 
2591
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
2592
- background-color:var(--tds-page-header-nav-item-background-color-active);
2593
- border-color:var(--tds-page-header-nav-item-border-color-active);
2594
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
2595
- }
2285
+ @media (min-width: 720px){
2286
+ .tds-sidenav-responsive-header{
2287
+ display:none;
2288
+ }
2289
+ }
2596
2290
 
2597
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
2598
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
2599
- color:var(--tds-page-header-nav-item-color-disabled);
2600
- cursor:not-allowed;
2601
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
2602
- opacity:1;
2603
- }
2291
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
2292
+ display:none;
2293
+ }
2604
2294
 
2605
- @media (min-width: 600px){
2606
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
2607
- position:absolute;
2608
- inset:auto -1px -1px;
2609
- height:1px;
2610
- pointer-events:none;
2611
- content:"";
2612
- background-color:var(--tds-page-header-bottom-border-color);
2613
- }
2614
- }
2295
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
2296
+ display:block;
2297
+ }
2615
2298
 
2616
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
2617
- position:relative;
2299
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2300
+ display:flex;
2301
+ flex-direction:column;
2618
2302
  }
2619
2303
 
2620
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
2621
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2622
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
2623
- }
2304
+ .tds-select{
2305
+ --tds-select-border-color:var(--t-form-border-color);
2306
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
2307
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
2308
+ --tds-select-background-color:var(--t-form-background-color);
2309
+ --tds-select-color:var(--t-form-color);
2310
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
2311
+ --tds-select-font-size:var(--t-font-size-md);
2312
+ --tds-select-min-height:var(--t-container-size-md);
2313
+ --tds-select-padding-block:0;
2314
+ --tds-select-description-color:var(--t-text-color-secondary);
2315
+ --tds-select-description-invalid-icon-display:none;
2316
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
2317
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
2318
+ --tds-select-caret-size:1em;
2319
+ --tds-select-caret-inline-offset:.75em;
2320
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
2624
2321
 
2625
- :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{
2626
- position:absolute;
2627
- top:-5px;
2628
- right:-2px;
2629
- width:10px;
2630
- height:10px;
2631
- content:"";
2632
- background:var(--tds-page-header-nav-item-indicator-color);
2633
- border-radius:50%;
2634
- }
2322
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
2323
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
2324
+ --tds-select-dropdown-padding:var(--t-spacing-1);
2325
+ --tds-select-dropdown-margin-block:5px;
2326
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
2327
+ --tds-select-dropdown-scrollbar-width:thin;
2328
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
2329
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
2330
+ --tds-select-dropdown-scroll-behavior:smooth;
2331
+ --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;
2332
+ --tds-select-dropdown-closed-opacity:0;
2333
+ --tds-select-dropdown-open-opacity:1;
2334
+ --tds-select-dropdown-closed-translate:0 -8px;
2335
+ --tds-select-dropdown-open-translate:0 0;
2635
2336
 
2636
- @media (prefers-reduced-motion: no-preference){
2637
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
2638
- animation:indicator-pulse 1.25s ease infinite;
2639
- }
2640
- }
2337
+ --tds-select-option-gap:var(--t-spacing-1);
2338
+ --tds-select-option-padding-block:var(--t-spacing-1);
2339
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
2340
+ --tds-select-option-font-size:1rem;
2341
+ --tds-select-option-color:var(--t-text-color);
2342
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
2343
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
2344
+ --tds-select-option-border-radius:var(--t-border-radius);
2641
2345
 
2642
- .tds-page-header__title-bar{
2346
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
2347
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
2348
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
2349
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
2350
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
2351
+ --tds-select-group-label-letter-spacing:0;
2352
+ --tds-select-group-label-color:var(--t-text-color-secondary);
2353
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
2354
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
2355
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
2356
+
2357
+ position:relative;
2643
2358
  display:flex;
2644
2359
  flex-direction:column;
2645
- gap:var(--t-spacing-2) var(--t-spacing-1);
2646
- align-items:flex-start;
2647
- justify-content:space-between;
2648
- padding:0 var(--tds-page-header-padding-x);
2360
+ gap:var(--t-spacing-half);
2649
2361
  }
2650
2362
 
2651
- .tds-page-header--profile > .tds-page-header__title-bar{
2652
- align-items:center;
2363
+ .tds-select :is(label,.tds-select-label){
2364
+ font-size:var(--t-font-size-md);
2365
+ font-weight:var(--t-font-weight-normal);
2366
+ color:var(--t-text-color);
2367
+ cursor:default;
2653
2368
  }
2654
2369
 
2655
- .tds-page-header__primary{
2656
- width:100%;
2657
- }
2370
+ .tds-select :is(select,button){
2371
+ position:relative;
2372
+ place-items:center;
2373
+ inline-size:100%;
2374
+ min-block-size:var(--tds-select-min-height);
2375
+ padding-block:var(--tds-select-padding-block);
2376
+ padding-inline:var(--t-spacing-1);
2377
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
2378
+ font-family:inherit;
2379
+ font-size:var(--tds-select-font-size);
2380
+ line-height:1.15;
2381
+ color:var(--tds-select-color);
2382
+ text-align:left;
2383
+ -webkit-appearance:none;
2384
+ -moz-appearance:none;
2385
+ appearance:none;
2386
+ cursor:var(--tds-select-cursor, default);
2387
+ outline:var(--t-focus-ring-width) solid transparent;
2388
+ outline-offset:0;
2389
+ background-color:var(--tds-select-background-color);
2390
+ background-image:var(--tds-select-background-image);
2391
+ background-repeat:no-repeat;
2392
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
2393
+ background-size:var(--tds-select-caret-size);
2394
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
2395
+ border-radius:var(--t-form-border-radius);
2396
+ transition-timing-function:var(--t-ease-in-out);
2397
+ transition-duration:var(--t-duration-300);
2398
+ transition-property:var(--tds-select-transition-property);
2399
+ }
2658
2400
 
2659
- .tds-page-header__primary h1{
2660
- margin:0;
2661
- font-size:var(--tds-page-header-headline-font-size);
2662
- font-weight:var(--t-font-weight-normal);
2663
- line-height:32px;
2664
- color:var(--tds-page-header-headline-color);
2665
- overflow-wrap:break-word;
2401
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
2402
+ border-color:var(--tds-select-border-color-hover);
2403
+ }
2404
+
2405
+ :is(.tds-select :is(select,button)):focus{
2406
+ outline-color:var(--t-focus-ring-color);
2407
+ outline-offset:var(--t-focus-ring-offset);
2408
+ border-color:var(--tds-select-border-color-active);
2409
+ }
2410
+
2411
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
2412
+ color:var(--tds-select-placeholder-color);
2413
+ }
2414
+
2415
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
2416
+ --tds-select-border-color:var(--t-form-border-color-error);
2417
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
2418
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
2419
+ --tds-select-background-color:var(--t-form-background-color-error);
2420
+ --tds-select-description-color:var(--t-text-color-status-error);
2421
+ --tds-select-description-invalid-icon-display:inline-block;
2666
2422
  }
2667
2423
 
2668
- @media (min-width: 960px){
2669
- .tds-page-header__primary{
2670
- flex:1 1 max-content;
2671
- width:auto;
2672
- min-width:0;
2673
- max-width:100%;
2424
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
2425
+ margin-left:.25ch;
2426
+ color:var(--t-text-color-status-error);
2427
+ content:"*";
2428
+ }
2429
+
2430
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
2431
+ --tds-select-border-color:var(--t-form-border-color-disabled);
2432
+ --tds-select-background-color:var(--t-form-background-color-disabled);
2433
+ --tds-select-color:var(--t-form-color-disabled);
2434
+ --tds-select-cursor:not-allowed;
2674
2435
  }
2675
2436
 
2676
- .tds-page-header__title-bar,
2677
- .tds-page-header--profile .tds-page-header__title-bar{
2678
- flex-flow:row nowrap;
2679
- row-gap:12px;
2680
- align-items:flex-start;
2437
+ .tds-select:has( > [popover]:popover-open) > button{
2438
+ border-color:var(--tds-select-border-color-active);
2681
2439
  }
2682
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
2683
- width:auto;
2440
+
2441
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
2442
+ transform:rotate(.5turn);
2684
2443
  }
2685
2444
 
2686
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
2687
- justify-content:flex-end;
2445
+ .tds-select :is(hr,li[role="separator"]){
2446
+ margin-block:var(--t-spacing-half);
2447
+ color:var(--tds-select-border-color);
2448
+ border:0;
2449
+ border-top:1px solid;
2450
+ }
2451
+
2452
+ .tds-select :is(li[role="option"],option:not([hidden])){
2453
+ display:block;
2454
+ padding-block:var(--tds-select-option-padding-block);
2455
+ padding-inline:var(--tds-select-option-padding-inline);
2456
+ overflow:hidden;
2457
+ text-overflow:ellipsis;
2458
+ font-size:var(--tds-select-option-font-size);
2459
+ line-height:1;
2460
+ color:var(--tds-select-option-color);
2461
+ white-space:nowrap;
2462
+ cursor:default;
2463
+ border-radius:var(--tds-select-option-border-radius);
2464
+ }
2465
+
2466
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
2467
+ outline:0;
2688
2468
  }
2689
- }
2690
2469
 
2691
- .tds-page-header-phone,
2692
- .tds-page-header-email{
2693
- color:var(--tds-page-header-color);
2694
- white-space:nowrap;
2695
- }
2470
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
2471
+ background:var(--tds-select-option-background-hover);
2472
+ }
2696
2473
 
2697
- .tds-page-header-email{
2698
- max-width:100%;
2699
- overflow:hidden;
2700
- text-overflow:ellipsis;
2701
- }
2474
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
2475
+ background:var(--tds-select-option-background-active);
2476
+ }
2702
2477
 
2703
- @keyframes indicator-pulse{
2704
- 0%{
2705
- opacity:.3;
2706
- transform:scale(.9);
2478
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
2479
+ color:var(--t-form-color-disabled);
2480
+ cursor:not-allowed;
2481
+ }
2482
+
2483
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
2484
+ background:transparent;
2485
+ }
2486
+
2487
+ .tds-select :is(li[role="presentation"],legend){
2488
+ position:sticky;
2489
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
2490
+ z-index:1;
2491
+ float:inline-start;
2492
+ inline-size:100%;
2493
+ padding-block:var(--tds-select-group-label-padding-block);
2494
+ padding-inline:var(--tds-select-group-label-padding-inline);
2495
+ container-type:scroll-state;
2496
+ font-size:var(--tds-select-group-label-font-size);
2497
+ font-weight:var(--tds-select-group-label-font-weight);
2498
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
2499
+ background:var(--tds-select-group-label-background);
2500
+ text-box:trim-both cap alphabetic;
2707
2501
  }
2708
2502
 
2709
- 100%{
2710
- opacity:0;
2711
- transform:scale(1.75);
2503
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2504
+ display:inline-flex;
2505
+ gap:var(--t-spacing-half);
2506
+ align-items:center;
2507
+ color:var(--tds-select-group-label-color);
2508
+ transition:var(--tds-select-group-label-transition);
2509
+ }
2510
+
2511
+ @container scroll-state(stuck){
2512
+
2513
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2514
+ color:var(--tds-select-group-label-color-stuck);
2515
+ }
2516
+
2517
+ @media (forced-colors: active){
2518
+
2519
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
2520
+ color:var(--tds-select-group-label-color-stuck);
2521
+ }
2522
+ }
2523
+ }
2524
+
2525
+ .tds-select.tds-select--lg{
2526
+ --tds-select-min-height:var(--t-container-size-lg);
2527
+ --tds-select-font-size:var(--t-font-size-lg);
2712
2528
  }
2529
+
2530
+ @media (prefers-reduced-motion: reduce){
2531
+
2532
+ .tds-select{
2533
+ --tds-select-transition-property:none;
2534
+ --tds-select-dropdown-transition:none;
2535
+ --tds-select-dropdown-scroll-behavior:auto;
2536
+ --tds-select-dropdown-closed-translate:none;
2537
+ --tds-select-dropdown-open-translate:none;
2538
+ --tds-select-caret-transition:none;
2713
2539
  }
2540
+ }
2714
2541
 
2715
- .tds-loading-spinner{
2716
- --tds-loading-spinner-size:1.25em;
2542
+ .tds-select-description{
2543
+ display:flex;
2544
+ gap:var(--t-spacing-half);
2545
+ align-items:flex-start;
2546
+ margin:0;
2547
+ font-size:var(--t-font-size-sm);
2548
+ line-height:1.35;
2549
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
2550
+ cursor:text;
2551
+ }
2717
2552
 
2553
+ .tds-select-description .tds-select-description-invalid-icon{
2554
+ display:var(--tds-select-description-invalid-icon-display, none);
2555
+ flex-shrink:0;
2556
+ margin-block-start:calc(.5lh - .5em);
2557
+ line-height:1.35;
2558
+ }
2559
+
2560
+ .tds-select > .tds-select-hidden-select{
2718
2561
  position:absolute;
2719
- right:0;
2720
- left:0;
2721
- visibility:var(--tds-loading-spinner-visibility, hidden);
2722
- width:var(--tds-loading-spinner-size);
2723
- height:var(--tds-loading-spinner-size);
2724
- margin:auto;
2725
- border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2726
- border-top-color:var(--tds-loading-spinner-color, currentcolor);
2727
- border-radius:50%;
2728
- animation:spinner-rotate 500ms infinite linear;
2729
- animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2562
+ inline-size:1px;
2563
+ block-size:1px;
2564
+ padding:0;
2565
+ margin:0;
2566
+ pointer-events:none;
2567
+ opacity:0;
2730
2568
  }
2731
2569
 
2732
- @keyframes spinner-rotate{
2733
- to{
2734
- transform:rotate(360deg);
2735
- }
2570
+ .tds-select:has(> button){
2571
+ anchor-scope:--tds-select-anchor;
2736
2572
  }
2737
2573
 
2738
- @media (prefers-reduced-motion: reduce){
2739
- [class*="--loading"] .tds-loading-spinner{
2740
- --tds-loading-spinner-animation-play-state:paused;
2574
+ .tds-select:has( > button) > button{
2575
+ display:block;
2576
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
2577
+ anchor-name:--tds-select-anchor;
2578
+ overflow:hidden;
2579
+ text-overflow:ellipsis;
2580
+ color:var(--tds-select-placeholder-color);
2581
+ white-space:nowrap;
2582
+ background-image:none;
2583
+ 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);
2584
+ -webkit-tap-highlight-color:transparent;
2585
+ }
2586
+
2587
+ :is(.tds-select:has( > button) > button)::after{
2588
+ position:absolute;
2589
+ inset-block:0;
2590
+ inset-inline-end:var(--tds-select-caret-inline-offset);
2591
+ width:var(--tds-select-caret-size);
2592
+ height:var(--tds-select-caret-size);
2593
+ margin-block:auto;
2594
+ line-height:1;
2595
+ pointer-events:none;
2596
+ content:var(--tds-select-background-image);
2597
+ transform:rotate(0);
2598
+ transition:var(--tds-select-caret-transition);
2599
+ }
2600
+
2601
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
2602
+ color:var(--tds-select-color);
2603
+ }
2604
+
2605
+ .tds-select:has( > button) [popover]{
2606
+ inset:auto;
2607
+ inline-size:-moz-max-content;
2608
+ inline-size:max-content;
2609
+ min-inline-size:anchor-size(width);
2610
+ max-inline-size:100vi;
2611
+ max-block-size:min(50vh, 20rem);
2612
+ padding:var(--tds-select-dropdown-padding);
2613
+ margin-block:var(--tds-select-dropdown-margin-block);
2614
+ position-area:block-end span-inline-start;
2615
+ position-anchor:--tds-select-anchor;
2616
+ position-try-fallbacks:flip-block, flip-inline;
2617
+ overflow:auto;
2618
+ overflow-x:hidden;
2619
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2620
+ overscroll-behavior:none;
2621
+ -webkit-user-select:none;
2622
+ -moz-user-select:none;
2623
+ user-select:none;
2624
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
2625
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2626
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2627
+ background:var(--tds-select-dropdown-background-color);
2628
+ border:var(--tds-select-dropdown-border);
2629
+ border-radius:var(--tds-select-dropdown-border-radius);
2630
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2631
+ opacity:var(--tds-select-dropdown-open-opacity);
2632
+ translate:var(--tds-select-dropdown-open-translate);
2633
+ transition:var(--tds-select-dropdown-transition);
2634
+ }
2635
+
2636
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
2637
+ opacity:var(--tds-select-dropdown-closed-opacity);
2638
+ translate:var(--tds-select-dropdown-closed-translate);
2639
+ }
2640
+
2641
+ :is(.tds-select:has( > button) [popover]) ul{
2642
+ padding:0;
2643
+ margin:0;
2644
+ list-style:none;
2645
+ }
2646
+
2647
+ @starting-style{
2648
+ :is(.tds-select:has( > button) [popover]):popover-open{
2649
+ opacity:var(--tds-select-dropdown-closed-opacity);
2650
+ translate:var(--tds-select-dropdown-closed-translate);
2651
+ }
2652
+ }
2653
+
2654
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
2655
+ .tds-select select:has(> button){
2656
+ padding-inline-end:0;
2657
+ background-image:none;
2741
2658
  }
2659
+ @media (hover) and (pointer: fine){
2660
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
2661
+ padding-block:0;
2662
+ -webkit-appearance:base-select;
2663
+ -moz-appearance:base-select;
2664
+ appearance:base-select;
2665
+ }
2666
+ }
2667
+ :is(.tds-select select:has( > button))::picker-icon{
2668
+ flex-shrink:0;
2669
+ width:var(--tds-select-caret-size);
2670
+ height:var(--tds-select-caret-size);
2671
+ margin-inline-end:var(--tds-select-caret-inline-offset);
2672
+ line-height:1;
2673
+ content:var(--tds-select-background-image);
2674
+ transition:var(--tds-select-caret-transition);
2675
+ }
2676
+
2677
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
2678
+ opacity:var(--tds-select-dropdown-closed-opacity);
2679
+ translate:var(--tds-select-dropdown-closed-translate);
2680
+ }
2681
+
2682
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
2683
+ outline-color:var(--t-focus-ring-color);
2684
+ outline-offset:var(--t-focus-ring-offset);
2685
+ border-color:var(--tds-select-border-color-active);
2686
+ }
2687
+
2688
+ :is(.tds-select select:has( > button)):open::picker-icon{
2689
+ opacity:1;
2690
+ transform:rotate(.5turn);
2691
+ }
2692
+
2693
+ :is(.tds-select select:has( > button)) selectedcontent{
2694
+ overflow:hidden;
2695
+ text-overflow:ellipsis;
2696
+ line-height:calc(var(--tds-select-min-height) - 2px);
2697
+ white-space:nowrap;
2698
+ }
2699
+
2700
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
2701
+ color:var(--tds-select-placeholder-color);
2702
+ }
2703
+
2704
+ :is(.tds-select select:has( > button))::picker(select){
2705
+ inset:auto;
2706
+ inline-size:-moz-max-content;
2707
+ inline-size:max-content;
2708
+ min-inline-size:anchor-size(width);
2709
+ max-inline-size:100vi;
2710
+ padding:var(--tds-select-dropdown-padding);
2711
+ margin-block:var(--tds-select-dropdown-margin-block);
2712
+ position-area:block-end span-inline-start;
2713
+ position-try-fallbacks:flip-block, flip-inline;
2714
+ overflow:auto;
2715
+ overflow-x:hidden;
2716
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
2717
+ overscroll-behavior:none;
2718
+ -webkit-user-select:none;
2719
+ -moz-user-select:none;
2720
+ user-select:none;
2721
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
2722
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
2723
+ background:var(--tds-select-dropdown-background-color);
2724
+ border:var(--tds-select-dropdown-border);
2725
+ border-radius:var(--tds-select-dropdown-border-radius);
2726
+ box-shadow:var(--tds-select-dropdown-box-shadow);
2727
+ opacity:var(--tds-select-dropdown-open-opacity);
2728
+ translate:var(--tds-select-dropdown-open-translate);
2729
+ transition:var(--tds-select-dropdown-transition);
2730
+ }
2731
+
2732
+ :is(.tds-select select:has( > button)) option::checkmark{
2733
+ display:none;
2734
+ }
2735
+
2736
+ @starting-style{
2737
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
2738
+ opacity:var(--tds-select-dropdown-closed-opacity);
2739
+ translate:var(--tds-select-dropdown-closed-translate);
2740
+ }
2741
+ }
2742
2742
  }
2743
2743
 
2744
2744
  .symbol{