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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1013 -1013
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1013 -1013
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,386 +1,263 @@
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;
271
- }
272
-
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);
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
280
202
  }
281
203
 
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;
300
- }
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
301
207
 
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;
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;
310
215
  }
311
216
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
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%;
314
223
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
318
- }
319
-
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
323
- }
324
224
 
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
- }
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;
331
230
  }
332
- @supports not selector(:popover-open){
333
- .tds-sidenav-collapse.\:popover-open{
334
- display:flex;
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
335
233
  }
336
234
 
337
- .tds-sidenav-collapse:not(.\:popover-open){
338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
339
- 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;
340
237
  }
341
- }
342
238
  }
343
239
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
347
- }
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
348
244
  }
349
245
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
353
-
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
357
-
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
362
-
363
-
364
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
365
- -webkit-appearance:none;
366
- appearance:none;
367
- }
368
-
369
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
370
- inline-size:1em;
371
- block-size:2em;
372
- }
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
250
+ }
373
251
 
374
- @supports (field-sizing: content){
375
- .tds-input--auto-width{
376
- inline-size:-moz-fit-content;
377
- inline-size:fit-content;
378
- min-inline-size:min(100%, 122px);
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
379
256
  }
380
257
 
381
- .tds-input--auto-width input{
382
- field-sizing:content;
383
- inline-size:auto;
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
384
261
  }
385
262
  }
386
263
 
@@ -578,354 +455,136 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
578
455
  --tds-checkbox-description-line-height:1.3;
579
456
  }
580
457
 
581
- @layer t-critical{
582
- tds-page-header:not(.hydrated){
583
- display:none;
584
- }
585
- }
586
-
587
- @layer t-component{
588
- .tds-page-header{
589
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
590
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
591
- --tds-page-header-color:var(--t-text-color);
592
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
593
- --tds-page-header-headline-color:var(--t-text-color-headline);
594
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
595
- --tds-page-header-padding-x:var(--t-spacing-2);
596
- --tds-page-header-padding-y:var(--t-spacing-2);
597
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
598
- --tds-page-header-nav-gap:var(--t-spacing-1);
599
- --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%);
600
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
601
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
602
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
603
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
604
- --tds-page-header-nav-item-border-width:1px;
458
+ .tds-radio{
459
+ --tds-radio-font-size:var(--t-font-size-md);
460
+ --tds-radio-cursor:pointer;
461
+ --tds-radio-line-height:1.4;
462
+ --tds-radio-transition-property:border-width;
605
463
 
606
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
607
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
464
+ --tds-radio-input-size:var(--t-element-size-md);
465
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
466
+ --tds-radio-input-border-color:var(--t-form-border-color);
467
+ --tds-radio-input-border-width:var(--t-form-border-width);
468
+ --tds-radio-input-background-color:transparent;
608
469
 
609
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
610
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
611
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
470
+ --tds-radio-label-color:var(--t-form-color);
612
471
 
613
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
614
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
472
+ --tds-radio-description-font-size:var(--t-font-size-sm);
473
+ --tds-radio-description-line-height:1.35;
474
+ --tds-radio-description-color:var(--t-text-color-secondary);
615
475
 
616
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
617
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
618
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
476
+ position:relative;
477
+ display:inline-grid;
478
+ grid-template-columns:auto;
479
+ grid-auto-columns:1fr;
480
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
481
+ line-height:var(--tds-radio-line-height);
482
+ cursor:var(--tds-radio-cursor);
483
+ -webkit-user-select:none;
484
+ -moz-user-select:none;
485
+ user-select:none;
486
+ }
619
487
 
620
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
621
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
622
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
623
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
624
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
488
+ .tds-radio label{
489
+ grid-area:1 / 2;
490
+ font-size:var(--tds-radio-font-size);
491
+ font-weight:var(--t-font-weight-normal);
492
+ color:var(--tds-radio-label-color);
493
+ cursor:var(--tds-radio-cursor);
625
494
  }
626
495
 
627
- .tds-page-header--profile{
628
- --tds-page-header-padding-y:20px;
496
+ .tds-radio input[type="radio"]{
497
+ position:relative;
498
+ width:1em;
499
+ height:1em;
500
+ margin:calc((1lh - 1em) / 2) 0 0;
501
+ font-size:var(--tds-radio-font-size);
502
+ line-height:inherit;
503
+ -webkit-appearance:none;
504
+ -moz-appearance:none;
505
+ appearance:none;
506
+ cursor:var(--tds-radio-cursor);
507
+ background-color:var(--tds-radio-input-background-color);
508
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
509
+ border-radius:var(--tds-radio-input-border-radius);
510
+ transition-timing-function:var(--t-ease-in-out);
511
+ transition-duration:var(--t-duration-200);
512
+ transition-property:var(--tds-radio-transition-property);
629
513
  }
630
514
 
631
- @supports (color: light-dark(#fff, #000)){
632
- .tds-page-header{
633
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
634
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
515
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
516
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
517
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
635
518
  }
636
- }
637
519
 
638
- @media (min-width: 600px){
639
- .tds-page-header{
640
- --tds-page-header-background-color:var(--t-surface-color-canvas);
641
- --tds-page-header-color:var(--t-text-color-secondary);
642
- --tds-page-header-bottom-border-color:var(--t-border-color);
643
- --tds-page-header-padding-x:var(--t-spacing-3);
644
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
645
- --tds-page-header-nav-gap:var(--t-spacing-half);
646
- --tds-page-header-nav-background:transparent;
647
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
648
- --tds-page-header-nav-item-border-width:1px;
649
- --tds-page-header-nav-item-color:var(--t-text-color);
650
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
651
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
652
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
653
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
654
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
520
+ :is(.tds-radio input[type="radio"]):focus-visible{
521
+ outline:var(--t-focus-ring-outline);
522
+ outline-offset:var(--t-focus-ring-offset);
655
523
  }
656
- }
657
- }
658
524
 
659
- .tds-page-header{
660
- display:flex;
661
- flex-direction:column;
662
- padding-top:var(--tds-page-header-padding-y);
663
- color:var(--tds-page-header-color);
664
- background:var(--tds-page-header-background-color);
665
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
666
- }
667
-
668
- .tds-page-header:not(.has-nav){
669
- padding-bottom:var(--tds-page-header-padding-y);
670
- }
525
+ :is(.tds-radio input[type="radio"]):disabled{
526
+ pointer-events:none;
527
+ }
671
528
 
672
- .tds-page-header.inactive{
673
- background:var(--tds-page-header-background-color-inactive);
674
- }
529
+ @media (prefers-reduced-motion: reduce){
675
530
 
676
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
677
- width:100%;
531
+ .tds-radio input[type="radio"]{
532
+ --tds-radio-transition-property:none;
678
533
  }
534
+ }
679
535
 
680
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
681
- display:flex;
682
- flex-flow:row wrap;
683
- gap:var(--t-spacing-half) var(--t-spacing-1);
684
- align-items:flex-start;
685
- justify-content:flex-start;
686
- min-width:0;
536
+ .tds-radio:has(input:checked){
537
+ --tds-radio-input-background-color:var(--t-form-background-color);
538
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
539
+ --tds-radio-input-border-width:4px;
687
540
  }
688
541
 
689
- :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{
690
- display:flex;
691
- gap:var(--tds-page-header-nav-gap);
692
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
693
- margin:0 0 -1px;
694
- overflow:auto;
695
- list-style:none;
696
- background:var(--tds-page-header-nav-background);
697
- }
698
-
699
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
700
- position:relative;
701
- display:inline-flex;
702
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
703
- font-size:var(--t-font-size-sm);
704
- line-height:22px;
705
- color:var(--tds-page-header-nav-item-color);
706
- white-space:nowrap;
707
- text-decoration:none;
708
- -webkit-appearance:none;
709
- -moz-appearance:none;
710
- appearance:none;
711
- cursor:pointer;
712
- outline-offset:-2px;
713
- background-color:var(--tds-page-header-nav-item-background-color);
714
- background-clip:padding-box;
715
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
716
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
717
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
542
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
543
+ --tds-radio-input-background-color:var(--t-form-background-color);
544
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
718
545
  }
719
546
 
720
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
721
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
722
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
723
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
724
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
725
- }
726
-
727
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
728
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
729
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
730
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
731
- }
732
-
733
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
734
- background-color:var(--tds-page-header-nav-item-background-color-active);
735
- border-color:var(--tds-page-header-nav-item-border-color-active);
736
- }
737
-
738
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
739
- color:var(--tds-page-header-nav-item-color-disabled);
740
- cursor:not-allowed;
741
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
742
- opacity:1;
743
- }
547
+ .tds-radio:has(input:user-invalid){
548
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
549
+ }
744
550
 
