@planningcenter/tapestry 3.4.1-rc.4 → 3.4.1-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 +1195 -1195
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1195 -1195
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +4 -4
package/dist/reactRender.css CHANGED
@@ -1,912 +1,838 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
7
4
  }
5
+ }
8
6
 
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
14
-
15
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
-
17
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
- --tds-sidenav-collapse-closed-opacity:0;
20
- --tds-sidenav-collapse-open-opacity:1;
21
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
- --tds-sidenav-collapse-open-transform:translateY(0);
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:transparent;
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
23
25
 
24
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
28
28
 
29
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
- --tds-sidenav-item-nested-background-selected:transparent;
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
32
 
33
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
36
35
 
37
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
- }
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
40
39
 
41
- @media (prefers-reduced-motion: reduce){
42
- tds-sidenav,
43
- .tds-sidenav{
44
- --tds-sidenav-collapse-transition-enter:none;
45
- --tds-sidenav-collapse-transition-exit:none;
46
- --tds-sidenav-collapse-closed-transform:none;
47
- --tds-sidenav-collapse-open-transform:none;
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
48
45
  }
49
- }
50
46
 
51
- .tds-sidenav--theme-gray{
52
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
57
49
  }
58
- }
59
50
 
60
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
- display:flex;
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
62
56
  }
63
57
 
64
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
- flex-direction:column;
66
- gap:var(--t-spacing-half);
67
- width:100%;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
76
+ }
68
77
  }
69
-
70
- .tds-sidenav-section-list{
71
- width:100%;
72
- padding:0;
73
- margin:0;
74
- list-style:none;
75
78
  }
76
79
 
77
- .tds-sidenav-section-header{
80
+ .tds-page-header{
78
81
  display:flex;
79
- align-items:baseline;
80
- justify-content:space-between;
81
- padding-top:var(--t-spacing-2);
82
+ flex-direction:column;
83
+ padding-top:var(--tds-page-header-padding-y);
84
+ color:var(--tds-page-header-color);
85
+ background:var(--tds-page-header-background-color);
86
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
82
87
  }
83
88
 
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;
89
+ .tds-page-header:not(.has-nav){
90
+ padding-bottom:var(--tds-page-header-padding-y);
91
91
  }
92
92
 
93
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
- padding-top:0;
93
+ .tds-page-header.inactive{
94
+ background:var(--tds-page-header-background-color-inactive);
95
95
  }
96
96
 
97
- .tds-sidenav-section-header [slot="label-actions"]{
98
- display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
97
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
+ width:100%;
101
99
  }
102
100
 
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
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
120
102
  display:flex;
121
- gap:12px;
122
- align-items:center;
123
- width:100%;
124
- padding:12px;
125
- overflow:hidden;
126
- font-size:var(--t-font-size-sm);
127
- line-height:18px;
128
- color:var(--t-text-color-headline);
129
- white-space:nowrap;
130
- text-decoration:none;
131
- -webkit-appearance:none;
132
- -moz-appearance:none;
133
- appearance:none;
134
- cursor:pointer;
135
- background-color:var(--tds-sidenav-item-background, transparent);
136
- border:0;
137
- border-radius:var(--t-border-radius);
138
- transition:var(--tds-sidenav-item-transition);
103
+ flex-flow:row wrap;
104
+ gap:var(--t-spacing-half) var(--t-spacing-1);
105
+ align-items:flex-start;
106
+ justify-content:flex-start;
107
+ min-width:0;
139
108
  }
140
109
 
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;
110
+ :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{
111
+ display:flex;
112
+ gap:var(--tds-page-header-nav-gap);
113
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
+ margin:0 0 -1px;
115
+ overflow:auto;
116
+ list-style:none;
117
+ background:var(--tds-page-header-nav-background);
148
118
  }
149
119
 
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);
120
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
+ position:relative;
122
+ display:inline-flex;
123
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
+ font-size:var(--t-font-size-sm);
125
+ line-height:22px;
126
+ color:var(--tds-page-header-nav-item-color);
127
+ white-space:nowrap;
153
128
  text-decoration:none;
129
+ -webkit-appearance:none;
130
+ -moz-appearance:none;
131
+ appearance:none;
132
+ cursor:pointer;
133
+ outline-offset:-2px;
134
+ background-color:var(--tds-page-header-nav-item-background-color);
135
+ background-clip:padding-box;
136
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
154
139
  }
155
140
 
156
- :is(.tds-sidenav-item :is(a,button)):active{
157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
- }
159
-
160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
- overflow:hidden;
162
- color:var(--tds-sidenav-item-icon-color);
163
- }
164
-
165
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
- display:block;
167
- width:var(--tds-sidenav-item-icon-size);
168
- height:var(--tds-sidenav-item-icon-size);
141
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
169
146
  }
170
147
 
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
173
- }
148
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
+ }
174
154
 
175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
- visibility:visible;
177
- block-size:auto;
178
- opacity:1;
179
- }
180
-
181
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
-
185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
- font-weight:var(--t-font-weight-semibold);
187
- }
188
-
189
- .tds-sidenav-item:has(.tds-sidenav-section){
190
- display:flex;
191
- flex-direction:column;
192
- gap:var(--t-spacing-half);
193
- }
194
-
195
- .tds-sidenav-item .tds-sidenav-section-list{
196
- --tds-sidenav-item-depth:1;
197
- gap:0;
198
- }
155
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
+ background-color:var(--tds-page-header-nav-item-background-color-active);
157
+ border-color:var(--tds-page-header-nav-item-border-color-active);
158
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
+ }
199
160
 
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
- }
161
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
+ color:var(--tds-page-header-nav-item-color-disabled);
164
+ cursor:not-allowed;
165
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
+ opacity:1;
167
+ }
207
168
 
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
210
- }
169
+ @media (min-width: 600px){
170
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
+ position:absolute;
172
+ inset:auto -1px -1px;
173
+ height:1px;
174
+ pointer-events:none;
175
+ content:"";
176
+ background-color:var(--tds-page-header-bottom-border-color);
177
+ }
178
+ }
211
179
 
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;
180
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
+ position:relative;
218
182
  }
219
183
 
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);
184
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
229
187
  }
230
188
 
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
189
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
232
190
  position:absolute;
233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
- z-index:-1;
235
- height:100%;
191
+ top:-5px;
192
+ right:-2px;
193
+ width:10px;
194
+ height:10px;
236
195
  content:"";
237
- background-color:var(--tds-sidenav-item-nested-background);
238
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
- transition:var(--tds-sidenav-item-transition);
240
- }
241
-
242
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
- display:block;
244
- text-align:left;
245
- white-space:normal;
246
- }
247
-
248
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
196
+ background:var(--tds-page-header-nav-item-indicator-color);
197
+ border-radius:50%;
251
198
  }
252
199
 
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);
200
+ @media (prefers-reduced-motion: no-preference){
201
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
+ animation:indicator-pulse 1.25s ease infinite;
203
+ }
255
204
  }
256
205
 
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{
206
+ .tds-page-header__title-bar{
263
207
  display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
208
+ flex-direction:column;
209
+ gap:var(--t-spacing-2) var(--t-spacing-1);
210
+ align-items:flex-start;
211
+ justify-content:space-between;
212
+ padding:0 var(--tds-page-header-padding-x);
267
213
  }
268
214
 
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
215
+ .tds-page-header--profile > .tds-page-header__title-bar{
216
+ align-items:center;
271
217
  }
272
218
 
273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
- flex:1;
275
- order:1;
276
- margin:0;
277
- font-size:var(--t-font-size-lg);
278
- font-weight:var(--t-font-weight-medium);
279
- color:var(--t-text-color-headline);
280
- }
219
+ .tds-page-header__primary{
220
+ width:100%;
221
+ }
281
222
 
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
+ .tds-page-header__primary h1{
224
+ margin:0;
225
+ font-size:var(--tds-page-header-headline-font-size);
226
+ font-weight:var(--t-font-weight-normal);
227
+ line-height:32px;
228
+ color:var(--tds-page-header-headline-color);
229
+ overflow-wrap:break-word;
300
230
  }
301
231
 
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;
232
+ @media (min-width: 960px){
233
+ .tds-page-header__primary{
234
+ flex:1 1 max-content;
235
+ width:auto;
236
+ min-width:0;
237
+ max-width:100%;
310
238
  }
311
239
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
240
+ .tds-page-header__title-bar,
241
+ .tds-page-header--profile .tds-page-header__title-bar{
242
+ flex-flow:row nowrap;
243
+ row-gap:12px;
244
+ align-items:flex-start;
314
245
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
246
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
+ width:auto;
318
248
  }
319
249
 
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
250
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
+ justify-content:flex-end;
323
252
  }
253
+ }
324
254
 
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
- }
255
+ .tds-page-header-phone,
256
+ .tds-page-header-email{
257
+ color:var(--tds-page-header-color);
258
+ white-space:nowrap;
259
+ }
336
260
 
337
- .tds-sidenav-collapse:not(.\:popover-open){
338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
339
- transition:var(--tds-sidenav-collapse-transition-exit);
340
- }
341
- }
261
+ .tds-page-header-email{
262
+ max-width:100%;
263
+ overflow:hidden;
264
+ text-overflow:ellipsis;
342
265
  }
343
266
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
267
+ @keyframes indicator-pulse{
268
+ 0%{
269
+ opacity:.3;
270
+ transform:scale(.9);
271
+ }
272
+
273
+ 100%{
274
+ opacity:0;
275
+ transform:scale(1.75);
347
276
  }
348
277
  }
