@planningcenter/tapestry 3.2.3-rc.21 → 3.2.3-rc.23

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