@planningcenter/tapestry 3.2.2-rc.11 → 3.2.2-rc.12

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 +1262 -1262
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1262 -1262
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,926 +1,759 @@
1
-
2
- @media (prefers-reduced-motion: no-preference){
3
-
4
- :root{
5
- interpolate-size:allow-keywords;
6
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
7
4
  }
5
+ }
8
6
 
9
- @layer tds-component{
10
- tds-sidenav,
11
- .tds-sidenav{
12
- --tds-sidenav-indent:12px;
13
- --tds-sidenav-item-depth:0;
14
-
15
- --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
16
-
17
- --tds-sidenav-collapse-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
18
- --tds-sidenav-collapse-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
19
- --tds-sidenav-collapse-closed-opacity:0;
20
- --tds-sidenav-collapse-open-opacity:1;
21
- --tds-sidenav-collapse-closed-transform:translateY(-8px);
22
- --tds-sidenav-collapse-open-transform:translateY(0);
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
23
25
 
24
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
25
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
26
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
27
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
28
28
 
29
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
30
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
31
- --tds-sidenav-item-nested-background-selected:transparent;
29
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
32
 
33
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
34
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
35
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
36
35
 
37
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
38
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
39
- }
36
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
40
39
 
41
- @media (prefers-reduced-motion: reduce){
42
- tds-sidenav,
43
- .tds-sidenav{
44
- --tds-sidenav-collapse-transition-enter:none;
45
- --tds-sidenav-collapse-transition-exit:none;
46
- --tds-sidenav-collapse-closed-transform:none;
47
- --tds-sidenav-collapse-open-transform:none;
40
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
48
45
  }
49
- }
50
46
 
51
- .tds-sidenav--theme-gray{
52
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
53
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
54
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
55
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
56
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
57
49
  }
58
- }
59
50
 
60
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
61
- display:flex;
51
+ @supports (color: light-dark(#fff, #000)){
52
+ .tds-page-header{
53
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
+ }
62
56
  }
63
57
 
64
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
65
- flex-direction:column;
66
- gap:var(--t-spacing-half);
67
- width:100%;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
+ }
68
76
  }
69
-
70
- .tds-sidenav-section-list{
71
- width:100%;
72
- padding:0;
73
- margin:0;
74
- list-style:none;
75
77
  }
76
78
 
77
- .tds-sidenav-section-header{
79
+ .tds-page-header{
78
80
  display:flex;
79
- align-items:baseline;
80
- justify-content:space-between;
81
- padding-top:var(--t-spacing-2);
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
82
86
  }
83
87
 
84
- .tds-sidenav-section-header h2{
85
- margin:0;
86
- font-size:var(--t-font-size-sm);
87
- font-weight:var(--t-font-weight-semibold);
88
- line-height:1.35;
89
- color:var(--t-text-color-secondary);
90
- text-transform:uppercase;
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
91
90
  }
92
91
 
93
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
- padding-top:0;
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
95
94
  }
96
95
 
97
- .tds-sidenav-section-header [slot="label-actions"]{
98
- display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
101
98
  }
102
99
 
103
- .tds-sidenav-section [slot="section-actions"]{
104
- display:flex;
105
- gap:12px;
106
- align-items:center;
107
- min-height:42px;
108
- padding:var(--t-spacing-1) 0;
109
- }
110
-
111
- .tds-sidenav-section-list,
112
- .tds-sidenav-item{
113
- width:100%;
114
- padding:0;
115
- margin:0;
116
- }
117
-
118
- .tds-sidenav-item :is(a,button){
119
- position:relative;
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
120
101
  display:flex;
121
- gap:12px;
122
- align-items:center;
123
- width:100%;
124
- padding:12px;
125
- overflow:hidden;
126
- font-size:var(--t-font-size-sm);
127
- line-height:18px;
128
- color:var(--t-text-color-headline);
129
- white-space:nowrap;
130
- text-decoration:none;
131
- -webkit-appearance:none;
132
- -moz-appearance:none;
133
- appearance:none;
134
- cursor:pointer;
135
- background-color:var(--tds-sidenav-item-background, transparent);
136
- border:0;
137
- border-radius:var(--t-border-radius);
138
- transition:var(--tds-sidenav-item-transition);
102
+ flex-flow:row wrap;
103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
104
+ align-items:flex-start;
105
+ justify-content:flex-start;
106
+ min-width:0;
139
107
  }
140
108
 
141
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
142
- display:block;
143
- flex:1;
144
- overflow:hidden;
145
- text-overflow:ellipsis;
146
- text-align:left;
147
- white-space:nowrap;
109
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
+ display:flex;
111
+ gap:var(--tds-page-header-nav-gap);
112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
+ margin:0 0 -1px;
114
+ overflow:auto;
115
+ list-style:none;
116
+ background:var(--tds-page-header-nav-background);
148
117
  }
149
118
 
150
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
151
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
152
- color:var(--t-text-color-headline);
119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
+ position:relative;
121
+ display:inline-flex;
122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
+ font-size:var(--t-font-size-sm);
124
+ line-height:22px;
125
+ color:var(--tds-page-header-nav-item-color);
126
+ white-space:nowrap;
153
127
  text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
154
138
  }
155
139
 
156
- :is(.tds-sidenav-item :is(a,button)):active{
157
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
158
- }
159
-
160
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
161
- overflow:hidden;
162
- color:var(--tds-sidenav-item-icon-color);
163
- }
164
-
165
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
166
- display:block;
167
- width:var(--tds-sidenav-item-icon-size);
168
- height:var(--tds-sidenav-item-icon-size);
140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
169
145
  }
170
146
 
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
173
- }
147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
+ }
174
152
 
175
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
176
- visibility:visible;
177
- block-size:auto;
178
- opacity:1;
179
- }
180
-
181
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
182
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
183
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
184
-
185
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
186
- font-weight:var(--t-font-weight-semibold);
187
- }
188
-
189
- .tds-sidenav-item:has(.tds-sidenav-section){
190
- display:flex;
191
- flex-direction:column;
192
- gap:var(--t-spacing-half);
193
- }
194
-
195
- .tds-sidenav-item .tds-sidenav-section-list{
196
- --tds-sidenav-item-depth:1;
197
- gap:0;
198
- }
199
-
200
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
201
- visibility:hidden;
202
- block-size:0;
203
- overflow-y:clip;
204
- opacity:0;
205
- transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
206
- }
153
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
+ background-color:var(--tds-page-header-nav-item-background-color-active);
155
+ border-color:var(--tds-page-header-nav-item-border-color-active);
156
+ }
207
157
 
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
210
- }
158
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
+ color:var(--tds-page-header-nav-item-color-disabled);
160
+ cursor:not-allowed;
161
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
+ opacity:1;
163
+ }
211
164
 
212
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
213
- min-height:var(--t-element-size-2xl);
214
- padding-block:9px;
215
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
216
- line-height:1;
217
- background-color:transparent;
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
218
167
  }
219
168
 
220
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
221
- position:absolute;
222
- top:0;
223
- bottom:0;
224
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
225
- width:2px;
226
- content:"";
227
- background-color:var(--tds-sidenav-item-nested-border-color);
228
- transition:var(--tds-sidenav-item-transition);
169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
229
172
  }
230
173
 
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
174
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
232
175
  position:absolute;
233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
- z-index:-1;
235
- height:100%;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
236
180
  content:"";
237
- background-color:var(--tds-sidenav-item-nested-background);
238
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
239
- transition:var(--tds-sidenav-item-transition);
240
- }
241
-
242
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
243
- display:block;
244
- text-align:left;
245
- white-space:normal;
246
- }
247
-
248
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
249
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
250
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
251
183
  }
252
184
 
253
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
254
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
185
+ @media (prefers-reduced-motion: no-preference){
186
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
+ animation:indicator-pulse 1.25s ease infinite;
188
+ }
255
189
  }
256
190
 
257
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
258
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
259
- font-weight:var(--t-font-weight-medium);
260
- }
261
-
262
- .tds-sidenav-responsive-header{
191
+ .tds-page-header__title-bar{
263
192
  display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
195
+ align-items:flex-start;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
267
198
  }
268
199
 
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
271
202
  }
272
203
 
273
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
274
- flex:1;
275
- order:1;
276
- margin:0;
277
- font-size:var(--t-font-size-lg);
278
- font-weight:var(--t-font-weight-medium);
279
- color:var(--t-text-color-headline);
280
- }
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
281
207
 
282
- @media (max-width: 719px){
283
- .tds-sidenav-collapse{
284
- z-index:10001;
285
- display:none;
286
- max-width:min(448px, calc(100vw - 48px));
287
- padding:0;
288
- margin:12px 0;
289
- position-area:bottom span-right;
290
- overflow:hidden;
291
- outline:0;
292
- background:var(--t-surface-color-card);
293
- border:0;
294
- border-radius:6px;
295
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
296
- opacity:var(--tds-sidenav-collapse-open-opacity);
297
- transform:var(--tds-sidenav-collapse-open-transform);
298
- transition:var(--tds-sidenav-collapse-transition-enter);
299
- will-change:transform;
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
300
215
  }
301
216
 
302
- .tds-sidenav-scroll-container{
303
- --webkit-overflow-scrolling:touch;
304
- display:block;
305
- width:100%;
306
- height:-moz-fit-content;
307
- height:fit-content;
308
- padding:var(--t-spacing-2);
309
- overflow-y:auto;
217
+ @media (min-width: 960px){
218
+ .tds-page-header__primary{
219
+ flex:1 1 max-content;
220
+ width:auto;
221
+ min-width:0;
222
+ max-width:100%;
310
223
  }
311
224
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
225
+ .tds-page-header__title-bar,
226
+ .tds-page-header--profile .tds-page-header__title-bar{
227
+ flex-flow:row nowrap;
228
+ row-gap:12px;
229
+ align-items:flex-start;
314
230
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
318
233
  }
319
234
 
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
323
237
  }
238
+ }
324
239
 
325
- @starting-style{
326
- .tds-sidenav-collapse:popover-open{
327
- opacity:var(--tds-sidenav-collapse-closed-opacity);
328
- transform:var(--tds-sidenav-collapse-closed-transform);
329
- }
330
- }
331
- }
332
- @supports not selector(:popover-open){
333
- .tds-sidenav-collapse.\:popover-open{
334
- display:flex;
335
- }
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
244
+ }
336
245
 
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
- }
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
342
250
  }
343
251
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
347
256
  }
