@planningcenter/tapestry 3.2.3-rc.5 → 3.2.3-rc.6

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 +851 -851
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +851 -851
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,844 +1,931 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
1
+
2
+ @media (prefers-reduced-motion: no-preference){
3
+
4
+ :root{
5
+ interpolate-size:allow-keywords;
5
6
  }
7
+ }
6
8
 
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
9
+ @layer tds-component{
10
+ tds-sidenav,
11
+ .tds-sidenav{
12
+ --tds-sidenav-indent:12px;
13
+ --tds-sidenav-item-depth:0;
25
14
 
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
15
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
28
16
 
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
17
+ --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
+ --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
+ --tds-sidenav-collapse-closed-opacity:0;
20
+ --tds-sidenav-collapse-open-opacity:1;
21
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
+ --tds-sidenav-collapse-open-transform:translateY(0);
32
23
 
33
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
24
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
35
28
 
36
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
29
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
+ --tds-sidenav-item-nested-background-selected:transparent;
39
32
 
40
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
45
- }
33
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
46
36
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
37
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
49
39
  }
50
40
 
51
- @supports (color: light-dark(#fff, #000)){
52
- .tds-page-header{
53
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
41
+ @media (prefers-reduced-motion: reduce){
42
+ tds-sidenav,
43
+ .tds-sidenav{
44
+ --tds-sidenav-collapse-transition-enter:none;
45
+ --tds-sidenav-collapse-transition-exit:none;
46
+ --tds-sidenav-collapse-closed-transform:none;
47
+ --tds-sidenav-collapse-open-transform:none;
48
+ }
55
49
  }
50
+
51
+ .tds-sidenav--theme-gray{
52
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
56
57
  }
58
+ }
57
59
 
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
- }
60
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
+ display:flex;
62
+ }
63
+
64
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
+ flex-direction:column;
66
+ gap:var(--t-spacing-half);
67
+ width:100%;
76
68
  }
69
+
70
+ .tds-sidenav-section-list{
71
+ width:100%;
72
+ padding:0;
73
+ margin:0;
74
+ list-style:none;
77
75
  }
78
76
 
79
- .tds-page-header{
77
+ .tds-sidenav-section-header{
80
78
  display:flex;
81
- flex-direction:column;
82
- padding-top:var(--tds-page-header-padding-y);
83
- color:var(--tds-page-header-color);
84
- background:var(--tds-page-header-background-color);
85
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
79
+ align-items:baseline;
80
+ justify-content:space-between;
81
+ padding-top:var(--t-spacing-2);
86
82
  }
87
83
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
84
+ .tds-sidenav-section-header h2{
85
+ margin:0;
86
+ font-size:var(--t-font-size-sm);
87
+ font-weight:var(--t-font-weight-semibold);
88
+ line-height:1.35;
89
+ color:var(--t-text-color-secondary);
90
+ text-transform:uppercase;
90
91
  }
91
92
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
93
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
+ padding-top:0;
94
95
  }
95
96
 
96
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
- width:100%;
97
+ .tds-sidenav-section-header [slot="label-actions"]{
98
+ display:flex;
99
+ gap:var(--t-spacing-half);
100
+ align-items:center;
98
101
  }
99
102
 
100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
103
+ .tds-sidenav-section [slot="section-actions"]{
104
+ display:flex;
105
+ gap:12px;
106
+ align-items:center;
107
+ min-height:42px;
108
+ padding:var(--t-spacing-1) 0;
109
+ }
110
+
111
+ .tds-sidenav-section-list,
112
+ .tds-sidenav-item{
113
+ width:100%;
114
+ padding:0;
115
+ margin:0;
116
+ }
117
+
118
+ .tds-sidenav-item :is(a,button){
119
+ position:relative;
101
120
  display:flex;
102
- flex-flow:row wrap;
103
- gap:var(--t-spacing-half) var(--t-spacing-1);
104
- align-items:flex-start;
105
- justify-content:flex-start;
106
- min-width:0;
121
+ gap:12px;
122
+ align-items:center;
123
+ width:100%;
124
+ padding:12px;
125
+ overflow:hidden;
126
+ font-size:var(--t-font-size-sm);
127
+ line-height:18px;
128
+ color:var(--t-text-color-headline);
129
+ white-space:nowrap;
130
+ text-decoration:none;
131
+ -webkit-appearance:none;
132
+ -moz-appearance:none;
133
+ appearance:none;
134
+ cursor:pointer;
135
+ background-color:var(--tds-sidenav-item-background, transparent);
136
+ border:0;
137
+ border-radius:var(--t-border-radius);
138
+ transition:var(--tds-sidenav-item-transition);
107
139
  }
108
140
 
109
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
- display:flex;
111
- gap:var(--tds-page-header-nav-gap);
112
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
- margin:0 0 -1px;
114
- overflow:auto;
115
- list-style:none;
116
- background:var(--tds-page-header-nav-background);
141
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
+ display:block;
143
+ flex:1;
144
+ overflow:hidden;
145
+ text-overflow:ellipsis;
146
+ text-align:left;
147
+ white-space:nowrap;
117
148
  }
118
149
 
119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
- position:relative;
121
- display:inline-flex;
122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
- font-size:var(--t-font-size-sm);
124
- line-height:22px;
125
- color:var(--tds-page-header-nav-item-color);
126
- white-space:nowrap;
150
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
+ color:var(--t-text-color-headline);
127
153
  text-decoration:none;
128
- -webkit-appearance:none;
129
- -moz-appearance:none;
130
- appearance:none;
131
- cursor:pointer;
132
- outline-offset:-2px;
133
- background-color:var(--tds-page-header-nav-item-background-color);
134
- background-clip:padding-box;
135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
138
154
  }
139
155
 
140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
145
- }
156
+ :is(.tds-sidenav-item :is(a,button)):active{
157
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
+ }
146
159
 
147
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
- }
160
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
+ overflow:hidden;
162
+ color:var(--tds-sidenav-item-icon-color);
163
+ }
152
164
 
153
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
- background-color:var(--tds-page-header-nav-item-background-color-active);
155
- border-color:var(--tds-page-header-nav-item-border-color-active);
156
- }
165
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
+ display:block;
167
+ width:var(--tds-sidenav-item-icon-size);
168
+ height:var(--tds-sidenav-item-icon-size);
169
+ }
157
170
 
