@planningcenter/tapestry 3.2.3-rc.8 → 3.2.3-rc.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/select/Select.d.ts +59 -9
  2. package/dist/components/select/Select.d.ts.map +1 -1
  3. package/dist/components/select/Select.js.map +1 -1
  4. package/dist/reactRender.css +1310 -1310
  5. package/dist/reactRender.css.map +1 -1
  6. package/dist/reactRenderLegacy.css +1310 -1310
  7. package/dist/reactRenderLegacy.css.map +1 -1
  8. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,844 +1,713 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
1
+
2
+ @media (prefers-reduced-motion: no-preference){
3
+
4
+ :root{
5
+ interpolate-size:allow-keywords;
5
6
  }
7
+ }
6
8
 
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
9
+ @layer tds-component{
10
+ tds-sidenav,
11
+ .tds-sidenav{
12
+ --tds-sidenav-indent:12px;
13
+ --tds-sidenav-item-depth:0;
25
14
 
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
15
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
28
16
 
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
17
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
+ --tds-sidenav-collapse-closed-opacity:0;
20
+ --tds-sidenav-collapse-open-opacity:1;
21
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
+ --tds-sidenav-collapse-open-transform:translateY(0);
32
23
 
33
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
24
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
35
28
 
36
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
29
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
+ --tds-sidenav-item-nested-background-selected:transparent;
39
32
 
40
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
45
- }
33
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
46
36
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
37
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
49
39
  }
50
40
 
51
- @supports (color: light-dark(#fff, #000)){
52
- .tds-page-header{
53
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
41
+ @media (prefers-reduced-motion: reduce){
42
+ tds-sidenav,
43
+ .tds-sidenav{
44
+ --tds-sidenav-collapse-transition-enter:none;
45
+ --tds-sidenav-collapse-transition-exit:none;
46
+ --tds-sidenav-collapse-closed-transform:none;
47
+ --tds-sidenav-collapse-open-transform:none;
48
+ }
55
49
  }
50
+
51
+ .tds-sidenav--theme-gray{
52
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
56
57
  }
58
+ }
57
59
 
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
- }
60
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
+ display:flex;
62
+ }
63
+
64
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
+ flex-direction:column;
66
+ gap:var(--t-spacing-half);
67
+ width:100%;
76
68
  }
69
+
70
+ .tds-sidenav-section-list{
71
+ width:100%;
72
+ padding:0;
73
+ margin:0;
74
+ list-style:none;
77
75
  }
78
76
 
79
- .tds-page-header{
77
+ .tds-sidenav-section-header{
80
78
  display:flex;
81
- flex-direction:column;
82
- padding-top:var(--tds-page-header-padding-y);
83
- color:var(--tds-page-header-color);
84
- background:var(--tds-page-header-background-color);
85
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
79
+ align-items:baseline;
80
+ justify-content:space-between;
81
+ padding-top:var(--t-spacing-2);
86
82
  }
87
83
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
84
+ .tds-sidenav-section-header h2{
85
+ margin:0;
86
+ font-size:var(--t-font-size-sm);
87
+ font-weight:var(--t-font-weight-semibold);
88
+ line-height:1.35;
89
+ color:var(--t-text-color-secondary);
90
+ text-transform:uppercase;
90
91
  }
91
92
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
93
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
+ padding-top:0;
94
95
  }
95
96
 
96
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
- width:100%;
97
+ .tds-sidenav-section-header [slot="label-actions"]{
98
+ display:flex;
99
+ gap:var(--t-spacing-half);
100
+ align-items:center;
98
101
  }
99
102
 
100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
103
+ .tds-sidenav-section [slot="section-actions"]{
104
+ display:flex;
105
+ gap:12px;
106
+ align-items:center;
107
+ min-height:42px;
108
+ padding:var(--t-spacing-1) 0;
109
+ }
110
+
111
+ .tds-sidenav-section-list,
112
+ .tds-sidenav-item{
113
+ width:100%;
114
+ padding:0;
115
+ margin:0;
116
+ }
117
+
118
+ .tds-sidenav-item :is(a,button){
119
+ position:relative;
101
120
  display:flex;
102
- flex-flow:row wrap;
103
- gap:var(--t-spacing-half) var(--t-spacing-1);
104
- align-items:flex-start;
105
- justify-content:flex-start;
106
- min-width:0;
121
+ gap:12px;
122
+ align-items:center;
123
+ width:100%;
124
+ padding:12px;
125
+ overflow:hidden;
126
+ font-size:var(--t-font-size-sm);
127
+ line-height:18px;
128
+ color:var(--t-text-color-headline);
129
+ white-space:nowrap;
130
+ text-decoration:none;
131
+ -webkit-appearance:none;
132
+ -moz-appearance:none;
133
+ appearance:none;
134
+ cursor:pointer;
135
+ background-color:var(--tds-sidenav-item-background, transparent);
136
+ border:0;
137
+ border-radius:var(--t-border-radius);
138
+ transition:var(--tds-sidenav-item-transition);
107
139
  }
108
140
 
109
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
- display:flex;
111
- gap:var(--tds-page-header-nav-gap);
112
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
- margin:0 0 -1px;
114
- overflow:auto;
115
- list-style:none;
116
- background:var(--tds-page-header-nav-background);
141
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
+ display:block;
143
+ flex:1;
144
+ overflow:hidden;
145
+ text-overflow:ellipsis;
146
+ text-align:left;
147
+ white-space:nowrap;
117
148
  }
118
149
 
119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
- position:relative;
121
- display:inline-flex;
122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
- font-size:var(--t-font-size-sm);
124
- line-height:22px;
125
- color:var(--tds-page-header-nav-item-color);
126
- white-space:nowrap;
150
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
+ color:var(--t-text-color-headline);
127
153
  text-decoration:none;
128
- -webkit-appearance:none;
129
- -moz-appearance:none;
130
- appearance:none;
131
- cursor:pointer;
132
- outline-offset:-2px;
133
- background-color:var(--tds-page-header-nav-item-background-color);
134
- background-clip:padding-box;
135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
138
154
  }
139
155
 
140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
145
- }
156
+ :is(.tds-sidenav-item :is(a,button)):active{
157
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
+ }
146
159
 
147
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
- }
160
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
+ overflow:hidden;
162
+ color:var(--tds-sidenav-item-icon-color);
163
+ }
152
164
 
153
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
- background-color:var(--tds-page-header-nav-item-background-color-active);
155
- border-color:var(--tds-page-header-nav-item-border-color-active);
156
- }
165
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
+ display:block;
167
+ width:var(--tds-sidenav-item-icon-size);
168
+ height:var(--tds-sidenav-item-icon-size);
169
+ }
157
170
 
158
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
- color:var(--tds-page-header-nav-item-color-disabled);
160
- cursor:not-allowed;
161
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
- opacity:1;
163
- }
164
-
165
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
- position:relative;
171
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
+ --tds-sidenav-indent:19px;
167
173
  }
168
174
 
169
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
172
- }
173
-
174
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
175
- position:absolute;
176
- top:-5px;
177
- right:-2px;
178
- width:10px;
179
- height:10px;
180
- content:"";
181
- background:var(--tds-page-header-nav-item-indicator-color);
182
- border-radius:50%;
183
- }
184
-
185
- @media (prefers-reduced-motion: no-preference){
186
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
- animation:indicator-pulse 1.25s ease infinite;
188
- }
189
- }
175
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
+ visibility:visible;
177
+ block-size:auto;
178
+ opacity:1;
179
+ }
190
180
 
191
- .tds-page-header__title-bar{
192
- display:flex;
193
- flex-direction:column;
194
- gap:var(--t-spacing-2) var(--t-spacing-1);
195
- align-items:flex-start;
196
- justify-content:space-between;
197
- padding:0 var(--tds-page-header-padding-x);
198
- }
181
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
199
184
 
200
- .tds-page-header--profile > .tds-page-header__title-bar{
201
- align-items:center;
185
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
+ font-weight:var(--t-font-weight-semibold);
202
187
  }
203
188
 
204
- .tds-page-header__primary{
205
- width:100%;
206
- }
207
-
208
- .tds-page-header__primary h1{
209
- margin:0;
210
- font-size:var(--tds-page-header-headline-font-size);
211
- font-weight:var(--t-font-weight-normal);
212
- line-height:32px;
213
- color:var(--tds-page-header-headline-color);
214
- overflow-wrap:break-word;
189
+ .tds-sidenav-item:has(.tds-sidenav-section){
190
+ display:flex;
191
+ flex-direction:column;
192
+ gap:var(--t-spacing-half);
215
193
  }
216
194
 
217
- @media (min-width: 960px){
218
- .tds-page-header__primary{
219
- flex:1 1 max-content;
220
- width:auto;
221
- min-width:0;
222
- max-width:100%;
195
+ .tds-sidenav-item .tds-sidenav-section-list{
196
+ --tds-sidenav-item-depth:1;
197
+ gap:0;
223
198
  }
224
199
 
225
- .tds-page-header__title-bar,
226
- .tds-page-header--profile .tds-page-header__title-bar{
227
- flex-flow:row nowrap;
228
- row-gap:12px;
229
- align-items:flex-start;
230
- }
231
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
- width:auto;
200
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
+ visibility:hidden;
202
+ block-size:0;
203
+ overflow-y:clip;
204
+ opacity:0;
205
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
233
206
  }
234
207
 
235
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
- justify-content:flex-end;
208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
+ --tds-sidenav-item-depth:2;
237
210
  }
238
- }
239
-
240
- .tds-page-header-phone,
241
- .tds-page-header-email{
242
- color:var(--tds-page-header-color);
243
- white-space:nowrap;
244
- }
245
-
246
- .tds-page-header-email{
247
- max-width:100%;
248
- overflow:hidden;
249
- text-overflow:ellipsis;
250
- }
251
-
252
- @keyframes indicator-pulse{
253
- 0%{
254
- opacity:.3;
255
- transform:scale(.9);
256
- }
257
-
258
- 100%{
259
- opacity:0;
260
- transform:scale(1.75);
261
- }
262
- }
263
211
 
264
- .tds-checkbox{
265
- --tds-checkbox-font-size:var(--t-font-size-md);
266
- --tds-checkbox-cursor:pointer;
267
- --tds-checkbox-line-height:1.4;
268
- --tds-checkbox-transition-property:background-color, border-color;
269
-
270
- --tds-checkbox-input-size:var(--t-element-size-md);
271
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
272
- --tds-checkbox-input-border-color:var(--t-form-border-color);
273
- --tds-checkbox-input-background-color:transparent;
274
-
275
- --tds-checkbox-input-icon:none;
276
- --tds-checkbox-input-icon-visibility:hidden;
277
- --tds-checkbox-input-icon-opacity:0;
278
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
279
-
280
- --tds-checkbox-label-color:var(--t-form-color);
281
-
282
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
283
- --tds-checkbox-description-line-height:1.35;
284
- --tds-checkbox-description-color:var(--t-text-color-secondary);
285
- --tds-checkbox-description-invalid-icon-display:none;
286
-
287
- position:relative;
288
- display:inline-grid;
289
- grid-template-columns:auto;
290
- grid-auto-columns:1fr;
291
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
292
- line-height:var(--tds-checkbox-line-height);
293
- cursor:var(--tds-checkbox-cursor);
294
- -webkit-user-select:none;
295
- -moz-user-select:none;
296
- user-select:none;
297
- }
298
-
299
- .tds-checkbox label{
300
- grid-area:1 / 2;
301
- font-size:var(--tds-checkbox-font-size);
302
- font-weight:var(--t-font-weight-normal);
303
- color:var(--tds-checkbox-label-color);
304
- cursor:var(--tds-checkbox-cursor);
305
- }
212
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
+ min-height:var(--t-element-size-2xl);
214
+ padding-block:9px;
215
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
+ line-height:1;
217
+ background-color:transparent;
218
+ }
306
219
 
307
- .tds-checkbox tds-indeterminate{
308
- display:flex;
309
- }
220
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
+ position:absolute;
222
+ top:0;
223
+ bottom:0;
224
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
+ width:2px;
226
+ content:"";
227
+ background-color:var(--tds-sidenav-item-nested-border-color);
228
+ transition:var(--tds-sidenav-item-transition);
229
+ }
310
230
 
