@planningcenter/tapestry 3.2.3-rc.19 → 3.2.3-rc.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/reactRender.css +1370 -1372
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1370 -1372
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/dist/unstable.css +15 -17
  6. package/dist/unstable.css.map +1 -1
  7. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,278 +1,218 @@
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:transparent;
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
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-nav-item-background-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-border-bottom-color:var(--tds-page-header-bottom-border-color);
72
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
73
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
74
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
75
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
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%);
76
85
  }
77
- }
78
- }
79
86
 
80
- .tds-page-header{
81
- display:flex;
82
- flex-direction:column;
83
- padding-top:var(--tds-page-header-padding-y);
84
- color:var(--tds-page-header-color);
85
- background:var(--tds-page-header-background-color);
86
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
87
- }
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
+ }
88
91
 
89
- .tds-page-header:not(.has-nav){
90
- padding-bottom:var(--tds-page-header-padding-y);
91
- }
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
+ }
92
96
 
93
- .tds-page-header.inactive{
94
- background:var(--tds-page-header-background-color-inactive);
95
- }
97
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
98
+ pointer-events:none;
99
+ }
96
100
 
97
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
98
- width:100%;
101
+ @media (prefers-reduced-motion: reduce){
102
+
103
+ .tds-checkbox input[type="checkbox"]{
104
+ --tds-checkbox-transition-property:none;
99
105
  }
106
+ }
100
107
 
101
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
102
- display:flex;
103
- flex-flow:row wrap;
104
- gap:var(--t-spacing-half) var(--t-spacing-1);
105
- align-items:flex-start;
106
- justify-content:flex-start;
107
- min-width:0;
108
+ .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;
108
113
  }
109
114
 
110
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
111
- display:flex;
112
- gap:var(--tds-page-header-nav-gap);
113
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
114
- margin:0 0 -1px;
115
- overflow:auto;
116
- list-style:none;
117
- background:var(--tds-page-header-nav-background);
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
118
  }
119
119
 
120
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
121
- position:relative;
122
- display:inline-flex;
123
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
124
- font-size:var(--t-font-size-sm);
125
- line-height:22px;
126
- color:var(--tds-page-header-nav-item-color);
127
- white-space:nowrap;
128
- text-decoration:none;
129
- -webkit-appearance:none;
130
- -moz-appearance:none;
131
- appearance:none;
132
- cursor:pointer;
133
- outline-offset:-2px;
134
- background-color:var(--tds-page-header-nav-item-background-color);
135
- background-clip:padding-box;
136
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
137
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
138
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
- }
120
+ .tds-checkbox:has(input:checked){
121
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
122
+ }
140
123
 
141
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
142
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
143
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
144
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
145
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
146
- }
124
+ .tds-checkbox:has(input:indeterminate){
125
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
126
+ }
147
127
 
148
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
149
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
150
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
151
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
152
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
153
- }
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
+ }
154
133
 
155
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
156
- background-color:var(--tds-page-header-nav-item-background-color-active);
157
- border-color:var(--tds-page-header-nav-item-border-color-active);
158
- border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
159
- }
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);
137
+ }
160
138
 
161
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
162
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
163
- color:var(--tds-page-header-nav-item-color-disabled);
164
- cursor:not-allowed;
165
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
166
- opacity:1;
167
- }
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);
142
+ }
168
143
 
169
- @media (min-width: 600px){
170
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
171
- position:absolute;
172
- inset:auto -1px -1px;
173
- height:1px;
174
- pointer-events:none;
175
- content:"";
176
- background-color:var(--tds-page-header-bottom-border-color);
177
- }
178
- }
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);
147
+ }
179
148
 
180
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
181
- position:relative;
149
+ .tds-checkbox:has(input:required) label::after{
150
+ margin-left:.25ch;
151
+ color:var(--t-text-color-status-error);
152
+ content:"*";
182
153
  }
183
154
 
184
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
185
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
186
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
187
- }
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);
188
158
 
189
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
190
- position:absolute;
191
- top:-5px;
192
- right:-2px;
193
- width:10px;
194
- height:10px;
195
- content:"";
196
- background:var(--tds-page-header-nav-item-indicator-color);
197
- border-radius:50%;
198
- }
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
+ }
199
163
 
200
- @media (prefers-reduced-motion: no-preference){
201
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
202
- animation:indicator-pulse 1.25s ease infinite;
203
- }
204
- }
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);
166
+ }
205
167
 
206
- .tds-page-header__title-bar{
168
+ .tds-checkbox-description{
207
169
  display:flex;
208
- flex-direction:column;
209
- gap:var(--t-spacing-2) var(--t-spacing-1);
170
+ grid-area:2 / 2;
171
+ gap:var(--t-spacing-half);
210
172
  align-items:flex-start;
211
- justify-content:space-between;
212
- padding:0 var(--tds-page-header-padding-x);
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;
213
178
  }
214
179
 
215
- .tds-page-header--profile > .tds-page-header__title-bar{
216
- align-items:center;
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);
217
185
  }
218
186
 
219
- .tds-page-header__primary{
220
- width:100%;
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;
221
193
  }
222
194
 
223
- .tds-page-header__primary h1{
224
- margin:0;
225
- font-size:var(--tds-page-header-headline-font-size);
226
- font-weight:var(--t-font-weight-normal);
227
- line-height:32px;
228
- color:var(--tds-page-header-headline-color);
229
- overflow-wrap:break-word;
230
- }
231
195
 
232
- @media (min-width: 960px){
233
- .tds-page-header__primary{
234
- flex:1 1 max-content;
235
- width:auto;
236
- min-width:0;
237
- max-width:100%;
238
- }
239
-
240
- .tds-page-header__title-bar,
241
- .tds-page-header--profile .tds-page-header__title-bar{
242
- flex-flow:row nowrap;
243
- row-gap:12px;
244
- align-items:flex-start;
245
- }
246
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
247
- width:auto;
196
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
197
+ -webkit-appearance:none;
198
+ appearance:none;
248
199
  }
249
200
 
250
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
251
- justify-content:flex-end;
201
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
202
+ inline-size:1em;
203
+ block-size:2em;
252
204
  }
253
- }
254
-
255
- .tds-page-header-phone,
256
- .tds-page-header-email{
257
- color:var(--tds-page-header-color);
258
- white-space:nowrap;
259
- }
260
205
 
261
- .tds-page-header-email{
262
- max-width:100%;
263
- overflow:hidden;
264
- text-overflow:ellipsis;
265
- }
266
-
267
- @keyframes indicator-pulse{
268
- 0%{
269
- opacity:.3;
270
- transform:scale(.9);
206
+ @supports (field-sizing: content){
207
+ .tds-input--auto-width{
208
+ inline-size:-moz-fit-content;
209
+ inline-size:fit-content;
210
+ min-inline-size:min(100%, 122px);
271
211
  }
272
212
 
273
- 100%{
274
- opacity:0;
275
- transform:scale(1.75);
213
+ .tds-input--auto-width input{
214
+ field-sizing:content;
215
+ inline-size:auto;
276
216
  }
277
217
  }
278
218
 
@@ -638,330 +578,501 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
638
578
  flex-direction:column;
639
579
  }
640
580
 
641
- .tds-checkbox{
642
- --tds-checkbox-font-size:var(--t-font-size-md);
643
- --tds-checkbox-cursor:pointer;
644
- --tds-checkbox-line-height:1.4;
645
- --tds-checkbox-transition-property:background-color, border-color;
646
-
647
- --tds-checkbox-input-size:var(--t-element-size-md);
648
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
649
- --tds-checkbox-input-border-color:var(--t-form-border-color);
650
- --tds-checkbox-input-background-color:transparent;
581
+ .tds-radio{
582
+ --tds-radio-font-size:var(--t-font-size-md);
583
+ --tds-radio-cursor:pointer;
584
+ --tds-radio-line-height:1.4;
585
+ --tds-radio-transition-property:border-width;
651
586
 
652
- --tds-checkbox-input-icon:none;
653
- --tds-checkbox-input-icon-visibility:hidden;
654
- --tds-checkbox-input-icon-opacity:0;
655
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
587
+ --tds-radio-input-size:var(--t-element-size-md);
588
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
589
+ --tds-radio-input-border-color:var(--t-form-border-color);
590
+ --tds-radio-input-border-width:var(--t-form-border-width);
591
+ --tds-radio-input-background-color:transparent;
656
592
 
657
- --tds-checkbox-label-color:var(--t-form-color);
593
+ --tds-radio-label-color:var(--t-form-color);
658
594
 
659
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
660
- --tds-checkbox-description-line-height:1.35;
661
- --tds-checkbox-description-color:var(--t-text-color-secondary);
662
- --tds-checkbox-description-invalid-icon-display:none;
595
+ --tds-radio-description-font-size:var(--t-font-size-sm);
596
+ --tds-radio-description-line-height:1.35;
597
+ --tds-radio-description-color:var(--t-text-color-secondary);
663
598
 
664
599
  position:relative;
665
600
  display:inline-grid;
666
601
  grid-template-columns:auto;
667
602
  grid-auto-columns:1fr;
668
603
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
669
- line-height:var(--tds-checkbox-line-height);
670
- cursor:var(--tds-checkbox-cursor);
604
+ line-height:var(--tds-radio-line-height);
605
+ cursor:var(--tds-radio-cursor);
671
606
  -webkit-user-select:none;
672
607
  -moz-user-select:none;
673
608
  user-select:none;
674
609
  }
675
610
 
676
- .tds-checkbox label{
611
+ .tds-radio label{
677
612
  grid-area:1 / 2;
678
- font-size:var(--tds-checkbox-font-size);
613
+ font-size:var(--tds-radio-font-size);
679
614
  font-weight:var(--t-font-weight-normal);
680
- color:var(--tds-checkbox-label-color);
681
- cursor:var(--tds-checkbox-cursor);
682
- }
683
-
684
- .tds-checkbox tds-indeterminate{
685
- display:flex;
615
+ color:var(--tds-radio-label-color);
616
+ cursor:var(--tds-radio-cursor);
686
617
  }
687
618
 
688
- .tds-checkbox input[type="checkbox"]{
619
+ .tds-radio input[type="radio"]{
689
620
  position:relative;
690
621
  width:1em;
691
622
  height:1em;
692
623
  margin:calc((1lh - 1em) / 2) 0 0;
693
- font-size:var(--tds-checkbox-font-size);
624
+ font-size:var(--tds-radio-font-size);
694
625
  line-height:inherit;
695
626
  -webkit-appearance:none;
696
627
  -moz-appearance:none;
697
628
  appearance:none;
698
- cursor:var(--tds-checkbox-cursor);
699
- background-color:var(--tds-checkbox-input-background-color);
700
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
701
- border-radius:var(--tds-checkbox-input-border-radius);
629
+ cursor:var(--tds-radio-cursor);
630
+ background-color:var(--tds-radio-input-background-color);
631
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
632
+ border-radius:var(--tds-radio-input-border-radius);
702
633
  transition-timing-function:var(--t-ease-in-out);
703
634
  transition-duration:var(--t-duration-200);
704
- transition-property:var(--tds-checkbox-transition-property);
635
+ transition-property:var(--tds-radio-transition-property);
705
636
  }
706
637
 
707
- :is(.tds-checkbox input[type="checkbox"])::before{
708
- position:absolute;
709
- top:50%;
710
- left:50%;
711
- visibility:var(--tds-checkbox-input-icon-visibility);
712
- width:100%;
713
- height:100%;
714
- content:"";
715
- background-color:var(--tds-checkbox-input-icon-fill);
716
- border-radius:var(--tds-checkbox-input-border-radius);
717
- opacity:var(--tds-checkbox-input-icon-opacity);
718
- -webkit-mask-image:var(--tds-checkbox-input-icon);
719
- mask-image:var(--tds-checkbox-input-icon);
720
- -webkit-mask-repeat:no-repeat;
721
- mask-repeat:no-repeat;
722
- -webkit-mask-size:contain;
723
- mask-size:contain;
724
- transform:translate(-50%, -50%);
725
- }
726
-
727
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
728
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
729
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
638
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
639
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
640
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
730
641
  }
731
642
 
732
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
643
+ :is(.tds-radio input[type="radio"]):focus-visible{
733
644
  outline:var(--t-focus-ring-outline);
734
645
  outline-offset:var(--t-focus-ring-offset);
735
646
  }
736
647
 
737
- :is(.tds-checkbox input[type="checkbox"]):disabled{
648
+ :is(.tds-radio input[type="radio"]):disabled{
738
649
  pointer-events:none;
739
650
  }
740
651
 
741
652
  @media (prefers-reduced-motion: reduce){
742
653
 
743
- .tds-checkbox input[type="checkbox"]{
744
- --tds-checkbox-transition-property:none;
654
+ .tds-radio input[type="radio"]{
655
+ --tds-radio-transition-property:none;
745
656
  }
746
657
  }
747
658
 
748
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
749
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
750
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
751
- --tds-checkbox-input-icon-visibility:visible;
752
- --tds-checkbox-input-icon-opacity:1;
659
+ .tds-radio:has(input:checked){
660
+ --tds-radio-input-background-color:var(--t-form-background-color);
661
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
662
+ --tds-radio-input-border-width:4px;
753
663
  }
754
664
 
755
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
756
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
757
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
665
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
666
+ --tds-radio-input-background-color:var(--t-form-background-color);
667
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
668
+ }
669
+
670
+ .tds-radio:has(input:user-invalid){
671
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
672
+ }
673
+
674
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
675
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
676
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
677
+ }
678
+
679
+ .tds-radio:has(input:disabled){
680
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
681
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
682
+
683
+ --tds-radio-label-color:var(--t-form-color-disabled);
684
+ --tds-radio-description-color:var(--t-form-color-disabled);
685
+ --tds-radio-cursor:not-allowed;
686
+ }
687
+
688
+ .tds-radio:has(input:disabled) input:checked{
689
+ --tds-radio-input-background-color:var(--t-form-background-color);
690
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
691
+ }
692
+
693
+ .tds-radio-description{
694
+ display:flex;
695
+ grid-area:2 / 2;
696
+ gap:var(--t-spacing-half);
697
+ align-items:flex-start;
698
+ margin:0;
699
+ font-size:var(--tds-radio-description-font-size);
700
+ line-height:var(--tds-radio-description-line-height);
701
+ color:var(--tds-radio-description-color);
702
+ cursor:text;
703
+ }
704
+
705
+ .tds-radio--sm{
706
+ --tds-radio-line-height:1.35;
707
+ --tds-radio-input-size:var(--t-element-size-sm);
708
+ --tds-radio-font-size:var(--t-font-size-sm);
709
+ --tds-radio-description-font-size:var(--t-font-size-xs);
710
+ --tds-radio-description-line-height:1.3;
711
+ }
712
+
713
+ @layer t-critical{
714
+ tds-page-header:not(.hydrated){
715
+ display:none;
716
+ }
717
+ }
718
+
719
+ @layer t-component{
720
+ .tds-page-header{
721
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
722
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
723
+ --tds-page-header-color:var(--t-text-color);
724
+ --tds-page-header-bottom-border-color:transparent;
725
+ --tds-page-header-headline-color:var(--t-text-color-headline);
726
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
727
+ --tds-page-header-padding-x:var(--t-spacing-2);
728
+ --tds-page-header-padding-y:var(--t-spacing-2);
729
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
730
+ --tds-page-header-nav-gap:var(--t-spacing-1);
731
+ --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%);
732
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
733
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
734
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
735
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
736
+ --tds-page-header-nav-item-border-width:1px;
737
+
738
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
739
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color);
740
+
741
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
742
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
743
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
744
+
745
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
746
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
747
+
748
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
749
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
750
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
751
+
752
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
753
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
754
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
755
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
756
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
757
+ }
758
+
759
+ .tds-page-header--profile{
760
+ --tds-page-header-padding-y:20px;
761
+ }
762
+
763
+ @supports (color: light-dark(#fff, #000)){
764
+ .tds-page-header{
765
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
766
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
767
+ }
768
+ }
769
+
770
+ @media (min-width: 600px){
771
+ .tds-page-header{
772
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
773
+ --tds-page-header-color:var(--t-text-color-secondary);
774
+ --tds-page-header-bottom-border-color:var(--t-border-color);
775
+ --tds-page-header-padding-x:var(--t-spacing-3);
776
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
777
+ --tds-page-header-nav-gap:var(--t-spacing-half);
778
+ --tds-page-header-nav-background:transparent;
779
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
780
+ --tds-page-header-nav-item-border-width:1px;
781
+ --tds-page-header-nav-item-color:var(--t-text-color);
782
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
783
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
784
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
785
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
786
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
787
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
788
+ }
789
+ }
790
+ }
791
+
792
+ .tds-page-header{
793
+ display:flex;
794
+ flex-direction:column;
795
+ padding-top:var(--tds-page-header-padding-y);
796
+ color:var(--tds-page-header-color);
797
+ background:var(--tds-page-header-background-color);
798
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
799
+ }
800
+
801
+ .tds-page-header:not(.has-nav){
802
+ padding-bottom:var(--tds-page-header-padding-y);
803
+ }
804
+
805
+ .tds-page-header.inactive{
806
+ background:var(--tds-page-header-background-color-inactive);
807
+ }
808
+
809
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
810
+ width:100%;
811
+ }
812
+
813
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
814
+ display:flex;
815
+ flex-flow:row wrap;
816
+ gap:var(--t-spacing-half) var(--t-spacing-1);
817
+ align-items:flex-start;
818
+ justify-content:flex-start;
819
+ min-width:0;
820
+ }
821
+
822
+ :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{
823
+ display:flex;
824
+ gap:var(--tds-page-header-nav-gap);
825
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
826
+ margin:0 0 -1px;
827
+ overflow:auto;
828
+ list-style:none;
829
+ background:var(--tds-page-header-nav-background);
830
+ }
831
+
832
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
833
+ position:relative;
834
+ display:inline-flex;
835
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
836
+ font-size:var(--t-font-size-sm);
837
+ line-height:22px;
838
+ color:var(--tds-page-header-nav-item-color);
839
+ white-space:nowrap;
840
+ text-decoration:none;
841
+ -webkit-appearance:none;
842
+ -moz-appearance:none;
843
+ appearance:none;
844
+ cursor:pointer;
845
+ outline-offset:-2px;
846
+ background-color:var(--tds-page-header-nav-item-background-color);
847
+ background-clip:padding-box;
848
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
849
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
850
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
758
851
  }
