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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  2. package/dist/components/date-picker/DatePicker.js +4 -5
  3. package/dist/components/date-picker/DatePicker.js.map +1 -1
  4. package/dist/components/page-header/index.js +1 -1
  5. package/dist/components/sidenav/index.js +1 -1
  6. package/dist/packages/tapestry-wc/dist/components/{p-Uv13ekLQ.js → p-BdFrP7VV.js} +3 -3
  7. package/dist/packages/tapestry-wc/dist/components/{p-Uv13ekLQ.js.map → p-BdFrP7VV.js.map} +1 -1
  8. package/dist/{tapestry-wc/dist/components/p-C3qD11m3.js → packages/tapestry-wc/dist/components/p-Bdu1ytgc.js} +3 -3
  9. package/dist/packages/tapestry-wc/dist/components/{p-C3qD11m3.js.map → p-Bdu1ytgc.js.map} +1 -1
  10. package/dist/packages/tapestry-wc/dist/components/{p-Bz1SUsfn.js → p-Bm8M-zM-.js} +2 -2
  11. package/dist/packages/tapestry-wc/dist/components/{p-Bz1SUsfn.js.map → p-Bm8M-zM-.js.map} +1 -1
  12. package/dist/packages/tapestry-wc/dist/components/{p-fGE3f5rp.js → p-BxfIRl2_.js} +2 -2
  13. package/dist/packages/tapestry-wc/dist/components/{p-fGE3f5rp.js.map → p-BxfIRl2_.js.map} +1 -1
  14. package/dist/packages/tapestry-wc/dist/components/{p-DMscq2Z3.js → p-CI2VB8nN.js} +3 -3
  15. package/dist/packages/tapestry-wc/dist/components/{p-DMscq2Z3.js.map → p-CI2VB8nN.js.map} +1 -1
  16. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  17. package/dist/packages/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  18. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +3 -3
  19. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  20. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  21. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  22. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  23. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  24. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  25. package/dist/packages/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  26. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  27. package/dist/packages/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  28. package/dist/reactRender.css +1200 -1177
  29. package/dist/reactRender.css.map +1 -1
  30. package/dist/reactRenderLegacy.css +1200 -1177
  31. package/dist/reactRenderLegacy.css.map +1 -1
  32. package/dist/tapestry-wc/dist/components/{p-Uv13ekLQ.js → p-BdFrP7VV.js} +3 -3
  33. package/dist/tapestry-wc/dist/components/{p-Uv13ekLQ.js.map → p-BdFrP7VV.js.map} +1 -1
  34. package/dist/{packages/tapestry-wc/dist/components/p-C3qD11m3.js → tapestry-wc/dist/components/p-Bdu1ytgc.js} +3 -3
  35. package/dist/tapestry-wc/dist/components/{p-C3qD11m3.js.map → p-Bdu1ytgc.js.map} +1 -1
  36. package/dist/tapestry-wc/dist/components/{p-Bz1SUsfn.js → p-Bm8M-zM-.js} +2 -2
  37. package/dist/tapestry-wc/dist/components/{p-Bz1SUsfn.js.map → p-Bm8M-zM-.js.map} +1 -1
  38. package/dist/tapestry-wc/dist/components/{p-fGE3f5rp.js → p-BxfIRl2_.js} +2 -2
  39. package/dist/tapestry-wc/dist/components/{p-fGE3f5rp.js.map → p-BxfIRl2_.js.map} +1 -1
  40. package/dist/tapestry-wc/dist/components/{p-DMscq2Z3.js → p-CI2VB8nN.js} +3 -3
  41. package/dist/tapestry-wc/dist/components/{p-DMscq2Z3.js.map → p-CI2VB8nN.js.map} +1 -1
  42. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  43. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  44. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  45. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  46. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  47. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  48. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  49. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  50. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  51. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  52. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  53. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  54. package/dist/unstable.css +92 -69
  55. package/dist/unstable.css.map +1 -1
  56. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,281 +1,3 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
5
- }
6
-
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:transparent;
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
25
-
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
28
-
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
32
-
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);
35
-
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);
39
-
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
- }
46
-
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
49
- }
50
-
51
- @supports (color: light-dark(#fff, #000)){
52
- .tds-page-header{
53
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
- }
56
- }
57
-
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
76
- }
77
- }
78
- }
79
-
80
- .tds-page-header{
81
- display:flex;
82
- flex-direction:column;
83
- padding-top:var(--tds-page-header-padding-y);
84
- color:var(--tds-page-header-color);
85
- background:var(--tds-page-header-background-color);
86
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
87
- }
88
-
89
- .tds-page-header:not(.has-nav){
90
- padding-bottom:var(--tds-page-header-padding-y);
91
- }
92
-
93
- .tds-page-header.inactive{
94
- background:var(--tds-page-header-background-color-inactive);
95
- }
96
-
97
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
- width:100%;
99
- }
100
-
101
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
102
- display:flex;
103
- flex-flow:row wrap;
104
- gap:var(--t-spacing-half) var(--t-spacing-1);
105
- align-items:flex-start;
106
- justify-content:flex-start;
107
- min-width:0;
108
- }
109
-
110
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
111
- display:flex;
112
- gap:var(--tds-page-header-nav-gap);
113
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
- margin:0 0 -1px;
115
- overflow:auto;
116
- list-style:none;
117
- background:var(--tds-page-header-nav-background);
118
- }
119
-
120
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
- position:relative;
122
- display:inline-flex;
123
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
- font-size:var(--t-font-size-sm);
125
- line-height:22px;
126
- color:var(--tds-page-header-nav-item-color);
127
- white-space:nowrap;
128
- text-decoration:none;
129
- -webkit-appearance:none;
130
- -moz-appearance:none;
131
- appearance:none;
132
- cursor:pointer;
133
- outline-offset:-2px;
134
- background-color:var(--tds-page-header-nav-item-background-color);
135
- background-clip:padding-box;
136
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
- }
140
-
141
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
146
- }
147
-
148
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
- }
154
-
155
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
- background-color:var(--tds-page-header-nav-item-background-color-active);
157
- border-color:var(--tds-page-header-nav-item-border-color-active);
158
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
- }
160
-
161
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
- color:var(--tds-page-header-nav-item-color-disabled);
164
- cursor:not-allowed;
165
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
- opacity:1;
167
- }
168
-
169
- @media (min-width: 600px){
170
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
- position:absolute;
172
- inset:auto -1px -1px;
173
- height:1px;
174
- pointer-events:none;
175
- content:"";
176
- background-color:var(--tds-page-header-bottom-border-color);
177
- }
178
- }
179
-
180
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
- position:relative;
182
- }
183
-
184
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
187
- }
188
-
189
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
190
- position:absolute;
191
- top:-5px;
192
- right:-2px;
193
- width:10px;
194
- height:10px;
195
- content:"";
196
- background:var(--tds-page-header-nav-item-indicator-color);
197
- border-radius:50%;
198
- }
199
-
200
- @media (prefers-reduced-motion: no-preference){
201
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
- animation:indicator-pulse 1.25s ease infinite;
203
- }
204
- }
205
-
206
- .tds-page-header__title-bar{
207
- display:flex;
208
- flex-direction:column;
209
- gap:var(--t-spacing-2) var(--t-spacing-1);
210
- align-items:flex-start;
211
- justify-content:space-between;
212
- padding:0 var(--tds-page-header-padding-x);
213
- }
214
-
215
- .tds-page-header--profile > .tds-page-header__title-bar{
216
- align-items:center;
217
- }
218
-
219
- .tds-page-header__primary{
220
- width:100%;
221
- }
222
-
223
- .tds-page-header__primary h1{
224
- margin:0;
225
- font-size:var(--tds-page-header-headline-font-size);
226
- font-weight:var(--t-font-weight-normal);
227
- line-height:32px;
228
- color:var(--tds-page-header-headline-color);
229
- overflow-wrap:break-word;
230
- }
231
-
232
- @media (min-width: 960px){
233
- .tds-page-header__primary{
234
- flex:1 1 max-content;
235
- width:auto;
236
- min-width:0;
237
- max-width:100%;
238
- }
239
-
240
- .tds-page-header__title-bar,
241
- .tds-page-header--profile .tds-page-header__title-bar{
242
- flex-flow:row nowrap;
243
- row-gap:12px;
244
- align-items:flex-start;
245
- }
246
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
- width:auto;
248
- }
249
-
250
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
- justify-content:flex-end;
252
- }
253
- }
254
-
255
- .tds-page-header-phone,
256
- .tds-page-header-email{
257
- color:var(--tds-page-header-color);
258
- white-space:nowrap;
259
- }
260
-
261
- .tds-page-header-email{
262
- max-width:100%;
263
- overflow:hidden;
264
- text-overflow:ellipsis;
265
- }
266
-
267
- @keyframes indicator-pulse{
268
- 0%{
269
- opacity:.3;
270
- transform:scale(.9);
271
- }
272
-
273
- 100%{
274
- opacity:0;
275
- transform:scale(1.75);
276
- }
277
- }
278
-
279
1
 
280
2
  @media (prefers-reduced-motion: no-preference){
281
3
 
@@ -638,223 +360,412 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
638
360
  flex-direction:column;
639
361
  }
640
362
 