158
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
- color:var(--tds-page-header-nav-item-color-disabled);
160
- cursor:not-allowed;
161
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
- opacity:1;
163
- }
171
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
+ --tds-sidenav-indent:19px;
173
+ }
164
174
 
165
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
- position:relative;
175
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
+ visibility:visible;
177
+ block-size:auto;
178
+ opacity:1;
167
179
  }
168
180
 
169
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
181
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
+
185
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
+ font-weight:var(--t-font-weight-semibold);
187
+ }
188
+
189
+ .tds-sidenav-item:has(.tds-sidenav-section){
190
+ display:flex;
191
+ flex-direction:column;
192
+ gap:var(--t-spacing-half);
193
+ }
194
+
195
+ .tds-sidenav-item .tds-sidenav-section-list{
196
+ --tds-sidenav-item-depth:1;
197
+ gap:0;
198
+ }
199
+
200
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
+ visibility:hidden;
202
+ block-size:0;
203
+ overflow-y:clip;
204
+ opacity:0;
205
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
+ }
207
+
208
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
+ --tds-sidenav-item-depth:2;
210
+ }
211
+
212
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
+ min-height:var(--t-element-size-2xl);
214
+ padding-block:9px;
215
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
+ line-height:1;
217
+ background-color:transparent;
218
+ }
219
+
220
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
+ position:absolute;
222
+ top:0;
223
+ bottom:0;
224
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
+ width:2px;
226
+ content:"";
227
+ background-color:var(--tds-sidenav-item-nested-border-color);
228
+ transition:var(--tds-sidenav-item-transition);
172
229
  }
173
230
 
174
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
231
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
175
232
  position:absolute;
176
- top:-5px;
177
- right:-2px;
178
- width:10px;
179
- height:10px;
233
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
+ z-index:-1;
235
+ height:100%;
180
236
  content:"";
181
- background:var(--tds-page-header-nav-item-indicator-color);
182
- border-radius:50%;
237
+ background-color:var(--tds-sidenav-item-nested-background);
238
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
+ transition:var(--tds-sidenav-item-transition);
183
240
  }
184
241
 
185
- @media (prefers-reduced-motion: no-preference){
186
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
- animation:indicator-pulse 1.25s ease infinite;
188
- }
242
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
+ display:block;
244
+ text-align:left;
245
+ white-space:normal;
189
246
  }
190
247
 
191
- .tds-page-header__title-bar{
192
- display:flex;
193
- flex-direction:column;
194
- gap:var(--t-spacing-2) var(--t-spacing-1);
195
- align-items:flex-start;
196
- justify-content:space-between;
197
- padding:0 var(--tds-page-header-padding-x);
198
- }
248
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
251
+ }
199
252
 
200
- .tds-page-header--profile > .tds-page-header__title-bar{
201
- align-items:center;
202
- }
253
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
255
+ }
203
256
 
204
- .tds-page-header__primary{
257
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
+ font-weight:var(--t-font-weight-medium);
260
+ }
261
+
262
+ .tds-sidenav-responsive-header{
263
+ display:flex;
264
+ gap:var(--t-spacing-2);
265
+ align-items:center;
205
266
  width:100%;
206
267
  }
207
268
 
208
- .tds-page-header__primary h1{
269
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
+ order:0;
271
+ }
272
+
273
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
+ flex:1;
275
+ order:1;
209
276
  margin:0;
210
- font-size:var(--tds-page-header-headline-font-size);
211
- font-weight:var(--t-font-weight-normal);
212
- line-height:32px;
213
- color:var(--tds-page-header-headline-color);
214
- overflow-wrap:break-word;
277
+ font-size:var(--t-font-size-lg);
278
+ font-weight:var(--t-font-weight-medium);
279
+ color:var(--t-text-color-headline);
215
280
  }
216
281
 
217
- @media (min-width: 960px){
218
- .tds-page-header__primary{
219
- flex:1 1 max-content;
220
- width:auto;
221
- min-width:0;
222
- max-width:100%;
282
+ @media (max-width: 719px){
283
+ .tds-sidenav-collapse{
284
+ z-index:10001;
285
+ display:none;
286
+ max-width:min(448px, calc(100vw - 48px));
287
+ padding:0;
288
+ margin:12px 0;
289
+ position-area:bottom span-right;
290
+ overflow:hidden;
291
+ outline:0;
292
+ background:var(--t-surface-color-card);
293
+ border:0;
294
+ border-radius:6px;
295
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
+ opacity:var(--tds-sidenav-collapse-open-opacity);
297
+ transform:var(--tds-sidenav-collapse-open-transform);
298
+ transition:var(--tds-sidenav-collapse-transition-enter);
299
+ will-change:transform;
223
300
  }
224
301
 
225
- .tds-page-header__title-bar,
226
- .tds-page-header--profile .tds-page-header__title-bar{
227
- flex-flow:row nowrap;
228
- row-gap:12px;
229
- align-items:flex-start;
302
+ .tds-sidenav-scroll-container{
303
+ --webkit-overflow-scrolling:touch;
304
+ display:block;
305
+ width:100%;
306
+ height:-moz-fit-content;
307
+ height:fit-content;
308
+ padding:var(--t-spacing-2);
309
+ overflow-y:auto;
230
310
  }
231
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
- width:auto;
233
- }
234
311
 
235
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
- justify-content:flex-end;
312
+ .tds-sidenav-item :is(a, button) :is(.prefix){
313
+ display:none;
314
+ }
315
+ @supports selector(:popover-open){
316
+ .tds-sidenav-collapse:popover-open{
317
+ display:flex;
237
318
  }
238
- }
239
319
 
240
- .tds-page-header-phone,
241
- .tds-page-header-email{
242
- color:var(--tds-page-header-color);
243
- white-space:nowrap;
244
- }
320
+ .tds-sidenav-collapse:not(:popover-open){
321
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
322
+ transition:var(--tds-sidenav-collapse-transition-exit);
323
+ }
245
324
 
246
- .tds-page-header-email{
247
- max-width:100%;
248
- overflow:hidden;
249
- text-overflow:ellipsis;
250
- }
325
+ @starting-style{
326
+ .tds-sidenav-collapse:popover-open{
327
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
328
+ transform:var(--tds-sidenav-collapse-closed-transform);
329
+ }
330
+ }
331
+ }
332
+ @supports not selector(:popover-open){
333
+ .tds-sidenav-collapse.\:popover-open{
334
+ display:flex;
335
+ }
251
336
 
252
- @keyframes indicator-pulse{
253
- 0%{
254
- opacity:.3;
255
- transform:scale(.9);
337
+ .tds-sidenav-collapse:not(.\:popover-open){
338
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
339
+ transition:var(--tds-sidenav-collapse-transition-exit);
340
+ }
256
341
  }
342
+ }
257
343
 
258
- 100%{
259
- opacity:0;
260
- transform:scale(1.75);
344
+ @media (min-width: 720px){
345
+ .tds-sidenav-responsive-header{
346
+ display:none;
261
347
  }
262
348
  }
263
349
 
350
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
+ display:none;
352
+ }
264
353
 
265
- @media (prefers-reduced-motion: no-preference){
354
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
+ display:block;
356
+ }
266
357
 
267
- :root{
268
- interpolate-size:allow-keywords;
269
- }
270
- }
358
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
+ display:flex;
360
+ flex-direction:column;
361
+ }
271
362
 
272
- @layer tds-component{
273
- tds-sidenav,
274
- .tds-sidenav{
275
- --tds-sidenav-indent:12px;
276
- --tds-sidenav-item-depth:0;
363
+ .tds-checkbox{
364
+ --tds-checkbox-font-size:var(--t-font-size-md);
365
+ --tds-checkbox-cursor:pointer;
366
+ --tds-checkbox-line-height:1.4;
367
+ --tds-checkbox-transition-property:background-color, border-color;
277
368
 
278
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
369
+ --tds-checkbox-input-size:var(--t-element-size-md);
370
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
371
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
372
+ --tds-checkbox-input-background-color:transparent;
279
373
 
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);
286
-
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);
291
-
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;
295
-
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);
299
-
300
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
301
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
302
- }
303
-
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;
311
- }
312
- }
313
-
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);
320
- }
321
- }
322
-
323
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
324
- display:flex;
325
- }
374
+ --tds-checkbox-input-icon:none;
375
+ --tds-checkbox-input-icon-visibility:hidden;
376
+ --tds-checkbox-input-icon-opacity:0;
377
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
326
378
 
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%;
331
- }
379
+ --tds-checkbox-label-color:var(--t-form-color);
332
380
 