349
278
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
279
+ .tds-checkbox{
280
+ --tds-checkbox-font-size:var(--t-font-size-md);
281
+ --tds-checkbox-cursor:pointer;
282
+ --tds-checkbox-line-height:1.4;
283
+ --tds-checkbox-transition-property:background-color, border-color;
353
284
 
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
285
+ --tds-checkbox-input-size:var(--t-element-size-md);
286
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
287
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
288
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
357
289
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
290
+ --tds-checkbox-input-icon:none;
291
+ --tds-checkbox-input-icon-visibility:hidden;
292
+ --tds-checkbox-input-icon-opacity:0;
293
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
362
294
 
363
- @layer t-critical{
364
- tds-page-header:not(.hydrated){
365
- display:none;
366
- }
367
- }
368
-
369
- @layer t-component{
370
- .tds-page-header{
371
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
- --tds-page-header-color:var(--t-text-color);
374
- --tds-page-header-bottom-border-color:transparent;
375
- --tds-page-header-headline-color:var(--t-text-color-headline);
376
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
- --tds-page-header-padding-x:var(--t-spacing-2);
378
- --tds-page-header-padding-y:var(--t-spacing-2);
379
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
- --tds-page-header-nav-gap:var(--t-spacing-1);
381
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
382
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
- --tds-page-header-nav-item-border-width:1px;
387
-
388
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
295
+ --tds-checkbox-label-color:var(--t-form-color);
390
296
 
391
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
392
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
393
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
297
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
298
+ --tds-checkbox-description-line-height:1.35;
299
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
300
+ --tds-checkbox-description-invalid-icon-display:none;
394
301
 
395
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
396
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
302
+ position:relative;
303
+ display:inline-grid;
304
+ grid-template-columns:auto;
305
+ grid-auto-columns:1fr;
306
+ gap:var(--t-spacing-fourth) 0;
307
+ line-height:var(--tds-checkbox-line-height);
308
+ -webkit-user-select:none;
309
+ -moz-user-select:none;
310
+ user-select:none;
311
+ }
397
312
 
398
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
399
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
400
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
313
+ .tds-checkbox label{
314
+ grid-area:1 / 2;
315
+ padding-inline-start:var(--t-spacing-1);
316
+ font-size:var(--tds-checkbox-font-size);
317
+ font-weight:var(--t-font-weight-normal);
318
+ color:var(--tds-checkbox-label-color);
319
+ cursor:var(--tds-checkbox-cursor);
320
+ }
401
321
 
402
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
403
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
404
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
405
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
406
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
322
+ .tds-checkbox tds-indeterminate{
323
+ display:flex;
407
324
  }
408
325
 
409
- .tds-page-header--profile{
410
- --tds-page-header-padding-y:20px;
326
+ .tds-checkbox input[type="checkbox"]{
327
+ position:relative;
328
+ width:1em;
329
+ height:1em;
330
+ margin:calc((1lh - 1em) / 2) 0 0;
331
+ font-size:var(--tds-checkbox-font-size);
332
+ line-height:inherit;
333
+ -webkit-appearance:none;
334
+ -moz-appearance:none;
335
+ appearance:none;
336
+ cursor:var(--tds-checkbox-cursor);
337
+ background-color:var(--tds-checkbox-input-background-color);
338
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
339
+ border-radius:var(--tds-checkbox-input-border-radius);
340
+ transition-timing-function:var(--t-ease-in-out);
341
+ transition-duration:var(--t-duration-200);
342
+ transition-property:var(--tds-checkbox-transition-property);
411
343
  }
412
344
 
413
- @supports (color: light-dark(#fff, #000)){
414
- .tds-page-header{
415
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
416
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
345
+ :is(.tds-checkbox input[type="checkbox"])::before{
346
+ position:absolute;
347
+ top:50%;
348
+ left:50%;
349
+ visibility:var(--tds-checkbox-input-icon-visibility);
350
+ width:100%;
351
+ height:100%;
352
+ content:"";
353
+ background-color:var(--tds-checkbox-input-icon-fill);
354
+ border-radius:var(--tds-checkbox-input-border-radius);
355
+ opacity:var(--tds-checkbox-input-icon-opacity);
356
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
357
+ mask-image:var(--tds-checkbox-input-icon);
358
+ -webkit-mask-repeat:no-repeat;
359
+ mask-repeat:no-repeat;
360
+ -webkit-mask-size:contain;
361
+ mask-size:contain;
362
+ transform:translate(-50%, -50%);
417
363
  }
418
- }
419
364
 
420
- @media (min-width: 600px){
421
- .tds-page-header{
422
- --tds-page-header-background-color:var(--t-surface-color-canvas);
423
- --tds-page-header-color:var(--t-text-color-secondary);
424
- --tds-page-header-bottom-border-color:var(--t-border-color);
425
- --tds-page-header-padding-x:var(--t-spacing-3);
426
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
- --tds-page-header-nav-gap:var(--t-spacing-half);
428
- --tds-page-header-nav-background:transparent;
429
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
- --tds-page-header-nav-item-border-width:1px;
431
- --tds-page-header-nav-item-color:var(--t-text-color);
432
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
434
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
435
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
436
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
437
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
365
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
366
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
367
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
438
368
  }
439
- }
440
- }
441
369
 
442
- .tds-page-header{
443
- display:flex;
444
- flex-direction:column;
445
- padding-top:var(--tds-page-header-padding-y);
446
- color:var(--tds-page-header-color);
447
- background:var(--tds-page-header-background-color);
448
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
449
- }
370
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
371
+ outline:var(--t-focus-ring-outline);
372
+ outline-offset:var(--t-focus-ring-offset);
373
+ }
450
374
 
451
- .tds-page-header:not(.has-nav){
452
- padding-bottom:var(--tds-page-header-padding-y);
453
- }
375
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
376
+ pointer-events:none;
377
+ }
454
378
 
455
- .tds-page-header.inactive{
456
- background:var(--tds-page-header-background-color-inactive);
457
- }
379
+ @media (prefers-reduced-motion: reduce){
458
380
 
459
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
460
- width:100%;
381
+ .tds-checkbox input[type="checkbox"]{
382
+ --tds-checkbox-transition-property:none;
461
383
  }
384
+ }
462
385
 
463
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
464
- display:flex;
465
- flex-flow:row wrap;
466
- gap:var(--t-spacing-half) var(--t-spacing-1);
467
- align-items:flex-start;
468
- justify-content:flex-start;
469
- min-width:0;
386
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
387
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
388
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
389
+ --tds-checkbox-input-icon-visibility:visible;
390
+ --tds-checkbox-input-icon-opacity:1;
470
391
  }
471
392
 
472
- :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{
473
- display:flex;
474
- gap:var(--tds-page-header-nav-gap);
475
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
476
- margin:0 0 -1px;
477
- overflow:auto;
478
- list-style:none;
479
- background:var(--tds-page-header-nav-background);
393
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
394
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
395
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
480
396
  }
481
397
 
482
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
483
- position:relative;
484
- display:inline-flex;
485
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
486
- font-size:var(--t-font-size-sm);
487
- line-height:22px;
488
- color:var(--tds-page-header-nav-item-color);
489
- white-space:nowrap;
490
- text-decoration:none;
491
- -webkit-appearance:none;
492
- -moz-appearance:none;
493
- appearance:none;
494
- cursor:pointer;
495
- outline-offset:-2px;
496
- background-color:var(--tds-page-header-nav-item-background-color);
497
- background-clip:padding-box;
498
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
499
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
500
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
501
- }
398
+ .tds-checkbox:has(input:checked){
399
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
400
+ }
502
401
 
503
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
504
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
505
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
506
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
507
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
508
- }
402
+ .tds-checkbox:has(input:indeterminate){
403
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
404
+ }
509
405
 
510
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
511
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
512
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
513
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
514
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
515
- }
406
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
407
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
408
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
409
+ --tds-checkbox-description-invalid-icon-display:inline-block;
410
+ }
516
411
 
517
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
518
- background-color:var(--tds-page-header-nav-item-background-color-active);
519
- border-color:var(--tds-page-header-nav-item-border-color-active);
520
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
521
- }
412
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
413
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
414
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
415
+ }
522
416
 
523
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
524
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
525
- color:var(--tds-page-header-nav-item-color-disabled);
526
- cursor:not-allowed;
527
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
528
- opacity:1;
529
- }
417
+ :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{
418
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
419
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
420
+ }
530
421
 
531
- @media (min-width: 600px){
532
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
533
- position:absolute;
534
- inset:auto -1px -1px;
535
- height:1px;
536
- pointer-events:none;
537
- content:"";
538
- background-color:var(--tds-page-header-bottom-border-color);
539
- }
540
- }
422
+ :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){
423
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
424
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
425
+ }
541
426
 
542
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
543
- position:relative;
427
+ .tds-checkbox:has(input:required) label::after{
428
+ margin-left:.25ch;
429
+ color:var(--t-text-color-status-error);
430
+ content:"*";
544
431
  }
545
432
 
546
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
547
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
548
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
549
- }
433
+ .tds-checkbox:has(input:disabled){
434
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
435
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
550
436
 
551
- :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{
552
- position:absolute;
553
- top:-5px;
554
- right:-2px;
555
- width:10px;
556
- height:10px;
557
- content:"";
558
- background:var(--tds-page-header-nav-item-indicator-color);
559
- border-radius:50%;
560
- }
437
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
438
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
439
+ --tds-checkbox-cursor:not-allowed;
440
+ }
561
441
 
562
- @media (prefers-reduced-motion: no-preference){
563
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
564
- animation:indicator-pulse 1.25s ease infinite;
565
- }
566
- }
442
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
443
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
444
+ }
567
445
 