641
- .tds-checkbox{
642
- --tds-checkbox-font-size:var(--t-font-size-md);
643
- --tds-checkbox-cursor:pointer;
644
- --tds-checkbox-line-height:1.4;
645
- --tds-checkbox-transition-property:background-color, border-color;
363
+ @layer t-critical{
364
+ tds-page-header:not(.hydrated){
365
+ display:none;
366
+ }
367
+ }
646
368
 
647
- --tds-checkbox-input-size:var(--t-element-size-md);
648
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
649
- --tds-checkbox-input-border-color:var(--t-form-border-color);
650
- --tds-checkbox-input-background-color:transparent;
369
+ @layer t-component{
370
+ .tds-page-header{
371
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
372
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
373
+ --tds-page-header-color:var(--t-text-color);
374
+ --tds-page-header-bottom-border-color:transparent;
375
+ --tds-page-header-headline-color:var(--t-text-color-headline);
376
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
377
+ --tds-page-header-padding-x:var(--t-spacing-2);
378
+ --tds-page-header-padding-y:var(--t-spacing-2);
379
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
380
+ --tds-page-header-nav-gap:var(--t-spacing-1);
381
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
382
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
383
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
384
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
385
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
386
+ --tds-page-header-nav-item-border-width:1px;
651
387
 
652
- --tds-checkbox-input-icon:none;
653
- --tds-checkbox-input-icon-visibility:hidden;
654
- --tds-checkbox-input-icon-opacity:0;
655
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
388
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
389
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
656
390
 
657
- --tds-checkbox-label-color:var(--t-form-color);
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);
394
+
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);
397
+
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);
401
+
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);
407
+ }
408
+
409
+ .tds-page-header--profile{
410
+ --tds-page-header-padding-y:20px;
411
+ }
412
+
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
+ }
418
+ }
419
+
420
+ @media (min-width: 600px){
421
+ .tds-page-header{
422
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
423
+ --tds-page-header-color:var(--t-text-color-secondary);
424
+ --tds-page-header-bottom-border-color:var(--t-border-color);
425
+ --tds-page-header-padding-x:var(--t-spacing-3);
426
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
427
+ --tds-page-header-nav-gap:var(--t-spacing-half);
428
+ --tds-page-header-nav-background:transparent;
429
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
430
+ --tds-page-header-nav-item-border-width:1px;
431
+ --tds-page-header-nav-item-color:var(--t-text-color);
432
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
433
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
434
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
435
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
436
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
437
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
438
+ }
439
+ }
440
+ }
441
+
442
+ .tds-page-header{
443
+ display:flex;
444
+ flex-direction:column;
445
+ padding-top:var(--tds-page-header-padding-y);
446
+ color:var(--tds-page-header-color);
447
+ background:var(--tds-page-header-background-color);
448
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
449
+ }
450
+
451
+ .tds-page-header:not(.has-nav){
452
+ padding-bottom:var(--tds-page-header-padding-y);
453
+ }
454
+
455
+ .tds-page-header.inactive{
456
+ background:var(--tds-page-header-background-color-inactive);
457
+ }
458
+
459
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
460
+ width:100%;
461
+ }
462
+
463
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
464
+ display:flex;
465
+ flex-flow:row wrap;
466
+ gap:var(--t-spacing-half) var(--t-spacing-1);
467
+ align-items:flex-start;
468
+ justify-content:flex-start;
469
+ min-width:0;
470
+ }
471
+
472
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
473
+ display:flex;
474
+ gap:var(--tds-page-header-nav-gap);
475
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
476
+ margin:0 0 -1px;
477
+ overflow:auto;
478
+ list-style:none;
479
+ background:var(--tds-page-header-nav-background);
480
+ }
481
+
482
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
483
+ position:relative;
484
+ display:inline-flex;
485
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
486
+ font-size:var(--t-font-size-sm);
487
+ line-height:22px;
488
+ color:var(--tds-page-header-nav-item-color);
489
+ white-space:nowrap;
490
+ text-decoration:none;
491
+ -webkit-appearance:none;
492
+ -moz-appearance:none;
493
+ appearance:none;
494
+ cursor:pointer;
495
+ outline-offset:-2px;
496
+ background-color:var(--tds-page-header-nav-item-background-color);
497
+ background-clip:padding-box;
498
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
499
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
500
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
501
+ }
502
+
503
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
504
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
505
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
506
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
507
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
508
+ }
509
+
510
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
511
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
512
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
513
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
514
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
515
+ }
516
+
517
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
518
+ background-color:var(--tds-page-header-nav-item-background-color-active);
519
+ border-color:var(--tds-page-header-nav-item-border-color-active);
520
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
521
+ }
522
+
523
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
524
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
525
+ color:var(--tds-page-header-nav-item-color-disabled);
526
+ cursor:not-allowed;
527
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
528
+ opacity:1;
529
+ }
530
+
531
+ @media (min-width: 600px){
532
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
533
+ position:absolute;
534
+ inset:auto -1px -1px;
535
+ height:1px;
536
+ pointer-events:none;
537
+ content:"";
538
+ background-color:var(--tds-page-header-bottom-border-color);
539
+ }
540
+ }
541
+
542
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
543
+ position:relative;
544
+ }
545
+
546
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
547
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
548
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
549
+ }
550
+
551
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
552
+ position:absolute;
553
+ top:-5px;
554
+ right:-2px;
555
+ width:10px;
556
+ height:10px;
557
+ content:"";
558
+ background:var(--tds-page-header-nav-item-indicator-color);
559
+ border-radius:50%;
560
+ }
561
+
562
+ @media (prefers-reduced-motion: no-preference){
563
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
564
+ animation:indicator-pulse 1.25s ease infinite;
565
+ }
566
+ }
567
+
568
+ .tds-page-header__title-bar{
569
+ display:flex;
570
+ flex-direction:column;
571
+ gap:var(--t-spacing-2) var(--t-spacing-1);
572
+ align-items:flex-start;
573
+ justify-content:space-between;
574
+ padding:0 var(--tds-page-header-padding-x);
575
+ }
658
576
 
659
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
660
- --tds-checkbox-description-line-height:1.35;
661
- --tds-checkbox-description-color:var(--t-text-color-secondary);
662
- --tds-checkbox-description-invalid-icon-display:none;
577
+ .tds-page-header--profile > .tds-page-header__title-bar{
578
+ align-items:center;
579
+ }
663
580
 
664
- position:relative;
665
- display:inline-grid;
666
- grid-template-columns:auto;
667
- grid-auto-columns:1fr;
668
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
669
- line-height:var(--tds-checkbox-line-height);
670
- cursor:var(--tds-checkbox-cursor);
671
- -webkit-user-select:none;
672
- -moz-user-select:none;
673
- user-select:none;
581
+ .tds-page-header__primary{
582
+ width:100%;
674
583
  }
675
584
 
676
- .tds-checkbox label{
677
- grid-area:1 / 2;
678
- font-size:var(--tds-checkbox-font-size);
585
+ .tds-page-header__primary h1{
586
+ margin:0;
587
+ font-size:var(--tds-page-header-headline-font-size);
679
588
  font-weight:var(--t-font-weight-normal);
680
- color:var(--tds-checkbox-label-color);
681
- cursor:var(--tds-checkbox-cursor);
589
+ line-height:32px;
590
+ color:var(--tds-page-header-headline-color);
591
+ overflow-wrap:break-word;
682
592
  }
683
593
 
684
- .tds-checkbox tds-indeterminate{
685
- display:flex;
594
+ @media (min-width: 960px){
595
+ .tds-page-header__primary{
596
+ flex:1 1 max-content;
597
+ width:auto;
598
+ min-width:0;
599
+ max-width:100%;
686
600
  }
687
601
 
688
- .tds-checkbox input[type="checkbox"]{
689
- position:relative;
690
- width:1em;
691
- height:1em;
692
- margin:calc((1lh - 1em) / 2) 0 0;
693
- font-size:var(--tds-checkbox-font-size);
694
- line-height:inherit;
695
- -webkit-appearance:none;
696
- -moz-appearance:none;
697
- appearance:none;
698
- cursor:var(--tds-checkbox-cursor);
699
- background-color:var(--tds-checkbox-input-background-color);
700
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
701
- border-radius:var(--tds-checkbox-input-border-radius);
702
- transition-timing-function:var(--t-ease-in-out);
703
- transition-duration:var(--t-duration-200);
704
- transition-property:var(--tds-checkbox-transition-property);
602
+ .tds-page-header__title-bar,
603
+ .tds-page-header--profile .tds-page-header__title-bar{
604
+ flex-flow:row nowrap;
605
+ row-gap:12px;
606
+ align-items:flex-start;
705
607
  }
706
-
707
- :is(.tds-checkbox input[type="checkbox"])::before{
708
- position:absolute;
709
- top:50%;
710
- left:50%;
711
- visibility:var(--tds-checkbox-input-icon-visibility);
712
- width:100%;
713
- height:100%;
714
- content:"";
715
- background-color:var(--tds-checkbox-input-icon-fill);
716
- border-radius:var(--tds-checkbox-input-border-radius);
717
- opacity:var(--tds-checkbox-input-icon-opacity);
718
- -webkit-mask-image:var(--tds-checkbox-input-icon);
719
- mask-image:var(--tds-checkbox-input-icon);
720
- -webkit-mask-repeat:no-repeat;
721
- mask-repeat:no-repeat;
722
- -webkit-mask-size:contain;
723
- mask-size:contain;
724
- transform:translate(-50%, -50%);
725
- }
726
-
727
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
728
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
729
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
608
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
609
+ width:auto;
730
610
  }
731
611
 
732
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
733
- outline:var(--t-focus-ring-outline);
734
- outline-offset:var(--t-focus-ring-offset);
612
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
613
+ justify-content:flex-end;
735
614
  }
615
+ }
736
616
 
737
- :is(.tds-checkbox input[type="checkbox"]):disabled{
738
- pointer-events:none;
739
- }
617
+ .tds-page-header-phone,
618
+ .tds-page-header-email{
619
+ color:var(--tds-page-header-color);
620
+ white-space:nowrap;
621
+ }
740
622
 
741
- @media (prefers-reduced-motion: reduce){
623
+ .tds-page-header-email{
624
+ max-width:100%;
625
+ overflow:hidden;
626
+ text-overflow:ellipsis;
627
+ }
742
628
 
743
- .tds-checkbox input[type="checkbox"]{
744
- --tds-checkbox-transition-property:none;
629
+ @keyframes indicator-pulse{
630
+ 0%{
631
+ opacity:.3;
632
+ transform:scale(.9);
745
633
  }
746
- }
747
634
 
748
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
749
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
750
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
751
- --tds-checkbox-input-icon-visibility:visible;
752
- --tds-checkbox-input-icon-opacity:1;
635
+ 100%{
636
+ opacity:0;
637
+ transform:scale(1.75);
753
638
  }
639
+ }
754
640
 
755
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
756
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
757
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
641
+
642
+ :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{
643
+ -webkit-appearance:none;
644
+ appearance:none;
758
645
  }
759
646
 
760
- .tds-checkbox:has(input:checked){
761
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
762
- }
647
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
648
+ inline-size:1em;
649
+ block-size:2em;
650
+ }
763
651
 
764
- .tds-checkbox:has(input:indeterminate){
765
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
652
+ @supports (field-sizing: content){
653
+ .tds-input--auto-width{
654
+ inline-size:-moz-fit-content;
655
+ inline-size:fit-content;
656
+ min-inline-size:min(100%, 122px);
766
657
  }
767
658
 
768
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
769
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
770
- --tds-checkbox-description-color:var(--t-text-color-status-error);
771
- --tds-checkbox-description-invalid-icon-display:inline-block;
659
+ .tds-input--auto-width input{
660
+ field-sizing:content;
661
+ inline-size:auto;
772
662
  }
663
+ }
773
664
 
774
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
775
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
776
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
777
- }
665
+ .tds-input:has(textarea){
666
+ --tds-input-padding-block:6px;
667
+ --tds-input-resizer-size:var(--t-element-size-sm);
668
+ --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");
669
+ }
778
670
 
779
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
780
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
781
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
782
- }
671
+ @supports (x: attr(x type(*))){
783
672
 
784
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
785
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
786
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
787
- }
673
+ .tds-input:has(textarea){
674
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
675
+ }
676
+ }
788
677
 
789
- .tds-checkbox:has(input:required) label::after{
790
- margin-left:.25ch;
791
- color:var(--t-text-color-status-error);
792
- content:"*";
678
+ .tds-input.tds-textarea--resize-vertical textarea{
679
+ resize:vertical;
793
680
  }
794
681
 
795
- .tds-checkbox:has(input:disabled){
796
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
797
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
682
+ .tds-input.tds-textarea--resize-none textarea{
683
+ resize:none;
684
+ }
798
685
 
799
- --tds-checkbox-label-color:var(--t-form-color-disabled);
800
- --tds-checkbox-description-color:var(--t-form-color-disabled);
801
- --tds-checkbox-cursor:not-allowed;
802
- }
686
+ .tds-input.tds-textarea--resize-auto textarea{
687
+ resize:vertical;
688
+ }
803
689
 
804
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
805
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
690
+ @supports (field-sizing: content){
691
+ .tds-input.tds-textarea--resize-auto textarea{
692
+ field-sizing:content;
693
+ resize:none;
694
+ }
806
695
  }
807
696
 
808
- .tds-checkbox-description{
809
- display:flex;
810
- grid-area:2 / 2;
811
- gap:var(--t-spacing-half);
812
- align-items:flex-start;
813
- margin:0;
814
- font-size:var(--tds-checkbox-description-font-size);
815
- line-height:var(--tds-checkbox-description-line-height);
816
- color:var(--tds-checkbox-description-color);
817
- cursor:text;
697
+ .tds-input textarea{
698
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
699
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
700
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
701
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
702
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
703
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
704
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
705
+ --tds-input-scrollbar-thumb-border-radius:999px;
706
+ --tds-input-scrollbar-thumb-border-width:3px;
707
+ --tds-input-scrollbar-track-margin-block:.125rem;
708
+ scrollbar-color:initial;
709
+ transition-timing-function:var(--t-ease-in-out);
710
+ transition-duration:var(--t-duration-200);
711
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
818
712
  }
819
713
 
820
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
821
- display:var(--tds-checkbox-description-invalid-icon-display);
822
- flex-shrink:0;
823
- margin-top:calc(.5lh - .5em);
824
- line-height:var(--tds-checkbox-description-line-height);
825
- }
714
+ @media (pointer: fine){
715
+ :is(.tds-input textarea)::-webkit-scrollbar{
716
+ width:12px;
717
+ height:12px;
718
+ cursor:default;
719
+ }
826
720
 
827
- .tds-checkbox--sm{
828
- --tds-checkbox-line-height:1.35;
829
- --tds-checkbox-input-size:var(--t-element-size-sm);
830
- --tds-checkbox-font-size:var(--t-font-size-sm);
831
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
832
- --tds-checkbox-description-line-height:1.3;
833
- }
721
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
722
+ cursor:default;
723
+ background:var(--tds-input-scrollbar-thumb-color);
724
+ background-clip:content-box;
725
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
726
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
727
+ }
728
+
729
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
730
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
731
+ }
834
732
 