333
- .tds-sidenav-section-list{
334
- width:100%;
335
- padding:0;
336
- margin:0;
337
- list-style:none;
338
- }
381
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
382
+ --tds-checkbox-description-line-height:1.35;
383
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
384
+ --tds-checkbox-description-invalid-icon-display:none;
339
385
 
340
- .tds-sidenav-section-header{
341
- display:flex;
342
- align-items:baseline;
343
- justify-content:space-between;
344
- padding-top:var(--t-spacing-2);
386
+ position:relative;
387
+ display:inline-grid;
388
+ grid-template-columns:auto;
389
+ grid-auto-columns:1fr;
390
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
391
+ line-height:var(--tds-checkbox-line-height);
392
+ cursor:var(--tds-checkbox-cursor);
393
+ -webkit-user-select:none;
394
+ -moz-user-select:none;
395
+ user-select:none;
345
396
  }
346
397
 
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;
354
- }
355
-
356
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
357
- padding-top:0;
398
+ .tds-checkbox label{
399
+ grid-area:1 / 2;
400
+ font-size:var(--tds-checkbox-font-size);
401
+ font-weight:var(--t-font-weight-normal);
402
+ color:var(--tds-checkbox-label-color);
403
+ cursor:var(--tds-checkbox-cursor);
358
404
  }
359
405
 
360
- .tds-sidenav-section-header [slot="label-actions"]{
406
+ .tds-checkbox tds-indeterminate{
361
407
  display:flex;
362
- gap:var(--t-spacing-half);
363
- align-items:center;
364
408
  }
365
409
 
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){
410
+ .tds-checkbox input[type="checkbox"]{
382
411
  position:relative;
383
- display:flex;
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;
412
+ width:1em;
413
+ height:1em;
414
+ margin:calc((1lh - 1em) / 2) 0 0;
415
+ font-size:var(--tds-checkbox-font-size);
416
+ line-height:inherit;
394
417
  -webkit-appearance:none;
395
418
  -moz-appearance:none;
396
419
  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);
420
+ cursor:var(--tds-checkbox-cursor);
421
+ background-color:var(--tds-checkbox-input-background-color);
422
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
423
+ border-radius:var(--tds-checkbox-input-border-radius);
424
+ transition-timing-function:var(--t-ease-in-out);
425
+ transition-duration:var(--t-duration-200);
426
+ transition-property:var(--tds-checkbox-transition-property);
402
427
  }
403
428
 
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;
429
+ :is(.tds-checkbox input[type="checkbox"])::before{
430
+ position:absolute;
431
+ top:50%;
432
+ left:50%;
433
+ visibility:var(--tds-checkbox-input-icon-visibility);
434
+ width:100%;
435
+ height:100%;
436
+ content:"";
437
+ background-color:var(--tds-checkbox-input-icon-fill);
438
+ border-radius:var(--tds-checkbox-input-border-radius);
439
+ opacity:var(--tds-checkbox-input-icon-opacity);
440
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
441
+ mask-image:var(--tds-checkbox-input-icon);
442
+ -webkit-mask-repeat:no-repeat;
443
+ mask-repeat:no-repeat;
444
+ -webkit-mask-size:contain;
445
+ mask-size:contain;
446
+ transform:translate(-50%, -50%);
411
447
  }
412
448
 
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);
416
- text-decoration:none;
449
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
450
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
451
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
417
452
  }
418
453
 
419
- :is(.tds-sidenav-item :is(a,button)):active{
420
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
454
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
455
+ outline:var(--t-focus-ring-outline);
456
+ outline-offset:var(--t-focus-ring-offset);
421
457
  }
422
458
 
423
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
424
- overflow:hidden;
425
- color:var(--tds-sidenav-item-icon-color);
459
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
460
+ pointer-events:none;
426
461
  }
427
462
 
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
- }
463
+ @media (prefers-reduced-motion: reduce){
433
464
 
434
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
435
- --tds-sidenav-indent:19px;
465
+ .tds-checkbox input[type="checkbox"]{
466
+ --tds-checkbox-transition-property:none;
467
+ }
436
468
  }
