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

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 +907 -907
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +907 -907
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,843 +1,930 @@
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;
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;
557
+
558
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
559
+ -webkit-appearance:none;
560
+ appearance:none;
561
+ }
562
+
563
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
564
+ inline-size:1em;
565
+ block-size:2em;
566
+ }
567
+
568
+ @supports (field-sizing: content){
569
+ .tds-input--auto-width{
570
+ inline-size:-moz-fit-content;
571
+ inline-size:fit-content;
563
572
  }
564
573
 
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;
574
+ .tds-input--auto-width input{
575
+ field-sizing:content;
576
+ inline-size:auto;
573
577
  }
578
+ }
574
579
 
575
- .tds-sidenav-item :is(a, button) :is(.prefix){
580
+ @layer t-critical{
581
+ tds-page-header:not(.hydrated){
576
582
  display:none;
577
583
  }
578
- @supports selector(:popover-open){
579
- .tds-sidenav-collapse:popover-open{
580
- display:flex;
581
- }
584
+ }
582
585
 
583
- .tds-sidenav-collapse:not(:popover-open){
584
- opacity:var(--tds-sidenav-collapse-closed-opacity);
585
- transition:var(--tds-sidenav-collapse-transition-exit);
586
- }
586
+ @layer t-component{
587
+ .tds-page-header{
588
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
589
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
590
+ --tds-page-header-color:var(--t-text-color);
591
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
592
+ --tds-page-header-headline-color:var(--t-text-color-headline);
593
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
594
+ --tds-page-header-padding-x:var(--t-spacing-2);
595
+ --tds-page-header-padding-y:var(--t-spacing-2);
596
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
597
+ --tds-page-header-nav-gap:var(--t-spacing-1);
598
+ --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%);
599
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
600
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
601
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
602
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
603
+ --tds-page-header-nav-item-border-width:1px;
587
604
 
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
- }
605
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
606
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
607
+
608
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
609
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
610
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
611
+
612
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
613
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
614
+
615
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
616
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
617
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
618
+
619
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
620
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
621
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
622
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
623
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
594
624
  }
595
- @supports not selector(:popover-open){
596
- .tds-sidenav-collapse.\:popover-open{
597
- display:flex;
625
+
626
+ .tds-page-header--profile{
627
+ --tds-page-header-padding-y:20px;
628
+ }
629
+
630
+ @supports (color: light-dark(#fff, #000)){
631
+ .tds-page-header{
632
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
633
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
598
634
  }
635
+ }
599
636
 
600
- .tds-sidenav-collapse:not(.\:popover-open){
601
- opacity:var(--tds-sidenav-collapse-closed-opacity);
602
- transition:var(--tds-sidenav-collapse-transition-exit);
637
+ @media (min-width: 600px){
638
+ .tds-page-header{
639
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
640
+ --tds-page-header-color:var(--t-text-color-secondary);
641
+ --tds-page-header-bottom-border-color:var(--t-border-color);
642
+ --tds-page-header-padding-x:var(--t-spacing-3);
643
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
644
+ --tds-page-header-nav-gap:var(--t-spacing-half);
645
+ --tds-page-header-nav-background:transparent;
646
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
647
+ --tds-page-header-nav-item-border-width:1px;
648
+ --tds-page-header-nav-item-color:var(--t-text-color);
649
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
650
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
651
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
652
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
653
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
603
654
  }
604
655
  }
605
656
  }
606
657
 
607
- @media (min-width: 720px){
608
- .tds-sidenav-responsive-header{
609
- display:none;
610
- }
658
+ .tds-page-header{
659
+ display:flex;
660
+ flex-direction:column;
661
+ padding-top:var(--tds-page-header-padding-y);
662
+ color:var(--tds-page-header-color);
663
+ background:var(--tds-page-header-background-color);
664
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
611
665
  }
612
666
 
613
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
- display:none;
615
- }
667
+ .tds-page-header:not(.has-nav){
668
+ padding-bottom:var(--tds-page-header-padding-y);
669
+ }
616
670
 
617
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
- display:block;
619
- }
671
+ .tds-page-header.inactive{
672
+ background:var(--tds-page-header-background-color-inactive);
673
+ }
620
674
 
621
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
675
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
676
+ width:100%;
677
+ }
678
+
679
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
680
+ display:flex;
681
+ flex-flow:row wrap;
682
+ gap:var(--t-spacing-half) var(--t-spacing-1);
683
+ align-items:flex-start;
684
+ justify-content:flex-start;
685
+ min-width:0;
686
+ }
687
+
688
+ :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
689
  display:flex;
623
- flex-direction:column;
690
+ gap:var(--tds-page-header-nav-gap);
691
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
692
+ margin:0 0 -1px;
693
+ overflow:auto;
694
+ list-style:none;
695
+ background:var(--tds-page-header-nav-background);
696
+ }
697
+
698
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
699
+ position:relative;
700
+ display:inline-flex;
701
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
702
+ font-size:var(--t-font-size-sm);
703
+ line-height:22px;
704
+ color:var(--tds-page-header-nav-item-color);
705
+ white-space:nowrap;
706
+ text-decoration:none;
707
+ -webkit-appearance:none;
708
+ -moz-appearance:none;
709
+ appearance:none;
710
+ cursor:pointer;
711
+ outline-offset:-2px;
712
+ background-color:var(--tds-page-header-nav-item-background-color);
713
+ background-clip:padding-box;
714
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
715
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
716
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
624
717
  }