733
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
734
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
735
+ }
835
736
 
836
- :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{
837
- -webkit-appearance:none;
838
- appearance:none;
737
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
738
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
839
739
  }
840
740
 
841
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
842
- inline-size:1em;
843
- block-size:2em;
741
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
742
+ background:var(--tds-input-scrollbar-surface-color);
844
743
  }
845
744
 
846
- @supports (field-sizing: content){
847
- .tds-input--auto-width{
848
- inline-size:-moz-fit-content;
849
- inline-size:fit-content;
850
- min-inline-size:min(100%, 122px);
851
- }
745
+ :is(.tds-input textarea)::-webkit-resizer{
746
+ background:var(--tds-input-resizer-icon) no-repeat;
747
+ background-position:right bottom;
748
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
749
+ }
852
750
 
853
- .tds-input--auto-width input{
854
- field-sizing:content;
855
- inline-size:auto;
751
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
752
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
753
+ cursor:default;
754
+ }
755
+
756
+ @supports (-moz-appearance: none){
757
+ :is(.tds-input textarea){
758
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
759
+ scrollbar-width:thin;
760
+ }
761
+
762
+ @media (hover){
763
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
764
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
765
+ }
766
+ }
767
+ }
856
768
  }
857
- }
858
769
 
859
770
  .tds-radio{
860
771
  --tds-radio-font-size:var(--t-font-size-md);
@@ -1216,111 +1127,200 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1216
1127
  --tds-radio-group-description-line-height:1.3;
1217
1128
  }
1218
1129
 
1219
- .tds-input:has(textarea){
1220
- --tds-input-padding-block:6px;
1221
- --tds-input-resizer-size:var(--t-element-size-sm);
1222
- --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");
1223
- }
1130
+ .tds-checkbox{
1131
+ --tds-checkbox-font-size:var(--t-font-size-md);
1132
+ --tds-checkbox-cursor:pointer;
1133
+ --tds-checkbox-line-height:1.4;
1134
+ --tds-checkbox-transition-property:background-color, border-color;
1224
1135
 
1225
- @supports (x: attr(x type(*))){
1136
+ --tds-checkbox-input-size:var(--t-element-size-md);
1137
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1138
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
1139
+ --tds-checkbox-input-background-color:transparent;
1226
1140
 
1227
- .tds-input:has(textarea){
1228
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1141
+ --tds-checkbox-input-icon:none;
1142
+ --tds-checkbox-input-icon-visibility:hidden;
1143
+ --tds-checkbox-input-icon-opacity:0;
1144
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1145
+
1146
+ --tds-checkbox-label-color:var(--t-form-color);
1147
+
1148
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
1149
+ --tds-checkbox-description-line-height:1.35;
1150
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
1151
+ --tds-checkbox-description-invalid-icon-display:none;
1152
+
1153
+ position:relative;
1154
+ display:inline-grid;
1155
+ grid-template-columns:auto;
1156
+ grid-auto-columns:1fr;
1157
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1158
+ line-height:var(--tds-checkbox-line-height);
1159
+ cursor:var(--tds-checkbox-cursor);
1160
+ -webkit-user-select:none;
1161
+ -moz-user-select:none;
1162
+ user-select:none;
1229
1163
  }
1164
+
1165
+ .tds-checkbox label{
1166
+ grid-area:1 / 2;
1167
+ font-size:var(--tds-checkbox-font-size);
1168
+ font-weight:var(--t-font-weight-normal);
1169
+ color:var(--tds-checkbox-label-color);
1170
+ cursor:var(--tds-checkbox-cursor);
1230
1171
  }
1231
1172
 
1232
- .tds-input.tds-textarea--resize-vertical textarea{
1233
- resize:vertical;
1173
+ .tds-checkbox tds-indeterminate{
1174
+ display:flex;
1175
+ }
1176
+
1177
+ .tds-checkbox input[type="checkbox"]{
1178
+ position:relative;
1179
+ width:1em;
1180
+ height:1em;
1181
+ margin:calc((1lh - 1em) / 2) 0 0;
1182
+ font-size:var(--tds-checkbox-font-size);
1183
+ line-height:inherit;
1184
+ -webkit-appearance:none;
1185
+ -moz-appearance:none;
1186
+ appearance:none;
1187
+ cursor:var(--tds-checkbox-cursor);
1188
+ background-color:var(--tds-checkbox-input-background-color);
1189
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1190
+ border-radius:var(--tds-checkbox-input-border-radius);
1191
+ transition-timing-function:var(--t-ease-in-out);
1192
+ transition-duration:var(--t-duration-200);
1193
+ transition-property:var(--tds-checkbox-transition-property);
1194
+ }
1195
+
1196
+ :is(.tds-checkbox input[type="checkbox"])::before{
1197
+ position:absolute;
1198
+ top:50%;
1199
+ left:50%;
1200
+ visibility:var(--tds-checkbox-input-icon-visibility);
1201
+ width:100%;
1202
+ height:100%;
1203
+ content:"";
1204
+ background-color:var(--tds-checkbox-input-icon-fill);
1205
+ border-radius:var(--tds-checkbox-input-border-radius);
1206
+ opacity:var(--tds-checkbox-input-icon-opacity);
1207
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
1208
+ mask-image:var(--tds-checkbox-input-icon);
1209
+ -webkit-mask-repeat:no-repeat;
1210
+ mask-repeat:no-repeat;
1211
+ -webkit-mask-size:contain;
1212
+ mask-size:contain;
1213
+ transform:translate(-50%, -50%);
1234
1214
  }
1235
1215
 
1236
- .tds-input.tds-textarea--resize-none textarea{
1237
- resize:none;
1216
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1217
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1218
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1238
1219
  }
1239
1220
 
1240
- .tds-input.tds-textarea--resize-auto textarea{
1241
- resize:vertical;
1221
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1222
+ outline:var(--t-focus-ring-outline);
1223
+ outline-offset:var(--t-focus-ring-offset);
1242
1224
  }
1243
1225
 
1244
- @supports (field-sizing: content){
1245
- .tds-input.tds-textarea--resize-auto textarea{
1246
- field-sizing:content;
1247
- resize:none;
1248
- }
1226
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
1227
+ pointer-events:none;
1249
1228
  }
1250
1229
 
1251
- .tds-input textarea{
1252
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1253
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1254
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1255
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1256
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1257
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1258
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1259
- --tds-input-scrollbar-thumb-border-radius:999px;
1260
- --tds-input-scrollbar-thumb-border-width:3px;
1261
- --tds-input-scrollbar-track-margin-block:.125rem;
1262
- scrollbar-color:initial;
1263
- transition-timing-function:var(--t-ease-in-out);
1264
- transition-duration:var(--t-duration-200);
1265
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1266
- }
1230
+ @media (prefers-reduced-motion: reduce){
1267
1231
 
1268
- @media (pointer: fine){
1269
- :is(.tds-input textarea)::-webkit-scrollbar{
1270
- width:12px;
1271
- height:12px;
1272
- cursor:default;
1232
+ .tds-checkbox input[type="checkbox"]{
1233
+ --tds-checkbox-transition-property:none;
1234
+ }
1273
1235
  }
1274
1236
 
1275
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1276
- cursor:default;
1277
- background:var(--tds-input-scrollbar-thumb-color);
1278
- background-clip:content-box;
1279
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1280
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1281
- }
1237
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1238
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
1239
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1240
+ --tds-checkbox-input-icon-visibility:visible;
1241
+ --tds-checkbox-input-icon-opacity:1;
1242
+ }
1282
1243
 
1283
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1284
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1244
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1245
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1246
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1285
1247
  }
1286
1248
 
1287
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1288
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1289
- }
1249
+ .tds-checkbox:has(input:checked){
1250
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1251
+ }
1290
1252
 
1291
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1292
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1293
- }
1253
+ .tds-checkbox:has(input:indeterminate){
1254
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1255
+ }
1294
1256
 
1295
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1296
- background:var(--tds-input-scrollbar-surface-color);
1297
- }
1257
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1258
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1259
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
1260
+ --tds-checkbox-description-invalid-icon-display:inline-block;
1261
+ }
1298
1262
 
1299
- :is(.tds-input textarea)::-webkit-resizer{
1300
- background:var(--tds-input-resizer-icon) no-repeat;
1301
- background-position:right bottom;
1302
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1263
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1264
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1265
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1303
1266
  }
1304
1267
 
1305
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1306
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1307
- cursor:default;
1268
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1269
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1270
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1308
1271
  }
1309
1272
 
1310
- @supports (-moz-appearance: none){
1311
- :is(.tds-input textarea){
1312
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1313
- scrollbar-width:thin;
1273
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1274
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1275
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1314
1276
  }
1315
1277
 
1316
- @media (hover){
1317
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1318
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1319
- }
1320
- }
1278
+ .tds-checkbox:has(input:required) label::after{
1279
+ margin-left:.25ch;
1280
+ color:var(--t-text-color-status-error);
1281
+ content:"*";
1282
+ }
1283
+
1284
+ .tds-checkbox:has(input:disabled){
1285
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1286
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1287
+
1288
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
1289
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
1290
+ --tds-checkbox-cursor:not-allowed;
1291
+ }
1292
+
1293
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1294
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1321
1295
  }
1296
+
1297
+ .tds-checkbox-description{
1298
+ display:flex;
1299
+ grid-area:2 / 2;
1300
+ gap:var(--t-spacing-half);
1301
+ align-items:flex-start;
1302
+ margin:0;
1303
+ font-size:var(--tds-checkbox-description-font-size);
1304
+ line-height:var(--tds-checkbox-description-line-height);
1305
+ color:var(--tds-checkbox-description-color);
1306
+ cursor:text;
1307
+ }
1308
+
1309
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1310
+ display:var(--tds-checkbox-description-invalid-icon-display);
1311
+ flex-shrink:0;
1312
+ margin-top:calc(.5lh - .5em);
1313
+ line-height:var(--tds-checkbox-description-line-height);
1322
1314
  }
1323
1315
 
1316
+ .tds-checkbox--sm{
1317
+ --tds-checkbox-line-height:1.35;
1318
+ --tds-checkbox-input-size:var(--t-element-size-sm);
1319
+ --tds-checkbox-font-size:var(--t-font-size-sm);
1320
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
1321
+ --tds-checkbox-description-line-height:1.3;
1322
+ }
1323
+
1324
1324
  .tds-select{
1325
1325
  --tds-select-border-color:var(--t-form-border-color);
1326
1326
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -3417,167 +3417,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3417
3417
  --tds-checkbox-group-description-line-height:1.3;
3418
3418
  }
3419
3419
 