437
469
 
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;
442
- }
470
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
471
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
472
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
473
+ --tds-checkbox-input-icon-visibility:visible;
474
+ --tds-checkbox-input-icon-opacity:1;
475
+ }
443
476
 
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);
477
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
478
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
479
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
480
+ }
447
481
 
448
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
449
- font-weight:var(--t-font-weight-semibold);
482
+ .tds-checkbox:has(input:checked){
483
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
450
484
  }
451
485
 
452
- .tds-sidenav-item:has(.tds-sidenav-section){
453
- display:flex;
454
- flex-direction:column;
455
- gap:var(--t-spacing-half);
486
+ .tds-checkbox:has(input:indeterminate){
487
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
456
488
  }
457
489
 
458
- .tds-sidenav-item .tds-sidenav-section-list{
459
- --tds-sidenav-item-depth:1;
460
- gap:0;
490
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
493
+ --tds-checkbox-description-invalid-icon-display:inline-block;
461
494
  }
462
495
 
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);
496
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
469
499
  }
470
500
 
471
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
472
- --tds-sidenav-item-depth:2;
501
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
502
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
473
504
  }
474
505
 
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
- }
506
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
507
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
509
+ }
482
510
 
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
- }
493
-
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
- }
504
-
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
- }
511
+ .tds-checkbox:has(input:required) label::after{
512
+ margin-left:.25ch;
513
+ color:var(--t-text-color-status-error);
514
+ content:"*";
515
+ }
510
516
 
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
- }
517
+ .tds-checkbox:has(input:disabled){
518
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
515
520
 
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
- }
521
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
522
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
523
+ --tds-checkbox-cursor:not-allowed;
524
+ }
519
525
 
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);
526
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
523
528
  }
524
529
 
525
- .tds-sidenav-responsive-header{
530
+ .tds-checkbox-description{
526
531
  display:flex;
527
- gap:var(--t-spacing-2);
528
- align-items:center;
529
- width:100%;
532
+ grid-area:2 / 2;
533
+ gap:var(--t-spacing-half);
534
+ align-items:flex-start;
535
+ margin:0;
536
+ font-size:var(--tds-checkbox-description-font-size);
537
+ line-height:var(--tds-checkbox-description-line-height);
538
+ color:var(--tds-checkbox-description-color);
539
+ cursor:text;
530
540
  }
531
541
 
532
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
533
- order:0;
542
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
+ display:var(--tds-checkbox-description-invalid-icon-display);
544
+ flex-shrink:0;
545
+ margin-top:calc(.5lh - .5em);
546
+ line-height:var(--tds-checkbox-description-line-height);
534
547
  }
535
548
 
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);
543
- }
549
+ .tds-checkbox--sm{
550
+ --tds-checkbox-line-height:1.35;
551
+ --tds-checkbox-input-size:var(--t-element-size-sm);
552
+ --tds-checkbox-font-size:var(--t-font-size-sm);
553
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
+ --tds-checkbox-description-line-height:1.3;
555
+ }
544
556
 
545
- @media (max-width: 719px){
546
- .tds-sidenav-collapse{
547
- z-index:10001;
557
+ @layer t-critical{
558
+ tds-page-header:not(.hydrated){
548
559
  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
560
  }
561
+ }
564
562
 
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;
573
- }
563
+ @layer t-component{
564
+ .tds-page-header{
565
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
566
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
567
+ --tds-page-header-color:var(--t-text-color);
568
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
569
+ --tds-page-header-headline-color:var(--t-text-color-headline);
570
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
571
+ --tds-page-header-padding-x:var(--t-spacing-2);
572
+ --tds-page-header-padding-y:var(--t-spacing-2);
573
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
574
+ --tds-page-header-nav-gap:var(--t-spacing-1);
575
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
576
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
577
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
578
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
579
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
580
+ --tds-page-header-nav-item-border-width:1px;
574
581
 
575
- .tds-sidenav-item :is(a, button) :is(.prefix){
576
- display:none;
582
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
583
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
584
+
585
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
586
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
587
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
588
+
589
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
590
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
591
+
592
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
593
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
594
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
595
+
596
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
597
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
598
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
599
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
600
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
577
601
  }
578
- @supports selector(:popover-open){
579
- .tds-sidenav-collapse:popover-open{
580
- display:flex;
581
- }
582
602
 
583
- .tds-sidenav-collapse:not(:popover-open){
584
- opacity:var(--tds-sidenav-collapse-closed-opacity);
585
- transition:var(--tds-sidenav-collapse-transition-exit);
586
- }
603
+ .tds-page-header--profile{
604
+ --tds-page-header-padding-y:20px;
605
+ }
587
606
 
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
- }
607
+ @supports (color: light-dark(#fff, #000)){
608
+ .tds-page-header{
609
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
610
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
593
611
  }
594
612
  }
595
- @supports not selector(:popover-open){
596
- .tds-sidenav-collapse.\:popover-open{
597
- display:flex;
598
- }
599
613
 
600
- .tds-sidenav-collapse:not(.\:popover-open){
601
- opacity:var(--tds-sidenav-collapse-closed-opacity);
602
- transition:var(--tds-sidenav-collapse-transition-exit);
614
+ @media (min-width: 600px){
615
+ .tds-page-header{
616
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
617
+ --tds-page-header-color:var(--t-text-color-secondary);
618
+ --tds-page-header-bottom-border-color:var(--t-border-color);
619
+ --tds-page-header-padding-x:var(--t-spacing-3);
620
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
621
+ --tds-page-header-nav-gap:var(--t-spacing-half);
622
+ --tds-page-header-nav-background:transparent;
623
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
624
+ --tds-page-header-nav-item-border-width:1px;
625
+ --tds-page-header-nav-item-color:var(--t-text-color);
626
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
627
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
628
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
629
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
630
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
603
631
  }
604
632
  }
605
633
  }
606
634
 
607
- @media (min-width: 720px){
608
- .tds-sidenav-responsive-header{
609
- display:none;
610
- }
635
+ .tds-page-header{
636
+ display:flex;
637
+ flex-direction:column;
638
+ padding-top:var(--tds-page-header-padding-y);
639
+ color:var(--tds-page-header-color);
640
+ background:var(--tds-page-header-background-color);
641
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
611
642
  }
612
643
 
613
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
- display:none;
615
- }
644
+ .tds-page-header:not(.has-nav){
645
+ padding-bottom:var(--tds-page-header-padding-y);
646
+ }
616
647
 
617
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
- display:block;
619
- }
648
+ .tds-page-header.inactive{
649
+ background:var(--tds-page-header-background-color-inactive);
650
+ }
620
651
 
621
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
652
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
653
+ width:100%;
654
+ }
655
+
656
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
657
+ display:flex;
658
+ flex-flow:row wrap;
659
+ gap:var(--t-spacing-half) var(--t-spacing-1);
660
+ align-items:flex-start;
661
+ justify-content:flex-start;
662
+ min-width:0;
663
+ }
664
+
665
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
622
666
  display:flex;
623
- flex-direction:column;
667
+ gap:var(--tds-page-header-nav-gap);
668
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
669
+ margin:0 0 -1px;
670
+ overflow:auto;
671
+ list-style:none;
672
+ background:var(--tds-page-header-nav-background);
624
673
  }
625
674
 
626
-
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{
675
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
676
+ position:relative;
677
+ display:inline-flex;
678
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
679
+ font-size:var(--t-font-size-sm);
680
+ line-height:22px;
681
+ color:var(--tds-page-header-nav-item-color);
682
+ white-space:nowrap;
683
+ text-decoration:none;
628
684
  -webkit-appearance:none;
685
+ -moz-appearance:none;
629
686
  appearance:none;
687
+ cursor:pointer;
688
+ outline-offset:-2px;
689
+ background-color:var(--tds-page-header-nav-item-background-color);
690
+ background-clip:padding-box;
691
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
692
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
693
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
630
694
  }
631
695
 
632
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
633
- inline-size:1em;
634
- block-size:2em;
635
- }
696
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
697
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
698
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
699
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
700
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
701
+ }
636
702
 