759
852
 
760
- .tds-checkbox:has(input:checked){
761
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
762
- }
763
-
764
- .tds-checkbox:has(input:indeterminate){
765
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
766
- }
853
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
854
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
855
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
856
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
857
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
858
+ }
767
859
 
768
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
769
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
770
- --tds-checkbox-description-color:var(--t-text-color-status-error);
771
- --tds-checkbox-description-invalid-icon-display:inline-block;
772
- }
860
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
861
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
862
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
863
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
864
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-hover);
865
+ }
773
866
 
774
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
775
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
776
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
777
- }
867
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
868
+ background-color:var(--tds-page-header-nav-item-background-color-active);
869
+ border-color:var(--tds-page-header-nav-item-border-color-active);
870
+ border-bottom-color:var(--tds-page-header-nav-item-background-color-active);
871
+ }
778
872
 
779
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
780
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
781
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
782
- }
873
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
874
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-disabled);
875
+ color:var(--tds-page-header-nav-item-color-disabled);
876
+ cursor:not-allowed;
877
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
878
+ opacity:1;
879
+ }
783
880
 
784
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
785
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
786
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
787
- }
881
+ @media (min-width: 600px){
882
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected)::after{
883
+ position:absolute;
884
+ inset:auto -1px -1px;
885
+ height:1px;
886
+ pointer-events:none;
887
+ content:"";
888
+ background-color:var(--tds-page-header-bottom-border-color);
889
+ }
890
+ }
788
891
 
789
- .tds-checkbox:has(input:required) label::after{
790
- margin-left:.25ch;
791
- color:var(--t-text-color-status-error);
792
- content:"*";
892
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
893
+ position:relative;
793
894
  }
794
895
 
795
- .tds-checkbox:has(input:disabled){
796
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
797
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
896
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
897
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
898
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
899
+ }
798
900
 
799
- --tds-checkbox-label-color:var(--t-form-color-disabled);
800
- --tds-checkbox-description-color:var(--t-form-color-disabled);
801
- --tds-checkbox-cursor:not-allowed;
802
- }
901
+ :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{
902
+ position:absolute;
903
+ top:-5px;
904
+ right:-2px;
905
+ width:10px;
906
+ height:10px;
907
+ content:"";
908
+ background:var(--tds-page-header-nav-item-indicator-color);
909
+ border-radius:50%;
910
+ }
803
911
 
804
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
805
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
806
- }
912
+ @media (prefers-reduced-motion: no-preference){
913
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
914
+ animation:indicator-pulse 1.25s ease infinite;
915
+ }
916
+ }
807
917
 