311
- .tds-checkbox input[type="checkbox"]{
312
- position:relative;
313
- width:1em;
314
- height:1em;
315
- margin:calc((1lh - 1em) / 2) 0 0;
316
- font-size:var(--tds-checkbox-font-size);
317
- line-height:inherit;
318
- -webkit-appearance:none;
319
- -moz-appearance:none;
320
- appearance:none;
321
- cursor:var(--tds-checkbox-cursor);
322
- background-color:var(--tds-checkbox-input-background-color);
323
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
324
- border-radius:var(--tds-checkbox-input-border-radius);
325
- transition-timing-function:var(--t-ease-in-out);
326
- transition-duration:var(--t-duration-200);
327
- transition-property:var(--tds-checkbox-transition-property);
328
- }
231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
232
+ position:absolute;
233
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
+ z-index:-1;
235
+ height:100%;
236
+ content:"";
237
+ background-color:var(--tds-sidenav-item-nested-background);
238
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
+ transition:var(--tds-sidenav-item-transition);
240
+ }
329
241
 
330
- :is(.tds-checkbox input[type="checkbox"])::before{
331
- position:absolute;
332
- top:50%;
333
- left:50%;
334
- visibility:var(--tds-checkbox-input-icon-visibility);
335
- width:100%;
336
- height:100%;
337
- content:"";
338
- background-color:var(--tds-checkbox-input-icon-fill);
339
- border-radius:var(--tds-checkbox-input-border-radius);
340
- opacity:var(--tds-checkbox-input-icon-opacity);
341
- -webkit-mask-image:var(--tds-checkbox-input-icon);
342
- mask-image:var(--tds-checkbox-input-icon);
343
- -webkit-mask-repeat:no-repeat;
344
- mask-repeat:no-repeat;
345
- -webkit-mask-size:contain;
346
- mask-size:contain;
347
- transform:translate(-50%, -50%);
348
- }
242
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
+ display:block;
244
+ text-align:left;
245
+ white-space:normal;
246
+ }
349
247
 
350
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
351
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
352
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
353
- }
248
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
251
+ }
354
252
 
355
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
356
- outline:var(--t-focus-ring-outline);
357
- outline-offset:var(--t-focus-ring-offset);
358
- }
253
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
255
+ }
359
256
 
360
- :is(.tds-checkbox input[type="checkbox"]):disabled{
361
- pointer-events:none;
257
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
+ font-weight:var(--t-font-weight-medium);
362
260
  }
363
261
 
364
- @media (prefers-reduced-motion: reduce){
365
-
366
- .tds-checkbox input[type="checkbox"]{
367
- --tds-checkbox-transition-property:none;
368
- }
369
- }
262
+ .tds-sidenav-responsive-header{
263
+ display:flex;
264
+ gap:var(--t-spacing-2);
265
+ align-items:center;
266
+ width:100%;
267
+ }
370
268
 
371
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
372
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
373
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
374
- --tds-checkbox-input-icon-visibility:visible;
375
- --tds-checkbox-input-icon-opacity:1;
269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
+ order:0;
376
271
  }
377
272
 
378
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
379
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
380
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
381
- }
382
-
383
- .tds-checkbox:has(input:checked){
384
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
273
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
+ flex:1;
275
+ order:1;
276
+ margin:0;
277
+ font-size:var(--t-font-size-lg);
278
+ font-weight:var(--t-font-weight-medium);
279
+ color:var(--t-text-color-headline);
385
280
  }
386
281
 
387
- .tds-checkbox:has(input:indeterminate){
388
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
282
+ @media (max-width: 719px){
283
+ .tds-sidenav-collapse{
284
+ z-index:10001;
285
+ display:none;
286
+ max-width:min(448px, calc(100vw - 48px));
287
+ padding:0;
288
+ margin:12px 0;
289
+ position-area:bottom span-right;
290
+ overflow:hidden;
291
+ outline:0;
292
+ background:var(--t-surface-color-card);
293
+ border:0;
294
+ border-radius:6px;
295
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
+ opacity:var(--tds-sidenav-collapse-open-opacity);
297
+ transform:var(--tds-sidenav-collapse-open-transform);
298
+ transition:var(--tds-sidenav-collapse-transition-enter);
299
+ will-change:transform;
389
300
  }
390
301
 
391
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
392
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
393
- --tds-checkbox-description-color:var(--t-text-color-status-error);
394
- --tds-checkbox-description-invalid-icon-display:inline-block;
302
+ .tds-sidenav-scroll-container{
303
+ --webkit-overflow-scrolling:touch;
304
+ display:block;
305
+ width:100%;
306
+ height:-moz-fit-content;
307
+ height:fit-content;
308
+ padding:var(--t-spacing-2);
309
+ overflow-y:auto;
395
310
  }
396
311
 
397
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
398
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
399
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
314
+ }
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
400
318
  }
401
319
 
402
- :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{
403
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
404
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
405
323
  }
406
324
 
407
- :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){
408
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
409
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
325
+ @starting-style{
326
+ .tds-sidenav-collapse:popover-open{
327
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
328
+ transform:var(--tds-sidenav-collapse-closed-transform);
410
329
  }
411
-
412
- .tds-checkbox:has(input:required) label::after{
413
- margin-left:.25ch;
414
- color:var(--t-text-color-status-error);
415
- content:"*";
416
330
  }
417
-
418
- .tds-checkbox:has(input:disabled){
419
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
420
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
421
-
422
- --tds-checkbox-label-color:var(--t-form-color-disabled);
423
- --tds-checkbox-description-color:var(--t-form-color-disabled);
424
- --tds-checkbox-cursor:not-allowed;
425
331
  }
426
-
427
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
428
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
429
335
  }
430
336
 
431
- .tds-checkbox-description{
432
- display:flex;
433
- grid-area:2 / 2;
434
- gap:var(--t-spacing-half);
435
- align-items:flex-start;
436
- margin:0;
437
- font-size:var(--tds-checkbox-description-font-size);
438
- line-height:var(--tds-checkbox-description-line-height);
439
- color:var(--tds-checkbox-description-color);
440
- cursor:text;
441
- }
442
-
443
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
444
- display:var(--tds-checkbox-description-invalid-icon-display);
445
- flex-shrink:0;
446
- margin-top:calc(.5lh - .5em);
447
- line-height:var(--tds-checkbox-description-line-height);
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
448
341
  }
449
-
450
- .tds-checkbox--sm{
451
- --tds-checkbox-line-height:1.35;
452
- --tds-checkbox-input-size:var(--t-element-size-sm);
453
- --tds-checkbox-font-size:var(--t-font-size-sm);
454
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
455
- --tds-checkbox-description-line-height:1.3;
456
342
  }
457
343
 
458
-
459
- @media (prefers-reduced-motion: no-preference){
460
-
461
- :root{
462
- interpolate-size:allow-keywords;
463
- }
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
464
347
  }
348
+ }
465
349
 
466
- @layer tds-component{
467
- tds-sidenav,
468
- .tds-sidenav{
469
- --tds-sidenav-indent:12px;
470
- --tds-sidenav-item-depth:0;
471
-
472
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
473
-
474
- --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;
475
- --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;
476
- --tds-sidenav-collapse-closed-opacity:0;
477
- --tds-sidenav-collapse-open-opacity:1;
478
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
479
- --tds-sidenav-collapse-open-transform:translateY(0);
480
-
481
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
482
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
483
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
484
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
485
-
486
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
487
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
488
- --tds-sidenav-item-nested-background-selected:transparent;
489
-
490
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
491
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
492
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
493
353
 
494
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
495
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
496
- }
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
497
357
 
498
- @media (prefers-reduced-motion: reduce){
499
- tds-sidenav,
500
- .tds-sidenav{
501
- --tds-sidenav-collapse-transition-enter:none;
502
- --tds-sidenav-collapse-transition-exit:none;
503
- --tds-sidenav-collapse-closed-transform:none;
504
- --tds-sidenav-collapse-open-transform:none;
505
- }
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
506
361
  }
507
362
 
508
- .tds-sidenav--theme-gray{
509
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
510
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
511
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
512
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
513
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
514
- }
515
- }
363
+ .tds-checkbox{
364
+ --tds-checkbox-font-size:var(--t-font-size-md);
365
+ --tds-checkbox-cursor:pointer;
366
+ --tds-checkbox-line-height:1.4;
367
+ --tds-checkbox-transition-property:background-color, border-color;
516
368
 
517
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
518
- display:flex;
519
- }
369
+ --tds-checkbox-input-size:var(--t-element-size-md);
370
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
371
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
372
+ --tds-checkbox-input-background-color:transparent;
520
373
 
521
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
522
- flex-direction:column;
523
- gap:var(--t-spacing-half);
524
- width:100%;
525
- }
374
+ --tds-checkbox-input-icon:none;
375
+ --tds-checkbox-input-icon-visibility:hidden;
376
+ --tds-checkbox-input-icon-opacity:0;
377
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
526
378
 
527
- .tds-sidenav-section-list{
528
- width:100%;
529
- padding:0;
530
- margin:0;
531
- list-style:none;
532
- }
379
+ --tds-checkbox-label-color:var(--t-form-color);
533
380
 
534
- .tds-sidenav-section-header{
535
- display:flex;
536
- align-items:baseline;
537
- justify-content:space-between;
538
- padding-top:var(--t-spacing-2);
539
- }
381
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
382
+ --tds-checkbox-description-line-height:1.35;
383
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
384
+ --tds-checkbox-description-invalid-icon-display:none;
540
385
 
541
- .tds-sidenav-section-header h2{
542
- margin:0;
543
- font-size:var(--t-font-size-sm);
544
- font-weight:var(--t-font-weight-semibold);
545
- line-height:1.35;
546
- color:var(--t-text-color-secondary);
547
- text-transform:uppercase;
548
- }
386
+ position:relative;
387
+ display:inline-grid;
388
+ grid-template-columns:auto;
389
+ grid-auto-columns:1fr;
390
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
391
+ line-height:var(--tds-checkbox-line-height);
392
+ cursor:var(--tds-checkbox-cursor);
393
+ -webkit-user-select:none;
394
+ -moz-user-select:none;
395
+ user-select:none;
396
+ }
549
397
 
550
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
551
- padding-top:0;
398
+ .tds-checkbox label{
399
+ grid-area:1 / 2;
400
+ font-size:var(--tds-checkbox-font-size);
401
+ font-weight:var(--t-font-weight-normal);
402
+ color:var(--tds-checkbox-label-color);
403
+ cursor:var(--tds-checkbox-cursor);
552
404
  }
553
405
 
