@planningcenter/tapestry 3.2.3-rc.3 → 3.2.3-rc.4

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 (11) hide show
  1. package/dist/components/time-field/TimeField.d.ts +8 -18
  2. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  3. package/dist/components/time-field/TimeField.js +2 -2
  4. package/dist/components/time-field/TimeField.js.map +1 -1
  5. package/dist/components/time-field/index.d.ts +1 -1
  6. package/dist/components/time-field/index.d.ts.map +1 -1
  7. package/dist/reactRender.css +1142 -1142
  8. package/dist/reactRender.css.map +1 -1
  9. package/dist/reactRenderLegacy.css +1142 -1142
  10. package/dist/reactRenderLegacy.css.map +1 -1
  11. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,264 +1,195 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
5
- }
1
+ .tds-checkbox{
2
+ --tds-checkbox-font-size:var(--t-font-size-md);
3
+ --tds-checkbox-cursor:pointer;
4
+ --tds-checkbox-line-height:1.4;
5
+ --tds-checkbox-transition-property:background-color, border-color;
6
6
 
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
7
+ --tds-checkbox-input-size:var(--t-element-size-md);
8
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
10
+ --tds-checkbox-input-background-color:transparent;
25
11
 
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
12
+ --tds-checkbox-input-icon:none;
13
+ --tds-checkbox-input-icon-visibility:hidden;
14
+ --tds-checkbox-input-icon-opacity:0;
15
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
28
16
 
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
17
+ --tds-checkbox-label-color:var(--t-form-color);
32
18
 
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);
19
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
+ --tds-checkbox-description-line-height:1.35;
21
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
22
+ --tds-checkbox-description-invalid-icon-display:none;
35
23
 
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);
24
+ position:relative;
25
+ display:inline-grid;
26
+ grid-template-columns:auto;
27
+ grid-auto-columns:1fr;
28
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
+ line-height:var(--tds-checkbox-line-height);
30
+ cursor:var(--tds-checkbox-cursor);
31
+ -webkit-user-select:none;
32
+ -moz-user-select:none;
33
+ user-select:none;
34
+ }
39
35
 
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);
36
+ .tds-checkbox label{
37
+ grid-area:1 / 2;
38
+ font-size:var(--tds-checkbox-font-size);
39
+ font-weight:var(--t-font-weight-normal);
40
+ color:var(--tds-checkbox-label-color);
41
+ cursor:var(--tds-checkbox-cursor);
45
42
  }
46
43
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
44
+ .tds-checkbox tds-indeterminate{
45
+ display:flex;
49
46
  }
50
47
 
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
- }
48
+ .tds-checkbox input[type="checkbox"]{
49
+ position:relative;
50
+ width:1em;
51
+ height:1em;
52
+ margin:calc((1lh - 1em) / 2) 0 0;
53
+ font-size:var(--tds-checkbox-font-size);
54
+ line-height:inherit;
55
+ -webkit-appearance:none;
56
+ -moz-appearance:none;
57
+ appearance:none;
58
+ cursor:var(--tds-checkbox-cursor);
59
+ background-color:var(--tds-checkbox-input-background-color);
60
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
+ border-radius:var(--tds-checkbox-input-border-radius);
62
+ transition-timing-function:var(--t-ease-in-out);
63
+ transition-duration:var(--t-duration-200);
64
+ transition-property:var(--tds-checkbox-transition-property);
56
65
  }
57
66
 
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
67
+ :is(.tds-checkbox input[type="checkbox"])::before{
68
+ position:absolute;
69
+ top:50%;
70
+ left:50%;
71
+ visibility:var(--tds-checkbox-input-icon-visibility);
72
+ width:100%;
73
+ height:100%;
74
+ content:"";
75
+ background-color:var(--tds-checkbox-input-icon-fill);
76
+ border-radius:var(--tds-checkbox-input-border-radius);
77
+ opacity:var(--tds-checkbox-input-icon-opacity);
78
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
79
+ mask-image:var(--tds-checkbox-input-icon);
80
+ -webkit-mask-repeat:no-repeat;
81
+ mask-repeat:no-repeat;
82
+ -webkit-mask-size:contain;
83
+ mask-size:contain;
84
+ transform:translate(-50%, -50%);
75
85
  }
76
- }
77
- }
78
86
 
79
- .tds-page-header{
80
- display:flex;
81
- flex-direction:column;
82
- padding-top:var(--tds-page-header-padding-y);
83
- color:var(--tds-page-header-color);
84
- background:var(--tds-page-header-background-color);
85
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
86
- }
87
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
+ }
87
91
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
92
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
+ outline:var(--t-focus-ring-outline);
94
+ outline-offset:var(--t-focus-ring-offset);
95
+ }
96
+
97
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
98
+ pointer-events:none;
99
+ }
100
+
101
+ @media (prefers-reduced-motion: reduce){
102
+
103
+ .tds-checkbox input[type="checkbox"]{
104
+ --tds-checkbox-transition-property:none;
90
105
  }
106
+ }
91
107
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
108
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
+ --tds-checkbox-input-icon-visibility:visible;
112
+ --tds-checkbox-input-icon-opacity:1;
94
113
  }
95
114
 
96
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
- width:100%;
115
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
+ }
119
+
120
+ .tds-checkbox:has(input:checked){
121
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
98
122
  }
99
123
 
100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
101
- display:flex;
102
- flex-flow:row wrap;
103
- gap:var(--t-spacing-half) var(--t-spacing-1);
104
- align-items:flex-start;
105
- justify-content:flex-start;
106
- min-width:0;
124
+ .tds-checkbox:has(input:indeterminate){
125
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
107
126
  }
108
127
 
109
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
- display:flex;
111
- gap:var(--tds-page-header-nav-gap);
112
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
- margin:0 0 -1px;
114
- overflow:auto;
115
- list-style:none;
116
- background:var(--tds-page-header-nav-background);
128
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
131
+ --tds-checkbox-description-invalid-icon-display:inline-block;
132
+ }
133
+
134
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
117
137
  }
118
138
 
119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
- position:relative;
121
- display:inline-flex;
122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
- font-size:var(--t-font-size-sm);
124
- line-height:22px;
125
- color:var(--tds-page-header-nav-item-color);
126
- white-space:nowrap;
127
- text-decoration:none;
128
- -webkit-appearance:none;
129
- -moz-appearance:none;
130
- appearance:none;
131
- cursor:pointer;
132
- outline-offset:-2px;
133
- background-color:var(--tds-page-header-nav-item-background-color);
134
- background-clip:padding-box;
135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
+ :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{
140
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
138
142
  }
139
143
 
140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ :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){
145
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
145
147
  }
146
148
 
147
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
- }
149
+ .tds-checkbox:has(input:required) label::after{
150
+ margin-left:.25ch;
151
+ color:var(--t-text-color-status-error);
152
+ content:"*";
153
+ }
152
154
 
153
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
- background-color:var(--tds-page-header-nav-item-background-color-active);
155
- border-color:var(--tds-page-header-nav-item-border-color-active);
156
- }
155
+ .tds-checkbox:has(input:disabled){
156
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
157
158
 
158
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
- color:var(--tds-page-header-nav-item-color-disabled);
160
- cursor:not-allowed;
161
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
- opacity:1;
163
- }
159
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
160
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
161
+ --tds-checkbox-cursor:not-allowed;
162
+ }
164
163
 
165
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
- position:relative;
164
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
167
166
  }
168
167
 
169
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
172
- }
173
-
174
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
175
- position:absolute;
176
- top:-5px;
177
- right:-2px;
178
- width:10px;
179
- height:10px;
180
- content:"";
181
- background:var(--tds-page-header-nav-item-indicator-color);
182
- border-radius:50%;
183
- }
184
-
185
- @media (prefers-reduced-motion: no-preference){
186
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
- animation:indicator-pulse 1.25s ease infinite;
188
- }
189
- }
190
-
191
- .tds-page-header__title-bar{
168
+ .tds-checkbox-description{
192
169
  display:flex;
193
- flex-direction:column;
194
- gap:var(--t-spacing-2) var(--t-spacing-1);
170
+ grid-area:2 / 2;
171
+ gap:var(--t-spacing-half);
195
172
  align-items:flex-start;
196
- justify-content:space-between;
197
- padding:0 var(--tds-page-header-padding-x);
198
- }
199
-
200
- .tds-page-header--profile > .tds-page-header__title-bar{
201
- align-items:center;
202
- }
203
-
204
- .tds-page-header__primary{
205
- width:100%;
206
- }
207
-
208
- .tds-page-header__primary h1{
209
- margin:0;
210
- font-size:var(--tds-page-header-headline-font-size);
211
- font-weight:var(--t-font-weight-normal);
212
- line-height:32px;
213
- color:var(--tds-page-header-headline-color);
214
- overflow-wrap:break-word;
215
- }
216
-
217
- @media (min-width: 960px){
218
- .tds-page-header__primary{
219
- flex:1 1 max-content;
220
- width:auto;
221
- min-width:0;
222
- max-width:100%;
223
- }
224
-
225
- .tds-page-header__title-bar,
226
- .tds-page-header--profile .tds-page-header__title-bar{
227
- flex-flow:row nowrap;
228
- row-gap:12px;
229
- align-items:flex-start;
230
- }
231
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
- width:auto;
233
- }
234
-
235
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
- justify-content:flex-end;
237
- }
238
- }
239
-
240
- .tds-page-header-phone,
241
- .tds-page-header-email{
242
- color:var(--tds-page-header-color);
243
- white-space:nowrap;
244
- }
245
-
246
- .tds-page-header-email{
247
- max-width:100%;
248
- overflow:hidden;
249
- text-overflow:ellipsis;
173
+ margin:0;
174
+ font-size:var(--tds-checkbox-description-font-size);
175
+ line-height:var(--tds-checkbox-description-line-height);
176
+ color:var(--tds-checkbox-description-color);
177
+ cursor:text;
250
178
  }
251
179
 
252
- @keyframes indicator-pulse{
253
- 0%{
254
- opacity:.3;
255
- transform:scale(.9);
180
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
181
+ display:var(--tds-checkbox-description-invalid-icon-display);
182
+ flex-shrink:0;
183
+ margin-top:calc(.5lh - .5em);
184
+ line-height:var(--tds-checkbox-description-line-height);
256
185
  }
257
186
 
258
- 100%{
259
- opacity:0;
260
- transform:scale(1.75);
261
- }
187
+ .tds-checkbox--sm{
188
+ --tds-checkbox-line-height:1.35;
189
+ --tds-checkbox-input-size:var(--t-element-size-sm);
190
+ --tds-checkbox-font-size:var(--t-font-size-sm);
191
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
192
+ --tds-checkbox-description-line-height:1.3;
262
193
  }
263
194
 
264
195
 
@@ -647,332 +578,111 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
647
578
  }