348
- }
349
257
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
262
+ }
353
263
 
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
264
+ .tds-radio{
265
+ --tds-radio-font-size:var(--t-font-size-md);
266
+ --tds-radio-cursor:pointer;
267
+ --tds-radio-line-height:1.4;
268
+ --tds-radio-transition-property:border-width;
357
269
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
270
+ --tds-radio-input-size:var(--t-element-size-md);
271
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
272
+ --tds-radio-input-border-color:var(--t-form-border-color);
273
+ --tds-radio-input-border-width:var(--t-form-border-width);
274
+ --tds-radio-input-background-color:transparent;
362
275
 
363
- .tds-checkbox{
364
- --tds-checkbox-font-size:var(--t-font-size-md);
365
- --tds-checkbox-cursor:pointer;
366
- --tds-checkbox-line-height:1.4;
367
- --tds-checkbox-transition-property:background-color, border-color;
276
+ --tds-radio-label-color:var(--t-form-color);
368
277
 
369
- --tds-checkbox-input-size:var(--t-element-size-md);
370
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
371
- --tds-checkbox-input-border-color:var(--t-form-border-color);
372
- --tds-checkbox-input-background-color:transparent;
373
-
374
- --tds-checkbox-input-icon:none;
375
- --tds-checkbox-input-icon-visibility:hidden;
376
- --tds-checkbox-input-icon-opacity:0;
377
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
378
-
379
- --tds-checkbox-label-color:var(--t-form-color);
380
-
381
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
382
- --tds-checkbox-description-line-height:1.35;
383
- --tds-checkbox-description-color:var(--t-text-color-secondary);
384
- --tds-checkbox-description-invalid-icon-display:none;
278
+ --tds-radio-description-font-size:var(--t-font-size-sm);
279
+ --tds-radio-description-line-height:1.35;
280
+ --tds-radio-description-color:var(--t-text-color-secondary);
385
281
 
386
282
  position:relative;
387
283
  display:inline-grid;
388
284
  grid-template-columns:auto;
389
285
  grid-auto-columns:1fr;
390
286
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
391
- line-height:var(--tds-checkbox-line-height);
392
- cursor:var(--tds-checkbox-cursor);
287
+ line-height:var(--tds-radio-line-height);
288
+ cursor:var(--tds-radio-cursor);
393
289
  -webkit-user-select:none;
394
290
  -moz-user-select:none;
395
291
  user-select:none;
396
292
  }
397
293
 
398
- .tds-checkbox label{
294
+ .tds-radio label{
399
295
  grid-area:1 / 2;
400
- font-size:var(--tds-checkbox-font-size);
296
+ font-size:var(--tds-radio-font-size);
401
297
  font-weight:var(--t-font-weight-normal);
402
- color:var(--tds-checkbox-label-color);
403
- cursor:var(--tds-checkbox-cursor);
404
- }
405
-
406
- .tds-checkbox tds-indeterminate{
407
- display:flex;
298
+ color:var(--tds-radio-label-color);
299
+ cursor:var(--tds-radio-cursor);
408
300
  }
409
301
 
410
- .tds-checkbox input[type="checkbox"]{
302
+ .tds-radio input[type="radio"]{
411
303
  position:relative;
412
304
  width:1em;
413
305
  height:1em;
414
306
  margin:calc((1lh - 1em) / 2) 0 0;
415
- font-size:var(--tds-checkbox-font-size);
307
+ font-size:var(--tds-radio-font-size);
416
308
  line-height:inherit;
417
309
  -webkit-appearance:none;
418
310
  -moz-appearance:none;
419
311
  appearance:none;
420
- cursor:var(--tds-checkbox-cursor);
421
- background-color:var(--tds-checkbox-input-background-color);
422
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
423
- border-radius:var(--tds-checkbox-input-border-radius);
312
+ cursor:var(--tds-radio-cursor);
313
+ background-color:var(--tds-radio-input-background-color);
314
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
315
+ border-radius:var(--tds-radio-input-border-radius);
424
316
  transition-timing-function:var(--t-ease-in-out);
425
317
  transition-duration:var(--t-duration-200);
426
- transition-property:var(--tds-checkbox-transition-property);
318
+ transition-property:var(--tds-radio-transition-property);
427
319
  }
428
320
 
429
- :is(.tds-checkbox input[type="checkbox"])::before{
430
- position:absolute;
431
- top:50%;
432
- left:50%;
433
- visibility:var(--tds-checkbox-input-icon-visibility);
434
- width:100%;
435
- height:100%;
436
- content:"";
437
- background-color:var(--tds-checkbox-input-icon-fill);
438
- border-radius:var(--tds-checkbox-input-border-radius);
439
- opacity:var(--tds-checkbox-input-icon-opacity);
440
- -webkit-mask-image:var(--tds-checkbox-input-icon);
441
- mask-image:var(--tds-checkbox-input-icon);
442
- -webkit-mask-repeat:no-repeat;
443
- mask-repeat:no-repeat;
444
- -webkit-mask-size:contain;
445
- mask-size:contain;
446
- transform:translate(-50%, -50%);
447
- }
448
-
449
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
450
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
451
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
321
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
322
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
323
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
452
324
  }
453
325
 
454
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
326
+ :is(.tds-radio input[type="radio"]):focus-visible{
455
327
  outline:var(--t-focus-ring-outline);
456
328
  outline-offset:var(--t-focus-ring-offset);
457
329
  }
458
330
 
459
- :is(.tds-checkbox input[type="checkbox"]):disabled{
331
+ :is(.tds-radio input[type="radio"]):disabled{
460
332
  pointer-events:none;
461
333
  }
462
334
 
463
335
  @media (prefers-reduced-motion: reduce){
464
336
 
465
- .tds-checkbox input[type="checkbox"]{
466
- --tds-checkbox-transition-property:none;
337
+ .tds-radio input[type="radio"]{
338
+ --tds-radio-transition-property:none;
467
339
  }
468
340
  }
469
341
 
470
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
471
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
472
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
473
- --tds-checkbox-input-icon-visibility:visible;
474
- --tds-checkbox-input-icon-opacity:1;
342
+ .tds-radio:has(input:checked){
343
+ --tds-radio-input-background-color:var(--t-form-background-color);
344
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
345
+ --tds-radio-input-border-width:4px;
475
346
  }
476
347
 
477
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
478
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
479
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
348
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
349
+ --tds-radio-input-background-color:var(--t-form-background-color);
350
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
480
351
  }
481
352
 
482
- .tds-checkbox:has(input:checked){
483
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
484
- }
485
-
486
- .tds-checkbox:has(input:indeterminate){
487
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
488
- }
489
-
490
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
- --tds-checkbox-description-color:var(--t-text-color-status-error);
493
- --tds-checkbox-description-invalid-icon-display:inline-block;
353
+ .tds-radio:has(input:user-invalid){
354
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
494
355
  }
495
356
 
496
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
499
- }
500
-
501
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
502
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
504
- }
505
-
506
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
507
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
509
- }
510
-
511
- .tds-checkbox:has(input:required) label::after{
512
- margin-left:.25ch;
513
- color:var(--t-text-color-status-error);
514
- content:"*";
357
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
358
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
359
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
515
360
  }
516
361
 