554
- .tds-sidenav-section-header [slot="label-actions"]{
406
+ .tds-checkbox tds-indeterminate{
555
407
  display:flex;
556
- gap:var(--t-spacing-half);
557
- align-items:center;
558
408
  }
559
409
 
560
- .tds-sidenav-section [slot="section-actions"]{
561
- display:flex;
562
- gap:12px;
563
- align-items:center;
564
- min-height:42px;
565
- padding:var(--t-spacing-1) 0;
566
- }
567
-
568
- .tds-sidenav-section-list,
569
- .tds-sidenav-item{
570
- width:100%;
571
- padding:0;
572
- margin:0;
573
- }
574
-
575
- .tds-sidenav-item :is(a,button){
410
+ .tds-checkbox input[type="checkbox"]{
576
411
  position:relative;
577
- display:flex;
578
- gap:12px;
579
- align-items:center;
580
- width:100%;
581
- padding:12px;
582
- overflow:hidden;
583
- font-size:var(--t-font-size-sm);
584
- line-height:18px;
585
- color:var(--t-text-color-headline);
586
- white-space:nowrap;
587
- text-decoration:none;
412
+ width:1em;
413
+ height:1em;
414
+ margin:calc((1lh - 1em) / 2) 0 0;
415
+ font-size:var(--tds-checkbox-font-size);
416
+ line-height:inherit;
588
417
  -webkit-appearance:none;
589
418
  -moz-appearance:none;
590
419
  appearance:none;
591
- cursor:pointer;
592
- background-color:var(--tds-sidenav-item-background, transparent);
593
- border:0;
594
- border-radius:var(--t-border-radius);
595
- transition:var(--tds-sidenav-item-transition);
420
+ cursor:var(--tds-checkbox-cursor);
421
+ background-color:var(--tds-checkbox-input-background-color);
422
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
423
+ border-radius:var(--tds-checkbox-input-border-radius);
424
+ transition-timing-function:var(--t-ease-in-out);
425
+ transition-duration:var(--t-duration-200);
426
+ transition-property:var(--tds-checkbox-transition-property);
596
427
  }
597
428
 
598
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
599
- display:block;
600
- flex:1;
601
- overflow:hidden;
602
- text-overflow:ellipsis;
603
- text-align:left;
604
- white-space:nowrap;
429
+ :is(.tds-checkbox input[type="checkbox"])::before{
430
+ position:absolute;
431
+ top:50%;
432
+ left:50%;
433
+ visibility:var(--tds-checkbox-input-icon-visibility);
434
+ width:100%;
435
+ height:100%;
436
+ content:"";
437
+ background-color:var(--tds-checkbox-input-icon-fill);
438
+ border-radius:var(--tds-checkbox-input-border-radius);
439
+ opacity:var(--tds-checkbox-input-icon-opacity);
440
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
441
+ mask-image:var(--tds-checkbox-input-icon);
442
+ -webkit-mask-repeat:no-repeat;
443
+ mask-repeat:no-repeat;
444
+ -webkit-mask-size:contain;
445
+ mask-size:contain;
446
+ transform:translate(-50%, -50%);
605
447
  }
606
448
 
607
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
608
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
609
- color:var(--t-text-color-headline);
610
- text-decoration:none;
449
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
450
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
451
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
611
452
  }
612
453
 
613
- :is(.tds-sidenav-item :is(a,button)):active{
614
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
454
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
455
+ outline:var(--t-focus-ring-outline);
456
+ outline-offset:var(--t-focus-ring-offset);
615
457
  }
616
458
 
617
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
618
- overflow:hidden;
619
- color:var(--tds-sidenav-item-icon-color);
459
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
460
+ pointer-events:none;
620
461
  }
621
462
 
622
- :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{
623
- display:block;
624
- width:var(--tds-sidenav-item-icon-size);
625
- height:var(--tds-sidenav-item-icon-size);
626
- }
463
+ @media (prefers-reduced-motion: reduce){
627
464
 
628
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
629
- --tds-sidenav-indent:19px;
465
+ .tds-checkbox input[type="checkbox"]{
466
+ --tds-checkbox-transition-property:none;
467
+ }
630
468
  }
631
469
 
632
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
633
- visibility:visible;
634
- block-size:auto;
635
- opacity:1;
636
- }
470
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
471
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
472
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
473
+ --tds-checkbox-input-icon-visibility:visible;
474
+ --tds-checkbox-input-icon-opacity:1;
475
+ }
637
476
 
638
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
639
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
640
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
477
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
478
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
479
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
480
+ }
641
481
 
642
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
643
- font-weight:var(--t-font-weight-semibold);
482
+ .tds-checkbox:has(input:checked){
483
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
644
484
  }
645
485
 
646
- .tds-sidenav-item:has(.tds-sidenav-section){
647
- display:flex;
648
- flex-direction:column;
649
- gap:var(--t-spacing-half);
486
+ .tds-checkbox:has(input:indeterminate){
487
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
650
488
  }
651
489
 
652
- .tds-sidenav-item .tds-sidenav-section-list{
653
- --tds-sidenav-item-depth:1;
654
- gap:0;
490
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
493
+ --tds-checkbox-description-invalid-icon-display:inline-block;
655
494
  }
656
495
 
657
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
658
- visibility:hidden;
659
- block-size:0;
660
- overflow-y:clip;
661
- opacity:0;
662
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
663
- }
664
-
665
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
666
- --tds-sidenav-item-depth:2;
496
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
667
499
  }
668
500
 
669
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
670
- min-height:var(--t-element-size-2xl);
671
- padding-block:9px;
672
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
673
- line-height:1;
674
- background-color:transparent;
501
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
502
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
675
504
  }
676
505
 
677
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
678
- position:absolute;
679
- top:0;
680
- bottom:0;
681
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
682
- width:2px;
683
- content:"";
684
- background-color:var(--tds-sidenav-item-nested-border-color);
685
- transition:var(--tds-sidenav-item-transition);
686
- }
687
-
688
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
689
- position:absolute;
690
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
691
- z-index:-1;
692
- height:100%;
693
- content:"";
694
- background-color:var(--tds-sidenav-item-nested-background);
695
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
696
- transition:var(--tds-sidenav-item-transition);
506
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
507
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
697
509
  }
698
510
 
699
- :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)){
700
- display:block;
701
- text-align:left;
702
- white-space:normal;
703
- }
511
+ .tds-checkbox:has(input:required) label::after{
512
+ margin-left:.25ch;
513
+ color:var(--t-text-color-status-error);
514
+ content:"*";
515
+ }
704
516
 
705
- :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{
706
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
707
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
708
- }
517
+ .tds-checkbox:has(input:disabled){
518
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
709
520
 
710
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
711
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
712
- }
521
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
522
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
523
+ --tds-checkbox-cursor:not-allowed;
524
+ }
713
525
 
714
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
715
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
716
- font-weight:var(--t-font-weight-medium);
526
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
717
528
  }
718
529
 
719
- .tds-sidenav-responsive-header{
530
+ .tds-checkbox-description{
720
531
  display:flex;
721
- gap:var(--t-spacing-2);
722
- align-items:center;
723
- width:100%;
532
+ grid-area:2 / 2;
533
+ gap:var(--t-spacing-half);
534
+ align-items:flex-start;
535
+ margin:0;
536
+ font-size:var(--tds-checkbox-description-font-size);
537
+ line-height:var(--tds-checkbox-description-line-height);
538
+ color:var(--tds-checkbox-description-color);
539
+ cursor:text;
724
540
  }
725
541
 
726
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
727
- order:0;
542
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
+ display:var(--tds-checkbox-description-invalid-icon-display);
544
+ flex-shrink:0;
545
+ margin-top:calc(.5lh - .5em);
546
+ line-height:var(--tds-checkbox-description-line-height);
728
547
  }
729
548
 
