@planningcenter/tapestry 3.2.1-rc.0 → 3.2.1-rc.1

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