517
- .tds-checkbox:has(input:disabled){
518
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
362
+ .tds-radio:has(input:disabled){
363
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
364
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
520
365
 
521
- --tds-checkbox-label-color:var(--t-form-color-disabled);
522
- --tds-checkbox-description-color:var(--t-form-color-disabled);
523
- --tds-checkbox-cursor:not-allowed;
366
+ --tds-radio-label-color:var(--t-form-color-disabled);
367
+ --tds-radio-description-color:var(--t-form-color-disabled);
368
+ --tds-radio-cursor:not-allowed;
524
369
  }
525
370
 
526
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
371
+ .tds-radio:has(input:disabled) input:checked{
372
+ --tds-radio-input-background-color:var(--t-form-background-color);
373
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
528
374
  }
529
375
 
530
- .tds-checkbox-description{
376
+ .tds-radio-description{
531
377
  display:flex;
532
378
  grid-area:2 / 2;
533
379
  gap:var(--t-spacing-half);
534
380
  align-items:flex-start;
535
381
  margin:0;
536
- font-size:var(--tds-checkbox-description-font-size);
537
- line-height:var(--tds-checkbox-description-line-height);
538
- color:var(--tds-checkbox-description-color);
382
+ font-size:var(--tds-radio-description-font-size);
383
+ line-height:var(--tds-radio-description-line-height);
384
+ color:var(--tds-radio-description-color);
539
385
  cursor:text;
540
386
  }
541
387
 
542
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
- display:var(--tds-checkbox-description-invalid-icon-display);
544
- flex-shrink:0;
545
- margin-top:calc(.5lh - .5em);
546
- line-height:var(--tds-checkbox-description-line-height);
547
- }
548
-
549
- .tds-checkbox--sm{
550
- --tds-checkbox-line-height:1.35;
551
- --tds-checkbox-input-size:var(--t-element-size-sm);
552
- --tds-checkbox-font-size:var(--t-font-size-sm);
553
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
- --tds-checkbox-description-line-height:1.3;
388
+ .tds-radio--sm{
389
+ --tds-radio-line-height:1.35;
390
+ --tds-radio-input-size:var(--t-element-size-sm);
391
+ --tds-radio-font-size:var(--t-font-size-sm);
392
+ --tds-radio-description-font-size:var(--t-font-size-xs);
393
+ --tds-radio-description-line-height:1.3;
555
394
  }
556
395
 
557
- @layer t-critical{
558
- tds-page-header:not(.hydrated){
559
- display:none;
560
- }
396
+
397
+ @media (prefers-reduced-motion: no-preference){
398
+
399
+ :root{
400
+ interpolate-size:allow-keywords;
561
401
  }
402
+ }
562
403
 
563
- @layer t-component{
564
- .tds-page-header{
565
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
566
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
567
- --tds-page-header-color:var(--t-text-color);
568
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
569
- --tds-page-header-headline-color:var(--t-text-color-headline);
570
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
571
- --tds-page-header-padding-x:var(--t-spacing-2);
572
- --tds-page-header-padding-y:var(--t-spacing-2);
573
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
574
- --tds-page-header-nav-gap:var(--t-spacing-1);
575
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
576
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
577
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
578
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
579
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
580
- --tds-page-header-nav-item-border-width:1px;
404
+ @layer tds-component{
405
+ tds-sidenav,
406
+ .tds-sidenav{
407
+ --tds-sidenav-indent:12px;
408
+ --tds-sidenav-item-depth:0;
581
409
 
582
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
583
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
410
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
584
411
 
585
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
586
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
587
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
412
+ --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;
413
+ --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;
414
+ --tds-sidenav-collapse-closed-opacity:0;
415
+ --tds-sidenav-collapse-open-opacity:1;
416
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
417
+ --tds-sidenav-collapse-open-transform:translateY(0);
588
418
 
589
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
590
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
419
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
420
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
421
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
422
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
591
423
 
592
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
593
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
594
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
424
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
425
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
426
+ --tds-sidenav-item-nested-background-selected:transparent;
595
427
 
596
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
597
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
598
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
599
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
600
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
601
- }
428
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
429
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
430
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
602
431
 
603
- .tds-page-header--profile{
604
- --tds-page-header-padding-y:20px;
432
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
433
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
605
434
  }
606
435
 
607
- @supports (color: light-dark(#fff, #000)){
608
- .tds-page-header{
609
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
610
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
611
- }
436
+ @media (prefers-reduced-motion: reduce){
437
+ tds-sidenav,
438
+ .tds-sidenav{
439
+ --tds-sidenav-collapse-transition-enter:none;
440
+ --tds-sidenav-collapse-transition-exit:none;
441
+ --tds-sidenav-collapse-closed-transform:none;
442
+ --tds-sidenav-collapse-open-transform:none;
612
443
  }
444
+ }
613
445
 
614
- @media (min-width: 600px){
615
- .tds-page-header{
616
- --tds-page-header-background-color:var(--t-surface-color-canvas);
617
- --tds-page-header-color:var(--t-text-color-secondary);
618
- --tds-page-header-bottom-border-color:var(--t-border-color);
619
- --tds-page-header-padding-x:var(--t-spacing-3);
620
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
621
- --tds-page-header-nav-gap:var(--t-spacing-half);
622
- --tds-page-header-nav-background:transparent;
623
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
624
- --tds-page-header-nav-item-border-width:1px;
625
- --tds-page-header-nav-item-color:var(--t-text-color);
626
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
627
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
628
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
629
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
630
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
631
- }
446
+ .tds-sidenav--theme-gray{
447
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
448
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
449
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
450
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
451
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
632
452
  }
633
453
  }
634
454
 
635
- .tds-page-header{
455
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
456
+ display:flex;
457
+ }
458
+
459
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
460
+ flex-direction:column;
461
+ gap:var(--t-spacing-half);
462
+ width:100%;
463
+ }
464
+
465
+ .tds-sidenav-section-list{
466
+ width:100%;
467
+ padding:0;
468
+ margin:0;
469
+ list-style:none;
470
+ }
471
+
472
+ .tds-sidenav-section-header{
636
473
  display:flex;
637
- flex-direction:column;
638
- padding-top:var(--tds-page-header-padding-y);
639
- color:var(--tds-page-header-color);
640
- background:var(--tds-page-header-background-color);
641
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
474
+ align-items:baseline;
475
+ justify-content:space-between;
476
+ padding-top:var(--t-spacing-2);
642
477
  }
643
478
 
644
- .tds-page-header:not(.has-nav){
645
- padding-bottom:var(--tds-page-header-padding-y);
479
+ .tds-sidenav-section-header h2{
480
+ margin:0;
481
+ font-size:var(--t-font-size-sm);
482
+ font-weight:var(--t-font-weight-semibold);
483
+ line-height:1.35;
484
+ color:var(--t-text-color-secondary);
485
+ text-transform:uppercase;
646
486
  }
647
487
 
648
- .tds-page-header.inactive{
649
- background:var(--tds-page-header-background-color-inactive);
488
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
489
+ padding-top:0;
650
490
  }
651
491
 
652
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
653
- width:100%;
492
+ .tds-sidenav-section-header [slot="label-actions"]{
493
+ display:flex;
494
+ gap:var(--t-spacing-half);
495
+ align-items:center;
654
496
  }
655
497
 
656
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
498
+ .tds-sidenav-section [slot="section-actions"]{
499
+ display:flex;
500
+ gap:12px;
501
+ align-items:center;
502
+ min-height:42px;
503
+ padding:var(--t-spacing-1) 0;
504
+ }
505
+
506
+ .tds-sidenav-section-list,
507
+ .tds-sidenav-item{
508
+ width:100%;
509
+ padding:0;
510
+ margin:0;
511
+ }
512
+
513
+ .tds-sidenav-item :is(a,button){
514
+ position:relative;
657
515
  display:flex;
658
- flex-flow:row wrap;
659
- gap:var(--t-spacing-half) var(--t-spacing-1);
660
- align-items:flex-start;
661
- justify-content:flex-start;
662
- min-width:0;
516
+ gap:12px;
517
+ align-items:center;
518
+ width:100%;
519
+ padding:12px;
520
+ overflow:hidden;
521
+ font-size:var(--t-font-size-sm);
522
+ line-height:18px;
523
+ color:var(--t-text-color-headline);
524
+ white-space:nowrap;
525
+ text-decoration:none;
526
+ -webkit-appearance:none;
527
+ -moz-appearance:none;
528
+ appearance:none;
529
+ cursor:pointer;
530
+ background-color:var(--tds-sidenav-item-background, transparent);
531
+ border:0;
532
+ border-radius:var(--t-border-radius);
533
+ transition:var(--tds-sidenav-item-transition);
663
534
  }
664
535
 
665
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
666
- display:flex;
667
- gap:var(--tds-page-header-nav-gap);
668
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
669
- margin:0 0 -1px;
670
- overflow:auto;
671
- list-style:none;
672
- background:var(--tds-page-header-nav-background);
536
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
537
+ display:block;
538
+ flex:1;
539
+ overflow:hidden;
540
+ text-overflow:ellipsis;
541
+ text-align:left;
542
+ white-space:nowrap;
673
543
  }
674
544
 
675
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
676
- position:relative;
677
- display:inline-flex;
678
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
679
- font-size:var(--t-font-size-sm);
680
- line-height:22px;
681
- color:var(--tds-page-header-nav-item-color);
682
- white-space:nowrap;
545
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
546
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
547
+ color:var(--t-text-color-headline);
683
548
  text-decoration:none;
684
- -webkit-appearance:none;
685
- -moz-appearance:none;
686
- appearance:none;
687
- cursor:pointer;
688
- outline-offset:-2px;
689
- background-color:var(--tds-page-header-nav-item-background-color);
690
- background-clip:padding-box;
691
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
692
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
693
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
694
549
  }
695
550
 
696
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
697
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
698
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
699
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
700
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
701
- }
702
-
703
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
704
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
705
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
706
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
707
- }
708
-
709
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
710
- background-color:var(--tds-page-header-nav-item-background-color-active);
711
- border-color:var(--tds-page-header-nav-item-border-color-active);
712
- }
713
-
714
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
715
- color:var(--tds-page-header-nav-item-color-disabled);
716
- cursor:not-allowed;
717
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
718
- opacity:1;
719
- }
551
+ :is(.tds-sidenav-item :is(a,button)):active{
552
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
553
+ }
720
554
 
721
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
722
- position:relative;
555
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
556
+ overflow:hidden;
557
+ color:var(--tds-sidenav-item-icon-color);
723
558
  }
724
559
 
725
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
726
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
727
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
560
+ :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{
561
+ display:block;
562
+ width:var(--tds-sidenav-item-icon-size);
563
+ height:var(--tds-sidenav-item-icon-size);
728
564
  }
729
565
 
730
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
731
- position:absolute;
732
- top:-5px;
733
- right:-2px;
734
- width:10px;
735
- height:10px;
736
- content:"";
737
- background:var(--tds-page-header-nav-item-indicator-color);
738
- border-radius:50%;
739
- }
566
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
567
+ --tds-sidenav-indent:19px;
568
+ }
740
569
 
741
- @media (prefers-reduced-motion: no-preference){
742
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
743
- animation:indicator-pulse 1.25s ease infinite;
744
- }
745
- }
570
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
571
+ visibility:visible;
572
+ block-size:auto;
573
+ opacity:1;
574
+ }
746
575
 
747
- .tds-page-header__title-bar{
748
- display:flex;
749
- flex-direction:column;
750
- gap:var(--t-spacing-2) var(--t-spacing-1);
751
- align-items:flex-start;
752
- justify-content:space-between;
753
- padding:0 var(--tds-page-header-padding-x);
754
- }
576
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
577
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
578
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
755
579
 
756
- .tds-page-header--profile > .tds-page-header__title-bar{
757
- align-items:center;
580
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
581
+ font-weight:var(--t-font-weight-semibold);
758
582
  }
759
583
 
760
- .tds-page-header__primary{
761
- width:100%;
762
- }
763
-
764
- .tds-page-header__primary h1{
765
- margin:0;
766
- font-size:var(--tds-page-header-headline-font-size);
767
- font-weight:var(--t-font-weight-normal);
768
- line-height:32px;
769
- color:var(--tds-page-header-headline-color);
770
- overflow-wrap:break-word;
584
+ .tds-sidenav-item:has(.tds-sidenav-section){
585
+ display:flex;
586
+ flex-direction:column;
587
+ gap:var(--t-spacing-half);
771
588
  }
772
589
 
773
- @media (min-width: 960px){
774
- .tds-page-header__primary{
775
- flex:1 1 max-content;
776
- width:auto;
777
- min-width:0;
778
- max-width:100%;
590
+ .tds-sidenav-item .tds-sidenav-section-list{
591
+ --tds-sidenav-item-depth:1;
592
+ gap:0;
779
593
  }
780
594
 
781
- .tds-page-header__title-bar,
782
- .tds-page-header--profile .tds-page-header__title-bar{
783
- flex-flow:row nowrap;
784
- row-gap:12px;
785
- align-items:flex-start;
786
- }
787
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
788
- width:auto;
595
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
596
+ visibility:hidden;
597
+ block-size:0;
598
+ overflow-y:clip;
599
+ opacity:0;
600
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
789
601
  }
790
602
 
791
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
792
- justify-content:flex-end;
603
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
604
+ --tds-sidenav-item-depth:2;
793
605
  }
794
- }
795
-
796
- .tds-page-header-phone,
797
- .tds-page-header-email{
798
- color:var(--tds-page-header-color);
799
- white-space:nowrap;
800
- }
801
606
 
802
- .tds-page-header-email{
803
- max-width:100%;
804
- overflow:hidden;
805
- text-overflow:ellipsis;
806
- }
607
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
608
+ min-height:var(--t-element-size-2xl);
609
+ padding-block:9px;
610
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
611
+ line-height:1;
612
+ background-color:transparent;
613
+ }
807
614
 
808
- @keyframes indicator-pulse{
809
- 0%{
810
- opacity:.3;
811
- transform:scale(.9);
812
- }
615
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
616
+ position:absolute;
617
+ top:0;
618
+ bottom:0;
619
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
620
+ width:2px;
621
+ content:"";
622
+ background-color:var(--tds-sidenav-item-nested-border-color);
623
+ transition:var(--tds-sidenav-item-transition);
624
+ }
813
625
 
814
- 100%{
815
- opacity:0;
816
- transform:scale(1.75);
817
- }
818
- }
626
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
627
+ position:absolute;
628
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
629
+ z-index:-1;
630
+ height:100%;
631
+ content:"";
632
+ background-color:var(--tds-sidenav-item-nested-background);
633
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
634
+ transition:var(--tds-sidenav-item-transition);
635
+ }
819
636
 
820
- .tds-input:has(textarea){
821
- --tds-input-padding-block:6px;
822
- --tds-input-resizer-size:var(--t-element-size-sm);
823
- --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");
824
- }
637
+ :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)){
638
+ display:block;
639
+ text-align:left;
640
+ white-space:normal;
641
+ }
825
642
 
826
- @supports (x: attr(x type(*))){
643
+ :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{
644
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
645
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
646
+ }
827
647
 
828
- .tds-input:has(textarea){
829
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
830
- }
831
- }
648
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
649
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
650
+ }
832
651
 
833
- .tds-input.tds-textarea--resize-vertical textarea{
834
- resize:vertical;
652
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
653
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
654
+ font-weight:var(--t-font-weight-medium);
835
655
  }
836
656
 
837
- .tds-input.tds-textarea--resize-none textarea{
838
- resize:none;
839
- }
657
+ .tds-sidenav-responsive-header{
658
+ display:flex;
659
+ gap:var(--t-spacing-2);
660
+ align-items:center;
661
+ width:100%;
662
+ }
840
663
 
841
- .tds-input.tds-textarea--resize-auto textarea{
842
- resize:vertical;
843
- }
664
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
665
+ order:0;
666
+ }
844
667
 
845
- @supports (field-sizing: content){
846
- .tds-input.tds-textarea--resize-auto textarea{
847
- field-sizing:content;
848
- resize:none;
849
- }
850
- }
668
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
669
+ flex:1;
670
+ order:1;
671
+ margin:0;
672
+ font-size:var(--t-font-size-lg);
673
+ font-weight:var(--t-font-weight-medium);
674
+ color:var(--t-text-color-headline);
675
+ }
851
676
 