730
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
731
- flex:1;
732
- order:1;
733
- margin:0;
734
- font-size:var(--t-font-size-lg);
735
- font-weight:var(--t-font-weight-medium);
736
- color:var(--t-text-color-headline);
549
+ .tds-checkbox--sm{
550
+ --tds-checkbox-line-height:1.35;
551
+ --tds-checkbox-input-size:var(--t-element-size-sm);
552
+ --tds-checkbox-font-size:var(--t-font-size-sm);
553
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
+ --tds-checkbox-description-line-height:1.3;
555
+ }
556
+
557
+
558
+ :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{
559
+ -webkit-appearance:none;
560
+ appearance:none;
561
+ }
562
+
563
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
564
+ inline-size:1em;
565
+ block-size:2em;
566
+ }
567
+
568
+ @supports (field-sizing: content){
569
+ .tds-input--auto-width{
570
+ inline-size:-moz-fit-content;
571
+ inline-size:fit-content;
572
+ min-inline-size:min(100%, 122px);
737
573
  }
738
574
 
739
- @media (max-width: 719px){
740
- .tds-sidenav-collapse{
741
- z-index:10001;
742
- display:none;
743
- max-width:min(448px, calc(100vw - 48px));
744
- padding:0;
745
- margin:12px 0;
746
- position-area:bottom span-right;
747
- overflow:hidden;
748
- outline:0;
749
- background:var(--t-surface-color-card);
750
- border:0;
751
- border-radius:6px;
752
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
753
- opacity:var(--tds-sidenav-collapse-open-opacity);
754
- transform:var(--tds-sidenav-collapse-open-transform);
755
- transition:var(--tds-sidenav-collapse-transition-enter);
756
- will-change:transform;
575
+ .tds-input--auto-width input{
576
+ field-sizing:content;
577
+ inline-size:auto;
757
578
  }
579
+ }
580
+
581
+ .tds-radio{
582
+ --tds-radio-font-size:var(--t-font-size-md);
583
+ --tds-radio-cursor:pointer;
584
+ --tds-radio-line-height:1.4;
585
+ --tds-radio-transition-property:border-width;
586
+
587
+ --tds-radio-input-size:var(--t-element-size-md);
588
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
589
+ --tds-radio-input-border-color:var(--t-form-border-color);
590
+ --tds-radio-input-border-width:var(--t-form-border-width);
591
+ --tds-radio-input-background-color:transparent;
592
+
593
+ --tds-radio-label-color:var(--t-form-color);
594
+
595
+ --tds-radio-description-font-size:var(--t-font-size-sm);
596
+ --tds-radio-description-line-height:1.35;
597
+ --tds-radio-description-color:var(--t-text-color-secondary);
598
+
599
+ position:relative;
600
+ display:inline-grid;
601
+ grid-template-columns:auto;
602
+ grid-auto-columns:1fr;
603
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
604
+ line-height:var(--tds-radio-line-height);
605
+ cursor:var(--tds-radio-cursor);
606
+ -webkit-user-select:none;
607
+ -moz-user-select:none;
608
+ user-select:none;
609
+ }
758
610
 
759
- .tds-sidenav-scroll-container{
760
- --webkit-overflow-scrolling:touch;
761
- display:block;
762
- width:100%;
763
- height:-moz-fit-content;
764
- height:fit-content;
765
- padding:var(--t-spacing-2);
766
- overflow-y:auto;
611
+ .tds-radio label{
612
+ grid-area:1 / 2;
613
+ font-size:var(--tds-radio-font-size);
614
+ font-weight:var(--t-font-weight-normal);
615
+ color:var(--tds-radio-label-color);
616
+ cursor:var(--tds-radio-cursor);
767
617
  }
768
618
 
769
- .tds-sidenav-item :is(a, button) :is(.prefix){
770
- display:none;
619
+ .tds-radio input[type="radio"]{
620
+ position:relative;
621
+ width:1em;
622
+ height:1em;
623
+ margin:calc((1lh - 1em) / 2) 0 0;
624
+ font-size:var(--tds-radio-font-size);
625
+ line-height:inherit;
626
+ -webkit-appearance:none;
627
+ -moz-appearance:none;
628
+ appearance:none;
629
+ cursor:var(--tds-radio-cursor);
630
+ background-color:var(--tds-radio-input-background-color);
631
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
632
+ border-radius:var(--tds-radio-input-border-radius);
633
+ transition-timing-function:var(--t-ease-in-out);
634
+ transition-duration:var(--t-duration-200);
635
+ transition-property:var(--tds-radio-transition-property);
771
636
  }
772
- @supports selector(:popover-open){
773
- .tds-sidenav-collapse:popover-open{
774
- display:flex;
775
- }
776
637
 
777
- .tds-sidenav-collapse:not(:popover-open){
778
- opacity:var(--tds-sidenav-collapse-closed-opacity);
779
- transition:var(--tds-sidenav-collapse-transition-exit);
638
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
639
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
640
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
780
641
  }
781
642
 
782
- @starting-style{
783
- .tds-sidenav-collapse:popover-open{
784
- opacity:var(--tds-sidenav-collapse-closed-opacity);
785
- transform:var(--tds-sidenav-collapse-closed-transform);
786
- }
787
- }
788
- }
789
- @supports not selector(:popover-open){
790
- .tds-sidenav-collapse.\:popover-open{
791
- display:flex;
643
+ :is(.tds-radio input[type="radio"]):focus-visible{
644
+ outline:var(--t-focus-ring-outline);
645
+ outline-offset:var(--t-focus-ring-offset);
792
646
  }
793
647
 
794
- .tds-sidenav-collapse:not(.\:popover-open){
795
- opacity:var(--tds-sidenav-collapse-closed-opacity);
796
- transition:var(--tds-sidenav-collapse-transition-exit);
648
+ :is(.tds-radio input[type="radio"]):disabled{
649
+ pointer-events:none;
797
650
  }
651
+
652
+ @media (prefers-reduced-motion: reduce){
653
+
654
+ .tds-radio input[type="radio"]{
655
+ --tds-radio-transition-property:none;
798
656
  }
799
- }
657
+ }
800
658
 
801
- @media (min-width: 720px){
802
- .tds-sidenav-responsive-header{
803
- display:none;
659
+ .tds-radio:has(input:checked){
660
+ --tds-radio-input-background-color:var(--t-form-background-color);
661
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
662
+ --tds-radio-input-border-width:4px;
804
663
  }
805
- }
806
664
 
807
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
808
- display:none;
665
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
666
+ --tds-radio-input-background-color:var(--t-form-background-color);
667
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
809
668
  }
810
669
 
811
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
812
- display:block;
813
- }
670
+ .tds-radio:has(input:user-invalid){
671
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
672
+ }
814
673
 
815
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
816
- display:flex;
817
- flex-direction:column;
674
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
675
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
676
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
818
677
  }
819
678
 
679
+ .tds-radio:has(input:disabled){
680
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
681
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
820
682
 
821
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
822
- -webkit-appearance:none;
823
- appearance:none;
824
- }
683
+ --tds-radio-label-color:var(--t-form-color-disabled);
684
+ --tds-radio-description-color:var(--t-form-color-disabled);
685
+ --tds-radio-cursor:not-allowed;
686
+ }
825
687
 
826
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
827
- inline-size:1em;
828
- block-size:2em;
688
+ .tds-radio:has(input:disabled) input:checked{
689
+ --tds-radio-input-background-color:var(--t-form-background-color);
690
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
829
691
  }
830
692
 
831
- @supports (field-sizing: content){
832
- .tds-input--auto-width{
833
- inline-size:-moz-fit-content;
834
- inline-size:fit-content;
835
- min-inline-size:min(100%, 122px);
836
- }
693
+ .tds-radio-description{
694
+ display:flex;
695
+ grid-area:2 / 2;
696
+ gap:var(--t-spacing-half);
697
+ align-items:flex-start;
698
+ margin:0;
699
+ font-size:var(--tds-radio-description-font-size);
700
+ line-height:var(--tds-radio-description-line-height);
701
+ color:var(--tds-radio-description-color);
702
+ cursor:text;
703
+ }
837
704
 
838
- .tds-input--auto-width input{
839
- field-sizing:content;
840
- inline-size:auto;
841
- }
705
+ .tds-radio--sm{
706
+ --tds-radio-line-height:1.35;
707
+ --tds-radio-input-size:var(--t-element-size-sm);
708
+ --tds-radio-font-size:var(--t-font-size-sm);
709
+ --tds-radio-description-font-size:var(--t-font-size-xs);
710
+ --tds-radio-description-line-height:1.3;
842
711
  }
843
712
 
844
713
  .tds-radio-group{
@@ -928,136 +797,145 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
928
797
  --tds-radio-group-description-line-height:1.3;
929
798
  }
930
799
 
931
- .tds-radio{
932
- --tds-radio-font-size:var(--t-font-size-md);
933
- --tds-radio-cursor:pointer;
934
- --tds-radio-line-height:1.4;
935
- --tds-radio-transition-property:border-width;
800
+ .tds-toggle-switch{
801
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
802
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
803
+ --tds-toggle-switch-cursor:pointer;
804
+ --tds-toggle-switch-display:inline-grid;
805
+ --tds-toggle-switch-line-height:1.4;
936
806
 
937
- --tds-radio-input-size:var(--t-element-size-md);
938
- --tds-radio-input-border-radius:var(--t-border-radius-round);
939
- --tds-radio-input-border-color:var(--t-form-border-color);
940
- --tds-radio-input-border-width:var(--t-form-border-width);
941
- --tds-radio-input-background-color:transparent;
807
+ --tds-toggle-switch-label-color:var(--t-form-color);
942
808
 
943
- --tds-radio-label-color:var(--t-form-color);
809
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
810
+ --tds-toggle-switch-track-outline:none;
811
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
812
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
813
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
944
814
 
945
- --tds-radio-description-font-size:var(--t-font-size-sm);
946
- --tds-radio-description-line-height:1.35;
947
- --tds-radio-description-color:var(--t-text-color-secondary);
815
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
816
+ --tds-toggle-switch-thumb-transform:translateX(0);
817
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
948
818
 
819
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
820
+ --tds-toggle-switch-description-line-height:1.35;
821
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
949
822
  position:relative;
950
- display:inline-grid;
823
+
824
+ display:var(--tds-toggle-switch-display);
951
825
  grid-template-columns:auto;
952
826
  grid-auto-columns:1fr;
953
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
954
- line-height:var(--tds-radio-line-height);
955
- cursor:var(--tds-radio-cursor);
827
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
956
828
  -webkit-user-select:none;
957
829
  -moz-user-select:none;
958
830
  user-select:none;
959
831
  }
960
832
 
961
- .tds-radio label{
962
- grid-area:1 / 2;
963
- font-size:var(--tds-radio-font-size);
964
- font-weight:var(--t-font-weight-normal);
965
- color:var(--tds-radio-label-color);
966
- cursor:var(--tds-radio-cursor);
967
- }
968
-
969
- .tds-radio input[type="radio"]{
970
- position:relative;
971
- width:1em;
972
- height:1em;
973
- margin:calc((1lh - 1em) / 2) 0 0;
974
- font-size:var(--tds-radio-font-size);
975
- line-height:inherit;
833
+ .tds-toggle-switch input[type="checkbox"]{
834
+ position:absolute;
835
+ width:var(--tds-toggle-switch-track-width);
836
+ height:var(--tds-toggle-switch-track-height);
837
+ margin:0;
976
838
  -webkit-appearance:none;
977
839
  -moz-appearance:none;
978
840
  appearance:none;
979
- cursor:var(--tds-radio-cursor);
980
- background-color:var(--tds-radio-input-background-color);
981
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
982
- border-radius:var(--tds-radio-input-border-radius);
983
- transition-timing-function:var(--t-ease-in-out);
984
- transition-duration:var(--t-duration-200);
985
- transition-property:var(--tds-radio-transition-property);
841
+ cursor:var(--tds-toggle-switch-cursor);
842
+ outline:var(--tds-toggle-switch-track-outline);
843
+ outline-offset:var(--t-focus-ring-offset);
844
+ background-color:transparent;
845
+ border:0;
846
+ border-radius:var(--t-border-radius-round);
986
847
  }
987
848
 
988
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
989
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
990
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
991
- }
992
-
993
- :is(.tds-radio input[type="radio"]):focus-visible{
994
- outline:var(--t-focus-ring-outline);
995
- outline-offset:var(--t-focus-ring-offset);
849
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
850
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
996
851
  }
997
852
 
998
- :is(.tds-radio input[type="radio"]):disabled{
999
- pointer-events:none;
1000
- }
853
+ .tds-toggle-switch label{
854
+ display:inline-flex;
855
+ grid-area:1 / 2;
856
+ -moz-column-gap:var(--tds-toggle-switch-column-gap);
857
+ column-gap:var(--tds-toggle-switch-column-gap);
858
+ margin-top:-.09375em;
859
+ font-size:var(--tds-toggle-switch-font-size);
860
+ font-weight:var(--t-font-weight-normal);
861
+ line-height:var(--tds-toggle-switch-line-height);
862
+ color:var(--tds-toggle-switch-label-color);
863
+ cursor:var(--tds-toggle-switch-cursor);
864
+ }
1001
865
 
1002
- @media (prefers-reduced-motion: reduce){
866
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
867
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
868
+ }
1003
869
 
1004
- .tds-radio input[type="radio"]{
1005
- --tds-radio-transition-property:none;
870
+ .tds-toggle-switch:has(input:checked){
871
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
872
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1006
873
  }
874
+
875
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
876
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1007
877
  }
1008
878
 
1009
- .tds-radio:has(input:checked){
1010
- --tds-radio-input-background-color:var(--t-form-background-color);
1011
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1012
- --tds-radio-input-border-width:4px;
879
+ .tds-toggle-switch:has(input:disabled){
880
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
881
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
882
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
883
+ --tds-toggle-switch-cursor:not-allowed;
1013
884
  }
1014
885
 
1015
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1016
- --tds-radio-input-background-color:var(--t-form-background-color);
1017
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1018
- }
886
+ .tds-toggle-switch-track{
887
+ position:relative;
888
+ flex-shrink:0;
889
+ width:var(--tds-toggle-switch-track-width);
890
+ height:var(--tds-toggle-switch-track-height);
891
+ background-color:var(--tds-toggle-switch-track-background-color);
892
+ border-radius:var(--t-border-radius-round);
893
+ transition:var(--tds-toggle-switch-track-transition);
894
+ }
1019
895
 
1020
- .tds-radio:has(input:user-invalid){
1021
- --tds-radio-input-border-color:var(--t-form-border-color-error);
896
+ .tds-toggle-switch-track::before{
897
+ position:absolute;
898
+ top:var(--t-spacing-fourth);
899
+ left:var(--t-spacing-fourth);
900
+ width:var(--tds-toggle-switch-thumb-size);
901
+ height:var(--tds-toggle-switch-thumb-size);
902
+ content:"";
903
+ background-color:#fff;
904
+ border-radius:var(--t-border-radius-round);
905
+ transform:var(--tds-toggle-switch-thumb-transform);
906
+ transition:var(--tds-toggle-switch-thumb-transition);
1022
907
  }
1023
908
 
1024
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1025
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1026
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1027
- }
1028
-
1029
- .tds-radio:has(input:disabled){
1030
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1031
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
909
+ @media (prefers-reduced-motion: reduce){
1032
910
 
1033
- --tds-radio-label-color:var(--t-form-color-disabled);
1034
- --tds-radio-description-color:var(--t-form-color-disabled);
1035
- --tds-radio-cursor:not-allowed;
911
+ .tds-toggle-switch-track{
912
+ --tds-toggle-switch-track-transition:none;
913
+ --tds-toggle-switch-thumb-transition:none;
914
+ }
1036
915
  }
1037
916
 
1038
- .tds-radio:has(input:disabled) input:checked{
1039
- --tds-radio-input-background-color:var(--t-form-background-color);
1040
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1041
- }
1042
-
1043
- .tds-radio-description{
917
+ .tds-toggle-switch-description{
1044
918
  display:flex;
1045
919
  grid-area:2 / 2;
1046
- gap:var(--t-spacing-half);
1047
920
  align-items:flex-start;
1048
921
  margin:0;
1049
- font-size:var(--tds-radio-description-font-size);
1050
- line-height:var(--tds-radio-description-line-height);
1051
- color:var(--tds-radio-description-color);
922
+ font-size:var(--tds-toggle-switch-description-font-size);
923
+ line-height:var(--tds-toggle-switch-description-line-height);
924
+ color:var(--tds-toggle-switch-description-color);
1052
925
  cursor:text;
1053
926
  }
1054
927
 
1055
- .tds-radio--sm{
1056
- --tds-radio-line-height:1.35;
1057
- --tds-radio-input-size:var(--t-element-size-sm);
1058
- --tds-radio-font-size:var(--t-font-size-sm);
1059
- --tds-radio-description-font-size:var(--t-font-size-xs);
1060
- --tds-radio-description-line-height:1.3;
928
+ .tds-toggle-switch--sm{
929
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
930
+ --tds-toggle-switch-line-height:1.35;
931
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
932
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
933
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
934
+ --tds-toggle-switch-description-line-height:1.3;
935
+ }
936
+
937
+ .tds-toggle-switch--hide-label{
938
+ --tds-toggle-switch-display:inline-flex;
1061
939
  }
1062
940
 
1063
941
  .tds-input:has(textarea){
@@ -1128,182 +1006,304 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1128
1006
  --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1129
1007
  }
1130
1008
 
1131
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1132
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1133
- }
1009
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1010
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1011
+ }
1012
+
1013
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1014
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1015
+ }
1016
+
1017
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1018
+ background:var(--tds-input-scrollbar-surface-color);
1019
+ }
1020
+
1021
+ :is(.tds-input textarea)::-webkit-resizer{
1022
+ background:var(--tds-input-resizer-icon) no-repeat;
1023
+ background-position:right bottom;
1024
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1025
+ }
1026
+
1027
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1028
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1029
+ cursor:default;
1030
+ }
1031
+
1032
+ @supports (-moz-appearance: none){
1033
+ :is(.tds-input textarea){
1034
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1035
+ scrollbar-width:thin;
1036
+ }
1037
+
1038
+ @media (hover){
1039
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1040
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1041
+ }
1042
+ }
1043
+ }
1044
+ }
1045
+
1046
+ @layer t-critical{
1047
+ tds-page-header:not(.hydrated){
1048
+ display:none;
1049
+ }
1050
+ }
1051
+
1052
+ @layer t-component{
1053
+ .tds-page-header{
1054
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1055
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1056
+ --tds-page-header-color:var(--t-text-color);
1057
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1058
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1059
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1060
+ --tds-page-header-padding-x:var(--t-spacing-2);
1061
+ --tds-page-header-padding-y:var(--t-spacing-2);
1062
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1063
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1064
+ --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%);
1065
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1066
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1067
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1068
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1069
+ --tds-page-header-nav-item-border-width:1px;
1070
+
1071
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1072
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1073
+
1074
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1075
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1076
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1077
+
1078
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1079
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1080
+
1081
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1082
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1083
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1084
+
1085
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1086
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1087
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1088
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1089
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1090
+ }
1091
+
1092
+ .tds-page-header--profile{
1093
+ --tds-page-header-padding-y:20px;
1094
+ }
1095
+
1096
+ @supports (color: light-dark(#fff, #000)){
1097
+ .tds-page-header{
1098
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1099
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1100
+ }
1101
+ }
1102
+
1103
+ @media (min-width: 600px){
1104
+ .tds-page-header{
1105
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1106
+ --tds-page-header-color:var(--t-text-color-secondary);
1107
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1108
+ --tds-page-header-padding-x:var(--t-spacing-3);
1109
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1110
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1111
+ --tds-page-header-nav-background:transparent;
1112
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1113
+ --tds-page-header-nav-item-border-width:1px;
1114
+ --tds-page-header-nav-item-color:var(--t-text-color);
1115
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1116
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1117
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1118
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1119
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1120
+ }
1121
+ }
1122
+ }
1123
+
1124
+ .tds-page-header{
1125
+ display:flex;
1126
+ flex-direction:column;
1127
+ padding-top:var(--tds-page-header-padding-y);
1128
+ color:var(--tds-page-header-color);
1129
+ background:var(--tds-page-header-background-color);
1130
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1131
+ }
1132
+
1133
+ .tds-page-header:not(.has-nav){
1134
+ padding-bottom:var(--tds-page-header-padding-y);
1135
+ }
1136
+
1137
+ .tds-page-header.inactive{
1138
+ background:var(--tds-page-header-background-color-inactive);
1139
+ }
1140
+
1141
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1142
+ width:100%;
1143
+ }
1144
+
1145
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1146
+ display:flex;
1147
+ flex-flow:row wrap;
1148
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1149
+ align-items:flex-start;
1150
+ justify-content:flex-start;
1151
+ min-width:0;
1152
+ }
1153
+
1154
+ :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{
1155
+ display:flex;
1156
+ gap:var(--tds-page-header-nav-gap);
1157
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1158
+ margin:0 0 -1px;
1159
+ overflow:auto;
1160
+ list-style:none;
1161
+ background:var(--tds-page-header-nav-background);
1162
+ }
1163
+
1164
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1165
+ position:relative;
1166
+ display:inline-flex;
1167
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1168
+ font-size:var(--t-font-size-sm);
1169
+ line-height:22px;
1170
+ color:var(--tds-page-header-nav-item-color);
1171
+ white-space:nowrap;
1172
+ text-decoration:none;
1173
+ -webkit-appearance:none;
1174
+ -moz-appearance:none;
1175
+ appearance:none;
1176
+ cursor:pointer;
1177
+ outline-offset:-2px;
1178
+ background-color:var(--tds-page-header-nav-item-background-color);
1179
+ background-clip:padding-box;
1180
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1181
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1182
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1183
+ }
1184
+
1185
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1186
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1187
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1188
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1189
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1190
+ }
1191
+
1192
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1193
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1194
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1195
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1196
+ }
1134
1197
 