637
- @supports (field-sizing: content){
638
- .tds-input--auto-width{
639
- inline-size:-moz-fit-content;
640
- inline-size:fit-content;
641
- min-inline-size:min(100%, 122px);
642
- }
703
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
704
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
705
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
706
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
707
+ }
643
708
 
644
- .tds-input--auto-width input{
645
- field-sizing:content;
646
- inline-size:auto;
647
- }
648
- }
709
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
710
+ background-color:var(--tds-page-header-nav-item-background-color-active);
711
+ border-color:var(--tds-page-header-nav-item-border-color-active);
712
+ }
649
713
 
650
- .tds-checkbox{
651
- --tds-checkbox-font-size:var(--t-font-size-md);
652
- --tds-checkbox-cursor:pointer;
653
- --tds-checkbox-line-height:1.4;
654
- --tds-checkbox-transition-property:background-color, border-color;
714
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
715
+ color:var(--tds-page-header-nav-item-color-disabled);
716
+ cursor:not-allowed;
717
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
718
+ opacity:1;
719
+ }
655
720
 
656
- --tds-checkbox-input-size:var(--t-element-size-md);
657
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
658
- --tds-checkbox-input-border-color:var(--t-form-border-color);
659
- --tds-checkbox-input-background-color:transparent;
721
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
722
+ position:relative;
723
+ }
660
724
 
661
- --tds-checkbox-input-icon:none;
662
- --tds-checkbox-input-icon-visibility:hidden;
663
- --tds-checkbox-input-icon-opacity:0;
664
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
725
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
726
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
727
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
728
+ }
665
729
 
666
- --tds-checkbox-label-color:var(--t-form-color);
730
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
731
+ position:absolute;
732
+ top:-5px;
733
+ right:-2px;
734
+ width:10px;
735
+ height:10px;
736
+ content:"";
737
+ background:var(--tds-page-header-nav-item-indicator-color);
738
+ border-radius:50%;
739
+ }
667
740
 
668
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
669
- --tds-checkbox-description-line-height:1.35;
670
- --tds-checkbox-description-color:var(--t-text-color-secondary);
671
- --tds-checkbox-description-invalid-icon-display:none;
741
+ @media (prefers-reduced-motion: no-preference){
742
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
743
+ animation:indicator-pulse 1.25s ease infinite;
744
+ }
745
+ }
672
746
 
673
- position:relative;
674
- display:inline-grid;
675
- grid-template-columns:auto;
676
- grid-auto-columns:1fr;
677
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
678
- line-height:var(--tds-checkbox-line-height);
679
- cursor:var(--tds-checkbox-cursor);
680
- -webkit-user-select:none;
681
- -moz-user-select:none;
682
- user-select:none;
747
+ .tds-page-header__title-bar{
748
+ display:flex;
749
+ flex-direction:column;
750
+ gap:var(--t-spacing-2) var(--t-spacing-1);
751
+ align-items:flex-start;
752
+ justify-content:space-between;
753
+ padding:0 var(--tds-page-header-padding-x);
683
754
  }
684
755
 