648
579
  }
649
580
 
650
- .tds-radio{
651
- --tds-radio-font-size:var(--t-font-size-md);
652
- --tds-radio-cursor:pointer;
653
- --tds-radio-line-height:1.4;
654
- --tds-radio-transition-property:border-width;
655
-
656
- --tds-radio-input-size:var(--t-element-size-md);
657
- --tds-radio-input-border-radius:var(--t-border-radius-round);
658
- --tds-radio-input-border-color:var(--t-form-border-color);
659
- --tds-radio-input-border-width:var(--t-form-border-width);
660
- --tds-radio-input-background-color:transparent;
661
-
662
- --tds-radio-label-color:var(--t-form-color);
581
+ .tds-input:has(textarea){
582
+ --tds-input-padding-block:6px;
583
+ --tds-input-resizer-size:var(--t-element-size-sm);
584
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
585
+ }
663
586
 
664
- --tds-radio-description-font-size:var(--t-font-size-sm);
665
- --tds-radio-description-line-height:1.35;
666
- --tds-radio-description-color:var(--t-text-color-secondary);
587
+ @supports (x: attr(x type(*))){
667
588
 
668
- position:relative;
669
- display:inline-grid;
670
- grid-template-columns:auto;
671
- grid-auto-columns:1fr;
672
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
673
- line-height:var(--tds-radio-line-height);
674
- cursor:var(--tds-radio-cursor);
675
- -webkit-user-select:none;
676
- -moz-user-select:none;
677
- user-select:none;
589
+ .tds-input:has(textarea){
590
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
678
591
  }
679
-
680
- .tds-radio label{
681
- grid-area:1 / 2;
682
- font-size:var(--tds-radio-font-size);
683
- font-weight:var(--t-font-weight-normal);
684
- color:var(--tds-radio-label-color);
685
- cursor:var(--tds-radio-cursor);
686
592
  }
687
593
 
688
- .tds-radio input[type="radio"]{
689
- position:relative;
690
- width:1em;
691
- height:1em;
692
- margin:calc((1lh - 1em) / 2) 0 0;
693
- font-size:var(--tds-radio-font-size);
694
- line-height:inherit;
695
- -webkit-appearance:none;
696
- -moz-appearance:none;
697
- appearance:none;
698
- cursor:var(--tds-radio-cursor);
699
- background-color:var(--tds-radio-input-background-color);
700
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
701
- border-radius:var(--tds-radio-input-border-radius);
702
- transition-timing-function:var(--t-ease-in-out);
703
- transition-duration:var(--t-duration-200);
704
- transition-property:var(--tds-radio-transition-property);
705
- }
594
+ .tds-input.tds-textarea--resize-vertical textarea{
595
+ resize:vertical;
596
+ }
706
597
 
707
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
708
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
709
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
598
+ .tds-input.tds-textarea--resize-none textarea{
599
+ resize:none;
710
600
  }
711
601
 
712
- :is(.tds-radio input[type="radio"]):focus-visible{
713
- outline:var(--t-focus-ring-outline);
714
- outline-offset:var(--t-focus-ring-offset);
602
+ .tds-input.tds-textarea--resize-auto textarea{
603
+ resize:vertical;
715
604
  }
716
605
 
717
- :is(.tds-radio input[type="radio"]):disabled{
718
- pointer-events:none;
606
+ @supports (field-sizing: content){
607
+ .tds-input.tds-textarea--resize-auto textarea{
608
+ field-sizing:content;
609
+ resize:none;
610
+ }
719
611
  }
720
612
 
721
- @media (prefers-reduced-motion: reduce){
613
+ .tds-input textarea{
614
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
615
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
616
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
617
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
618
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
619
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
620
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
621
+ --tds-input-scrollbar-thumb-border-radius:999px;
622
+ --tds-input-scrollbar-thumb-border-width:3px;
623
+ --tds-input-scrollbar-track-margin-block:.125rem;
624
+ scrollbar-color:initial;
625
+ transition-timing-function:var(--t-ease-in-out);
626
+ transition-duration:var(--t-duration-200);
627
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
628
+ }
722
629
 
723
- .tds-radio input[type="radio"]{
724
- --tds-radio-transition-property:none;
725
- }
630
+ @media (pointer: fine){
631
+ :is(.tds-input textarea)::-webkit-scrollbar{
632
+ width:12px;
633
+ height:12px;
634
+ cursor:default;
726
635
  }
727
636
 
728
- .tds-radio:has(input:checked){
729
- --tds-radio-input-background-color:var(--t-form-background-color);
730
- --tds-radio-input-border-color:var(--t-border-color-control-info);
731
- --tds-radio-input-border-width:4px;
732
- }
637
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
638
+ cursor:default;
639
+ background:var(--tds-input-scrollbar-thumb-color);
640
+ background-clip:content-box;
641
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
642
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
643
+ }
733
644
 
734
- .tds-radio:has(input:checked) input:hover:not(:disabled){
735
- --tds-radio-input-background-color:var(--t-form-background-color);
736
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
645
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
646
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
737
647
  }
738
648
 
739
- .tds-radio:has(input:user-invalid){
740
- --tds-radio-input-border-color:var(--t-form-border-color-error);
741
- }
649
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
650
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
651
+ }
742
652
 
743
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
744
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
745
- --tds-radio-input-background-color:var(--t-form-background-color-error);
653
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
654
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
746
655
  }
747
656
 
748
- .tds-radio:has(input:disabled){
749
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
750
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
657
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
658
+ background:var(--tds-input-scrollbar-surface-color);
659
+ }
751
660
 
752
- --tds-radio-label-color:var(--t-form-color-disabled);
753
- --tds-radio-description-color:var(--t-form-color-disabled);
754
- --tds-radio-cursor:not-allowed;
755
- }
756
-
757
- .tds-radio:has(input:disabled) input:checked{
758
- --tds-radio-input-background-color:var(--t-form-background-color);
759
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
760
- }
761
-
762
- .tds-radio-description{
763
- display:flex;
764
- grid-area:2 / 2;
765
- gap:var(--t-spacing-half);
766
- align-items:flex-start;
767
- margin:0;
768
- font-size:var(--tds-radio-description-font-size);
769
- line-height:var(--tds-radio-description-line-height);
770
- color:var(--tds-radio-description-color);
771
- cursor:text;
772
- }
773
-
774
- .tds-radio--sm{
775
- --tds-radio-line-height:1.35;
776
- --tds-radio-input-size:var(--t-element-size-sm);
777
- --tds-radio-font-size:var(--t-font-size-sm);
778
- --tds-radio-description-font-size:var(--t-font-size-xs);
779
- --tds-radio-description-line-height:1.3;
780
- }
781
-
782
- .tds-checkbox{
783
- --tds-checkbox-font-size:var(--t-font-size-md);
784
- --tds-checkbox-cursor:pointer;
785
- --tds-checkbox-line-height:1.4;
786
- --tds-checkbox-transition-property:background-color, border-color;
787
-
788
- --tds-checkbox-input-size:var(--t-element-size-md);
789
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
790
- --tds-checkbox-input-border-color:var(--t-form-border-color);
791
- --tds-checkbox-input-background-color:transparent;
792
-
793
- --tds-checkbox-input-icon:none;
794
- --tds-checkbox-input-icon-visibility:hidden;
795
- --tds-checkbox-input-icon-opacity:0;
796
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
797
-
798
- --tds-checkbox-label-color:var(--t-form-color);
799
-
800
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
801
- --tds-checkbox-description-line-height:1.35;
802
- --tds-checkbox-description-color:var(--t-text-color-secondary);
803
- --tds-checkbox-description-invalid-icon-display:none;
804
-
805
- position:relative;
806
- display:inline-grid;
807
- grid-template-columns:auto;
808
- grid-auto-columns:1fr;
809
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
810
- line-height:var(--tds-checkbox-line-height);
811
- cursor:var(--tds-checkbox-cursor);
812
- -webkit-user-select:none;
813
- -moz-user-select:none;
814
- user-select:none;
815
- }
816
-
817
- .tds-checkbox label{
818
- grid-area:1 / 2;
819
- font-size:var(--tds-checkbox-font-size);
820
- font-weight:var(--t-font-weight-normal);
821
- color:var(--tds-checkbox-label-color);
822
- cursor:var(--tds-checkbox-cursor);
823
- }
824
-
825
- .tds-checkbox tds-indeterminate{
826
- display:flex;
827
- }
828
-
829
- .tds-checkbox input[type="checkbox"]{
830
- position:relative;
831
- width:1em;
832
- height:1em;
833
- margin:calc((1lh - 1em) / 2) 0 0;
834
- font-size:var(--tds-checkbox-font-size);
835
- line-height:inherit;
836
- -webkit-appearance:none;
837
- -moz-appearance:none;
838
- appearance:none;
839
- cursor:var(--tds-checkbox-cursor);
840
- background-color:var(--tds-checkbox-input-background-color);
841
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
842
- border-radius:var(--tds-checkbox-input-border-radius);
843
- transition-timing-function:var(--t-ease-in-out);
844
- transition-duration:var(--t-duration-200);
845
- transition-property:var(--tds-checkbox-transition-property);
846
- }
847
-
848
- :is(.tds-checkbox input[type="checkbox"])::before{
849
- position:absolute;
850
- top:50%;
851
- left:50%;
852
- visibility:var(--tds-checkbox-input-icon-visibility);
853
- width:100%;
854
- height:100%;
855
- content:"";
856
- background-color:var(--tds-checkbox-input-icon-fill);
857
- border-radius:var(--tds-checkbox-input-border-radius);
858
- opacity:var(--tds-checkbox-input-icon-opacity);
859
- -webkit-mask-image:var(--tds-checkbox-input-icon);
860
- mask-image:var(--tds-checkbox-input-icon);
861
- -webkit-mask-repeat:no-repeat;
862
- mask-repeat:no-repeat;
863
- -webkit-mask-size:contain;
864
- mask-size:contain;
865
- transform:translate(-50%, -50%);
866
- }
867
-
868
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
869
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
870
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
871
- }
872
-
873
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
874
- outline:var(--t-focus-ring-outline);
875
- outline-offset:var(--t-focus-ring-offset);
876
- }
877
-
878
- :is(.tds-checkbox input[type="checkbox"]):disabled{
879
- pointer-events:none;
880
- }
881
-
882
- @media (prefers-reduced-motion: reduce){
883
-
884
- .tds-checkbox input[type="checkbox"]{
885
- --tds-checkbox-transition-property:none;
886
- }
887
- }
888
-
889
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
890
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
891
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
892
- --tds-checkbox-input-icon-visibility:visible;
893
- --tds-checkbox-input-icon-opacity:1;
894
- }
895
-
896
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
897
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
898
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
899
- }
900
-
901
- .tds-checkbox:has(input:checked){
902
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
903
- }
904
-
905
- .tds-checkbox:has(input:indeterminate){
906
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
907
- }
908
-
909
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
910
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
911
- --tds-checkbox-description-color:var(--t-text-color-status-error);
912
- --tds-checkbox-description-invalid-icon-display:inline-block;
913
- }
914
-
915
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
916
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
917
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
661
+ :is(.tds-input textarea)::-webkit-resizer{
662
+ background:var(--tds-input-resizer-icon) no-repeat;
663
+ background-position:right bottom;
664
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
918
665
  }