745
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
746
- position:relative;
551
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
552
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
553
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
747
554
  }
748
555
 
749
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
750
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
751
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
752
- }
556
+ .tds-radio:has(input:disabled){
557
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
558
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
753
559
 
754
- :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{
755
- position:absolute;
756
- top:-5px;
757
- right:-2px;
758
- width:10px;
759
- height:10px;
760
- content:"";
761
- background:var(--tds-page-header-nav-item-indicator-color);
762
- border-radius:50%;
763
- }
560
+ --tds-radio-label-color:var(--t-form-color-disabled);
561
+ --tds-radio-description-color:var(--t-form-color-disabled);
562
+ --tds-radio-cursor:not-allowed;
563
+ }
764
564
 
765
- @media (prefers-reduced-motion: no-preference){
766
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
767
- animation:indicator-pulse 1.25s ease infinite;
768
- }
769
- }
565
+ .tds-radio:has(input:disabled) input:checked{
566
+ --tds-radio-input-background-color:var(--t-form-background-color);
567
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
568
+ }
770
569
 
771
- .tds-page-header__title-bar{
570
+ .tds-radio-description{
772
571
  display:flex;
773
- flex-direction:column;
774
- gap:var(--t-spacing-2) var(--t-spacing-1);
572
+ grid-area:2 / 2;
573
+ gap:var(--t-spacing-half);
775
574
  align-items:flex-start;
776
- justify-content:space-between;
777
- padding:0 var(--tds-page-header-padding-x);
575
+ margin:0;
576
+ font-size:var(--tds-radio-description-font-size);
577
+ line-height:var(--tds-radio-description-line-height);
578
+ color:var(--tds-radio-description-color);
579
+ cursor:text;
778
580
  }
779
581
 
780
- .tds-page-header--profile > .tds-page-header__title-bar{
781
- align-items:center;
782
- }
783
-
784
- .tds-page-header__primary{
785
- width:100%;
786
- }
787
-
788
- .tds-page-header__primary h1{
789
- margin:0;
790
- font-size:var(--tds-page-header-headline-font-size);
791
- font-weight:var(--t-font-weight-normal);
792
- line-height:32px;
793
- color:var(--tds-page-header-headline-color);
794
- overflow-wrap:break-word;
795
- }
796
-
797
- @media (min-width: 960px){
798
- .tds-page-header__primary{
799
- flex:1 1 max-content;
800
- width:auto;
801
- min-width:0;
802
- max-width:100%;
803
- }
804
-
805
- .tds-page-header__title-bar,
806
- .tds-page-header--profile .tds-page-header__title-bar{
807
- flex-flow:row nowrap;
808
- row-gap:12px;
809
- align-items:flex-start;
810
- }
811
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
812
- width:auto;
813
- }
814
-
815
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
816
- justify-content:flex-end;
817
- }
818
- }
819
-
820
- .tds-page-header-phone,
821
- .tds-page-header-email{
822
- color:var(--tds-page-header-color);
823
- white-space:nowrap;
824
- }
825
-
826
- .tds-page-header-email{
827
- max-width:100%;
828
- overflow:hidden;
829
- text-overflow:ellipsis;
830
- }
831
-
832
- @keyframes indicator-pulse{
833
- 0%{
834
- opacity:.3;
835
- transform:scale(.9);
836
- }
837
-
838
- 100%{
839
- opacity:0;
840
- transform:scale(1.75);
841
- }
842
- }
843
-
844
- .tds-radio-group{
845
- --tds-radio-group-font-size:var(--t-font-size-md);
846
- --tds-radio-group-line-height:1.4;
847
- --tds-radio-group-gap:var(--t-spacing-1);
848
-
849
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
850
-
851
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
852
- --tds-radio-group-description-line-height:1.35;
853
- --tds-radio-group-description-color:var(--t-text-color-secondary);
854
- --tds-radio-group-description-invalid-icon-display:none;
855
- display:flex;
856
- flex-direction:column;
857
- gap:var(--tds-radio-group-gap);
858
- padding:0;
859
- margin:0;
860
-
861
- font-size:var(--tds-radio-group-font-size);
862
- line-height:var(--tds-radio-group-line-height);
863
- border:0;
864
- }
865
-
866
- .tds-radio-group legend{
867
- padding:0;
868
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
869
- }
870
-
871
- .tds-radio-group:has(.tds-radio-group-description){
872
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
873
- }
874
-
875
- .tds-radio-group[aria-invalid="true"]{
876
- --tds-radio-group-description-color:var(--t-text-color-status-error);
877
- --tds-radio-group-description-invalid-icon-display:inline-block;
878
- }
879
-
880
- .tds-radio-group[aria-invalid="true"] .tds-radio{
881
- --tds-radio-input-border-color:var(--t-form-border-color-error);
882
- }
883
-
884
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
885
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
886
- --tds-radio-input-background-color:var(--t-form-background-color-error);
887
- }
888
-
889
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
890
- --tds-radio-input-background-color:var(--t-form-background-color);
891
- }
892
-
893
- .tds-radio-group:has(input:required) legend::after{
894
- margin-left:.25ch;
895
- color:var(--t-text-color-status-error);
896
- content:"*";
897
- }
898
-
899
- .tds-radio-group-fields{
900
- display:flex;
901
- flex-direction:column;
902
- gap:var(--tds-radio-group-gap);
903
- align-items:flex-start;
904
- }
905
-
906
- .tds-radio-group-description{
907
- display:flex;
908
- gap:var(--t-spacing-half);
909
- align-items:flex-start;
910
- margin:0;
911
- font-size:var(--tds-radio-group-description-font-size);
912
- line-height:var(--tds-radio-group-description-line-height);
913
- color:var(--tds-radio-group-description-color);
914
- cursor:text;
915
- }
916
-
917
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
918
- display:var(--tds-radio-group-description-invalid-icon-display);
919
- flex-shrink:0;
920
- margin-top:calc(.5lh - .5em);
921
- line-height:var(--tds-radio-group-description-line-height);
922
- }
923
-
924
- .tds-radio-group--sm{
925
- --tds-radio-group-line-height:1.35;
926
- --tds-radio-group-font-size:var(--t-font-size-sm);
927
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
928
- --tds-radio-group-description-line-height:1.3;
582
+ .tds-radio--sm{
583
+ --tds-radio-line-height:1.35;
584
+ --tds-radio-input-size:var(--t-element-size-sm);
585
+ --tds-radio-font-size:var(--t-font-size-sm);
586
+ --tds-radio-description-font-size:var(--t-font-size-xs);
587
+ --tds-radio-description-line-height:1.3;
929
588
  }
930
589
 
931
590
  .tds-toggle-switch{
@@ -1069,137 +728,367 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1069
728
  --tds-toggle-switch-display:inline-flex;
1070
729
  }
1071
730
 
1072
- .tds-radio{
1073
- --tds-radio-font-size:var(--t-font-size-md);
1074
- --tds-radio-cursor:pointer;
1075
- --tds-radio-line-height:1.4;
1076
- --tds-radio-transition-property:border-width;
1077
731
 
1078
- --tds-radio-input-size:var(--t-element-size-md);
1079
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1080
- --tds-radio-input-border-color:var(--t-form-border-color);
1081
- --tds-radio-input-border-width:var(--t-form-border-width);
1082
- --tds-radio-input-background-color:transparent;
732
+ @media (prefers-reduced-motion: no-preference){
1083
733
 
1084
- --tds-radio-label-color:var(--t-form-color);
734
+ :root{
735
+ interpolate-size:allow-keywords;
736
+ }
737
+ }
1085
738
 
1086
- --tds-radio-description-font-size:var(--t-font-size-sm);
1087
- --tds-radio-description-line-height:1.35;
1088
- --tds-radio-description-color:var(--t-text-color-secondary);
739
+ @layer tds-component{
740
+ tds-sidenav,
741
+ .tds-sidenav{
742
+ --tds-sidenav-indent:12px;
743
+ --tds-sidenav-item-depth:0;
1089
744
 
1090
- position:relative;
1091
- display:inline-grid;
1092
- grid-template-columns:auto;
1093
- grid-auto-columns:1fr;
1094
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1095
- line-height:var(--tds-radio-line-height);
1096
- cursor:var(--tds-radio-cursor);
1097
- -webkit-user-select:none;
1098
- -moz-user-select:none;
1099
- user-select:none;
745
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
746
+
747
+ --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;
748
+ --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;
749
+ --tds-sidenav-collapse-closed-opacity:0;
750
+ --tds-sidenav-collapse-open-opacity:1;
751
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
752
+ --tds-sidenav-collapse-open-transform:translateY(0);
753
+
754
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
755
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
756
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
757
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
758
+
759
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
760
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
761
+ --tds-sidenav-item-nested-background-selected:transparent;
762
+
763
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
764
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
765
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
766
+
767
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
768
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
769
+ }
770
+
771
+ @media (prefers-reduced-motion: reduce){
772
+ tds-sidenav,
773
+ .tds-sidenav{
774
+ --tds-sidenav-collapse-transition-enter:none;
775
+ --tds-sidenav-collapse-transition-exit:none;
776
+ --tds-sidenav-collapse-closed-transform:none;
777
+ --tds-sidenav-collapse-open-transform:none;
778
+ }
779
+ }
780
+
781
+ .tds-sidenav--theme-gray{
782
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
783
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
784
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
785
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
786
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
787
+ }
1100
788
  }
1101
789
 
1102
- .tds-radio label{
1103
- grid-area:1 / 2;
1104
- font-size:var(--tds-radio-font-size);
1105
- font-weight:var(--t-font-weight-normal);
1106
- color:var(--tds-radio-label-color);
1107
- cursor:var(--tds-radio-cursor);
790
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
791
+ display:flex;
1108
792
  }
1109
793
 
1110
- .tds-radio input[type="radio"]{
794
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
795
+ flex-direction:column;
796
+ gap:var(--t-spacing-half);
797
+ width:100%;
798
+ }
799
+
800
+ .tds-sidenav-section-list{
801
+ width:100%;
802
+ padding:0;
803
+ margin:0;
804
+ list-style:none;
805
+ }
806
+
807
+ .tds-sidenav-section-header{
808
+ display:flex;
809
+ align-items:baseline;
810
+ justify-content:space-between;
811
+ padding-top:var(--t-spacing-2);
812
+ }
813
+
814
+ .tds-sidenav-section-header h2{
815
+ margin:0;
816
+ font-size:var(--t-font-size-sm);
817
+ font-weight:var(--t-font-weight-semibold);
818
+ line-height:1.35;
819
+ color:var(--t-text-color-secondary);
820
+ text-transform:uppercase;
821
+ }
822
+
823
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
824
+ padding-top:0;
825
+ }
826
+
827
+ .tds-sidenav-section-header [slot="label-actions"]{
828
+ display:flex;
829
+ gap:var(--t-spacing-half);
830
+ align-items:center;
831
+ }
832
+
833
+ .tds-sidenav-section [slot="section-actions"]{
834
+ display:flex;
835
+ gap:12px;
836
+ align-items:center;
837
+ min-height:42px;
838
+ padding:var(--t-spacing-1) 0;
839
+ }
840
+
841
+ .tds-sidenav-section-list,
842
+ .tds-sidenav-item{
843
+ width:100%;
844
+ padding:0;
845
+ margin:0;
846
+ }
847
+
848
+ .tds-sidenav-item :is(a,button){
1111
849
  position:relative;
1112
- width:1em;
1113
- height:1em;
1114
- margin:calc((1lh - 1em) / 2) 0 0;
1115
- font-size:var(--tds-radio-font-size);
1116
- line-height:inherit;
850
+ display:flex;
851
+ gap:12px;
852
+ align-items:center;
853
+ width:100%;
854
+ padding:12px;
855
+ overflow:hidden;
856
+ font-size:var(--t-font-size-sm);
857
+ line-height:18px;
858
+ color:var(--t-text-color-headline);
859
+ white-space:nowrap;
860
+ text-decoration:none;
1117
861
  -webkit-appearance:none;
1118
862
  -moz-appearance:none;
1119
863
  appearance:none;
1120
- cursor:var(--tds-radio-cursor);
1121
- background-color:var(--tds-radio-input-background-color);
1122
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1123
- border-radius:var(--tds-radio-input-border-radius);
1124
- transition-timing-function:var(--t-ease-in-out);
1125
- transition-duration:var(--t-duration-200);
1126
- transition-property:var(--tds-radio-transition-property);
864
+ cursor:pointer;
865
+ background-color:var(--tds-sidenav-item-background, transparent);
866
+ border:0;
867
+ border-radius:var(--t-border-radius);
868
+ transition:var(--tds-sidenav-item-transition);
869
+ }
870
+
871
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
872
+ display:block;
873
+ flex:1;
874
+ overflow:hidden;
875
+ text-overflow:ellipsis;
876
+ text-align:left;
877
+ white-space:nowrap;
878
+ }
879
+
880
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
881
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
882
+ color:var(--t-text-color-headline);
883
+ text-decoration:none;
884
+ }
885
+
886
+ :is(.tds-sidenav-item :is(a,button)):active{
887
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
888
+ }
889
+
890
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
891
+ overflow:hidden;
892
+ color:var(--tds-sidenav-item-icon-color);
893
+ }
894
+
895
+ :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{
896
+ display:block;
897
+ width:var(--tds-sidenav-item-icon-size);
898
+ height:var(--tds-sidenav-item-icon-size);
899
+ }
900
+
901
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
902
+ --tds-sidenav-indent:19px;
903
+ }
904
+
905
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
906
+ visibility:visible;
907
+ block-size:auto;
908
+ opacity:1;
909
+ }
910
+
911
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
912
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
913
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
914
+
915
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
916
+ font-weight:var(--t-font-weight-semibold);
917
+ }
918
+
919
+ .tds-sidenav-item:has(.tds-sidenav-section){
920
+ display:flex;
921
+ flex-direction:column;
922
+ gap:var(--t-spacing-half);
923
+ }
924
+
925
+ .tds-sidenav-item .tds-sidenav-section-list{
926
+ --tds-sidenav-item-depth:1;
927
+ gap:0;
928
+ }
929
+
930
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
931
+ visibility:hidden;
932
+ block-size:0;
933
+ overflow-y:clip;
934
+ opacity:0;
935
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
936
+ }
937
+
938
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
939
+ --tds-sidenav-item-depth:2;
940
+ }
941
+
942
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
943
+ min-height:var(--t-element-size-2xl);
944
+ padding-block:9px;
945
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
946
+ line-height:1;
947
+ background-color:transparent;
948
+ }
949
+
950
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
951
+ position:absolute;
952
+ top:0;
953
+ bottom:0;
954
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
955
+ width:2px;
956
+ content:"";
957
+ background-color:var(--tds-sidenav-item-nested-border-color);
958
+ transition:var(--tds-sidenav-item-transition);
959
+ }
960
+
961
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
962
+ position:absolute;
963
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
964
+ z-index:-1;
965
+ height:100%;
966
+ content:"";
967
+ background-color:var(--tds-sidenav-item-nested-background);
968
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
969
+ transition:var(--tds-sidenav-item-transition);
970
+ }
971
+
972
+ :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)){
973
+ display:block;
974
+ text-align:left;
975
+ white-space:normal;
976
+ }
977
+
978
+ :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{
979
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
980
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
981
+ }
982
+
983
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
984
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
985
+ }
986
+
987
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
988
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
989
+ font-weight:var(--t-font-weight-medium);
990
+ }
991
+
992
+ .tds-sidenav-responsive-header{
993
+ display:flex;
994
+ gap:var(--t-spacing-2);
995
+ align-items:center;
996
+ width:100%;
997
+ }
998
+
999
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1000
+ order:0;
1001
+ }
1002
+
1003
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1004
+ flex:1;
1005
+ order:1;
1006
+ margin:0;
1007
+ font-size:var(--t-font-size-lg);
1008
+ font-weight:var(--t-font-weight-medium);
1009
+ color:var(--t-text-color-headline);
1010
+ }
1011
+
1012
+ @media (max-width: 719px){
1013
+ .tds-sidenav-collapse{
1014
+ z-index:10001;
1015
+ display:none;
1016
+ max-width:min(448px, calc(100vw - 48px));
1017
+ padding:0;
1018
+ margin:12px 0;
1019
+ position-area:bottom span-right;
1020
+ overflow:hidden;
1021
+ outline:0;
1022
+ background:var(--t-surface-color-card);
1023
+ border:0;
1024
+ border-radius:6px;
1025
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1026
+ opacity:var(--tds-sidenav-collapse-open-opacity);
1027
+ transform:var(--tds-sidenav-collapse-open-transform);
1028
+ transition:var(--tds-sidenav-collapse-transition-enter);
1029
+ will-change:transform;
1030
+ }
1031
+
1032
+ .tds-sidenav-scroll-container{
1033
+ --webkit-overflow-scrolling:touch;
1034
+ display:block;
1035
+ width:100%;
1036
+ height:-moz-fit-content;
1037
+ height:fit-content;
1038
+ padding:var(--t-spacing-2);
1039
+ overflow-y:auto;
1127
1040
  }
1128
1041
 
1129
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1130
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1131
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1042
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1043
+ display:none;
1044
+ }
1045
+ @supports selector(:popover-open){
1046
+ .tds-sidenav-collapse:popover-open{
1047
+ display:flex;
1132
1048
  }
1133
1049
 
1134
- :is(.tds-radio input[type="radio"]):focus-visible{
1135
- outline:var(--t-focus-ring-outline);
1136
- outline-offset:var(--t-focus-ring-offset);
1050
+ .tds-sidenav-collapse:not(:popover-open){
1051
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1052
+ transition:var(--tds-sidenav-collapse-transition-exit);
1137
1053
  }
1138
1054
 
1139
- :is(.tds-radio input[type="radio"]):disabled{
1140
- pointer-events:none;
1055
+ @starting-style{
1056
+ .tds-sidenav-collapse:popover-open{
1057
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1058
+ transform:var(--tds-sidenav-collapse-closed-transform);
1059
+ }
1141
1060
  }
1142
-
1143
- @media (prefers-reduced-motion: reduce){
1144
-
1145
- .tds-radio input[type="radio"]{
1146
- --tds-radio-transition-property:none;
1147
1061
  }
1062
+ @supports not selector(:popover-open){
1063
+ .tds-sidenav-collapse.\:popover-open{
1064
+ display:flex;
1148
1065
  }
1149
1066
 
1150
- .tds-radio:has(input:checked){
1151
- --tds-radio-input-background-color:var(--t-form-background-color);
1152
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1153
- --tds-radio-input-border-width:4px;
1154
- }
1155
-
1156
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1157
- --tds-radio-input-background-color:var(--t-form-background-color);
1158
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1067
+ .tds-sidenav-collapse:not(.\:popover-open){
1068
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
1069
+ transition:var(--tds-sidenav-collapse-transition-exit);
1159
1070
  }
1160
-
1161
- .tds-radio:has(input:user-invalid){
1162
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1163
1071
  }
1072
+ }
1164
1073
 
1165
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1166
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1167
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1168
- }
1169
-
1170
- .tds-radio:has(input:disabled){
1171
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1172
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1173
-
1174
- --tds-radio-label-color:var(--t-form-color-disabled);
1175
- --tds-radio-description-color:var(--t-form-color-disabled);
1176
- --tds-radio-cursor:not-allowed;
1074
+ @media (min-width: 720px){
1075
+ .tds-sidenav-responsive-header{
1076
+ display:none;
1177
1077
  }
1078
+ }
1178
1079
 
1179
- .tds-radio:has(input:disabled) input:checked{
1180
- --tds-radio-input-background-color:var(--t-form-background-color);
1181
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1080
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1081
+ display:none;
1182
1082
  }
1183
1083
 
1184
- .tds-radio-description{
1185
- display:flex;
1186
- grid-area:2 / 2;
1187
- gap:var(--t-spacing-half);
1188
- align-items:flex-start;
1189
- margin:0;
1190
- font-size:var(--tds-radio-description-font-size);
1191
- line-height:var(--tds-radio-description-line-height);
1192
- color:var(--tds-radio-description-color);
1193
- cursor:text;
1194
- }
1084
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1085
+ display:block;
1086
+ }
1195
1087
 
1196
- .tds-radio--sm{
1197
- --tds-radio-line-height:1.35;
1198
- --tds-radio-input-size:var(--t-element-size-sm);
1199
- --tds-radio-font-size:var(--t-font-size-sm);
1200
- --tds-radio-description-font-size:var(--t-font-size-xs);
1201
- --tds-radio-description-line-height:1.3;
1202
- }
1088
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1089
+ display:flex;
1090
+ flex-direction:column;
1091
+ }
1203
1092
 
1204
1093
  .tds-input:has(textarea){
1205
1094
  --tds-input-padding-block:6px;
@@ -1306,6 +1195,117 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1306
1195
  }
1307
1196
  }
1308
1197
 
1198
+ .tds-radio-group{
1199
+ --tds-radio-group-font-size:var(--t-font-size-md);
1200
+ --tds-radio-group-line-height:1.4;
1201
+ --tds-radio-group-gap:var(--t-spacing-1);
1202
+
1203
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1204
+
1205
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1206
+ --tds-radio-group-description-line-height:1.35;
1207
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1208
+ --tds-radio-group-description-invalid-icon-display:none;
1209
+ display:flex;
1210
+ flex-direction:column;
1211
+ gap:var(--tds-radio-group-gap);
1212
+ padding:0;
1213
+ margin:0;
1214
+
1215
+ font-size:var(--tds-radio-group-font-size);
1216
+ line-height:var(--tds-radio-group-line-height);
1217
+ border:0;
1218
+ }
1219
+
1220
+ .tds-radio-group legend{
1221
+ padding:0;
1222
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1223
+ }
1224
+
1225
+ .tds-radio-group:has(.tds-radio-group-description){
1226
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1227
+ }
1228
+
1229
+ .tds-radio-group[aria-invalid="true"]{
1230
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1231
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1232
+ }
1233
+
1234
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1235
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1236
+ }
1237
+
1238
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1239
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1240
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1241
+ }
1242
+
1243
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1244
+ --tds-radio-input-background-color:var(--t-form-background-color);
1245
+ }
1246
+
1247
+ .tds-radio-group:has(input:required) legend::after{
1248
+ margin-left:.25ch;
1249
+ color:var(--t-text-color-status-error);
1250
+ content:"*";
1251
+ }
1252
+
1253
+ .tds-radio-group-fields{
1254
+ display:flex;
1255
+ flex-direction:column;
1256
+ gap:var(--tds-radio-group-gap);
1257
+ align-items:flex-start;
1258
+ }
1259
+
1260
+ .tds-radio-group-description{
1261
+ display:flex;
1262
+ gap:var(--t-spacing-half);
1263
+ align-items:flex-start;
1264
+ margin:0;
1265
+ font-size:var(--tds-radio-group-description-font-size);
1266
+ line-height:var(--tds-radio-group-description-line-height);
1267
+ color:var(--tds-radio-group-description-color);
1268
+ cursor:text;
1269
+ }
1270
+
1271
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1272
+ display:var(--tds-radio-group-description-invalid-icon-display);
1273
+ flex-shrink:0;
1274
+ margin-top:calc(.5lh - .5em);
1275
+ line-height:var(--tds-radio-group-description-line-height);
1276
+ }
1277
+
1278
+ .tds-radio-group--sm{
1279
+ --tds-radio-group-line-height:1.35;
1280
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1281
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1282
+ --tds-radio-group-description-line-height:1.3;
1283
+ }
1284
+
1285
+
1286
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1287
+ -webkit-appearance:none;
1288
+ appearance:none;
1289
+ }
1290
+
1291
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1292
+ inline-size:1em;
1293
+ block-size:2em;
1294
+ }
1295
+
1296
+ @supports (field-sizing: content){
1297
+ .tds-input--auto-width{
1298
+ inline-size:-moz-fit-content;
1299
+ inline-size:fit-content;
1300
+ min-inline-size:min(100%, 122px);
1301
+ }
1302
+
1303
+ .tds-input--auto-width input{
1304
+ field-sizing:content;
1305
+ inline-size:auto;
1306
+ }
1307
+ }
1308
+
1309
1309
  .tds-select{
1310
1310
  --tds-select-border-color:var(--t-form-border-color);
1311
1311
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -3681,19 +3681,18 @@ a[class="tds-btn"]{
3681
3681
  line-height:1.35;
3682
3682
  }
3683
3683
 
3684
- .tds-date-picker{
3685
- --tds-date-picker-border-color:var(--t-form-border-color);
3686
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3687
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3688
- --tds-date-picker-background-color:var(--t-form-background-color);
3689
- --tds-date-picker-color:var(--t-form-color);
3690
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3691
- --tds-date-picker-font-size:var(--t-font-size-md);
3692
- --tds-date-picker-min-height:var(--t-container-size-md);
3693
- --tds-date-picker-padding-block:6px;
3694
- --tds-date-picker-button-offset:4px;
3695
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3696
- --tds-date-picker-description-invalid-icon-display:none;
3684
+ .tds-time-field{
3685
+ --tds-time-field-border-color:var(--t-form-border-color);
3686
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3687
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3688
+ --tds-time-field-background-color:var(--t-form-background-color);
3689
+ --tds-time-field-color:var(--t-form-color);
3690
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3691
+ --tds-time-field-font-size:var(--t-font-size-md);
3692
+ --tds-time-field-min-height:var(--t-container-size-md);
3693
+ --tds-time-field-padding-block:6px;
3694
+ --tds-time-field-description-color:var(--t-text-color-secondary);
3695
+ --tds-time-field-description-invalid-icon-display:none;
3697
3696
 
3698
3697
  position:relative;
3699
3698
  display:flex;
@@ -3701,291 +3700,135 @@ a[class="tds-btn"]{
3701
3700
  gap:var(--t-spacing-half);
3702
3701
  }
3703
3702
 
3704
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3703
+ .tds-time-field[data-required] .tds-time-field-label::after{
3705
3704
  margin-left:.25ch;
3706
3705
  color:var(--t-text-color-status-error);
3707
3706
  content:"*";
3708
3707
  }
3709
3708
 
3710
- .tds-date-picker[data-invalid]{
3711
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3712
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3713
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3714
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3715
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3716
- --tds-date-picker-description-invalid-icon-display:inline-block;
3709
+ .tds-time-field[data-invalid]{
3710
+ --tds-time-field-border-color:var(--t-form-border-color-error);
3711
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3712
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3713
+ --tds-time-field-background-color:var(--t-form-background-color-error);
3714
+ --tds-time-field-description-color:var(--t-text-color-status-error);
3715
+ --tds-time-field-description-invalid-icon-display:inline-block;
3717
3716
  }
3718
3717
 
3719
- .tds-date-picker[data-disabled]{
3720
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3721
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3722
- --tds-date-picker-color:var(--t-form-color-disabled);
3723
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3718
+ .tds-time-field[data-disabled]{
3719
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
3720
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
3721
+ --tds-time-field-color:var(--t-form-color-disabled);
3722
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3724
3723
  }
3725
3724
 
3726
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3725
+ .tds-time-field[data-disabled] .tds-time-field-label{
3726
+ color:var(--t-form-color-disabled);
3727
+ }
3728
+
3729
+ .tds-time-field[data-disabled] .tds-time-field-input{
3727
3730
  cursor:not-allowed;
3728
3731
  }
3729
3732
 
3730
- .tds-date-picker--lg{
3731
- --tds-date-picker-min-height:var(--t-container-size-lg);
3732
- --tds-date-picker-font-size:var(--t-font-size-lg);
3733
- --tds-date-picker-button-offset:5px;
3733
+ .tds-time-field--lg{
3734
+ --tds-time-field-min-height:var(--t-container-size-lg);
3735
+ --tds-time-field-font-size:var(--t-font-size-lg);
3734
3736
  }
3735
3737
 
3736
- .tds-date-picker-label{
3738
+ .tds-time-field-label{
3737
3739
  font-size:var(--t-font-size-md);
3738
3740
  font-weight:var(--t-font-weight-normal);
3739
3741
  color:var(--t-text-color);
3740
3742
  cursor:default;
3741
3743
  }
3742
3744
 
3743
- .tds-date-picker-field{
3745
+ .tds-time-field-input{
3744
3746
  display:flex;
3745
3747
  align-items:center;
3746
3748
  inline-size:100%;
3747
- min-block-size:var(--tds-date-picker-min-height);
3749
+ min-block-size:var(--tds-time-field-min-height);
3750
+ padding-block:var(--tds-time-field-padding-block);
3751
+ padding-inline:var(--t-spacing-1);
3748
3752
  font-family:inherit;
3749
- font-size:var(--tds-date-picker-font-size);
3753
+ font-size:var(--tds-time-field-font-size);
3754
+ font-variant-numeric:tabular-nums;
3750
3755
  line-height:1;
3751
- color:var(--tds-date-picker-color);
3752
- -webkit-appearance:none;
3753
- -moz-appearance:none;
3754
- appearance:none;
3756
+ color:var(--tds-time-field-color);
3755
3757
  cursor:text;
3756
3758
  outline:var(--t-focus-ring-width) solid transparent;
3757
3759
  outline-offset:0;
3758
- background-color:var(--tds-date-picker-background-color);
3759
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3760
+ background-color:var(--tds-time-field-background-color);
3761
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3760
3762
  border-radius:var(--t-form-border-radius);
3761
3763
  }
3762
3764
 
3763
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3764
- border-color:var(--tds-date-picker-border-color-hover);
3765
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3766
+ border-color:var(--tds-time-field-border-color-hover);
3765
3767
  }
3766
3768
 
3767
- .tds-date-picker-field[data-focus-within]{
3769
+ .tds-time-field-input[data-focus-within]{
3768
3770
  outline-color:var(--t-focus-ring-color);
3769
3771
  outline-offset:var(--t-focus-ring-offset);
3770
- border-color:var(--tds-date-picker-border-color-active);
3772
+ border-color:var(--tds-time-field-border-color-active);
3771
3773
  }
3772
3774
 
3773
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3775
+ .tds-time-field-input[data-readonly]{
3774
3776
  color:var(--t-form-color-readonly);
3775
3777
  background-color:var(--t-form-background-color-readonly);
3776
3778
  border-color:var(--t-form-border-color-readonly);
3777
3779
  }
3778
3780
 
3779
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3781
+ .tds-time-field-input[data-readonly][data-hovered]{
3780
3782
  border-color:var(--t-form-border-color-readonly);
3781
3783
  }
3782
3784
 
3783
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3785
+ .tds-time-field-input[data-readonly][data-focus-within]{
3784
3786
  outline-color:var(--t-focus-ring-color);
3785
3787
  outline-offset:var(--t-focus-ring-offset);
3786
3788
  border-color:var(--t-form-border-color-hover);
3787
3789
  }
3788
3790
 
3789
- .tds-date-picker-input{
3790
- flex:1;
3791
- padding-block:var(--tds-date-picker-padding-block);
3792
- padding-inline-start:var(--t-spacing-1);
3791
+ .tds-time-field-segment{
3792
+ padding-inline:1px;
3793
3793
  font-variant-numeric:tabular-nums;
3794
- }
3795
-
3796
- .tds-date-picker-segment{
3797
- padding-inline:2px;
3794
+ cursor:text;
3798
3795
  caret-color:transparent;
3799
3796
  border-radius:var(--t-border-radius-sm);
3800
3797
  }
3801
3798
 
3802
- .tds-date-picker-segment[data-placeholder]{
3803
- color:var(--tds-date-picker-placeholder-color);
3799
+ .tds-time-field-segment[data-placeholder]{
3800
+ color:var(--tds-time-field-placeholder-color);
3804
3801
  }
3805
3802
 
3806
- .tds-date-picker-segment[data-focused]{
3803
+ .tds-time-field-segment[data-focused]{
3807
3804
  color:var(--t-text-color-inverted);
3808
3805
  outline:0;
3809
3806
  background:var(--t-fill-color-interaction);
3810
3807
  }
3811
3808
 
3812
- .tds-date-picker-segment-separator{
3809
+ .tds-time-field-segment-separator{
3813
3810
  padding-inline:0;
3814
- color:var(--tds-date-picker-placeholder-color);
3811
+ color:var(--tds-time-field-placeholder-color);
3815
3812
  }
3816
3813
 
3817
- .tds-date-picker-description{
3814
+ .tds-time-field-description{
3818
3815
  display:flex;
3819
3816
  gap:var(--t-spacing-half);
3820
3817
  align-items:flex-start;
3821
3818
  margin:0;
3822
3819
  font-size:var(--t-font-size-sm);
3823
3820
  line-height:1.35;
3824
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3821
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3825
3822
  cursor:text;
3826
3823
  }
3827
3824
 
3828
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3829
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3825
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
3826
+ display:var(--tds-time-field-description-invalid-icon-display, none);
3830
3827
  flex-shrink:0;
3831
3828
  margin-block-start:calc(.5lh - .5em);
3832
3829
  line-height:1.35;
3833
3830
  }
3834
3831
 
3835
- .tds-date-picker-button{
3836
- flex-shrink:0;
3837
- align-self:center;
3838
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3839
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3840
- padding:0;
3841
- margin-inline-end:var(--tds-date-picker-button-offset);
3842
- }
3843
-
3844
- .tds-date-picker-popover{
3845
- padding:var(--t-spacing-2);
3846
- background:var(--t-surface-color-card);
3847
- border:1px solid var(--t-border-color);
3848
- border-radius:var(--t-border-radius);
3849
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3850
- }
3851
-
3852
- .tds-date-picker-popover[data-entering]{
3853
- animation:tds-date-picker-popover-enter 160ms ease;
3854
- }
3855
-
3856
- .tds-date-picker-popover[data-exiting]{
3857
- animation:tds-date-picker-popover-exit 130ms ease;
3858
- }
3859
-
3860
- @keyframes tds-date-picker-popover-enter{
3861
- from{
3862
- opacity:0;
3863
- transform:translateY(-8px);
3864
- }
3865
- }
3866
-
3867
- @keyframes tds-date-picker-popover-exit{
3868
- to{
3869
- opacity:0;
3870
- transform:translateY(-8px);
3871
- }
3872
- }
3873
-
3874
- @media (prefers-reduced-motion: reduce){
3875
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3876
- animation:none;
3877
- }
3878
- }
3879
-
3880
- .tds-date-picker-calendar{
3881
- inline-size:-moz-fit-content;
3882
- inline-size:fit-content;
3883
- }
3884
-
3885
- .tds-date-picker-calendar-header{
3886
- display:flex;
3887
- align-items:center;
3888
- justify-content:space-between;
3889
- padding-block-end:var(--t-spacing-1);
3890
- }
3891
-
3892
- .tds-date-picker-calendar-title{
3893
- flex:1;
3894
- margin:0;
3895
- font-size:var(--t-font-size-md);
3896
- font-weight:var(--t-font-weight-semibold);
3897
- text-align:center;
3898
- }
3899
-
3900
- .tds-date-picker-calendar-nav{
3901
- display:flex;
3902
- align-items:center;
3903
- justify-content:center;
3904
- padding:var(--t-spacing-half);
3905
- color:var(--t-text-color);
3906
- cursor:default;
3907
- outline:0;
3908
- background:transparent;
3909
- border:0;
3910
- border-radius:var(--t-border-radius-sm);
3911
- }
3912
-
3913
- .tds-date-picker-calendar-nav[data-hovered]{
3914
- background:var(--t-fill-color-neutral-070);
3915
- }
3916
-
3917
- .tds-date-picker-calendar-nav[data-pressed]{
3918
- background:var(--t-fill-color-button-interaction-ghost-active);
3919
- }
3920
-
3921
- .tds-date-picker-calendar-nav[data-focus-visible]{
3922
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3923
- outline-offset:var(--t-focus-ring-offset);
3924
- }
3925
-
3926
- .tds-date-picker-calendar-nav[data-disabled]{
3927
- color:var(--t-form-color-disabled);
3928
- cursor:not-allowed;
3929
- }
3930
-
3931
- .tds-date-picker-calendar-grid{
3932
- border-collapse:collapse;
3933
- }
3934
-
3935
- .tds-date-picker-calendar-header-cell{
3936
- padding-block:var(--t-spacing-half);
3937
- font-size:var(--t-font-size-sm);
3938
- font-weight:var(--t-font-weight-normal);
3939
- color:var(--t-text-color-secondary);
3940
- text-align:center;
3941
- }
3942
-
3943
- .tds-date-picker-calendar-cell{
3944
- display:flex;
3945
- align-items:center;
3946
- justify-content:center;
3947
- inline-size:2.25rem;
3948
- block-size:2.25rem;
3949
- font-size:var(--t-font-size-md);
3950
- color:var(--t-text-color);
3951
- cursor:default;
3952
- outline:0;
3953
- border-radius:var(--t-border-radius-sm);
3954
- }
3955
-
3956
- .tds-date-picker-calendar-cell[data-hovered]{
3957
- background:var(--t-fill-color-neutral-070);
3958
- }
3959
-
3960
- .tds-date-picker-calendar-cell[data-pressed]{
3961
- background:var(--t-fill-color-button-interaction-ghost-active);
3962
- }
3963
-
3964
- .tds-date-picker-calendar-cell[data-selected]{
3965
- color:var(--t-text-color-inverted);
3966
- background:var(--t-fill-color-interaction);
3967
- }
3968
-
3969
- .tds-date-picker-calendar-cell[data-focus-visible]{
3970
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3971
- outline-offset:var(--t-focus-ring-offset);
3972
- }
3973
-
3974
- .tds-date-picker-calendar-cell[data-unavailable]{
3975
- color:var(--t-text-color-secondary);
3976
- text-decoration:line-through;
3977
- cursor:not-allowed;
3978
- }
3979
-
3980
- .tds-date-picker-calendar-cell[data-disabled]{
3981
- color:var(--t-form-color-disabled);
3982
- cursor:not-allowed;
3983
- }
3984
-
3985
- .tds-date-picker-calendar-cell[data-outside-month]{
3986
- color:var(--t-text-color-secondary);
3987
- }
3988
-
3989
3832
  .tds-number-stepper{
3990
3833
  --tds-number-stepper-border-color:var(--t-form-border-color);
3991
3834
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
@@ -4139,18 +3982,19 @@ a[class="tds-btn"]{
4139
3982
  line-height:1.35;
4140
3983
  }
4141
3984
 
4142
- .tds-time-field{
4143
- --tds-time-field-border-color:var(--t-form-border-color);
4144
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4145
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4146
- --tds-time-field-background-color:var(--t-form-background-color);
4147
- --tds-time-field-color:var(--t-form-color);
4148
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4149
- --tds-time-field-font-size:var(--t-font-size-md);
4150
- --tds-time-field-min-height:var(--t-container-size-md);
4151
- --tds-time-field-padding-block:6px;
4152
- --tds-time-field-description-color:var(--t-text-color-secondary);
4153
- --tds-time-field-description-invalid-icon-display:none;
3985
+ .tds-date-picker{
3986
+ --tds-date-picker-border-color:var(--t-form-border-color);
3987
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3988
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3989
+ --tds-date-picker-background-color:var(--t-form-background-color);
3990
+ --tds-date-picker-color:var(--t-form-color);
3991
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3992
+ --tds-date-picker-font-size:var(--t-font-size-md);
3993
+ --tds-date-picker-min-height:var(--t-container-size-md);
3994
+ --tds-date-picker-padding-block:6px;
3995
+ --tds-date-picker-button-offset:4px;
3996
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3997
+ --tds-date-picker-description-invalid-icon-display:none;
4154
3998
 
4155
3999
  position:relative;
4156
4000
  display:flex;
@@ -4158,135 +4002,291 @@ a[class="tds-btn"]{
4158
4002
  gap:var(--t-spacing-half);
4159
4003
  }
4160
4004
 
4161
- .tds-time-field[data-required] .tds-time-field-label::after{
4005
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
4162
4006
  margin-left:.25ch;
4163
4007
  color:var(--t-text-color-status-error);
4164
4008
  content:"*";
4165
4009
  }
4166
4010
 
4167
- .tds-time-field[data-invalid]{
4168
- --tds-time-field-border-color:var(--t-form-border-color-error);
4169
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4170
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4171
- --tds-time-field-background-color:var(--t-form-background-color-error);
4172
- --tds-time-field-description-color:var(--t-text-color-status-error);
4173
- --tds-time-field-description-invalid-icon-display:inline-block;
4011
+ .tds-date-picker[data-invalid]{
4012
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
4013
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4014
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4015
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
4016
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
4017
+ --tds-date-picker-description-invalid-icon-display:inline-block;
4174
4018
  }
4175
4019
 
4176
- .tds-time-field[data-disabled]{
4177
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
4178
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
4179
- --tds-time-field-color:var(--t-form-color-disabled);
4180
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4020
+ .tds-date-picker[data-disabled]{
4021
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4022
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4023
+ --tds-date-picker-color:var(--t-form-color-disabled);
4024
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4181
4025
  }
4182
4026
 
4183
- .tds-time-field[data-disabled] .tds-time-field-label{
4184
- color:var(--t-form-color-disabled);
4185
- }
4186
-
4187
- .tds-time-field[data-disabled] .tds-time-field-input{
4027
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
4188
4028
  cursor:not-allowed;
4189
4029
  }
4190
4030
 
4191
- .tds-time-field--lg{
4192
- --tds-time-field-min-height:var(--t-container-size-lg);
4193
- --tds-time-field-font-size:var(--t-font-size-lg);
4031
+ .tds-date-picker--lg{
4032
+ --tds-date-picker-min-height:var(--t-container-size-lg);
4033
+ --tds-date-picker-font-size:var(--t-font-size-lg);
4034
+ --tds-date-picker-button-offset:5px;
4194
4035
  }
4195
4036
 
4196
- .tds-time-field-label{
4037
+ .tds-date-picker-label{
4197
4038
  font-size:var(--t-font-size-md);
4198
4039
  font-weight:var(--t-font-weight-normal);
4199
4040
  color:var(--t-text-color);
4200
4041
  cursor:default;
4201
4042
  }
4202
4043
 
4203
- .tds-time-field-input{
4044
+ .tds-date-picker-field{
4204
4045
  display:flex;
4205
4046
  align-items:center;
4206
4047
  inline-size:100%;
4207
- min-block-size:var(--tds-time-field-min-height);
4208
- padding-block:var(--tds-time-field-padding-block);
4209
- padding-inline:var(--t-spacing-1);
4048
+ min-block-size:var(--tds-date-picker-min-height);
4210
4049
  font-family:inherit;
4211
- font-size:var(--tds-time-field-font-size);
4212
- font-variant-numeric:tabular-nums;
4050
+ font-size:var(--tds-date-picker-font-size);
4213
4051
  line-height:1;
4214
- color:var(--tds-time-field-color);
4052
+ color:var(--tds-date-picker-color);
4053
+ -webkit-appearance:none;
4054
+ -moz-appearance:none;
4055
+ appearance:none;
4215
4056
  cursor:text;
4216
4057
  outline:var(--t-focus-ring-width) solid transparent;
4217
4058
  outline-offset:0;
4218
- background-color:var(--tds-time-field-background-color);
4219
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4059
+ background-color:var(--tds-date-picker-background-color);
4060
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4220
4061
  border-radius:var(--t-form-border-radius);
4221
4062
  }
4222
4063
 
4223
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4224
- border-color:var(--tds-time-field-border-color-hover);
4064
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4065
+ border-color:var(--tds-date-picker-border-color-hover);
4225
4066
  }
4226
4067
 
4227
- .tds-time-field-input[data-focus-within]{
4068
+ .tds-date-picker-field[data-focus-within]{
4228
4069
  outline-color:var(--t-focus-ring-color);
4229
4070
  outline-offset:var(--t-focus-ring-offset);
4230
- border-color:var(--tds-time-field-border-color-active);
4071
+ border-color:var(--tds-date-picker-border-color-active);
4231
4072
  }
4232
4073
 
4233
- .tds-time-field-input[data-readonly]{
4074
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4234
4075
  color:var(--t-form-color-readonly);
4235
4076
  background-color:var(--t-form-background-color-readonly);
4236
4077
  border-color:var(--t-form-border-color-readonly);
4237
4078
  }
4238
4079
 
4239
- .tds-time-field-input[data-readonly][data-hovered]{
4080
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4240
4081
  border-color:var(--t-form-border-color-readonly);
4241
4082
  }
4242
4083
 
4243
- .tds-time-field-input[data-readonly][data-focus-within]{
4084
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4244
4085
  outline-color:var(--t-focus-ring-color);
4245
4086
  outline-offset:var(--t-focus-ring-offset);
4246
4087
  border-color:var(--t-form-border-color-hover);
4247
4088
  }
4248
4089
 
4249
- .tds-time-field-segment{
4250
- padding-inline:1px;
4090
+ .tds-date-picker-input{
4091
+ flex:1;
4092
+ padding-block:var(--tds-date-picker-padding-block);
4093
+ padding-inline-start:var(--t-spacing-1);
4251
4094
  font-variant-numeric:tabular-nums;
4252
- cursor:text;
4095
+ }
4096
+
4097
+ .tds-date-picker-segment{
4098
+ padding-inline:2px;
4253
4099
  caret-color:transparent;
4254
4100
  border-radius:var(--t-border-radius-sm);
4255
4101
  }
4256
4102
 
4257
- .tds-time-field-segment[data-placeholder]{
4258
- color:var(--tds-time-field-placeholder-color);
4103
+ .tds-date-picker-segment[data-placeholder]{
4104
+ color:var(--tds-date-picker-placeholder-color);
4259
4105
  }
4260
4106
 
4261
- .tds-time-field-segment[data-focused]{
4107
+ .tds-date-picker-segment[data-focused]{
4262
4108
  color:var(--t-text-color-inverted);
4263
4109
  outline:0;
4264
4110
  background:var(--t-fill-color-interaction);
4265
4111
  }
4266
4112
 
4267
- .tds-time-field-segment-separator{
4113
+ .tds-date-picker-segment-separator{
4268
4114
  padding-inline:0;
4269
- color:var(--tds-time-field-placeholder-color);
4115
+ color:var(--tds-date-picker-placeholder-color);
4270
4116
  }
4271
4117
 
4272
- .tds-time-field-description{
4118
+ .tds-date-picker-description{
4273
4119
  display:flex;
4274
4120
  gap:var(--t-spacing-half);
4275
4121
  align-items:flex-start;
4276
4122
  margin:0;
4277
4123
  font-size:var(--t-font-size-sm);
4278
4124
  line-height:1.35;
4279
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4125
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4280
4126
  cursor:text;
4281
4127
  }
4282
4128
 
4283
- .tds-time-field-description .tds-time-field-description-invalid-icon{
4284
- display:var(--tds-time-field-description-invalid-icon-display, none);
4129
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4130
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
4285
4131
  flex-shrink:0;
4286
4132
  margin-block-start:calc(.5lh - .5em);
4287
4133
  line-height:1.35;
4288
4134
  }
4289
4135
 
4136
+ .tds-date-picker-button{
4137
+ flex-shrink:0;
4138
+ align-self:center;
4139
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4140
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4141
+ padding:0;
4142
+ margin-inline-end:var(--tds-date-picker-button-offset);
4143
+ }
4144
+
4145
+ .tds-date-picker-popover{
4146
+ padding:var(--t-spacing-2);
4147
+ background:var(--t-surface-color-card);
4148
+ border:1px solid var(--t-border-color);
4149
+ border-radius:var(--t-border-radius);
4150
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4151
+ }
4152
+
4153
+ .tds-date-picker-popover[data-entering]{
4154
+ animation:tds-date-picker-popover-enter 160ms ease;
4155
+ }
4156
+
4157
+ .tds-date-picker-popover[data-exiting]{
4158
+ animation:tds-date-picker-popover-exit 130ms ease;
4159
+ }
4160
+
4161
+ @keyframes tds-date-picker-popover-enter{
4162
+ from{
4163
+ opacity:0;
4164
+ transform:translateY(-8px);
4165
+ }
4166
+ }
4167
+
4168
+ @keyframes tds-date-picker-popover-exit{
4169
+ to{
4170
+ opacity:0;
4171
+ transform:translateY(-8px);
4172
+ }
4173
+ }
4174
+
4175
+ @media (prefers-reduced-motion: reduce){
4176
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4177
+ animation:none;
4178
+ }
4179
+ }
4180
+
4181
+ .tds-date-picker-calendar{
4182
+ inline-size:-moz-fit-content;
4183
+ inline-size:fit-content;
4184
+ }
4185
+
4186
+ .tds-date-picker-calendar-header{
4187
+ display:flex;
4188
+ align-items:center;
4189
+ justify-content:space-between;
4190
+ padding-block-end:var(--t-spacing-1);
4191
+ }
4192
+
4193
+ .tds-date-picker-calendar-title{
4194
+ flex:1;
4195
+ margin:0;
4196
+ font-size:var(--t-font-size-md);
4197
+ font-weight:var(--t-font-weight-semibold);
4198
+ text-align:center;
4199
+ }
4200
+
4201
+ .tds-date-picker-calendar-nav{
4202
+ display:flex;
4203
+ align-items:center;
4204
+ justify-content:center;
4205
+ padding:var(--t-spacing-half);
4206
+ color:var(--t-text-color);
4207
+ cursor:default;
4208
+ outline:0;
4209
+ background:transparent;
4210
+ border:0;
4211
+ border-radius:var(--t-border-radius-sm);
4212
+ }
4213
+
4214
+ .tds-date-picker-calendar-nav[data-hovered]{
4215
+ background:var(--t-fill-color-neutral-070);
4216
+ }
4217
+
4218
+ .tds-date-picker-calendar-nav[data-pressed]{
4219
+ background:var(--t-fill-color-button-interaction-ghost-active);
4220
+ }
4221
+
4222
+ .tds-date-picker-calendar-nav[data-focus-visible]{
4223
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4224
+ outline-offset:var(--t-focus-ring-offset);
4225
+ }
4226
+
4227
+ .tds-date-picker-calendar-nav[data-disabled]{
4228
+ color:var(--t-form-color-disabled);
4229
+ cursor:not-allowed;
4230
+ }
4231
+
4232
+ .tds-date-picker-calendar-grid{
4233
+ border-collapse:collapse;
4234
+ }
4235
+
4236
+ .tds-date-picker-calendar-header-cell{
4237
+ padding-block:var(--t-spacing-half);
4238
+ font-size:var(--t-font-size-sm);
4239
+ font-weight:var(--t-font-weight-normal);
4240
+ color:var(--t-text-color-secondary);
4241
+ text-align:center;
4242
+ }
4243
+
4244
+ .tds-date-picker-calendar-cell{
4245
+ display:flex;
4246
+ align-items:center;
4247
+ justify-content:center;
4248
+ inline-size:2.25rem;
4249
+ block-size:2.25rem;
4250
+ font-size:var(--t-font-size-md);
4251
+ color:var(--t-text-color);
4252
+ cursor:default;
4253
+ outline:0;
4254
+ border-radius:var(--t-border-radius-sm);
4255
+ }
4256
+
4257
+ .tds-date-picker-calendar-cell[data-hovered]{
4258
+ background:var(--t-fill-color-neutral-070);
4259
+ }
4260
+
4261
+ .tds-date-picker-calendar-cell[data-pressed]{
4262
+ background:var(--t-fill-color-button-interaction-ghost-active);
4263
+ }
4264
+
4265
+ .tds-date-picker-calendar-cell[data-selected]{
4266
+ color:var(--t-text-color-inverted);
4267
+ background:var(--t-fill-color-interaction);
4268
+ }
4269
+
4270
+ .tds-date-picker-calendar-cell[data-focus-visible]{
4271
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4272
+ outline-offset:var(--t-focus-ring-offset);
4273
+ }
4274
+
4275
+ .tds-date-picker-calendar-cell[data-unavailable]{
4276
+ color:var(--t-text-color-secondary);
4277
+ text-decoration:line-through;
4278
+ cursor:not-allowed;
4279
+ }
4280
+
4281
+ .tds-date-picker-calendar-cell[data-disabled]{
4282
+ color:var(--t-form-color-disabled);
4283
+ cursor:not-allowed;
4284
+ }
4285
+
4286
+ .tds-date-picker-calendar-cell[data-outside-month]{
4287
+ color:var(--t-text-color-secondary);
4288
+ }
4289
+
4290
4290
  .t-banner{
4291
4291
  --t-banner-font-size:var(--t-font-size-md);
4292
4292
  --t-banner-font-color:var(--t-text-color);