685
- .tds-checkbox label{
686
- grid-area:1 / 2;
687
- font-size:var(--tds-checkbox-font-size);
688
- font-weight:var(--t-font-weight-normal);
689
- color:var(--tds-checkbox-label-color);
690
- cursor:var(--tds-checkbox-cursor);
756
+ .tds-page-header--profile > .tds-page-header__title-bar{
757
+ align-items:center;
691
758
  }
692
759
 
693
- .tds-checkbox tds-indeterminate{
694
- display:flex;
760
+ .tds-page-header__primary{
761
+ width:100%;
762
+ }
763
+
764
+ .tds-page-header__primary h1{
765
+ margin:0;
766
+ font-size:var(--tds-page-header-headline-font-size);
767
+ font-weight:var(--t-font-weight-normal);
768
+ line-height:32px;
769
+ color:var(--tds-page-header-headline-color);
770
+ overflow-wrap:break-word;
695
771
  }
696
772
 
697
- .tds-checkbox input[type="checkbox"]{
698
- position:relative;
699
- width:1em;
700
- height:1em;
701
- margin:calc((1lh - 1em) / 2) 0 0;
702
- font-size:var(--tds-checkbox-font-size);
703
- line-height:inherit;
704
- -webkit-appearance:none;
705
- -moz-appearance:none;
706
- appearance:none;
707
- cursor:var(--tds-checkbox-cursor);
708
- background-color:var(--tds-checkbox-input-background-color);
709
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
710
- border-radius:var(--tds-checkbox-input-border-radius);
711
- transition-timing-function:var(--t-ease-in-out);
712
- transition-duration:var(--t-duration-200);
713
- transition-property:var(--tds-checkbox-transition-property);
773
+ @media (min-width: 960px){
774
+ .tds-page-header__primary{
775
+ flex:1 1 max-content;
776
+ width:auto;
777
+ min-width:0;
778
+ max-width:100%;
714
779
  }
715
780
 
716
- :is(.tds-checkbox input[type="checkbox"])::before{
717
- position:absolute;
718
- top:50%;
719
- left:50%;
720
- visibility:var(--tds-checkbox-input-icon-visibility);
721
- width:100%;
722
- height:100%;
723
- content:"";
724
- background-color:var(--tds-checkbox-input-icon-fill);
725
- border-radius:var(--tds-checkbox-input-border-radius);
726
- opacity:var(--tds-checkbox-input-icon-opacity);
727
- -webkit-mask-image:var(--tds-checkbox-input-icon);
728
- mask-image:var(--tds-checkbox-input-icon);
729
- -webkit-mask-repeat:no-repeat;
730
- mask-repeat:no-repeat;
731
- -webkit-mask-size:contain;
732
- mask-size:contain;
733
- transform:translate(-50%, -50%);
781
+ .tds-page-header__title-bar,
782
+ .tds-page-header--profile .tds-page-header__title-bar{
783
+ flex-flow:row nowrap;
784
+ row-gap:12px;
785
+ align-items:flex-start;
786
+ }
787
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
788
+ width:auto;
734
789
  }
735
790
 
736
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
737
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
738
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
791
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
792
+ justify-content:flex-end;
739
793
  }
794
+ }
740
795
 
741
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
742
- outline:var(--t-focus-ring-outline);
743
- outline-offset:var(--t-focus-ring-offset);
744
- }
796
+ .tds-page-header-phone,
797
+ .tds-page-header-email{
798
+ color:var(--tds-page-header-color);
799
+ white-space:nowrap;
800
+ }
745
801
 
746
- :is(.tds-checkbox input[type="checkbox"]):disabled{
747
- pointer-events:none;
748
- }
802
+ .tds-page-header-email{
803
+ max-width:100%;
804
+ overflow:hidden;
805
+ text-overflow:ellipsis;
806
+ }
749
807
 
750
- @media (prefers-reduced-motion: reduce){
808
+ @keyframes indicator-pulse{
809
+ 0%{
810
+ opacity:.3;
811
+ transform:scale(.9);
812
+ }
751
813
 
752
- .tds-checkbox input[type="checkbox"]{
753
- --tds-checkbox-transition-property:none;
814
+ 100%{
815
+ opacity:0;
816
+ transform:scale(1.75);
754
817
  }
818
+ }
819
+
820
+
821
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
822
+ -webkit-appearance:none;
823
+ appearance:none;
755
824
  }
756
825
 
757
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
758
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
759
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
760
- --tds-checkbox-input-icon-visibility:visible;
761
- --tds-checkbox-input-icon-opacity:1;
826
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
827
+ inline-size:1em;
828
+ block-size:2em;
829
+ }
830
+
831
+ @supports (field-sizing: content){
832
+ .tds-input--auto-width{
833
+ inline-size:-moz-fit-content;
834
+ inline-size:fit-content;
835
+ min-inline-size:min(100%, 122px);
762
836
  }
763
837
 
764
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
765
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
766
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
767
- }
838
+ .tds-input--auto-width input{
839
+ field-sizing:content;
840
+ inline-size:auto;
841
+ }
842
+ }
768
843
 
769
- .tds-checkbox:has(input:checked){
770
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
844
+ .tds-radio-group{
845
+ --tds-radio-group-font-size:var(--t-font-size-md);
846
+ --tds-radio-group-line-height:1.4;
847
+ --tds-radio-group-gap:var(--t-spacing-1);
848
+
849
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
850
+
851
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
852
+ --tds-radio-group-description-line-height:1.35;
853
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
854
+ --tds-radio-group-description-invalid-icon-display:none;
855
+ display:flex;
856
+ flex-direction:column;
857
+ gap:var(--tds-radio-group-gap);
858
+ padding:0;
859
+ margin:0;
860
+
861
+ font-size:var(--tds-radio-group-font-size);
862
+ line-height:var(--tds-radio-group-line-height);
863
+ border:0;
864
+ }
865
+
866
+ .tds-radio-group legend{
867
+ padding:0;
868
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
771
869
  }
772
870
 
773
- .tds-checkbox:has(input:indeterminate){
774
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
871
+ .tds-radio-group:has(.tds-radio-group-description){
872
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
775
873
  }
776
874
 
777
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
778
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
779
- --tds-checkbox-description-color:var(--t-text-color-status-error);
780
- --tds-checkbox-description-invalid-icon-display:inline-block;
875
+ .tds-radio-group[aria-invalid="true"]{
876
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
877
+ --tds-radio-group-description-invalid-icon-display:inline-block;
781
878
  }
782
879
 
783
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
784
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
785
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
880
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
881
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
786
882
  }
787
883
 
788
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
789
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
790
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
791
- }
884
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
885
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
886
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
887
+ }
792
888
 
793
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
794
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
795
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
889
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
890
+ --tds-radio-input-background-color:var(--t-form-background-color);
796
891
  }
797
892
 
798
- .tds-checkbox:has(input:required) label::after{
893
+ .tds-radio-group:has(input:required) legend::after{
799
894
  margin-left:.25ch;
800
895
  color:var(--t-text-color-status-error);
801
896
  content:"*";
802
897
  }
803
898
 
804
- .tds-checkbox:has(input:disabled){
805
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
806
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
807
-
808
- --tds-checkbox-label-color:var(--t-form-color-disabled);
809
- --tds-checkbox-description-color:var(--t-form-color-disabled);
810
- --tds-checkbox-cursor:not-allowed;
811
- }
812
-
813
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
814
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
815
- }
899
+ .tds-radio-group-fields{
900
+ display:flex;
901
+ flex-direction:column;
902
+ gap:var(--tds-radio-group-gap);
903
+ align-items:flex-start;
904
+ }
816
905
 