808
- .tds-checkbox-description{
918
+ .tds-page-header__title-bar{
809
919
  display:flex;
810
- grid-area:2 / 2;
811
- gap:var(--t-spacing-half);
920
+ flex-direction:column;
921
+ gap:var(--t-spacing-2) var(--t-spacing-1);
812
922
  align-items:flex-start;
813
- margin:0;
814
- font-size:var(--tds-checkbox-description-font-size);
815
- line-height:var(--tds-checkbox-description-line-height);
816
- color:var(--tds-checkbox-description-color);
817
- cursor:text;
923
+ justify-content:space-between;
924
+ padding:0 var(--tds-page-header-padding-x);
818
925
  }
819
926
 
820
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
821
- display:var(--tds-checkbox-description-invalid-icon-display);
822
- flex-shrink:0;
823
- margin-top:calc(.5lh - .5em);
824
- line-height:var(--tds-checkbox-description-line-height);
927
+ .tds-page-header--profile > .tds-page-header__title-bar{
928
+ align-items:center;
825
929
  }
826
930
 
827
- .tds-checkbox--sm{
828
- --tds-checkbox-line-height:1.35;
829
- --tds-checkbox-input-size:var(--t-element-size-sm);
830
- --tds-checkbox-font-size:var(--t-font-size-sm);
831
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
832
- --tds-checkbox-description-line-height:1.3;
931
+ .tds-page-header__primary{
932
+ width:100%;
833
933
  }
834
934
 
835
- .tds-radio{
836
- --tds-radio-font-size:var(--t-font-size-md);
837
- --tds-radio-cursor:pointer;
838
- --tds-radio-line-height:1.4;
839
- --tds-radio-transition-property:border-width;
935
+ .tds-page-header__primary h1{
936
+ margin:0;
937
+ font-size:var(--tds-page-header-headline-font-size);
938
+ font-weight:var(--t-font-weight-normal);
939
+ line-height:32px;
940
+ color:var(--tds-page-header-headline-color);
941
+ overflow-wrap:break-word;
942
+ }
840
943
 
841
- --tds-radio-input-size:var(--t-element-size-md);
842
- --tds-radio-input-border-radius:var(--t-border-radius-round);
843
- --tds-radio-input-border-color:var(--t-form-border-color);
844
- --tds-radio-input-border-width:var(--t-form-border-width);
845
- --tds-radio-input-background-color:transparent;
944
+ @media (min-width: 960px){
945
+ .tds-page-header__primary{
946
+ flex:1 1 max-content;
947
+ width:auto;
948
+ min-width:0;
949
+ max-width:100%;
950
+ }
846
951
 
847
- --tds-radio-label-color:var(--t-form-color);
952
+ .tds-page-header__title-bar,
953
+ .tds-page-header--profile .tds-page-header__title-bar{
954
+ flex-flow:row nowrap;
955
+ row-gap:12px;
956
+ align-items:flex-start;
957
+ }
958
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
959
+ width:auto;
960
+ }
848
961
 
849
- --tds-radio-description-font-size:var(--t-font-size-sm);
850
- --tds-radio-description-line-height:1.35;
851
- --tds-radio-description-color:var(--t-text-color-secondary);
962
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
963
+ justify-content:flex-end;
964
+ }
965
+ }
852
966
 
853
- position:relative;
854
- display:inline-grid;
855
- grid-template-columns:auto;
856
- grid-auto-columns:1fr;
857
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
858
- line-height:var(--tds-radio-line-height);
859
- cursor:var(--tds-radio-cursor);
860
- -webkit-user-select:none;
861
- -moz-user-select:none;
862
- user-select:none;
967
+ .tds-page-header-phone,
968
+ .tds-page-header-email{
969
+ color:var(--tds-page-header-color);
970
+ white-space:nowrap;
863
971
  }
864
972
 
865
- .tds-radio label{
866
- grid-area:1 / 2;
867
- font-size:var(--tds-radio-font-size);
868
- font-weight:var(--t-font-weight-normal);
869
- color:var(--tds-radio-label-color);
870
- cursor:var(--tds-radio-cursor);
973
+ .tds-page-header-email{
974
+ max-width:100%;
975
+ overflow:hidden;
976
+ text-overflow:ellipsis;
977
+ }
978
+
979
+ @keyframes indicator-pulse{
980
+ 0%{
981
+ opacity:.3;
982
+ transform:scale(.9);
871
983
  }
872
984
 
873
- .tds-radio input[type="radio"]{
874
- position:relative;
875
- width:1em;
876
- height:1em;
877
- margin:calc((1lh - 1em) / 2) 0 0;
878
- font-size:var(--tds-radio-font-size);
879
- line-height:inherit;
880
- -webkit-appearance:none;
881
- -moz-appearance:none;
882
- appearance:none;
883
- cursor:var(--tds-radio-cursor);
884
- background-color:var(--tds-radio-input-background-color);
885
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
886
- border-radius:var(--tds-radio-input-border-radius);
887
- transition-timing-function:var(--t-ease-in-out);
888
- transition-duration:var(--t-duration-200);
889
- transition-property:var(--tds-radio-transition-property);
985
+ 100%{
986
+ opacity:0;
987
+ transform:scale(1.75);
890
988
  }
989
+ }
891
990
 
892
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
893
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
894
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
895
- }
991
+ .tds-radio-group{
992
+ --tds-radio-group-font-size:var(--t-font-size-md);
993
+ --tds-radio-group-line-height:1.4;
994
+ --tds-radio-group-gap:var(--t-spacing-1);
896
995
 
897
- :is(.tds-radio input[type="radio"]):focus-visible{
898
- outline:var(--t-focus-ring-outline);
899
- outline-offset:var(--t-focus-ring-offset);
900
- }
996
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
901
997
 
902
- :is(.tds-radio input[type="radio"]):disabled{
903
- pointer-events:none;
904
- }
998
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
999
+ --tds-radio-group-description-line-height:1.35;
1000
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1001
+ --tds-radio-group-description-invalid-icon-display:none;
1002
+ display:flex;
1003
+ flex-direction:column;
1004
+ gap:var(--tds-radio-group-gap);
1005
+ padding:0;
1006
+ margin:0;
905
1007
 
906
- @media (prefers-reduced-motion: reduce){
1008
+ font-size:var(--tds-radio-group-font-size);
1009
+ line-height:var(--tds-radio-group-line-height);
1010
+ border:0;
1011
+ }
907
1012
 
908
- .tds-radio input[type="radio"]{
909
- --tds-radio-transition-property:none;
1013
+ .tds-radio-group legend{
1014
+ padding:0;
1015
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
910
1016
  }
911
- }
912
1017
 
913
- .tds-radio:has(input:checked){
914
- --tds-radio-input-background-color:var(--t-form-background-color);
915
- --tds-radio-input-border-color:var(--t-border-color-control-info);
916
- --tds-radio-input-border-width:4px;
1018
+ .tds-radio-group:has(.tds-radio-group-description){
1019
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
917
1020
  }
918
1021
 
919
- .tds-radio:has(input:checked) input:hover:not(:disabled){
920
- --tds-radio-input-background-color:var(--t-form-background-color);
921
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
922
- }
923
-
924
- .tds-radio:has(input:user-invalid){
925
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1022
+ .tds-radio-group[aria-invalid="true"]{
1023
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1024
+ --tds-radio-group-description-invalid-icon-display:inline-block;
926
1025
  }
927
1026
 
928
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
929
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
930
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1027
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1028
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
931
1029
  }
932
1030
 
933
- .tds-radio:has(input:disabled){
934
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
935
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1031
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1032
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1033
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1034
+ }
936
1035
 
937
- --tds-radio-label-color:var(--t-form-color-disabled);
938
- --tds-radio-description-color:var(--t-form-color-disabled);
939
- --tds-radio-cursor:not-allowed;
940
- }
1036
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1037
+ --tds-radio-input-background-color:var(--t-form-background-color);
1038
+ }
941
1039
 
942
- .tds-radio:has(input:disabled) input:checked{
943
- --tds-radio-input-background-color:var(--t-form-background-color);
944
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1040
+ .tds-radio-group:has(input:required) legend::after{
1041
+ margin-left:.25ch;
1042
+ color:var(--t-text-color-status-error);
1043
+ content:"*";
945
1044
  }
946
1045
 
947
- .tds-radio-description{
1046
+ .tds-radio-group-fields{
1047
+ display:flex;
1048
+ flex-direction:column;
1049
+ gap:var(--tds-radio-group-gap);
1050
+ align-items:flex-start;
1051
+ }
1052
+
1053
+ .tds-radio-group-description{
948
1054
  display:flex;
949
- grid-area:2 / 2;
950
1055
  gap:var(--t-spacing-half);
951
1056
  align-items:flex-start;
952
1057
  margin:0;
953
- font-size:var(--tds-radio-description-font-size);
954
- line-height:var(--tds-radio-description-line-height);
955
- color:var(--tds-radio-description-color);
1058
+ font-size:var(--tds-radio-group-description-font-size);
1059
+ line-height:var(--tds-radio-group-description-line-height);
1060
+ color:var(--tds-radio-group-description-color);
956
1061
  cursor:text;
957
1062
  }
958
1063
 
959
- .tds-radio--sm{
960
- --tds-radio-line-height:1.35;
961
- --tds-radio-input-size:var(--t-element-size-sm);
962
- --tds-radio-font-size:var(--t-font-size-sm);
963
- --tds-radio-description-font-size:var(--t-font-size-xs);
964
- --tds-radio-description-line-height:1.3;
1064
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1065
+ display:var(--tds-radio-group-description-invalid-icon-display);
1066
+ flex-shrink:0;
1067
+ margin-top:calc(.5lh - .5em);
1068
+ line-height:var(--tds-radio-group-description-line-height);
1069
+ }
1070
+
1071
+ .tds-radio-group--sm{
1072
+ --tds-radio-group-line-height:1.35;
1073
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1074
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1075
+ --tds-radio-group-description-line-height:1.3;
965
1076
  }
966
1077
 
967
1078
  .tds-input:has(textarea){
@@ -1210,117 +1321,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1210
1321
  --tds-toggle-switch-display:inline-flex;
1211
1322
  }
1212
1323
 
1213
- .tds-radio-group{
1214
- --tds-radio-group-font-size:var(--t-font-size-md);
1215
- --tds-radio-group-line-height:1.4;
1216
- --tds-radio-group-gap:var(--t-spacing-1);
1217
-
1218
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1219
-
1220
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
1221
- --tds-radio-group-description-line-height:1.35;
1222
- --tds-radio-group-description-color:var(--t-text-color-secondary);
1223
- --tds-radio-group-description-invalid-icon-display:none;
1224
- display:flex;
1225
- flex-direction:column;
1226
- gap:var(--tds-radio-group-gap);
1227
- padding:0;
1228
- margin:0;
1229
-
1230
- font-size:var(--tds-radio-group-font-size);
1231
- line-height:var(--tds-radio-group-line-height);
1232
- border:0;
1233
- }
1234
-
1235
- .tds-radio-group legend{
1236
- padding:0;
1237
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1238
- }
1239
-
1240
- .tds-radio-group:has(.tds-radio-group-description){
1241
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1242
- }
1243
-
1244
- .tds-radio-group[aria-invalid="true"]{
1245
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1246
- --tds-radio-group-description-invalid-icon-display:inline-block;
1247
- }
1248
-
1249
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1250
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1251
- }
1252
-
1253
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1254
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1255
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1256
- }
1257
-
1258
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1259
- --tds-radio-input-background-color:var(--t-form-background-color);
1260
- }
1261
-
1262
- .tds-radio-group:has(input:required) legend::after{
1263
- margin-left:.25ch;
1264
- color:var(--t-text-color-status-error);
1265
- content:"*";
1266
- }
1267
-
1268
- .tds-radio-group-fields{
1269
- display:flex;
1270
- flex-direction:column;
1271
- gap:var(--tds-radio-group-gap);
1272
- align-items:flex-start;
1273
- }
1274
-
1275
- .tds-radio-group-description{
1276
- display:flex;
1277
- gap:var(--t-spacing-half);
1278
- align-items:flex-start;
1279
- margin:0;
1280
- font-size:var(--tds-radio-group-description-font-size);
1281
- line-height:var(--tds-radio-group-description-line-height);
1282
- color:var(--tds-radio-group-description-color);
1283
- cursor:text;
1284
- }
1285
-
1286
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1287
- display:var(--tds-radio-group-description-invalid-icon-display);
1288
- flex-shrink:0;
1289
- margin-top:calc(.5lh - .5em);
1290
- line-height:var(--tds-radio-group-description-line-height);
1291
- }
1292
-
1293
- .tds-radio-group--sm{
1294
- --tds-radio-group-line-height:1.35;
1295
- --tds-radio-group-font-size:var(--t-font-size-sm);
1296
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1297
- --tds-radio-group-description-line-height:1.3;
1298
- }
1299
-
1300
-
1301
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1302
- -webkit-appearance:none;
1303
- appearance:none;
1304
- }
1305
-
1306
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1307
- inline-size:1em;
1308
- block-size:2em;
1309
- }
1310
-
1311
- @supports (field-sizing: content){
1312
- .tds-input--auto-width{
1313
- inline-size:-moz-fit-content;
1314
- inline-size:fit-content;
1315
- min-inline-size:min(100%, 122px);
1316
- }
1317
-
1318
- .tds-input--auto-width input{
1319
- field-sizing:content;
1320
- inline-size:auto;
1321
- }
1322
- }
1323
-
1324
1324
  .tds-select{
1325
1325
  --tds-select-border-color:var(--t-form-border-color);
1326
1326
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -3320,113 +3320,35 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3320
3320
  --t-border-color-disabled:hsl(0, 0%, 21%);
3321
3321
  --t-border-color-dim:hsl(0, 0%, 16%);
3322
3322
  --t-border-color-white:hsl(0, 0%, 12%);
3323
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
3324
- --t-border-color-status-info:hsl(204, 100%, 35%);
3325
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
3326
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
3327
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
3328
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
3329
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
3330
- --t-border-color-control-info:hsl(204, 100%, 35%);
3331
- --t-border-color-control-disabled:hsl(0, 0%, 24%);
3332
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3333
- }
3334
- }
3335
-
3336
- @media (prefers-color-scheme: dark){
3337
- }
3338
-
3339
- .tds-checkbox-group{
3340
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3341
- --tds-checkbox-group-line-height:1.4;
3342
- --tds-checkbox-group-gap:var(--t-spacing-1);
3343
-
3344
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3345
-
3346
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3347
- --tds-checkbox-group-description-line-height:1.35;
3348
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3349
- --tds-checkbox-group-description-invalid-icon-display:none;
3350
- display:flex;
3351
- flex-direction:column;
3352
- gap:var(--tds-checkbox-group-gap);
3353
- padding:0;
3354
- margin:0;
3355
-
3356
- font-size:var(--tds-checkbox-group-font-size);
3357
- line-height:var(--tds-checkbox-group-line-height);
3358
- border:0;
3359
- }
3360
-
3361
- .tds-checkbox-group legend{
3362
- padding:0;
3363
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3364
- }
3365
-
3366
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3367
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3368
- }
3369
-
3370
- .tds-checkbox-group[aria-invalid="true"]{
3371
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3372
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3373
- }
3374
-
3375
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3376
- margin-left:.25ch;
3377
- color:var(--t-text-color-status-error);
3378
- content:"*";
3379
- }
3380
-
3381
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3382
- content:none;
3383
- }
3384
-
3385
- .tds-checkbox-group-fields{
3386
- display:flex;
3387
- flex-direction:column;
3388
- gap:var(--tds-checkbox-group-gap);
3389
- align-items:flex-start;
3323
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
3324
+ --t-border-color-status-info:hsl(204, 100%, 35%);
3325
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
3326
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
3327
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
3328
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
3329
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
3330
+ --t-border-color-control-info:hsl(204, 100%, 35%);
3331
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
3332
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3390
3333
  }
3391
-
3392
- .tds-checkbox-group-description{
3393
- display:flex;
3394
- gap:var(--t-spacing-half);
3395
- align-items:flex-start;
3396
- margin:0;
3397
- font-size:var(--tds-checkbox-group-description-font-size);
3398
- line-height:var(--tds-checkbox-group-description-line-height);
3399
- color:var(--tds-checkbox-group-description-color);
3400
- cursor:text;
3401
3334
  }
3402
3335
 