919
666
 
920
- :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{
921
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
922
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
667
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
668
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
669
+ cursor:default;
923
670
  }
924
671
 
925
- :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){
926
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
927
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
672
+ @supports (-moz-appearance: none){
673
+ :is(.tds-input textarea){
674
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
675
+ scrollbar-width:thin;
928
676
  }
929
677
 
930
- .tds-checkbox:has(input:required) label::after{
931
- margin-left:.25ch;
932
- color:var(--t-text-color-status-error);
933
- content:"*";
934
- }
935
-
936
- .tds-checkbox:has(input:disabled){
937
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
938
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
939
-
940
- --tds-checkbox-label-color:var(--t-form-color-disabled);
941
- --tds-checkbox-description-color:var(--t-form-color-disabled);
942
- --tds-checkbox-cursor:not-allowed;
943
- }
944
-
945
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
946
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
678
+ @media (hover){
679
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
680
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
681
+ }
682
+ }
947
683
  }
948
-
949
- .tds-checkbox-description{
950
- display:flex;
951
- grid-area:2 / 2;
952
- gap:var(--t-spacing-half);
953
- align-items:flex-start;
954
- margin:0;
955
- font-size:var(--tds-checkbox-description-font-size);
956
- line-height:var(--tds-checkbox-description-line-height);
957
- color:var(--tds-checkbox-description-color);
958
- cursor:text;
959
- }
960
-
961
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
962
- display:var(--tds-checkbox-description-invalid-icon-display);
963
- flex-shrink:0;
964
- margin-top:calc(.5lh - .5em);
965
- line-height:var(--tds-checkbox-description-line-height);
966
684
  }
967
685
 
968
- .tds-checkbox--sm{
969
- --tds-checkbox-line-height:1.35;
970
- --tds-checkbox-input-size:var(--t-element-size-sm);
971
- --tds-checkbox-font-size:var(--t-font-size-sm);
972
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
973
- --tds-checkbox-description-line-height:1.3;
974
- }
975
-
976
686
  .tds-radio-group{
977
687
  --tds-radio-group-font-size:var(--t-font-size-md);
978
688
  --tds-radio-group-line-height:1.4;
@@ -1060,125 +770,20 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1060
770
  --tds-radio-group-description-line-height:1.3;
1061
771
  }
1062
772
 
1063
- .tds-input:has(textarea){
1064
- --tds-input-padding-block:6px;
1065
- --tds-input-resizer-size:var(--t-element-size-sm);
1066
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1067
- }
1068
-
1069
- @supports (x: attr(x type(*))){
773
+ .tds-toggle-switch{
774
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
775
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
776
+ --tds-toggle-switch-cursor:pointer;
777
+ --tds-toggle-switch-display:inline-grid;
778
+ --tds-toggle-switch-line-height:1.4;
1070
779
 
1071
- .tds-input:has(textarea){
1072
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1073
- }
1074
- }
780
+ --tds-toggle-switch-label-color:var(--t-form-color);
1075
781
 
1076
- .tds-input.tds-textarea--resize-vertical textarea{
1077
- resize:vertical;
1078
- }
1079
-
1080
- .tds-input.tds-textarea--resize-none textarea{
1081
- resize:none;
1082
- }
1083
-
1084
- .tds-input.tds-textarea--resize-auto textarea{
1085
- resize:vertical;
1086
- }
1087
-
1088
- @supports (field-sizing: content){
1089
- .tds-input.tds-textarea--resize-auto textarea{
1090
- field-sizing:content;
1091
- resize:none;
1092
- }
1093
- }
1094
-
1095
- .tds-input textarea{
1096
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1097
- --tds-input-scrollbar-thumb-color-hidden:transparent;
1098
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1099
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1100
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1101
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1102
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1103
- --tds-input-scrollbar-thumb-border-radius:999px;
1104
- --tds-input-scrollbar-thumb-border-width:3px;
1105
- --tds-input-scrollbar-track-margin-block:.125rem;
1106
- scrollbar-color:initial;
1107
- transition-timing-function:var(--t-ease-in-out);
1108
- transition-duration:var(--t-duration-200);
1109
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1110
- }
1111
-
1112
- @media (pointer: fine){
1113
- :is(.tds-input textarea)::-webkit-scrollbar{
1114
- width:12px;
1115
- height:12px;
1116
- cursor:default;
1117
- }
1118
-
1119
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1120
- cursor:default;
1121
- background:var(--tds-input-scrollbar-thumb-color);
1122
- background-clip:content-box;
1123
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1124
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1125
- }
1126
-
1127
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1128
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1129
- }
1130
-
1131
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1132
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1133
- }
1134
-
1135
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1136
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1137
- }
1138
-
1139
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1140
- background:var(--tds-input-scrollbar-surface-color);
1141
- }
1142
-
1143
- :is(.tds-input textarea)::-webkit-resizer{
1144
- background:var(--tds-input-resizer-icon) no-repeat;
1145
- background-position:right bottom;
1146
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1147
- }
1148
-
1149
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1150
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1151
- cursor:default;
1152
- }
1153
-
1154
- @supports (-moz-appearance: none){
1155
- :is(.tds-input textarea){
1156
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1157
- scrollbar-width:thin;
1158
- }
1159
-
1160
- @media (hover){
1161
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1162
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1163
- }
1164
- }
1165
- }
1166
- }
1167
-
1168
- .tds-toggle-switch{
1169
- --tds-toggle-switch-font-size:var(--t-font-size-md);
1170
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
1171
- --tds-toggle-switch-cursor:pointer;
1172
- --tds-toggle-switch-display:inline-grid;
1173
- --tds-toggle-switch-line-height:1.4;
1174
-
1175
- --tds-toggle-switch-label-color:var(--t-form-color);
1176
-
1177
- --tds-toggle-switch-track-width:var(--t-container-size-md);
1178
- --tds-toggle-switch-track-outline:none;
1179
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
1180
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
1181
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
782
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
783
+ --tds-toggle-switch-track-outline:none;
784
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
785
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
786
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
1182
787
 
1183
788
  --tds-toggle-switch-thumb-size:var(--t-element-size-md);
1184
789
  --tds-toggle-switch-thumb-transform:translateX(0);
@@ -1261,49 +866,444 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1261
866
  transition:var(--tds-toggle-switch-track-transition);
1262
867
  }
1263
868
 