817
- .tds-checkbox-description{
906
+ .tds-radio-group-description{
818
907
  display:flex;
819
- grid-area:2 / 2;
820
908
  gap:var(--t-spacing-half);
821
909
  align-items:flex-start;
822
910
  margin:0;
823
- font-size:var(--tds-checkbox-description-font-size);
824
- line-height:var(--tds-checkbox-description-line-height);
825
- color:var(--tds-checkbox-description-color);
911
+ font-size:var(--tds-radio-group-description-font-size);
912
+ line-height:var(--tds-radio-group-description-line-height);
913
+ color:var(--tds-radio-group-description-color);
826
914
  cursor:text;
827
915
  }
828
916
 
829
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
830
- display:var(--tds-checkbox-description-invalid-icon-display);
917
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
918
+ display:var(--tds-radio-group-description-invalid-icon-display);
831
919
  flex-shrink:0;
832
920
  margin-top:calc(.5lh - .5em);
833
- line-height:var(--tds-checkbox-description-line-height);
921
+ line-height:var(--tds-radio-group-description-line-height);
834
922
  }
835
923
 
836
- .tds-checkbox--sm{
837
- --tds-checkbox-line-height:1.35;
838
- --tds-checkbox-input-size:var(--t-element-size-sm);
839
- --tds-checkbox-font-size:var(--t-font-size-sm);
840
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
841
- --tds-checkbox-description-line-height:1.3;
924
+ .tds-radio-group--sm{
925
+ --tds-radio-group-line-height:1.35;
926
+ --tds-radio-group-font-size:var(--t-font-size-sm);
927
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
928
+ --tds-radio-group-description-line-height:1.3;
842
929
  }
843
930
 
844
931
  .tds-radio{
@@ -939,125 +1026,38 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
939
1026
  --tds-radio-input-background-color:var(--t-form-background-color-error);
940
1027
  }
941
1028
 
942
- .tds-radio:has(input:disabled){
943
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
944
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
945
-
946
- --tds-radio-label-color:var(--t-form-color-disabled);
947
- --tds-radio-description-color:var(--t-form-color-disabled);
948
- --tds-radio-cursor:not-allowed;
949
- }
950
-
951
- .tds-radio:has(input:disabled) input:checked{
952
- --tds-radio-input-background-color:var(--t-form-background-color);
953
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
954
- }
955
-
956
- .tds-radio-description{
957
- display:flex;
958
- grid-area:2 / 2;
959
- gap:var(--t-spacing-half);
960
- align-items:flex-start;
961
- margin:0;
962
- font-size:var(--tds-radio-description-font-size);
963
- line-height:var(--tds-radio-description-line-height);
964
- color:var(--tds-radio-description-color);
965
- cursor:text;
966
- }
967
-
968
- .tds-radio--sm{
969
- --tds-radio-line-height:1.35;
970
- --tds-radio-input-size:var(--t-element-size-sm);
971
- --tds-radio-font-size:var(--t-font-size-sm);
972
- --tds-radio-description-font-size:var(--t-font-size-xs);
973
- --tds-radio-description-line-height:1.3;
974
- }
975
-
976
- .tds-radio-group{
977
- --tds-radio-group-font-size:var(--t-font-size-md);
978
- --tds-radio-group-line-height:1.4;
979
- --tds-radio-group-gap:var(--t-spacing-1);
980
-
981
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
982
-
983
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
984
- --tds-radio-group-description-line-height:1.35;
985
- --tds-radio-group-description-color:var(--t-text-color-secondary);
986
- --tds-radio-group-description-invalid-icon-display:none;
987
- display:flex;
988
- flex-direction:column;
989
- gap:var(--tds-radio-group-gap);
990
- padding:0;
991
- margin:0;
992
-
993
- font-size:var(--tds-radio-group-font-size);
994
- line-height:var(--tds-radio-group-line-height);
995
- border:0;
996
- }
997
-
998
- .tds-radio-group legend{
999
- padding:0;
1000
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1001
- }
1002
-
1003
- .tds-radio-group:has(.tds-radio-group-description){
1004
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1005
- }
1006
-
1007
- .tds-radio-group[aria-invalid="true"]{
1008
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1009
- --tds-radio-group-description-invalid-icon-display:inline-block;
1010
- }
1011
-
1012
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1013
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1014
- }
1015
-
1016
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1017
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1018
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1019
- }
1020
-
1021
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1022
- --tds-radio-input-background-color:var(--t-form-background-color);
1023
- }
1024
-
1025
- .tds-radio-group:has(input:required) legend::after{
1026
- margin-left:.25ch;
1027
- color:var(--t-text-color-status-error);
1028
- content:"*";
1029
- }
1030
-
1031
- .tds-radio-group-fields{
1032
- display:flex;
1033
- flex-direction:column;
1034
- gap:var(--tds-radio-group-gap);
1035
- align-items:flex-start;
1036
- }
1029
+ .tds-radio:has(input:disabled){
1030
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1031
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1037
1032
 
1038
- .tds-radio-group-description{
1033
+ --tds-radio-label-color:var(--t-form-color-disabled);
1034
+ --tds-radio-description-color:var(--t-form-color-disabled);
1035
+ --tds-radio-cursor:not-allowed;
1036
+ }
1037
+
1038
+ .tds-radio:has(input:disabled) input:checked{
1039
+ --tds-radio-input-background-color:var(--t-form-background-color);
1040
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1041
+ }
1042
+
1043
+ .tds-radio-description{
1039
1044
  display:flex;
1045
+ grid-area:2 / 2;
1040
1046
  gap:var(--t-spacing-half);
1041
1047
  align-items:flex-start;
1042
1048
  margin:0;
1043
- font-size:var(--tds-radio-group-description-font-size);
1044
- line-height:var(--tds-radio-group-description-line-height);
1045
- color:var(--tds-radio-group-description-color);
1049
+ font-size:var(--tds-radio-description-font-size);
1050
+ line-height:var(--tds-radio-description-line-height);
1051
+ color:var(--tds-radio-description-color);
1046
1052
  cursor:text;
1047
1053
  }
1048
1054
 
1049
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1050
- display:var(--tds-radio-group-description-invalid-icon-display);
1051
- flex-shrink:0;
1052
- margin-top:calc(.5lh - .5em);
1053
- line-height:var(--tds-radio-group-description-line-height);
1054
- }
1055
-
1056
- .tds-radio-group--sm{
1057
- --tds-radio-group-line-height:1.35;
1058
- --tds-radio-group-font-size:var(--t-font-size-sm);
1059
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1060
- --tds-radio-group-description-line-height:1.3;
1055
+ .tds-radio--sm{
1056
+ --tds-radio-line-height:1.35;
1057
+ --tds-radio-input-size:var(--t-element-size-sm);
1058
+ --tds-radio-font-size:var(--t-font-size-sm);
1059
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1060
+ --tds-radio-description-line-height:1.3;
1061
1061
  }
1062
1062
 
1063
1063
  .tds-toggle-switch{
@@ -1201,6 +1201,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1201
1201
  --tds-toggle-switch-display:inline-flex;
1202
1202
  }
1203
1203
 
1204
+ .tds-input:has(textarea){
1205
+ --tds-input-padding-block:6px;
1206
+ --tds-input-resizer-size:var(--t-element-size-sm);
1207
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1208
+ }
1209
+
1210
+ @supports (x: attr(x type(*))){
1211
+
1212
+ .tds-input:has(textarea){
1213
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1214
+ }
1215
+ }
1216
+
1217
+ .tds-input.tds-textarea--resize-vertical textarea{
1218
+ resize:vertical;
1219
+ }
1220
+
1221
+ .tds-input.tds-textarea--resize-none textarea{
1222
+ resize:none;
1223
+ }
1224
+
1225
+ .tds-input.tds-textarea--resize-auto textarea{
1226
+ resize:vertical;
1227
+ }
1228
+
1229
+ @supports (field-sizing: content){
1230
+ .tds-input.tds-textarea--resize-auto textarea{
1231
+ field-sizing:content;
1232
+ resize:none;
1233
+ }
1234
+ }
1235
+
1236
+ .tds-input textarea{
1237
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1238
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1239
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1240
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1241
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1242
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1243
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1244
+ --tds-input-scrollbar-thumb-border-radius:999px;
1245
+ --tds-input-scrollbar-thumb-border-width:3px;
1246
+ --tds-input-scrollbar-track-margin-block:.125rem;
1247
+ scrollbar-color:initial;
1248
+ transition-timing-function:var(--t-ease-in-out);
1249
+ transition-duration:var(--t-duration-200);
1250
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1251
+ }
1252
+
1253
+ @media (pointer: fine){
1254
+ :is(.tds-input textarea)::-webkit-scrollbar{
1255
+ width:12px;
1256
+ height:12px;
1257
+ cursor:default;
1258
+ }
1259
+
1260
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1261
+ cursor:default;
1262
+ background:var(--tds-input-scrollbar-thumb-color);
1263
+ background-clip:content-box;
1264
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1265
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1266
+ }
1267
+
1268
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1270
+ }
1271
+
1272
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1274
+ }
1275
+
1276
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1278
+ }
1279
+
1280
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
+ background:var(--tds-input-scrollbar-surface-color);
1282
+ }
1283
+
1284
+ :is(.tds-input textarea)::-webkit-resizer{
1285
+ background:var(--tds-input-resizer-icon) no-repeat;
1286
+ background-position:right bottom;
1287
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1288
+ }
1289
+
1290
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
+ cursor:default;
1293
+ }
1294
+
1295
+ @supports (-moz-appearance: none){
1296
+ :is(.tds-input textarea){
1297
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1298
+ scrollbar-width:thin;
1299
+ }
1300
+
1301
+ @media (hover){
1302
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1303
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1304
+ }
1305
+ }
1306
+ }
1307
+ }
1308
+
1204
1309
  .tds-select{
1205
1310
  --tds-select-border-color:var(--t-form-border-color);
1206
1311
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -1635,111 +1740,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1635
1740
  }