568
- .tds-page-header__title-bar{
446
+ .tds-checkbox-description{
569
447
  display:flex;
570
- flex-direction:column;
571
- gap:var(--t-spacing-2) var(--t-spacing-1);
448
+ grid-area:2 / 2;
449
+ gap:var(--t-spacing-half);
572
450
  align-items:flex-start;
573
- justify-content:space-between;
574
- padding:0 var(--tds-page-header-padding-x);
451
+ padding-inline-start:var(--t-spacing-1);
452
+ margin:0;
453
+ font-size:var(--tds-checkbox-description-font-size);
454
+ line-height:var(--tds-checkbox-description-line-height);
455
+ color:var(--tds-checkbox-description-color);
456
+ cursor:text;
575
457
  }
576
458
 
577
- .tds-page-header--profile > .tds-page-header__title-bar{
578
- align-items:center;
459
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
460
+ display:var(--tds-checkbox-description-invalid-icon-display);
461
+ flex-shrink:0;
462
+ margin-top:calc(.5lh - .5em);
463
+ line-height:var(--tds-checkbox-description-line-height);
464
+ }
465
+
466
+ .tds-checkbox--sm{
467
+ --tds-checkbox-line-height:1.35;
468
+ --tds-checkbox-input-size:var(--t-element-size-sm);
469
+ --tds-checkbox-font-size:var(--t-font-size-sm);
470
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
471
+ --tds-checkbox-description-line-height:1.3;
472
+ }
473
+
474
+
475
+ @media (prefers-reduced-motion: no-preference){
476
+
477
+ :root{
478
+ interpolate-size:allow-keywords;
479
+ }
579
480
  }
580
481
 
581
- .tds-page-header__primary{
582
- width:100%;
583
- }
482
+ @layer tds-component{
483
+ tds-sidenav,
484
+ .tds-sidenav{
485
+ --tds-sidenav-indent:12px;
486
+ --tds-sidenav-item-depth:0;
487
+
488
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
489
+
490
+ --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;
491
+ --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;
492
+ --tds-sidenav-collapse-closed-opacity:0;
493
+ --tds-sidenav-collapse-open-opacity:1;
494
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
495
+ --tds-sidenav-collapse-open-transform:translateY(0);
496
+
497
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
498
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
499
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
500
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
584
501
 
585
- .tds-page-header__primary h1{
586
- margin:0;
587
- font-size:var(--tds-page-header-headline-font-size);
588
- font-weight:var(--t-font-weight-normal);
589
- line-height:32px;
590
- color:var(--tds-page-header-headline-color);
591
- overflow-wrap:break-word;
592
- }
502
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
503
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
504
+ --tds-sidenav-item-nested-background-selected:transparent;
593
505
 
594
- @media (min-width: 960px){
595
- .tds-page-header__primary{
596
- flex:1 1 max-content;
597
- width:auto;
598
- min-width:0;
599
- max-width:100%;
600
- }
506
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
507
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
508
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
601
509
 
602
- .tds-page-header__title-bar,
603
- .tds-page-header--profile .tds-page-header__title-bar{
604
- flex-flow:row nowrap;
605
- row-gap:12px;
606
- align-items:flex-start;
510
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
511
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
607
512
  }
608
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
609
- width:auto;
610
- }
611
513
 
612
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
613
- justify-content:flex-end;
514
+ @media (prefers-reduced-motion: reduce){
515
+ tds-sidenav,
516
+ .tds-sidenav{
517
+ --tds-sidenav-collapse-transition-enter:none;
518
+ --tds-sidenav-collapse-transition-exit:none;
519
+ --tds-sidenav-collapse-closed-transform:none;
520
+ --tds-sidenav-collapse-open-transform:none;
521
+ }
614
522
  }
615
- }
616
-
617
- .tds-page-header-phone,
618
- .tds-page-header-email{
619
- color:var(--tds-page-header-color);
620
- white-space:nowrap;
621
- }
622
523
 
623
- .tds-page-header-email{
624
- max-width:100%;
625
- overflow:hidden;
626
- text-overflow:ellipsis;
524
+ .tds-sidenav--theme-gray{
525
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
526
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
527
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
528
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
529
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
530
+ }
627
531
  }
628
532
 
629
- @keyframes indicator-pulse{
630
- 0%{
631
- opacity:.3;
632
- transform:scale(.9);
533
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
534
+ display:flex;
633
535
  }
634
536
 
635
- 100%{
636
- opacity:0;
637
- transform:scale(1.75);
537
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
538
+ flex-direction:column;
539
+ gap:var(--t-spacing-half);
540
+ width:100%;
638
541
  }
639
- }
640
542
 
641
- .tds-checkbox-group{
642
- --tds-checkbox-group-font-size:var(--t-font-size-md);
643
- --tds-checkbox-group-line-height:1.4;
644
- --tds-checkbox-group-gap:var(--t-spacing-1);
645
-
646
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
647
- --tds-checkbox-group-description-line-height:1.35;
648
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
649
- --tds-checkbox-group-description-invalid-icon-display:none;
650
- display:flex;
651
- flex-direction:column;
652
- gap:0;
543
+ .tds-sidenav-section-list{
544
+ width:100%;
653
545
  padding:0;
654
546
  margin:0;
547
+ list-style:none;
548
+ }
655
549
 
656
- font-size:var(--tds-checkbox-group-font-size);
657
- line-height:var(--tds-checkbox-group-line-height);
658
- border:0;
550
+ .tds-sidenav-section-header{
551
+ display:flex;
552
+ align-items:baseline;
553
+ justify-content:space-between;
554
+ padding-top:var(--t-spacing-2);
659
555
  }
660
556
 
661
- .tds-checkbox-group legend{
662
- float:left;
663
- padding:0;
557
+ .tds-sidenav-section-header h2{
664
558
  margin:0;
559
+ font-size:var(--t-font-size-sm);
560
+ font-weight:var(--t-font-weight-semibold);
561
+ line-height:1.35;
562
+ color:var(--t-text-color-secondary);
563
+ text-transform:uppercase;
665
564
  }
666
565
 
667
- .tds-checkbox-group[aria-invalid="true"]{
668
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
669
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
566
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
567
+ padding-top:0;
670
568
  }
671
569
 
672
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
673
- margin-left:.25ch;
674
- color:var(--t-text-color-status-error);
675
- content:"*";
676
- }
677
-
678
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
679
- content:none;
680
- }
570
+ .tds-sidenav-section-header [slot="label-actions"]{
571
+ display:flex;
572
+ gap:var(--t-spacing-half);
573
+ align-items:center;
574
+ }
681
575
 
682
- .tds-checkbox-group-fields{
576
+ .tds-sidenav-section [slot="section-actions"]{
683
577
  display:flex;
684
- flex-direction:column;
685
- gap:var(--tds-checkbox-group-gap);
686
- align-items:flex-start;
687
- margin-top:var(--t-spacing-1);
578
+ gap:12px;
579
+ align-items:center;
580
+ min-height:42px;
581
+ padding:var(--t-spacing-1) 0;
688
582
  }
689
583
 
690
- .tds-checkbox-group-description{
691
- display:flex;
692
- gap:var(--t-spacing-half);
693
- align-items:flex-start;
694
- margin:var(--t-spacing-fourth) 0 0;
695
- font-size:var(--tds-checkbox-group-description-font-size);
696
- line-height:var(--tds-checkbox-group-description-line-height);
697
- color:var(--tds-checkbox-group-description-color);
698
- cursor:text;
584
+ .tds-sidenav-section-list,
585
+ .tds-sidenav-item{
586
+ width:100%;
587
+ padding:0;
588
+ margin:0;
699
589
  }
700
590
 
701
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
702
- display:var(--tds-checkbox-group-description-invalid-icon-display);
703
- flex-shrink:0;
704
- margin-top:calc(.5lh - .5em);
705
- line-height:var(--tds-checkbox-group-description-line-height);
591
+ .tds-sidenav-item :is(a,button){
592
+ position:relative;
593
+ display:flex;
594
+ gap:12px;
595
+ align-items:center;
596
+ width:100%;
597
+ padding:12px;
598
+ overflow:hidden;
599
+ font-size:var(--t-font-size-sm);
600
+ line-height:18px;
601
+ color:var(--t-text-color-headline);
602
+ white-space:nowrap;
603
+ text-decoration:none;
604
+ -webkit-appearance:none;
605
+ -moz-appearance:none;
606
+ appearance:none;
607
+ cursor:pointer;
608
+ background-color:var(--tds-sidenav-item-background, transparent);
609
+ border:0;
610
+ border-radius:var(--t-border-radius);
611
+ transition:var(--tds-sidenav-item-transition);
706
612
  }
707
613
 
708
- .tds-checkbox-group--sm{
709
- --tds-checkbox-group-line-height:1.35;
710
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
711
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
712
- --tds-checkbox-group-description-line-height:1.3;
713
- }
614
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
615
+ display:block;
616
+ flex:1;
617
+ overflow:hidden;
618
+ text-overflow:ellipsis;
619
+ text-align:left;
620
+ white-space:nowrap;
621
+ }
714
622
 
715
- .tds-checkbox{
716
- --tds-checkbox-font-size:var(--t-font-size-md);
717
- --tds-checkbox-cursor:pointer;
718
- --tds-checkbox-line-height:1.4;
719
- --tds-checkbox-transition-property:background-color, border-color;
623
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
624
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
625
+ color:var(--t-text-color-headline);
626
+ text-decoration:none;
627
+ }
720
628
 
721
- --tds-checkbox-input-size:var(--t-element-size-md);
722
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
723
- --tds-checkbox-input-border-color:var(--t-form-border-color);
724
- --tds-checkbox-input-background-color:var(--t-form-background-color);
629
+ :is(.tds-sidenav-item :is(a,button)):active{
630
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
631
+ }
725
632
 
726
- --tds-checkbox-input-icon:none;
727
- --tds-checkbox-input-icon-visibility:hidden;
728
- --tds-checkbox-input-icon-opacity:0;
729
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
633
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
634
+ overflow:hidden;
635
+ color:var(--tds-sidenav-item-icon-color);
636
+ }
730
637
 
731
- --tds-checkbox-label-color:var(--t-form-color);
638
+ :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{
639
+ display:block;
640
+ width:var(--tds-sidenav-item-icon-size);
641
+ height:var(--tds-sidenav-item-icon-size);
642
+ }
732
643
 
733
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
734
- --tds-checkbox-description-line-height:1.35;
735
- --tds-checkbox-description-color:var(--t-text-color-secondary);
736
- --tds-checkbox-description-invalid-icon-display:none;
644
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
645
+ --tds-sidenav-indent:19px;
646
+ }
737
647
 
738
- position:relative;
739
- display:inline-grid;
740
- grid-template-columns:auto;
741
- grid-auto-columns:1fr;
742
- gap:var(--t-spacing-fourth) 0;
743
- line-height:var(--tds-checkbox-line-height);
744
- -webkit-user-select:none;
745
- -moz-user-select:none;
746
- user-select:none;
747
- }
648
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
649
+ visibility:visible;
650
+ block-size:auto;
651
+ opacity:1;
652
+ }
748
653
 
749
- .tds-checkbox label{
750
- grid-area:1 / 2;
751
- padding-inline-start:var(--t-spacing-1);
752
- font-size:var(--tds-checkbox-font-size);
753
- font-weight:var(--t-font-weight-normal);
754
- color:var(--tds-checkbox-label-color);
755
- cursor:var(--tds-checkbox-cursor);
654
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
655
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
656
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
657
+
658
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
659
+ font-weight:var(--t-font-weight-semibold);
756
660
  }
757
661
 