625
718
 
719
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
720
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
721
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
722
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
723
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
724
+ }
626
725
 
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{
628
- -webkit-appearance:none;
629
- appearance:none;
630
- }
726
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
727
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
728
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
729
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
730
+ }
631
731
 
632
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
633
- inline-size:1em;
634
- block-size:2em;
635
- }
732
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
733
+ background-color:var(--tds-page-header-nav-item-background-color-active);
734
+ border-color:var(--tds-page-header-nav-item-border-color-active);
735
+ }
636
736
 
637
- @supports (field-sizing: content){
638
- .tds-input--auto-width{
639
- inline-size:-moz-fit-content;
640
- inline-size:fit-content;
641
- }
737
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
738
+ color:var(--tds-page-header-nav-item-color-disabled);
739
+ cursor:not-allowed;
740
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
741
+ opacity:1;
742
+ }
642
743
 
643
- .tds-input--auto-width input{
644
- field-sizing:content;
645
- inline-size:auto;
646
- }
647
- }
744
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
745
+ position:relative;
746
+ }
648
747
 
649
- .tds-checkbox{
650
- --tds-checkbox-font-size:var(--t-font-size-md);
651
- --tds-checkbox-cursor:pointer;
652
- --tds-checkbox-line-height:1.4;
653
- --tds-checkbox-transition-property:background-color, border-color;
748
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
749
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
750
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
751
+ }
654
752
 
655
- --tds-checkbox-input-size:var(--t-element-size-md);
656
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
657
- --tds-checkbox-input-border-color:var(--t-form-border-color);
658
- --tds-checkbox-input-background-color:transparent;
753
+ :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{
754
+ position:absolute;
755
+ top:-5px;
756
+ right:-2px;
757
+ width:10px;
758
+ height:10px;
759
+ content:"";
760
+ background:var(--tds-page-header-nav-item-indicator-color);
761
+ border-radius:50%;
762
+ }
659
763
 
660
- --tds-checkbox-input-icon:none;
661
- --tds-checkbox-input-icon-visibility:hidden;
662
- --tds-checkbox-input-icon-opacity:0;
663
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
764
+ @media (prefers-reduced-motion: no-preference){
765
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
766
+ animation:indicator-pulse 1.25s ease infinite;
767
+ }
768
+ }
664
769
 
665
- --tds-checkbox-label-color:var(--t-form-color);
770
+ .tds-page-header__title-bar{
771
+ display:flex;
772
+ flex-direction:column;
773
+ gap:var(--t-spacing-2) var(--t-spacing-1);
774
+ align-items:flex-start;
775
+ justify-content:space-between;
776
+ padding:0 var(--tds-page-header-padding-x);
777
+ }
666
778
 
667
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
668
- --tds-checkbox-description-line-height:1.35;
669
- --tds-checkbox-description-color:var(--t-text-color-secondary);
670
- --tds-checkbox-description-invalid-icon-display:none;
779
+ .tds-page-header--profile > .tds-page-header__title-bar{
780
+ align-items:center;
781
+ }
671
782
 