852
- .tds-input textarea{
853
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
854
- --tds-input-scrollbar-thumb-color-hidden:transparent;
855
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
856
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
857
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
858
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
859
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
860
- --tds-input-scrollbar-thumb-border-radius:999px;
861
- --tds-input-scrollbar-thumb-border-width:3px;
862
- --tds-input-scrollbar-track-margin-block:.125rem;
863
- scrollbar-color:initial;
864
- transition-timing-function:var(--t-ease-in-out);
865
- transition-duration:var(--t-duration-200);
866
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
867
- }
677
+ @media (max-width: 719px){
678
+ .tds-sidenav-collapse{
679
+ z-index:10001;
680
+ display:none;
681
+ max-width:min(448px, calc(100vw - 48px));
682
+ padding:0;
683
+ margin:12px 0;
684
+ position-area:bottom span-right;
685
+ overflow:hidden;
686
+ outline:0;
687
+ background:var(--t-surface-color-card);
688
+ border:0;
689
+ border-radius:6px;
690
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
691
+ opacity:var(--tds-sidenav-collapse-open-opacity);
692
+ transform:var(--tds-sidenav-collapse-open-transform);
693
+ transition:var(--tds-sidenav-collapse-transition-enter);
694
+ will-change:transform;
695
+ }
868
696
 
869
- @media (pointer: fine){
870
- :is(.tds-input textarea)::-webkit-scrollbar{
871
- width:12px;
872
- height:12px;
873
- cursor:default;
874
- }
697
+ .tds-sidenav-scroll-container{
698
+ --webkit-overflow-scrolling:touch;
699
+ display:block;
700
+ width:100%;
701
+ height:-moz-fit-content;
702
+ height:fit-content;
703
+ padding:var(--t-spacing-2);
704
+ overflow-y:auto;
705
+ }
875
706
 
876
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
877
- cursor:default;
878
- background:var(--tds-input-scrollbar-thumb-color);
879
- background-clip:content-box;
880
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
881
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
707
+ .tds-sidenav-item :is(a, button) :is(.prefix){
708
+ display:none;
709
+ }
710
+ @supports selector(:popover-open){
711
+ .tds-sidenav-collapse:popover-open{
712
+ display:flex;
882
713
  }
883
714
 
884
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
885
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
715
+ .tds-sidenav-collapse:not(:popover-open){
716
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
717
+ transition:var(--tds-sidenav-collapse-transition-exit);
886
718
  }
887
719
 
888
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
889
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
720
+ @starting-style{
721
+ .tds-sidenav-collapse:popover-open{
722
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
723
+ transform:var(--tds-sidenav-collapse-closed-transform);
724
+ }
890
725
  }
891
-
892
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
893
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
726
+ }
727
+ @supports not selector(:popover-open){
728
+ .tds-sidenav-collapse.\:popover-open{
729
+ display:flex;
894
730
  }
895
731
 
896
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
897
- background:var(--tds-input-scrollbar-surface-color);
732
+ .tds-sidenav-collapse:not(.\:popover-open){
733
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
734
+ transition:var(--tds-sidenav-collapse-transition-exit);
898
735
  }
736
+ }
737
+ }
899
738
 
900
- :is(.tds-input textarea)::-webkit-resizer{
901
- background:var(--tds-input-resizer-icon) no-repeat;
902
- background-position:right bottom;
903
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
904
- }
739
+ @media (min-width: 720px){
740
+ .tds-sidenav-responsive-header{
741
+ display:none;
742
+ }
743
+ }
905
744
 
906
- :is(.tds-input textarea)::-webkit-scrollbar-track{
907
- margin-block:var(--tds-input-scrollbar-track-margin-block);
908
- cursor:default;
745
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
746
+ display:none;
909
747
  }
910
748
 
911
- @supports (-moz-appearance: none){
912
- :is(.tds-input textarea){
913
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
914
- scrollbar-width:thin;
915
- }
749
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
750
+ display:block;
751
+ }
916
752
 
917
- @media (hover){
918
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
919
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
920
- }
921
- }
753
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
754
+ display:flex;
755
+ flex-direction:column;
922
756
  }
923
- }
924
757
 
925
758
  .tds-radio-group{
926
759
  --tds-radio-group-font-size:var(--t-font-size-md);
@@ -1150,136 +983,198 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1150
983
  --tds-toggle-switch-display:inline-flex;
1151
984
  }
1152
985
 
1153
- .tds-radio{
1154
- --tds-radio-font-size:var(--t-font-size-md);
1155
- --tds-radio-cursor:pointer;
1156
- --tds-radio-line-height:1.4;
1157
- --tds-radio-transition-property:border-width;
986
+ .tds-checkbox{
987
+ --tds-checkbox-font-size:var(--t-font-size-md);
988
+ --tds-checkbox-cursor:pointer;
989
+ --tds-checkbox-line-height:1.4;
990
+ --tds-checkbox-transition-property:background-color, border-color;
1158
991
 
1159
- --tds-radio-input-size:var(--t-element-size-md);
1160
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1161
- --tds-radio-input-border-color:var(--t-form-border-color);
1162
- --tds-radio-input-border-width:var(--t-form-border-width);
1163
- --tds-radio-input-background-color:transparent;
992
+ --tds-checkbox-input-size:var(--t-element-size-md);
993
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
994
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
995
+ --tds-checkbox-input-background-color:transparent;
1164
996
 
1165
- --tds-radio-label-color:var(--t-form-color);
997
+ --tds-checkbox-input-icon:none;
998
+ --tds-checkbox-input-icon-visibility:hidden;
999
+ --tds-checkbox-input-icon-opacity:0;
1000
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1166
1001
 
1167
- --tds-radio-description-font-size:var(--t-font-size-sm);
1168
- --tds-radio-description-line-height:1.35;
1169
- --tds-radio-description-color:var(--t-text-color-secondary);
1002
+ --tds-checkbox-label-color:var(--t-form-color);
1003
+
1004
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1005
+ --tds-checkbox-description-line-height:1.35;
1006
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1007
+ --tds-checkbox-description-invalid-icon-display:none;
1170
1008
 
1171
1009
  position:relative;
1172
1010
  display:inline-grid;
1173
1011
  grid-template-columns:auto;
1174
1012
  grid-auto-columns:1fr;
1175
1013
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
1176
- line-height:var(--tds-radio-line-height);
1177
- cursor:var(--tds-radio-cursor);
1014
+ line-height:var(--tds-checkbox-line-height);
1015
+ cursor:var(--tds-checkbox-cursor);
1178
1016
  -webkit-user-select:none;
1179
1017
  -moz-user-select:none;
1180
1018
  user-select:none;
1181
1019
  }
1182
1020
 
1183
- .tds-radio label{
1021
+ .tds-checkbox label{
1184
1022
  grid-area:1 / 2;
1185
- font-size:var(--tds-radio-font-size);
1023
+ font-size:var(--tds-checkbox-font-size);
1186
1024
  font-weight:var(--t-font-weight-normal);
1187
- color:var(--tds-radio-label-color);
1188
- cursor:var(--tds-radio-cursor);
1025
+ color:var(--tds-checkbox-label-color);
1026
+ cursor:var(--tds-checkbox-cursor);
1189
1027
  }
1190
1028
 
1191
- .tds-radio input[type="radio"]{
1029
+ .tds-checkbox tds-indeterminate{
1030
+ display:flex;
1031
+ }
1032
+
1033
+ .tds-checkbox input[type="checkbox"]{
1192
1034
  position:relative;
1193
1035
  width:1em;
1194
1036
  height:1em;
1195
1037
  margin:calc((1lh - 1em) / 2) 0 0;
1196
- font-size:var(--tds-radio-font-size);
1038
+ font-size:var(--tds-checkbox-font-size);
1197
1039
  line-height:inherit;
1198
1040
  -webkit-appearance:none;
1199
1041
  -moz-appearance:none;
1200
1042
  appearance:none;
1201
- cursor:var(--tds-radio-cursor);
1202
- background-color:var(--tds-radio-input-background-color);
1203
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1204
- border-radius:var(--tds-radio-input-border-radius);
1043
+ cursor:var(--tds-checkbox-cursor);
1044
+ background-color:var(--tds-checkbox-input-background-color);
1045
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1046
+ border-radius:var(--tds-checkbox-input-border-radius);
1205
1047
  transition-timing-function:var(--t-ease-in-out);
1206
1048
  transition-duration:var(--t-duration-200);
1207
- transition-property:var(--tds-radio-transition-property);
1049
+ transition-property:var(--tds-checkbox-transition-property);
1208
1050
  }
1209
1051
 
1210
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1211
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1212
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1052
+ :is(.tds-checkbox input[type="checkbox"])::before{
1053
+ position:absolute;
1054
+ top:50%;
1055
+ left:50%;
1056
+ visibility:var(--tds-checkbox-input-icon-visibility);
1057
+ width:100%;
1058
+ height:100%;
1059
+ content:"";
1060
+ background-color:var(--tds-checkbox-input-icon-fill);
1061
+ border-radius:var(--tds-checkbox-input-border-radius);
1062
+ opacity:var(--tds-checkbox-input-icon-opacity);
1063
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1064
+ mask-image:var(--tds-checkbox-input-icon);
1065
+ -webkit-mask-repeat:no-repeat;
1066
+ mask-repeat:no-repeat;
1067
+ -webkit-mask-size:contain;
1068
+ mask-size:contain;
1069
+ transform:translate(-50%, -50%);
1213
1070
  }
1214
1071
 
1215
- :is(.tds-radio input[type="radio"]):focus-visible{
1072
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1073
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1074
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1075
+ }
1076
+
1077
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1216
1078
  outline:var(--t-focus-ring-outline);
1217
1079
  outline-offset:var(--t-focus-ring-offset);
1218
1080
  }
1219
1081
 
1220
- :is(.tds-radio input[type="radio"]):disabled{
1082
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1221
1083
  pointer-events:none;
1222
1084
  }
1223
1085
 
1224
1086
  @media (prefers-reduced-motion: reduce){
1225
1087
 
1226
- .tds-radio input[type="radio"]{
1227
- --tds-radio-transition-property:none;
1088
+ .tds-checkbox input[type="checkbox"]{
1089
+ --tds-checkbox-transition-property:none;
1228
1090
  }
1229
1091
  }
1230
1092
 
1231
- .tds-radio:has(input:checked){
1232
- --tds-radio-input-background-color:var(--t-form-background-color);
1233
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1234
- --tds-radio-input-border-width:4px;
1093
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1094
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1095
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1096
+ --tds-checkbox-input-icon-visibility:visible;
1097
+ --tds-checkbox-input-icon-opacity:1;
1235
1098
  }
1236
1099
 
1237
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1238
- --tds-radio-input-background-color:var(--t-form-background-color);
1239
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1100
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1101
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1102
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1240
1103
  }
1241
1104
 
1242
- .tds-radio:has(input:user-invalid){
1243
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1105
+ .tds-checkbox:has(input:checked){
1106
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1244
1107
  }
1245
1108
 
1246
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1247
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1248
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1109
+ .tds-checkbox:has(input:indeterminate){
1110
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1111
+ }
1112
+
1113
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1114
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1115
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1116
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1117
+ }
1118
+
1119
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1120
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1121
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1249
1122
  }
1250
1123
 
1251
- .tds-radio:has(input:disabled){
1252
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1253
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1124
+ :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{
1125
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1126
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1127
+ }
1254
1128
 
1255
- --tds-radio-label-color:var(--t-form-color-disabled);
1256
- --tds-radio-description-color:var(--t-form-color-disabled);
1257
- --tds-radio-cursor:not-allowed;
1129
+ :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){
1130
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1131
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1132
+ }
1133
+
1134
+ .tds-checkbox:has(input:required) label::after{
1135
+ margin-left:.25ch;
1136
+ color:var(--t-text-color-status-error);
1137
+ content:"*";
1138
+ }
1139
+
1140
+ .tds-checkbox:has(input:disabled){
1141
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1142
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1143
+
1144
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1145
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1146
+ --tds-checkbox-cursor:not-allowed;
1258
1147
  }
1259
1148
 
1260
- .tds-radio:has(input:disabled) input:checked{
1261
- --tds-radio-input-background-color:var(--t-form-background-color);
1262
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1149
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1150
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1263
1151
  }
1264
1152
 
1265
- .tds-radio-description{
1153
+ .tds-checkbox-description{
1266
1154
  display:flex;
1267
1155
  grid-area:2 / 2;
1268
1156
  gap:var(--t-spacing-half);
1269
1157
  align-items:flex-start;
1270
1158
  margin:0;
1271
- font-size:var(--tds-radio-description-font-size);
1272
- line-height:var(--tds-radio-description-line-height);
1273
- color:var(--tds-radio-description-color);
1159
+ font-size:var(--tds-checkbox-description-font-size);
1160
+ line-height:var(--tds-checkbox-description-line-height);
1161
+ color:var(--tds-checkbox-description-color);
1274
1162
  cursor:text;
1275
1163
  }
1276
1164
 
1277
- .tds-radio--sm{
1278
- --tds-radio-line-height:1.35;
1279
- --tds-radio-input-size:var(--t-element-size-sm);
1280
- --tds-radio-font-size:var(--t-font-size-sm);
1281
- --tds-radio-description-font-size:var(--t-font-size-xs);
1282
- --tds-radio-description-line-height:1.3;
1165
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1166
+ display:var(--tds-checkbox-description-invalid-icon-display);
1167
+ flex-shrink:0;
1168
+ margin-top:calc(.5lh - .5em);
1169
+ line-height:var(--tds-checkbox-description-line-height);
1170
+ }
1171
+
1172
+ .tds-checkbox--sm{
1173
+ --tds-checkbox-line-height:1.35;
1174
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1175
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1176
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1177
+ --tds-checkbox-description-line-height:1.3;
1283
1178
  }
1284
1179
 
1285
1180
 
@@ -1740,91 +1635,196 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1740
1635
  }
1741
1636
  }