1135
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1136
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1137
- }
1198
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1199
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1200
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1201
+ }
1138
1202
 
1139
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1140
- background:var(--tds-input-scrollbar-surface-color);
1141
- }
1203
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1204
+ color:var(--tds-page-header-nav-item-color-disabled);
1205
+ cursor:not-allowed;
1206
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
+ opacity:1;
1208
+ }
1142
1209
 
1143
- :is(.tds-input textarea)::-webkit-resizer{
1144
- background:var(--tds-input-resizer-icon) no-repeat;
1145
- background-position:right bottom;
1146
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1210
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1211
+ position:relative;
1147
1212
  }
1148
1213
 
1149
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1150
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1151
- cursor:default;
1152
- }
1214
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1215
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1216
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1217
+ }
1153
1218
 
1154
- @supports (-moz-appearance: none){
1155
- :is(.tds-input textarea){
1156
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1157
- scrollbar-width:thin;
1219
+ :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{
1220
+ position:absolute;
1221
+ top:-5px;
1222
+ right:-2px;
1223
+ width:10px;
1224
+ height:10px;
1225
+ content:"";
1226
+ background:var(--tds-page-header-nav-item-indicator-color);
1227
+ border-radius:50%;
1158
1228
  }
1159
1229
 
1160
- @media (hover){
1161
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1162
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1230
+ @media (prefers-reduced-motion: no-preference){
1231
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1232
+ animation:indicator-pulse 1.25s ease infinite;
1163
1233
  }
1164
1234
  }
1165
- }
1166
- }
1167
-
1168
- .tds-toggle-switch{
1169
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1170
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1171
- --tds-toggle-switch-cursor:pointer;
1172
- --tds-toggle-switch-display:inline-grid;
1173
- --tds-toggle-switch-line-height:1.4;
1174
-
1175
- --tds-toggle-switch-label-color:var(--t-form-color);
1176
-
1177
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1178
- --tds-toggle-switch-track-outline:none;
1179
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1180
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1181
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1182
-
1183
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1184
- --tds-toggle-switch-thumb-transform:translateX(0);
1185
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1186
-
1187
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1188
- --tds-toggle-switch-description-line-height:1.35;
1189
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1190
- position:relative;
1191
1235
 
1192
- display:var(--tds-toggle-switch-display);
1193
- grid-template-columns:auto;
1194
- grid-auto-columns:1fr;
1195
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
1196
- -webkit-user-select:none;
1197
- -moz-user-select:none;
1198
- user-select:none;
1236
+ .tds-page-header__title-bar{
1237
+ display:flex;
1238
+ flex-direction:column;
1239
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1240
+ align-items:flex-start;
1241
+ justify-content:space-between;
1242
+ padding:0 var(--tds-page-header-padding-x);
1199
1243
  }
1200
1244
 
1201
- .tds-toggle-switch input[type="checkbox"]{
1202
- position:absolute;
1203
- width:var(--tds-toggle-switch-track-width);
1204
- height:var(--tds-toggle-switch-track-height);
1205
- margin:0;
1206
- -webkit-appearance:none;
1207
- -moz-appearance:none;
1208
- appearance:none;
1209
- cursor:var(--tds-toggle-switch-cursor);
1210
- outline:var(--tds-toggle-switch-track-outline);
1211
- outline-offset:var(--t-focus-ring-offset);
1212
- background-color:transparent;
1213
- border:0;
1214
- border-radius:var(--t-border-radius-round);
1245
+ .tds-page-header--profile > .tds-page-header__title-bar{
1246
+ align-items:center;
1215
1247
  }
1216
1248
 
1217
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1218
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1219
- }
1249
+ .tds-page-header__primary{
1250
+ width:100%;
1251
+ }
1220
1252
 
1221
- .tds-toggle-switch label{
1222
- display:inline-flex;
1223
- grid-area:1 / 2;
1224
- -moz-column-gap:var(--tds-toggle-switch-column-gap);
1225
- column-gap:var(--tds-toggle-switch-column-gap);
1226
- margin-top:-.09375em;
1227
- font-size:var(--tds-toggle-switch-font-size);
1253
+ .tds-page-header__primary h1{
1254
+ margin:0;
1255
+ font-size:var(--tds-page-header-headline-font-size);
1228
1256
  font-weight:var(--t-font-weight-normal);
1229
- line-height:var(--tds-toggle-switch-line-height);
1230
- color:var(--tds-toggle-switch-label-color);
1231
- cursor:var(--tds-toggle-switch-cursor);
1257
+ line-height:32px;
1258
+ color:var(--tds-page-header-headline-color);
1259
+ overflow-wrap:break-word;
1232
1260
  }
1233
1261
 
1234
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1235
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1262
+ @media (min-width: 960px){
1263
+ .tds-page-header__primary{
1264
+ flex:1 1 max-content;
1265
+ width:auto;
1266
+ min-width:0;
1267
+ max-width:100%;
1236
1268
  }
1237
1269
 
1238
- .tds-toggle-switch:has(input:checked){
1239
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1240
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1270
+ .tds-page-header__title-bar,
1271
+ .tds-page-header--profile .tds-page-header__title-bar{
1272
+ flex-flow:row nowrap;
1273
+ row-gap:12px;
1274
+ align-items:flex-start;
1241
1275
  }
1242
-
1243
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1244
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1276
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1277
+ width:auto;
1245
1278
  }
1246
1279
 
1247
- .tds-toggle-switch:has(input:disabled){
1248
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1249
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1250
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1251
- --tds-toggle-switch-cursor:not-allowed;
1252
- }
1253
-
1254
- .tds-toggle-switch-track{
1255
- position:relative;
1256
- flex-shrink:0;
1257
- width:var(--tds-toggle-switch-track-width);
1258
- height:var(--tds-toggle-switch-track-height);
1259
- background-color:var(--tds-toggle-switch-track-background-color);
1260
- border-radius:var(--t-border-radius-round);
1261
- transition:var(--tds-toggle-switch-track-transition);
1280
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1281
+ justify-content:flex-end;
1282
+ }
1262
1283
  }
1263
1284
 
1264
- .tds-toggle-switch-track::before{
1265
- position:absolute;
1266
- top:var(--t-spacing-fourth);
1267
- left:var(--t-spacing-fourth);
1268
- width:var(--tds-toggle-switch-thumb-size);
1269
- height:var(--tds-toggle-switch-thumb-size);
1270
- content:"";
1271
- background-color:#fff;
1272
- border-radius:var(--t-border-radius-round);
1273
- transform:var(--tds-toggle-switch-thumb-transform);
1274
- transition:var(--tds-toggle-switch-thumb-transition);
1275
- }
1276
-
1277
- @media (prefers-reduced-motion: reduce){
1278
-
1279
- .tds-toggle-switch-track{
1280
- --tds-toggle-switch-track-transition:none;
1281
- --tds-toggle-switch-thumb-transition:none;
1285
+ .tds-page-header-phone,
1286
+ .tds-page-header-email{
1287
+ color:var(--tds-page-header-color);
1288
+ white-space:nowrap;
1282
1289
  }
1283
- }
1284
1290
 
1285
- .tds-toggle-switch-description{
1286
- display:flex;
1287
- grid-area:2 / 2;
1288
- align-items:flex-start;
1289
- margin:0;
1290
- font-size:var(--tds-toggle-switch-description-font-size);
1291
- line-height:var(--tds-toggle-switch-description-line-height);
1292
- color:var(--tds-toggle-switch-description-color);
1293
- cursor:text;
1291
+ .tds-page-header-email{
1292
+ max-width:100%;
1293
+ overflow:hidden;
1294
+ text-overflow:ellipsis;
1294
1295
  }
1295
1296
 
1296
- .tds-toggle-switch--sm{
1297
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1298
- --tds-toggle-switch-line-height:1.35;
1299
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1300
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1301
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1302
- --tds-toggle-switch-description-line-height:1.3;
1303
- }
1297
+ @keyframes indicator-pulse{
1298
+ 0%{
1299
+ opacity:.3;
1300
+ transform:scale(.9);
1301
+ }
1304
1302
 
1305
- .tds-toggle-switch--hide-label{
1306
- --tds-toggle-switch-display:inline-flex;
1303
+ 100%{
1304
+ opacity:0;
1305
+ transform:scale(1.75);
1306
+ }
1307
1307
  }
1308
1308
 
1309
1309
  .tds-select{
@@ -3400,18 +3400,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3400
3400
  --tds-checkbox-group-description-line-height:1.3;
3401
3401
  }
3402
3402
 
3403
- .tds-time-field{
3404
- --tds-time-field-border-color:var(--t-form-border-color);
3405
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3406
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3407
- --tds-time-field-background-color:var(--t-form-background-color);
3408
- --tds-time-field-color:var(--t-form-color);
3409
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3410
- --tds-time-field-font-size:var(--t-font-size-md);
3411
- --tds-time-field-min-height:var(--t-container-size-md);
3412
- --tds-time-field-padding-block:6px;
3413
- --tds-time-field-description-color:var(--t-text-color-secondary);
3414
- --tds-time-field-description-invalid-icon-display:none;
3403
+ .tds-combo-box{
3404
+ --tds-combo-box-border-color:var(--t-form-border-color);
3405
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3406
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3407
+ --tds-combo-box-background-color:var(--t-form-background-color);
3408
+ --tds-combo-box-color:var(--t-form-color);
3409
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3410
+ --tds-combo-box-font-size:var(--t-font-size-md);
3411
+ --tds-combo-box-min-height:var(--t-container-size-md);
3412
+ --tds-combo-box-padding-block:6px;
3413
+ --tds-combo-box-button-offset:4px;
3414
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3415
+ --tds-combo-box-description-invalid-icon-display:none;
3415
3416
 
3416
3417
  position:relative;
3417
3418
  display:flex;
@@ -3419,285 +3420,270 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3419
3420
  gap:var(--t-spacing-half);
3420
3421
  }
3421
3422
 
3422
- .tds-time-field[data-required] .tds-time-field-label::after{
3423
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3423
3424
  margin-left:.25ch;
3424
3425
  color:var(--t-text-color-status-error);
3425
3426
  content:"*";
3426
3427
  }
3427
3428
 
3428
- .tds-time-field[data-invalid]{
3429
- --tds-time-field-border-color:var(--t-form-border-color-error);
3430
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3431
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3432
- --tds-time-field-background-color:var(--t-form-background-color-error);
3433
- --tds-time-field-description-color:var(--t-text-color-status-error);
3434
- --tds-time-field-description-invalid-icon-display:inline-block;
3429
+ .tds-combo-box[data-invalid]{
3430
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3431
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3432
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3433
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3434
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3435
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3435
3436
  }
3436
3437
 
3437
- .tds-time-field[data-disabled]{
3438
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3439
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3440
- --tds-time-field-color:var(--t-form-color-disabled);
3441
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3438
+ .tds-combo-box[data-disabled]{
3439
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3440
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3441
+ --tds-combo-box-color:var(--t-form-color-disabled);
3442
3442
  }
3443
3443
 
3444
- .tds-time-field[data-disabled] .tds-time-field-label{
3444
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3445
3445
  color:var(--t-form-color-disabled);
3446
3446
  }
3447
3447
 
3448
- .tds-time-field[data-disabled] .tds-time-field-input{
3448
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3449
3449
  cursor:not-allowed;
3450
3450
  }
3451
3451
 
3452
- .tds-time-field--lg{
3453
- --tds-time-field-min-height:var(--t-container-size-lg);
3454
- --tds-time-field-font-size:var(--t-font-size-lg);
3452
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3453
+ transform:rotate(.5turn);
3454
+ }
3455
+
3456
+ .tds-combo-box--lg{
3457
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3458
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3459
+ --tds-combo-box-button-offset:5px;
3455
3460
  }
3456
3461
 
3457
- .tds-time-field-label{
3462
+ .tds-combo-box-label{
3458
3463
  font-size:var(--t-font-size-md);
3459
3464
  font-weight:var(--t-font-weight-normal);
3460
3465
  color:var(--t-text-color);
3461
3466
  cursor:default;
3462
3467
  }
3463
3468
 
3464
- .tds-time-field-input{
3469
+ .tds-combo-box-field{
3465
3470
  display:flex;
3466
3471
  align-items:center;
3467
3472
  inline-size:100%;
3468
- min-block-size:var(--tds-time-field-min-height);
3469
- padding-block:var(--tds-time-field-padding-block);
3470
- padding-inline:var(--t-spacing-1);
3473
+ min-block-size:var(--tds-combo-box-min-height);
3471
3474
  font-family:inherit;
3472
- font-size:var(--tds-time-field-font-size);
3473
- font-variant-numeric:tabular-nums;
3475
+ font-size:var(--tds-combo-box-font-size);
3474
3476
  line-height:1;
3475
- color:var(--tds-time-field-color);
3476
- cursor:text;
3477
+ color:var(--tds-combo-box-color);
3478
+ -webkit-appearance:none;
3479
+ -moz-appearance:none;
3480
+ appearance:none;
3481
+ cursor:default;
3477
3482
  outline:var(--t-focus-ring-width) solid transparent;
3478
3483
  outline-offset:0;
3479
- background-color:var(--tds-time-field-background-color);
3480
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3484
+ background-color:var(--tds-combo-box-background-color);
3485
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3481
3486
  border-radius:var(--t-form-border-radius);
3482
3487
  }
3483
3488
 
3484
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3485
- border-color:var(--tds-time-field-border-color-hover);
3489
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3490
+ border-color:var(--tds-combo-box-border-color-hover);
3486
3491
  }
3487
3492
 
3488
- .tds-time-field-input[data-focus-within]{
3493
+ .tds-combo-box-field[data-focus-within]{
3489
3494
  outline-color:var(--t-focus-ring-color);
3490
3495
  outline-offset:var(--t-focus-ring-offset);
3491
- border-color:var(--tds-time-field-border-color-active);
3496
+ border-color:var(--tds-combo-box-border-color-active);
3492
3497
  }
3493
3498
 
3494
- .tds-time-field-input[data-readonly]{
3495
- color:var(--t-form-color-readonly);
3496
- background-color:var(--t-form-background-color-readonly);
3497
- border-color:var(--t-form-border-color-readonly);
3499
+ .tds-combo-box-field:has([readonly]){
3500
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3501
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3498
3502
  }
3499
3503
 
3500
- .tds-time-field-input[data-readonly][data-hovered]{
3501
- border-color:var(--t-form-border-color-readonly);
3502
- }
3503
-
3504
- .tds-time-field-input[data-readonly][data-focus-within]{
3505
- outline-color:var(--t-focus-ring-color);
3506
- outline-offset:var(--t-focus-ring-offset);
3504
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3507
3505
  border-color:var(--t-form-border-color-hover);
3508
3506
  }
3509
3507
 
3510
- .tds-time-field-segment{
3511
- padding-inline:1px;
3512
- font-variant-numeric:tabular-nums;
3513
- cursor:text;
3514
- caret-color:transparent;
3515
- border-radius:var(--t-border-radius-sm);
3508
+ .tds-combo-box-input{
3509
+ display:flex;
3510
+ flex:1;
3511
+ align-items:center;
3512
+ padding-block:var(--tds-combo-box-padding-block);
3513
+ padding-inline-start:var(--t-spacing-1);
3514
+ font-family:inherit;
3515
+ font-size:inherit;
3516
+ color:inherit;
3517
+ outline:0;
3518
+ background:transparent;
3519
+ border:0;
3516
3520
  }
3517
3521
 
3518
- .tds-time-field-segment[data-placeholder]{
3519
- color:var(--tds-time-field-placeholder-color);
3522
+ .tds-combo-box-input::-moz-placeholder{
3523
+ color:var(--tds-combo-box-placeholder-color);
3524
+ -moz-user-select:none;
3525
+ user-select:none;
3520
3526
  }
3521
3527
 
3522
- .tds-time-field-segment[data-focused]{
3523
- color:var(--t-text-color-inverted);
3524
- outline:0;
3525
- background:var(--t-fill-color-interaction);
3528
+ .tds-combo-box-input::placeholder{
3529
+ color:var(--tds-combo-box-placeholder-color);
3530
+ -webkit-user-select:none;
3531
+ -moz-user-select:none;
3532
+ user-select:none;
3526
3533
  }
3527
3534
 
3528
- .tds-time-field-segment-separator{
3529
- padding-inline:0;
3530
- color:var(--tds-time-field-placeholder-color);
3535
+ .tds-combo-box-button{
3536
+ flex-shrink:0;
3537
+ align-self:center;
3538
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3539
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3540
+ padding:0;
3541
+ margin-inline-end:var(--tds-combo-box-button-offset);
3531
3542
  }
3532
3543
 
3533
- .tds-time-field-description{
3534
- display:flex;
3535
- gap:var(--t-spacing-half);
3536
- align-items:flex-start;
3537
- margin:0;
3538
- font-size:var(--t-font-size-sm);
3539
- line-height:1.35;
3540
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3541
- cursor:text;
3542
- }
3544
+ .tds-combo-box-button > svg{
3545
+ inline-size:var(--tds-combo-box-font-size);
3546
+ block-size:var(--tds-combo-box-font-size);
3547
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3548
+ }
3543
3549
 
3544
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3545
- display:var(--tds-time-field-description-invalid-icon-display, none);
3546
- flex-shrink:0;
3547
- margin-block-start:calc(.5lh - .5em);
3548
- line-height:1.35;
3550
+ .tds-combo-box-button:not(.tds-btn){
3551
+ display:inline-flex;
3552
+ align-items:center;
3553
+ justify-content:center;
3554
+ inline-size:auto;
3555
+ block-size:auto;
3556
+ margin-inline-end:.75em;
3557
+ color:var(--t-icon-color);
3558
+ cursor:default;
3559
+ background:transparent;
3560
+ border:0;
3549
3561
  }
3550
3562
 
3551
- .tds-number-stepper{
3552
- --tds-number-stepper-border-color:var(--t-form-border-color);
3553
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3554
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3555
- --tds-number-stepper-background-color:var(--t-form-background-color);
3556
- --tds-number-stepper-color:var(--t-form-color);
3557
- --tds-number-stepper-font-size:var(--t-font-size-md);
3558
- --tds-number-stepper-min-height:var(--t-container-size-md);
3559
- --tds-number-stepper-padding-block:6px;
3560
- --tds-number-stepper-button-offset:4px;
3561
- --tds-number-stepper-button-gap:2px;
3562
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
3563
- --tds-number-stepper-description-invalid-icon-display:none;
3563
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3564
+ outline:0;
3565
+ }
3564
3566
 
3565
- position:relative;
3566
- display:flex;
3567
- flex-direction:column;
3568
- gap:var(--t-spacing-half);
3567
+ .tds-combo-box-popover{
3568
+ width:var(--trigger-width);
3569
+ max-block-size:inherit;
3570
+ padding:var(--t-spacing-1);
3571
+ overflow:auto;
3572
+ outline:0;
3573
+ scrollbar-color:#0004 #0000;
3574
+ scrollbar-width:thin;
3575
+ background:var(--t-surface-color-card);
3576
+ background-clip:padding-box;
3577
+ border:1px solid var(--t-border-color);
3578
+ border-radius:var(--t-border-radius);
3579
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3569
3580
  }
3570
3581
 
3571
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3572
- margin-left:.25ch;
3573
- color:var(--t-text-color-status-error);
3574
- content:"*";
3582
+ .tds-combo-box-popover[data-entering]{
3583
+ animation:tds-combo-box-popover-enter 160ms ease;
3575
3584
  }
3576
3585
 
3577
- .tds-number-stepper[data-invalid]{
3578
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
3579
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3580
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3581
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
3582
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
3583
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3586
+ .tds-combo-box-popover[data-exiting]{
3587
+ animation:tds-combo-box-popover-exit 130ms ease;
3584
3588
  }
3585
3589
 
3586
- .tds-number-stepper[data-disabled]{
3587
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3588
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3589
- --tds-number-stepper-color:var(--t-form-color-disabled);
3590
+ @keyframes tds-combo-box-popover-enter{
3591
+ from{
3592
+ opacity:0;
3593
+ transform:translateY(-8px);
3590
3594
  }
3595
+ }
3591
3596
 
3592
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3593
- cursor:not-allowed;
3597
+ @keyframes tds-combo-box-popover-exit{
3598
+ to{
3599
+ opacity:0;
3600
+ transform:translateY(-8px);
3601
+ }
3602
+ }
3603
+
3604
+ @media (prefers-reduced-motion: reduce){
3605
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3606
+ animation:none;
3594
3607
  }
3595
3608
 
3596
- .tds-number-stepper--lg{
3597
- --tds-number-stepper-min-height:var(--t-container-size-lg);
3598
- --tds-number-stepper-font-size:var(--t-font-size-lg);
3599
- --tds-number-stepper-button-offset:5px;
3600
- --tds-number-stepper-button-gap:4px;
3609
+ .tds-combo-box-button > svg{
3610
+ transition:none;
3611
+ }
3601
3612
  }
3602
3613
 
3603
- .tds-number-stepper-label{
3604
- font-size:var(--t-font-size-md);
3605
- font-weight:var(--t-font-weight-normal);
3606
- color:var(--t-text-color);
3607
- cursor:default;
3614
+ .tds-combo-box-list{
3615
+ padding:0;
3616
+ margin:0;
3608
3617
  }
3609
3618
 
3610
- .tds-number-stepper-field{
3611
- display:flex;
3612
- gap:var(--tds-number-stepper-button-gap);
3613
- align-items:center;
3614
- inline-size:100%;
3615
- min-block-size:var(--tds-number-stepper-min-height);
3616
- font-family:inherit;
3617
- font-size:var(--tds-number-stepper-font-size);
3618
- line-height:1;
3619
- color:var(--tds-number-stepper-color);
3620
- -webkit-appearance:none;
3621
- -moz-appearance:none;
3622
- appearance:none;
3619
+ .tds-combo-box-list-item{
3620
+ display:block;
3621
+ padding-block:var(--t-spacing-1);
3622
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3623
+ overflow:hidden;
3624
+ text-overflow:ellipsis;
3625
+ font-size:1rem;
3626
+ color:var(--t-text-color);
3627
+ white-space:nowrap;
3623
3628
  cursor:default;
3624
- outline:var(--t-focus-ring-width) solid transparent;
3625
- outline-offset:0;
3626
- background-color:var(--tds-number-stepper-background-color);
3627
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3628
- border-radius:var(--t-form-border-radius);
3629
+ outline-offset:-1px;
3630
+ border-radius:var(--t-border-radius);
3629
3631
  }
3630
3632
 
3631
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3632
- border-color:var(--tds-number-stepper-border-color-hover);
3633
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3634
+ background:var(--t-fill-color-neutral-070);
3633
3635
  }
3634
3636
 
3635
- .tds-number-stepper-field[data-focus-within]{
3636
- outline-color:var(--t-focus-ring-color);
3637
- outline-offset:var(--t-focus-ring-offset);
3638
- border-color:var(--tds-number-stepper-border-color-active);
3637
+ .tds-combo-box-list-item[data-selected]{
3638
+ background:var(--t-fill-color-button-interaction-ghost-active);
3639
3639
  }
3640
3640
 
3641
- .tds-number-stepper-field:has([readonly]){
3642
- --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3643
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3644
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3641
+ .tds-combo-box-list-item[data-focus-visible]{
3642
+ outline:var(--t-focus-ring-outline);
3643
+ outline-offset:-1px;
3645
3644
  }
3646
3645
 
3647
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3648
- border-color:var(--t-form-border-color-hover);
3649
- }
3646
+ .tds-combo-box-list-item[data-disabled]{
3647
+ color:var(--t-form-color-disabled);
3648
+ cursor:not-allowed;
3649
+ }
3650
3650
 
3651
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3652
- display:none;
3651
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3652
+ background:transparent;
3653
3653
  }
3654
3654
 
3655
- .tds-number-stepper-input{
3656
- display:flex;
3657
- flex:1;
3658
- align-items:center;
3659
- min-inline-size:0;
3660
- padding-block:var(--tds-number-stepper-padding-block);
3661
- padding-inline:var(--t-spacing-1);
3662
- font-family:inherit;
3663
- font-size:inherit;
3664
- color:inherit;
3665
- outline:0;
3666
- background:transparent;
3667
- border:0;
3655
+ .tds-combo-box-empty-state{
3656
+ padding-block:var(--t-spacing-1);
3657
+ padding-inline:var(--t-spacing-2);
3658
+ font-size:var(--t-font-size-md);
3659
+ color:var(--t-text-color-secondary);
3668
3660
  }
3669
3661
 
3670
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3671
- margin:0;
3672
- -webkit-appearance:none;
3673
- appearance:none;
3662
+ .tds-combo-box-list-section:not(:first-child){
3663
+ margin-block-start:var(--t-spacing-half);
3674
3664
  }
3675
3665
 
3676
- .tds-number-stepper-button{
3677
- flex-shrink:0;
3678
- align-self:center;
3679
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3680
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3681
- padding:0;
3666
+ .tds-combo-box-section-header{
3667
+ padding-block:var(--t-spacing-1);
3668
+ padding-inline:var(--t-spacing-1);
3669
+ font-size:var(--t-font-size-sm);
3670
+ font-weight:var(--t-font-weight-semibold);
3671
+ color:var(--t-text-color-secondary);
3682
3672
  }
3683
3673
 
3684
- .tds-number-stepper-button:last-of-type{
3685
- margin-inline-end:var(--tds-number-stepper-button-offset);
3686
- }
3687
-
3688
- .tds-number-stepper-description{
3674
+ .tds-combo-box-description{
3689
3675
  display:flex;
3690
3676
  gap:var(--t-spacing-half);
3691
3677
  align-items:flex-start;
3692
3678
  margin:0;
3693
3679
  font-size:var(--t-font-size-sm);
3694
3680
  line-height:1.35;
3695
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3681
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3696
3682
  cursor:text;
3697
3683
  }
3698
3684
 
3699
- .tds-number-stepper-description-invalid-icon{
3700
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3685
+ .tds-combo-box-description-invalid-icon{
3686
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3701
3687
  flex-shrink:0;
3702
3688
  margin-block-start:calc(.5lh - .5em);
3703
3689
  line-height:1.35;
@@ -4113,19 +4099,167 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4113
4099
  color:var(--t-text-color-secondary);
4114
4100
  }
4115
4101
 
4116
- .tds-combo-box{
4117
- --tds-combo-box-border-color:var(--t-form-border-color);
4118
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
4119
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
4120
- --tds-combo-box-background-color:var(--t-form-background-color);
4121
- --tds-combo-box-color:var(--t-form-color);
4122
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
4123
- --tds-combo-box-font-size:var(--t-font-size-md);
4124
- --tds-combo-box-min-height:var(--t-container-size-md);
4125
- --tds-combo-box-padding-block:6px;
4126
- --tds-combo-box-button-offset:4px;
4127
- --tds-combo-box-description-color:var(--t-text-color-secondary);
4128
- --tds-combo-box-description-invalid-icon-display:none;
4102
+ .tds-time-field{
4103
+ --tds-time-field-border-color:var(--t-form-border-color);
4104
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4105
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4106
+ --tds-time-field-background-color:var(--t-form-background-color);
4107
+ --tds-time-field-color:var(--t-form-color);
4108
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4109
+ --tds-time-field-font-size:var(--t-font-size-md);
4110
+ --tds-time-field-min-height:var(--t-container-size-md);
4111
+ --tds-time-field-padding-block:6px;
4112
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4113
+ --tds-time-field-description-invalid-icon-display:none;
4114
+
4115
+ position:relative;
4116
+ display:flex;
4117
+ flex-direction:column;
4118
+ gap:var(--t-spacing-half);
4119
+ }
4120
+
4121
+ .tds-time-field[data-required] .tds-time-field-label::after{
4122
+ margin-left:.25ch;
4123
+ color:var(--t-text-color-status-error);
4124
+ content:"*";
4125
+ }
4126
+
4127
+ .tds-time-field[data-invalid]{
4128
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4129
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4130
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4131
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4132
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4133
+ --tds-time-field-description-invalid-icon-display:inline-block;
4134
+ }
4135
+
4136
+ .tds-time-field[data-disabled]{
4137
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4138
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4139
+ --tds-time-field-color:var(--t-form-color-disabled);
4140
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4141
+ }
4142
+
4143
+ .tds-time-field[data-disabled] .tds-time-field-label{
4144
+ color:var(--t-form-color-disabled);
4145
+ }
4146
+
4147
+ .tds-time-field[data-disabled] .tds-time-field-input{
4148
+ cursor:not-allowed;
4149
+ }
4150
+
4151
+ .tds-time-field--lg{
4152
+ --tds-time-field-min-height:var(--t-container-size-lg);
4153
+ --tds-time-field-font-size:var(--t-font-size-lg);
4154
+ }
4155
+
4156
+ .tds-time-field-label{
4157
+ font-size:var(--t-font-size-md);
4158
+ font-weight:var(--t-font-weight-normal);
4159
+ color:var(--t-text-color);
4160
+ cursor:default;
4161
+ }
4162
+
4163
+ .tds-time-field-input{
4164
+ display:flex;
4165
+ align-items:center;
4166
+ inline-size:100%;
4167
+ min-block-size:var(--tds-time-field-min-height);
4168
+ padding-block:var(--tds-time-field-padding-block);
4169
+ padding-inline:var(--t-spacing-1);
4170
+ font-family:inherit;
4171
+ font-size:var(--tds-time-field-font-size);
4172
+ font-variant-numeric:tabular-nums;
4173
+ line-height:1;
4174
+ color:var(--tds-time-field-color);
4175
+ cursor:text;
4176
+ outline:var(--t-focus-ring-width) solid transparent;
4177
+ outline-offset:0;
4178
+ background-color:var(--tds-time-field-background-color);
4179
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4180
+ border-radius:var(--t-form-border-radius);
4181
+ }
4182
+
4183
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4184
+ border-color:var(--tds-time-field-border-color-hover);
4185
+ }
4186
+
4187
+ .tds-time-field-input[data-focus-within]{
4188
+ outline-color:var(--t-focus-ring-color);
4189
+ outline-offset:var(--t-focus-ring-offset);
4190
+ border-color:var(--tds-time-field-border-color-active);
4191
+ }
4192
+
4193
+ .tds-time-field-input[data-readonly]{
4194
+ color:var(--t-form-color-readonly);
4195
+ background-color:var(--t-form-background-color-readonly);
4196
+ border-color:var(--t-form-border-color-readonly);
4197
+ }
4198
+
4199
+ .tds-time-field-input[data-readonly][data-hovered]{
4200
+ border-color:var(--t-form-border-color-readonly);
4201
+ }
4202
+
4203
+ .tds-time-field-input[data-readonly][data-focus-within]{
4204
+ outline-color:var(--t-focus-ring-color);
4205
+ outline-offset:var(--t-focus-ring-offset);
4206
+ border-color:var(--t-form-border-color-hover);
4207
+ }
4208
+
4209
+ .tds-time-field-segment{
4210
+ padding-inline:1px;
4211
+ font-variant-numeric:tabular-nums;
4212
+ cursor:text;
4213
+ caret-color:transparent;
4214
+ border-radius:var(--t-border-radius-sm);
4215
+ }
4216
+
4217
+ .tds-time-field-segment[data-placeholder]{
4218
+ color:var(--tds-time-field-placeholder-color);
4219
+ }
4220
+
4221
+ .tds-time-field-segment[data-focused]{
4222
+ color:var(--t-text-color-inverted);
4223
+ outline:0;
4224
+ background:var(--t-fill-color-interaction);
4225
+ }
4226
+
4227
+ .tds-time-field-segment-separator{
4228
+ padding-inline:0;
4229
+ color:var(--tds-time-field-placeholder-color);
4230
+ }
4231
+
4232
+ .tds-time-field-description{
4233
+ display:flex;
4234
+ gap:var(--t-spacing-half);
4235
+ align-items:flex-start;
4236
+ margin:0;
4237
+ font-size:var(--t-font-size-sm);
4238
+ line-height:1.35;
4239
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4240
+ cursor:text;
4241
+ }
4242
+
4243
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4244
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4245
+ flex-shrink:0;
4246
+ margin-block-start:calc(.5lh - .5em);
4247
+ line-height:1.35;
4248
+ }
4249
+
4250
+ .tds-number-stepper{
4251
+ --tds-number-stepper-border-color:var(--t-form-border-color);
4252
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4253
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4254
+ --tds-number-stepper-background-color:var(--t-form-background-color);
4255
+ --tds-number-stepper-color:var(--t-form-color);
4256
+ --tds-number-stepper-font-size:var(--t-font-size-md);
4257
+ --tds-number-stepper-min-height:var(--t-container-size-md);
4258
+ --tds-number-stepper-padding-block:6px;
4259
+ --tds-number-stepper-button-offset:4px;
4260
+ --tds-number-stepper-button-gap:2px;
4261
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
4262
+ --tds-number-stepper-description-invalid-icon-display:none;
4129
4263
 
4130
4264
  position:relative;
4131
4265
  display:flex;
@@ -4133,97 +4267,97 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4133
4267
  gap:var(--t-spacing-half);
4134
4268
  }
4135
4269
 
4136
- .tds-combo-box[data-required] .tds-combo-box-label::after{
4270
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4137
4271
  margin-left:.25ch;
4138
4272
  color:var(--t-text-color-status-error);
4139
4273
  content:"*";
4140
4274
  }
4141
4275
 
4142
- .tds-combo-box[data-invalid]{
4143
- --tds-combo-box-border-color:var(--t-form-border-color-error);
4144
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
4145
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
4146
- --tds-combo-box-background-color:var(--t-form-background-color-error);
4147
- --tds-combo-box-description-color:var(--t-text-color-status-error);
4148
- --tds-combo-box-description-invalid-icon-display:inline-block;
4276
+ .tds-number-stepper[data-invalid]{
4277
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
4278
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4279
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4280
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
4281
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
4282
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
4149
4283
  }
4150
4284
 
4151
- .tds-combo-box[data-disabled]{
4152
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
4153
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
4154
- --tds-combo-box-color:var(--t-form-color-disabled);
4285
+ .tds-number-stepper[data-disabled]{
4286
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4287
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4288
+ --tds-number-stepper-color:var(--t-form-color-disabled);
4155
4289
  }
4156
4290
 
4157
- .tds-combo-box[data-disabled] .tds-combo-box-label{
4158
- color:var(--t-form-color-disabled);
4159
- }
4160
-
4161
- .tds-combo-box[data-disabled] .tds-combo-box-field{
4291
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4162
4292
  cursor:not-allowed;
4163
4293
  }
4164
4294
 
4165
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
4166
- transform:rotate(.5turn);
4167
- }
4168
-
4169
- .tds-combo-box--lg{
4170
- --tds-combo-box-min-height:var(--t-container-size-lg);
4171
- --tds-combo-box-font-size:var(--t-font-size-lg);
4172
- --tds-combo-box-button-offset:5px;
4295
+ .tds-number-stepper--lg{
4296
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
4297
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
4298
+ --tds-number-stepper-button-offset:5px;
4299
+ --tds-number-stepper-button-gap:4px;
4173
4300
  }
4174
4301
 
4175
- .tds-combo-box-label{
4302
+ .tds-number-stepper-label{
4176
4303
  font-size:var(--t-font-size-md);
4177
4304
  font-weight:var(--t-font-weight-normal);
4178
4305
  color:var(--t-text-color);
4179
4306
  cursor:default;
4180
4307
  }
4181
4308
 
4182
- .tds-combo-box-field{
4309
+ .tds-number-stepper-field{
4183
4310
  display:flex;
4311
+ gap:var(--tds-number-stepper-button-gap);
4184
4312
  align-items:center;
4185
4313
  inline-size:100%;
4186
- min-block-size:var(--tds-combo-box-min-height);
4314
+ min-block-size:var(--tds-number-stepper-min-height);
4187
4315
  font-family:inherit;
4188
- font-size:var(--tds-combo-box-font-size);
4316
+ font-size:var(--tds-number-stepper-font-size);
4189
4317
  line-height:1;
4190
- color:var(--tds-combo-box-color);
4318
+ color:var(--tds-number-stepper-color);
4191
4319
  -webkit-appearance:none;
4192
4320
  -moz-appearance:none;
4193
4321
  appearance:none;
4194
4322
  cursor:default;
4195
4323
  outline:var(--t-focus-ring-width) solid transparent;
4196
4324
  outline-offset:0;
4197
- background-color:var(--tds-combo-box-background-color);
4198
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
4325
+ background-color:var(--tds-number-stepper-background-color);
4326
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4199
4327
  border-radius:var(--t-form-border-radius);
4200
4328
  }
4201
4329
 
4202
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4203
- border-color:var(--tds-combo-box-border-color-hover);
4330
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4331
+ border-color:var(--tds-number-stepper-border-color-hover);
4204
4332
  }
4205
4333
 
4206
- .tds-combo-box-field[data-focus-within]{
4334
+ .tds-number-stepper-field[data-focus-within]{
4207
4335
  outline-color:var(--t-focus-ring-color);
4208
4336
  outline-offset:var(--t-focus-ring-offset);
4209
- border-color:var(--tds-combo-box-border-color-active);
4337
+ border-color:var(--tds-number-stepper-border-color-active);
4210
4338
  }
4211
4339
 
4212
- .tds-combo-box-field:has([readonly]){
4213
- --tds-input-border-color:var(--t-form-border-color-readonly);
4214
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
4340
+ .tds-number-stepper-field:has([readonly]){
4341
+ --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
4342
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
4343
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4215
4344
  }
4216
4345
 
4217
- .tds-combo-box-field[data-focus-within]:has([readonly]){
4346
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
4218
4347
  border-color:var(--t-form-border-color-hover);
4219
4348
  }
4220
4349
 
4221
- .tds-combo-box-input{
4350
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
4351
+ display:none;
4352
+ }
4353
+
4354
+ .tds-number-stepper-input{
4222
4355
  display:flex;
4223
4356
  flex:1;
4224
4357
  align-items:center;
4225
- padding-block:var(--tds-combo-box-padding-block);
4226
- padding-inline-start:var(--t-spacing-1);
4358
+ min-inline-size:0;
4359
+ padding-block:var(--tds-number-stepper-padding-block);
4360
+ padding-inline:var(--t-spacing-1);
4227
4361
  font-family:inherit;
4228
4362
  font-size:inherit;
4229
4363
  color:inherit;
@@ -4232,171 +4366,37 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4232
4366
  border:0;
4233
4367
  }
4234
4368
 
4235
- .tds-combo-box-input::-moz-placeholder{
4236
- color:var(--tds-combo-box-placeholder-color);
4237
- -moz-user-select:none;
4238
- user-select:none;
4239
- }
4240
-
4241
- .tds-combo-box-input::placeholder{
4242
- color:var(--tds-combo-box-placeholder-color);
4243
- -webkit-user-select:none;
4244
- -moz-user-select:none;
4245
- user-select:none;
4369
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4370
+ margin:0;
4371
+ -webkit-appearance:none;
4372
+ appearance:none;
4246
4373
  }
4247
4374
 
4248
- .tds-combo-box-button{
4375
+ .tds-number-stepper-button{
4249
4376
  flex-shrink:0;
4250
4377
  align-self:center;
4251
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4252
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4253
- padding:0;
4254
- margin-inline-end:var(--tds-combo-box-button-offset);
4255
- }
4256
-
4257
- .tds-combo-box-button > svg{
4258
- inline-size:var(--tds-combo-box-font-size);
4259
- block-size:var(--tds-combo-box-font-size);
4260
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
4261
- }
4262
-
4263
- .tds-combo-box-button:not(.tds-btn){
4264
- display:inline-flex;
4265
- align-items:center;
4266
- justify-content:center;
4267
- inline-size:auto;
4268
- block-size:auto;
4269
- margin-inline-end:.75em;
4270
- color:var(--t-icon-color);
4271
- cursor:default;
4272
- background:transparent;
4273
- border:0;
4274
- }
4275
-
4276
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
4277
- outline:0;
4278
- }
4279
-
4280
- .tds-combo-box-popover{
4281
- width:var(--trigger-width);
4282
- max-block-size:inherit;
4283
- padding:var(--t-spacing-1);
4284
- overflow:auto;
4285
- outline:0;
4286
- scrollbar-color:#0004 #0000;
4287
- scrollbar-width:thin;
4288
- background:var(--t-surface-color-card);
4289
- background-clip:padding-box;
4290
- border:1px solid var(--t-border-color);
4291
- border-radius:var(--t-border-radius);
4292
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4293
- }
4294
-
4295
- .tds-combo-box-popover[data-entering]{
4296
- animation:tds-combo-box-popover-enter 160ms ease;
4297
- }
4298
-
4299
- .tds-combo-box-popover[data-exiting]{
4300
- animation:tds-combo-box-popover-exit 130ms ease;
4301
- }
4302
-
4303
- @keyframes tds-combo-box-popover-enter{
4304
- from{
4305
- opacity:0;
4306
- transform:translateY(-8px);
4307
- }
4308
- }
4309
-
4310
- @keyframes tds-combo-box-popover-exit{
4311
- to{
4312
- opacity:0;
4313
- transform:translateY(-8px);
4314
- }
4315
- }
4316
-
4317
- @media (prefers-reduced-motion: reduce){
4318
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
4319
- animation:none;
4320
- }
4321
-
4322
- .tds-combo-box-button > svg{
4323
- transition:none;
4324
- }
4325
- }
4326
-
4327
- .tds-combo-box-list{
4378
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4379
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4328
4380
  padding:0;
4329
- margin:0;
4330
- }
4331
-
4332
- .tds-combo-box-list-item{
4333
- display:block;
4334
- padding-block:var(--t-spacing-1);
4335
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4336
- overflow:hidden;
4337
- text-overflow:ellipsis;
4338
- font-size:1rem;
4339
- color:var(--t-text-color);
4340
- white-space:nowrap;
4341
- cursor:default;
4342
- outline-offset:-1px;
4343
- border-radius:var(--t-border-radius);
4344
- }
4345
-
4346
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
4347
- background:var(--t-fill-color-neutral-070);
4348
- }
4349
-
4350
- .tds-combo-box-list-item[data-selected]{
4351
- background:var(--t-fill-color-button-interaction-ghost-active);
4352
- }
4353
-
4354
- .tds-combo-box-list-item[data-focus-visible]{
4355
- outline:var(--t-focus-ring-outline);
4356
- outline-offset:-1px;
4357
- }
4358
-
4359
- .tds-combo-box-list-item[data-disabled]{
4360
- color:var(--t-form-color-disabled);
4361
- cursor:not-allowed;
4362
- }
4363
-
4364
- .tds-combo-box-list-item[data-disabled][data-hovered]{
4365
- background:transparent;
4366
- }
4367
-
4368
- .tds-combo-box-empty-state{
4369
- padding-block:var(--t-spacing-1);
4370
- padding-inline:var(--t-spacing-2);
4371
- font-size:var(--t-font-size-md);
4372
- color:var(--t-text-color-secondary);
4373
4381
  }
4374
4382
 
4375
- .tds-combo-box-list-section:not(:first-child){
4376
- margin-block-start:var(--t-spacing-half);
4383
+ .tds-number-stepper-button:last-of-type{
4384
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4377
4385
  }
4378
4386
 
4379
- .tds-combo-box-section-header{
4380
- padding-block:var(--t-spacing-1);
4381
- padding-inline:var(--t-spacing-1);
4382
- font-size:var(--t-font-size-sm);
4383
- font-weight:var(--t-font-weight-semibold);
4384
- color:var(--t-text-color-secondary);
4385
- }
4386
-
4387
- .tds-combo-box-description{
4387
+ .tds-number-stepper-description{
4388
4388
  display:flex;
4389
4389
  gap:var(--t-spacing-half);
4390
4390
  align-items:flex-start;
4391
4391
  margin:0;
4392
4392
  font-size:var(--t-font-size-sm);
4393
4393
  line-height:1.35;
4394
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4394
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4395
4395
  cursor:text;
4396
4396
  }
4397
4397
 
4398
- .tds-combo-box-description-invalid-icon{
4399
- display:var(--tds-combo-box-description-invalid-icon-display, none);
4398
+ .tds-number-stepper-description-invalid-icon{
4399
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4400
4400
  flex-shrink:0;
4401
4401
  margin-block-start:calc(.5lh - .5em);
4402
4402
  line-height:1.35;