672
- position:relative;
673
- display:inline-grid;
674
- grid-template-columns:auto;
675
- grid-auto-columns:1fr;
676
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
677
- line-height:var(--tds-checkbox-line-height);
678
- cursor:var(--tds-checkbox-cursor);
679
- -webkit-user-select:none;
680
- -moz-user-select:none;
681
- user-select:none;
783
+ .tds-page-header__primary{
784
+ width:100%;
682
785
  }
683
786
 
684
- .tds-checkbox label{
685
- grid-area:1 / 2;
686
- font-size:var(--tds-checkbox-font-size);
787
+ .tds-page-header__primary h1{
788
+ margin:0;
789
+ font-size:var(--tds-page-header-headline-font-size);
687
790
  font-weight:var(--t-font-weight-normal);
688
- color:var(--tds-checkbox-label-color);
689
- cursor:var(--tds-checkbox-cursor);
791
+ line-height:32px;
792
+ color:var(--tds-page-header-headline-color);
793
+ overflow-wrap:break-word;
690
794
  }
691
795
 
692
- .tds-checkbox tds-indeterminate{
693
- display:flex;
796
+ @media (min-width: 960px){
797
+ .tds-page-header__primary{
798
+ flex:1 1 max-content;
799
+ width:auto;
800
+ min-width:0;
801
+ max-width:100%;
694
802
  }
695
803
 
696
- .tds-checkbox input[type="checkbox"]{
697
- position:relative;
698
- width:1em;
699
- height:1em;
700
- margin:calc((1lh - 1em) / 2) 0 0;
701
- font-size:var(--tds-checkbox-font-size);
702
- line-height:inherit;
703
- -webkit-appearance:none;
704
- -moz-appearance:none;
705
- appearance:none;
706
- cursor:var(--tds-checkbox-cursor);
707
- background-color:var(--tds-checkbox-input-background-color);
708
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
709
- border-radius:var(--tds-checkbox-input-border-radius);
710
- transition-timing-function:var(--t-ease-in-out);
711
- transition-duration:var(--t-duration-200);
712
- transition-property:var(--tds-checkbox-transition-property);
804
+ .tds-page-header__title-bar,
805
+ .tds-page-header--profile .tds-page-header__title-bar{
806
+ flex-flow:row nowrap;
807
+ row-gap:12px;
808
+ align-items:flex-start;
713
809
  }
714
-
715
- :is(.tds-checkbox input[type="checkbox"])::before{
716
- position:absolute;
717
- top:50%;
718
- left:50%;
719
- visibility:var(--tds-checkbox-input-icon-visibility);
720
- width:100%;
721
- height:100%;
722
- content:"";
723
- background-color:var(--tds-checkbox-input-icon-fill);
724
- border-radius:var(--tds-checkbox-input-border-radius);
725
- opacity:var(--tds-checkbox-input-icon-opacity);
726
- -webkit-mask-image:var(--tds-checkbox-input-icon);
727
- mask-image:var(--tds-checkbox-input-icon);
728
- -webkit-mask-repeat:no-repeat;
729
- mask-repeat:no-repeat;
730
- -webkit-mask-size:contain;
731
- mask-size:contain;
732
- transform:translate(-50%, -50%);
733
- }
734
-
735
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
736
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
737
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
810
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
811
+ width:auto;
738
812
  }
739
813
 
740
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
741
- outline:var(--t-focus-ring-outline);
742
- outline-offset:var(--t-focus-ring-offset);
814
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
815
+ justify-content:flex-end;
743
816
  }
817
+ }
744
818
 
745
- :is(.tds-checkbox input[type="checkbox"]):disabled{
746
- pointer-events:none;
747
- }
819
+ .tds-page-header-phone,
820
+ .tds-page-header-email{
821
+ color:var(--tds-page-header-color);
822
+ white-space:nowrap;
823
+ }
748
824
 
749
- @media (prefers-reduced-motion: reduce){
825
+ .tds-page-header-email{
826
+ max-width:100%;
827
+ overflow:hidden;
828
+ text-overflow:ellipsis;
829
+ }
750
830
 
751
- .tds-checkbox input[type="checkbox"]{
752
- --tds-checkbox-transition-property:none;
831
+ @keyframes indicator-pulse{
832
+ 0%{
833
+ opacity:.3;
834
+ transform:scale(.9);
753
835
  }
754
- }
755
836
 
756
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
757
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
758
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
759
- --tds-checkbox-input-icon-visibility:visible;
760
- --tds-checkbox-input-icon-opacity:1;
837
+ 100%{
838
+ opacity:0;
839
+ transform:scale(1.75);
761
840
  }
841
+ }
762
842
 
763
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
764
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
765
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
766
- }
843
+ .tds-radio-group{
844
+ --tds-radio-group-font-size:var(--t-font-size-md);
845
+ --tds-radio-group-line-height:1.4;
846
+ --tds-radio-group-gap:var(--t-spacing-1);
767
847
 
768
- .tds-checkbox:has(input:checked){
769
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
770
- }
848
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
771
849
 
772
- .tds-checkbox:has(input:indeterminate){
773
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
850
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
851
+ --tds-radio-group-description-line-height:1.35;
852
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
853
+ --tds-radio-group-description-invalid-icon-display:none;
854
+ display:flex;
855
+ flex-direction:column;
856
+ gap:var(--tds-radio-group-gap);
857
+ padding:0;
858
+ margin:0;
859
+
860
+ font-size:var(--tds-radio-group-font-size);
861
+ line-height:var(--tds-radio-group-line-height);
862
+ border:0;
863
+ }
864
+
865
+ .tds-radio-group legend{
866
+ padding:0;
867
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
774
868
  }
775
869
 
776
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
777
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
778
- --tds-checkbox-description-color:var(--t-text-color-status-error);
779
- --tds-checkbox-description-invalid-icon-display:inline-block;
870
+ .tds-radio-group:has(.tds-radio-group-description){
871
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
780
872
  }
781
873
 
782
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
783
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
784
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
785
- }
874
+ .tds-radio-group[aria-invalid="true"]{
875
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
876
+ --tds-radio-group-description-invalid-icon-display:inline-block;
877
+ }
786
878
 
787
- :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{
788
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
789
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
879
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
880
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
790
881
  }
791
882
 
792
- :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){
793
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
794
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
883
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
884
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
885
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
795
886
  }