1264
- .tds-toggle-switch-track::before{
1265
- position:absolute;
1266
- top:var(--t-spacing-fourth);
1267
- left:var(--t-spacing-fourth);
1268
- width:var(--tds-toggle-switch-thumb-size);
1269
- height:var(--tds-toggle-switch-thumb-size);
1270
- content:"";
1271
- background-color:#fff;
1272
- border-radius:var(--t-border-radius-round);
1273
- transform:var(--tds-toggle-switch-thumb-transform);
1274
- transition:var(--tds-toggle-switch-thumb-transition);
869
+ .tds-toggle-switch-track::before{
870
+ position:absolute;
871
+ top:var(--t-spacing-fourth);
872
+ left:var(--t-spacing-fourth);
873
+ width:var(--tds-toggle-switch-thumb-size);
874
+ height:var(--tds-toggle-switch-thumb-size);
875
+ content:"";
876
+ background-color:#fff;
877
+ border-radius:var(--t-border-radius-round);
878
+ transform:var(--tds-toggle-switch-thumb-transform);
879
+ transition:var(--tds-toggle-switch-thumb-transition);
880
+ }
881
+
882
+ @media (prefers-reduced-motion: reduce){
883
+
884
+ .tds-toggle-switch-track{
885
+ --tds-toggle-switch-track-transition:none;
886
+ --tds-toggle-switch-thumb-transition:none;
887
+ }
888
+ }
889
+
890
+ .tds-toggle-switch-description{
891
+ display:flex;
892
+ grid-area:2 / 2;
893
+ align-items:flex-start;
894
+ margin:0;
895
+ font-size:var(--tds-toggle-switch-description-font-size);
896
+ line-height:var(--tds-toggle-switch-description-line-height);
897
+ color:var(--tds-toggle-switch-description-color);
898
+ cursor:text;
899
+ }
900
+
901
+ .tds-toggle-switch--sm{
902
+ --tds-toggle-switch-font-size:var(--t-font-size-sm);
903
+ --tds-toggle-switch-line-height:1.35;
904
+ --tds-toggle-switch-track-height:var(--t-element-size-lg);
905
+ --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
906
+ --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
907
+ --tds-toggle-switch-description-line-height:1.3;
908
+ }
909
+
910
+ .tds-toggle-switch--hide-label{
911
+ --tds-toggle-switch-display:inline-flex;
912
+ }
913
+
914
+ .tds-radio{
915
+ --tds-radio-font-size:var(--t-font-size-md);
916
+ --tds-radio-cursor:pointer;
917
+ --tds-radio-line-height:1.4;
918
+ --tds-radio-transition-property:border-width;
919
+
920
+ --tds-radio-input-size:var(--t-element-size-md);
921
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
922
+ --tds-radio-input-border-color:var(--t-form-border-color);
923
+ --tds-radio-input-border-width:var(--t-form-border-width);
924
+ --tds-radio-input-background-color:transparent;
925
+
926
+ --tds-radio-label-color:var(--t-form-color);
927
+
928
+ --tds-radio-description-font-size:var(--t-font-size-sm);
929
+ --tds-radio-description-line-height:1.35;
930
+ --tds-radio-description-color:var(--t-text-color-secondary);
931
+
932
+ position:relative;
933
+ display:inline-grid;
934
+ grid-template-columns:auto;
935
+ grid-auto-columns:1fr;
936
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
937
+ line-height:var(--tds-radio-line-height);
938
+ cursor:var(--tds-radio-cursor);
939
+ -webkit-user-select:none;
940
+ -moz-user-select:none;
941
+ user-select:none;
942
+ }
943
+
944
+ .tds-radio label{
945
+ grid-area:1 / 2;
946
+ font-size:var(--tds-radio-font-size);
947
+ font-weight:var(--t-font-weight-normal);
948
+ color:var(--tds-radio-label-color);
949
+ cursor:var(--tds-radio-cursor);
950
+ }
951
+
952
+ .tds-radio input[type="radio"]{
953
+ position:relative;
954
+ width:1em;
955
+ height:1em;
956
+ margin:calc((1lh - 1em) / 2) 0 0;
957
+ font-size:var(--tds-radio-font-size);
958
+ line-height:inherit;
959
+ -webkit-appearance:none;
960
+ -moz-appearance:none;
961
+ appearance:none;
962
+ cursor:var(--tds-radio-cursor);
963
+ background-color:var(--tds-radio-input-background-color);
964
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
965
+ border-radius:var(--tds-radio-input-border-radius);
966
+ transition-timing-function:var(--t-ease-in-out);
967
+ transition-duration:var(--t-duration-200);
968
+ transition-property:var(--tds-radio-transition-property);
969
+ }
970
+
971
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
972
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
973
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
974
+ }
975
+
976
+ :is(.tds-radio input[type="radio"]):focus-visible{
977
+ outline:var(--t-focus-ring-outline);
978
+ outline-offset:var(--t-focus-ring-offset);
979
+ }
980
+
981
+ :is(.tds-radio input[type="radio"]):disabled{
982
+ pointer-events:none;
983
+ }
984
+
985
+ @media (prefers-reduced-motion: reduce){
986
+
987
+ .tds-radio input[type="radio"]{
988
+ --tds-radio-transition-property:none;
989
+ }
990
+ }
991
+
992
+ .tds-radio:has(input:checked){
993
+ --tds-radio-input-background-color:var(--t-form-background-color);
994
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
995
+ --tds-radio-input-border-width:4px;
996
+ }
997
+
998
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
999
+ --tds-radio-input-background-color:var(--t-form-background-color);
1000
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1001
+ }
1002
+
1003
+ .tds-radio:has(input:user-invalid){
1004
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1005
+ }
1006
+
1007
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1008
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1009
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1010
+ }
1011
+
1012
+ .tds-radio:has(input:disabled){
1013
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1014
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1015
+
1016
+ --tds-radio-label-color:var(--t-form-color-disabled);
1017
+ --tds-radio-description-color:var(--t-form-color-disabled);
1018
+ --tds-radio-cursor:not-allowed;
1019
+ }
1020
+
1021
+ .tds-radio:has(input:disabled) input:checked{
1022
+ --tds-radio-input-background-color:var(--t-form-background-color);
1023
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1024
+ }
1025
+
1026
+ .tds-radio-description{
1027
+ display:flex;
1028
+ grid-area:2 / 2;
1029
+ gap:var(--t-spacing-half);
1030
+ align-items:flex-start;
1031
+ margin:0;
1032
+ font-size:var(--tds-radio-description-font-size);
1033
+ line-height:var(--tds-radio-description-line-height);
1034
+ color:var(--tds-radio-description-color);
1035
+ cursor:text;
1036
+ }
1037
+
1038
+ .tds-radio--sm{
1039
+ --tds-radio-line-height:1.35;
1040
+ --tds-radio-input-size:var(--t-element-size-sm);
1041
+ --tds-radio-font-size:var(--t-font-size-sm);
1042
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1043
+ --tds-radio-description-line-height:1.3;
1044
+ }
1045
+
1046
+ @layer t-critical{
1047
+ tds-page-header:not(.hydrated){
1048
+ display:none;
1049
+ }
1050
+ }
1051
+
1052
+ @layer t-component{
1053
+ .tds-page-header{
1054
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1055
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1056
+ --tds-page-header-color:var(--t-text-color);
1057
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1058
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1059
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1060
+ --tds-page-header-padding-x:var(--t-spacing-2);
1061
+ --tds-page-header-padding-y:var(--t-spacing-2);
1062
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1063
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1064
+ --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%);
1065
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1066
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1067
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1068
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1069
+ --tds-page-header-nav-item-border-width:1px;
1070
+
1071
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1072
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1073
+
1074
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1075
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1076
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1077
+
1078
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1079
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1080
+
1081
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1082
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1083
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1084
+
1085
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1086
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1087
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1088
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1089
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1090
+ }
1091
+
1092
+ .tds-page-header--profile{
1093
+ --tds-page-header-padding-y:20px;
1094
+ }
1095
+
1096
+ @supports (color: light-dark(#fff, #000)){
1097
+ .tds-page-header{
1098
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1099
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1100
+ }
1101
+ }
1102
+
1103
+ @media (min-width: 600px){
1104
+ .tds-page-header{
1105
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1106
+ --tds-page-header-color:var(--t-text-color-secondary);
1107
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1108
+ --tds-page-header-padding-x:var(--t-spacing-3);
1109
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1110
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1111
+ --tds-page-header-nav-background:transparent;
1112
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1113
+ --tds-page-header-nav-item-border-width:1px;
1114
+ --tds-page-header-nav-item-color:var(--t-text-color);
1115
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1116
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1117
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1118
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1119
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1120
+ }
1121
+ }
1122
+ }
1123
+
1124
+ .tds-page-header{
1125
+ display:flex;
1126
+ flex-direction:column;
1127
+ padding-top:var(--tds-page-header-padding-y);
1128
+ color:var(--tds-page-header-color);
1129
+ background:var(--tds-page-header-background-color);
1130
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1131
+ }
1132
+
1133
+ .tds-page-header:not(.has-nav){
1134
+ padding-bottom:var(--tds-page-header-padding-y);
1135
+ }
1136
+
1137
+ .tds-page-header.inactive{
1138
+ background:var(--tds-page-header-background-color-inactive);
1139
+ }
1140
+
1141
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1142
+ width:100%;
1143
+ }
1144
+
1145
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1146
+ display:flex;
1147
+ flex-flow:row wrap;
1148
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1149
+ align-items:flex-start;
1150
+ justify-content:flex-start;
1151
+ min-width:0;
1152
+ }
1153
+
1154
+ :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{
1155
+ display:flex;
1156
+ gap:var(--tds-page-header-nav-gap);
1157
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1158
+ margin:0 0 -1px;
1159
+ overflow:auto;
1160
+ list-style:none;
1161
+ background:var(--tds-page-header-nav-background);
1162
+ }
1163
+
1164
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1165
+ position:relative;
1166
+ display:inline-flex;
1167
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1168
+ font-size:var(--t-font-size-sm);
1169
+ line-height:22px;
1170
+ color:var(--tds-page-header-nav-item-color);
1171
+ white-space:nowrap;
1172
+ text-decoration:none;
1173
+ -webkit-appearance:none;
1174
+ -moz-appearance:none;
1175
+ appearance:none;
1176
+ cursor:pointer;
1177
+ outline-offset:-2px;
1178
+ background-color:var(--tds-page-header-nav-item-background-color);
1179
+ background-clip:padding-box;
1180
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1181
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1182
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1183
+ }
1184
+
1185
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1186
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1187
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1188
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1189
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1190
+ }
1191
+
1192
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1193
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1194
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1195
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1196
+ }
1197
+
1198
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1199
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1200
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1201
+ }
1202
+
1203
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1204
+ color:var(--tds-page-header-nav-item-color-disabled);
1205
+ cursor:not-allowed;
1206
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
+ opacity:1;
1208
+ }
1209
+
1210
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1211
+ position:relative;
1212
+ }
1213
+
1214
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1215
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1216
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1217
+ }
1218
+
1219
+ :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{
1220
+ position:absolute;
1221
+ top:-5px;
1222
+ right:-2px;
1223
+ width:10px;
1224
+ height:10px;
1225
+ content:"";
1226
+ background:var(--tds-page-header-nav-item-indicator-color);
1227
+ border-radius:50%;
1228
+ }
1229
+
1230
+ @media (prefers-reduced-motion: no-preference){
1231
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1232
+ animation:indicator-pulse 1.25s ease infinite;
1233
+ }
1234
+ }
1235
+
1236
+ .tds-page-header__title-bar{
1237
+ display:flex;
1238
+ flex-direction:column;
1239
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1240
+ align-items:flex-start;
1241
+ justify-content:space-between;
1242
+ padding:0 var(--tds-page-header-padding-x);
1243
+ }
1244
+
1245
+ .tds-page-header--profile > .tds-page-header__title-bar{
1246
+ align-items:center;
1247
+ }
1248
+
1249
+ .tds-page-header__primary{
1250
+ width:100%;
1251
+ }
1252
+
1253
+ .tds-page-header__primary h1{
1254
+ margin:0;
1255
+ font-size:var(--tds-page-header-headline-font-size);
1256
+ font-weight:var(--t-font-weight-normal);
1257
+ line-height:32px;
1258
+ color:var(--tds-page-header-headline-color);
1259
+ overflow-wrap:break-word;
1260
+ }
1261
+
1262
+ @media (min-width: 960px){
1263
+ .tds-page-header__primary{
1264
+ flex:1 1 max-content;
1265
+ width:auto;
1266
+ min-width:0;
1267
+ max-width:100%;
1275
1268
  }
1276
1269
 
1277
- @media (prefers-reduced-motion: reduce){
1270
+ .tds-page-header__title-bar,
1271
+ .tds-page-header--profile .tds-page-header__title-bar{
1272
+ flex-flow:row nowrap;
1273
+ row-gap:12px;
1274
+ align-items:flex-start;
1275
+ }
1276
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1277
+ width:auto;
1278
+ }
1278
1279
 
1279
- .tds-toggle-switch-track{
1280
- --tds-toggle-switch-track-transition:none;
1281
- --tds-toggle-switch-thumb-transition:none;
1280
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1281
+ justify-content:flex-end;
1282
+ }
1282
1283
  }
1283
- }
1284
1284
 