1742
1637
 
1743
- .tds-input{
1744
- --tds-input-border-color:var(--t-form-border-color);
1745
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
1746
- --tds-input-background-color:var(--t-form-background-color);
1747
- --tds-input-color:var(--t-form-color);
1748
- --tds-input-font-size:var(--t-font-size-md);
1749
- --tds-input-description-color:var(--t-text-color-secondary);
1750
- --tds-input-description-invalid-icon-display:none;
1751
- --tds-input-min-height:var(--t-container-size-md);
1752
- --tds-input-padding-inline:var(--t-spacing-1);
1753
-
1754
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1755
-
1756
- display:flex;
1757
- flex-direction:column;
1758
- gap:var(--t-spacing-half);
1638
+ .tds-input:has(textarea){
1639
+ --tds-input-padding-block:6px;
1640
+ --tds-input-resizer-size:var(--t-element-size-sm);
1641
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1759
1642
  }
1760
1643
 
1761
- .tds-input label{
1762
- font-size:var(--t-font-size-md);
1763
- font-weight:var(--t-font-weight-normal);
1764
- color:var(--t-text-color);
1765
- }
1644
+ @supports (x: attr(x type(*))){
1766
1645
 
1767
- .tds-input :is(input,textarea){
1768
- inline-size:100%;
1769
- block-size:auto;
1770
- min-block-size:var(--tds-input-min-height);
1771
- padding-block:var(--tds-input-padding-block);
1772
- padding-inline:var(--tds-input-padding-inline);
1773
- font-family:inherit;
1774
- font-size:var(--tds-input-font-size);
1775
- color:var(--tds-input-color);
1776
- -webkit-appearance:none;
1777
- -moz-appearance:none;
1778
- appearance:none;
1779
- outline:var(--t-focus-ring-width) solid transparent;
1780
- outline-offset:0;
1781
- background-color:var(--tds-input-background-color);
1782
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
1783
- border-radius:var(--t-form-border-radius);
1784
- transition-timing-function:var(--t-ease-in-out);
1785
- transition-duration:var(--t-duration-200);
1786
- transition-property:var(--tds-input-transition-property);
1646
+ .tds-input:has(textarea){
1647
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1648
+ }
1787
1649
  }
1788
1650
 
1789
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1790
- border-color:var(--tds-input-border-color-hover);
1791
- }
1792
-
1793
- :is(.tds-input :is(input,textarea)):focus{
1794
- outline-color:transparent;
1795
- }
1796
-
1797
- :is(.tds-input :is(input,textarea)):focus-visible{
1798
- outline-color:var(--t-focus-ring-color);
1799
- outline-offset:var(--t-focus-ring-offset);
1800
- border-color:var(--t-form-border-color-focus);
1651
+ .tds-input.tds-textarea--resize-vertical textarea{
1652
+ resize:vertical;
1801
1653
  }
1802
1654
 
1803
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
1804
- color:var(--t-form-placeholder-color);
1805
- -moz-user-select:none;
1806
- user-select:none;
1655
+ .tds-input.tds-textarea--resize-none textarea{
1656
+ resize:none;
1807
1657
  }
1808
1658
 
1809
- :is(.tds-input :is(input,textarea))::placeholder{
1810
- color:var(--t-form-placeholder-color);
1811
- -webkit-user-select:none;
1812
- -moz-user-select:none;
1813
- user-select:none;
1659
+ .tds-input.tds-textarea--resize-auto textarea{
1660
+ resize:vertical;
1814
1661
  }
1815
1662
 
1816
- @media (prefers-reduced-motion: reduce){
1817
-
1818
- .tds-input :is(input,textarea){
1819
- --tds-input-transition-property:none;
1820
- }
1663
+ @supports (field-sizing: content){
1664
+ .tds-input.tds-textarea--resize-auto textarea{
1665
+ field-sizing:content;
1666
+ resize:none;
1667
+ }
1821
1668
  }
1822
1669
 
1823
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1824
- --tds-input-background-color:var(--t-form-background-color-error);
1825
- --tds-input-border-color:var(--t-form-border-color-error);
1826
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1827
- --tds-input-description-color:var(--t-text-color-status-error);
1670
+ .tds-input textarea{
1671
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1672
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1673
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1674
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1675
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1676
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1677
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1678
+ --tds-input-scrollbar-thumb-border-radius:999px;
1679
+ --tds-input-scrollbar-thumb-border-width:3px;
1680
+ --tds-input-scrollbar-track-margin-block:.125rem;
1681
+ scrollbar-color:initial;
1682
+ transition-timing-function:var(--t-ease-in-out);
1683
+ transition-duration:var(--t-duration-200);
1684
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1685
+ }
1686
+
1687
+ @media (pointer: fine){
1688
+ :is(.tds-input textarea)::-webkit-scrollbar{
1689
+ width:12px;
1690
+ height:12px;
1691
+ cursor:default;
1692
+ }
1693
+
1694
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1695
+ cursor:default;
1696
+ background:var(--tds-input-scrollbar-thumb-color);
1697
+ background-clip:content-box;
1698
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1699
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1700
+ }
1701
+
1702
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1703
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1704
+ }
1705
+
1706
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1707
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1708
+ }
1709
+
1710
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1711
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1712
+ }
1713
+
1714
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1715
+ background:var(--tds-input-scrollbar-surface-color);
1716
+ }
1717
+
1718
+ :is(.tds-input textarea)::-webkit-resizer{
1719
+ background:var(--tds-input-resizer-icon) no-repeat;
1720
+ background-position:right bottom;
1721
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1722
+ }
1723
+
1724
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1725
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1726
+ cursor:default;
1727
+ }
1728
+
1729
+ @supports (-moz-appearance: none){
1730
+ :is(.tds-input textarea){
1731
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1732
+ scrollbar-width:thin;
1733
+ }
1734
+
1735
+ @media (hover){
1736
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1737
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1738
+ }
1739
+ }
1740
+ }
1741
+ }
1742
+
1743
+ .tds-input{
1744
+ --tds-input-border-color:var(--t-form-border-color);
1745
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
1746
+ --tds-input-background-color:var(--t-form-background-color);
1747
+ --tds-input-color:var(--t-form-color);
1748
+ --tds-input-font-size:var(--t-font-size-md);
1749
+ --tds-input-description-color:var(--t-text-color-secondary);
1750
+ --tds-input-description-invalid-icon-display:none;
1751
+ --tds-input-min-height:var(--t-container-size-md);
1752
+ --tds-input-padding-inline:var(--t-spacing-1);
1753
+
1754
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
1755
+
1756
+ display:flex;
1757
+ flex-direction:column;
1758
+ gap:var(--t-spacing-half);
1759
+ }
1760
+
1761
+ .tds-input label{
1762
+ font-size:var(--t-font-size-md);
1763
+ font-weight:var(--t-font-weight-normal);
1764
+ color:var(--t-text-color);
1765
+ }
1766
+
1767
+ .tds-input :is(input,textarea){
1768
+ inline-size:100%;
1769
+ block-size:auto;
1770
+ min-block-size:var(--tds-input-min-height);
1771
+ padding-block:var(--tds-input-padding-block);
1772
+ padding-inline:var(--tds-input-padding-inline);
1773
+ font-family:inherit;
1774
+ font-size:var(--tds-input-font-size);
1775
+ color:var(--tds-input-color);
1776
+ -webkit-appearance:none;
1777
+ -moz-appearance:none;
1778
+ appearance:none;
1779
+ outline:var(--t-focus-ring-width) solid transparent;
1780
+ outline-offset:0;
1781
+ background-color:var(--tds-input-background-color);
1782
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
1783
+ border-radius:var(--t-form-border-radius);
1784
+ transition-timing-function:var(--t-ease-in-out);
1785
+ transition-duration:var(--t-duration-200);
1786
+ transition-property:var(--tds-input-transition-property);
1787
+ }
1788
+
1789
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
1790
+ border-color:var(--tds-input-border-color-hover);
1791
+ }
1792
+
1793
+ :is(.tds-input :is(input,textarea)):focus{
1794
+ outline-color:transparent;
1795
+ }
1796
+
1797
+ :is(.tds-input :is(input,textarea)):focus-visible{
1798
+ outline-color:var(--t-focus-ring-color);
1799
+ outline-offset:var(--t-focus-ring-offset);
1800
+ border-color:var(--t-form-border-color-focus);
1801
+ }
1802
+
1803
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
1804
+ color:var(--t-form-placeholder-color);
1805
+ -moz-user-select:none;
1806
+ user-select:none;
1807
+ }
1808
+
1809
+ :is(.tds-input :is(input,textarea))::placeholder{
1810
+ color:var(--t-form-placeholder-color);
1811
+ -webkit-user-select:none;
1812
+ -moz-user-select:none;
1813
+ user-select:none;
1814
+ }
1815
+
1816
+ @media (prefers-reduced-motion: reduce){
1817
+
1818
+ .tds-input :is(input,textarea){
1819
+ --tds-input-transition-property:none;
1820
+ }
1821
+ }
1822
+
1823
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
1824
+ --tds-input-background-color:var(--t-form-background-color-error);
1825
+ --tds-input-border-color:var(--t-form-border-color-error);
1826
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
1827
+ --tds-input-description-color:var(--t-text-color-status-error);
1828
1828
  --tds-input-description-invalid-icon-display:inline-block;