1636
1741
  }
1637
1742
 
1638
- .tds-input:has(textarea){
1639
- --tds-input-padding-block:6px;
1640
- --tds-input-resizer-size:var(--t-element-size-sm);
1641
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1642
- }
1643
-
1644
- @supports (x: attr(x type(*))){
1645
-
1646
- .tds-input:has(textarea){
1647
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1648
- }
1649
- }
1650
-
1651
- .tds-input.tds-textarea--resize-vertical textarea{
1652
- resize:vertical;
1653
- }
1654
-
1655
- .tds-input.tds-textarea--resize-none textarea{
1656
- resize:none;
1657
- }
1658
-
1659
- .tds-input.tds-textarea--resize-auto textarea{
1660
- resize:vertical;
1661
- }
1662
-
1663
- @supports (field-sizing: content){
1664
- .tds-input.tds-textarea--resize-auto textarea{
1665
- field-sizing:content;
1666
- resize:none;
1667
- }
1668
- }
1669
-
1670
- .tds-input textarea{
1671
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1672
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1673
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1674
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1675
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1676
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1677
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1678
- --tds-input-scrollbar-thumb-border-radius:999px;
1679
- --tds-input-scrollbar-thumb-border-width:3px;
1680
- --tds-input-scrollbar-track-margin-block:.125rem;
1681
- scrollbar-color:initial;
1682
- transition-timing-function:var(--t-ease-in-out);
1683
- transition-duration:var(--t-duration-200);
1684
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1685
- }
1686
-
1687
- @media (pointer: fine){
1688
- :is(.tds-input textarea)::-webkit-scrollbar{
1689
- width:12px;
1690
- height:12px;
1691
- cursor:default;
1692
- }
1693
-
1694
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1695
- cursor:default;
1696
- background:var(--tds-input-scrollbar-thumb-color);
1697
- background-clip:content-box;
1698
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1699
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1700
- }
1701
-
1702
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1703
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1704
- }
1705
-
1706
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1707
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1708
- }
1709
-
1710
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1711
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1712
- }
1713
-
1714
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1715
- background:var(--tds-input-scrollbar-surface-color);
1716
- }
1717
-
1718
- :is(.tds-input textarea)::-webkit-resizer{
1719
- background:var(--tds-input-resizer-icon) no-repeat;
1720
- background-position:right bottom;
1721
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1722
- }
1723
-
1724
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1725
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1726
- cursor:default;
1727
- }
1728
-
1729
- @supports (-moz-appearance: none){
1730
- :is(.tds-input textarea){
1731
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1732
- scrollbar-width:thin;
1733
- }
1734
-
1735
- @media (hover){
1736
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1737
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1738
- }
1739
- }
1740
- }
1741
- }
1742
-
1743
1743
  .tds-input{
1744
1744
  --tds-input-border-color:var(--t-form-border-color);
1745
1745
  --tds-input-border-color-hover:var(--t-form-border-color-hover);