1285
- .tds-toggle-switch-description{
1286
- display:flex;
1287
- grid-area:2 / 2;
1288
- align-items:flex-start;
1289
- margin:0;
1290
- font-size:var(--tds-toggle-switch-description-font-size);
1291
- line-height:var(--tds-toggle-switch-description-line-height);
1292
- color:var(--tds-toggle-switch-description-color);
1293
- cursor:text;
1285
+ .tds-page-header-phone,
1286
+ .tds-page-header-email{
1287
+ color:var(--tds-page-header-color);
1288
+ white-space:nowrap;
1294
1289
  }
1295
1290
 
1296
- .tds-toggle-switch--sm{
1297
- --tds-toggle-switch-font-size:var(--t-font-size-sm);
1298
- --tds-toggle-switch-line-height:1.35;
1299
- --tds-toggle-switch-track-height:var(--t-element-size-lg);
1300
- --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
1301
- --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
1302
- --tds-toggle-switch-description-line-height:1.3;
1291
+ .tds-page-header-email{
1292
+ max-width:100%;
1293
+ overflow:hidden;
1294
+ text-overflow:ellipsis;
1303
1295
  }
1304
1296
 
1305
- .tds-toggle-switch--hide-label{
1306
- --tds-toggle-switch-display:inline-flex;
1297
+ @keyframes indicator-pulse{
1298
+ 0%{
1299
+ opacity:.3;
1300
+ transform:scale(.9);
1301
+ }
1302
+
1303
+ 100%{
1304
+ opacity:0;
1305
+ transform:scale(1.75);
1306
+ }
1307
1307
  }
1308
1308
 
1309
1309
  .tds-select{
@@ -3322,19 +3322,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3322
3322
  @media (prefers-color-scheme: dark){
3323
3323
  }
3324
3324
 
3325
- .tds-combo-box{
3326
- --tds-combo-box-border-color:var(--t-form-border-color);
3327
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3328
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3329
- --tds-combo-box-background-color:var(--t-form-background-color);
3330
- --tds-combo-box-color:var(--t-form-color);
3331
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3332
- --tds-combo-box-font-size:var(--t-font-size-md);
3333
- --tds-combo-box-min-height:var(--t-container-size-md);
3334
- --tds-combo-box-padding-block:6px;
3335
- --tds-combo-box-button-offset:4px;
3336
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3337
- --tds-combo-box-description-invalid-icon-display:none;
3325
+ .tds-date-picker{
3326
+ --tds-date-picker-border-color:var(--t-form-border-color);
3327
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3328
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3329
+ --tds-date-picker-background-color:var(--t-form-background-color);
3330
+ --tds-date-picker-color:var(--t-form-color);
3331
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3332
+ --tds-date-picker-font-size:var(--t-font-size-md);
3333
+ --tds-date-picker-min-height:var(--t-container-size-md);
3334
+ --tds-date-picker-padding-block:6px;
3335
+ --tds-date-picker-button-offset:4px;
3336
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3337
+ --tds-date-picker-description-invalid-icon-display:none;
3338
3338
 
3339
3339
  position:relative;
3340
3340
  display:flex;
@@ -3342,181 +3342,173 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3342
3342
  gap:var(--t-spacing-half);
3343
3343
  }
3344
3344
 
3345
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3345
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3346
3346
  margin-left:.25ch;
3347
3347
  color:var(--t-text-color-status-error);
3348
3348
  content:"*";
3349
3349
  }
3350
3350
 
3351
- .tds-combo-box[data-invalid]{
3352
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3353
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3354
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3355
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3356
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3357
- --tds-combo-box-description-invalid-icon-display:inline-block;
3351
+ .tds-date-picker[data-invalid]{
3352
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3353
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3354
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3355
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3356
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3357
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3358
3358
  }
3359
3359
 
3360
- .tds-combo-box[data-disabled]{
3361
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3362
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3363
- --tds-combo-box-color:var(--t-form-color-disabled);
3360
+ .tds-date-picker[data-disabled]{
3361
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3362
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3363
+ --tds-date-picker-color:var(--t-form-color-disabled);
3364
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3364
3365
  }
3365
3366
 
3366
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3367
- color:var(--t-form-color-disabled);
3368
- }
3369
-
3370
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3367
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3371
3368
  cursor:not-allowed;
3372
3369
  }
3373
3370
 
3374
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3375
- transform:rotate(.5turn);
3376
- }
3377
-
3378
- .tds-combo-box--lg{
3379
- --tds-combo-box-min-height:var(--t-container-size-lg);
3380
- --tds-combo-box-font-size:var(--t-font-size-lg);
3381
- --tds-combo-box-button-offset:5px;
3371
+ .tds-date-picker--lg{
3372
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3373
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3374
+ --tds-date-picker-button-offset:5px;
3382
3375
  }
3383
3376
 
3384
- .tds-combo-box-label{
3377
+ .tds-date-picker-label{
3385
3378
  font-size:var(--t-font-size-md);
3386
3379
  font-weight:var(--t-font-weight-normal);
3387
3380
  color:var(--t-text-color);
3388
3381
  cursor:default;
3389
3382
  }
3390
3383
 
3391
- .tds-combo-box-field{
3384
+ .tds-date-picker-field{
3392
3385
  display:flex;
3393
3386
  align-items:center;
3394
3387
  inline-size:100%;
3395
- min-block-size:var(--tds-combo-box-min-height);
3388
+ min-block-size:var(--tds-date-picker-min-height);
3396
3389
  font-family:inherit;
3397
- font-size:var(--tds-combo-box-font-size);
3390
+ font-size:var(--tds-date-picker-font-size);
3398
3391
  line-height:1;
3399
- color:var(--tds-combo-box-color);
3392
+ color:var(--tds-date-picker-color);
3400
3393
  -webkit-appearance:none;
3401
3394
  -moz-appearance:none;
3402
3395
  appearance:none;
3403
- cursor:default;
3396
+ cursor:text;
3404
3397
  outline:var(--t-focus-ring-width) solid transparent;
3405
3398
  outline-offset:0;
3406
- background-color:var(--tds-combo-box-background-color);
3407
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3399
+ background-color:var(--tds-date-picker-background-color);
3400
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3408
3401
  border-radius:var(--t-form-border-radius);
3409
3402
  }
3410
3403
 
3411
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3412
- border-color:var(--tds-combo-box-border-color-hover);
3404
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3405
+ border-color:var(--tds-date-picker-border-color-hover);
3413
3406
  }
3414
3407
 
3415
- .tds-combo-box-field[data-focus-within]{
3408
+ .tds-date-picker-field[data-focus-within]{
3416
3409
  outline-color:var(--t-focus-ring-color);
3417
3410
  outline-offset:var(--t-focus-ring-offset);
3418
- border-color:var(--tds-combo-box-border-color-active);
3411
+ border-color:var(--tds-date-picker-border-color-active);
3419
3412
  }
3420
3413
 
3421
- .tds-combo-box-field:has([readonly]){
3422
- --tds-input-border-color:var(--t-form-border-color-readonly);
3423
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3414
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3415
+ color:var(--t-form-color-readonly);
3416
+ background-color:var(--t-form-background-color-readonly);
3417
+ border-color:var(--t-form-border-color-readonly);
3424
3418
  }
3425
3419
 
3426
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3420
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3421
+ border-color:var(--t-form-border-color-readonly);
3422
+ }
3423
+
3424
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3425
+ outline-color:var(--t-focus-ring-color);
3426
+ outline-offset:var(--t-focus-ring-offset);
3427
3427
  border-color:var(--t-form-border-color-hover);
3428
3428
  }
3429
3429
 
3430
- .tds-combo-box-input{
3431
- display:flex;
3430
+ .tds-date-picker-input{
3432
3431
  flex:1;
3433
- align-items:center;
3434
- padding-block:var(--tds-combo-box-padding-block);
3432
+ padding-block:var(--tds-date-picker-padding-block);
3435
3433
  padding-inline-start:var(--t-spacing-1);
3436
- font-family:inherit;
3437
- font-size:inherit;
3438
- color:inherit;
3439
- outline:0;
3440
- background:transparent;
3441
- border:0;
3434
+ font-variant-numeric:tabular-nums;
3442
3435
  }
3443
3436
 
3444
- .tds-combo-box-input::-moz-placeholder{
3445
- color:var(--tds-combo-box-placeholder-color);
3446
- -moz-user-select:none;
3447
- user-select:none;
3437
+ .tds-date-picker-segment{
3438
+ padding-inline:2px;
3439
+ caret-color:transparent;
3440
+ border-radius:var(--t-border-radius-sm);
3441
+ }
3442
+
3443
+ .tds-date-picker-segment[data-placeholder]{
3444
+ color:var(--tds-date-picker-placeholder-color);
3448
3445
  }
3449
3446
 
3450
- .tds-combo-box-input::placeholder{
3451
- color:var(--tds-combo-box-placeholder-color);
3452
- -webkit-user-select:none;
3453
- -moz-user-select:none;
3454
- user-select:none;
3447
+ .tds-date-picker-segment[data-focused]{
3448
+ color:var(--t-text-color-inverted);
3449
+ outline:0;
3450
+ background:var(--t-fill-color-interaction);
3455
3451
  }
3456
3452
 
3457
- .tds-combo-box-button{
3458
- flex-shrink:0;
3459
- align-self:center;
3460
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3461
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3462
- padding:0;
3463
- margin-inline-end:var(--tds-combo-box-button-offset);
3453
+ .tds-date-picker-segment-separator{
3454
+ padding-inline:0;
3455
+ color:var(--tds-date-picker-placeholder-color);
3464
3456
  }
3465
3457
 
3466
- .tds-combo-box-button > svg{
3467
- inline-size:var(--tds-combo-box-font-size);
3468
- block-size:var(--tds-combo-box-font-size);
3469
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3470
- }
3458
+ .tds-date-picker-description{
3459
+ display:flex;
3460
+ gap:var(--t-spacing-half);
3461
+ align-items:flex-start;
3462
+ margin:0;
3463
+ font-size:var(--t-font-size-sm);
3464
+ line-height:1.35;
3465
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3466
+ cursor:text;
3467
+ }
3471
3468
 
3472
- .tds-combo-box-button:not(.tds-btn){
3473
- display:inline-flex;
3474
- align-items:center;
3475
- justify-content:center;
3476
- inline-size:auto;
3477
- block-size:auto;
3478
- margin-inline-end:.75em;
3479
- color:var(--t-icon-color);
3480
- cursor:default;
3481
- background:transparent;
3482
- border:0;
3469
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3470
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3471
+ flex-shrink:0;
3472
+ margin-block-start:calc(.5lh - .5em);
3473
+ line-height:1.35;
3483
3474
  }
3484
3475
 
3485
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3486
- outline:0;
3487
- }
3476
+ .tds-date-picker-button{
3477
+ flex-shrink:0;
3478
+ align-self:center;
3479
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3480
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3481
+ padding:0;
3482
+ margin-inline-end:var(--tds-date-picker-button-offset);
3483
+ }
3488
3484
 
3489
- .tds-combo-box-popover{
3490
- width:var(--trigger-width);
3491
- max-block-size:inherit;
3492
- padding:var(--t-spacing-1);
3493
- overflow:auto;
3494
- outline:0;
3495
- scrollbar-color:#0004 #0000;
3496
- scrollbar-width:thin;
3485
+ .tds-date-picker-popover{
3486
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
3487
+
3488
+ position:relative;
3489
+ overflow:hidden;
3497
3490
  background:var(--t-surface-color-card);
3498
- background-clip:padding-box;
3499
3491
  border:1px solid var(--t-border-color);
3500
3492
  border-radius:var(--t-border-radius);
3501
3493
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3502
3494
  }
3503
3495
 
3504
- .tds-combo-box-popover[data-entering]{
3505
- animation:tds-combo-box-popover-enter 160ms ease;
3496
+ .tds-date-picker-popover[data-entering]{
3497
+ animation:tds-date-picker-popover-enter 160ms ease;
3506
3498
  }
3507
3499
 
3508
- .tds-combo-box-popover[data-exiting]{
3509
- animation:tds-combo-box-popover-exit 130ms ease;
3500
+ .tds-date-picker-popover[data-exiting]{
3501
+ animation:tds-date-picker-popover-exit 130ms ease;
3510
3502
  }
3511
3503
 
3512
- @keyframes tds-combo-box-popover-enter{
3504
+ @keyframes tds-date-picker-popover-enter{
3513
3505
  from{
3514
3506
  opacity:0;
3515
3507
  transform:translateY(-8px);
3516
3508
  }
3517
3509
  }
3518
3510
 
3519
- @keyframes tds-combo-box-popover-exit{
3511
+ @keyframes tds-date-picker-popover-exit{
3520
3512
  to{
3521
3513
  opacity:0;
3522
3514
  transform:translateY(-8px);
@@ -3524,85 +3516,221 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3524
3516
  }
3525
3517
 
3526
3518
  @media (prefers-reduced-motion: reduce){
3527
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3519
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3528
3520
  animation:none;
3529
3521
  }
3522
+ }
3530
3523
 
3531
- .tds-combo-box-button > svg{
3532
- transition:none;
3524
+ .tds-date-picker-overlay{
3525
+ position:absolute;
3526
+ inset:0;
3527
+ z-index:1;
3528
+ display:flex;
3529
+ background:var(--t-surface-color-card);
3530
+ }
3531
+
3532
+ .tds-date-picker-overlay-list{
3533
+ display:grid;
3534
+ gap:var(--t-spacing-half);
3535
+ padding-inline:var(--tds-date-picker-popover-padding);
3536
+ outline:0;
3537
+ }
3538
+
3539
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
3540
+ flex:1;
3541
+ grid-template-rows:repeat(4, 1fr);
3542
+ grid-template-columns:repeat(3, 1fr);
3543
+ }
3544
+
3545
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
3546
+ flex:1;
3547
+ grid-template-columns:repeat(4, 1fr);
3548
+ grid-auto-rows:3rem;
3549
+ overflow-y:auto;
3550
+ }
3551
+
3552
+ .tds-date-picker-overlay-cell{
3553
+ display:flex;
3554
+ align-items:center;
3555
+ justify-content:center;
3556
+ font-family:inherit;
3557
+ font-size:var(--t-font-size-md);
3558
+ color:var(--t-text-color);
3559
+ cursor:default;
3560
+ outline:0;
3561
+ background:transparent;
3562
+ border:0;
3563
+ border-radius:var(--t-border-radius-sm);
3564
+ }
3565
+
3566
+ .tds-date-picker-overlay-cell[data-hovered]{
3567
+ background:var(--t-fill-color-neutral-070);
3568
+ }
3569
+
3570
+ .tds-date-picker-overlay-cell[data-selected]{
3571
+ color:var(--t-text-color-inverted);
3572
+ background:var(--t-fill-color-interaction);
3573
+ }
3574
+
3575
+ .tds-date-picker-overlay-cell[data-focus-visible]{
3576
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3577
+ outline-offset:var(--t-focus-ring-offset);
3533
3578
  }
3579
+
3580
+ .tds-date-picker-calendar-heading{
3581
+ display:flex;
3582
+ flex:1;
3583
+ gap:var(--t-spacing-half);
3584
+ align-items:center;
3585
+ justify-content:flex-start;
3534
3586
  }
3535
3587
 
3536
- .tds-combo-box-list{
3537
- padding:0;
3538
- margin:0;
3588
+ .tds-date-picker-calendar-overlay-trigger{
3589
+ padding:4px 8px;
3590
+ font-family:inherit;
3591
+ font-size:var(--t-font-size-md);
3592
+ font-weight:var(--t-font-weight-semibold);
3593
+ color:var(--t-text-color);
3594
+ cursor:default;
3595
+ outline:0;
3596
+ background:transparent;
3597
+ border:0;
3598
+ border-radius:var(--t-border-radius-sm);
3539
3599
  }
3540
3600
 
3541
- .tds-combo-box-list-item{
3542
- display:block;
3543
- padding-block:var(--t-spacing-1);
3544
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3601
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
3602
+ background:var(--t-fill-color-neutral-070);
3603
+ }
3604
+
3605
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
3606
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3607
+ outline-offset:var(--t-focus-ring-offset);
3608
+ }
3609
+
3610
+ .tds-date-picker-calendar{
3611
+ inline-size:-moz-fit-content;
3612
+ inline-size:fit-content;
3613
+ }
3614
+
3615
+ .tds-date-picker-calendar-body{
3616
+ position:relative;
3617
+ padding:var(--tds-date-picker-popover-padding);
3618
+ padding-block-start:0;
3619
+ }
3620
+
3621
+ .tds-date-picker-calendar-header{
3622
+ display:flex;
3623
+ align-items:center;
3624
+ justify-content:space-between;
3625
+ padding:var(--tds-date-picker-popover-padding);
3626
+ }
3627
+
3628
+ .tds-date-picker-calendar-title{
3629
+ padding:4px 8px;
3630
+ font-size:var(--t-font-size-md);
3631
+ font-weight:var(--t-font-weight-semibold);
3632
+ }
3633
+
3634
+ .tds-date-picker-calendar-title--visually-hidden{
3635
+ position:absolute;
3636
+ inline-size:1px;
3637
+ block-size:1px;
3638
+ padding:0;
3639
+ margin:-1px;
3545
3640
  overflow:hidden;
3546
- text-overflow:ellipsis;
3547
- font-size:1rem;
3548
- color:var(--t-text-color);
3549
3641
  white-space:nowrap;
3642
+ border:0;
3643
+ clip-path:inset(50%);
3644
+ }
3645
+
3646
+ .tds-date-picker-calendar-nav{
3647
+ display:flex;
3648
+ align-items:center;
3649
+ justify-content:center;
3650
+ padding:var(--t-spacing-half);
3651
+ color:var(--t-text-color);
3550
3652
  cursor:default;
3551
- outline-offset:-1px;
3552
- border-radius:var(--t-border-radius);
3653
+ outline:0;
3654
+ background:transparent;
3655
+ border:0;
3656
+ border-radius:var(--t-border-radius-sm);
3553
3657
  }
3554
3658
 
3555
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3659
+ .tds-date-picker-calendar-nav[data-hovered]{
3556
3660
  background:var(--t-fill-color-neutral-070);
3557
3661
  }
3558
3662
 
3559
- .tds-combo-box-list-item[data-selected]{
3663
+ .tds-date-picker-calendar-nav[data-pressed]{
3560
3664
  background:var(--t-fill-color-button-interaction-ghost-active);
3561
3665
  }
3562
3666
 
3563
- .tds-combo-box-list-item[data-focus-visible]{
3564
- outline:var(--t-focus-ring-outline);
3565
- outline-offset:-1px;
3667
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3668
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3669
+ outline-offset:var(--t-focus-ring-offset);
3566
3670
  }
3567
3671
 
3568
- .tds-combo-box-list-item[data-disabled]{
3672
+ .tds-date-picker-calendar-nav[data-disabled]{
3569
3673
  color:var(--t-form-color-disabled);
3570
3674
  cursor:not-allowed;
3571
3675
  }
3572
3676
 
3573
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3574
- background:transparent;
3575
- }
3576
-
3577
- .tds-combo-box-list-section:not(:first-child){
3578
- margin-block-start:var(--t-spacing-half);
3579
- }
3677
+ .tds-date-picker-calendar-grid{
3678
+ border-collapse:collapse;
3679
+ }
3580
3680
 
3581
- .tds-combo-box-section-header{
3582
- padding-block:var(--t-spacing-1);
3583
- padding-inline:var(--t-spacing-1);
3681
+ .tds-date-picker-calendar-header-cell{
3682
+ padding-block:var(--t-spacing-half);
3584
3683
  font-size:var(--t-font-size-sm);
3585
- font-weight:var(--t-font-weight-semibold);
3684
+ font-weight:var(--t-font-weight-normal);
3586
3685
  color:var(--t-text-color-secondary);
3686
+ text-align:center;
3587
3687
  }
3588
3688
 
3589
- .tds-combo-box-description{
3689
+ .tds-date-picker-calendar-cell{
3590
3690
  display:flex;
3591
- gap:var(--t-spacing-half);
3592
- align-items:flex-start;
3593
- margin:0;
3594
- font-size:var(--t-font-size-sm);
3595
- line-height:1.35;
3596
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3597
- cursor:text;
3691
+ align-items:center;
3692
+ justify-content:center;
3693
+ inline-size:2.25rem;
3694
+ block-size:2.25rem;
3695
+ font-size:var(--t-font-size-md);
3696
+ color:var(--t-text-color);
3697
+ cursor:default;
3698
+ outline:0;
3699
+ border-radius:var(--t-border-radius-sm);
3598
3700
  }
3599
3701
 
3600
- .tds-combo-box-description-invalid-icon{
3601
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3602
- flex-shrink:0;
3603
- margin-block-start:calc(.5lh - .5em);
3604
- line-height:1.35;
3605
- }
3702
+ .tds-date-picker-calendar-cell[data-hovered]{
3703
+ background:var(--t-fill-color-neutral-070);
3704
+ }
3705
+
3706
+ .tds-date-picker-calendar-cell[data-pressed]{
3707
+ background:var(--t-fill-color-button-interaction-ghost-active);
3708
+ }
3709
+
3710
+ .tds-date-picker-calendar-cell[data-selected]{
3711
+ color:var(--t-text-color-inverted);
3712
+ background:var(--t-fill-color-interaction);
3713
+ }
3714
+
3715
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3716
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3717
+ outline-offset:var(--t-focus-ring-offset);
3718
+ }
3719
+
3720
+ .tds-date-picker-calendar-cell[data-unavailable]{
3721
+ color:var(--t-text-color-secondary);
3722
+ text-decoration:line-through;
3723
+ cursor:not-allowed;
3724
+ }
3725
+
3726
+ .tds-date-picker-calendar-cell[data-disabled]{
3727
+ color:var(--t-form-color-disabled);
3728
+ cursor:not-allowed;
3729
+ }
3730
+
3731
+ .tds-date-picker-calendar-cell[data-outside-month]{
3732
+ color:var(--t-text-color-secondary);
3733
+ }
3606
3734
 
3607
3735
  .tds-checkbox-group{
3608
3736
  --tds-checkbox-group-font-size:var(--t-font-size-md);
@@ -3682,19 +3810,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3682
3810
  --tds-checkbox-group-description-line-height:1.3;
3683
3811
  }
3684
3812
 
3685
- .tds-date-picker{
3686
- --tds-date-picker-border-color:var(--t-form-border-color);
3687
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3688
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3689
- --tds-date-picker-background-color:var(--t-form-background-color);
3690
- --tds-date-picker-color:var(--t-form-color);
3691
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3692
- --tds-date-picker-font-size:var(--t-font-size-md);
3693
- --tds-date-picker-min-height:var(--t-container-size-md);
3694
- --tds-date-picker-padding-block:6px;
3695
- --tds-date-picker-button-offset:4px;
3696
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3697
- --tds-date-picker-description-invalid-icon-display:none;
3813
+ .tds-combo-box{
3814
+ --tds-combo-box-border-color:var(--t-form-border-color);
3815
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3816
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3817
+ --tds-combo-box-background-color:var(--t-form-background-color);
3818
+ --tds-combo-box-color:var(--t-form-color);
3819
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3820
+ --tds-combo-box-font-size:var(--t-font-size-md);
3821
+ --tds-combo-box-min-height:var(--t-container-size-md);
3822
+ --tds-combo-box-padding-block:6px;
3823
+ --tds-combo-box-button-offset:4px;
3824
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3825
+ --tds-combo-box-description-invalid-icon-display:none;
3698
3826
 
3699
3827
  position:relative;
3700
3828
  display:flex;
@@ -3702,396 +3830,268 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3702
3830
  gap:var(--t-spacing-half);
3703
3831
  }
3704
3832
 
3705
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3833
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3706
3834
  margin-left:.25ch;
3707
3835
  color:var(--t-text-color-status-error);
3708
3836
  content:"*";
3709
3837
  }
3710
3838
 
3711
- .tds-date-picker[data-invalid]{
3712
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3713
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3714
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3715
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3716
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3717
- --tds-date-picker-description-invalid-icon-display:inline-block;
3839
+ .tds-combo-box[data-invalid]{
3840
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3841
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3842
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3843
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3844
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3845
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3718
3846
  }
3719
3847
 
3720
- .tds-date-picker[data-disabled]{
3721
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3722
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3723
- --tds-date-picker-color:var(--t-form-color-disabled);
3724
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3848
+ .tds-combo-box[data-disabled]{
3849
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3850
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3851
+ --tds-combo-box-color:var(--t-form-color-disabled);
3725
3852
  }
3726
3853
 
3727
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3854
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3855
+ color:var(--t-form-color-disabled);
3856
+ }
3857
+
3858
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3728
3859
  cursor:not-allowed;
3729
3860
  }
3730
3861
 
3731
- .tds-date-picker--lg{
3732
- --tds-date-picker-min-height:var(--t-container-size-lg);
3733
- --tds-date-picker-font-size:var(--t-font-size-lg);
3734
- --tds-date-picker-button-offset:5px;
3862
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3863
+ transform:rotate(.5turn);
3864
+ }
3865
+
3866
+ .tds-combo-box--lg{
3867
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3868
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3869
+ --tds-combo-box-button-offset:5px;
3735
3870
  }
3736
3871
 
3737
- .tds-date-picker-label{
3872
+ .tds-combo-box-label{
3738
3873
  font-size:var(--t-font-size-md);
3739
3874
  font-weight:var(--t-font-weight-normal);
3740
3875
  color:var(--t-text-color);
3741
3876
  cursor:default;
3742
3877
  }
3743
3878
 
3744
- .tds-date-picker-field{
3879
+ .tds-combo-box-field{
3745
3880
  display:flex;
3746
3881
  align-items:center;
3747
3882
  inline-size:100%;
3748
- min-block-size:var(--tds-date-picker-min-height);
3883
+ min-block-size:var(--tds-combo-box-min-height);
3749
3884
  font-family:inherit;
3750
- font-size:var(--tds-date-picker-font-size);
3885
+ font-size:var(--tds-combo-box-font-size);
3751
3886
  line-height:1;
3752
- color:var(--tds-date-picker-color);
3887
+ color:var(--tds-combo-box-color);
3753
3888
  -webkit-appearance:none;
3754
3889
  -moz-appearance:none;
3755
3890
  appearance:none;
3756
- cursor:text;
3757
- outline:var(--t-focus-ring-width) solid transparent;
3758
- outline-offset:0;
3759
- background-color:var(--tds-date-picker-background-color);
3760
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3761
- border-radius:var(--t-form-border-radius);
3762
- }
3763
-
3764
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3765
- border-color:var(--tds-date-picker-border-color-hover);
3766
- }
3767
-
3768
- .tds-date-picker-field[data-focus-within]{
3769
- outline-color:var(--t-focus-ring-color);
3770
- outline-offset:var(--t-focus-ring-offset);
3771
- border-color:var(--tds-date-picker-border-color-active);
3772
- }
3773
-
3774
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3775
- color:var(--t-form-color-readonly);
3776
- background-color:var(--t-form-background-color-readonly);
3777
- border-color:var(--t-form-border-color-readonly);
3778
- }
3779
-
3780
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3781
- border-color:var(--t-form-border-color-readonly);
3782
- }
3783
-
3784
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3785
- outline-color:var(--t-focus-ring-color);
3786
- outline-offset:var(--t-focus-ring-offset);
3787
- border-color:var(--t-form-border-color-hover);
3788
- }
3789
-
3790
- .tds-date-picker-input{
3791
- flex:1;
3792
- padding-block:var(--tds-date-picker-padding-block);
3793
- padding-inline-start:var(--t-spacing-1);
3794
- font-variant-numeric:tabular-nums;
3795
- }
3796
-
3797
- .tds-date-picker-segment{
3798
- padding-inline:2px;
3799
- caret-color:transparent;
3800
- border-radius:var(--t-border-radius-sm);
3801
- }
3802
-
3803
- .tds-date-picker-segment[data-placeholder]{
3804
- color:var(--tds-date-picker-placeholder-color);
3805
- }
3806
-
3807
- .tds-date-picker-segment[data-focused]{
3808
- color:var(--t-text-color-inverted);
3809
- outline:0;
3810
- background:var(--t-fill-color-interaction);
3811
- }
3812
-
3813
- .tds-date-picker-segment-separator{
3814
- padding-inline:0;
3815
- color:var(--tds-date-picker-placeholder-color);
3816
- }
3817
-
3818
- .tds-date-picker-description{
3819
- display:flex;
3820
- gap:var(--t-spacing-half);
3821
- align-items:flex-start;
3822
- margin:0;
3823
- font-size:var(--t-font-size-sm);
3824
- line-height:1.35;
3825
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3826
- cursor:text;
3827
- }
3828
-
3829
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3830
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3831
- flex-shrink:0;
3832
- margin-block-start:calc(.5lh - .5em);
3833
- line-height:1.35;
3834
- }
3835
-
3836
- .tds-date-picker-button{
3837
- flex-shrink:0;
3838
- align-self:center;
3839
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3840
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3841
- padding:0;
3842
- margin-inline-end:var(--tds-date-picker-button-offset);
3843
- }
3844
-
3845
- .tds-date-picker-popover{
3846
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
3847
-
3848
- position:relative;
3849
- overflow:hidden;
3850
- background:var(--t-surface-color-card);
3851
- border:1px solid var(--t-border-color);
3852
- border-radius:var(--t-border-radius);
3853
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3854
- }
3855
-
3856
- .tds-date-picker-popover[data-entering]{
3857
- animation:tds-date-picker-popover-enter 160ms ease;
3858
- }
3859
-
3860
- .tds-date-picker-popover[data-exiting]{
3861
- animation:tds-date-picker-popover-exit 130ms ease;
3862
- }
3863
-
3864
- @keyframes tds-date-picker-popover-enter{
3865
- from{
3866
- opacity:0;
3867
- transform:translateY(-8px);
3868
- }
3869
- }
3870
-
3871
- @keyframes tds-date-picker-popover-exit{
3872
- to{
3873
- opacity:0;
3874
- transform:translateY(-8px);
3875
- }
3876
- }
3877
-
3878
- @media (prefers-reduced-motion: reduce){
3879
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3880
- animation:none;
3881
- }
3882
- }
3883
-
3884
- .tds-date-picker-overlay{
3885
- position:absolute;
3886
- inset:0;
3887
- z-index:1;
3888
- display:flex;
3889
- background:var(--t-surface-color-card);
3890
- }
3891
-
3892
- .tds-date-picker-overlay-list{
3893
- display:grid;
3894
- gap:var(--t-spacing-half);
3895
- padding-inline:var(--tds-date-picker-popover-padding);
3896
- outline:0;
3897
- }
3898
-
3899
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
3900
- flex:1;
3901
- grid-template-rows:repeat(4, 1fr);
3902
- grid-template-columns:repeat(3, 1fr);
3903
- }
3904
-
3905
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
3906
- flex:1;
3907
- grid-template-columns:repeat(4, 1fr);
3908
- grid-auto-rows:3rem;
3909
- overflow-y:auto;
3910
- }
3911
-
3912
- .tds-date-picker-overlay-cell{
3913
- display:flex;
3914
- align-items:center;
3915
- justify-content:center;
3916
- font-family:inherit;
3917
- font-size:var(--t-font-size-md);
3918
- color:var(--t-text-color);
3919
3891
  cursor:default;
3920
- outline:0;
3921
- background:transparent;
3922
- border:0;
3923
- border-radius:var(--t-border-radius-sm);
3892
+ outline:var(--t-focus-ring-width) solid transparent;
3893
+ outline-offset:0;
3894
+ background-color:var(--tds-combo-box-background-color);
3895
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3896
+ border-radius:var(--t-form-border-radius);
3924
3897
  }
3925
3898
 
3926
- .tds-date-picker-overlay-cell[data-hovered]{
3927
- background:var(--t-fill-color-neutral-070);
3899
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3900
+ border-color:var(--tds-combo-box-border-color-hover);
3928
3901
  }
3929
3902
 
3930
- .tds-date-picker-overlay-cell[data-selected]{
3931
- color:var(--t-text-color-inverted);
3932
- background:var(--t-fill-color-interaction);
3903
+ .tds-combo-box-field[data-focus-within]{
3904
+ outline-color:var(--t-focus-ring-color);
3905
+ outline-offset:var(--t-focus-ring-offset);
3906
+ border-color:var(--tds-combo-box-border-color-active);
3933
3907
  }
3934
3908
 
3935
- .tds-date-picker-overlay-cell[data-focus-visible]{
3936
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3937
- outline-offset:var(--t-focus-ring-offset);
3909
+ .tds-combo-box-field:has([readonly]){
3910
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3911
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3938
3912
  }
3939
3913
 
3940
- .tds-date-picker-calendar-heading{
3914
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3915
+ border-color:var(--t-form-border-color-hover);
3916
+ }
3917
+
3918
+ .tds-combo-box-input{
3941
3919
  display:flex;
3942
3920
  flex:1;
3943
- gap:var(--t-spacing-half);
3944
3921
  align-items:center;
3945
- justify-content:flex-start;
3946
- }
3947
-
3948
- .tds-date-picker-calendar-overlay-trigger{
3949
- padding:4px 8px;
3922
+ padding-block:var(--tds-combo-box-padding-block);
3923
+ padding-inline-start:var(--t-spacing-1);
3950
3924
  font-family:inherit;
3951
- font-size:var(--t-font-size-md);
3952
- font-weight:var(--t-font-weight-semibold);
3953
- color:var(--t-text-color);
3954
- cursor:default;
3925
+ font-size:inherit;
3926
+ color:inherit;
3955
3927
  outline:0;
3956
3928
  background:transparent;
3957
3929
  border:0;
3958
- border-radius:var(--t-border-radius-sm);
3959
3930
  }
3960
3931
 
3961
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
3962
- background:var(--t-fill-color-neutral-070);
3932
+ .tds-combo-box-input::-moz-placeholder{
3933
+ color:var(--tds-combo-box-placeholder-color);
3934
+ -moz-user-select:none;
3935
+ user-select:none;
3963
3936
  }
3964
3937
 
3965
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
3966
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3967
- outline-offset:var(--t-focus-ring-offset);
3938
+ .tds-combo-box-input::placeholder{
3939
+ color:var(--tds-combo-box-placeholder-color);
3940
+ -webkit-user-select:none;
3941
+ -moz-user-select:none;
3942
+ user-select:none;
3968
3943
  }
3969
3944
 
3970
- .tds-date-picker-calendar{
3971
- inline-size:-moz-fit-content;
3972
- inline-size:fit-content;
3973
- }
3974
-
3975
- .tds-date-picker-calendar-body{
3976
- position:relative;
3977
- padding:var(--tds-date-picker-popover-padding);
3978
- padding-block-start:0;
3945
+ .tds-combo-box-button{
3946
+ flex-shrink:0;
3947
+ align-self:center;
3948
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3949
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3950
+ padding:0;
3951
+ margin-inline-end:var(--tds-combo-box-button-offset);
3979
3952
  }
3980
3953
 
3981
- .tds-date-picker-calendar-header{
3982
- display:flex;
3983
- align-items:center;
3984
- justify-content:space-between;
3985
- padding:var(--tds-date-picker-popover-padding);
3986
- }
3954
+ .tds-combo-box-button > svg{
3955
+ inline-size:var(--tds-combo-box-font-size);
3956
+ block-size:var(--tds-combo-box-font-size);
3957
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3958
+ }
3987
3959
 
3988
- .tds-date-picker-calendar-title{
3989
- padding:4px 8px;
3990
- font-size:var(--t-font-size-md);
3991
- font-weight:var(--t-font-weight-semibold);
3992
- }
3960
+ .tds-combo-box-button:not(.tds-btn){
3961
+ display:inline-flex;
3962
+ align-items:center;
3963
+ justify-content:center;
3964
+ inline-size:auto;
3965
+ block-size:auto;
3966
+ margin-inline-end:.75em;
3967
+ color:var(--t-icon-color);
3968
+ cursor:default;
3969
+ background:transparent;
3970
+ border:0;
3971
+ }
3993
3972
 
3994
- .tds-date-picker-calendar-title--visually-hidden{
3995
- position:absolute;
3996
- inline-size:1px;
3997
- block-size:1px;
3998
- padding:0;
3999
- margin:-1px;
4000
- overflow:hidden;
4001
- white-space:nowrap;
4002
- border:0;
4003
- clip-path:inset(50%);
4004
- }
3973
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3974
+ outline:0;
3975
+ }
4005
3976
 
4006
- .tds-date-picker-calendar-nav{
4007
- display:flex;
4008
- align-items:center;
4009
- justify-content:center;
4010
- padding:var(--t-spacing-half);
4011
- color:var(--t-text-color);
4012
- cursor:default;
3977
+ .tds-combo-box-popover{
3978
+ width:var(--trigger-width);
3979
+ max-block-size:inherit;
3980
+ padding:var(--t-spacing-1);
3981
+ overflow:auto;
4013
3982
  outline:0;
4014
- background:transparent;
4015
- border:0;
4016
- border-radius:var(--t-border-radius-sm);
3983
+ scrollbar-color:#0004 #0000;
3984
+ scrollbar-width:thin;
3985
+ background:var(--t-surface-color-card);
3986
+ background-clip:padding-box;
3987
+ border:1px solid var(--t-border-color);
3988
+ border-radius:var(--t-border-radius);
3989
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4017
3990
  }
4018
3991
 
4019
- .tds-date-picker-calendar-nav[data-hovered]{
4020
- background:var(--t-fill-color-neutral-070);
3992
+ .tds-combo-box-popover[data-entering]{
3993
+ animation:tds-combo-box-popover-enter 160ms ease;
4021
3994
  }
4022
3995
 
4023
- .tds-date-picker-calendar-nav[data-pressed]{
4024
- background:var(--t-fill-color-button-interaction-ghost-active);
3996
+ .tds-combo-box-popover[data-exiting]{
3997
+ animation:tds-combo-box-popover-exit 130ms ease;
4025
3998
  }
4026
3999
 
4027
- .tds-date-picker-calendar-nav[data-focus-visible]{
4028
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4029
- outline-offset:var(--t-focus-ring-offset);
4000
+ @keyframes tds-combo-box-popover-enter{
4001
+ from{
4002
+ opacity:0;
4003
+ transform:translateY(-8px);
4030
4004
  }
4005
+ }
4031
4006
 
4032
- .tds-date-picker-calendar-nav[data-disabled]{
4033
- color:var(--t-form-color-disabled);
4034
- cursor:not-allowed;
4007
+ @keyframes tds-combo-box-popover-exit{
4008
+ to{
4009
+ opacity:0;
4010
+ transform:translateY(-8px);
4035
4011
  }
4012
+ }
4036
4013
 
4037
- .tds-date-picker-calendar-grid{
4038
- border-collapse:collapse;
4014
+ @media (prefers-reduced-motion: reduce){
4015
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
4016
+ animation:none;
4017
+ }
4018
+
4019
+ .tds-combo-box-button > svg{
4020
+ transition:none;
4021
+ }
4039
4022
  }
4040
4023
 
4041
- .tds-date-picker-calendar-header-cell{
4042
- padding-block:var(--t-spacing-half);
4043
- font-size:var(--t-font-size-sm);
4044
- font-weight:var(--t-font-weight-normal);
4045
- color:var(--t-text-color-secondary);
4046
- text-align:center;
4024
+ .tds-combo-box-list{
4025
+ padding:0;
4026
+ margin:0;
4047
4027
  }
4048
4028
 
4049
- .tds-date-picker-calendar-cell{
4050
- display:flex;
4051
- align-items:center;
4052
- justify-content:center;
4053
- inline-size:2.25rem;
4054
- block-size:2.25rem;
4055
- font-size:var(--t-font-size-md);
4029
+ .tds-combo-box-list-item{
4030
+ display:block;
4031
+ padding-block:var(--t-spacing-1);
4032
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4033
+ overflow:hidden;
4034
+ text-overflow:ellipsis;
4035
+ font-size:1rem;
4056
4036
  color:var(--t-text-color);
4037
+ white-space:nowrap;
4057
4038
  cursor:default;
4058
- outline:0;
4059
- border-radius:var(--t-border-radius-sm);
4039
+ outline-offset:-1px;
4040
+ border-radius:var(--t-border-radius);
4060
4041
  }
4061
4042
 
4062
- .tds-date-picker-calendar-cell[data-hovered]{
4043
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
4063
4044
  background:var(--t-fill-color-neutral-070);
4064
4045
  }
4065
4046
 
4066
- .tds-date-picker-calendar-cell[data-pressed]{
4047
+ .tds-combo-box-list-item[data-selected]{
4067
4048
  background:var(--t-fill-color-button-interaction-ghost-active);
4068
4049
  }
4069
4050
 
4070
- .tds-date-picker-calendar-cell[data-selected]{
4071
- color:var(--t-text-color-inverted);
4072
- background:var(--t-fill-color-interaction);
4073
- }
4074
-
4075
- .tds-date-picker-calendar-cell[data-focus-visible]{
4076
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4077
- outline-offset:var(--t-focus-ring-offset);
4078
- }
4079
-
4080
- .tds-date-picker-calendar-cell[data-unavailable]{
4081
- color:var(--t-text-color-secondary);
4082
- text-decoration:line-through;
4083
- cursor:not-allowed;
4051
+ .tds-combo-box-list-item[data-focus-visible]{
4052
+ outline:var(--t-focus-ring-outline);
4053
+ outline-offset:-1px;
4084
4054
  }
4085
4055
 
4086
- .tds-date-picker-calendar-cell[data-disabled]{
4056
+ .tds-combo-box-list-item[data-disabled]{
4087
4057
  color:var(--t-form-color-disabled);
4088
4058
  cursor:not-allowed;
4089
4059
  }
4090
4060
 
4091
- .tds-date-picker-calendar-cell[data-outside-month]{
4092
- color:var(--t-text-color-secondary);
4061
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
4062
+ background:transparent;
4063
+ }
4064
+
4065
+ .tds-combo-box-list-section:not(:first-child){
4066
+ margin-block-start:var(--t-spacing-half);
4093
4067
  }
4094
4068
 
4069
+ .tds-combo-box-section-header{
4070
+ padding-block:var(--t-spacing-1);
4071
+ padding-inline:var(--t-spacing-1);
4072
+ font-size:var(--t-font-size-sm);
4073
+ font-weight:var(--t-font-weight-semibold);
4074
+ color:var(--t-text-color-secondary);
4075
+ }
4076
+
4077
+ .tds-combo-box-description{
4078
+ display:flex;
4079
+ gap:var(--t-spacing-half);
4080
+ align-items:flex-start;
4081
+ margin:0;
4082
+ font-size:var(--t-font-size-sm);
4083
+ line-height:1.35;
4084
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4085
+ cursor:text;
4086
+ }
4087
+
4088
+ .tds-combo-box-description-invalid-icon{
4089
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
4090
+ flex-shrink:0;
4091
+ margin-block-start:calc(.5lh - .5em);
4092
+ line-height:1.35;
4093
+ }
4094
+
4095
4095
  .tds-time-field{
4096
4096
  --tds-time-field-border-color:var(--t-form-border-color);
4097
4097
  --tds-time-field-border-color-hover:var(--t-form-border-color-hover);