1829
1829
  }
1830
1830
 
@@ -3340,66 +3340,371 @@ a[class="tds-btn"]{
3340
3340
  padding:0;
3341
3341
  margin:0;
3342
3342
 
3343
- font-size:var(--tds-checkbox-group-font-size);
3344
- line-height:var(--tds-checkbox-group-line-height);
3345
- border:0;
3343
+ font-size:var(--tds-checkbox-group-font-size);
3344
+ line-height:var(--tds-checkbox-group-line-height);
3345
+ border:0;
3346
+ }
3347
+
3348
+ .tds-checkbox-group legend{
3349
+ padding:0;
3350
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3351
+ }
3352
+
3353
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3354
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3355
+ }
3356
+
3357
+ .tds-checkbox-group[aria-invalid="true"]{
3358
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3359
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3360
+ }
3361
+
3362
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3363
+ margin-left:.25ch;
3364
+ color:var(--t-text-color-status-error);
3365
+ content:"*";
3366
+ }
3367
+
3368
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3369
+ content:none;
3370
+ }
3371
+
3372
+ .tds-checkbox-group-fields{
3373
+ display:flex;
3374
+ flex-direction:column;
3375
+ gap:var(--tds-checkbox-group-gap);
3376
+ align-items:flex-start;
3377
+ }
3378
+
3379
+ .tds-checkbox-group-description{
3380
+ display:flex;
3381
+ gap:var(--t-spacing-half);
3382
+ align-items:flex-start;
3383
+ margin:0;
3384
+ font-size:var(--tds-checkbox-group-description-font-size);
3385
+ line-height:var(--tds-checkbox-group-description-line-height);
3386
+ color:var(--tds-checkbox-group-description-color);
3387
+ cursor:text;
3388
+ }
3389
+
3390
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3391
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3392
+ flex-shrink:0;
3393
+ margin-top:calc(.5lh - .5em);
3394
+ line-height:var(--tds-checkbox-group-description-line-height);
3395
+ }
3396
+
3397
+ .tds-checkbox-group--sm{
3398
+ --tds-checkbox-group-line-height:1.35;
3399
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3400
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3401
+ --tds-checkbox-group-description-line-height:1.3;
3402
+ }
3403
+
3404
+ .tds-date-picker{
3405
+ --tds-date-picker-border-color:var(--t-form-border-color);
3406
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3407
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3408
+ --tds-date-picker-background-color:var(--t-form-background-color);
3409
+ --tds-date-picker-color:var(--t-form-color);
3410
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3411
+ --tds-date-picker-font-size:var(--t-font-size-md);
3412
+ --tds-date-picker-min-height:var(--t-container-size-md);
3413
+ --tds-date-picker-padding-block:6px;
3414
+ --tds-date-picker-button-offset:4px;
3415
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3416
+ --tds-date-picker-description-invalid-icon-display:none;
3417
+
3418
+ position:relative;
3419
+ display:flex;
3420
+ flex-direction:column;
3421
+ gap:var(--t-spacing-half);
3422
+ }
3423
+
3424
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3425
+ margin-left:.25ch;
3426
+ color:var(--t-text-color-status-error);
3427
+ content:"*";
3428
+ }
3429
+
3430
+ .tds-date-picker[data-invalid]{
3431
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3432
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3433
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3434
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3435
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3436
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3437
+ }
3438
+
3439
+ .tds-date-picker[data-disabled]{
3440
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3441
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3442
+ --tds-date-picker-color:var(--t-form-color-disabled);
3443
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3444
+ }
3445
+
3446
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3447
+ cursor:not-allowed;
3448
+ }
3449
+
3450
+ .tds-date-picker--lg{
3451
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3452
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3453
+ --tds-date-picker-button-offset:5px;
3454
+ }
3455
+
3456
+ .tds-date-picker-label{
3457
+ font-size:var(--t-font-size-md);
3458
+ font-weight:var(--t-font-weight-normal);
3459
+ color:var(--t-text-color);
3460
+ cursor:default;
3461
+ }
3462
+
3463
+ .tds-date-picker-field{
3464
+ display:flex;
3465
+ align-items:center;
3466
+ inline-size:100%;
3467
+ min-block-size:var(--tds-date-picker-min-height);
3468
+ font-family:inherit;
3469
+ font-size:var(--tds-date-picker-font-size);
3470
+ line-height:1;
3471
+ color:var(--tds-date-picker-color);
3472
+ -webkit-appearance:none;
3473
+ -moz-appearance:none;
3474
+ appearance:none;
3475
+ cursor:text;
3476
+ outline:var(--t-focus-ring-width) solid transparent;
3477
+ outline-offset:0;
3478
+ background-color:var(--tds-date-picker-background-color);
3479
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3480
+ border-radius:var(--t-form-border-radius);
3481
+ }
3482
+
3483
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3484
+ border-color:var(--tds-date-picker-border-color-hover);
3485
+ }
3486
+
3487
+ .tds-date-picker-field[data-focus-within]{
3488
+ outline-color:var(--t-focus-ring-color);
3489
+ outline-offset:var(--t-focus-ring-offset);
3490
+ border-color:var(--tds-date-picker-border-color-active);
3491
+ }
3492
+
3493
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3494
+ color:var(--t-form-color-readonly);
3495
+ background-color:var(--t-form-background-color-readonly);
3496
+ border-color:var(--t-form-border-color-readonly);
3497
+ }
3498
+
3499
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3500
+ border-color:var(--t-form-border-color-readonly);
3501
+ }
3502
+
3503
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3504
+ outline-color:var(--t-focus-ring-color);
3505
+ outline-offset:var(--t-focus-ring-offset);
3506
+ border-color:var(--t-form-border-color-hover);
3507
+ }
3508
+
3509
+ .tds-date-picker-input{
3510
+ flex:1;
3511
+ padding-block:var(--tds-date-picker-padding-block);
3512
+ padding-inline-start:var(--t-spacing-1);
3513
+ font-variant-numeric:tabular-nums;
3514
+ }
3515
+
3516
+ .tds-date-picker-segment{
3517
+ padding-inline:2px;
3518
+ caret-color:transparent;
3519
+ border-radius:var(--t-border-radius-sm);
3520
+ }
3521
+
3522
+ .tds-date-picker-segment[data-placeholder]{
3523
+ color:var(--tds-date-picker-placeholder-color);
3524
+ }
3525
+
3526
+ .tds-date-picker-segment[data-focused]{
3527
+ color:var(--t-text-color-inverted);
3528
+ outline:0;
3529
+ background:var(--t-fill-color-interaction);
3530
+ }
3531
+
3532
+ .tds-date-picker-segment-separator{
3533
+ padding-inline:0;
3534
+ color:var(--tds-date-picker-placeholder-color);
3535
+ }
3536
+
3537
+ .tds-date-picker-description{
3538
+ display:flex;
3539
+ gap:var(--t-spacing-half);
3540
+ align-items:flex-start;
3541
+ margin:0;
3542
+ font-size:var(--t-font-size-sm);
3543
+ line-height:1.35;
3544
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3545
+ cursor:text;
3546
+ }
3547
+
3548
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3549
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3550
+ flex-shrink:0;
3551
+ margin-block-start:calc(.5lh - .5em);
3552
+ line-height:1.35;
3553
+ }
3554
+
3555
+ .tds-date-picker-button{
3556
+ flex-shrink:0;
3557
+ align-self:center;
3558
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3559
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3560
+ padding:0;
3561
+ margin-inline-end:var(--tds-date-picker-button-offset);
3562
+ }
3563
+
3564
+ .tds-date-picker-popover{
3565
+ padding:var(--t-spacing-2);
3566
+ background:var(--t-surface-color-card);
3567
+ border:1px solid var(--t-border-color);
3568
+ border-radius:var(--t-border-radius);
3569
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3570
+ }
3571
+
3572
+ .tds-date-picker-popover[data-entering]{
3573
+ animation:tds-date-picker-popover-enter 160ms ease;
3574
+ }
3575
+
3576
+ .tds-date-picker-popover[data-exiting]{
3577
+ animation:tds-date-picker-popover-exit 130ms ease;
3578
+ }
3579
+
3580
+ @keyframes tds-date-picker-popover-enter{
3581
+ from{
3582
+ opacity:0;
3583
+ transform:translateY(-8px);
3584
+ }
3585
+ }
3586
+
3587
+ @keyframes tds-date-picker-popover-exit{
3588
+ to{
3589
+ opacity:0;
3590
+ transform:translateY(-8px);
3591
+ }
3592
+ }
3593
+
3594
+ @media (prefers-reduced-motion: reduce){
3595
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3596
+ animation:none;
3597
+ }
3598
+ }
3599
+
3600
+ .tds-date-picker-calendar{
3601
+ inline-size:-moz-fit-content;
3602
+ inline-size:fit-content;
3603
+ }
3604
+
3605
+ .tds-date-picker-calendar-header{
3606
+ display:flex;
3607
+ align-items:center;
3608
+ justify-content:space-between;
3609
+ padding-block-end:var(--t-spacing-1);
3610
+ }
3611
+
3612
+ .tds-date-picker-calendar-title{
3613
+ flex:1;
3614
+ margin:0;
3615
+ font-size:var(--t-font-size-md);
3616
+ font-weight:var(--t-font-weight-semibold);
3617
+ text-align:center;
3618
+ }
3619
+
3620
+ .tds-date-picker-calendar-nav{
3621
+ display:flex;
3622
+ align-items:center;
3623
+ justify-content:center;
3624
+ padding:var(--t-spacing-half);
3625
+ color:var(--t-text-color);
3626
+ cursor:default;
3627
+ outline:0;
3628
+ background:transparent;
3629
+ border:0;
3630
+ border-radius:var(--t-border-radius-sm);
3631
+ }
3632
+
3633
+ .tds-date-picker-calendar-nav[data-hovered]{
3634
+ background:var(--t-fill-color-neutral-070);
3635
+ }
3636
+
3637
+ .tds-date-picker-calendar-nav[data-pressed]{
3638
+ background:var(--t-fill-color-button-interaction-ghost-active);
3639
+ }
3640
+
3641
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3642
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3643
+ outline-offset:var(--t-focus-ring-offset);
3644
+ }
3645
+
3646
+ .tds-date-picker-calendar-nav[data-disabled]{
3647
+ color:var(--t-form-color-disabled);
3648
+ cursor:not-allowed;
3649
+ }
3650
+
3651
+ .tds-date-picker-calendar-grid{
3652
+ border-collapse:collapse;
3653
+ }
3654
+
3655
+ .tds-date-picker-calendar-header-cell{
3656
+ padding-block:var(--t-spacing-half);
3657
+ font-size:var(--t-font-size-sm);
3658
+ font-weight:var(--t-font-weight-normal);
3659
+ color:var(--t-text-color-secondary);
3660
+ text-align:center;
3661
+ }
3662
+
3663
+ .tds-date-picker-calendar-cell{
3664
+ display:flex;
3665
+ align-items:center;
3666
+ justify-content:center;
3667
+ inline-size:2.25rem;
3668
+ block-size:2.25rem;
3669
+ font-size:var(--t-font-size-md);
3670
+ color:var(--t-text-color);
3671
+ cursor:default;
3672
+ outline:0;
3673
+ border-radius:var(--t-border-radius-sm);
3346
3674
  }