3420
- .tds-time-field{
3421
- --tds-time-field-border-color:var(--t-form-border-color);
3422
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3423
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3424
- --tds-time-field-background-color:var(--t-form-background-color);
3425
- --tds-time-field-color:var(--t-form-color);
3426
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3427
- --tds-time-field-font-size:var(--t-font-size-md);
3428
- --tds-time-field-min-height:var(--t-container-size-md);
3429
- --tds-time-field-padding-block:6px;
3430
- --tds-time-field-description-color:var(--t-text-color-secondary);
3431
- --tds-time-field-description-invalid-icon-display:none;
3432
-
3433
- position:relative;
3434
- display:flex;
3435
- flex-direction:column;
3436
- gap:var(--t-spacing-half);
3437
- }
3438
-
3439
- .tds-time-field[data-required] .tds-time-field-label::after{
3440
- margin-left:.25ch;
3441
- color:var(--t-text-color-status-error);
3442
- content:"*";
3443
- }
3444
-
3445
- .tds-time-field[data-invalid]{
3446
- --tds-time-field-border-color:var(--t-form-border-color-error);
3447
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3448
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3449
- --tds-time-field-background-color:var(--t-form-background-color-error);
3450
- --tds-time-field-description-color:var(--t-text-color-status-error);
3451
- --tds-time-field-description-invalid-icon-display:inline-block;
3452
- }
3453
-
3454
- .tds-time-field[data-disabled]{
3455
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3456
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3457
- --tds-time-field-color:var(--t-form-color-disabled);
3458
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3459
- }
3460
-
3461
- .tds-time-field[data-disabled] .tds-time-field-label{
3462
- color:var(--t-form-color-disabled);
3463
- }
3464
-
3465
- .tds-time-field[data-disabled] .tds-time-field-input{
3466
- cursor:not-allowed;
3467
- }
3468
-
3469
- .tds-time-field--lg{
3470
- --tds-time-field-min-height:var(--t-container-size-lg);
3471
- --tds-time-field-font-size:var(--t-font-size-lg);
3472
- }
3473
-
3474
- .tds-time-field-label{
3475
- font-size:var(--t-font-size-md);
3476
- font-weight:var(--t-font-weight-normal);
3477
- color:var(--t-text-color);
3478
- cursor:default;
3479
- }
3480
-
3481
- .tds-time-field-input{
3482
- display:flex;
3483
- align-items:center;
3484
- inline-size:100%;
3485
- min-block-size:var(--tds-time-field-min-height);
3486
- padding-block:var(--tds-time-field-padding-block);
3487
- padding-inline:var(--t-spacing-1);
3488
- font-family:inherit;
3489
- font-size:var(--tds-time-field-font-size);
3490
- font-variant-numeric:tabular-nums;
3491
- line-height:1;
3492
- color:var(--tds-time-field-color);
3493
- cursor:text;
3494
- outline:var(--t-focus-ring-width) solid transparent;
3495
- outline-offset:0;
3496
- background-color:var(--tds-time-field-background-color);
3497
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3498
- border-radius:var(--t-form-border-radius);
3499
- }
3500
-
3501
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3502
- border-color:var(--tds-time-field-border-color-hover);
3503
- }
3504
-
3505
- .tds-time-field-input[data-focus-within]{
3506
- outline-color:var(--t-focus-ring-color);
3507
- outline-offset:var(--t-focus-ring-offset);
3508
- border-color:var(--tds-time-field-border-color-active);
3509
- }
3510
-
3511
- .tds-time-field-input[data-readonly]{
3512
- color:var(--t-form-color-readonly);
3513
- background-color:var(--t-form-background-color-readonly);
3514
- border-color:var(--t-form-border-color-readonly);
3515
- }
3516
-
3517
- .tds-time-field-input[data-readonly][data-hovered]{
3518
- border-color:var(--t-form-border-color-readonly);
3519
- }
3520
-
3521
- .tds-time-field-input[data-readonly][data-focus-within]{
3522
- outline-color:var(--t-focus-ring-color);
3523
- outline-offset:var(--t-focus-ring-offset);
3524
- border-color:var(--t-form-border-color-hover);
3525
- }
3526
-
3527
- .tds-time-field-segment{
3528
- padding-inline:1px;
3529
- font-variant-numeric:tabular-nums;
3530
- cursor:text;
3531
- caret-color:transparent;
3532
- border-radius:var(--t-border-radius-sm);
3533
- }
3534
-
3535
- .tds-time-field-segment[data-placeholder]{
3536
- color:var(--tds-time-field-placeholder-color);
3537
- }
3538
-
3539
- .tds-time-field-segment[data-focused]{
3540
- color:var(--t-text-color-inverted);
3541
- outline:0;
3542
- background:var(--t-fill-color-interaction);
3543
- }
3544
-
3545
- .tds-time-field-segment-separator{
3546
- padding-inline:0;
3547
- color:var(--tds-time-field-placeholder-color);
3548
- }
3549
-
3550
- .tds-time-field-description{
3551
- display:flex;
3552
- gap:var(--t-spacing-half);
3553
- align-items:flex-start;
3554
- margin:0;
3555
- font-size:var(--t-font-size-sm);
3556
- line-height:1.35;
3557
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3558
- cursor:text;
3559
- }
3560
-
3561
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3562
- display:var(--tds-time-field-description-invalid-icon-display, none);
3563
- flex-shrink:0;
3564
- margin-block-start:calc(.5lh - .5em);
3565
- line-height:1.35;
3566
- }
3567
-
3568
- .tds-combo-box{
3569
- --tds-combo-box-border-color:var(--t-form-border-color);
3570
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3571
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3572
- --tds-combo-box-background-color:var(--t-form-background-color);
3573
- --tds-combo-box-color:var(--t-form-color);
3574
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3575
- --tds-combo-box-font-size:var(--t-font-size-md);
3576
- --tds-combo-box-min-height:var(--t-container-size-md);
3577
- --tds-combo-box-padding-block:6px;
3578
- --tds-combo-box-button-offset:4px;
3579
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3580
- --tds-combo-box-description-invalid-icon-display:none;
3420
+ .tds-date-picker{
3421
+ --tds-date-picker-border-color:var(--t-form-border-color);
3422
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3423
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3424
+ --tds-date-picker-background-color:var(--t-form-background-color);
3425
+ --tds-date-picker-color:var(--t-form-color);
3426
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3427
+ --tds-date-picker-font-size:var(--t-font-size-md);
3428
+ --tds-date-picker-min-height:var(--t-container-size-md);
3429
+ --tds-date-picker-padding-block:6px;
3430
+ --tds-date-picker-button-offset:4px;
3431
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3432
+ --tds-date-picker-description-invalid-icon-display:none;
3581
3433
 
3582
3434
  position:relative;
3583
3435
  display:flex;
@@ -3585,301 +3437,489 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3585
3437
  gap:var(--t-spacing-half);
3586
3438
  }
3587
3439
 
3588
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3440
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3589
3441
  margin-left:.25ch;
3590
3442
  color:var(--t-text-color-status-error);
3591
3443
  content:"*";
3592
3444
  }
3593
3445
 
3594
- .tds-combo-box[data-invalid]{
3595
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3596
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3597
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3598
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3599
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3600
- --tds-combo-box-description-invalid-icon-display:inline-block;
3446
+ .tds-date-picker[data-invalid]{
3447
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3448
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3449
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3450
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3451
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3452
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3601
3453
  }
3602
3454
 
3603
- .tds-combo-box[data-disabled]{
3604
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3605
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3606
- --tds-combo-box-color:var(--t-form-color-disabled);
3455
+ .tds-date-picker[data-disabled]{
3456
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3457
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3458
+ --tds-date-picker-color:var(--t-form-color-disabled);
3459
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3607
3460
  }
3608
3461
 
3609
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3610
- color:var(--t-form-color-disabled);
3611
- }
3612
-
3613
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3462
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3614
3463
  cursor:not-allowed;
3615
3464
  }
3616
3465
 
3617
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3618
- transform:rotate(.5turn);
3619
- }
3620
-
3621
- .tds-combo-box--lg{
3622
- --tds-combo-box-min-height:var(--t-container-size-lg);
3623
- --tds-combo-box-font-size:var(--t-font-size-lg);
3624
- --tds-combo-box-button-offset:5px;
3466
+ .tds-date-picker--lg{
3467
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3468
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3469
+ --tds-date-picker-button-offset:5px;
3625
3470
  }
3626
3471
 
3627
- .tds-combo-box-label{
3472
+ .tds-date-picker-label{
3628
3473
  font-size:var(--t-font-size-md);
3629
3474
  font-weight:var(--t-font-weight-normal);
3630
3475
  color:var(--t-text-color);
3631
3476
  cursor:default;
3632
3477
  }
3633
3478
 
3634
- .tds-combo-box-field{
3479
+ .tds-date-picker-field{
3635
3480
  display:flex;
3636
3481
  align-items:center;
3637
3482
  inline-size:100%;
3638
- min-block-size:var(--tds-combo-box-min-height);
3483
+ min-block-size:var(--tds-date-picker-min-height);
3639
3484
  font-family:inherit;
3640
- font-size:var(--tds-combo-box-font-size);
3485
+ font-size:var(--tds-date-picker-font-size);
3641
3486
  line-height:1;
3642
- color:var(--tds-combo-box-color);
3487
+ color:var(--tds-date-picker-color);
3643
3488
  -webkit-appearance:none;
3644
3489
  -moz-appearance:none;
3645
3490
  appearance:none;
3646
- cursor:default;
3491
+ cursor:text;
3647
3492
  outline:var(--t-focus-ring-width) solid transparent;
3648
3493
  outline-offset:0;
3649
- background-color:var(--tds-combo-box-background-color);
3650
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3494
+ background-color:var(--tds-date-picker-background-color);
3495
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3651
3496
  border-radius:var(--t-form-border-radius);
3497
+ transition-timing-function:var(--t-ease-in-out);
3498
+ transition-duration:var(--t-duration-200);
3499
+ transition-property:background-color, border-color, outline-color, outline-offset;
3652
3500
  }
3653
3501
 
3654
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3655
- border-color:var(--tds-combo-box-border-color-hover);
3502
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3503
+ border-color:var(--tds-date-picker-border-color-hover);
3656
3504
  }
3657
3505
 
3658
- .tds-combo-box-field[data-focus-within]{
3506
+ .tds-date-picker-field[data-focus-within]:not(:has(.tds-date-picker-button[data-focused])){
3659
3507
  outline-color:var(--t-focus-ring-color);
3660
3508
  outline-offset:var(--t-focus-ring-offset);
3661
- border-color:var(--tds-combo-box-border-color-active);
3509
+ border-color:var(--tds-date-picker-border-color-active);
3662
3510
  }
3663
3511
 
3664
- .tds-combo-box-field:has([readonly]){
3665
- --tds-combo-box-border-color:var(--t-form-border-color-readonly);
3666
- --tds-combo-box-border-color-hover:var(--t-form-border-color-readonly);
3667
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3512
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3513
+ --tds-date-picker-border-color:var(--t-form-border-color-readonly);
3514
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-readonly);
3515
+ --tds-date-picker-background-color:var(--t-form-background-color-readonly);
3516
+ color:var(--t-form-color-readonly);
3668
3517
  }
3669
3518
 
3670
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3519
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3671
3520
  border-color:var(--t-form-border-color-hover);
3672
3521
  }
3673
3522
 
3674
- .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
3523
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
3675
3524
  display:none;
3676
3525
  }
3677
3526
 