796
887
 
797
- .tds-checkbox:has(input:required) label::after{
888
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
889
+ --tds-radio-input-background-color:var(--t-form-background-color);
890
+ }
891
+
892
+ .tds-radio-group:has(input:required) legend::after{
798
893
  margin-left:.25ch;
799
894
  color:var(--t-text-color-status-error);
800
895
  content:"*";
801
896
  }
802
897
 
803
- .tds-checkbox:has(input:disabled){
804
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
805
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
806
-
807
- --tds-checkbox-label-color:var(--t-form-color-disabled);
808
- --tds-checkbox-description-color:var(--t-form-color-disabled);
809
- --tds-checkbox-cursor:not-allowed;
810
- }
811
-
812
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
813
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
814
- }
898
+ .tds-radio-group-fields{
899
+ display:flex;
900
+ flex-direction:column;
901
+ gap:var(--tds-radio-group-gap);
902
+ align-items:flex-start;
903
+ }
815
904
 
816
- .tds-checkbox-description{
905
+ .tds-radio-group-description{
817
906
  display:flex;
818
- grid-area:2 / 2;
819
907
  gap:var(--t-spacing-half);
820
908
  align-items:flex-start;
821
909
  margin:0;
822
- font-size:var(--tds-checkbox-description-font-size);
823
- line-height:var(--tds-checkbox-description-line-height);
824
- color:var(--tds-checkbox-description-color);
910
+ font-size:var(--tds-radio-group-description-font-size);
911
+ line-height:var(--tds-radio-group-description-line-height);
912
+ color:var(--tds-radio-group-description-color);
825
913
  cursor:text;
826
914
  }
827
915
 
828
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
829
- display:var(--tds-checkbox-description-invalid-icon-display);
916
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
917
+ display:var(--tds-radio-group-description-invalid-icon-display);
830
918
  flex-shrink:0;
831
919
  margin-top:calc(.5lh - .5em);
832
- line-height:var(--tds-checkbox-description-line-height);
920
+ line-height:var(--tds-radio-group-description-line-height);
833
921
  }