758
- .tds-checkbox tds-indeterminate{
662
+ .tds-sidenav-item:has(.tds-sidenav-section){
759
663
  display:flex;
664
+ flex-direction:column;
665
+ gap:var(--t-spacing-half);
760
666
  }
761
667
 
762
- .tds-checkbox input[type="checkbox"]{
763
- position:relative;
764
- width:1em;
765
- height:1em;
766
- margin:calc((1lh - 1em) / 2) 0 0;
767
- font-size:var(--tds-checkbox-font-size);
768
- line-height:inherit;
769
- -webkit-appearance:none;
770
- -moz-appearance:none;
771
- appearance:none;
772
- cursor:var(--tds-checkbox-cursor);
773
- background-color:var(--tds-checkbox-input-background-color);
774
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
775
- border-radius:var(--tds-checkbox-input-border-radius);
776
- transition-timing-function:var(--t-ease-in-out);
777
- transition-duration:var(--t-duration-200);
778
- transition-property:var(--tds-checkbox-transition-property);
668
+ .tds-sidenav-item .tds-sidenav-section-list{
669
+ --tds-sidenav-item-depth:1;
670
+ gap:0;
779
671
  }
780
672
 
781
- :is(.tds-checkbox input[type="checkbox"])::before{
782
- position:absolute;
783
- top:50%;
784
- left:50%;
785
- visibility:var(--tds-checkbox-input-icon-visibility);
786
- width:100%;
787
- height:100%;
788
- content:"";
789
- background-color:var(--tds-checkbox-input-icon-fill);
790
- border-radius:var(--tds-checkbox-input-border-radius);
791
- opacity:var(--tds-checkbox-input-icon-opacity);
792
- -webkit-mask-image:var(--tds-checkbox-input-icon);
793
- mask-image:var(--tds-checkbox-input-icon);
794
- -webkit-mask-repeat:no-repeat;
795
- mask-repeat:no-repeat;
796
- -webkit-mask-size:contain;
797
- mask-size:contain;
798
- transform:translate(-50%, -50%);
673
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
674
+ visibility:hidden;
675
+ block-size:0;
676
+ overflow-y:clip;
677
+ opacity:0;
678
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
799
679
  }
800
680
 
801
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
802
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
803
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
681
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
682
+ --tds-sidenav-item-depth:2;
804
683
  }
805
684
 
806
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
807
- outline:var(--t-focus-ring-outline);
808
- outline-offset:var(--t-focus-ring-offset);
685
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
686
+ min-height:var(--t-element-size-2xl);
687
+ padding-block:9px;
688
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
689
+ line-height:1;
690
+ background-color:transparent;
809
691
  }
810
692
 
811
- :is(.tds-checkbox input[type="checkbox"]):disabled{
812
- pointer-events:none;
813
- }
693
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
694
+ position:absolute;
695
+ top:0;
696
+ bottom:0;
697
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
698
+ width:2px;
699
+ content:"";
700
+ background-color:var(--tds-sidenav-item-nested-border-color);
701
+ transition:var(--tds-sidenav-item-transition);
702
+ }
814
703
 
815
- @media (prefers-reduced-motion: reduce){
704
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
705
+ position:absolute;
706
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
707
+ z-index:-1;
708
+ height:100%;
709
+ content:"";
710
+ background-color:var(--tds-sidenav-item-nested-background);
711
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
712
+ transition:var(--tds-sidenav-item-transition);
713
+ }
816
714
 
817
- .tds-checkbox input[type="checkbox"]{
818
- --tds-checkbox-transition-property:none;
819
- }
820
- }
715
+ :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)){
716
+ display:block;
717
+ text-align:left;
718
+ white-space:normal;
719
+ }
821
720
 
822
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
823
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
824
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
825
- --tds-checkbox-input-icon-visibility:visible;
826
- --tds-checkbox-input-icon-opacity:1;
827
- }
721
+ :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{
722
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
723
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
724
+ }
828
725
 
829
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
830
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
831
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
726
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
727
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
728
+ }
729
+
730
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
731
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
732
+ font-weight:var(--t-font-weight-medium);
832
733
  }
833
734
 
834
- .tds-checkbox:has(input:checked){
835
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
735
+ .tds-sidenav-responsive-header{
736
+ display:flex;
737
+ gap:var(--t-spacing-2);
738
+ align-items:center;
739
+ width:100%;
740
+ }
741
+
742
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
743
+ order:0;
836
744
  }
837
745
 
838
- .tds-checkbox:has(input:indeterminate){
839
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
746
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
747
+ flex:1;
748
+ order:1;
749
+ margin:0;
750
+ font-size:var(--t-font-size-lg);
751
+ font-weight:var(--t-font-weight-medium);
752
+ color:var(--t-text-color-headline);
840
753
  }
841
754
 
842
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
843
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
844
- --tds-checkbox-description-color:var(--t-text-color-status-error);
845
- --tds-checkbox-description-invalid-icon-display:inline-block;
755
+ @media (max-width: 719px){
756
+ .tds-sidenav-collapse{
757
+ z-index:10001;
758
+ display:none;
759
+ max-width:min(448px, calc(100vw - 48px));
760
+ padding:0;
761
+ margin:12px 0;
762
+ position-area:bottom span-right;
763
+ overflow:hidden;
764
+ outline:0;
765
+ background:var(--t-surface-color-card);
766
+ border:0;
767
+ border-radius:6px;
768
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
769
+ opacity:var(--tds-sidenav-collapse-open-opacity);
770
+ transform:var(--tds-sidenav-collapse-open-transform);
771
+ transition:var(--tds-sidenav-collapse-transition-enter);
772
+ will-change:transform;
846
773
  }
847
774
 
848
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
849
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
850
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
775
+ .tds-sidenav-scroll-container{
776
+ --webkit-overflow-scrolling:touch;
777
+ display:block;
778
+ width:100%;
779
+ height:-moz-fit-content;
780
+ height:fit-content;
781
+ padding:var(--t-spacing-2);
782
+ overflow-y:auto;
783
+ }
784
+
785
+ .tds-sidenav-item :is(a, button) :is(.prefix){
786
+ display:none;
787
+ }
788
+ @supports selector(:popover-open){
789
+ .tds-sidenav-collapse:popover-open{
790
+ display:flex;
851
791
  }
852
792
 
853
- :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{
854
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
855
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
793
+ .tds-sidenav-collapse:not(:popover-open){
794
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
795
+ transition:var(--tds-sidenav-collapse-transition-exit);
856
796
  }
857
797
 
858
- :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){
859
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
860
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
798
+ @starting-style{
799
+ .tds-sidenav-collapse:popover-open{
800
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
801
+ transform:var(--tds-sidenav-collapse-closed-transform);
861
802
  }
862
-
863
- .tds-checkbox:has(input:required) label::after{
864
- margin-left:.25ch;
865
- color:var(--t-text-color-status-error);
866
- content:"*";
867
803
  }
868
-
869
- .tds-checkbox:has(input:disabled){
870
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
871
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
872
-
873
- --tds-checkbox-label-color:var(--t-form-color-disabled);
874
- --tds-checkbox-description-color:var(--t-form-color-disabled);
875
- --tds-checkbox-cursor:not-allowed;
876
804
  }
877
-
878
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
879
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
805
+ @supports not selector(:popover-open){
806
+ .tds-sidenav-collapse.\:popover-open{
807
+ display:flex;
880
808
  }
881
809
 
882
- .tds-checkbox-description{
883
- display:flex;
884
- grid-area:2 / 2;
885
- gap:var(--t-spacing-half);
886
- align-items:flex-start;
887
- padding-inline-start:var(--t-spacing-1);
888
- margin:0;
889
- font-size:var(--tds-checkbox-description-font-size);
890
- line-height:var(--tds-checkbox-description-line-height);
891
- color:var(--tds-checkbox-description-color);
892
- cursor:text;
810
+ .tds-sidenav-collapse:not(.\:popover-open){
811
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
812
+ transition:var(--tds-sidenav-collapse-transition-exit);
813
+ }
814
+ }
893
815
  }
894
816
 
895
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
896
- display:var(--tds-checkbox-description-invalid-icon-display);
897
- flex-shrink:0;
898
- margin-top:calc(.5lh - .5em);
899
- line-height:var(--tds-checkbox-description-line-height);
817
+ @media (min-width: 720px){
818
+ .tds-sidenav-responsive-header{
819
+ display:none;
900
820
  }
901
-
902
- .tds-checkbox--sm{
903
- --tds-checkbox-line-height:1.35;
904
- --tds-checkbox-input-size:var(--t-element-size-sm);
905
- --tds-checkbox-font-size:var(--t-font-size-sm);
906
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
907
- --tds-checkbox-description-line-height:1.3;
908
821
  }
909
822
 
823
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
824
+ display:none;
825
+ }
826
+
827
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
828
+ display:block;
829
+ }
830
+
831
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
832
+ display:flex;
833
+ flex-direction:column;
834
+ }
835
+
910
836
  .tds-combo-box{
911
837
  --tds-combo-box-button-offset:4px;
912
838
  }
@@ -1089,30 +1015,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1089
1015
  color:var(--t-text-color-secondary);
1090
1016
  }
1091
1017
 
1092
-
1093
- :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{
1094
- -webkit-appearance:none;
1095
- appearance:none;
1096
- }
1097
-
1098
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1099
- inline-size:1em;
1100
- block-size:2em;
1101
- }
1102
-
1103
- @supports (field-sizing: content){
1104
- .tds-input--auto-width{
1105
- inline-size:-moz-fit-content;
1106
- inline-size:fit-content;
1107
- min-inline-size:min(100%, 122px);
1108
- }
1109
-
1110
- .tds-input--auto-width input{
1111
- field-sizing:content;
1112
- inline-size:auto;
1113
- }
1114
- }
1115
-
1116
1018
  .tds-date-picker{
1117
1019
  --tds-date-picker-button-offset:4px;
1118
1020
  }
@@ -1469,56 +1371,36 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1469
1371
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
1470
1372
  }
1471
1373
 
1472
- .tds-number-stepper{
1473
- --tds-number-stepper-button-offset:4px;
1474
- --tds-number-stepper-button-gap:2px;
1475
- }
1476
-
1477
- .tds-number-stepper--lg{
1478
- --tds-number-stepper-button-offset:5px;
1479
- --tds-number-stepper-button-gap:4px;
1480
- }
1481
1374
 
1482
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1483
- display:none;
1484
- }
1375
+ :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{
1376
+ -webkit-appearance:none;
1377
+ appearance:none;
1378
+ }
1485
1379
 
1486
- .tds-number-stepper-input{
1487
- display:flex;
1488
- flex:1;
1489
- align-items:center;
1490
- min-inline-size:0;
1491
- padding-block:var(--tds-field-padding-block);
1492
- padding-inline:var(--tds-field-padding-inline);
1493
- font-family:inherit;
1494
- font-size:inherit;
1495
- color:inherit;
1496
- outline:0;
1497
- background:transparent;
1498
- border:0;
1499
- }
1380
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1381
+ inline-size:1em;
1382
+ block-size:2em;
1383
+ }
1500
1384
 