3678
- .tds-combo-box-input{
3679
- display:flex;
3527
+ .tds-date-picker-input{
3680
3528
  flex:1;
3681
- align-items:center;
3682
- padding-block:var(--tds-combo-box-padding-block);
3529
+ padding-block:var(--tds-date-picker-padding-block);
3683
3530
  padding-inline-start:var(--t-spacing-1);
3684
- font-family:inherit;
3685
- font-size:inherit;
3686
- color:inherit;
3687
- outline:0;
3688
- background:transparent;
3689
- border:0;
3531
+ overflow-x:auto;
3532
+ font-variant-numeric:tabular-nums;
3533
+ text-wrap:nowrap;
3534
+ scrollbar-width:none;
3690
3535
  }
3691
3536
 
3692
- .tds-combo-box-input::-moz-placeholder{
3693
- color:var(--tds-combo-box-placeholder-color);
3694
- -moz-user-select:none;
3695
- user-select:none;
3537
+ .tds-date-picker-segment{
3538
+ padding-inline:2px;
3539
+ text-align:end;
3540
+ text-wrap:nowrap;
3541
+ caret-color:transparent;
3542
+ border-radius:var(--t-border-radius-sm);
3543
+ }
3544
+
3545
+ .tds-date-picker-segment[data-placeholder]{
3546
+ color:var(--tds-date-picker-placeholder-color);
3696
3547
  }
3697
3548
 
3698
- .tds-combo-box-input::placeholder{
3699
- color:var(--tds-combo-box-placeholder-color);
3700
- -webkit-user-select:none;
3701
- -moz-user-select:none;
3702
- user-select:none;
3549
+ .tds-date-picker-segment[data-focused]{
3550
+ color:var(--t-text-color-inverted);
3551
+ outline:0;
3552
+ background-color:var(--t-fill-color-interaction);
3703
3553
  }
3704
3554
 
3705
- .tds-combo-box-button{
3555
+ .tds-date-picker-segment-separator{
3556
+ padding-inline:0;
3557
+ color:var(--tds-date-picker-placeholder-color);
3558
+ }
3559
+
3560
+ .tds-date-picker-segment:not([data-placeholder], [data-focused]) + .tds-date-picker-segment-separator{
3561
+ color:var(--tds-date-picker-color);
3562
+ }
3563
+
3564
+ .tds-date-picker-description{
3565
+ display:flex;
3566
+ gap:var(--t-spacing-half);
3567
+ align-items:flex-start;
3568
+ margin:0;
3569
+ font-size:var(--t-font-size-sm);
3570
+ line-height:1.35;
3571
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3572
+ cursor:text;
3573
+ }
3574
+
3575
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3576
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3577
+ flex-shrink:0;
3578
+ margin-block-start:calc(.5lh - .5em);
3579
+ line-height:1.35;
3580
+ }
3581
+
3582
+ .tds-date-picker-button{
3706
3583
  flex-shrink:0;
3707
3584
  align-self:center;
3708
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3709
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3585
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3586
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3710
3587
  padding:0;
3711
- margin-inline-end:var(--tds-combo-box-button-offset);
3588
+ margin-inline-start:var(--t-spacing-1);
3589
+ margin-inline-end:var(--tds-date-picker-button-offset);
3712
3590
  }
3713
3591
 
3714
- .tds-combo-box-button > svg{
3715
- inline-size:var(--tds-combo-box-font-size);
3716
- block-size:var(--tds-combo-box-font-size);
3717
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3592
+ .tds-date-picker-popover{
3593
+ --tds-date-picker-popover-font-size:var(--t-font-size-md);
3594
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
3595
+ --tds-date-picker-popover-background-color:var(--t-surface-color-card);
3596
+ --tds-date-picker-popover-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
3597
+ --tds-date-picker-popover-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out);
3598
+ --tds-date-picker-popover-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in);
3599
+ --tds-date-picker-popover-closed-opacity:0;
3600
+ --tds-date-picker-popover-closed-transform:translateY(-8px);
3601
+ --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
3602
+ --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
3603
+ --tds-date-picker-popover-interactive-property:color, background-color, border-color;
3604
+
3605
+ position:relative;
3606
+ overflow:hidden;
3607
+ background-color:var(--tds-date-picker-popover-background-color);
3608
+ border:var(--t-border-width) solid var(--t-border-color);
3609
+ border-radius:var(--t-border-radius);
3610
+ box-shadow:var(--tds-date-picker-popover-shadow);
3611
+ opacity:1;
3612
+ transform:translateY(0);
3613
+ transition:var(--tds-date-picker-popover-transition-enter);
3614
+ }
3615
+
3616
+ .tds-date-picker-popover[data-entering]{
3617
+ opacity:var(--tds-date-picker-popover-closed-opacity);
3618
+ transform:var(--tds-date-picker-popover-closed-transform);
3718
3619
  }
3719
3620
 
3720
- .tds-combo-box-button:not(.tds-btn){
3721
- display:inline-flex;
3722
- align-items:center;
3723
- justify-content:center;
3724
- inline-size:auto;
3725
- block-size:auto;
3726
- margin-inline-end:.75em;
3727
- color:var(--t-icon-color);
3728
- cursor:default;
3729
- background:transparent;
3730
- border:0;
3621
+ .tds-date-picker-popover[data-exiting]{
3622
+ opacity:var(--tds-date-picker-popover-closed-opacity);
3623
+ transform:var(--tds-date-picker-popover-closed-transform);
3624
+ transition:var(--tds-date-picker-popover-transition-exit);
3731
3625
  }
3732
3626
 
3733
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3734
- outline:0;
3735
- }
3627
+ @media (prefers-reduced-motion: reduce){
3736
3628
 
3737
- .tds-combo-box-popover{
3738
- width:var(--trigger-width);
3739
- max-block-size:inherit;
3740
- padding:var(--t-spacing-1);
3741
- overflow:auto;
3629
+ .tds-date-picker-popover{
3630
+ --tds-date-picker-popover-transition-enter:none;
3631
+ --tds-date-picker-popover-transition-exit:none;
3632
+ --tds-date-picker-popover-closed-opacity:1;
3633
+ --tds-date-picker-popover-closed-transform:none;
3634
+ }
3635
+ }
3636
+
3637
+ .tds-date-picker-overlay{
3638
+ position:absolute;
3639
+ inset:0;
3640
+ z-index:1;
3641
+ display:flex;
3642
+ background-color:var(--tds-date-picker-popover-background-color);
3643
+ }
3644
+
3645
+ .tds-date-picker-overlay-list{
3646
+ display:grid;
3647
+ flex:1;
3648
+ grid-template-columns:repeat(3, 1fr);
3649
+ gap:var(--t-spacing-half);
3650
+ padding-inline:var(--tds-date-picker-popover-padding);
3742
3651
  outline:0;
3743
- scrollbar-color:#0004 #0000;
3652
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
3744
3653
  scrollbar-width:thin;
3745
- background:var(--t-surface-color-card);
3746
- background-clip:padding-box;
3747
- border:1px solid var(--t-border-color);
3748
- border-radius:var(--t-border-radius);
3749
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3750
3654
  }
3751
3655
 
3752
- .tds-combo-box-popover[data-entering]{
3753
- animation:tds-combo-box-popover-enter 160ms ease;
3656
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
3657
+ grid-template-rows:repeat(4, 1fr);
3658
+ padding-bottom:var(--tds-date-picker-popover-padding);
3659
+ }
3660
+
3661
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
3662
+ grid-auto-rows:var(--t-container-size-xl);
3663
+ padding-right:var(--t-spacing-1);
3664
+ overflow-y:auto;
3665
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
3666
+ }
3667
+
3668
+ .tds-date-picker-overlay-cell{
3669
+ display:flex;
3670
+ align-items:center;
3671
+ justify-content:center;
3672
+ font-family:inherit;
3673
+ font-size:var(--tds-date-picker-popover-font-size);
3674
+ color:var(--t-text-color);
3675
+ cursor:pointer;
3676
+ outline:0;
3677
+ background-color:transparent;
3678
+ border:0;
3679
+ border-radius:var(--t-border-radius-md);
3680
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
3681
+ transition-duration:var(--t-duration-100);
3682
+ transition-property:var(--tds-date-picker-popover-interactive-property);
3683
+ }
3684
+
3685
+ .tds-date-picker-overlay-cell[data-hovered]{
3686
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
3754
3687
  }
3755
3688
 
3756
- .tds-combo-box-popover[data-exiting]{
3757
- animation:tds-combo-box-popover-exit 130ms ease;
3689
+ .tds-date-picker-overlay-cell[data-pressed]{
3690
+ background-color:var(--t-fill-color-button-neutral-outline-active);
3758
3691
  }
3759
3692
 
3760
- @keyframes tds-combo-box-popover-enter{
3761
- from{
3762
- opacity:0;
3763
- transform:translateY(-8px);
3693
+ .tds-date-picker-overlay-cell[data-selected]{
3694
+ font-weight:var(--t-font-weight-semibold);
3695
+ color:var(--t-text-color-inverted);
3696
+ background-color:var(--t-fill-color-interaction);
3697
+ }
3698
+
3699
+ .tds-date-picker-overlay-cell[data-focus-visible]{
3700
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3701
+ }
3702
+
3703
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
3704
+ outline-offset:var(--t-focus-ring-offset);
3705
+ }
3706
+
3707
+ .tds-date-picker-calendar-heading{
3708
+ display:flex;
3709
+ flex:1;
3710
+ gap:var(--t-spacing-1);
3711
+ align-items:center;
3712
+ justify-content:flex-start;
3713
+ padding-inline-start:4px;
3714
+ }
3715
+
3716
+ .tds-date-picker-calendar-overlay-trigger{
3717
+ --_background-color:transparent;
3718
+ position:relative;
3719
+ padding:0;
3720
+ font-family:inherit;
3721
+ font-size:var(--tds-date-picker-popover-font-size);
3722
+ font-weight:var(--t-font-weight-semibold);
3723
+ font-feature-settings:"ss01", "ss02";
3724
+ color:var(--t-text-color);
3725
+ cursor:pointer;
3726
+ outline:0;
3727
+ background-color:transparent;
3728
+ border:0;
3729
+ border-radius:var(--t-border-radius-md);
3730
+ isolation:isolate;
3731
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
3732
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
3733
+ transition-property:var(--tds-date-picker-popover-interactive-property);
3734
+ }
3735
+
3736
+ .tds-date-picker-calendar-overlay-trigger::before{
3737
+ position:absolute;
3738
+ inset:calc(var(--t-spacing-half) * -1);
3739
+ z-index:-1;
3740
+ pointer-events:inherit;
3741
+ content:"";
3742
+ background-color:var(--_background-color);
3743
+ border-radius:inherit;
3744
+ }
3745
+
3746
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
3747
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
3748
+ }
3749
+
3750
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
3751
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
3764
3752
  }
3765
- }
3766
3753
 
3767
- @keyframes tds-combo-box-popover-exit{
3768
- to{
3769
- opacity:0;
3770
- transform:translateY(-8px);
3754
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
3755
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3756
+ outline-offset:var(--t-focus-ring-offset);
3771
3757
  }
3758
+
3759
+ .tds-date-picker-calendar{
3760
+ inline-size:-moz-fit-content;
3761
+ inline-size:fit-content;
3762
+ font-size:var(--tds-date-picker-popover-font-size);
3772
3763
  }
3773
3764
 
3774
- @media (prefers-reduced-motion: reduce){
3775
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3776
- animation:none;
3777
- }
3765
+ .tds-date-picker-calendar-body{
3766
+ position:relative;
3767
+ padding:var(--tds-date-picker-popover-padding);
3768
+ padding-block-start:0;
3769
+ }
3778
3770
 
3779
- .tds-combo-box-button > svg{
3780
- transition:none;
3781
- }
3771
+ .tds-date-picker-calendar-header{
3772
+ display:flex;
3773
+ align-items:center;
3774
+ justify-content:space-between;
3775
+ padding:var(--tds-date-picker-popover-padding);
3782
3776
  }
3783
3777
 
3784
- .tds-combo-box-list{
3785
- padding:0;
3786
- margin:0;
3778
+ .tds-date-picker-calendar-title{
3779
+ padding:var(--t-spacing-half) var(--t-spacing-1);
3780
+ font-size:var(--tds-date-picker-popover-font-size);
3781
+ font-weight:var(--t-font-weight-semibold);
3787
3782
  }
3788
3783
 
3789
- .tds-combo-box-list-item{
3790
- display:block;
3791
- padding-block:var(--t-spacing-1);
3792
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3793
- overflow:hidden;
3794
- text-overflow:ellipsis;
3795
- font-size:1rem;
3784
+ .tds-date-picker-calendar-nav{
3785
+ display:flex;
3786
+ align-items:center;
3787
+ justify-content:center;
3788
+ padding:var(--t-spacing-half);
3789
+ font-size:.875em;
3796
3790
  color:var(--t-text-color);
3797
- white-space:nowrap;
3798
- cursor:default;
3799
- border-radius:var(--t-border-radius);
3791
+ cursor:pointer;
3792
+ outline:0;
3793
+ background-color:transparent;
3794
+ border:0;
3795
+ border-radius:var(--t-border-radius-md);
3796
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
3797
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
3798
+ transition-property:var(--tds-date-picker-popover-interactive-property);
3800
3799
  }
3801
3800
 
3802
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
3803
- background:var(--t-fill-color-neutral-070);
3801
+ .tds-date-picker-calendar-nav[data-hovered]{
3802
+ background-color:var(--t-fill-color-button-neutral-outline-hover);
3804
3803
  }
3805
3804
 
3806
- .tds-combo-box-list-item[data-selected]{
3807
- background:var(--t-fill-color-button-interaction-ghost-active);
3805
+ .tds-date-picker-calendar-nav[data-pressed]{
3806
+ background-color:var(--t-fill-color-button-neutral-outline-active);
3808
3807
  }
3809
3808
 
3810
- .tds-combo-box-list-item[data-disabled]{
3811
- color:var(--t-form-color-disabled);
3809
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3810
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3811
+ outline-offset:var(--t-focus-ring-offset);
3812
+ }
3813
+
3814
+ .tds-date-picker-calendar-nav[data-disabled]{
3815
+ color:var(--t-text-color-disabled);
3812
3816
  cursor:not-allowed;
3813
3817
  }
3814
3818
 
3815
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3816
- background:transparent;
3817
- }
3819
+ .tds-date-picker-calendar-grid{
3820
+ font-feature-settings:"ss01", "ss02";
3821
+ border-collapse:collapse;
3822
+ }
3818
3823
 
3819
- .tds-combo-box-empty-state{
3820
- position:relative;
3821
- min-block-size:var(--t-spacing-3);
3822
- padding-block:var(--t-spacing-1);
3823
- padding-inline:var(--t-spacing-2);
3824
- font-size:var(--t-font-size-md);
3824
+ .tds-date-picker-calendar-grid :where(thead,tbody,tr,td,th){
3825
+ padding:0;
3826
+ border:0;
3827
+ }
3828
+
3829
+ .tds-date-picker-calendar-header-cell{
3830
+ padding-block-end:var(--t-spacing-1);
3831
+ font-size:.875em;
3832
+ font-weight:var(--t-font-weight-medium);
3825
3833
  color:var(--t-text-color-secondary);
3834
+ text-align:center;
3835
+ -webkit-user-select:none;
3836
+ -moz-user-select:none;
3837
+ user-select:none;
3826
3838
  }
3827
3839
 
3828
- .tds-combo-box-load-more{
3840
+ .tds-date-picker-calendar-cell-button{
3829
3841
  position:relative;
3830
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
3842
+ display:flex;
3843
+ align-items:center;
3844
+ justify-content:center;
3845
+ inline-size:2.25em;
3846
+ block-size:2.25em;
3847
+ color:var(--t-text-color);
3848
+ cursor:pointer;
3849
+ -webkit-user-select:none;
3850
+ -moz-user-select:none;
3851
+ user-select:none;
3852
+ outline:0;
3831
3853
  }
3832
3854
 
3833
- .tds-combo-box-empty-state,
3834
- .tds-combo-box-load-more{
3835
- --tds-loading-spinner-visibility:visible;
3836
- --tds-loading-spinner-animation-play-state:running;
3837
- }
3855
+ .tds-date-picker-calendar-cell-button::before{
3856
+ position:absolute;
3857
+ inset:0;
3858
+ z-index:-1;
3859
+ content:"";
3860
+ background-color:var(--_background-color);
3861
+ border-radius:50%;
3862
+ }
3838
3863
 
3839
- .tds-combo-box-list-section:not(:first-child){
3840
- margin-block-start:var(--t-spacing-half);
3864
+ .tds-date-picker-calendar-cell-button[data-today]::before{
3865
+ box-shadow:inset 0 0 0 1.5px var(--t-border-color);
3866
+ }
3867
+
3868
+ .tds-date-picker-calendar-cell-button[data-outside-month]{
3869
+ display:none;
3841
3870
  }
3842
3871
 
3843
- .tds-combo-box-section-header{
3844
- padding-block:var(--t-spacing-1);
3845
- padding-inline:var(--t-spacing-1);
3846
- font-size:var(--t-font-size-sm);
3847
- font-weight:var(--t-font-weight-semibold);
3848
- color:var(--t-text-color-secondary);
3849
- }
3872
+ .tds-date-picker-calendar-cell-button[data-hovered]{
3873
+ --_background-color:var(--t-fill-color-button-neutral-outline-hover);
3874
+ }
3850
3875
 
3851
- .tds-combo-box-description{
3852
- display:flex;
3853
- gap:var(--t-spacing-half);
3854
- align-items:flex-start;
3855
- margin:0;
3856
- font-size:var(--t-font-size-sm);
3857
- line-height:1.35;
3858
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3859
- cursor:text;
3860
- }
3876
+ .tds-date-picker-calendar-cell-button[data-pressed]{
3877
+ --_background-color:var(--t-fill-color-button-neutral-outline-active);
3878
+ }
3861
3879
 
3862
- .tds-combo-box-description .tds-combo-box-description-invalid-icon{
3863
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3864
- flex-shrink:0;
3865
- margin-block-start:calc(.5lh - .5em);
3866
- line-height:1.35;
3880
+ .tds-date-picker-calendar-cell-button[data-selected]{
3881
+ --_background-color:var(--t-fill-color-interaction);
3882
+ font-weight:var(--t-font-weight-semibold);
3883
+ color:var(--t-text-color-inverted);
3884
+ border-color:transparent;
3867
3885
  }
3868
3886
 
3887
+ .tds-date-picker-calendar-cell-button[data-unavailable]{
3888
+ color:var(--t-text-color-disabled);
3889
+ text-decoration:line-through;
3890
+ cursor:not-allowed;
3891
+ }
3869
3892
 
3870
- .tds-date-picker{
3871
- --tds-date-picker-border-color:var(--t-form-border-color);
3872
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3873
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3874
- --tds-date-picker-background-color:var(--t-form-background-color);
3875
- --tds-date-picker-color:var(--t-form-color);
3876
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3877
- --tds-date-picker-font-size:var(--t-font-size-md);
3878
- --tds-date-picker-min-height:var(--t-container-size-md);
3879
- --tds-date-picker-padding-block:6px;
3880
- --tds-date-picker-button-offset:4px;
3881
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3882
- --tds-date-picker-description-invalid-icon-display:none;
3893
+ .tds-date-picker-calendar-cell-button[data-disabled]{
3894
+ color:var(--t-text-color-disabled);
3895
+ }
3896
+
3897
+ .tds-date-picker-calendar-cell-button[data-focus-visible]{
3898
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3899
+ outline-offset:-2px;
3900
+ }
3901
+
3902
+ .tds-date-picker-calendar-cell-button[data-focus-visible][data-selected]{
3903
+ outline-offset:var(--t-focus-ring-offset);
3904
+ }
3905
+
3906
+ .tds-date-picker-popover--lg{
3907
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
3908
+ }
3909
+
3910
+ .tds-combo-box{
3911
+ --tds-combo-box-border-color:var(--t-form-border-color);
3912
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3913
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3914
+ --tds-combo-box-background-color:var(--t-form-background-color);
3915
+ --tds-combo-box-color:var(--t-form-color);
3916
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3917
+ --tds-combo-box-font-size:var(--t-font-size-md);
3918
+ --tds-combo-box-min-height:var(--t-container-size-md);
3919
+ --tds-combo-box-padding-block:6px;
3920
+ --tds-combo-box-button-offset:4px;
3921
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3922
+ --tds-combo-box-description-invalid-icon-display:none;
3883
3923
 
3884
3924
  position:relative;
3885
3925
  display:flex;
@@ -3887,453 +3927,436 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3887
3927
  gap:var(--t-spacing-half);
3888
3928
  }
3889
3929
 
3890
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3930
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3891
3931
  margin-left:.25ch;
3892
3932
  color:var(--t-text-color-status-error);
3893
3933
  content:"*";
3894
3934
  }
3895
3935
 
3896
- .tds-date-picker[data-invalid]{
3897
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3898
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3899
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3900
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3901
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3902
- --tds-date-picker-description-invalid-icon-display:inline-block;
3936
+ .tds-combo-box[data-invalid]{
3937
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3938
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3939
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3940
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3941
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3942
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3903
3943
  }
3904
3944
 
3905
- .tds-date-picker[data-disabled]{
3906
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3907
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3908
- --tds-date-picker-color:var(--t-form-color-disabled);
3909
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3945
+ .tds-combo-box[data-disabled]{
3946
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3947
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3948
+ --tds-combo-box-color:var(--t-form-color-disabled);
3910
3949
  }
3911
3950
 
3912
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3951
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3952
+ color:var(--t-form-color-disabled);
3953
+ }
3954
+
3955
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3913
3956
  cursor:not-allowed;
3914
3957
  }
3915
3958
 
3916
- .tds-date-picker--lg{
3917
- --tds-date-picker-min-height:var(--t-container-size-lg);
3918
- --tds-date-picker-font-size:var(--t-font-size-lg);
3919
- --tds-date-picker-button-offset:5px;
3959
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3960
+ transform:rotate(.5turn);
3961
+ }
3962
+
3963
+ .tds-combo-box--lg{
3964
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3965
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3966
+ --tds-combo-box-button-offset:5px;
3920
3967
  }
3921
3968
 
3922
- .tds-date-picker-label{
3969
+ .tds-combo-box-label{
3923
3970
  font-size:var(--t-font-size-md);
3924
3971
  font-weight:var(--t-font-weight-normal);
3925
3972
  color:var(--t-text-color);
3926
3973
  cursor:default;
3927
3974
  }
3928
3975
 
3929
- .tds-date-picker-field{
3976
+ .tds-combo-box-field{
3930
3977
  display:flex;
3931
3978
  align-items:center;
3932
3979
  inline-size:100%;
3933
- min-block-size:var(--tds-date-picker-min-height);
3980
+ min-block-size:var(--tds-combo-box-min-height);
3934
3981
  font-family:inherit;
3935
- font-size:var(--tds-date-picker-font-size);
3982
+ font-size:var(--tds-combo-box-font-size);
3936
3983
  line-height:1;
3937
- color:var(--tds-date-picker-color);
3984
+ color:var(--tds-combo-box-color);
3938
3985
  -webkit-appearance:none;
3939
3986
  -moz-appearance:none;
3940
3987
  appearance:none;
3941
- cursor:text;
3988
+ cursor:default;
3942
3989
  outline:var(--t-focus-ring-width) solid transparent;
3943
3990
  outline-offset:0;
3944
- background-color:var(--tds-date-picker-background-color);
3945
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3991
+ background-color:var(--tds-combo-box-background-color);
3992
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3946
3993
  border-radius:var(--t-form-border-radius);
3947
3994
  }
3948
3995
 
3949
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3950
- border-color:var(--tds-date-picker-border-color-hover);
3996
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3997
+ border-color:var(--tds-combo-box-border-color-hover);
3951
3998
  }
3952
3999
 
3953
- .tds-date-picker-field[data-focus-within]:not(:has(.tds-date-picker-button[data-focused])){
4000
+ .tds-combo-box-field[data-focus-within]{
3954
4001
  outline-color:var(--t-focus-ring-color);
3955
4002
  outline-offset:var(--t-focus-ring-offset);
3956
- border-color:var(--tds-date-picker-border-color-active);
4003
+ border-color:var(--tds-combo-box-border-color-active);
3957
4004
  }
3958
4005
 
3959
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3960
- --tds-date-picker-border-color:var(--t-form-border-color-readonly);
3961
- --tds-date-picker-border-color-hover:var(--t-form-border-color-readonly);
3962
- --tds-date-picker-background-color:var(--t-form-background-color-readonly);
3963
- color:var(--t-form-color-readonly);
4006
+ .tds-combo-box-field:has([readonly]){
4007
+ --tds-combo-box-border-color:var(--t-form-border-color-readonly);
4008
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-readonly);
4009
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3964
4010
  }
3965
4011
 
3966
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4012
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3967
4013
  border-color:var(--t-form-border-color-hover);
3968
4014
  }
3969
4015
 
3970
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
4016
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
3971
4017
  display:none;
3972
4018
  }
3973
4019
 
3974
- .tds-date-picker-input{
4020
+ .tds-combo-box-input{
4021
+ display:flex;
3975
4022
  flex:1;
3976
- padding-block:var(--tds-date-picker-padding-block);
4023
+ align-items:center;
4024
+ padding-block:var(--tds-combo-box-padding-block);
3977
4025
  padding-inline-start:var(--t-spacing-1);
3978
- font-variant-numeric:tabular-nums;
3979
- }
3980
-
3981
- .tds-date-picker-segment{
3982
- padding-inline:2px;
3983
- caret-color:transparent;
3984
- border-radius:var(--t-border-radius-sm);
4026
+ font-family:inherit;
4027
+ font-size:inherit;
4028
+ color:inherit;
4029
+ outline:0;
4030
+ background:transparent;
4031
+ border:0;
3985
4032
  }
3986
4033
 
3987
- .tds-date-picker-segment[data-placeholder]{
3988
- color:var(--tds-date-picker-placeholder-color);
3989
- }
3990
-
3991
- .tds-date-picker-segment[data-focused]{
3992
- color:var(--t-text-color-inverted);
3993
- outline:0;
3994
- background:var(--t-fill-color-interaction);
4034
+ .tds-combo-box-input::-moz-placeholder{
4035
+ color:var(--tds-combo-box-placeholder-color);
4036
+ -moz-user-select:none;
4037
+ user-select:none;
3995
4038
  }
3996
4039
 
3997
- .tds-date-picker-segment-separator{
3998
- padding-inline:0;
3999
- color:var(--tds-date-picker-placeholder-color);
4000
- }
4001
-
4002
- .tds-date-picker-description{
4003
- display:flex;
4004
- gap:var(--t-spacing-half);
4005
- align-items:flex-start;
4006
- margin:0;
4007
- font-size:var(--t-font-size-sm);
4008
- line-height:1.35;
4009
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4010
- cursor:text;
4011
- }
4012
-
4013
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4014
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4015
- flex-shrink:0;
4016
- margin-block-start:calc(.5lh - .5em);
4017
- line-height:1.35;
4040
+ .tds-combo-box-input::placeholder{
4041
+ color:var(--tds-combo-box-placeholder-color);
4042
+ -webkit-user-select:none;
4043
+ -moz-user-select:none;
4044
+ user-select:none;
4018
4045
  }
4019
4046
 
4020
- .tds-date-picker-button{
4047
+ .tds-combo-box-button{
4021
4048
  flex-shrink:0;
4022
4049
  align-self:center;
4023
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4024
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4050
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4051
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4025
4052
  padding:0;
4026
- margin-inline-end:var(--tds-date-picker-button-offset);
4027
- }
4028
-
4029
- .tds-date-picker-popover{
4030
- --tds-date-picker-popover-font-size:var(--t-font-size-md);
4031
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
4032
- --tds-date-picker-popover-background-color:var(--t-surface-color-card);
4033
- --tds-date-picker-popover-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out);
4034
- --tds-date-picker-popover-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in);
4035
- --tds-date-picker-popover-closed-opacity:0;
4036
- --tds-date-picker-popover-closed-transform:translateY(-8px);
4037
- --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
4038
- --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
4039
- --tds-date-picker-popover-interactive-property:color, background-color, border-color;
4040
-
4041
- position:relative;
4042
- overflow:hidden;
4043
- background-color:var(--tds-date-picker-popover-background-color);
4044
- border:var(--t-border-width) solid var(--t-border-color);
4045
- border-radius:var(--t-border-radius);
4046
- box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
4047
- opacity:1;
4048
- transform:translateY(0);
4049
- transition:var(--tds-date-picker-popover-transition-enter);
4053
+ margin-inline-end:var(--tds-combo-box-button-offset);
4050
4054
  }
4051
4055
 
4052
- .tds-date-picker-popover[data-entering]{
4053
- opacity:var(--tds-date-picker-popover-closed-opacity);
4054
- transform:var(--tds-date-picker-popover-closed-transform);
4055
- }
4056
-
4057
- .tds-date-picker-popover[data-exiting]{
4058
- opacity:var(--tds-date-picker-popover-closed-opacity);
4059
- transform:var(--tds-date-picker-popover-closed-transform);
4060
- transition:var(--tds-date-picker-popover-transition-exit);
4056
+ .tds-combo-box-button > svg{
4057
+ inline-size:var(--tds-combo-box-font-size);
4058
+ block-size:var(--tds-combo-box-font-size);
4059
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
4061
4060
  }
4062
4061
 
4063
- @media (prefers-reduced-motion: reduce){
4064
-
4065
- .tds-date-picker-popover{
4066
- --tds-date-picker-popover-transition-enter:none;
4067
- --tds-date-picker-popover-transition-exit:none;
4068
- --tds-date-picker-popover-closed-opacity:1;
4069
- --tds-date-picker-popover-closed-transform:none;
4070
- }
4062
+ .tds-combo-box-button:not(.tds-btn){
4063
+ display:inline-flex;
4064
+ align-items:center;
4065
+ justify-content:center;
4066
+ inline-size:auto;
4067
+ block-size:auto;
4068
+ margin-inline-end:.75em;
4069
+ color:var(--t-icon-color);
4070
+ cursor:default;
4071
+ background:transparent;
4072
+ border:0;
4071
4073
  }
4072
4074
 
4073
- .tds-date-picker-overlay{
4074
- position:absolute;
4075
- inset:0;
4076
- z-index:1;
4077
- display:flex;
4078
- background-color:var(--tds-date-picker-popover-background-color);
4079
- }
4075
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
4076
+ outline:0;
4077
+ }
4080
4078
 
4081
- .tds-date-picker-overlay-list{
4082
- display:grid;
4083
- flex:1;
4084
- gap:var(--t-spacing-half);
4085
- padding-inline:var(--tds-date-picker-popover-padding);
4079
+ .tds-combo-box-popover{
4080
+ width:var(--trigger-width);
4081
+ max-block-size:inherit;
4082
+ padding:var(--t-spacing-1);
4083
+ overflow:auto;
4086
4084
  outline:0;
4087
- grid-template-columns:repeat(3, 1fr);
4085
+ scrollbar-color:#0004 #0000;
4088
4086
  scrollbar-width:thin;
4089
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4090
- }
4091
-
4092
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
4093
- padding-bottom:var(--tds-date-picker-popover-padding);
4094
- grid-template-rows:repeat(4, 1fr);
4095
- }
4096
-
4097
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
4098
- padding-right:var(--t-spacing-1);
4099
- grid-auto-rows:var(--t-container-size-xl);
4100
- overflow-y:auto;
4101
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
4102
- }
4103
-
4104
- .tds-date-picker-overlay-cell{
4105
- display:flex;
4106
- align-items:center;
4107
- justify-content:center;
4108
- font-family:inherit;
4109
- font-size:var(--tds-date-picker-popover-font-size);
4110
- color:var(--t-text-color);
4111
- cursor:default;
4112
- outline:0;
4113
- background:transparent;
4114
- border:0;
4115
- border-radius:var(--t-border-radius-md);
4116
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4117
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4118
- transition-property:var(--tds-date-picker-popover-interactive-property);
4087
+ background:var(--t-surface-color-card);
4088
+ background-clip:padding-box;
4089
+ border:1px solid var(--t-border-color);
4090
+ border-radius:var(--t-border-radius);
4091
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4119
4092
  }
4120
4093
 
4121
- .tds-date-picker-overlay-cell[data-hovered]{
4122
- background:var(--t-fill-color-button-neutral-outline-hover);
4094
+ .tds-combo-box-popover[data-entering]{
4095
+ animation:tds-combo-box-popover-enter 160ms ease;
4123
4096
  }
4124
4097
 
4125
- .tds-date-picker-overlay-cell[data-pressed]{
4126
- background:var(--t-fill-color-button-neutral-outline-active);
4098
+ .tds-combo-box-popover[data-exiting]{
4099
+ animation:tds-combo-box-popover-exit 130ms ease;
4127
4100
  }
4128
4101
 
4129
- .tds-date-picker-overlay-cell[data-selected]{
4130
- font-weight:var(--t-font-weight-semibold);
4131
- color:var(--t-text-color-inverted);
4132
- background:var(--t-fill-color-interaction);
4102
+ @keyframes tds-combo-box-popover-enter{
4103
+ from{
4104
+ opacity:0;
4105
+ transform:translateY(-8px);
4133
4106
  }
4107
+ }
4134
4108
 
4135
- .tds-date-picker-overlay-cell[data-focus-visible]{
4136
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4109
+ @keyframes tds-combo-box-popover-exit{
4110
+ to{
4111
+ opacity:0;
4112
+ transform:translateY(-8px);
4137
4113
  }
4114
+ }
4138
4115
 
4139
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
4140
- outline-offset:var(--t-focus-ring-offset);
4116
+ @media (prefers-reduced-motion: reduce){
4117
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
4118
+ animation:none;
4119
+ }
4120
+
4121
+ .tds-combo-box-button > svg{
4122
+ transition:none;
4141
4123
  }
4124
+ }
4142
4125
 
4143
- .tds-date-picker-calendar-heading{
4144
- display:flex;
4145
- flex:1;
4146
- gap:var(--t-spacing-half);
4147
- align-items:center;
4148
- justify-content:flex-start;
4126
+ .tds-combo-box-list{
4127
+ padding:0;
4128
+ margin:0;
4149
4129
  }
4150
4130
 
4151
- .tds-date-picker-calendar-overlay-trigger{
4152
- padding:var(--t-spacing-half) var(--t-spacing-1);
4153
- font-family:inherit;
4154
- font-size:var(--tds-date-picker-popover-font-size);
4155
- font-weight:var(--t-font-weight-semibold);
4131
+ .tds-combo-box-list-item{
4132
+ display:block;
4133
+ padding-block:var(--t-spacing-1);
4134
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4135
+ overflow:hidden;
4136
+ text-overflow:ellipsis;
4137
+ font-size:1rem;
4156
4138
  color:var(--t-text-color);
4157
- cursor:default;
4158
- outline:0;
4159
- background:transparent;
4160
- border:0;
4161
- border-radius:var(--t-border-radius-md);
4162
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4163
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4164
- transition-property:var(--tds-date-picker-popover-interactive-property);
4139
+ white-space:nowrap;
4140
+ cursor:default;
4141
+ border-radius:var(--t-border-radius);
4165
4142
  }
4166
4143
 
4167
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
4168
- background:var(--t-fill-color-button-neutral-outline-hover);
4144
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
4145
+ background:var(--t-fill-color-neutral-070);
4169
4146
  }
4170
4147
 
4171
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
4172
- background:var(--t-fill-color-button-neutral-outline-active);
4148
+ .tds-combo-box-list-item[data-selected]{
4149
+ background:var(--t-fill-color-button-interaction-ghost-active);
4173
4150
  }
4174
4151
 
4175
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
4176
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4177
- outline-offset:var(--t-focus-ring-offset);
4152
+ .tds-combo-box-list-item[data-disabled]{
4153
+ color:var(--t-form-color-disabled);
4154
+ cursor:not-allowed;
4178
4155
  }
4179
4156
 
4180
- .tds-date-picker-calendar{
4181
- font-size:var(--tds-date-picker-popover-font-size);
4182
- inline-size:-moz-fit-content;
4183
- inline-size:fit-content;
4184
- }
4157
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
4158
+ background:transparent;
4159
+ }
4185
4160
 
4186
- .tds-date-picker-calendar-body{
4161
+ .tds-combo-box-empty-state{
4187
4162
  position:relative;
4188
- padding:var(--tds-date-picker-popover-padding);
4189
- padding-block-start:0;
4163
+ min-block-size:var(--t-spacing-3);
4164
+ padding-block:var(--t-spacing-1);
4165
+ padding-inline:var(--t-spacing-2);
4166
+ font-size:var(--t-font-size-md);
4167
+ color:var(--t-text-color-secondary);
4190
4168
  }
4191
4169
 
4192
- .tds-date-picker-calendar-header{
4193
- display:flex;
4194
- align-items:center;
4195
- justify-content:space-between;
4196
- padding:var(--tds-date-picker-popover-padding);
4170
+ .tds-combo-box-load-more{
4171
+ position:relative;
4172
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
4197
4173
  }
4198
4174
 
4199
- .tds-date-picker-calendar-title{
4200
- padding:var(--t-spacing-half) var(--t-spacing-1);
4201
- font-size:var(--tds-date-picker-popover-font-size);
4202
- font-weight:var(--t-font-weight-semibold);
4175
+ .tds-combo-box-empty-state,
4176
+ .tds-combo-box-load-more{
4177
+ --tds-loading-spinner-visibility:visible;
4178
+ --tds-loading-spinner-animation-play-state:running;
4203
4179
  }
4204
4180
 
4205
- .tds-date-picker-calendar-title--visually-hidden{
4206
- position:absolute;
4207
- inline-size:1px;
4208
- block-size:1px;
4209
- padding:0;
4210
- margin:-1px;
4211
- overflow:hidden;
4212
- white-space:nowrap;
4213
- border:0;
4214
- clip-path:inset(50%);
4181
+ .tds-combo-box-list-section:not(:first-child){
4182
+ margin-block-start:var(--t-spacing-half);
4183
+ }
4184
+
4185
+ .tds-combo-box-section-header{
4186
+ padding-block:var(--t-spacing-1);
4187
+ padding-inline:var(--t-spacing-1);
4188
+ font-size:var(--t-font-size-sm);
4189
+ font-weight:var(--t-font-weight-semibold);
4190
+ color:var(--t-text-color-secondary);
4215
4191
  }
4216
4192
 
4217
- .tds-date-picker-calendar-nav{
4218
- font-size:var(--tds-date-picker-popover-font-size);
4193
+ .tds-combo-box-description{
4219
4194
  display:flex;
4220
- align-items:center;
4221
- justify-content:center;
4222
- padding:var(--t-spacing-half);
4223
- color:var(--t-text-color);
4224
- cursor:default;
4225
- outline:0;
4226
- background:transparent;
4227
- border:0;
4228
- border-radius:var(--t-border-radius-md);
4229
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4230
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4231
- transition-property:var(--tds-date-picker-popover-interactive-property);
4195
+ gap:var(--t-spacing-half);
4196
+ align-items:flex-start;
4197
+ margin:0;
4198
+ font-size:var(--t-font-size-sm);
4199
+ line-height:1.35;
4200
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4201
+ cursor:text;
4232
4202
  }
4233
4203
 
4234
- .tds-date-picker-calendar-nav[data-hovered]{
4235
- background:var(--t-fill-color-button-neutral-outline-hover);
4204
+ .tds-combo-box-description .tds-combo-box-description-invalid-icon{
4205
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
4206
+ flex-shrink:0;
4207
+ margin-block-start:calc(.5lh - .5em);
4208
+ line-height:1.35;
4236
4209
  }
4237
4210
 
4238
- .tds-date-picker-calendar-nav[data-pressed]{
4239
- background:var(--t-fill-color-button-neutral-outline-active);
4211
+
4212
+ .tds-time-field{
4213
+ --tds-time-field-border-color:var(--t-form-border-color);
4214
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4215
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4216
+ --tds-time-field-background-color:var(--t-form-background-color);
4217
+ --tds-time-field-color:var(--t-form-color);
4218
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4219
+ --tds-time-field-font-size:var(--t-font-size-md);
4220
+ --tds-time-field-min-height:var(--t-container-size-md);
4221
+ --tds-time-field-padding-block:6px;
4222
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4223
+ --tds-time-field-description-invalid-icon-display:none;
4224
+
4225
+ position:relative;
4226
+ display:flex;
4227
+ flex-direction:column;
4228
+ gap:var(--t-spacing-half);
4229
+ }
4230
+
4231
+ .tds-time-field[data-required] .tds-time-field-label::after{
4232
+ margin-left:.25ch;
4233
+ color:var(--t-text-color-status-error);
4234
+ content:"*";
4240
4235
  }
4241
4236
 
4242
- .tds-date-picker-calendar-nav[data-focus-visible]{
4243
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4244
- outline-offset:var(--t-focus-ring-offset);
4237
+ .tds-time-field[data-invalid]{
4238
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4239
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4240
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4241
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4242
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4243
+ --tds-time-field-description-invalid-icon-display:inline-block;
4245
4244
  }
4246
4245
 
4247
- .tds-date-picker-calendar-nav[data-disabled]{
4248
- color:var(--t-text-color-disabled);
4249
- cursor:not-allowed;
4246
+ .tds-time-field[data-disabled]{
4247
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4248
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4249
+ --tds-time-field-color:var(--t-form-color-disabled);
4250
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4250
4251
  }
4251
4252
 
4252
- .tds-date-picker-calendar-nav svg{
4253
- transform:scale(0.875);
4254
- }
4253
+ .tds-time-field[data-disabled] .tds-time-field-label{
4254
+ color:var(--t-form-color-disabled);
4255
+ }
4255
4256
 
4256
- .tds-date-picker-calendar-nav--lg svg{
4257
- transform:scale(1);
4258
- }
4257
+ .tds-time-field[data-disabled] .tds-time-field-input{
4258
+ cursor:not-allowed;
4259
+ }
4259
4260
 
4260
- .tds-date-picker-calendar-grid{
4261
- border-collapse:collapse;
4261
+ .tds-time-field--lg{
4262
+ --tds-time-field-min-height:var(--t-container-size-lg);
4263
+ --tds-time-field-font-size:var(--t-font-size-lg);
4262
4264
  }
4263
4265
 
4264
- .tds-date-picker-calendar-header-cell{
4265
- padding-block:var(--t-spacing-half);
4266
- font-size:0.875em;
4267
- font-weight:var(--t-font-weight-medium);
4268
- color:var(--t-text-color-secondary);
4269
- text-align:center;
4266
+ .tds-time-field-label{
4267
+ font-size:var(--t-font-size-md);
4268
+ font-weight:var(--t-font-weight-normal);
4269
+ color:var(--t-text-color);
4270
+ cursor:default;
4270
4271
  }
4271
4272
 
4272
- .tds-date-picker-calendar-cell{
4273
+ .tds-time-field-input{
4273
4274
  display:flex;
4274
4275
  align-items:center;
4275
- justify-content:center;
4276
- inline-size:2.25em;
4277
- block-size:2.25em;
4278
- color:var(--t-text-color);
4279
- cursor:default;
4280
- outline:0;
4281
- border:2px solid transparent;
4282
- border-radius:var(--t-border-radius-md);
4283
- position:relative;
4284
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4285
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4286
- transition-property:var(--tds-date-picker-popover-interactive-property);
4276
+ inline-size:100%;
4277
+ min-block-size:var(--tds-time-field-min-height);
4278
+ padding-block:var(--tds-time-field-padding-block);
4279
+ padding-inline:var(--t-spacing-1);
4280
+ font-family:inherit;
4281
+ font-size:var(--tds-time-field-font-size);
4282
+ font-variant-numeric:tabular-nums;
4283
+ line-height:1;
4284
+ color:var(--tds-time-field-color);
4285
+ cursor:text;
4286
+ outline:var(--t-focus-ring-width) solid transparent;
4287
+ outline-offset:0;
4288
+ background-color:var(--tds-time-field-background-color);
4289
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4290
+ border-radius:var(--t-form-border-radius);
4287
4291
  }
4288
4292
 
4289
- .tds-date-picker-calendar-cell[data-today]{
4290
- border-radius:50%;
4291
- border-color:var(--t-border-color);
4293
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4294
+ border-color:var(--tds-time-field-border-color-hover);
4292
4295
  }
4293
4296
 
4294
- .tds-date-picker-calendar-cell[data-outside-month]{
4295
- color:var(--t-text-color-secondary);
4297
+ .tds-time-field-input[data-focus-within]{
4298
+ outline-color:var(--t-focus-ring-color);
4299
+ outline-offset:var(--t-focus-ring-offset);
4300
+ border-color:var(--tds-time-field-border-color-active);
4296
4301
  }
4297
4302
 
4298
- .tds-date-picker-calendar-cell[data-hovered]{
4299
- background:var(--t-fill-color-button-neutral-outline-hover);
4303
+ .tds-time-field-input[data-readonly]{
4304
+ color:var(--t-form-color-readonly);
4305
+ background-color:var(--t-form-background-color-readonly);
4306
+ border-color:var(--t-form-border-color-readonly);
4300
4307
  }
4301
4308
 
4302
- .tds-date-picker-calendar-cell[data-pressed]{
4303
- background:var(--t-fill-color-button-neutral-outline-active);
4304
- }
4309
+ .tds-time-field-input[data-readonly][data-hovered]{
4310
+ border-color:var(--t-form-border-color-readonly);
4311
+ }
4305
4312
 
4306
- .tds-date-picker-calendar-cell[data-selected]{
4307
- font-weight:var(--t-font-weight-semibold);
4308
- color:var(--t-text-color-inverted);
4309
- background:var(--t-fill-color-interaction);
4310
- border-color:transparent;
4311
- }
4313
+ .tds-time-field-input[data-readonly][data-focus-within]{
4314
+ outline-color:var(--t-focus-ring-color);
4315
+ outline-offset:var(--t-focus-ring-offset);
4316
+ border-color:var(--t-form-border-color-hover);
4317
+ }
4312
4318
 
4313
- .tds-date-picker-calendar-cell[data-unavailable]{
4314
- color:var(--t-text-color-disabled);
4315
- text-decoration:line-through;
4316
- cursor:not-allowed;
4317
- }
4319
+ .tds-time-field-segment{
4320
+ padding-inline:1px;
4321
+ font-variant-numeric:tabular-nums;
4322
+ cursor:text;
4323
+ caret-color:transparent;
4324
+ border-radius:var(--t-border-radius-sm);
4325
+ }
4318
4326
 
4319
- .tds-date-picker-calendar-cell[data-disabled]{
4320
- color:var(--t-text-color-disabled);
4321
- cursor:not-allowed;
4327
+ .tds-time-field-segment[data-placeholder]{
4328
+ color:var(--tds-time-field-placeholder-color);
4322
4329
  }
4323
4330
 
4324
- .tds-date-picker-calendar-cell[data-focus-visible]{
4325
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4326
- outline-offset:-2px;
4331
+ .tds-time-field-segment[data-focused]{
4332
+ color:var(--t-text-color-inverted);
4333
+ outline:0;
4334
+ background:var(--t-fill-color-interaction);
4327
4335
  }
4328
4336
 
4329
- .tds-date-picker-calendar-cell[data-focus-visible][data-selected]{
4330
- outline-offset:var(--t-focus-ring-offset);
4331
- }
4337
+ .tds-time-field-segment-separator{
4338
+ padding-inline:0;
4339
+ color:var(--tds-time-field-placeholder-color);
4340
+ }
4332
4341
 
4333
- .tds-date-picker-popover--lg{
4334
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
4342
+ .tds-time-field-description{
4343
+ display:flex;
4344
+ gap:var(--t-spacing-half);
4345
+ align-items:flex-start;
4346
+ margin:0;
4347
+ font-size:var(--t-font-size-sm);
4348
+ line-height:1.35;
4349
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4350
+ cursor:text;
4335
4351
  }
4336
4352
 
4353
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4354
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4355
+ flex-shrink:0;
4356
+ margin-block-start:calc(.5lh - .5em);
4357
+ line-height:1.35;
4358
+ }
4359
+
4337
4360
  .tds-number-stepper{
4338
4361
  --tds-number-stepper-border-color:var(--t-form-border-color);
4339
4362
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);