834
922
 
835
- .tds-checkbox--sm{
836
- --tds-checkbox-line-height:1.35;
837
- --tds-checkbox-input-size:var(--t-element-size-sm);
838
- --tds-checkbox-font-size:var(--t-font-size-sm);
839
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
840
- --tds-checkbox-description-line-height:1.3;
923
+ .tds-radio-group--sm{
924
+ --tds-radio-group-line-height:1.35;
925
+ --tds-radio-group-font-size:var(--t-font-size-sm);
926
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
927
+ --tds-radio-group-description-line-height:1.3;
841
928
  }
842
929
 
843
930
  .tds-radio{
@@ -967,201 +1054,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
967
1054
  .tds-radio--sm{
968
1055
  --tds-radio-line-height:1.35;
969
1056
  --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;
973
- }
974
-
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
- }
980
-
981
- @supports (x: attr(x type(*))){
982
-
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
- }
986
- }
987
-
988
- .tds-input.tds-textarea--resize-vertical textarea{
989
- resize:vertical;
990
- }
991
-
992
- .tds-input.tds-textarea--resize-none textarea{
993
- resize:none;
994
- }
995
-
996
- .tds-input.tds-textarea--resize-auto textarea{
997
- resize:vertical;
998
- }
999
-
1000
- @supports (field-sizing: content){
1001
- .tds-input.tds-textarea--resize-auto textarea{
1002
- field-sizing:content;
1003
- resize:none;
1004
- }
1005
- }
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;
1029
- }
1030
-
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);
1037
- }
1038
-
1039
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1040
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1041
- }
1042
-
1043
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1044
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1045
- }
1046
-
1047
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1048
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1049
- }
1050
-
1051
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1052
- background:var(--tds-input-scrollbar-surface-color);
1053
- }
1054
-
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);
1059
- }
1060
-
1061
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1062
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1063
- cursor:default;
1064
- }
1065
-
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
- }
1076
- }
1077
- }
1078
- }
1079
-
1080
- .tds-radio-group{
1081
- --tds-radio-group-font-size:var(--t-font-size-md);
1082
- --tds-radio-group-line-height:1.4;
1083
- --tds-radio-group-gap:var(--t-spacing-1);
1084
-
1085
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1086
-
1087
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1088
- --tds-radio-group-description-line-height:1.35;
1089
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1090
- --tds-radio-group-description-invalid-icon-display:none;
1091
- display:flex;
1092
- flex-direction:column;
1093
- gap:var(--tds-radio-group-gap);
1094
- padding:0;
1095
- margin:0;
1096
-
1097
- font-size:var(--tds-radio-group-font-size);
1098
- line-height:var(--tds-radio-group-line-height);
1099
- border:0;
1100
- }
1101
-
1102
- .tds-radio-group legend{
1103
- padding:0;
1104
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1105
- }
1106
-
1107
- .tds-radio-group:has(.tds-radio-group-description){
1108
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1109
- }
1110
-
1111
- .tds-radio-group[aria-invalid="true"]{
1112
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1113
- --tds-radio-group-description-invalid-icon-display:inline-block;
1114
- }
1115
-
1116
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1117
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1118
- }
1119
-
1120
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1121
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1122
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1123
- }
1124
-
1125
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1126
- --tds-radio-input-background-color:var(--t-form-background-color);
1127
- }
1128
-
1129
- .tds-radio-group:has(input:required) legend::after{
1130
- margin-left:.25ch;
1131
- color:var(--t-text-color-status-error);
1132
- content:"*";
1133
- }
1134
-
1135
- .tds-radio-group-fields{
1136
- display:flex;
1137
- flex-direction:column;
1138
- gap:var(--tds-radio-group-gap);
1139
- align-items:flex-start;
1140
- }
1141
-
1142
- .tds-radio-group-description{
1143
- display:flex;
1144
- gap:var(--t-spacing-half);
1145
- align-items:flex-start;
1146
- margin:0;
1147
- font-size:var(--tds-radio-group-description-font-size);
1148
- line-height:var(--tds-radio-group-description-line-height);
1149
- color:var(--tds-radio-group-description-color);
1150
- cursor:text;
1151
- }
1152
-
1153
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1154
- display:var(--tds-radio-group-description-invalid-icon-display);
1155
- flex-shrink:0;
1156
- margin-top:calc(.5lh - .5em);
1157
- line-height:var(--tds-radio-group-description-line-height);
1158
- }
1159
-
1160
- .tds-radio-group--sm{
1161
- --tds-radio-group-line-height:1.35;
1162
- --tds-radio-group-font-size:var(--t-font-size-sm);
1163
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1164
- --tds-radio-group-description-line-height:1.3;
1057
+ --tds-radio-font-size:var(--t-font-size-sm);
1058
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1059
+ --tds-radio-description-line-height:1.3;
1165
1060
  }