1501
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1502
- margin:0;
1503
- -webkit-appearance:none;
1504
- appearance:none;
1385
+ @supports (field-sizing: content){
1386
+ .tds-input--auto-width{
1387
+ inline-size:-moz-fit-content;
1388
+ inline-size:fit-content;
1389
+ min-inline-size:min(100%, 122px);
1505
1390
  }
1506
1391
 
1507
- .tds-number-stepper-button{
1508
- flex-shrink:0;
1509
- align-self:center;
1510
- inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1511
- block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1512
- padding:0;
1513
- }
1514
-
1515
- .tds-number-stepper-button + .tds-number-stepper-button{
1516
- margin-inline-start:var(--tds-number-stepper-button-gap);
1392
+ .tds-input--auto-width input{
1393
+ field-sizing:content;
1394
+ inline-size:auto;
1517
1395
  }
1396
+ }
1518
1397
 
1519
- .tds-number-stepper-button:last-of-type{
1520
- margin-inline-end:var(--tds-number-stepper-button-offset);
1521
- }
1398
+ .tds-time-field-input{
1399
+ --tds-field-date-segment-padding-inline:1px;
1400
+ padding-block:var(--tds-field-padding-block);
1401
+ padding-inline:var(--tds-field-padding-inline);
1402
+ font-variant-numeric:tabular-nums;
1403
+ }
1522
1404
 
1523
1405
  .tds-radio{
1524
1406
  --tds-radio-font-size:var(--t-font-size-md);
@@ -1653,6 +1535,57 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1653
1535
  --tds-radio-description-line-height:1.3;
1654
1536
  }
1655
1537
 
1538
+ .tds-number-stepper{
1539
+ --tds-number-stepper-button-offset:4px;
1540
+ --tds-number-stepper-button-gap:2px;
1541
+ }
1542
+
1543
+ .tds-number-stepper--lg{
1544
+ --tds-number-stepper-button-offset:5px;
1545
+ --tds-number-stepper-button-gap:4px;
1546
+ }
1547
+
1548
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
1549
+ display:none;
1550
+ }
1551
+
1552
+ .tds-number-stepper-input{
1553
+ display:flex;
1554
+ flex:1;
1555
+ align-items:center;
1556
+ min-inline-size:0;
1557
+ padding-block:var(--tds-field-padding-block);
1558
+ padding-inline:var(--tds-field-padding-inline);
1559
+ font-family:inherit;
1560
+ font-size:inherit;
1561
+ color:inherit;
1562
+ outline:0;
1563
+ background:transparent;
1564
+ border:0;
1565
+ }
1566
+
1567
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
1568
+ margin:0;
1569
+ -webkit-appearance:none;
1570
+ appearance:none;
1571
+ }
1572
+
1573
+ .tds-number-stepper-button{
1574
+ flex-shrink:0;
1575
+ align-self:center;
1576
+ inline-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1577
+ block-size:calc(var(--tds-field-min-height) - (var(--tds-number-stepper-button-offset) * 2));
1578
+ padding:0;
1579
+ }
1580
+
1581
+ .tds-number-stepper-button + .tds-number-stepper-button{
1582
+ margin-inline-start:var(--tds-number-stepper-button-gap);
1583
+ }
1584
+
1585
+ .tds-number-stepper-button:last-of-type{
1586
+ margin-inline-end:var(--tds-number-stepper-button-offset);
1587
+ }
1588
+
1656
1589
  .tds-radio-group{
1657
1590
  --tds-radio-group-font-size:var(--t-font-size-md);
1658
1591
  --tds-radio-group-line-height:1.4;
@@ -1736,540 +1669,607 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1736
1669
  --tds-radio-group-description-line-height:1.3;
1737
1670
  }
1738
1671
 
1739
- .tds-input:has(textarea){
1740
- --tds-input-padding-block:6px;
1741
- --tds-input-resizer-size:var(--t-element-size-sm);
1742
- --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");
1743
- }
1672
+ .tds-input{
1673
+ --tds-input-border-color:var(--t-form-border-color);
1674
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1675
+ --tds-input-background-color:var(--t-form-background-color);
1676
+ --tds-input-color:var(--t-form-color);
1677
+ --tds-input-font-size:var(--t-font-size-md);
1678
+ --tds-input-description-color:var(--t-text-color-secondary);
1679
+ --tds-input-description-invalid-icon-display:none;
1680
+ --tds-input-min-height:var(--t-container-size-md);
1681
+ --tds-input-padding-inline:var(--t-spacing-1);
1744
1682
 
1745
- @supports (x: attr(x type(*))){
1683
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1746
1684
 
1747
- .tds-input textarea{
1748
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1685
+ display:flex;
1686
+ flex-direction:column;
1687
+ gap:var(--t-spacing-half);
1749
1688
  }
1750
- }
1751
-
1752
- .tds-input.tds-textarea--resize-vertical textarea{
1753
- resize:vertical;
1754
- }
1755
1689
 
1756
- .tds-input.tds-textarea--resize-none textarea{
1757
- resize:none;
1758
- }
1690
+ .tds-input label{
1691
+ font-size:var(--t-font-size-md);
1692
+ font-weight:var(--t-font-weight-normal);
1693
+ color:var(--t-text-color);
1694
+ }
1759
1695
 
1760
- .tds-input.tds-textarea--resize-auto textarea{
1761
- resize:vertical;
1762
- }
1696
+ .tds-input :is(input,textarea){
1697
+ inline-size:100%;
1698
+ block-size:auto;
1699
+ min-block-size:var(--tds-input-min-height);
1700
+ padding-block:var(--tds-input-padding-block);
1701
+ padding-inline:var(--tds-input-padding-inline);
1702
+ font-family:inherit;
1703
+ font-size:var(--tds-input-font-size);
1704
+ color:var(--tds-input-color);
1705
+ -webkit-appearance:none;
1706
+ -moz-appearance:none;
1707
+ appearance:none;
1708
+ outline:var(--t-focus-ring-width) solid transparent;
1709
+ outline-offset:0;
1710
+ background-color:var(--tds-input-background-color);
1711
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
1712
+ border-radius:var(--t-form-border-radius);
1713
+ transition-timing-function:var(--t-ease-in-out);
1714
+ transition-duration:var(--t-duration-200);
1715
+ transition-property:var(--tds-input-transition-property);
1716
+ }
1763
1717
 
1764
- @supports (field-sizing: content){
1765
- .tds-input.tds-textarea--resize-auto textarea{
1766
- field-sizing:content;
1767
- resize:none;
1768
- }
1718
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1719
+ border-color:var(--tds-input-border-color-hover);
1769
1720
  }
1770
1721
 
1771
- .tds-input textarea{
1772
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1773
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1774
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1775
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1776
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1777
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1778
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1779
- --tds-input-scrollbar-thumb-border-radius:999px;
1780
- --tds-input-scrollbar-thumb-border-width:3px;
1781
- --tds-input-scrollbar-track-margin-block:.125rem;
1782
- scrollbar-color:initial;
1783
- transition-timing-function:var(--t-ease-in-out);
1784
- transition-duration:var(--t-duration-200);
1785
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1786
- }
1787
-
1788
- @media (pointer: fine){
1789
- :is(.tds-input textarea)::-webkit-scrollbar{
1790
- width:12px;
1791
- height:12px;
1792
- cursor:default;
1722
+ :is(.tds-input :is(input,textarea)):focus{
1723
+ outline-color:transparent;
1793
1724
  }
1794
1725
 
1795
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1796
- cursor:default;
1797
- background:var(--tds-input-scrollbar-thumb-color);
1798
- background-clip:content-box;
1799
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1800
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1726
+ :is(.tds-input :is(input,textarea)):focus-visible{
1727
+ outline-color:var(--t-focus-ring-color);
1728
+ outline-offset:var(--t-focus-ring-offset);
1729
+ border-color:var(--t-form-border-color-focus);
1801
1730
  }
1802
1731
 
1803
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1804
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1732
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
1733
+ color:var(--t-form-placeholder-color);
1734
+ -moz-user-select:none;
1735
+ user-select:none;
1805
1736
  }
1806
1737
 
1807
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1808
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1738
+ :is(.tds-input :is(input,textarea))::placeholder{
1739
+ color:var(--t-form-placeholder-color);
1740
+ -webkit-user-select:none;
1741
+ -moz-user-select:none;
1742
+ user-select:none;
1809
1743
  }
1810
1744
 
1811
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1812
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1813
- }
1745
+ @media (prefers-reduced-motion: reduce){
1814
1746
 
1815
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1816
- background:var(--tds-input-scrollbar-surface-color);
1747
+ .tds-input :is(input,textarea){
1748
+ --tds-input-transition-property:none;
1749
+ }
1817
1750
  }
1818
1751
 
1819
- :is(.tds-input textarea)::-webkit-resizer{
1820
- background:var(--tds-input-resizer-icon) no-repeat;
1821
- background-position:right bottom;
1822
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1823
- }
1752
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1753
+ --tds-input-background-color:var(--t-form-background-color-error);
1754
+ --tds-input-border-color:var(--t-form-border-color-error);
1755
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1756
+ --tds-input-description-color:var(--t-text-color-status-error);
1757
+ --tds-input-description-invalid-icon-display:inline-block;
1758
+ }
1824
1759
 
1825
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1826
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1827
- cursor:default;
1760
+ .tds-input:has(:is(input,textarea):required) label::after{
1761
+ margin-left:.25ch;
1762
+ color:var(--t-text-color-status-error);
1763
+ content:"*";
1828
1764
  }
1829
1765
 
1830
- @supports (-moz-appearance: none){
1831
- :is(.tds-input textarea){
1832
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1833
- scrollbar-width:thin;
1834
- }
1766
+ .tds-input:where(:has(:is(input,textarea):disabled)){
1767
+ --tds-input-border-color:var(--t-form-border-color-disabled);
1768
+ --tds-input-background-color:var(--t-form-background-color-disabled);
1769
+ --tds-input-color:var(--t-form-color-disabled);
1770
+ }
1835
1771
 
1836
- @media (hover){
1837
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1838
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1839
- }
1840
- }
1772
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
1773
+ cursor:not-allowed;
1841
1774
  }
1775
+
1776
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
1777
+ --tds-input-border-color:var(--t-form-border-color-readonly);
1778
+ --tds-input-background-color:var(--t-form-background-color-readonly);
1842
1779
  }
1843
1780
 
1844
- .tds-time-field-input{
1845
- --tds-field-date-segment-padding-inline:1px;
1846
- padding-block:var(--tds-field-padding-block);
1847
- padding-inline:var(--tds-field-padding-inline);
1848
- font-variant-numeric:tabular-nums;
1849
- }
1781
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
1782
+ border-color:var(--tds-input-border-color-hover);
1783
+ }
1850
1784
 