3403
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3404
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3405
- flex-shrink:0;
3406
- margin-top:calc(.5lh - .5em);
3407
- line-height:var(--tds-checkbox-group-description-line-height);
3408
- }
3409
-
3410
- .tds-checkbox-group--sm{
3411
- --tds-checkbox-group-line-height:1.35;
3412
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3413
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3414
- --tds-checkbox-group-description-line-height:1.3;
3336
+ @media (prefers-color-scheme: dark){
3415
3337
  }
3416
3338
 
3417
- .tds-combo-box{
3418
- --tds-combo-box-border-color:var(--t-form-border-color);
3419
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3420
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3421
- --tds-combo-box-background-color:var(--t-form-background-color);
3422
- --tds-combo-box-color:var(--t-form-color);
3423
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3424
- --tds-combo-box-font-size:var(--t-font-size-md);
3425
- --tds-combo-box-min-height:var(--t-container-size-md);
3426
- --tds-combo-box-padding-block:6px;
3427
- --tds-combo-box-button-offset:4px;
3428
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3429
- --tds-combo-box-description-invalid-icon-display:none;
3339
+ .tds-number-stepper{
3340
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3341
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3342
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3343
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3344
+ --tds-number-stepper-color:var(--t-form-color);
3345
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3346
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3347
+ --tds-number-stepper-padding-block:6px;
3348
+ --tds-number-stepper-button-offset:4px;
3349
+ --tds-number-stepper-button-gap:2px;
3350
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3351
+ --tds-number-stepper-description-invalid-icon-display:none;
3430
3352
 
3431
3353
  position:relative;
3432
3354
  display:flex;
@@ -3434,97 +3356,97 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3434
3356
  gap:var(--t-spacing-half);
3435
3357
  }
3436
3358
 
3437
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3359
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3438
3360
  margin-left:.25ch;
3439
3361
  color:var(--t-text-color-status-error);
3440
3362
  content:"*";
3441
3363
  }
3442
3364
 
3443
- .tds-combo-box[data-invalid]{
3444
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3445
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3446
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3447
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3448
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3449
- --tds-combo-box-description-invalid-icon-display:inline-block;
3365
+ .tds-number-stepper[data-invalid]{
3366
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3367
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3368
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3369
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3370
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3371
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3450
3372
  }
3451
3373
 
3452
- .tds-combo-box[data-disabled]{
3453
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3454
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3455
- --tds-combo-box-color:var(--t-form-color-disabled);
3374
+ .tds-number-stepper[data-disabled]{
3375
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3376
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3377
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3456
3378
  }
3457
3379
 
3458
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3459
- color:var(--t-form-color-disabled);
3460
- }
3461
-
3462
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3380
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3463
3381
  cursor:not-allowed;
3464
3382
  }
3465
3383
 
3466
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3467
- transform:rotate(.5turn);
3468
- }
3469
-
3470
- .tds-combo-box--lg{
3471
- --tds-combo-box-min-height:var(--t-container-size-lg);
3472
- --tds-combo-box-font-size:var(--t-font-size-lg);
3473
- --tds-combo-box-button-offset:5px;
3384
+ .tds-number-stepper--lg{
3385
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3386
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3387
+ --tds-number-stepper-button-offset:5px;
3388
+ --tds-number-stepper-button-gap:4px;
3474
3389
  }
3475
3390
 
3476
- .tds-combo-box-label{
3391
+ .tds-number-stepper-label{
3477
3392
  font-size:var(--t-font-size-md);
3478
3393
  font-weight:var(--t-font-weight-normal);
3479
3394
  color:var(--t-text-color);
3480
3395
  cursor:default;
3481
3396
  }
3482
3397
 
3483
- .tds-combo-box-field{
3398
+ .tds-number-stepper-field{
3484
3399
  display:flex;
3400
+ gap:var(--tds-number-stepper-button-gap);
3485
3401
  align-items:center;
3486
3402
  inline-size:100%;
3487
- min-block-size:var(--tds-combo-box-min-height);
3403
+ min-block-size:var(--tds-number-stepper-min-height);
3488
3404
  font-family:inherit;
3489
- font-size:var(--tds-combo-box-font-size);
3405
+ font-size:var(--tds-number-stepper-font-size);
3490
3406
  line-height:1;
3491
- color:var(--tds-combo-box-color);
3407
+ color:var(--tds-number-stepper-color);
3492
3408
  -webkit-appearance:none;
3493
3409
  -moz-appearance:none;
3494
3410
  appearance:none;
3495
3411
  cursor:default;
3496
3412
  outline:var(--t-focus-ring-width) solid transparent;
3497
3413
  outline-offset:0;
3498
- background-color:var(--tds-combo-box-background-color);
3499
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3414
+ background-color:var(--tds-number-stepper-background-color);
3415
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3500
3416
  border-radius:var(--t-form-border-radius);
3501
3417
  }
3502
3418
 
3503
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3504
- border-color:var(--tds-combo-box-border-color-hover);
3419
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3420
+ border-color:var(--tds-number-stepper-border-color-hover);
3505
3421
  }
3506
3422
 
3507
- .tds-combo-box-field[data-focus-within]{
3423
+ .tds-number-stepper-field[data-focus-within]{
3508
3424
  outline-color:var(--t-focus-ring-color);
3509
3425
  outline-offset:var(--t-focus-ring-offset);
3510
- border-color:var(--tds-combo-box-border-color-active);
3426
+ border-color:var(--tds-number-stepper-border-color-active);
3511
3427
  }
3512
3428
 
3513
- .tds-combo-box-field:has([readonly]){
3514
- --tds-input-border-color:var(--t-form-border-color-readonly);
3515
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3429
+ .tds-number-stepper-field:has([readonly]){
3430
+ --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3431
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3432
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3516
3433
  }
3517
3434
 
3518
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3435
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3519
3436
  border-color:var(--t-form-border-color-hover);
3520
3437
  }
3521
3438
 
3522
- .tds-combo-box-input{
3439
+ .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3440
+ display:none;
3441
+ }
3442
+
3443
+ .tds-number-stepper-input{
3523
3444
  display:flex;
3524
3445
  flex:1;
3525
3446
  align-items:center;
3526
- padding-block:var(--tds-combo-box-padding-block);
3527
- padding-inline-start:var(--t-spacing-1);
3447
+ min-inline-size:0;
3448
+ padding-block:var(--tds-number-stepper-padding-block);
3449
+ padding-inline:var(--t-spacing-1);
3528
3450
  font-family:inherit;
3529
3451
  font-size:inherit;
3530
3452
  color:inherit;
@@ -3533,507 +3455,523 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3533
3455
  border:0;
3534
3456
  }
3535
3457
 
3536
- .tds-combo-box-input::-moz-placeholder{
3537
- color:var(--tds-combo-box-placeholder-color);
3538
- -moz-user-select:none;
3539
- user-select:none;
3540
- }
3541
-
3542
- .tds-combo-box-input::placeholder{
3543
- color:var(--tds-combo-box-placeholder-color);
3544
- -webkit-user-select:none;
3545
- -moz-user-select:none;
3546
- user-select:none;
3458
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3459
+ margin:0;
3460
+ -webkit-appearance:none;
3461
+ appearance:none;
3547
3462
  }
3548
3463
 
3549
- .tds-combo-box-button{
3464
+ .tds-number-stepper-button{
3550
3465
  flex-shrink:0;
3551
3466
  align-self:center;
3552
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3553
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3467
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3468
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3554
3469
  padding:0;
3555
- margin-inline-end:var(--tds-combo-box-button-offset);
3556
3470
  }
3557
3471
 
3558
- .tds-combo-box-button > svg{
3559
- inline-size:var(--tds-combo-box-font-size);
3560
- block-size:var(--tds-combo-box-font-size);
3561
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3472
+ .tds-number-stepper-button:last-of-type{
3473
+ margin-inline-end:var(--tds-number-stepper-button-offset);
3562
3474
  }
3563
3475
 
3564
- .tds-combo-box-button:not(.tds-btn){
3565
- display:inline-flex;
3566
- align-items:center;
3567
- justify-content:center;
3568
- inline-size:auto;
3569
- block-size:auto;
3570
- margin-inline-end:.75em;
3571
- color:var(--t-icon-color);
3572
- cursor:default;
3573
- background:transparent;
3574
- border:0;
3476
+ .tds-number-stepper-description{
3477
+ display:flex;
3478
+ gap:var(--t-spacing-half);
3479
+ align-items:flex-start;
3480
+ margin:0;
3481
+ font-size:var(--t-font-size-sm);
3482
+ line-height:1.35;
3483
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3484
+ cursor:text;
3485
+ }
3486
+
3487
+ .tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
3488
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
3489
+ flex-shrink:0;
3490
+ margin-block-start:calc(.5lh - .5em);
3491
+ line-height:1.35;
3575
3492
  }
3576
3493
 
3577
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3578
- outline:0;
3579
- }
3580
3494
 
3581
- .tds-combo-box-popover{
3582
- width:var(--trigger-width);
3583
- max-block-size:inherit;
3584
- padding:var(--t-spacing-1);
3585
- overflow:auto;
3586
- outline:0;
3587
- scrollbar-color:#0004 #0000;
3588
- scrollbar-width:thin;
3589
- background:var(--t-surface-color-card);
3590
- background-clip:padding-box;
3591
- border:1px solid var(--t-border-color);
3592
- border-radius:var(--t-border-radius);
3593
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3594
- }
3495
+ .tds-date-picker{
3496
+ --tds-date-picker-border-color:var(--t-form-border-color);
3497
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3498
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3499
+ --tds-date-picker-background-color:var(--t-form-background-color);
3500
+ --tds-date-picker-color:var(--t-form-color);
3501
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3502
+ --tds-date-picker-font-size:var(--t-font-size-md);
3503
+ --tds-date-picker-min-height:var(--t-container-size-md);
3504
+ --tds-date-picker-padding-block:6px;
3505
+ --tds-date-picker-button-offset:4px;
3506
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3507
+ --tds-date-picker-description-invalid-icon-display:none;
3595
3508
 
3596
- .tds-combo-box-popover[data-entering]{
3597
- animation:tds-combo-box-popover-enter 160ms ease;
3598
- }
3509
+ position:relative;
3510
+ display:flex;
3511
+ flex-direction:column;
3512
+ gap:var(--t-spacing-half);
3513
+ }
3599
3514
 
3600
- .tds-combo-box-popover[data-exiting]{
3601
- animation:tds-combo-box-popover-exit 130ms ease;
3515
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
3516
+ margin-left:.25ch;
3517
+ color:var(--t-text-color-status-error);
3518
+ content:"*";
3602
3519
  }
3603
3520
 
3604
- @keyframes tds-combo-box-popover-enter{
3605
- from{
3606
- opacity:0;
3607
- transform:translateY(-8px);
3521
+ .tds-date-picker[data-invalid]{
3522
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
3523
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3524
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3525
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
3526
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
3527
+ --tds-date-picker-description-invalid-icon-display:inline-block;
3608
3528
  }
3609
- }
3610
3529
 
3611
- @keyframes tds-combo-box-popover-exit{
3612
- to{
3613
- opacity:0;
3614
- transform:translateY(-8px);
3530
+ .tds-date-picker[data-disabled]{
3531
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3532
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3533
+ --tds-date-picker-color:var(--t-form-color-disabled);
3534
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3615
3535
  }
3616
- }
3617
3536
 
3618
- @media (prefers-reduced-motion: reduce){
3619
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3620
- animation:none;
3537
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
3538
+ cursor:not-allowed;
3621
3539
  }
3622
3540
 
3623
- .tds-combo-box-button > svg{
3624
- transition:none;
3625
- }
3626
- }
3627
-
3628
- .tds-combo-box-list{
3629
- padding:0;
3630
- margin:0;
3541
+ .tds-date-picker--lg{
3542
+ --tds-date-picker-min-height:var(--t-container-size-lg);
3543
+ --tds-date-picker-font-size:var(--t-font-size-lg);
3544
+ --tds-date-picker-button-offset:5px;
3631
3545
  }
3632
3546
 
3633
- .tds-combo-box-list-item{
3634
- display:block;
3635
- padding-block:var(--t-spacing-1);
3636
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3637
- overflow:hidden;
3638
- text-overflow:ellipsis;
3639
- font-size:1rem;
3547
+ .tds-date-picker-label{
3548
+ font-size:var(--t-font-size-md);
3549
+ font-weight:var(--t-font-weight-normal);
3640
3550
  color:var(--t-text-color);
3641
- white-space:nowrap;
3642
3551
  cursor:default;
3643
- outline-offset:-1px;
3644
- border-radius:var(--t-border-radius);
3645
3552
  }
3646
3553
 
3647
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3648
- background:var(--t-fill-color-neutral-070);
3649
- }
3554
+ .tds-date-picker-field{
3555
+ display:flex;
3556
+ align-items:center;
3557
+ inline-size:100%;
3558
+ min-block-size:var(--tds-date-picker-min-height);
3559
+ font-family:inherit;
3560
+ font-size:var(--tds-date-picker-font-size);
3561
+ line-height:1;
3562
+ color:var(--tds-date-picker-color);
3563
+ -webkit-appearance:none;
3564
+ -moz-appearance:none;
3565
+ appearance:none;
3566
+ cursor:text;
3567
+ outline:var(--t-focus-ring-width) solid transparent;
3568
+ outline-offset:0;
3569
+ background-color:var(--tds-date-picker-background-color);
3570
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3571
+ border-radius:var(--t-form-border-radius);
3572
+ }
3650
3573
 
3651
- .tds-combo-box-list-item[data-selected]{
3652
- background:var(--t-fill-color-button-interaction-ghost-active);
3574
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3575
+ border-color:var(--tds-date-picker-border-color-hover);
3653
3576
  }
3654
3577
 
3655
- .tds-combo-box-list-item[data-focus-visible]{
3656
- outline:var(--t-focus-ring-outline);
3657
- outline-offset:-1px;
3578
+ .tds-date-picker-field[data-focus-within]:not(:has(.tds-date-picker-button[data-focused])){
3579
+ outline-color:var(--t-focus-ring-color);
3580
+ outline-offset:var(--t-focus-ring-offset);
3581
+ border-color:var(--tds-date-picker-border-color-active);
3658
3582
  }
3659
3583
 
3660
- .tds-combo-box-list-item[data-disabled]{
3661
- color:var(--t-form-color-disabled);
3662
- cursor:not-allowed;
3584
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3585
+ --tds-date-picker-border-color:var(--t-form-border-color-readonly);
3586
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-readonly);
3587
+ --tds-date-picker-background-color:var(--t-form-background-color-readonly);
3588
+ color:var(--t-form-color-readonly);
3663
3589
  }
3664
3590
 
3665
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3666
- background:transparent;
3591
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3592
+ border-color:var(--t-form-border-color-hover);
3667
3593
  }
3668
3594
 
3669
- .tds-combo-box-empty-state{
3670
- position:relative;
3671
- min-block-size:var(--t-spacing-3);
3672
- padding-block:var(--t-spacing-1);
3673
- padding-inline:var(--t-spacing-2);
3674
- font-size:var(--t-font-size-md);
3675
- color:var(--t-text-color-secondary);
3676
- }
3595
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]) .tds-date-picker-button{
3596
+ display:none;
3597
+ }
3677
3598
 
3678
- .tds-combo-box-load-more{
3679
- position:relative;
3680
- min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
3599
+ .tds-date-picker-input{
3600
+ flex:1;
3601
+ padding-block:var(--tds-date-picker-padding-block);
3602
+ padding-inline-start:var(--t-spacing-1);
3603
+ font-variant-numeric:tabular-nums;
3681
3604
  }
3682
3605
 
3683
- .tds-combo-box-empty-state,
3684
- .tds-combo-box-load-more{
3685
- --tds-loading-spinner-visibility:visible;
3686
- --tds-loading-spinner-animation-play-state:running;
3606
+ .tds-date-picker-segment{
3607
+ padding-inline:2px;
3608
+ caret-color:transparent;
3609
+ border-radius:var(--t-border-radius-sm);
3687
3610
  }
3688
3611
 
3689
- .tds-combo-box-list-section:not(:first-child){
3690
- margin-block-start:var(--t-spacing-half);
3612
+ .tds-date-picker-segment[data-placeholder]{
3613
+ color:var(--tds-date-picker-placeholder-color);
3691
3614
  }
3692
3615
 
3693
- .tds-combo-box-section-header{
3694
- padding-block:var(--t-spacing-1);
3695
- padding-inline:var(--t-spacing-1);
3696
- font-size:var(--t-font-size-sm);
3697
- font-weight:var(--t-font-weight-semibold);
3698
- color:var(--t-text-color-secondary);
3616
+ .tds-date-picker-segment[data-focused]{
3617
+ color:var(--t-text-color-inverted);
3618
+ outline:0;
3619
+ background:var(--t-fill-color-interaction);
3620
+ }
3621
+
3622
+ .tds-date-picker-segment-separator{
3623
+ padding-inline:0;
3624
+ color:var(--tds-date-picker-placeholder-color);
3699
3625
  }
3700
3626
 
3701
- .tds-combo-box-description{
3627
+ .tds-date-picker-description{
3702
3628
  display:flex;
3703
3629
  gap:var(--t-spacing-half);
3704
3630
  align-items:flex-start;
3705
3631
  margin:0;
3706
3632
  font-size:var(--t-font-size-sm);
3707
3633
  line-height:1.35;
3708
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3634
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3709
3635
  cursor:text;
3710
3636
  }
3711
3637
 
3712
- .tds-combo-box-description .tds-combo-box-description-invalid-icon{
3713
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3638
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3639
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
3714
3640
  flex-shrink:0;
3715
3641
  margin-block-start:calc(.5lh - .5em);
3716
3642
  line-height:1.35;
3717
3643
  }
3718
3644
 
3645
+ .tds-date-picker-button{
3646
+ flex-shrink:0;
3647
+ align-self:center;
3648
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3649
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3650
+ padding:0;
3651
+ margin-inline-end:var(--tds-date-picker-button-offset);
3652
+ }
3719
3653
 
3720
- .tds-number-stepper{
3721
- --tds-number-stepper-border-color:var(--t-form-border-color);
3722
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3723
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3724
- --tds-number-stepper-background-color:var(--t-form-background-color);
3725
- --tds-number-stepper-color:var(--t-form-color);
3726
- --tds-number-stepper-font-size:var(--t-font-size-md);
3727
- --tds-number-stepper-min-height:var(--t-container-size-md);
3728
- --tds-number-stepper-padding-block:6px;
3729
- --tds-number-stepper-button-offset:4px;
3730
- --tds-number-stepper-button-gap:2px;
3731
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
3732
- --tds-number-stepper-description-invalid-icon-display:none;
3654
+ .tds-date-picker-popover{
3655
+ --tds-date-picker-popover-font-size:var(--t-font-size-md);
3656
+ --tds-date-picker-popover-padding:var(--t-spacing-1-half);
3657
+ --tds-date-picker-popover-background-color:var(--t-surface-color-card);
3658
+ --tds-date-picker-popover-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out);
3659
+ --tds-date-picker-popover-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in);
3660
+ --tds-date-picker-popover-closed-opacity:0;
3661
+ --tds-date-picker-popover-closed-transform:translateY(-8px);
3662
+ --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
3663
+ --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
3664
+ --tds-date-picker-popover-interactive-property:color, background-color, border-color;
3733
3665
 
3734
3666
  position:relative;
3735
- display:flex;
3736
- flex-direction:column;
3737
- gap:var(--t-spacing-half);
3667
+ overflow:hidden;
3668
+ background-color:var(--tds-date-picker-popover-background-color);
3669
+ border:var(--t-border-width) solid var(--t-border-color);
3670
+ border-radius:var(--t-border-radius);
3671
+ box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
3672
+ opacity:1;
3673
+ transform:translateY(0);
3674
+ transition:var(--tds-date-picker-popover-transition-enter);
3738
3675
  }
3739
3676
 
3740
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3741
- margin-left:.25ch;
3742
- color:var(--t-text-color-status-error);
3743
- content:"*";
3677
+ .tds-date-picker-popover[data-entering]{
3678
+ opacity:var(--tds-date-picker-popover-closed-opacity);
3679
+ transform:var(--tds-date-picker-popover-closed-transform);
3744
3680
  }
3745
3681
 
3746
- .tds-number-stepper[data-invalid]{
3747
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
3748
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3749
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3750
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
3751
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
3752
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3682
+ .tds-date-picker-popover[data-exiting]{
3683
+ opacity:var(--tds-date-picker-popover-closed-opacity);
3684
+ transform:var(--tds-date-picker-popover-closed-transform);
3685
+ transition:var(--tds-date-picker-popover-transition-exit);
3753
3686
  }
3754
3687
 
3755
- .tds-number-stepper[data-disabled]{
3756
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3757
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3758
- --tds-number-stepper-color:var(--t-form-color-disabled);
3688
+ @media (prefers-reduced-motion: reduce){
3689
+
3690
+ .tds-date-picker-popover{
3691
+ --tds-date-picker-popover-transition-enter:none;
3692
+ --tds-date-picker-popover-transition-exit:none;
3693
+ --tds-date-picker-popover-closed-opacity:1;
3694
+ --tds-date-picker-popover-closed-transform:none;
3695
+ }
3759
3696
  }
3760
3697
 
3761
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3762
- cursor:not-allowed;
3763
- }
3698
+ .tds-date-picker-overlay{
3699
+ position:absolute;
3700
+ inset:0;
3701
+ z-index:1;
3702
+ display:flex;
3703
+ background-color:var(--tds-date-picker-popover-background-color);
3704
+ }
3764
3705
 
3765
- .tds-number-stepper--lg{
3766
- --tds-number-stepper-min-height:var(--t-container-size-lg);
3767
- --tds-number-stepper-font-size:var(--t-font-size-lg);
3768
- --tds-number-stepper-button-offset:5px;
3769
- --tds-number-stepper-button-gap:4px;
3706
+ .tds-date-picker-overlay-list{
3707
+ display:grid;
3708
+ flex:1;
3709
+ gap:var(--t-spacing-half);
3710
+ padding-inline:var(--tds-date-picker-popover-padding);
3711
+ outline:0;
3712
+ grid-template-columns:repeat(3, 1fr);
3713
+ scrollbar-width:thin;
3714
+ scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
3770
3715
  }
3771
3716
 
3772
- .tds-number-stepper-label{
3773
- font-size:var(--t-font-size-md);
3774
- font-weight:var(--t-font-weight-normal);
3775
- color:var(--t-text-color);
3776
- cursor:default;
3717
+ .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
3718
+ padding-bottom:var(--tds-date-picker-popover-padding);
3719
+ grid-template-rows:repeat(4, 1fr);
3777
3720
  }
3778
3721
 
3779
- .tds-number-stepper-field{
3780
- display:flex;
3781
- gap:var(--tds-number-stepper-button-gap);
3782
- align-items:center;
3783
- inline-size:100%;
3784
- min-block-size:var(--tds-number-stepper-min-height);
3785
- font-family:inherit;
3786
- font-size:var(--tds-number-stepper-font-size);
3787
- line-height:1;
3788
- color:var(--tds-number-stepper-color);
3789
- -webkit-appearance:none;
3790
- -moz-appearance:none;
3791
- appearance:none;
3722
+ .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
3723
+ padding-right:var(--t-spacing-1);
3724
+ grid-auto-rows:var(--t-container-size-xl);
3725
+ overflow-y:auto;
3726
+ scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
3727
+ }
3728
+
3729
+ .tds-date-picker-overlay-cell{
3730
+ display:flex;
3731
+ align-items:center;
3732
+ justify-content:center;
3733
+ font-family:inherit;
3734
+ font-size:var(--tds-date-picker-popover-font-size);
3735
+ color:var(--t-text-color);
3792
3736
  cursor:default;
3793
- outline:var(--t-focus-ring-width) solid transparent;
3794
- outline-offset:0;
3795
- background-color:var(--tds-number-stepper-background-color);
3796
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3797
- border-radius:var(--t-form-border-radius);
3737
+ outline:0;
3738
+ background:transparent;
3739
+ border:0;
3740
+ border-radius:var(--t-border-radius-md);
3741
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
3742
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
3743
+ transition-property:var(--tds-date-picker-popover-interactive-property);
3798
3744
  }
3799
3745
 
3800
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3801
- border-color:var(--tds-number-stepper-border-color-hover);
3746
+ .tds-date-picker-overlay-cell[data-hovered]{
3747
+ background:var(--t-fill-color-button-neutral-outline-hover);
3802
3748
  }
3803
3749
 
3804
- .tds-number-stepper-field[data-focus-within]{
3805
- outline-color:var(--t-focus-ring-color);
3806
- outline-offset:var(--t-focus-ring-offset);
3807
- border-color:var(--tds-number-stepper-border-color-active);
3750
+ .tds-date-picker-overlay-cell[data-pressed]{
3751
+ background:var(--t-fill-color-button-neutral-outline-active);
3808
3752
  }
3809
3753
 
3810
- .tds-number-stepper-field:has([readonly]){
3811
- --tds-number-stepper-border-color:var(--t-form-border-color-readonly);
3812
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-readonly);
3813
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3754
+ .tds-date-picker-overlay-cell[data-selected]{
3755
+ font-weight:var(--t-font-weight-semibold);
3756
+ color:var(--t-text-color-inverted);
3757
+ background:var(--t-fill-color-interaction);
3814
3758
  }
3815
3759
 
3816
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3817
- border-color:var(--t-form-border-color-hover);
3818
- }
3760
+ .tds-date-picker-overlay-cell[data-focus-visible]{
3761
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3762
+ }
3819
3763
 
3820
- .tds-number-stepper-field:has([readonly]) .tds-number-stepper-button{
3821
- display:none;
3822
- }
3764
+ .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
3765
+ outline-offset:var(--t-focus-ring-offset);
3766
+ }
3823
3767
 
3824
- .tds-number-stepper-input{
3768
+ .tds-date-picker-calendar-heading{
3825
3769
  display:flex;
3826
3770
  flex:1;
3771
+ gap:var(--t-spacing-half);
3827
3772
  align-items:center;
3828
- min-inline-size:0;
3829
- padding-block:var(--tds-number-stepper-padding-block);
3830
- padding-inline:var(--t-spacing-1);
3773
+ justify-content:flex-start;
3774
+ }
3775
+
3776
+ .tds-date-picker-calendar-overlay-trigger{
3777
+ padding:var(--t-spacing-half) var(--t-spacing-1);
3831
3778
  font-family:inherit;
3832
- font-size:inherit;
3833
- color:inherit;
3779
+ font-size:var(--tds-date-picker-popover-font-size);
3780
+ font-weight:var(--t-font-weight-semibold);
3781
+ color:var(--t-text-color);
3782
+ cursor:default;
3834
3783
  outline:0;
3835
3784
  background:transparent;
3836
3785
  border:0;
3786
+ border-radius:var(--t-border-radius-md);
3787
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
3788
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
3789
+ transition-property:var(--tds-date-picker-popover-interactive-property);
3837
3790
  }
3838
3791
 
3839
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3840
- margin:0;
3841
- -webkit-appearance:none;
3842
- appearance:none;
3792
+ .tds-date-picker-calendar-overlay-trigger[data-hovered]{
3793
+ background:var(--t-fill-color-button-neutral-outline-hover);
3843
3794
  }
3844
3795
 
3845
- .tds-number-stepper-button{
3846
- flex-shrink:0;
3847
- align-self:center;
3848
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3849
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3850
- padding:0;
3851
- }
3796
+ .tds-date-picker-calendar-overlay-trigger[data-pressed]{
3797
+ background:var(--t-fill-color-button-neutral-outline-active);
3798
+ }
3852
3799
 
3853
- .tds-number-stepper-button:last-of-type{
3854
- margin-inline-end:var(--tds-number-stepper-button-offset);
3800
+ .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
3801
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3802
+ outline-offset:var(--t-focus-ring-offset);
3855
3803
  }
3856
3804
 
3857
- .tds-number-stepper-description{
3858
- display:flex;
3859
- gap:var(--t-spacing-half);
3860
- align-items:flex-start;
3861
- margin:0;
3862
- font-size:var(--t-font-size-sm);
3863
- line-height:1.35;
3864
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3865
- cursor:text;
3805
+ .tds-date-picker-calendar{
3806
+ font-size:var(--tds-date-picker-popover-font-size);
3807
+ inline-size:-moz-fit-content;
3808
+ inline-size:fit-content;
3866
3809
  }
3867
3810
 
3868
- .tds-number-stepper-description .tds-number-stepper-description-invalid-icon{
3869
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
3870
- flex-shrink:0;
3871
- margin-block-start:calc(.5lh - .5em);
3872
- line-height:1.35;
3873
- }
3811
+ .tds-date-picker-calendar-body{
3812
+ position:relative;
3813
+ padding:var(--tds-date-picker-popover-padding);
3814
+ padding-block-start:0;
3815
+ }
3874
3816
 
3817
+ .tds-date-picker-calendar-header{
3818
+ display:flex;
3819
+ align-items:center;
3820
+ justify-content:space-between;
3821
+ padding:var(--tds-date-picker-popover-padding);
3822
+ }
3875
3823
 
3876
- .tds-time-field{
3877
- --tds-time-field-border-color:var(--t-form-border-color);
3878
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3879
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3880
- --tds-time-field-background-color:var(--t-form-background-color);
3881
- --tds-time-field-color:var(--t-form-color);
3882
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3883
- --tds-time-field-font-size:var(--t-font-size-md);
3884
- --tds-time-field-min-height:var(--t-container-size-md);
3885
- --tds-time-field-padding-block:6px;
3886
- --tds-time-field-description-color:var(--t-text-color-secondary);
3887
- --tds-time-field-description-invalid-icon-display:none;
3824
+ .tds-date-picker-calendar-title{
3825
+ padding:var(--t-spacing-half) var(--t-spacing-1);
3826
+ font-size:var(--tds-date-picker-popover-font-size);
3827
+ font-weight:var(--t-font-weight-semibold);
3828
+ }
3888
3829
 
3889
- position:relative;
3830
+ .tds-date-picker-calendar-title--visually-hidden{
3831
+ position:absolute;
3832
+ inline-size:1px;
3833
+ block-size:1px;
3834
+ padding:0;
3835
+ margin:-1px;
3836
+ overflow:hidden;
3837
+ white-space:nowrap;
3838
+ border:0;
3839
+ clip-path:inset(50%);
3840
+ }
3841
+
3842
+ .tds-date-picker-calendar-nav{
3843
+ font-size:var(--tds-date-picker-popover-font-size);
3890
3844
  display:flex;
3891
- flex-direction:column;
3892
- gap:var(--t-spacing-half);
3845
+ align-items:center;
3846
+ justify-content:center;
3847
+ padding:var(--t-spacing-half);
3848
+ color:var(--t-text-color);
3849
+ cursor:default;
3850
+ outline:0;
3851
+ background:transparent;
3852
+ border:0;
3853
+ border-radius:var(--t-border-radius-md);
3854
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
3855
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
3856
+ transition-property:var(--tds-date-picker-popover-interactive-property);
3893
3857
  }
3894
3858
 
3895
- .tds-time-field[data-required] .tds-time-field-label::after{
3896
- margin-left:.25ch;
3897
- color:var(--t-text-color-status-error);
3898
- content:"*";
3859
+ .tds-date-picker-calendar-nav[data-hovered]{
3860
+ background:var(--t-fill-color-button-neutral-outline-hover);
3899
3861
  }
3900
3862
 
3901
- .tds-time-field[data-invalid]{
3902
- --tds-time-field-border-color:var(--t-form-border-color-error);
3903
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3904
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3905
- --tds-time-field-background-color:var(--t-form-background-color-error);
3906
- --tds-time-field-description-color:var(--t-text-color-status-error);
3907
- --tds-time-field-description-invalid-icon-display:inline-block;
3863
+ .tds-date-picker-calendar-nav[data-pressed]{
3864
+ background:var(--t-fill-color-button-neutral-outline-active);
3908
3865
  }
3909
3866
 
3910
- .tds-time-field[data-disabled]{
3911
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3912
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3913
- --tds-time-field-color:var(--t-form-color-disabled);
3914
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3867
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3868
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3869
+ outline-offset:var(--t-focus-ring-offset);
3915
3870
  }
3916
3871
 
3917
- .tds-time-field[data-disabled] .tds-time-field-label{
3918
- color:var(--t-form-color-disabled);
3919
- }
3872
+ .tds-date-picker-calendar-nav[data-disabled]{
3873
+ color:var(--t-text-color-disabled);
3874
+ cursor:not-allowed;
3875
+ }
3920
3876
 
3921
- .tds-time-field[data-disabled] .tds-time-field-input{
3922
- cursor:not-allowed;
3923
- }
3877
+ .tds-date-picker-calendar-nav svg{
3878
+ transform:scale(0.875);
3879
+ }
3924
3880
 
3925
- .tds-time-field--lg{
3926
- --tds-time-field-min-height:var(--t-container-size-lg);
3927
- --tds-time-field-font-size:var(--t-font-size-lg);
3881
+ .tds-date-picker-calendar-nav--lg svg{
3882
+ transform:scale(1);
3928
3883
  }
3929
3884
 
3930
- .tds-time-field-label{
3931
- font-size:var(--t-font-size-md);
3932
- font-weight:var(--t-font-weight-normal);
3933
- color:var(--t-text-color);
3934
- cursor:default;
3885
+ .tds-date-picker-calendar-grid{
3886
+ border-collapse:collapse;
3935
3887
  }
3936
3888
 
3937
- .tds-time-field-input{
3938
- display:flex;
3939
- align-items:center;
3940
- inline-size:100%;
3941
- min-block-size:var(--tds-time-field-min-height);
3942
- padding-block:var(--tds-time-field-padding-block);
3943
- padding-inline:var(--t-spacing-1);
3944
- font-family:inherit;
3945
- font-size:var(--tds-time-field-font-size);
3946
- font-variant-numeric:tabular-nums;
3947
- line-height:1;
3948
- color:var(--tds-time-field-color);
3949
- cursor:text;
3950
- outline:var(--t-focus-ring-width) solid transparent;
3951
- outline-offset:0;
3952
- background-color:var(--tds-time-field-background-color);
3953
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3954
- border-radius:var(--t-form-border-radius);
3889
+ .tds-date-picker-calendar-header-cell{
3890
+ padding-block:var(--t-spacing-half);
3891
+ font-size:0.875em;
3892
+ font-weight:var(--t-font-weight-medium);
3893
+ color:var(--t-text-color-secondary);
3894
+ text-align:center;
3955
3895
  }
3956
3896
 
3957
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3958
- border-color:var(--tds-time-field-border-color-hover);
3959
- }
3897
+ .tds-date-picker-calendar-cell{
3898
+ display:flex;
3899
+ align-items:center;
3900
+ justify-content:center;
3901
+ inline-size:2.25em;
3902
+ block-size:2.25em;
3903
+ color:var(--t-text-color);
3904
+ cursor:default;
3905
+ outline:0;
3906
+ border:2px solid transparent;
3907
+ border-radius:var(--t-border-radius-md);
3908
+ position:relative;
3909
+ transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
3910
+ transition-duration:var(--tds-date-picker-popover-interactive-duration);
3911
+ transition-property:var(--tds-date-picker-popover-interactive-property);
3912
+ }
3960
3913
 
3961
- .tds-time-field-input[data-focus-within]{
3962
- outline-color:var(--t-focus-ring-color);
3963
- outline-offset:var(--t-focus-ring-offset);
3964
- border-color:var(--tds-time-field-border-color-active);
3914
+ .tds-date-picker-calendar-cell[data-today]{
3915
+ border-radius:50%;
3916
+ border-color:var(--t-border-color);
3965
3917
  }
3966
3918
 
3967
- .tds-time-field-input[data-readonly]{
3968
- color:var(--t-form-color-readonly);
3969
- background-color:var(--t-form-background-color-readonly);
3970
- border-color:var(--t-form-border-color-readonly);
3919
+ .tds-date-picker-calendar-cell[data-outside-month]{
3920
+ color:var(--t-text-color-secondary);
3971
3921
  }
3972
3922
 
3973
- .tds-time-field-input[data-readonly][data-hovered]{
3974
- border-color:var(--t-form-border-color-readonly);
3975
- }
3976
-
3977
- .tds-time-field-input[data-readonly][data-focus-within]{
3978
- outline-color:var(--t-focus-ring-color);
3979
- outline-offset:var(--t-focus-ring-offset);
3980
- border-color:var(--t-form-border-color-hover);
3981
- }
3982
-
3983
- .tds-time-field-segment{
3984
- padding-inline:1px;
3985
- font-variant-numeric:tabular-nums;
3986
- cursor:text;
3987
- caret-color:transparent;
3988
- border-radius:var(--t-border-radius-sm);
3989
- }
3923
+ .tds-date-picker-calendar-cell[data-hovered]{
3924
+ background:var(--t-fill-color-button-neutral-outline-hover);
3925
+ }
3990
3926
 
3991
- .tds-time-field-segment[data-placeholder]{
3992
- color:var(--tds-time-field-placeholder-color);
3927
+ .tds-date-picker-calendar-cell[data-pressed]{
3928
+ background:var(--t-fill-color-button-neutral-outline-active);
3993
3929
  }
3994
3930
 
3995
- .tds-time-field-segment[data-focused]{
3931
+ .tds-date-picker-calendar-cell[data-selected]{
3932
+ font-weight:var(--t-font-weight-semibold);
3996
3933
  color:var(--t-text-color-inverted);
3997
- outline:0;
3998
3934
  background:var(--t-fill-color-interaction);
3935
+ border-color:transparent;
3999
3936
  }
4000
3937
 
4001
- .tds-time-field-segment-separator{
4002
- padding-inline:0;
4003
- color:var(--tds-time-field-placeholder-color);
4004
- }
3938
+ .tds-date-picker-calendar-cell[data-unavailable]{
3939
+ color:var(--t-text-color-disabled);
3940
+ text-decoration:line-through;
3941
+ cursor:not-allowed;
3942
+ }
4005
3943
 
4006
- .tds-time-field-description{
4007
- display:flex;
4008
- gap:var(--t-spacing-half);
4009
- align-items:flex-start;
4010
- margin:0;
4011
- font-size:var(--t-font-size-sm);
4012
- line-height:1.35;
4013
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4014
- cursor:text;
4015
- }
3944
+ .tds-date-picker-calendar-cell[data-disabled]{
3945
+ color:var(--t-text-color-disabled);
3946
+ cursor:not-allowed;
3947
+ }
4016
3948
 
4017
- .tds-time-field-description .tds-time-field-description-invalid-icon{
4018
- display:var(--tds-time-field-description-invalid-icon-display, none);
4019
- flex-shrink:0;
4020
- margin-block-start:calc(.5lh - .5em);
4021
- line-height:1.35;
3949
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3950
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3951
+ outline-offset:-2px;
4022
3952
  }
4023
3953
 
4024
- .tds-date-picker{
4025
- --tds-date-picker-border-color:var(--t-form-border-color);
4026
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
4027
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
4028
- --tds-date-picker-background-color:var(--t-form-background-color);
4029
- --tds-date-picker-color:var(--t-form-color);
4030
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
4031
- --tds-date-picker-font-size:var(--t-font-size-md);
4032
- --tds-date-picker-min-height:var(--t-container-size-md);
4033
- --tds-date-picker-padding-block:6px;
4034
- --tds-date-picker-button-offset:4px;
4035
- --tds-date-picker-description-color:var(--t-text-color-secondary);
4036
- --tds-date-picker-description-invalid-icon-display:none;
3954
+ .tds-date-picker-calendar-cell[data-focus-visible][data-selected]{
3955
+ outline-offset:var(--t-focus-ring-offset);
3956
+ }
3957
+
3958
+ .tds-date-picker-popover--lg{
3959
+ --tds-date-picker-popover-font-size:var(--t-font-size-lg);
3960
+ }
3961
+
3962
+ .tds-combo-box{
3963
+ --tds-combo-box-border-color:var(--t-form-border-color);
3964
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3965
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3966
+ --tds-combo-box-background-color:var(--t-form-background-color);
3967
+ --tds-combo-box-color:var(--t-form-color);
3968
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3969
+ --tds-combo-box-font-size:var(--t-font-size-md);
3970
+ --tds-combo-box-min-height:var(--t-container-size-md);
3971
+ --tds-combo-box-padding-block:6px;
3972
+ --tds-combo-box-button-offset:4px;
3973
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3974
+ --tds-combo-box-description-invalid-icon-display:none;
4037
3975
 
4038
3976
  position:relative;
4039
3977
  display:flex;
@@ -4041,454 +3979,514 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4041
3979
  gap:var(--t-spacing-half);
4042
3980
  }
4043
3981
 
4044
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3982
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
4045
3983
  margin-left:.25ch;
4046
3984
  color:var(--t-text-color-status-error);
4047
3985
  content:"*";
4048
3986
  }
4049
3987
 
4050
- .tds-date-picker[data-invalid]{
4051
- --tds-date-picker-border-color:var(--t-form-border-color-error);
4052
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4053
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4054
- --tds-date-picker-background-color:var(--t-form-background-color-error);
4055
- --tds-date-picker-description-color:var(--t-text-color-status-error);
4056
- --tds-date-picker-description-invalid-icon-display:inline-block;
3988
+ .tds-combo-box[data-invalid]{
3989
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3990
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3991
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3992
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3993
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3994
+ --tds-combo-box-description-invalid-icon-display:inline-block;
4057
3995
  }
4058
3996
 
4059
- .tds-date-picker[data-disabled]{
4060
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4061
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4062
- --tds-date-picker-color:var(--t-form-color-disabled);
4063
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3997
+ .tds-combo-box[data-disabled]{
3998
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3999
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
4000
+ --tds-combo-box-color:var(--t-form-color-disabled);
4064
4001
  }
4065
4002
 
4066
- .tds-date-picker[data-disabled] .tds-date-picker-field{
4003
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
4004
+ color:var(--t-form-color-disabled);
4005
+ }
4006
+
4007
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
4067
4008
  cursor:not-allowed;
4068
4009
  }
4069
4010
 
4070
- .tds-date-picker--lg{
4071
- --tds-date-picker-min-height:var(--t-container-size-lg);
4072
- --tds-date-picker-font-size:var(--t-font-size-lg);
4073
- --tds-date-picker-button-offset:5px;
4011
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
4012
+ transform:rotate(.5turn);
4013
+ }
4014
+
4015
+ .tds-combo-box--lg{
4016
+ --tds-combo-box-min-height:var(--t-container-size-lg);
4017
+ --tds-combo-box-font-size:var(--t-font-size-lg);
4018
+ --tds-combo-box-button-offset:5px;
4074
4019
  }
4075
4020
 
4076
- .tds-date-picker-label{
4021
+ .tds-combo-box-label{
4077
4022
  font-size:var(--t-font-size-md);
4078
4023
  font-weight:var(--t-font-weight-normal);
4079
4024
  color:var(--t-text-color);
4080
4025
  cursor:default;
4081
4026
  }
4082
4027
 
4083
- .tds-date-picker-field{
4028
+ .tds-combo-box-field{
4084
4029
  display:flex;
4085
4030
  align-items:center;
4086
4031
  inline-size:100%;
4087
- min-block-size:var(--tds-date-picker-min-height);
4032
+ min-block-size:var(--tds-combo-box-min-height);
4088
4033
  font-family:inherit;
4089
- font-size:var(--tds-date-picker-font-size);
4034
+ font-size:var(--tds-combo-box-font-size);
4090
4035
  line-height:1;
4091
- color:var(--tds-date-picker-color);
4036
+ color:var(--tds-combo-box-color);
4092
4037
  -webkit-appearance:none;
4093
4038
  -moz-appearance:none;
4094
4039
  appearance:none;
4095
- cursor:text;
4040
+ cursor:default;
4096
4041
  outline:var(--t-focus-ring-width) solid transparent;
4097
4042
  outline-offset:0;
4098
- background-color:var(--tds-date-picker-background-color);
4099
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4043
+ background-color:var(--tds-combo-box-background-color);
4044
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
4100
4045
  border-radius:var(--t-form-border-radius);
4101
4046
  }
4102
4047
 
4103
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4104
- border-color:var(--tds-date-picker-border-color-hover);
4048
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4049
+ border-color:var(--tds-combo-box-border-color-hover);
4105
4050
  }
4106
4051
 
4107
- .tds-date-picker-field[data-focus-within]{
4052
+ .tds-combo-box-field[data-focus-within]{
4108
4053
  outline-color:var(--t-focus-ring-color);
4109
4054
  outline-offset:var(--t-focus-ring-offset);
4110
- border-color:var(--tds-date-picker-border-color-active);
4055
+ border-color:var(--tds-combo-box-border-color-active);
4111
4056
  }
4112
4057
 
4113
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4114
- color:var(--t-form-color-readonly);
4115
- background-color:var(--t-form-background-color-readonly);
4116
- border-color:var(--t-form-border-color-readonly);
4058
+ .tds-combo-box-field:has([readonly]){
4059
+ --tds-combo-box-border-color:var(--t-form-border-color-readonly);
4060
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-readonly);
4061
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
4117
4062
  }
4118
4063
 
4119
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4120
- border-color:var(--t-form-border-color-readonly);
4064
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
4065
+ border-color:var(--t-form-border-color-hover);
4121
4066
  }
4122
4067
 
4123
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4124
- outline-color:var(--t-focus-ring-color);
4125
- outline-offset:var(--t-focus-ring-offset);
4126
- border-color:var(--t-form-border-color-hover);
4068
+ .tds-combo-box-field:has([readonly]) .tds-combo-box-button{
4069
+ display:none;
4127
4070
  }
4128
4071
 
4129
- .tds-date-picker-input{
4072
+ .tds-combo-box-input{
4073
+ display:flex;
4130
4074
  flex:1;
4131
- padding-block:var(--tds-date-picker-padding-block);
4075
+ align-items:center;
4076
+ padding-block:var(--tds-combo-box-padding-block);
4132
4077
  padding-inline-start:var(--t-spacing-1);
4133
- font-variant-numeric:tabular-nums;
4078
+ font-family:inherit;
4079
+ font-size:inherit;
4080
+ color:inherit;
4081
+ outline:0;
4082
+ background:transparent;
4083
+ border:0;
4134
4084
  }
4135
4085
 
4136
- .tds-date-picker-segment{
4137
- padding-inline:2px;
4138
- caret-color:transparent;
4139
- border-radius:var(--t-border-radius-sm);
4086
+ .tds-combo-box-input::-moz-placeholder{
4087
+ color:var(--tds-combo-box-placeholder-color);
4088
+ -moz-user-select:none;
4089
+ user-select:none;
4090
+ }
4091
+
4092
+ .tds-combo-box-input::placeholder{
4093
+ color:var(--tds-combo-box-placeholder-color);
4094
+ -webkit-user-select:none;
4095
+ -moz-user-select:none;
4096
+ user-select:none;
4097
+ }
4098
+
4099
+ .tds-combo-box-button{
4100
+ flex-shrink:0;
4101
+ align-self:center;
4102
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4103
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
4104
+ padding:0;
4105
+ margin-inline-end:var(--tds-combo-box-button-offset);
4106
+ }
4107
+
4108
+ .tds-combo-box-button > svg{
4109
+ inline-size:var(--tds-combo-box-font-size);
4110
+ block-size:var(--tds-combo-box-font-size);
4111
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
4112
+ }
4113
+
4114
+ .tds-combo-box-button:not(.tds-btn){
4115
+ display:inline-flex;
4116
+ align-items:center;
4117
+ justify-content:center;
4118
+ inline-size:auto;
4119
+ block-size:auto;
4120
+ margin-inline-end:.75em;
4121
+ color:var(--t-icon-color);
4122
+ cursor:default;
4123
+ background:transparent;
4124
+ border:0;
4125
+ }
4126
+
4127
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
4128
+ outline:0;
4129
+ }
4130
+
4131
+ .tds-combo-box-popover{
4132
+ width:var(--trigger-width);
4133
+ max-block-size:inherit;
4134
+ padding:var(--t-spacing-1);
4135
+ overflow:auto;
4136
+ outline:0;
4137
+ scrollbar-color:#0004 #0000;
4138
+ scrollbar-width:thin;
4139
+ background:var(--t-surface-color-card);
4140
+ background-clip:padding-box;
4141
+ border:1px solid var(--t-border-color);
4142
+ border-radius:var(--t-border-radius);
4143
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4140
4144
  }
4141
4145
 
4142
- .tds-date-picker-segment[data-placeholder]{
4143
- color:var(--tds-date-picker-placeholder-color);
4146
+ .tds-combo-box-popover[data-entering]{
4147
+ animation:tds-combo-box-popover-enter 160ms ease;
4144
4148
  }
4145
4149
 
4146
- .tds-date-picker-segment[data-focused]{
4147
- color:var(--t-text-color-inverted);
4148
- outline:0;
4149
- background:var(--t-fill-color-interaction);
4150
+ .tds-combo-box-popover[data-exiting]{
4151
+ animation:tds-combo-box-popover-exit 130ms ease;
4150
4152
  }
4151
4153
 
4152
- .tds-date-picker-segment-separator{
4153
- padding-inline:0;
4154
- color:var(--tds-date-picker-placeholder-color);
4154
+ @keyframes tds-combo-box-popover-enter{
4155
+ from{
4156
+ opacity:0;
4157
+ transform:translateY(-8px);
4158
+ }
4155
4159
  }
4156
4160
 
4157
- .tds-date-picker-description{
4158
- display:flex;
4159
- gap:var(--t-spacing-half);
4160
- align-items:flex-start;
4161
- margin:0;
4162
- font-size:var(--t-font-size-sm);
4163
- line-height:1.35;
4164
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4165
- cursor:text;
4161
+ @keyframes tds-combo-box-popover-exit{
4162
+ to{
4163
+ opacity:0;
4164
+ transform:translateY(-8px);
4165
+ }
4166
4166
  }
4167
4167
 
4168
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4169
- display:var(--tds-date-picker-description-invalid-icon-display, none);
4170
- flex-shrink:0;
4171
- margin-block-start:calc(.5lh - .5em);
4172
- line-height:1.35;
4168
+ @media (prefers-reduced-motion: reduce){
4169
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
4170
+ animation:none;
4171
+ }
4172
+
4173
+ .tds-combo-box-button > svg{
4174
+ transition:none;
4173
4175
  }
4176
+ }
4174
4177
 
4175
- .tds-date-picker-button{
4176
- flex-shrink:0;
4177
- align-self:center;
4178
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4179
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4178
+ .tds-combo-box-list{
4180
4179
  padding:0;
4181
- margin-inline-end:var(--tds-date-picker-button-offset);
4180
+ margin:0;
4182
4181
  }
4183
4182
 
4184
- .tds-date-picker-popover{
4185
- --tds-date-picker-popover-font-size:var(--t-font-size-md);
4186
- --tds-date-picker-popover-padding:var(--t-spacing-1-half);
4187
- --tds-date-picker-popover-background-color:var(--t-surface-color-card);
4188
- --tds-date-picker-popover-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out);
4189
- --tds-date-picker-popover-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in);
4190
- --tds-date-picker-popover-closed-opacity:0;
4191
- --tds-date-picker-popover-closed-transform:translateY(-8px);
4192
- --tds-date-picker-popover-interactive-timing-function:var(--t-ease-in-out);
4193
- --tds-date-picker-popover-interactive-duration:var(--t-duration-200);
4194
- --tds-date-picker-popover-interactive-property:color, background-color, border-color;
4195
-
4196
- position:relative;
4183
+ .tds-combo-box-list-item{
4184
+ display:block;
4185
+ padding-block:var(--t-spacing-1);
4186
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4197
4187
  overflow:hidden;
4198
- background-color:var(--tds-date-picker-popover-background-color);
4199
- border:var(--t-border-width) solid var(--t-border-color);
4188
+ text-overflow:ellipsis;
4189
+ font-size:1rem;
4190
+ color:var(--t-text-color);
4191
+ white-space:nowrap;
4192
+ cursor:default;
4200
4193
  border-radius:var(--t-border-radius);
4201
- box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
4202
- opacity:1;
4203
- transform:translateY(0);
4204
- transition:var(--tds-date-picker-popover-transition-enter);
4205
4194
  }
4206
4195
 
4207
- .tds-date-picker-popover[data-entering]{
4208
- opacity:var(--tds-date-picker-popover-closed-opacity);
4209
- transform:var(--tds-date-picker-popover-closed-transform);
4196
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]),.tds-combo-box-list-item[data-focus-visible]{
4197
+ background:var(--t-fill-color-neutral-070);
4210
4198
  }
4211
4199
 
4212
- .tds-date-picker-popover[data-exiting]{
4213
- opacity:var(--tds-date-picker-popover-closed-opacity);
4214
- transform:var(--tds-date-picker-popover-closed-transform);
4215
- transition:var(--tds-date-picker-popover-transition-exit);
4200
+ .tds-combo-box-list-item[data-selected]{
4201
+ background:var(--t-fill-color-button-interaction-ghost-active);
4216
4202
  }
4217
4203
 
4218
- @media (prefers-reduced-motion: reduce){
4219
-
4220
- .tds-date-picker-popover{
4221
- --tds-date-picker-popover-transition-enter:none;
4222
- --tds-date-picker-popover-transition-exit:none;
4223
- --tds-date-picker-popover-closed-opacity:1;
4224
- --tds-date-picker-popover-closed-transform:none;
4225
- }
4204
+ .tds-combo-box-list-item[data-disabled]{
4205
+ color:var(--t-form-color-disabled);
4206
+ cursor:not-allowed;
4226
4207
  }
4227
4208
 
4228
- .tds-date-picker-overlay{
4229
- position:absolute;
4230
- inset:0;
4231
- z-index:1;
4232
- display:flex;
4233
- background-color:var(--tds-date-picker-popover-background-color);
4209
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
4210
+ background:transparent;
4211
+ }
4212
+
4213
+ .tds-combo-box-empty-state{
4214
+ position:relative;
4215
+ min-block-size:var(--t-spacing-3);
4216
+ padding-block:var(--t-spacing-1);
4217
+ padding-inline:var(--t-spacing-2);
4218
+ font-size:var(--t-font-size-md);
4219
+ color:var(--t-text-color-secondary);
4234
4220
  }
4235
4221
 
4236
- .tds-date-picker-overlay-list{
4237
- display:grid;
4238
- flex:1;
4239
- gap:var(--t-spacing-half);
4240
- padding-inline:var(--tds-date-picker-popover-padding);
4241
- outline:0;
4242
- grid-template-columns:repeat(3, 1fr);
4243
- scrollbar-width:thin;
4244
- scrollbar-color:var(--t-fill-color-transparency-dark-030) transparent;
4222
+ .tds-combo-box-load-more{
4223
+ position:relative;
4224
+ min-block-size:calc(var(--t-spacing-3) + var(--t-spacing-1));
4245
4225
  }
4246
4226
 
4247
- .tds-date-picker-overlay--month .tds-date-picker-overlay-list{
4248
- padding-bottom:var(--tds-date-picker-popover-padding);
4249
- grid-template-rows:repeat(4, 1fr);
4227
+ .tds-combo-box-empty-state,
4228
+ .tds-combo-box-load-more{
4229
+ --tds-loading-spinner-visibility:visible;
4230
+ --tds-loading-spinner-animation-play-state:running;
4250
4231
  }
4251
4232
 
4252
- .tds-date-picker-overlay--year .tds-date-picker-overlay-list{
4253
- padding-right:var(--t-spacing-1);
4254
- grid-auto-rows:var(--t-container-size-xl);
4255
- overflow-y:auto;
4256
- scroll-padding-block:calc(var(--t-focus-ring-width) + var(--t-focus-ring-offset));
4233
+ .tds-combo-box-list-section:not(:first-child){
4234
+ margin-block-start:var(--t-spacing-half);
4235
+ }
4236
+
4237
+ .tds-combo-box-section-header{
4238
+ padding-block:var(--t-spacing-1);
4239
+ padding-inline:var(--t-spacing-1);
4240
+ font-size:var(--t-font-size-sm);
4241
+ font-weight:var(--t-font-weight-semibold);
4242
+ color:var(--t-text-color-secondary);
4257
4243
  }
4258
4244
 
4259
- .tds-date-picker-overlay-cell{
4245
+ .tds-combo-box-description{
4260
4246
  display:flex;
4261
- align-items:center;
4262
- justify-content:center;
4263
- font-family:inherit;
4264
- font-size:var(--tds-date-picker-popover-font-size);
4265
- color:var(--t-text-color);
4266
- cursor:default;
4267
- outline:0;
4268
- background:transparent;
4269
- border:0;
4270
- border-radius:var(--t-border-radius-md);
4271
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4272
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4273
- transition-property:var(--tds-date-picker-popover-interactive-property);
4247
+ gap:var(--t-spacing-half);
4248
+ align-items:flex-start;
4249
+ margin:0;
4250
+ font-size:var(--t-font-size-sm);
4251
+ line-height:1.35;
4252
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4253
+ cursor:text;
4274
4254
  }
4275
4255
 
4276
- .tds-date-picker-overlay-cell[data-hovered]{
4277
- background:var(--t-fill-color-button-neutral-outline-hover);
4278
- }
4279
-
4280
- .tds-date-picker-overlay-cell[data-pressed]{
4281
- background:var(--t-fill-color-button-neutral-outline-active);
4256
+ .tds-combo-box-description .tds-combo-box-description-invalid-icon{
4257
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
4258
+ flex-shrink:0;
4259
+ margin-block-start:calc(.5lh - .5em);
4260
+ line-height:1.35;
4282
4261
  }
4283
4262
 
4284
- .tds-date-picker-overlay-cell[data-selected]{
4285
- font-weight:var(--t-font-weight-semibold);
4286
- color:var(--t-text-color-inverted);
4287
- background:var(--t-fill-color-interaction);
4288
- }
4289
4263
 
4290
- .tds-date-picker-overlay-cell[data-focus-visible]{
4291
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4292
- }
4264
+ .tds-checkbox-group{
4265
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
4266
+ --tds-checkbox-group-line-height:1.4;
4267
+ --tds-checkbox-group-gap:var(--t-spacing-1);
4293
4268
 
4294
- .tds-date-picker-overlay-cell[data-selected][data-focus-visible]{
4295
- outline-offset:var(--t-focus-ring-offset);
4296
- }
4269
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4297
4270
 
4298
- .tds-date-picker-calendar-heading{
4271
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4272
+ --tds-checkbox-group-description-line-height:1.35;
4273
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4274
+ --tds-checkbox-group-description-invalid-icon-display:none;
4299
4275
  display:flex;
4300
- flex:1;
4301
- gap:var(--t-spacing-half);
4302
- align-items:center;
4303
- justify-content:flex-start;
4304
- }
4276
+ flex-direction:column;
4277
+ gap:var(--tds-checkbox-group-gap);
4278
+ padding:0;
4279
+ margin:0;
4305
4280
 
4306
- .tds-date-picker-calendar-overlay-trigger{
4307
- padding:var(--t-spacing-half) var(--t-spacing-1);
4308
- font-family:inherit;
4309
- font-size:var(--tds-date-picker-popover-font-size);
4310
- font-weight:var(--t-font-weight-semibold);
4311
- color:var(--t-text-color);
4312
- cursor:default;
4313
- outline:0;
4314
- background:transparent;
4281
+ font-size:var(--tds-checkbox-group-font-size);
4282
+ line-height:var(--tds-checkbox-group-line-height);
4315
4283
  border:0;
4316
- border-radius:var(--t-border-radius-md);
4317
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4318
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4319
- transition-property:var(--tds-date-picker-popover-interactive-property);
4320
4284
  }
4321
4285
 
4322
- .tds-date-picker-calendar-overlay-trigger[data-hovered]{
4323
- background:var(--t-fill-color-button-neutral-outline-hover);
4286
+ .tds-checkbox-group legend{
4287
+ padding:0;
4288
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4324
4289
  }
4325
4290
 
4326
- .tds-date-picker-calendar-overlay-trigger[data-pressed]{
4327
- background:var(--t-fill-color-button-neutral-outline-active);
4291
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
4292
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4328
4293
  }
4329
4294
 
4330
- .tds-date-picker-calendar-overlay-trigger[data-focus-visible]{
4331
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4332
- outline-offset:var(--t-focus-ring-offset);
4295
+ .tds-checkbox-group[aria-invalid="true"]{
4296
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4297
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
4333
4298
  }
4334
4299
 
4335
- .tds-date-picker-calendar{
4336
- font-size:var(--tds-date-picker-popover-font-size);
4337
- inline-size:-moz-fit-content;
4338
- inline-size:fit-content;
4339
- }
4300
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4301
+ margin-left:.25ch;
4302
+ color:var(--t-text-color-status-error);
4303
+ content:"*";
4304
+ }
4305
+
4306
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4307
+ content:none;
4308
+ }
4340
4309
 
4341
- .tds-date-picker-calendar-body{
4342
- position:relative;
4343
- padding:var(--tds-date-picker-popover-padding);
4344
- padding-block-start:0;
4310
+ .tds-checkbox-group-fields{
4311
+ display:flex;
4312
+ flex-direction:column;
4313
+ gap:var(--tds-checkbox-group-gap);
4314
+ align-items:flex-start;
4345
4315
  }
4346
4316
 
4347
- .tds-date-picker-calendar-header{
4317
+ .tds-checkbox-group-description{
4348
4318
  display:flex;
4349
- align-items:center;
4350
- justify-content:space-between;
4351
- padding:var(--tds-date-picker-popover-padding);
4319
+ gap:var(--t-spacing-half);
4320
+ align-items:flex-start;
4321
+ margin:0;
4322
+ font-size:var(--tds-checkbox-group-description-font-size);
4323
+ line-height:var(--tds-checkbox-group-description-line-height);
4324
+ color:var(--tds-checkbox-group-description-color);
4325
+ cursor:text;
4352
4326
  }
4353
4327
 
4354
- .tds-date-picker-calendar-title{
4355
- padding:var(--t-spacing-half) var(--t-spacing-1);
4356
- font-size:var(--tds-date-picker-popover-font-size);
4357
- font-weight:var(--t-font-weight-semibold);
4358
- }
4328
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4329
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
4330
+ flex-shrink:0;
4331
+ margin-top:calc(.5lh - .5em);
4332
+ line-height:var(--tds-checkbox-group-description-line-height);
4333
+ }
4359
4334
 
4360
- .tds-date-picker-calendar-title--visually-hidden{
4361
- position:absolute;
4362
- inline-size:1px;
4363
- block-size:1px;
4364
- padding:0;
4365
- margin:-1px;
4366
- overflow:hidden;
4367
- white-space:nowrap;
4368
- border:0;
4369
- clip-path:inset(50%);
4335
+ .tds-checkbox-group--sm{
4336
+ --tds-checkbox-group-line-height:1.35;
4337
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
4338
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4339
+ --tds-checkbox-group-description-line-height:1.3;
4370
4340
  }
4371
4341
 
4372
- .tds-date-picker-calendar-nav{
4373
- font-size:var(--tds-date-picker-popover-font-size);
4342
+ .tds-time-field{
4343
+ --tds-time-field-border-color:var(--t-form-border-color);
4344
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4345
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4346
+ --tds-time-field-background-color:var(--t-form-background-color);
4347
+ --tds-time-field-color:var(--t-form-color);
4348
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4349
+ --tds-time-field-font-size:var(--t-font-size-md);
4350
+ --tds-time-field-min-height:var(--t-container-size-md);
4351
+ --tds-time-field-padding-block:6px;
4352
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4353
+ --tds-time-field-description-invalid-icon-display:none;
4354
+
4355
+ position:relative;
4374
4356
  display:flex;
4375
- align-items:center;
4376
- justify-content:center;
4377
- padding:var(--t-spacing-half);
4378
- color:var(--t-text-color);
4379
- cursor:default;
4380
- outline:0;
4381
- background:transparent;
4382
- border:0;
4383
- border-radius:var(--t-border-radius-md);
4384
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4385
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4386
- transition-property:var(--tds-date-picker-popover-interactive-property);
4357
+ flex-direction:column;
4358
+ gap:var(--t-spacing-half);
4387
4359
  }
4388
4360
 
4389
- .tds-date-picker-calendar-nav[data-hovered]{
4390
- background:var(--t-fill-color-button-neutral-outline-hover);
4391
- }
4392
-
4393
- .tds-date-picker-calendar-nav[data-pressed]{
4394
- background:var(--t-fill-color-button-neutral-outline-active);
4361
+ .tds-time-field[data-required] .tds-time-field-label::after{
4362
+ margin-left:.25ch;
4363
+ color:var(--t-text-color-status-error);
4364
+ content:"*";
4395
4365
  }
4396
4366
 
4397
- .tds-date-picker-calendar-nav[data-focus-visible]{
4398
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4399
- outline-offset:var(--t-focus-ring-offset);
4367
+ .tds-time-field[data-invalid]{
4368
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4369
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4370
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4371
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4372
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4373
+ --tds-time-field-description-invalid-icon-display:inline-block;
4400
4374
  }
4401
4375
 
4402
- .tds-date-picker-calendar-nav[data-disabled]{
4403
- color:var(--t-text-color-disabled);
4404
- cursor:not-allowed;
4376
+ .tds-time-field[data-disabled]{
4377
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4378
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4379
+ --tds-time-field-color:var(--t-form-color-disabled);
4380
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4405
4381
  }
4406
4382
 
4407
- .tds-date-picker-calendar-nav svg{
4408
- transform:scale(0.875);
4409
- }
4383
+ .tds-time-field[data-disabled] .tds-time-field-label{
4384
+ color:var(--t-form-color-disabled);
4385
+ }
4410
4386
 
4411
- .tds-date-picker-calendar-nav--lg svg{
4412
- transform:scale(1);
4413
- }
4387
+ .tds-time-field[data-disabled] .tds-time-field-input{
4388
+ cursor:not-allowed;
4389
+ }
4414
4390
 
4415
- .tds-date-picker-calendar-grid{
4416
- border-collapse:collapse;
4391
+ .tds-time-field--lg{
4392
+ --tds-time-field-min-height:var(--t-container-size-lg);
4393
+ --tds-time-field-font-size:var(--t-font-size-lg);
4417
4394
  }
4418
4395
 
4419
- .tds-date-picker-calendar-header-cell{
4420
- padding-block:var(--t-spacing-half);
4421
- font-size:0.875em;
4422
- font-weight:var(--t-font-weight-medium);
4423
- color:var(--t-text-color-secondary);
4424
- text-align:center;
4396
+ .tds-time-field-label{
4397
+ font-size:var(--t-font-size-md);
4398
+ font-weight:var(--t-font-weight-normal);
4399
+ color:var(--t-text-color);
4400
+ cursor:default;
4425
4401
  }
4426
4402
 
4427
- .tds-date-picker-calendar-cell{
4403
+ .tds-time-field-input{
4428
4404
  display:flex;
4429
4405
  align-items:center;
4430
- justify-content:center;
4431
- inline-size:2.25em;
4432
- block-size:2.25em;
4433
- color:var(--t-text-color);
4434
- cursor:default;
4435
- outline:0;
4436
- border:2px solid transparent;
4437
- border-radius:var(--t-border-radius-md);
4438
- position:relative;
4439
- transition-timing-function:var(--tds-date-picker-popover-interactive-timing-function);
4440
- transition-duration:var(--tds-date-picker-popover-interactive-duration);
4441
- transition-property:var(--tds-date-picker-popover-interactive-property);
4406
+ inline-size:100%;
4407
+ min-block-size:var(--tds-time-field-min-height);
4408
+ padding-block:var(--tds-time-field-padding-block);
4409
+ padding-inline:var(--t-spacing-1);
4410
+ font-family:inherit;
4411
+ font-size:var(--tds-time-field-font-size);
4412
+ font-variant-numeric:tabular-nums;
4413
+ line-height:1;
4414
+ color:var(--tds-time-field-color);
4415
+ cursor:text;
4416
+ outline:var(--t-focus-ring-width) solid transparent;
4417
+ outline-offset:0;
4418
+ background-color:var(--tds-time-field-background-color);
4419
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4420
+ border-radius:var(--t-form-border-radius);
4442
4421
  }
4443
4422
 
4444
- .tds-date-picker-calendar-cell[data-today]{
4445
- border-radius:50%;
4446
- border-color:var(--t-border-color);
4423
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4424
+ border-color:var(--tds-time-field-border-color-hover);
4447
4425
  }
4448
4426
 
4449
- .tds-date-picker-calendar-cell[data-outside-month]{
4450
- color:var(--t-text-color-secondary);
4427
+ .tds-time-field-input[data-focus-within]{
4428
+ outline-color:var(--t-focus-ring-color);
4429
+ outline-offset:var(--t-focus-ring-offset);
4430
+ border-color:var(--tds-time-field-border-color-active);
4451
4431
  }
4452
4432
 
4453
- .tds-date-picker-calendar-cell[data-hovered]{
4454
- background:var(--t-fill-color-button-neutral-outline-hover);
4433
+ .tds-time-field-input[data-readonly]{
4434
+ color:var(--t-form-color-readonly);
4435
+ background-color:var(--t-form-background-color-readonly);
4436
+ border-color:var(--t-form-border-color-readonly);
4455
4437
  }
4456
4438
 
4457
- .tds-date-picker-calendar-cell[data-pressed]{
4458
- background:var(--t-fill-color-button-neutral-outline-active);
4459
- }
4439
+ .tds-time-field-input[data-readonly][data-hovered]{
4440
+ border-color:var(--t-form-border-color-readonly);
4441
+ }
4460
4442
 
4461
- .tds-date-picker-calendar-cell[data-selected]{
4462
- font-weight:var(--t-font-weight-semibold);
4463
- color:var(--t-text-color-inverted);
4464
- background:var(--t-fill-color-interaction);
4465
- border-color:transparent;
4466
- }
4443
+ .tds-time-field-input[data-readonly][data-focus-within]{
4444
+ outline-color:var(--t-focus-ring-color);
4445
+ outline-offset:var(--t-focus-ring-offset);
4446
+ border-color:var(--t-form-border-color-hover);
4447
+ }
4467
4448
 
4468
- .tds-date-picker-calendar-cell[data-unavailable]{
4469
- color:var(--t-text-color-disabled);
4470
- text-decoration:line-through;
4471
- cursor:not-allowed;
4472
- }
4449
+ .tds-time-field-segment{
4450
+ padding-inline:1px;
4451
+ font-variant-numeric:tabular-nums;
4452
+ cursor:text;
4453
+ caret-color:transparent;
4454
+ border-radius:var(--t-border-radius-sm);
4455
+ }
4473
4456
 
4474
- .tds-date-picker-calendar-cell[data-disabled]{
4475
- color:var(--t-text-color-disabled);
4476
- cursor:not-allowed;
4457
+ .tds-time-field-segment[data-placeholder]{
4458
+ color:var(--tds-time-field-placeholder-color);
4477
4459
  }
4478
4460
 
4479
- .tds-date-picker-calendar-cell[data-focus-visible]{
4480
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4481
- outline-offset:-2px;
4461
+ .tds-time-field-segment[data-focused]{
4462
+ color:var(--t-text-color-inverted);
4463
+ outline:0;
4464
+ background:var(--t-fill-color-interaction);
4482
4465
  }
4483
4466
 
4484
- .tds-date-picker-calendar-cell[data-focus-visible][data-selected]{
4485
- outline-offset:var(--t-focus-ring-offset);
4486
- }
4467
+ .tds-time-field-segment-separator{
4468
+ padding-inline:0;
4469
+ color:var(--tds-time-field-placeholder-color);
4470
+ }
4487
4471
 
4488
- .tds-date-picker-popover--lg{
4489
- --tds-date-picker-popover-font-size:var(--t-font-size-lg);
4472
+ .tds-time-field-description{
4473
+ display:flex;
4474
+ gap:var(--t-spacing-half);
4475
+ align-items:flex-start;
4476
+ margin:0;
4477
+ font-size:var(--t-font-size-sm);
4478
+ line-height:1.35;
4479
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4480
+ cursor:text;
4490
4481
  }
4491
4482
 
4483
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4484
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4485
+ flex-shrink:0;
4486
+ margin-block-start:calc(.5lh - .5em);
4487
+ line-height:1.35;
4488
+ }
4489
+
4492
4490
  .t-banner{
4493
4491
  --t-banner-font-size:var(--t-font-size-md);
4494
4492
  --t-banner-font-color:var(--t-text-color);