3347
3675
 
3348
- .tds-checkbox-group legend{
3349
- padding:0;
3350
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3676
+ .tds-date-picker-calendar-cell[data-hovered]{
3677
+ background:var(--t-fill-color-neutral-070);
3351
3678
  }
3352
3679
 
3353
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3354
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3680
+ .tds-date-picker-calendar-cell[data-pressed]{
3681
+ background:var(--t-fill-color-button-interaction-ghost-active);
3355
3682
  }
3356
3683
 
3357
- .tds-checkbox-group[aria-invalid="true"]{
3358
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3359
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3684
+ .tds-date-picker-calendar-cell[data-selected]{
3685
+ color:var(--t-text-color-inverted);
3686
+ background:var(--t-fill-color-interaction);
3360
3687
  }
3361
3688
 
3362
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3363
- margin-left:.25ch;
3364
- color:var(--t-text-color-status-error);
3365
- content:"*";
3366
- }
3367
-
3368
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3369
- content:none;
3370
- }
3371
-
3372
- .tds-checkbox-group-fields{
3373
- display:flex;
3374
- flex-direction:column;
3375
- gap:var(--tds-checkbox-group-gap);
3376
- align-items:flex-start;
3377
- }
3689
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3690
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3691
+ outline-offset:var(--t-focus-ring-offset);
3692
+ }
3378
3693
 
3379
- .tds-checkbox-group-description{
3380
- display:flex;
3381
- gap:var(--t-spacing-half);
3382
- align-items:flex-start;
3383
- margin:0;
3384
- font-size:var(--tds-checkbox-group-description-font-size);
3385
- line-height:var(--tds-checkbox-group-description-line-height);
3386
- color:var(--tds-checkbox-group-description-color);
3387
- cursor:text;
3388
- }
3694
+ .tds-date-picker-calendar-cell[data-unavailable]{
3695
+ color:var(--t-text-color-secondary);
3696
+ text-decoration:line-through;
3697
+ cursor:not-allowed;
3698
+ }
3389
3699
 
3390
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3391
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3392
- flex-shrink:0;
3393
- margin-top:calc(.5lh - .5em);
3394
- line-height:var(--tds-checkbox-group-description-line-height);
3700
+ .tds-date-picker-calendar-cell[data-disabled]{
3701
+ color:var(--t-form-color-disabled);
3702
+ cursor:not-allowed;
3395
3703
  }
3396
3704
 
3397
- .tds-checkbox-group--sm{
3398
- --tds-checkbox-group-line-height:1.35;
3399
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3400
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3401
- --tds-checkbox-group-description-line-height:1.3;
3402
- }
3705
+ .tds-date-picker-calendar-cell[data-outside-month]{
3706
+ color:var(--t-text-color-secondary);
3707
+ }
3403
3708
 