1851
- .tds-toggle-switch{
1852
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1853
- --tds-toggle-switch-cursor:pointer;
1854
- --tds-toggle-switch-display:inline-grid;
1855
- --tds-toggle-switch-line-height:1.4;
1785
+ .tds-input.tds-input--lg{
1786
+ --tds-input-min-height:var(--t-container-size-lg);
1787
+ --tds-input-font-size:var(--t-font-size-lg);
1788
+ }
1856
1789
 
1857
- --tds-toggle-switch-label-color:var(--t-form-color);
1790
+ .tds-input-description{
1791
+ display:flex;
1792
+ gap:var(--t-spacing-half);
1793
+ align-items:flex-start;
1794
+ margin:0;
1795
+ font-size:var(--t-font-size-sm);
1796
+ line-height:1.35;
1797
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
1798
+ cursor:text;
1799
+ }
1858
1800
 
1859
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1860
- --tds-toggle-switch-track-outline:none;
1861
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1862
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1863
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1801
+ .tds-input-description .tds-input-description-invalid-icon{
1802
+ display:var(--tds-input-description-invalid-icon-display, none);
1803
+ flex-shrink:0;
1804
+ margin-block-start:calc(.5lh - .5em);
1805
+ line-height:1.35;
1806
+ }
1864
1807
 
1865
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1866
- --tds-toggle-switch-thumb-transform:translateX(0);
1867
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
1808
+ .tds-field{
1809
+ --tds-field-border-color:var(--t-form-border-color);
1810
+ --tds-field-border-color-hover:var(--t-form-border-color-hover);
1811
+ --tds-field-border-color-active:var(--t-form-border-color-focus);
1812
+ --tds-field-background-color:var(--t-form-background-color);
1813
+ --tds-field-color:var(--t-form-color);
1814
+ --tds-field-placeholder-color:var(--t-form-placeholder-color);
1815
+ --tds-field-font-size:var(--t-font-size-md);
1816
+ --tds-field-min-height:var(--t-container-size-md);
1817
+ --tds-field-padding-block:6px;
1818
+ --tds-field-padding-inline:var(--t-spacing-1);
1819
+ --tds-field-description-color:var(--t-text-color-secondary);
1820
+ --tds-field-description-invalid-icon-display:none;
1868
1821
 
1869
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
1870
- --tds-toggle-switch-description-line-height:1.35;
1871
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
1872
1822
  position:relative;
1873
-
1874
- display:var(--tds-toggle-switch-display);
1875
- grid-template-columns:auto;
1876
- grid-auto-columns:1fr;
1877
- gap:var(--t-spacing-fourth) 0;
1878
- -webkit-user-select:none;
1879
- -moz-user-select:none;
1880
- user-select:none;
1823
+ display:flex;
1824
+ flex-direction:column;
1825
+ gap:var(--t-spacing-half);
1881
1826
  }
1882
1827
 
1883
- .tds-toggle-switch input[type="checkbox"]{
1884
- position:absolute;
1885
- width:var(--tds-toggle-switch-track-width);
1886
- height:var(--tds-toggle-switch-track-height);
1887
- margin:0;
1888
- -webkit-appearance:none;
1889
- -moz-appearance:none;
1890
- appearance:none;
1891
- cursor:var(--tds-toggle-switch-cursor);
1892
- outline:var(--tds-toggle-switch-track-outline);
1893
- outline-offset:var(--t-focus-ring-offset);
1894
- background-color:transparent;
1895
- border:0;
1896
- border-radius:var(--t-border-radius-round);
1828
+ .tds-field[data-required] .tds-field-label::after{
1829
+ margin-left:.25ch;
1830
+ color:var(--t-text-color-status-error);
1831
+ content:"*";
1897
1832
  }
1898
1833
 
1899
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
1900
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
1834
+ .tds-field[data-invalid]{
1835
+ --tds-field-border-color:var(--t-form-border-color-error);
1836
+ --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
1837
+ --tds-field-border-color-active:var(--t-form-border-color-error-hover);
1838
+ --tds-field-background-color:var(--t-form-background-color-error);
1839
+ --tds-field-description-color:var(--t-text-color-status-error);
1840
+ --tds-field-description-invalid-icon-display:inline-block;
1841
+ }
1842
+
1843
+ .tds-field[data-disabled]{
1844
+ --tds-field-border-color:var(--t-form-border-color-disabled);
1845
+ --tds-field-background-color:var(--t-form-background-color-disabled);
1846
+ --tds-field-color:var(--t-form-color-disabled);
1847
+ --tds-field-placeholder-color:var(--t-form-color-disabled);
1848
+ }
1849
+
1850
+ .tds-field[data-disabled] .tds-field-control{
1851
+ cursor:not-allowed;
1901
1852
  }
1902
1853
 
1903
- .tds-toggle-switch label{
1904
- display:inline-flex;
1905
- grid-area:1 / 2;
1906
- padding-inline-start:var(--t-spacing-1);
1907
- margin-top:-.09375em;
1908
- font-size:var(--tds-toggle-switch-font-size);
1909
- font-weight:var(--t-font-weight-normal);
1910
- line-height:var(--tds-toggle-switch-line-height);
1911
- color:var(--tds-toggle-switch-label-color);
1912
- cursor:var(--tds-toggle-switch-cursor);
1854
+ .tds-field--lg{
1855
+ --tds-field-min-height:var(--t-container-size-lg);
1856
+ --tds-field-font-size:var(--t-font-size-lg);
1857
+ }
1858
+
1859
+ .tds-field-label{
1860
+ font-size:var(--t-font-size-md);
1861
+ font-weight:var(--t-font-weight-normal);
1862
+ color:var(--t-text-color);
1863
+ cursor:default;
1864
+ }
1865
+
1866
+ .tds-field-control{
1867
+ display:flex;
1868
+ align-items:center;
1869
+ inline-size:100%;
1870
+ min-block-size:var(--tds-field-min-height);
1871
+ font-family:inherit;
1872
+ font-size:var(--tds-field-font-size);
1873
+ line-height:1;
1874
+ color:var(--tds-field-color);
1875
+ -webkit-appearance:none;
1876
+ -moz-appearance:none;
1877
+ appearance:none;
1878
+ cursor:text;
1879
+ outline:var(--t-focus-ring-width) solid transparent;
1880
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
1881
+ outline-offset:0;
1882
+ background-color:var(--tds-field-background-color);
1883
+ border:var(--t-form-border-width) solid var(--tds-field-border-color);
1884
+ border-radius:var(--t-form-border-radius);
1885
+ transition-timing-function:var(--t-ease-in-out);
1886
+ transition-duration:var(--t-duration-200);
1887
+ transition-property:background-color, border-color, outline-color, outline-offset;
1888
+ }
1889
+
1890
+ .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
1891
+ border-color:var(--tds-field-border-color-hover);
1913
1892
  }
1914
1893
 
1915
- .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
1916
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
1894
+ .tds-field-control[data-focus-within]{
1895
+ outline-color:var(--t-focus-ring-color);
1896
+ outline-offset:var(--t-focus-ring-offset);
1897
+ border-color:var(--tds-field-border-color-active);
1917
1898
  }
1918
1899
 
1919
- .tds-toggle-switch:has(input:checked){
1920
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
1921
- --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
1900
+ .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
1901
+ --tds-field-border-color:var(--t-form-border-color-readonly);
1902
+ --tds-field-border-color-hover:var(--t-form-border-color-readonly);
1903
+ --tds-field-background-color:var(--t-form-background-color-readonly);
1904
+ color:var(--t-form-color-readonly);
1922
1905
  }
1923
1906
 
1924
- .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
1925
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
1907
+ [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
1908
+ border-color:var(--t-form-border-color-hover);
1926
1909
  }
1927
1910
 
1928
- .tds-toggle-switch:has(input:disabled){
1929
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
1930
- --tds-toggle-switch-label-color:var(--t-form-color-disabled);
1931
- --tds-toggle-switch-description-color:var(--t-form-color-disabled);
1932
- --tds-toggle-switch-cursor:not-allowed;
1911
+ .tds-field-description{
1912
+ display:flex;
1913
+ gap:var(--t-spacing-half);
1914
+ align-items:flex-start;
1915
+ margin:0;
1916
+ font-size:var(--t-font-size-sm);
1917
+ line-height:1.35;
1918
+ color:var(--tds-field-description-color, var(--t-text-color-secondary));
1919
+ cursor:text;
1920
+ }
1921
+
1922
+ .tds-field-description .tds-field-description-invalid-icon{
1923
+ display:var(--tds-field-description-invalid-icon-display, none);
1924
+ flex-shrink:0;
1925
+ margin-block-start:calc(.5lh - .5em);
1926
+ line-height:1.35;
1933
1927
  }
1934
1928
 
1935
- .tds-toggle-switch-track{
1936
- position:relative;
1937
- flex-shrink:0;
1938
- width:var(--tds-toggle-switch-track-width);
1939
- height:var(--tds-toggle-switch-track-height);
1940
- background-color:var(--tds-toggle-switch-track-background-color);
1941
- border-radius:var(--t-border-radius-round);
1942
- transition:var(--tds-toggle-switch-track-transition);
1929
+ .tds-field-date-segment{
1930
+ padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
1931
+ text-align:end;
1932
+ text-wrap:nowrap;
1933
+ caret-color:transparent;
1934
+ border-radius:var(--t-border-radius-sm);
1943
1935
  }
1944
1936
 
1945
- .tds-toggle-switch-track::before{
1946
- position:absolute;
1947
- top:var(--t-spacing-fourth);
1948
- left:var(--t-spacing-fourth);
1949
- width:var(--tds-toggle-switch-thumb-size);
1950
- height:var(--tds-toggle-switch-thumb-size);
1951
- content:"";
1952
- background-color:#fff;
1953
- border-radius:var(--t-border-radius-round);
1954
- transform:var(--tds-toggle-switch-thumb-transform);
1955
- transition:var(--tds-toggle-switch-thumb-transition);
1937
+ .tds-field-date-segment[data-placeholder]{
1938
+ color:var(--tds-field-placeholder-color);
1956
1939
  }
1957
1940
 
1958
- @media (prefers-reduced-motion: reduce){
1941
+ .tds-field-date-segment[data-focused]{
1942
+ color:var(--t-text-color-inverted);
1943
+ outline:0;
1944
+ background-color:var(--t-fill-color-interaction);
1945
+ }
1959
1946
 
1960
- .tds-toggle-switch-track{
1961
- --tds-toggle-switch-track-transition:none;
1962
- --tds-toggle-switch-thumb-transition:none;
1947
+ .tds-field-date-segment-separator{
1948
+ padding-inline:0;
1949
+ color:var(--tds-field-placeholder-color);
1963
1950
  }
1964
- }
1965
1951
 
1966
- .tds-toggle-switch-description{
1967
- display:flex;
1968
- grid-area:2 / 2;
1969
- align-items:flex-start;
1970
- padding-inline-start:var(--t-spacing-1);
1971
- margin:0;
1972
- font-size:var(--tds-toggle-switch-description-font-size);
1973
- line-height:var(--tds-toggle-switch-description-line-height);
1974
- color:var(--tds-toggle-switch-description-color);
1975
- cursor:text;
1952
+ .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
1953
+ color:var(--tds-field-color);
1976
1954
  }
1977
1955
 
1978
- .tds-toggle-switch--sm{
1979
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1980
- --tds-toggle-switch-line-height:1.35;
1981
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1982
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1983
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1984
- --tds-toggle-switch-description-line-height:1.3;
1956
+ .tds-input:has(textarea){
1957
+ --tds-input-padding-block:6px;
1958
+ --tds-input-resizer-size:var(--t-element-size-sm);
1959
+ --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");
1985
1960
  }
1986
1961
 
1987
- .tds-toggle-switch--hide-label{
1988
- --tds-toggle-switch-display:inline-flex;
1962
+ @supports (x: attr(x type(*))){
1963
+
1964
+ .tds-input textarea{
1965
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1989
1966
  }
1967
+ }
1990
1968
 
1991
- .tds-input{
1992
- --tds-input-border-color:var(--t-form-border-color);
1993
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1994
- --tds-input-background-color:var(--t-form-background-color);
1995
- --tds-input-color:var(--t-form-color);
1996
- --tds-input-font-size:var(--t-font-size-md);
1997
- --tds-input-description-color:var(--t-text-color-secondary);
1998
- --tds-input-description-invalid-icon-display:none;
1999
- --tds-input-min-height:var(--t-container-size-md);
2000
- --tds-input-padding-inline:var(--t-spacing-1);
1969
+ .tds-input.tds-textarea--resize-vertical textarea{
1970
+ resize:vertical;
1971
+ }
2001
1972
 
2002
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1973
+ .tds-input.tds-textarea--resize-none textarea{
1974
+ resize:none;
1975
+ }
2003
1976
 
2004
- display:flex;
2005
- flex-direction:column;
2006
- gap:var(--t-spacing-half);
1977
+ .tds-input.tds-textarea--resize-auto textarea{
1978
+ resize:vertical;
1979
+ }
1980
+
1981
+ @supports (field-sizing: content){
1982
+ .tds-input.tds-textarea--resize-auto textarea{
1983
+ field-sizing:content;
1984
+ resize:none;
1985
+ }
1986
+ }
1987
+
1988
+ .tds-input textarea{
1989
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1990
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1991
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1992
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1993
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1994
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1995
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1996
+ --tds-input-scrollbar-thumb-border-radius:999px;
1997
+ --tds-input-scrollbar-thumb-border-width:3px;
1998
+ --tds-input-scrollbar-track-margin-block:.125rem;
1999
+ scrollbar-color:initial;
2000
+ transition-timing-function:var(--t-ease-in-out);
2001
+ transition-duration:var(--t-duration-200);
2002
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
2007
2003
  }
2008
2004
 
2009
- .tds-input label{
2010
- font-size:var(--t-font-size-md);
2011
- font-weight:var(--t-font-weight-normal);
2012
- color:var(--t-text-color);
2013
- }
2005
+ @media (pointer: fine){
2006
+ :is(.tds-input textarea)::-webkit-scrollbar{
2007
+ width:12px;
2008
+ height:12px;
2009
+ cursor:default;
2010
+ }
2014
2011
 
2015
- .tds-input :is(input,textarea){
2016
- inline-size:100%;
2017
- block-size:auto;
2018
- min-block-size:var(--tds-input-min-height);
2019
- padding-block:var(--tds-input-padding-block);
2020
- padding-inline:var(--tds-input-padding-inline);
2021
- font-family:inherit;
2022
- font-size:var(--tds-input-font-size);
2023
- color:var(--tds-input-color);
2024
- -webkit-appearance:none;
2025
- -moz-appearance:none;
2026
- appearance:none;
2027
- outline:var(--t-focus-ring-width) solid transparent;
2028
- outline-offset:0;
2029
- background-color:var(--tds-input-background-color);
2030
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2031
- border-radius:var(--t-form-border-radius);
2032
- transition-timing-function:var(--t-ease-in-out);
2033
- transition-duration:var(--t-duration-200);
2034
- transition-property:var(--tds-input-transition-property);
2035
- }
2012
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
2013
+ cursor:default;
2014
+ background:var(--tds-input-scrollbar-thumb-color);
2015
+ background-clip:content-box;
2016
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
2017
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
2018
+ }
2036
2019
 
2037
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2038
- border-color:var(--tds-input-border-color-hover);
2020
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2021
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
2039
2022
  }
2040
2023
 
2041
- :is(.tds-input :is(input,textarea)):focus{
2042
- outline-color:transparent;
2024
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
2025
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
2043
2026
  }
2044
2027
 
2045
- :is(.tds-input :is(input,textarea)):focus-visible{
2046
- outline-color:var(--t-focus-ring-color);
2047
- outline-offset:var(--t-focus-ring-offset);
2048
- border-color:var(--t-form-border-color-focus);
2028
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
2029
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
2049
2030
  }
2050
2031
 
2051
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2052
- color:var(--t-form-placeholder-color);
2053
- -moz-user-select:none;
2054
- user-select:none;
2032
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
2033
+ background:var(--tds-input-scrollbar-surface-color);
2055
2034
  }
2056
2035
 
2057
- :is(.tds-input :is(input,textarea))::placeholder{
2058
- color:var(--t-form-placeholder-color);
2059
- -webkit-user-select:none;
2060
- -moz-user-select:none;
2061
- user-select:none;
2036
+ :is(.tds-input textarea)::-webkit-resizer{
2037
+ background:var(--tds-input-resizer-icon) no-repeat;
2038
+ background-position:right bottom;
2039
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
2062
2040
  }
2063
2041
 
2064
- @media (prefers-reduced-motion: reduce){
2042
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
2043
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
2044
+ cursor:default;
2045
+ }
2065
2046
 
2066
- .tds-input :is(input,textarea){
2067
- --tds-input-transition-property:none;
2068
- }
2047
+ @supports (-moz-appearance: none){
2048
+ :is(.tds-input textarea){
2049
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
2050
+ scrollbar-width:thin;
2051
+ }
2052
+
2053
+ @media (hover){
2054
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
2055
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
2056
+ }
2057
+ }
2069
2058
  }
2059
+ }
2070
2060
 
2071
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2072
- --tds-input-background-color:var(--t-form-background-color-error);
2073
- --tds-input-border-color:var(--t-form-border-color-error);
2074
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2075
- --tds-input-description-color:var(--t-text-color-status-error);
2076
- --tds-input-description-invalid-icon-display:inline-block;
2061
+ .tds-checkbox-group{
2062
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
2063
+ --tds-checkbox-group-line-height:1.4;
2064
+ --tds-checkbox-group-gap:var(--t-spacing-1);
2065
+
2066
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
2067
+ --tds-checkbox-group-description-line-height:1.35;
2068
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
2069
+ --tds-checkbox-group-description-invalid-icon-display:none;
2070
+ display:flex;
2071
+ flex-direction:column;
2072
+ gap:0;
2073
+ padding:0;
2074
+ margin:0;
2075
+
2076
+ font-size:var(--tds-checkbox-group-font-size);
2077
+ line-height:var(--tds-checkbox-group-line-height);
2078
+ border:0;
2079
+ }
2080
+
2081
+ .tds-checkbox-group legend{
2082
+ float:left;
2083
+ padding:0;
2084
+ margin:0;
2077
2085
  }
2078
2086
 
2079
- .tds-input:has(:is(input,textarea):required) label::after{
2087
+ .tds-checkbox-group[aria-invalid="true"]{
2088
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
2089
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
2090
+ }
2091
+
2092
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
2080
2093
  margin-left:.25ch;
2081
2094
  color:var(--t-text-color-status-error);
2082
2095
  content:"*";
2083
2096
  }
2084
2097
 
2085
- .tds-input:where(:has(:is(input,textarea):disabled)){
2086
- --tds-input-border-color:var(--t-form-border-color-disabled);
2087
- --tds-input-background-color:var(--t-form-background-color-disabled);
2088
- --tds-input-color:var(--t-form-color-disabled);
2089
- }
2090
-
2091
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2092
- cursor:not-allowed;
2093
- }
2094
-
2095
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2096
- --tds-input-border-color:var(--t-form-border-color-readonly);
2097
- --tds-input-background-color:var(--t-form-background-color-readonly);
2098
- }
2099
-
2100
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2101
- border-color:var(--tds-input-border-color-hover);
2098
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
2099
+ content:none;
2102
2100
  }
2103
2101
 
2104
- .tds-input.tds-input--lg{
2105
- --tds-input-min-height:var(--t-container-size-lg);
2106
- --tds-input-font-size:var(--t-font-size-lg);
2107
- }
2102
+ .tds-checkbox-group-fields{
2103
+ display:flex;
2104
+ flex-direction:column;
2105
+ gap:var(--tds-checkbox-group-gap);
2106
+ align-items:flex-start;
2107
+ margin-top:var(--t-spacing-1);
2108
+ }
2108
2109
 
2109
- .tds-input-description{
2110
+ .tds-checkbox-group-description{
2110
2111
  display:flex;
2111
2112
  gap:var(--t-spacing-half);
2112
2113
  align-items:flex-start;
2113
- margin:0;
2114
- font-size:var(--t-font-size-sm);
2115
- line-height:1.35;
2116
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2114
+ margin:var(--t-spacing-fourth) 0 0;
2115
+ font-size:var(--tds-checkbox-group-description-font-size);
2116
+ line-height:var(--tds-checkbox-group-description-line-height);
2117
+ color:var(--tds-checkbox-group-description-color);
2117
2118
  cursor:text;
2118
2119
  }
2119
2120
 
2120
- .tds-input-description .tds-input-description-invalid-icon{
2121
- display:var(--tds-input-description-invalid-icon-display, none);
2121
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
2122
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
2122
2123
  flex-shrink:0;
2123
- margin-block-start:calc(.5lh - .5em);
2124
- line-height:1.35;
2124
+ margin-top:calc(.5lh - .5em);
2125
+ line-height:var(--tds-checkbox-group-description-line-height);
2125
2126
  }
2126
2127
 
2127
- .tds-field{
2128
- --tds-field-border-color:var(--t-form-border-color);
2129
- --tds-field-border-color-hover:var(--t-form-border-color-hover);
2130
- --tds-field-border-color-active:var(--t-form-border-color-focus);
2131
- --tds-field-background-color:var(--t-form-background-color);
2132
- --tds-field-color:var(--t-form-color);
2133
- --tds-field-placeholder-color:var(--t-form-placeholder-color);
2134
- --tds-field-font-size:var(--t-font-size-md);
2135
- --tds-field-min-height:var(--t-container-size-md);
2136
- --tds-field-padding-block:6px;
2137
- --tds-field-padding-inline:var(--t-spacing-1);
2138
- --tds-field-description-color:var(--t-text-color-secondary);
2139
- --tds-field-description-invalid-icon-display:none;
2140
-
2141
- position:relative;
2142
- display:flex;
2143
- flex-direction:column;
2144
- gap:var(--t-spacing-half);
2128
+ .tds-checkbox-group--sm{
2129
+ --tds-checkbox-group-line-height:1.35;
2130
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
2131
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
2132
+ --tds-checkbox-group-description-line-height:1.3;
2145
2133
  }
2146
2134
 
2147
- .tds-field[data-required] .tds-field-label::after{
2148
- margin-left:.25ch;
2149
- color:var(--t-text-color-status-error);
2150
- content:"*";
2151
- }
2135
+ .tds-toggle-switch{
2136
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
2137
+ --tds-toggle-switch-cursor:pointer;
2138
+ --tds-toggle-switch-display:inline-grid;
2139
+ --tds-toggle-switch-line-height:1.4;
2152
2140
 
2153
- .tds-field[data-invalid]{
2154
- --tds-field-border-color:var(--t-form-border-color-error);
2155
- --tds-field-border-color-hover:var(--t-form-border-color-error-hover);
2156
- --tds-field-border-color-active:var(--t-form-border-color-error-hover);
2157
- --tds-field-background-color:var(--t-form-background-color-error);
2158
- --tds-field-description-color:var(--t-text-color-status-error);
2159
- --tds-field-description-invalid-icon-display:inline-block;
2160
- }
2141
+ --tds-toggle-switch-label-color:var(--t-form-color);
2161
2142
 
2162
- .tds-field[data-disabled]{
2163
- --tds-field-border-color:var(--t-form-border-color-disabled);
2164
- --tds-field-background-color:var(--t-form-background-color-disabled);
2165
- --tds-field-color:var(--t-form-color-disabled);
2166
- --tds-field-placeholder-color:var(--t-form-color-disabled);
2167
- }
2143
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
2144
+ --tds-toggle-switch-track-outline:none;
2145
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
2146
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
2147
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
2168
2148
 
2169
- .tds-field[data-disabled] .tds-field-control{
2170
- cursor:not-allowed;
2171
- }
2149
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
2150
+ --tds-toggle-switch-thumb-transform:translateX(0);
2151
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
2172
2152
 
2173
- .tds-field--lg{
2174
- --tds-field-min-height:var(--t-container-size-lg);
2175
- --tds-field-font-size:var(--t-font-size-lg);
2176
- }
2153
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
2154
+ --tds-toggle-switch-description-line-height:1.35;
2155
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
2156
+ position:relative;
2177
2157
 
2178
- .tds-field-label{
2179
- font-size:var(--t-font-size-md);
2180
- font-weight:var(--t-font-weight-normal);
2181
- color:var(--t-text-color);
2182
- cursor:default;
2158
+ display:var(--tds-toggle-switch-display);
2159
+ grid-template-columns:auto;
2160
+ grid-auto-columns:1fr;
2161
+ gap:var(--t-spacing-fourth) 0;
2162
+ -webkit-user-select:none;
2163
+ -moz-user-select:none;
2164
+ user-select:none;
2183
2165
  }
2184
2166
 
2185
- .tds-field-control{
2186
- display:flex;
2187
- align-items:center;
2188
- inline-size:100%;
2189
- min-block-size:var(--tds-field-min-height);
2190
- font-family:inherit;
2191
- font-size:var(--tds-field-font-size);
2192
- line-height:1;
2193
- color:var(--tds-field-color);
2194
- -webkit-appearance:none;
2195
- -moz-appearance:none;
2196
- appearance:none;
2197
- cursor:text;
2198
- outline:var(--t-focus-ring-width) solid transparent;
2199
- outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
2200
- outline-offset:0;
2201
- background-color:var(--tds-field-background-color);
2202
- border:var(--t-form-border-width) solid var(--tds-field-border-color);
2203
- border-radius:var(--t-form-border-radius);
2204
- transition-timing-function:var(--t-ease-in-out);
2205
- transition-duration:var(--t-duration-200);
2206
- transition-property:background-color, border-color, outline-color, outline-offset;
2207
- }
2167
+ .tds-toggle-switch input[type="checkbox"]{
2168
+ position:absolute;
2169
+ width:var(--tds-toggle-switch-track-width);
2170
+ height:var(--tds-toggle-switch-track-height);
2171
+ margin:0;
2172
+ -webkit-appearance:none;
2173
+ -moz-appearance:none;
2174
+ appearance:none;
2175
+ cursor:var(--tds-toggle-switch-cursor);
2176
+ outline:var(--tds-toggle-switch-track-outline);
2177
+ outline-offset:var(--t-focus-ring-offset);
2178
+ background-color:transparent;
2179
+ border:0;
2180
+ border-radius:var(--t-border-radius-round);
2181
+ }
2208
2182
 
2209
- .tds-field-control[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
2210
- border-color:var(--tds-field-border-color-hover);
2183
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
2184
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
2185
+ }
2186
+
2187
+ .tds-toggle-switch label{
2188
+ display:inline-flex;
2189
+ grid-area:1 / 2;
2190
+ padding-inline-start:var(--t-spacing-1);
2191
+ margin-top:-.09375em;
2192
+ font-size:var(--tds-toggle-switch-font-size);
2193
+ font-weight:var(--t-font-weight-normal);
2194
+ line-height:var(--tds-toggle-switch-line-height);
2195
+ color:var(--tds-toggle-switch-label-color);
2196
+ cursor:var(--tds-toggle-switch-cursor);
2211
2197
  }
2212
2198
 
2213
- .tds-field-control[data-focus-within]{
2214
- outline-color:var(--t-focus-ring-color);
2215
- outline-offset:var(--t-focus-ring-offset);
2216
- border-color:var(--tds-field-border-color-active);
2199
+ .tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
2200
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-hover);
2217
2201
  }
2218
2202
 
2219
- .tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly]){
2220
- --tds-field-border-color:var(--t-form-border-color-readonly);
2221
- --tds-field-border-color-hover:var(--t-form-border-color-readonly);
2222
- --tds-field-background-color:var(--t-form-background-color-readonly);
2223
- color:var(--t-form-color-readonly);
2203
+ .tds-toggle-switch:has(input:checked){
2204
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on);
2205
+ --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
2224
2206
  }
2225
2207
 
2226
- [data-focus-within]:is(.tds-field-control[data-readonly],.tds-field-control:has([data-readonly]),.tds-field-control:has([readonly])){
2227
- border-color:var(--t-form-border-color-hover);
2208
+ .tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
2209
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-on-hover);
2228
2210
  }
2229
2211
 
2230
- .tds-field-description{
2231
- display:flex;
2232
- gap:var(--t-spacing-half);
2233
- align-items:flex-start;
2234
- margin:0;
2235
- font-size:var(--t-font-size-sm);
2236
- line-height:1.35;
2237
- color:var(--tds-field-description-color, var(--t-text-color-secondary));
2238
- cursor:text;
2239
- }
2240
-
2241
- .tds-field-description .tds-field-description-invalid-icon{
2242
- display:var(--tds-field-description-invalid-icon-display, none);
2243
- flex-shrink:0;
2244
- margin-block-start:calc(.5lh - .5em);
2245
- line-height:1.35;
2212
+ .tds-toggle-switch:has(input:disabled){
2213
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color-disabled);
2214
+ --tds-toggle-switch-label-color:var(--t-form-color-disabled);
2215
+ --tds-toggle-switch-description-color:var(--t-form-color-disabled);
2216
+ --tds-toggle-switch-cursor:not-allowed;
2246
2217
  }
2247
2218
 
2248
- .tds-field-date-segment{
2249
- padding-inline:var(--tds-field-date-segment-padding-inline, 2px);
2250
- text-align:end;
2251
- text-wrap:nowrap;
2252
- caret-color:transparent;
2253
- border-radius:var(--t-border-radius-sm);
2219
+ .tds-toggle-switch-track{
2220
+ position:relative;
2221
+ flex-shrink:0;
2222
+ width:var(--tds-toggle-switch-track-width);
2223
+ height:var(--tds-toggle-switch-track-height);
2224
+ background-color:var(--tds-toggle-switch-track-background-color);
2225
+ border-radius:var(--t-border-radius-round);
2226
+ transition:var(--tds-toggle-switch-track-transition);
2254
2227
  }
2255
2228
 
2256
- .tds-field-date-segment[data-placeholder]{
2257
- color:var(--tds-field-placeholder-color);
2229
+ .tds-toggle-switch-track::before{
2230
+ position:absolute;
2231
+ top:var(--t-spacing-fourth);
2232
+ left:var(--t-spacing-fourth);
2233
+ width:var(--tds-toggle-switch-thumb-size);
2234
+ height:var(--tds-toggle-switch-thumb-size);
2235
+ content:"";
2236
+ background-color:#fff;
2237
+ border-radius:var(--t-border-radius-round);
2238
+ transform:var(--tds-toggle-switch-thumb-transform);
2239
+ transition:var(--tds-toggle-switch-thumb-transition);
2258
2240
  }
2259
2241
 
2260
- .tds-field-date-segment[data-focused]{
2261
- color:var(--t-text-color-inverted);
2262
- outline:0;
2263
- background-color:var(--t-fill-color-interaction);
2242
+ @media (prefers-reduced-motion: reduce){
2243
+
2244
+ .tds-toggle-switch-track{
2245
+ --tds-toggle-switch-track-transition:none;
2246
+ --tds-toggle-switch-thumb-transition:none;
2247
+ }
2264
2248
  }
2265
2249
 
2266
- .tds-field-date-segment-separator{
2267
- padding-inline:0;
2268
- color:var(--tds-field-placeholder-color);
2250
+ .tds-toggle-switch-description{
2251
+ display:flex;
2252
+ grid-area:2 / 2;
2253
+ align-items:flex-start;
2254
+ padding-inline-start:var(--t-spacing-1);
2255
+ margin:0;
2256
+ font-size:var(--tds-toggle-switch-description-font-size);
2257
+ line-height:var(--tds-toggle-switch-description-line-height);
2258
+ color:var(--tds-toggle-switch-description-color);
2259
+ cursor:text;
2269
2260
  }
2270
2261
 
2271
- .tds-field-date-segment:not([data-placeholder]) + .tds-field-date-segment-separator{
2272
- color:var(--tds-field-color);
2262
+ .tds-toggle-switch--sm{
2263
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
2264
+ --tds-toggle-switch-line-height:1.35;
2265
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
2266
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
2267
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
2268
+ --tds-toggle-switch-description-line-height:1.3;
2269
+ }
2270
+
2271
+ .tds-toggle-switch--hide-label{
2272
+ --tds-toggle-switch-display:inline-flex;
2273
2273
  }
2274
2274
 
2275
2275
  .tds-select{