@planningcenter/tapestry 3.2.2-rc.6 → 3.2.2-rc.8

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