3404
3709
  .tds-combo-box{
3405
3710
  --tds-combo-box-border-color:var(--t-form-border-color);
@@ -3683,154 +3988,6 @@ a[class="tds-btn"]{
3683
3988
  line-height:1.35;
3684
3989
  }
3685
3990
 
3686
- .tds-time-field{
3687
- --tds-time-field-border-color:var(--t-form-border-color);
3688
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3689
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3690
- --tds-time-field-background-color:var(--t-form-background-color);
3691
- --tds-time-field-color:var(--t-form-color);
3692
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3693
- --tds-time-field-font-size:var(--t-font-size-md);
3694
- --tds-time-field-min-height:var(--t-container-size-md);
3695
- --tds-time-field-padding-block:6px;
3696
- --tds-time-field-description-color:var(--t-text-color-secondary);
3697
- --tds-time-field-description-invalid-icon-display:none;
3698
-
3699
- position:relative;
3700
- display:flex;
3701
- flex-direction:column;
3702
- gap:var(--t-spacing-half);
3703
- }
3704
-
3705
- .tds-time-field[data-required] .tds-time-field-label::after{
3706
- margin-left:.25ch;
3707
- color:var(--t-text-color-status-error);
3708
- content:"*";
3709
- }
3710
-
3711
- .tds-time-field[data-invalid]{
3712
- --tds-time-field-border-color:var(--t-form-border-color-error);
3713
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3714
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3715
- --tds-time-field-background-color:var(--t-form-background-color-error);
3716
- --tds-time-field-description-color:var(--t-text-color-status-error);
3717
- --tds-time-field-description-invalid-icon-display:inline-block;
3718
- }
3719
-
3720
- .tds-time-field[data-disabled]{
3721
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3722
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3723
- --tds-time-field-color:var(--t-form-color-disabled);
3724
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3725
- }
3726
-
3727
- .tds-time-field[data-disabled] .tds-time-field-label{
3728
- color:var(--t-form-color-disabled);
3729
- }
3730
-
3731
- .tds-time-field[data-disabled] .tds-time-field-input{
3732
- cursor:not-allowed;
3733
- }
3734
-
3735
- .tds-time-field--lg{
3736
- --tds-time-field-min-height:var(--t-container-size-lg);
3737
- --tds-time-field-font-size:var(--t-font-size-lg);
3738
- }
3739
-
3740
- .tds-time-field-label{
3741
- font-size:var(--t-font-size-md);
3742
- font-weight:var(--t-font-weight-normal);
3743
- color:var(--t-text-color);
3744
- cursor:default;
3745
- }
3746
-
3747
- .tds-time-field-input{
3748
- display:flex;
3749
- align-items:center;
3750
- inline-size:100%;
3751
- min-block-size:var(--tds-time-field-min-height);
3752
- padding-block:var(--tds-time-field-padding-block);
3753
- padding-inline:var(--t-spacing-1);
3754
- font-family:inherit;
3755
- font-size:var(--tds-time-field-font-size);
3756
- font-variant-numeric:tabular-nums;
3757
- line-height:1;
3758
- color:var(--tds-time-field-color);
3759
- cursor:text;
3760
- outline:var(--t-focus-ring-width) solid transparent;
3761
- outline-offset:0;
3762
- background-color:var(--tds-time-field-background-color);
3763
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3764
- border-radius:var(--t-form-border-radius);
3765
- }
3766
-
3767
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3768
- border-color:var(--tds-time-field-border-color-hover);
3769
- }
3770
-
3771
- .tds-time-field-input[data-focus-within]{
3772
- outline-color:var(--t-focus-ring-color);
3773
- outline-offset:var(--t-focus-ring-offset);
3774
- border-color:var(--tds-time-field-border-color-active);
3775
- }
3776
-
3777
- .tds-time-field-input[data-readonly]{
3778
- color:var(--t-form-color-readonly);
3779
- background-color:var(--t-form-background-color-readonly);
3780
- border-color:var(--t-form-border-color-readonly);
3781
- }
3782
-
3783
- .tds-time-field-input[data-readonly][data-hovered]{
3784
- border-color:var(--t-form-border-color-readonly);
3785
- }
3786
-
3787
- .tds-time-field-input[data-readonly][data-focus-within]{
3788
- outline-color:var(--t-focus-ring-color);
3789
- outline-offset:var(--t-focus-ring-offset);
3790
- border-color:var(--t-form-border-color-hover);
3791
- }
3792
-
3793
- .tds-time-field-segment{
3794
- padding-inline:1px;
3795
- font-variant-numeric:tabular-nums;
3796
- cursor:text;
3797
- caret-color:transparent;
3798
- border-radius:var(--t-border-radius-sm);
3799
- }
3800
-
3801
- .tds-time-field-segment[data-placeholder]{
3802
- color:var(--tds-time-field-placeholder-color);
3803
- }
3804
-
3805
- .tds-time-field-segment[data-focused]{
3806
- color:var(--t-text-color-inverted);
3807
- outline:0;
3808
- background:var(--t-fill-color-interaction);
3809
- }
3810
-
3811
- .tds-time-field-segment-separator{
3812
- padding-inline:0;
3813
- color:var(--tds-time-field-placeholder-color);
3814
- }
3815
-
3816
- .tds-time-field-description{
3817
- display:flex;
3818
- gap:var(--t-spacing-half);
3819
- align-items:flex-start;
3820
- margin:0;
3821
- font-size:var(--t-font-size-sm);
3822
- line-height:1.35;
3823
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3824
- cursor:text;
3825
- }
3826
-
3827
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3828
- display:var(--tds-time-field-description-invalid-icon-display, none);
3829
- flex-shrink:0;
3830
- margin-block-start:calc(.5lh - .5em);
3831
- line-height:1.35;
3832
- }
3833
-
3834
3991
  .tds-number-stepper{
3835
3992
  --tds-number-stepper-border-color:var(--t-form-border-color);
3836
3993
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -3984,19 +4141,18 @@ a[class="tds-btn"]{
3984
4141
  line-height:1.35;
3985
4142
  }
3986
4143
 
3987
- .tds-date-picker{
3988
- --tds-date-picker-border-color:var(--t-form-border-color);
3989
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3990
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3991
- --tds-date-picker-background-color:var(--t-form-background-color);
3992
- --tds-date-picker-color:var(--t-form-color);
3993
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3994
- --tds-date-picker-font-size:var(--t-font-size-md);
3995
- --tds-date-picker-min-height:var(--t-container-size-md);
3996
- --tds-date-picker-padding-block:6px;
3997
- --tds-date-picker-button-offset:4px;
3998
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3999
- --tds-date-picker-description-invalid-icon-display:none;
4144
+ .tds-time-field{
4145
+ --tds-time-field-border-color:var(--t-form-border-color);
4146
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4147
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4148
+ --tds-time-field-background-color:var(--t-form-background-color);
4149
+ --tds-time-field-color:var(--t-form-color);
4150
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4151
+ --tds-time-field-font-size:var(--t-font-size-md);
4152
+ --tds-time-field-min-height:var(--t-container-size-md);
4153
+ --tds-time-field-padding-block:6px;
4154
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4155
+ --tds-time-field-description-invalid-icon-display:none;
4000
4156
 
4001
4157
  position:relative;
4002
4158
  display:flex;
@@ -4004,291 +4160,135 @@ a[class="tds-btn"]{
4004
4160
  gap:var(--t-spacing-half);
4005
4161
  }
4006
4162
 
4007
- .tds-date-picker[data-required] .tds-date-picker-label::after{
4163
+ .tds-time-field[data-required] .tds-time-field-label::after{
4008
4164
  margin-left:.25ch;
4009
4165
  color:var(--t-text-color-status-error);
4010
4166
  content:"*";
4011
4167
  }
4012
4168
 
4013
- .tds-date-picker[data-invalid]{
4014
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4015
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4016
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4017
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4018
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4019
- --tds-date-picker-description-invalid-icon-display:inline-block;
4169
+ .tds-time-field[data-invalid]{
4170
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4171
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4172
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4173
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4174
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4175
+ --tds-time-field-description-invalid-icon-display:inline-block;
4020
4176
  }
4021
4177
 
4022
- .tds-date-picker[data-disabled]{
4023
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4024
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4025
- --tds-date-picker-color:var(--t-form-color-disabled);
4026
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4178
+ .tds-time-field[data-disabled]{
4179
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4180
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4181
+ --tds-time-field-color:var(--t-form-color-disabled);
4182
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4027
4183
  }
4028
4184
 
4029
- .tds-date-picker[data-disabled] .tds-date-picker-field{
4185
+ .tds-time-field[data-disabled] .tds-time-field-label{
4186
+ color:var(--t-form-color-disabled);
4187
+ }
4188
+
4189
+ .tds-time-field[data-disabled] .tds-time-field-input{
4030
4190
  cursor:not-allowed;
4031
4191
  }
4032
4192
 
4033
- .tds-date-picker--lg{
4034
- --tds-date-picker-min-height:var(--t-container-size-lg);
4035
- --tds-date-picker-font-size:var(--t-font-size-lg);
4036
- --tds-date-picker-button-offset:5px;
4193
+ .tds-time-field--lg{
4194
+ --tds-time-field-min-height:var(--t-container-size-lg);
4195
+ --tds-time-field-font-size:var(--t-font-size-lg);
4037
4196
  }
4038
4197
 
4039
- .tds-date-picker-label{
4198
+ .tds-time-field-label{
4040
4199
  font-size:var(--t-font-size-md);
4041
4200
  font-weight:var(--t-font-weight-normal);
4042
4201
  color:var(--t-text-color);
4043
4202
  cursor:default;
4044
4203
  }
4045
4204
 
4046
- .tds-date-picker-field{
4205
+ .tds-time-field-input{
4047
4206
  display:flex;
4048
4207
  align-items:center;
4049
4208
  inline-size:100%;
4050
- min-block-size:var(--tds-date-picker-min-height);
4209
+ min-block-size:var(--tds-time-field-min-height);
4210
+ padding-block:var(--tds-time-field-padding-block);
4211
+ padding-inline:var(--t-spacing-1);
4051
4212
  font-family:inherit;
4052
- font-size:var(--tds-date-picker-font-size);
4213
+ font-size:var(--tds-time-field-font-size);
4214
+ font-variant-numeric:tabular-nums;
4053
4215
  line-height:1;
4054
- color:var(--tds-date-picker-color);
4055
- -webkit-appearance:none;
4056
- -moz-appearance:none;
4057
- appearance:none;
4216
+ color:var(--tds-time-field-color);
4058
4217
  cursor:text;
4059
4218
  outline:var(--t-focus-ring-width) solid transparent;
4060
4219
  outline-offset:0;
4061
- background-color:var(--tds-date-picker-background-color);
4062
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4220
+ background-color:var(--tds-time-field-background-color);
4221
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4063
4222
  border-radius:var(--t-form-border-radius);
4064
4223
  }
4065
4224
 
4066
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4067
- border-color:var(--tds-date-picker-border-color-hover);
4225
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4226
+ border-color:var(--tds-time-field-border-color-hover);
4068
4227
  }
4069
4228
 
4070
- .tds-date-picker-field[data-focus-within]{
4229
+ .tds-time-field-input[data-focus-within]{
4071
4230
  outline-color:var(--t-focus-ring-color);
4072
4231
  outline-offset:var(--t-focus-ring-offset);
4073
- border-color:var(--tds-date-picker-border-color-active);
4232
+ border-color:var(--tds-time-field-border-color-active);
4074
4233
  }
4075
4234
 
4076
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4235
+ .tds-time-field-input[data-readonly]{
4077
4236
  color:var(--t-form-color-readonly);
4078
4237
  background-color:var(--t-form-background-color-readonly);
4079
4238
  border-color:var(--t-form-border-color-readonly);
4080
4239
  }
4081
4240
 
4082
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4241
+ .tds-time-field-input[data-readonly][data-hovered]{
4083
4242
  border-color:var(--t-form-border-color-readonly);
4084
4243
  }
4085
4244
 
4086
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4245
+ .tds-time-field-input[data-readonly][data-focus-within]{
4087
4246
  outline-color:var(--t-focus-ring-color);
4088
4247
  outline-offset:var(--t-focus-ring-offset);
4089
4248
  border-color:var(--t-form-border-color-hover);
4090
4249
  }
4091
4250
 
4092
- .tds-date-picker-input{
4093
- flex:1;
4094
- padding-block:var(--tds-date-picker-padding-block);
4095
- padding-inline-start:var(--t-spacing-1);
4251
+ .tds-time-field-segment{
4252
+ padding-inline:1px;
4096
4253
  font-variant-numeric:tabular-nums;
4097
- }
4098
-
4099
- .tds-date-picker-segment{
4100
- padding-inline:2px;
4254
+ cursor:text;
4101
4255
  caret-color:transparent;
4102
4256
  border-radius:var(--t-border-radius-sm);
4103
4257
  }
4104
4258
 
4105
- .tds-date-picker-segment[data-placeholder]{
4106
- color:var(--tds-date-picker-placeholder-color);
4259
+ .tds-time-field-segment[data-placeholder]{
4260
+ color:var(--tds-time-field-placeholder-color);
4107
4261
  }
4108
4262
 
4109
- .tds-date-picker-segment[data-focused]{
4263
+ .tds-time-field-segment[data-focused]{
4110
4264
  color:var(--t-text-color-inverted);
4111
4265
  outline:0;
4112
4266
  background:var(--t-fill-color-interaction);
4113
4267
  }
4114
4268
 
4115
- .tds-date-picker-segment-separator{
4269
+ .tds-time-field-segment-separator{
4116
4270
  padding-inline:0;
4117
- color:var(--tds-date-picker-placeholder-color);
4271
+ color:var(--tds-time-field-placeholder-color);
4118
4272
  }
4119
4273
 
4120
- .tds-date-picker-description{
4274
+ .tds-time-field-description{
4121
4275
  display:flex;
4122
4276
  gap:var(--t-spacing-half);
4123
4277
  align-items:flex-start;
4124
4278
  margin:0;
4125
4279
  font-size:var(--t-font-size-sm);
4126
4280
  line-height:1.35;
4127
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4281
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4128
4282
  cursor:text;
4129
4283
  }
4130
4284
 
4131
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4132
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4285
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4286
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4133
4287
  flex-shrink:0;
4134
4288
  margin-block-start:calc(.5lh - .5em);
4135
4289
  line-height:1.35;
4136
4290
  }
4137
4291
 
4138
- .tds-date-picker-button{
4139
- flex-shrink:0;
4140
- align-self:center;
4141
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4142
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4143
- padding:0;
4144
- margin-inline-end:var(--tds-date-picker-button-offset);
4145
- }
4146
-
4147
- .tds-date-picker-popover{
4148
- padding:var(--t-spacing-2);
4149
- background:var(--t-surface-color-card);
4150
- border:1px solid var(--t-border-color);
4151
- border-radius:var(--t-border-radius);
4152
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4153
- }
4154
-
4155
- .tds-date-picker-popover[data-entering]{
4156
- animation:tds-date-picker-popover-enter 160ms ease;
4157
- }
4158
-
4159
- .tds-date-picker-popover[data-exiting]{
4160
- animation:tds-date-picker-popover-exit 130ms ease;
4161
- }
4162
-
4163
- @keyframes tds-date-picker-popover-enter{
4164
- from{
4165
- opacity:0;
4166
- transform:translateY(-8px);
4167
- }
4168
- }
4169
-
4170
- @keyframes tds-date-picker-popover-exit{
4171
- to{
4172
- opacity:0;
4173
- transform:translateY(-8px);
4174
- }
4175
- }
4176
-
4177
- @media (prefers-reduced-motion: reduce){
4178
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4179
- animation:none;
4180
- }
4181
- }
4182
-
4183
- .tds-date-picker-calendar{
4184
- inline-size:-moz-fit-content;
4185
- inline-size:fit-content;
4186
- }
4187
-
4188
- .tds-date-picker-calendar-header{
4189
- display:flex;
4190
- align-items:center;
4191
- justify-content:space-between;
4192
- padding-block-end:var(--t-spacing-1);
4193
- }
4194
-
4195
- .tds-date-picker-calendar-title{
4196
- flex:1;
4197
- margin:0;
4198
- font-size:var(--t-font-size-md);
4199
- font-weight:var(--t-font-weight-semibold);
4200
- text-align:center;
4201
- }
4202
-
4203
- .tds-date-picker-calendar-nav{
4204
- display:flex;
4205
- align-items:center;
4206
- justify-content:center;
4207
- padding:var(--t-spacing-half);
4208
- color:var(--t-text-color);
4209
- cursor:default;
4210
- outline:0;
4211
- background:transparent;
4212
- border:0;
4213
- border-radius:var(--t-border-radius-sm);
4214
- }
4215
-
4216
- .tds-date-picker-calendar-nav[data-hovered]{
4217
- background:var(--t-fill-color-neutral-070);
4218
- }
4219
-
4220
- .tds-date-picker-calendar-nav[data-pressed]{
4221
- background:var(--t-fill-color-button-interaction-ghost-active);
4222
- }
4223
-
4224
- .tds-date-picker-calendar-nav[data-focus-visible]{
4225
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4226
- outline-offset:var(--t-focus-ring-offset);
4227
- }
4228
-
4229
- .tds-date-picker-calendar-nav[data-disabled]{
4230
- color:var(--t-form-color-disabled);
4231
- cursor:not-allowed;
4232
- }
4233
-
4234
- .tds-date-picker-calendar-grid{
4235
- border-collapse:collapse;
4236
- }
4237
-
4238
- .tds-date-picker-calendar-header-cell{
4239
- padding-block:var(--t-spacing-half);
4240
- font-size:var(--t-font-size-sm);
4241
- font-weight:var(--t-font-weight-normal);
4242
- color:var(--t-text-color-secondary);
4243
- text-align:center;
4244
- }
4245
-
4246
- .tds-date-picker-calendar-cell{
4247
- display:flex;
4248
- align-items:center;
4249
- justify-content:center;
4250
- inline-size:2.25rem;
4251
- block-size:2.25rem;
4252
- font-size:var(--t-font-size-md);
4253
- color:var(--t-text-color);
4254
- cursor:default;
4255
- outline:0;
4256
- border-radius:var(--t-border-radius-sm);
4257
- }
4258
-
4259
- .tds-date-picker-calendar-cell[data-hovered]{
4260
- background:var(--t-fill-color-neutral-070);
4261
- }
4262
-
4263
- .tds-date-picker-calendar-cell[data-pressed]{
4264
- background:var(--t-fill-color-button-interaction-ghost-active);
4265
- }
4266
-
4267
- .tds-date-picker-calendar-cell[data-selected]{
4268
- color:var(--t-text-color-inverted);
4269
- background:var(--t-fill-color-interaction);
4270
- }
4271
-
4272
- .tds-date-picker-calendar-cell[data-focus-visible]{
4273
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4274
- outline-offset:var(--t-focus-ring-offset);
4275
- }
4276
-
4277
- .tds-date-picker-calendar-cell[data-unavailable]{
4278
- color:var(--t-text-color-secondary);
4279
- text-decoration:line-through;
4280
- cursor:not-allowed;
4281
- }
4282
-
4283
- .tds-date-picker-calendar-cell[data-disabled]{
4284
- color:var(--t-form-color-disabled);
4285
- cursor:not-allowed;
4286
- }
4287
-
4288
- .tds-date-picker-calendar-cell[data-outside-month]{
4289
- color:var(--t-text-color-secondary);
4290
- }
4291
-
4292
4292
  .t-banner{
4293
4293
  --t-banner-font-size:var(--t-font-size-md);
4294
4294
  --t-banner-font-color:var(--t-text-color);