1166
1061
 
1167
1062
  .tds-toggle-switch{
@@ -1305,6 +1200,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1305
1200
  --tds-toggle-switch-display:inline-flex;
1306
1201
  }
1307
1202
 
1203
+ .tds-input:has(textarea){
1204
+ --tds-input-padding-block:6px;
1205
+ --tds-input-resizer-size:var(--t-element-size-sm);
1206
+ --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");
1207
+ }
1208
+
1209
+ @supports (x: attr(x type(*))){
1210
+
1211
+ .tds-input:has(textarea){
1212
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1213
+ }
1214
+ }
1215
+
1216
+ .tds-input.tds-textarea--resize-vertical textarea{
1217
+ resize:vertical;
1218
+ }
1219
+
1220
+ .tds-input.tds-textarea--resize-none textarea{
1221
+ resize:none;
1222
+ }
1223
+
1224
+ .tds-input.tds-textarea--resize-auto textarea{
1225
+ resize:vertical;
1226
+ }
1227
+
1228
+ @supports (field-sizing: content){
1229
+ .tds-input.tds-textarea--resize-auto textarea{
1230
+ field-sizing:content;
1231
+ resize:none;
1232
+ }
1233
+ }
1234
+
1235
+ .tds-input textarea{
1236
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1237
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1238
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1239
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1240
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1241
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1242
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1243
+ --tds-input-scrollbar-thumb-border-radius:999px;
1244
+ --tds-input-scrollbar-thumb-border-width:3px;
1245
+ --tds-input-scrollbar-track-margin-block:.125rem;
1246
+ scrollbar-color:initial;
1247
+ transition-timing-function:var(--t-ease-in-out);
1248
+ transition-duration:var(--t-duration-200);
1249
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1250
+ }
1251
+
1252
+ @media (pointer: fine){
1253
+ :is(.tds-input textarea)::-webkit-scrollbar{
1254
+ width:12px;
1255
+ height:12px;
1256
+ cursor:default;
1257
+ }
1258
+
1259
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1260
+ cursor:default;
1261
+ background:var(--tds-input-scrollbar-thumb-color);
1262
+ background-clip:content-box;
1263
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1264
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1265
+ }
1266
+
1267
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1268
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1269
+ }
1270
+
1271
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1272
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1273
+ }
1274
+
1275
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1276
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1277
+ }
1278
+
1279
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1280
+ background:var(--tds-input-scrollbar-surface-color);
1281
+ }
1282
+
1283
+ :is(.tds-input textarea)::-webkit-resizer{
1284
+ background:var(--tds-input-resizer-icon) no-repeat;
1285
+ background-position:right bottom;
1286
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1287
+ }
1288
+
1289
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1290
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1291
+ cursor:default;
1292
+ }
1293
+
1294
+ @supports (-moz-appearance: none){
1295
+ :is(.tds-input textarea){
1296
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1297
+ scrollbar-width:thin;
1298
+ }
1299
+
1300
+ @media (hover){
1301
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1302
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1303
+ }
1304
+ }
1305
+ }
1306
+ }
1307
+
1308
1308
  .tds-select{
1309
1309
  --tds-select-border-color:var(--t-form-border-color);
1310
1310
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -3271,80 +3271,6 @@ 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
-
3348
3274
  .tds-date-picker{
3349
3275
  --tds-date-picker-border-color:var(--t-form-border-color);
3350
3276
  --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
@@ -3673,6 +3599,80 @@ a[class="tds-btn"]{
3673
3599
  color:var(--t-text-color-secondary);
3674
3600
  }
3675
3601
 
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);