@planningcenter/tapestry 3.2.2-rc.2 → 3.2.2-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +1650 -1650
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1650 -1650
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,456 +1,482 @@
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
-
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;
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
5
+ }
11
6
 
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);
7
+ @layer t-component{
8
+ .tds-page-header{
9
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
+ --tds-page-header-color:var(--t-text-color);
12
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
16
25
 
17
- --tds-checkbox-label-color:var(--t-form-color);
26
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
18
28
 
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;
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);
23
32
 
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
- }
33
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
35
35
 
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);
42
- }
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);
43
39
 
44
- .tds-checkbox tds-indeterminate{
45
- display:flex;
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);
46
45
  }
47
46
 
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);
47
+ .tds-page-header--profile{
48
+ --tds-page-header-padding-y:20px;
65
49
  }
66
50
 
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%);
85
- }
86
-
87
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
- }
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);
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));
95
55
  }
56
+ }
96
57
 
97
- :is(.tds-checkbox input[type="checkbox"]):disabled{
98
- pointer-events:none;
58
+ @media (min-width: 600px){
59
+ .tds-page-header{
60
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
61
+ --tds-page-header-color:var(--t-text-color-secondary);
62
+ --tds-page-header-bottom-border-color:var(--t-border-color);
63
+ --tds-page-header-padding-x:var(--t-spacing-3);
64
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
+ --tds-page-header-nav-gap:var(--t-spacing-half);
66
+ --tds-page-header-nav-background:transparent;
67
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
+ --tds-page-header-nav-item-border-width:1px;
69
+ --tds-page-header-nav-item-color:var(--t-text-color);
70
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
99
75
  }
100
-
101
- @media (prefers-reduced-motion: reduce){
102
-
103
- .tds-checkbox input[type="checkbox"]{
104
- --tds-checkbox-transition-property:none;
105
76
  }
106
- }
77
+ }
107
78
 
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;
113
- }
79
+ .tds-page-header{
80
+ display:flex;
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
86
+ }
114
87
 
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
- }
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
90
+ }
119
91
 
120
- .tds-checkbox:has(input:checked){
121
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
122
94
  }
123
95
 
124
- .tds-checkbox:has(input:indeterminate){
125
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
126
98
  }
127
99
 
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;
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
101
+ display:flex;
102
+ flex-flow:row wrap;
103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
104
+ align-items:flex-start;
105
+ justify-content:flex-start;
106
+ min-width:0;
132
107
  }
133
108
 
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);
109
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
+ display:flex;
111
+ gap:var(--tds-page-header-nav-gap);
112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
+ margin:0 0 -1px;
114
+ overflow:auto;
115
+ list-style:none;
116
+ background:var(--tds-page-header-nav-background);
137
117
  }
138
118
 
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);
119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
+ position:relative;
121
+ display:inline-flex;
122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
+ font-size:var(--t-font-size-sm);
124
+ line-height:22px;
125
+ color:var(--tds-page-header-nav-item-color);
126
+ white-space:nowrap;
127
+ text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
142
138
  }
143
139
 
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);
140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
147
145
  }
148
146
 
149
- .tds-checkbox:has(input:required) label::after{
150
- margin-left:.25ch;
151
- color:var(--t-text-color-status-error);
152
- content:"*";
153
- }
147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
+ }
154
152
 
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);
153
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
+ background-color:var(--tds-page-header-nav-item-background-color-active);
155
+ border-color:var(--tds-page-header-nav-item-border-color-active);
156
+ }
158
157
 
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
- }
158
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
+ color:var(--tds-page-header-nav-item-color-disabled);
160
+ cursor:not-allowed;
161
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
+ opacity:1;
163
+ }
163
164
 
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);
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
166
167
  }
167
168
 
168
- .tds-checkbox-description{
169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
172
+ }
173
+
174
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
175
+ position:absolute;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
180
+ content:"";
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
183
+ }
184
+
185
+ @media (prefers-reduced-motion: no-preference){
186
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
+ animation:indicator-pulse 1.25s ease infinite;
188
+ }
189
+ }
190
+
191
+ .tds-page-header__title-bar{
169
192
  display:flex;
170
- grid-area:2 / 2;
171
- gap:var(--t-spacing-half);
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
172
195
  align-items:flex-start;
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;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
178
198
  }
179
199
 
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);
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
185
202
  }
186
203
 
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;
204
+ .tds-page-header__primary{
205
+ width:100%;
193
206
  }
194
207
 
195
-
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;
199
- }
200
-
201
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
202
- inline-size:1em;
203
- block-size:2em;
204
- }
205
-
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);
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
211
215
  }
212
216
 
213
- .tds-input--auto-width input{
214
- field-sizing:content;
215
- inline-size:auto;
217
+ @media (min-width: 960px){
218
+ .tds-page-header__primary{
219
+ flex:1 1 max-content;
220
+ width:auto;
221
+ min-width:0;
222
+ max-width:100%;
216
223
  }
217
- }
218
-
219
- .tds-input:has(textarea){
220
- --tds-input-padding-block:6px;
221
- --tds-input-resizer-size:var(--t-element-size-sm);
222
- --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
223
- }
224
224
 
225
- @supports (x: attr(x type(*))){
226
-
227
- .tds-input:has(textarea){
228
- --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
229
- }
225
+ .tds-page-header__title-bar,
226
+ .tds-page-header--profile .tds-page-header__title-bar{
227
+ flex-flow:row nowrap;
228
+ row-gap:12px;
229
+ align-items:flex-start;
230
230
  }
231
-
232
- .tds-input.tds-textarea--resize-vertical textarea{
233
- resize:vertical;
234
- }
235
-
236
- .tds-input.tds-textarea--resize-none textarea{
237
- resize:none;
238
- }
239
-
240
- .tds-input.tds-textarea--resize-auto textarea{
241
- resize:vertical;
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
242
233
  }
243
234
 
244
- @supports (field-sizing: content){
245
- .tds-input.tds-textarea--resize-auto textarea{
246
- field-sizing:content;
247
- resize:none;
248
- }
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
249
237
  }
250
-
251
- .tds-input textarea{
252
- --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
253
- --tds-input-scrollbar-thumb-color-hidden:transparent;
254
- --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
255
- --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
256
- --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
257
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
258
- --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
259
- --tds-input-scrollbar-thumb-border-radius:999px;
260
- --tds-input-scrollbar-thumb-border-width:3px;
261
- --tds-input-scrollbar-track-margin-block:.125rem;
262
- scrollbar-color:initial;
263
- transition-timing-function:var(--t-ease-in-out);
264
- transition-duration:var(--t-duration-200);
265
- transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
266
238
  }
267
239
 
268
- @media (pointer: fine){
269
- :is(.tds-input textarea)::-webkit-scrollbar{
270
- width:12px;
271
- height:12px;
272
- cursor:default;
273
- }
274
-
275
- :is(.tds-input textarea)::-webkit-scrollbar-thumb{
276
- cursor:default;
277
- background:var(--tds-input-scrollbar-thumb-color);
278
- background-clip:content-box;
279
- border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
280
- border-radius:var(--tds-input-scrollbar-thumb-border-radius);
281
- }
282
-
283
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
284
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
285
- }
286
-
287
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
288
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
289
- }
290
-
291
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
292
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
293
- }
294
-
295
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
296
- background:var(--tds-input-scrollbar-surface-color);
297
- }
298
-
299
- :is(.tds-input textarea)::-webkit-resizer{
300
- background:var(--tds-input-resizer-icon) no-repeat;
301
- background-position:right bottom;
302
- background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
303
- }
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
244
+ }
304
245
 
305
- :is(.tds-input textarea)::-webkit-scrollbar-track{
306
- margin-block:var(--tds-input-scrollbar-track-margin-block);
307
- cursor:default;
308
- }
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
250
+ }
309
251
 
310
- @supports (-moz-appearance: none){
311
- :is(.tds-input textarea){
312
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
313
- scrollbar-width:thin;
314
- }
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
256
+ }
315
257
 
316
- @media (hover){
317
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
318
- scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
319
- }
320
- }
321
- }
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
322
261
  }
262
+ }
323
263
 
324
- .tds-radio{
325
- --tds-radio-font-size:var(--t-font-size-md);
326
- --tds-radio-cursor:pointer;
327
- --tds-radio-line-height:1.4;
328
- --tds-radio-transition-property:border-width;
264
+ .tds-checkbox{
265
+ --tds-checkbox-font-size:var(--t-font-size-md);
266
+ --tds-checkbox-cursor:pointer;
267
+ --tds-checkbox-line-height:1.4;
268
+ --tds-checkbox-transition-property:background-color, border-color;
329
269
 
330
- --tds-radio-input-size:var(--t-element-size-md);
331
- --tds-radio-input-border-radius:var(--t-border-radius-round);
332
- --tds-radio-input-border-color:var(--t-form-border-color);
333
- --tds-radio-input-border-width:var(--t-form-border-width);
334
- --tds-radio-input-background-color:transparent;
270
+ --tds-checkbox-input-size:var(--t-element-size-md);
271
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
272
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
273
+ --tds-checkbox-input-background-color:transparent;
335
274
 
336
- --tds-radio-label-color:var(--t-form-color);
275
+ --tds-checkbox-input-icon:none;
276
+ --tds-checkbox-input-icon-visibility:hidden;
277
+ --tds-checkbox-input-icon-opacity:0;
278
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
337
279
 
338
- --tds-radio-description-font-size:var(--t-font-size-sm);
339
- --tds-radio-description-line-height:1.35;
340
- --tds-radio-description-color:var(--t-text-color-secondary);
280
+ --tds-checkbox-label-color:var(--t-form-color);
281
+
282
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
283
+ --tds-checkbox-description-line-height:1.35;
284
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
285
+ --tds-checkbox-description-invalid-icon-display:none;
341
286
 
342
287
  position:relative;
343
288
  display:inline-grid;
344
289
  grid-template-columns:auto;
345
290
  grid-auto-columns:1fr;
346
291
  gap:var(--t-spacing-fourth) var(--t-spacing-1);
347
- line-height:var(--tds-radio-line-height);
348
- cursor:var(--tds-radio-cursor);
292
+ line-height:var(--tds-checkbox-line-height);
293
+ cursor:var(--tds-checkbox-cursor);
349
294
  -webkit-user-select:none;
350
295
  -moz-user-select:none;
351
296
  user-select:none;
352
297
  }
353
298
 
354
- .tds-radio label{
299
+ .tds-checkbox label{
355
300
  grid-area:1 / 2;
356
- font-size:var(--tds-radio-font-size);
301
+ font-size:var(--tds-checkbox-font-size);
357
302
  font-weight:var(--t-font-weight-normal);
358
- color:var(--tds-radio-label-color);
359
- cursor:var(--tds-radio-cursor);
303
+ color:var(--tds-checkbox-label-color);
304
+ cursor:var(--tds-checkbox-cursor);
360
305
  }
361
306
 
362
- .tds-radio input[type="radio"]{
307
+ .tds-checkbox tds-indeterminate{
308
+ display:flex;
309
+ }
310
+
311
+ .tds-checkbox input[type="checkbox"]{
363
312
  position:relative;
364
313
  width:1em;
365
314
  height:1em;
366
315
  margin:calc((1lh - 1em) / 2) 0 0;
367
- font-size:var(--tds-radio-font-size);
316
+ font-size:var(--tds-checkbox-font-size);
368
317
  line-height:inherit;
369
318
  -webkit-appearance:none;
370
319
  -moz-appearance:none;
371
320
  appearance:none;
372
- cursor:var(--tds-radio-cursor);
373
- background-color:var(--tds-radio-input-background-color);
374
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
375
- border-radius:var(--tds-radio-input-border-radius);
321
+ cursor:var(--tds-checkbox-cursor);
322
+ background-color:var(--tds-checkbox-input-background-color);
323
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
324
+ border-radius:var(--tds-checkbox-input-border-radius);
376
325
  transition-timing-function:var(--t-ease-in-out);
377
326
  transition-duration:var(--t-duration-200);
378
- transition-property:var(--tds-radio-transition-property);
327
+ transition-property:var(--tds-checkbox-transition-property);
379
328
  }
380
329
 
381
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
382
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
383
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
330
+ :is(.tds-checkbox input[type="checkbox"])::before{
331
+ position:absolute;
332
+ top:50%;
333
+ left:50%;
334
+ visibility:var(--tds-checkbox-input-icon-visibility);
335
+ width:100%;
336
+ height:100%;
337
+ content:"";
338
+ background-color:var(--tds-checkbox-input-icon-fill);
339
+ border-radius:var(--tds-checkbox-input-border-radius);
340
+ opacity:var(--tds-checkbox-input-icon-opacity);
341
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
342
+ mask-image:var(--tds-checkbox-input-icon);
343
+ -webkit-mask-repeat:no-repeat;
344
+ mask-repeat:no-repeat;
345
+ -webkit-mask-size:contain;
346
+ mask-size:contain;
347
+ transform:translate(-50%, -50%);
384
348
  }
385
349
 
386
- :is(.tds-radio input[type="radio"]):focus-visible{
350
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
351
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
352
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
353
+ }
354
+
355
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
387
356
  outline:var(--t-focus-ring-outline);
388
357
  outline-offset:var(--t-focus-ring-offset);
389
358
  }
390
359
 
391
- :is(.tds-radio input[type="radio"]):disabled{
360
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
392
361
  pointer-events:none;
393
362
  }
394
363
 
395
364
  @media (prefers-reduced-motion: reduce){
396
365
 
397
- .tds-radio input[type="radio"]{
398
- --tds-radio-transition-property:none;
366
+ .tds-checkbox input[type="checkbox"]{
367
+ --tds-checkbox-transition-property:none;
399
368
  }
400
369
  }
401
370
 
402
- .tds-radio:has(input:checked){
403
- --tds-radio-input-background-color:var(--t-form-background-color);
404
- --tds-radio-input-border-color:var(--t-border-color-control-info);
405
- --tds-radio-input-border-width:4px;
371
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
372
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
373
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
374
+ --tds-checkbox-input-icon-visibility:visible;
375
+ --tds-checkbox-input-icon-opacity:1;
406
376
  }
407
377
 
408
- .tds-radio:has(input:checked) input:hover:not(:disabled){
409
- --tds-radio-input-background-color:var(--t-form-background-color);
410
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
378
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
379
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
380
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
411
381
  }
412
382
 
413
- .tds-radio:has(input:user-invalid){
414
- --tds-radio-input-border-color:var(--t-form-border-color-error);
383
+ .tds-checkbox:has(input:checked){
384
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
415
385
  }
416
386
 
417
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
418
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
419
- --tds-radio-input-background-color:var(--t-form-background-color-error);
387
+ .tds-checkbox:has(input:indeterminate){
388
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
389
+ }
390
+
391
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
392
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
393
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
394
+ --tds-checkbox-description-invalid-icon-display:inline-block;
395
+ }
396
+
397
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
398
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
399
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
420
400
  }
421
401
 
422
- .tds-radio:has(input:disabled){
423
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
424
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
402
+ :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{
403
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
404
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
405
+ }
425
406
 
426
- --tds-radio-label-color:var(--t-form-color-disabled);
427
- --tds-radio-description-color:var(--t-form-color-disabled);
428
- --tds-radio-cursor:not-allowed;
407
+ :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){
408
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
409
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
410
+ }
411
+
412
+ .tds-checkbox:has(input:required) label::after{
413
+ margin-left:.25ch;
414
+ color:var(--t-text-color-status-error);
415
+ content:"*";
416
+ }
417
+
418
+ .tds-checkbox:has(input:disabled){
419
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
420
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
421
+
422
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
423
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
424
+ --tds-checkbox-cursor:not-allowed;
429
425
  }
430
426
 
431
- .tds-radio:has(input:disabled) input:checked{
432
- --tds-radio-input-background-color:var(--t-form-background-color);
433
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
427
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
428
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
434
429
  }
435
430
 
436
- .tds-radio-description{
431
+ .tds-checkbox-description{
437
432
  display:flex;
438
433
  grid-area:2 / 2;
439
434
  gap:var(--t-spacing-half);
440
435
  align-items:flex-start;
441
436
  margin:0;
442
- font-size:var(--tds-radio-description-font-size);
443
- line-height:var(--tds-radio-description-line-height);
444
- color:var(--tds-radio-description-color);
437
+ font-size:var(--tds-checkbox-description-font-size);
438
+ line-height:var(--tds-checkbox-description-line-height);
439
+ color:var(--tds-checkbox-description-color);
445
440
  cursor:text;
446
441
  }
447
442
 
448
- .tds-radio--sm{
449
- --tds-radio-line-height:1.35;
450
- --tds-radio-input-size:var(--t-element-size-sm);
451
- --tds-radio-font-size:var(--t-font-size-sm);
452
- --tds-radio-description-font-size:var(--t-font-size-xs);
453
- --tds-radio-description-line-height:1.3;
443
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
444
+ display:var(--tds-checkbox-description-invalid-icon-display);
445
+ flex-shrink:0;
446
+ margin-top:calc(.5lh - .5em);
447
+ line-height:var(--tds-checkbox-description-line-height);
448
+ }
449
+
450
+ .tds-checkbox--sm{
451
+ --tds-checkbox-line-height:1.35;
452
+ --tds-checkbox-input-size:var(--t-element-size-sm);
453
+ --tds-checkbox-font-size:var(--t-font-size-sm);
454
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
455
+ --tds-checkbox-description-line-height:1.3;
456
+ }
457
+
458
+
459
+ :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{
460
+ -webkit-appearance:none;
461
+ appearance:none;
462
+ }
463
+
464
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
465
+ inline-size:1em;
466
+ block-size:2em;
467
+ }
468
+
469
+ @supports (field-sizing: content){
470
+ .tds-input--auto-width{
471
+ inline-size:-moz-fit-content;
472
+ inline-size:fit-content;
473
+ min-inline-size:min(100%, 122px);
474
+ }
475
+
476
+ .tds-input--auto-width input{
477
+ field-sizing:content;
478
+ inline-size:auto;
479
+ }
454
480
  }
455
481
 
456
482
 
@@ -815,144 +841,57 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
815
841
  flex-direction:column;
816
842
  }
817
843
 
818
- .tds-radio-group{
819
- --tds-radio-group-font-size:var(--t-font-size-md);
820
- --tds-radio-group-line-height:1.4;
821
- --tds-radio-group-gap:var(--t-spacing-1);
844
+ .tds-toggle-switch{
845
+ --tds-toggle-switch-font-size:var(--t-font-size-md);
846
+ --tds-toggle-switch-column-gap:var(--t-spacing-1);
847
+ --tds-toggle-switch-cursor:pointer;
848
+ --tds-toggle-switch-display:inline-grid;
849
+ --tds-toggle-switch-line-height:1.4;
822
850
 
823
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
851
+ --tds-toggle-switch-label-color:var(--t-form-color);
824
852
 
825
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
826
- --tds-radio-group-description-line-height:1.35;
827
- --tds-radio-group-description-color:var(--t-text-color-secondary);
828
- --tds-radio-group-description-invalid-icon-display:none;
829
- display:flex;
830
- flex-direction:column;
831
- gap:var(--tds-radio-group-gap);
832
- padding:0;
833
- margin:0;
853
+ --tds-toggle-switch-track-width:var(--t-container-size-md);
854
+ --tds-toggle-switch-track-outline:none;
855
+ --tds-toggle-switch-track-height:var(--t-container-size-xs);
856
+ --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
857
+ --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
834
858
 
835
- font-size:var(--tds-radio-group-font-size);
836
- line-height:var(--tds-radio-group-line-height);
837
- border:0;
838
- }
859
+ --tds-toggle-switch-thumb-size:var(--t-element-size-md);
860
+ --tds-toggle-switch-thumb-transform:translateX(0);
861
+ --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
839
862
 
840
- .tds-radio-group legend{
841
- padding:0;
842
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
843
- }
863
+ --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
864
+ --tds-toggle-switch-description-line-height:1.35;
865
+ --tds-toggle-switch-description-color:var(--t-text-color-secondary);
866
+ position:relative;
844
867
 
845
- .tds-radio-group:has(.tds-radio-group-description){
846
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
847
- }
868
+ display:var(--tds-toggle-switch-display);
869
+ grid-template-columns:auto;
870
+ grid-auto-columns:1fr;
871
+ gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
872
+ -webkit-user-select:none;
873
+ -moz-user-select:none;
874
+ user-select:none;
875
+ }
848
876
 
849
- .tds-radio-group[aria-invalid="true"]{
850
- --tds-radio-group-description-color:var(--t-text-color-status-error);
851
- --tds-radio-group-description-invalid-icon-display:inline-block;
877
+ .tds-toggle-switch input[type="checkbox"]{
878
+ position:absolute;
879
+ width:var(--tds-toggle-switch-track-width);
880
+ height:var(--tds-toggle-switch-track-height);
881
+ margin:0;
882
+ -webkit-appearance:none;
883
+ -moz-appearance:none;
884
+ appearance:none;
885
+ cursor:var(--tds-toggle-switch-cursor);
886
+ outline:var(--tds-toggle-switch-track-outline);
887
+ outline-offset:var(--t-focus-ring-offset);
888
+ background-color:transparent;
889
+ border:0;
890
+ border-radius:var(--t-border-radius-round);
852
891
  }
853
892
 
854
- .tds-radio-group[aria-invalid="true"] .tds-radio{
855
- --tds-radio-input-border-color:var(--t-form-border-color-error);
856
- }
857
-
858
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
859
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
860
- --tds-radio-input-background-color:var(--t-form-background-color-error);
861
- }
862
-
863
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
864
- --tds-radio-input-background-color:var(--t-form-background-color);
865
- }
866
-
867
- .tds-radio-group:has(input:required) legend::after{
868
- margin-left:.25ch;
869
- color:var(--t-text-color-status-error);
870
- content:"*";
871
- }
872
-
873
- .tds-radio-group-fields{
874
- display:flex;
875
- flex-direction:column;
876
- gap:var(--tds-radio-group-gap);
877
- align-items:flex-start;
878
- }
879
-
880
- .tds-radio-group-description{
881
- display:flex;
882
- gap:var(--t-spacing-half);
883
- align-items:flex-start;
884
- margin:0;
885
- font-size:var(--tds-radio-group-description-font-size);
886
- line-height:var(--tds-radio-group-description-line-height);
887
- color:var(--tds-radio-group-description-color);
888
- cursor:text;
889
- }
890
-
891
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
892
- display:var(--tds-radio-group-description-invalid-icon-display);
893
- flex-shrink:0;
894
- margin-top:calc(.5lh - .5em);
895
- line-height:var(--tds-radio-group-description-line-height);
896
- }
897
-
898
- .tds-radio-group--sm{
899
- --tds-radio-group-line-height:1.35;
900
- --tds-radio-group-font-size:var(--t-font-size-sm);
901
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
902
- --tds-radio-group-description-line-height:1.3;
903
- }
904
-
905
- .tds-toggle-switch{
906
- --tds-toggle-switch-font-size:var(--t-font-size-md);
907
- --tds-toggle-switch-column-gap:var(--t-spacing-1);
908
- --tds-toggle-switch-cursor:pointer;
909
- --tds-toggle-switch-display:inline-grid;
910
- --tds-toggle-switch-line-height:1.4;
911
-
912
- --tds-toggle-switch-label-color:var(--t-form-color);
913
-
914
- --tds-toggle-switch-track-width:var(--t-container-size-md);
915
- --tds-toggle-switch-track-outline:none;
916
- --tds-toggle-switch-track-height:var(--t-container-size-xs);
917
- --tds-toggle-switch-track-background-color:var(--t-form-toggle-color);
918
- --tds-toggle-switch-track-transition:background-color var(--t-duration-100) var(--t-ease-in-out);
919
-
920
- --tds-toggle-switch-thumb-size:var(--t-element-size-md);
921
- --tds-toggle-switch-thumb-transform:translateX(0);
922
- --tds-toggle-switch-thumb-transition:transform var(--t-duration-200) var(--t-ease-in-out);
923
-
924
- --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
925
- --tds-toggle-switch-description-line-height:1.35;
926
- --tds-toggle-switch-description-color:var(--t-text-color-secondary);
927
- position:relative;
928
-
929
- display:var(--tds-toggle-switch-display);
930
- grid-template-columns:auto;
931
- grid-auto-columns:1fr;
932
- gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
933
- -webkit-user-select:none;
934
- -moz-user-select:none;
935
- user-select:none;
936
- }
937
-
938
- .tds-toggle-switch input[type="checkbox"]{
939
- position:absolute;
940
- width:var(--tds-toggle-switch-track-width);
941
- height:var(--tds-toggle-switch-track-height);
942
- margin:0;
943
- -webkit-appearance:none;
944
- -moz-appearance:none;
945
- appearance:none;
946
- cursor:var(--tds-toggle-switch-cursor);
947
- outline:var(--tds-toggle-switch-track-outline);
948
- outline-offset:var(--t-focus-ring-offset);
949
- background-color:transparent;
950
- border:0;
951
- border-radius:var(--t-border-radius-round);
952
- }
953
-
954
- :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
955
- --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
893
+ :is(.tds-toggle-switch input[type="checkbox"]):focus-visible{
894
+ --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
956
895
  }
957
896
 
958
897
  .tds-toggle-switch label{
@@ -1043,699 +982,760 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1043
982
  --tds-toggle-switch-display:inline-flex;
1044
983
  }
1045
984
 
1046
- .tds-select{
1047
- --tds-select-border-color:var(--t-form-border-color);
1048
- --tds-select-border-color-hover:var(--t-form-border-color-hover);
1049
- --tds-select-border-color-active:var(--t-form-border-color-hover);
1050
- --tds-select-background-color:var(--t-form-background-color);
1051
- --tds-select-color:var(--t-form-color);
1052
- --tds-select-placeholder-color:var(--t-form-placeholder-color);
1053
- --tds-select-font-size:var(--t-font-size-md);
1054
- --tds-select-min-height:var(--t-container-size-md);
1055
- --tds-select-padding-block:6px;
1056
- --tds-select-description-color:var(--t-text-color-secondary);
1057
- --tds-select-description-invalid-icon-display:none;
1058
- --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1059
- --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1060
- --tds-select-caret-size:1em;
1061
- --tds-select-caret-inline-offset:.75em;
1062
- --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
985
+ .tds-radio{
986
+ --tds-radio-font-size:var(--t-font-size-md);
987
+ --tds-radio-cursor:pointer;
988
+ --tds-radio-line-height:1.4;
989
+ --tds-radio-transition-property:border-width;
1063
990
 
1064
- --tds-select-dropdown-background-color:var(--t-surface-color-card);
1065
- --tds-select-dropdown-border:1px solid var(--t-border-color);
1066
- --tds-select-dropdown-padding:var(--t-spacing-1);
1067
- --tds-select-dropdown-margin-block:5px;
1068
- --tds-select-dropdown-scrollbar-color:#0004 #0000;
1069
- --tds-select-dropdown-scrollbar-width:thin;
1070
- --tds-select-dropdown-border-radius:var(--t-border-radius);
1071
- --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1072
- --tds-select-dropdown-scroll-behavior:smooth;
1073
- --tds-select-dropdown-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1074
- --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1075
- --tds-select-dropdown-closed-opacity:0;
1076
- --tds-select-dropdown-open-opacity:1;
1077
- --tds-select-dropdown-closed-transform:translateY(-8px);
1078
- --tds-select-dropdown-open-transform:translateY(0);
991
+ --tds-radio-input-size:var(--t-element-size-md);
992
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
993
+ --tds-radio-input-border-color:var(--t-form-border-color);
994
+ --tds-radio-input-border-width:var(--t-form-border-width);
995
+ --tds-radio-input-background-color:transparent;
1079
996
 
1080
- --tds-select-option-gap:var(--t-spacing-1);
1081
- --tds-select-option-padding-block:var(--t-spacing-1);
1082
- --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1083
- --tds-select-option-font-size:1rem;
1084
- --tds-select-option-color:var(--t-text-color);
1085
- --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1086
- --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1087
- --tds-select-option-border-radius:var(--t-border-radius);
997
+ --tds-radio-label-color:var(--t-form-color);
1088
998
 
1089
- --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1090
- --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1091
- --tds-select-group-label-padding-inline:var(--t-spacing-1);
1092
- --tds-select-group-label-font-size:var(--t-font-size-sm);
1093
- --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1094
- --tds-select-group-label-letter-spacing:0;
1095
- --tds-select-group-label-color:var(--t-text-color-secondary);
1096
- --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1097
- --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1098
- --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
999
+ --tds-radio-description-font-size:var(--t-font-size-sm);
1000
+ --tds-radio-description-line-height:1.35;
1001
+ --tds-radio-description-color:var(--t-text-color-secondary);
1099
1002
 
1100
1003
  position:relative;
1101
- display:flex;
1102
- flex-direction:column;
1103
- gap:var(--t-spacing-half);
1004
+ display:inline-grid;
1005
+ grid-template-columns:auto;
1006
+ grid-auto-columns:1fr;
1007
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
1008
+ line-height:var(--tds-radio-line-height);
1009
+ cursor:var(--tds-radio-cursor);
1010
+ -webkit-user-select:none;
1011
+ -moz-user-select:none;
1012
+ user-select:none;
1104
1013
  }
1105
1014
 
1106
- .tds-select :is(label,.tds-select-label){
1107
- font-size:var(--t-font-size-md);
1015
+ .tds-radio label{
1016
+ grid-area:1 / 2;
1017
+ font-size:var(--tds-radio-font-size);
1108
1018
  font-weight:var(--t-font-weight-normal);
1109
- color:var(--t-text-color);
1110
- cursor:default;
1019
+ color:var(--tds-radio-label-color);
1020
+ cursor:var(--tds-radio-cursor);
1111
1021
  }
1112
1022
 
1113
- .tds-select :is(select,button){
1023
+ .tds-radio input[type="radio"]{
1114
1024
  position:relative;
1115
- place-items:center;
1116
- inline-size:100%;
1117
- min-block-size:var(--tds-select-min-height);
1118
- padding-block:var(--tds-select-padding-block);
1119
- padding-inline:var(--t-spacing-1);
1120
- padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1121
- font-family:inherit;
1122
- font-size:var(--tds-select-font-size);
1123
- line-height:1;
1124
- color:var(--tds-select-color);
1125
- text-align:left;
1025
+ width:1em;
1026
+ height:1em;
1027
+ margin:calc((1lh - 1em) / 2) 0 0;
1028
+ font-size:var(--tds-radio-font-size);
1029
+ line-height:inherit;
1126
1030
  -webkit-appearance:none;
1127
1031
  -moz-appearance:none;
1128
1032
  appearance:none;
1129
- cursor:var(--tds-select-cursor, default);
1130
- outline:var(--t-focus-ring-width) solid transparent;
1131
- outline-offset:0;
1132
- background-color:var(--tds-select-background-color);
1133
- background-image:var(--tds-select-background-image);
1134
- background-repeat:no-repeat;
1135
- background-position:right var(--tds-select-caret-inline-offset) top 50%;
1136
- background-size:var(--tds-select-caret-size);
1137
- border:var(--t-form-border-width) solid var(--tds-select-border-color);
1138
- border-radius:var(--t-form-border-radius);
1033
+ cursor:var(--tds-radio-cursor);
1034
+ background-color:var(--tds-radio-input-background-color);
1035
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1036
+ border-radius:var(--tds-radio-input-border-radius);
1139
1037
  transition-timing-function:var(--t-ease-in-out);
1140
- transition-duration:var(--t-duration-300);
1141
- transition-property:var(--tds-select-transition-property);
1038
+ transition-duration:var(--t-duration-200);
1039
+ transition-property:var(--tds-radio-transition-property);
1142
1040
  }
1143
1041
 
1144
- :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1145
- border-color:var(--tds-select-border-color-hover);
1042
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1043
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1044
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1146
1045
  }
1147
1046
 
1148
- :is(.tds-select :is(select,button)):focus{
1149
- outline-color:var(--t-focus-ring-color);
1047
+ :is(.tds-radio input[type="radio"]):focus-visible{
1048
+ outline:var(--t-focus-ring-outline);
1150
1049
  outline-offset:var(--t-focus-ring-offset);
1151
- border-color:var(--tds-select-border-color-active);
1152
1050
  }
1153
1051
 
1154
- :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1155
- color:var(--tds-select-placeholder-color);
1052
+ :is(.tds-radio input[type="radio"]):disabled{
1053
+ pointer-events:none;
1156
1054
  }
1157
1055
 
1158
- .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1159
- --tds-select-border-color:var(--t-form-border-color-error);
1160
- --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1161
- --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1162
- --tds-select-background-color:var(--t-form-background-color-error);
1163
- --tds-select-description-color:var(--t-text-color-status-error);
1164
- --tds-select-description-invalid-icon-display:inline-block;
1165
- }
1056
+ @media (prefers-reduced-motion: reduce){
1166
1057
 
1167
- .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1168
- margin-left:.25ch;
1169
- color:var(--t-text-color-status-error);
1170
- content:"*";
1058
+ .tds-radio input[type="radio"]{
1059
+ --tds-radio-transition-property:none;
1060
+ }
1171
1061
  }
1172
1062
 
1173
- .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1174
- --tds-select-border-color:var(--t-form-border-color-disabled);
1175
- --tds-select-background-color:var(--t-form-background-color-disabled);
1176
- --tds-select-color:var(--t-form-color-disabled);
1177
- --tds-select-cursor:not-allowed;
1063
+ .tds-radio:has(input:checked){
1064
+ --tds-radio-input-background-color:var(--t-form-background-color);
1065
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1066
+ --tds-radio-input-border-width:4px;
1178
1067
  }
1179
1068
 
1180
- .tds-select:has( > [popover]:popover-open) > button{
1181
- border-color:var(--tds-select-border-color-active);
1182
- }
1183
-
1184
- :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1185
- transform:rotate(.5turn);
1069
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1070
+ --tds-radio-input-background-color:var(--t-form-background-color);
1071
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1186
1072
  }
1187
1073
 
1188
- .tds-select :is(hr,li[role="separator"]){
1189
- margin-block:var(--t-spacing-half);
1190
- color:var(--tds-select-border-color);
1191
- border:0;
1192
- border-top:1px solid;
1074
+ .tds-radio:has(input:user-invalid){
1075
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1193
1076
  }
1194
1077
 
1195
- .tds-select :is(li[role="option"],option:not([hidden])){
1196
- display:block;
1197
- padding-block:var(--tds-select-option-padding-block);
1198
- padding-inline:var(--tds-select-option-padding-inline);
1199
- overflow:hidden;
1200
- text-overflow:ellipsis;
1201
- font-size:var(--tds-select-option-font-size);
1202
- color:var(--tds-select-option-color);
1203
- white-space:nowrap;
1204
- cursor:default;
1205
- border-radius:var(--tds-select-option-border-radius);
1078
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1079
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1080
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1081
+ }
1082
+
1083
+ .tds-radio:has(input:disabled){
1084
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1085
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1086
+
1087
+ --tds-radio-label-color:var(--t-form-color-disabled);
1088
+ --tds-radio-description-color:var(--t-form-color-disabled);
1089
+ --tds-radio-cursor:not-allowed;
1206
1090
  }
1207
1091
 
1208
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1209
- outline:none;
1092
+ .tds-radio:has(input:disabled) input:checked{
1093
+ --tds-radio-input-background-color:var(--t-form-background-color);
1094
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1210
1095
  }
1211
1096
 
1212
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1213
- background:var(--tds-select-option-background-hover);
1214
- }
1097
+ .tds-radio-description{
1098
+ display:flex;
1099
+ grid-area:2 / 2;
1100
+ gap:var(--t-spacing-half);
1101
+ align-items:flex-start;
1102
+ margin:0;
1103
+ font-size:var(--tds-radio-description-font-size);
1104
+ line-height:var(--tds-radio-description-line-height);
1105
+ color:var(--tds-radio-description-color);
1106
+ cursor:text;
1107
+ }
1215
1108
 
1216
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1217
- background:var(--tds-select-option-background-active);
1218
- }
1109
+ .tds-radio--sm{
1110
+ --tds-radio-line-height:1.35;
1111
+ --tds-radio-input-size:var(--t-element-size-sm);
1112
+ --tds-radio-font-size:var(--t-font-size-sm);
1113
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1114
+ --tds-radio-description-line-height:1.3;
1115
+ }
1219
1116
 
1220
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1221
- color:var(--t-form-color-disabled);
1222
- cursor:not-allowed;
1223
- }
1117
+ .tds-radio-group{
1118
+ --tds-radio-group-font-size:var(--t-font-size-md);
1119
+ --tds-radio-group-line-height:1.4;
1120
+ --tds-radio-group-gap:var(--t-spacing-1);
1224
1121
 
1225
- :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1226
- background:transparent;
1227
- }
1122
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1228
1123
 
1229
- .tds-select :is(li[role="presentation"],legend){
1230
- position:sticky;
1231
- inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1232
- z-index:1;
1233
- float:inline-start;
1234
- inline-size:100%;
1235
- padding-block:var(--tds-select-group-label-padding-block);
1236
- padding-inline:var(--tds-select-group-label-padding-inline);
1237
- container-type:scroll-state;
1238
- font-size:var(--tds-select-group-label-font-size);
1239
- font-weight:var(--tds-select-group-label-font-weight);
1240
- letter-spacing:var(--tds-select-group-label-letter-spacing);
1241
- background:var(--tds-select-group-label-background);
1242
- text-box:trim-both cap alphabetic;
1243
- }
1124
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1125
+ --tds-radio-group-description-line-height:1.35;
1126
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1127
+ --tds-radio-group-description-invalid-icon-display:none;
1128
+ display:flex;
1129
+ flex-direction:column;
1130
+ gap:var(--tds-radio-group-gap);
1131
+ padding:0;
1132
+ margin:0;
1244
1133
 
1245
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1246
- display:inline-flex;
1247
- gap:var(--t-spacing-half);
1248
- align-items:center;
1249
- color:var(--tds-select-group-label-color);
1250
- transition:var(--tds-select-group-label-transition);
1251
- }
1134
+ font-size:var(--tds-radio-group-font-size);
1135
+ line-height:var(--tds-radio-group-line-height);
1136
+ border:0;
1137
+ }
1252
1138
 
1253
- @container scroll-state(stuck){
1139
+ .tds-radio-group legend{
1140
+ padding:0;
1141
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1142
+ }
1254
1143
 
1255
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1256
- color:var(--tds-select-group-label-color-stuck);
1257
- }
1144
+ .tds-radio-group:has(.tds-radio-group-description){
1145
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1146
+ }
1258
1147
 
1259
- @media (forced-colors: active){
1148
+ .tds-radio-group[aria-invalid="true"]{
1149
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1150
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1151
+ }
1260
1152
 
1261
- :is(.tds-select :is(li[role="presentation"],legend)) span{
1262
- color:var(--tds-select-group-label-color-stuck);
1153
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1154
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1263
1155
  }
1264
- }
1156
+
1157
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1158
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1159
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1265
1160
  }
1266
1161
 
1267
- .tds-select.tds-select--lg{
1268
- --tds-select-min-height:var(--t-container-size-lg);
1269
- --tds-select-font-size:var(--t-font-size-lg);
1270
- }
1162
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1163
+ --tds-radio-input-background-color:var(--t-form-background-color);
1164
+ }
1271
1165
 
1272
- @media (prefers-reduced-motion: reduce){
1166
+ .tds-radio-group:has(input:required) legend::after{
1167
+ margin-left:.25ch;
1168
+ color:var(--t-text-color-status-error);
1169
+ content:"*";
1170
+ }
1273
1171
 
1274
- .tds-select{
1275
- --tds-select-transition-property:none;
1276
- --tds-select-dropdown-transition-enter:none;
1277
- --tds-select-dropdown-transition-exit:none;
1278
- --tds-select-dropdown-scroll-behavior:auto;
1279
- --tds-select-dropdown-closed-transform:none;
1280
- --tds-select-dropdown-open-transform:none;
1281
- --tds-select-caret-transition:none;
1172
+ .tds-radio-group-fields{
1173
+ display:flex;
1174
+ flex-direction:column;
1175
+ gap:var(--tds-radio-group-gap);
1176
+ align-items:flex-start;
1282
1177
  }
1283
- }
1284
1178
 
1285
- .tds-select-description{
1179
+ .tds-radio-group-description{
1286
1180
  display:flex;
1287
1181
  gap:var(--t-spacing-half);
1288
1182
  align-items:flex-start;
1289
1183
  margin:0;
1290
- font-size:var(--t-font-size-sm);
1291
- line-height:1.35;
1292
- color:var(--tds-select-description-color, var(--t-text-color-secondary));
1184
+ font-size:var(--tds-radio-group-description-font-size);
1185
+ line-height:var(--tds-radio-group-description-line-height);
1186
+ color:var(--tds-radio-group-description-color);
1293
1187
  cursor:text;
1294
1188
  }
1295
1189
 
1296
- .tds-select-description .tds-select-description-invalid-icon{
1297
- display:var(--tds-select-description-invalid-icon-display, none);
1190
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1191
+ display:var(--tds-radio-group-description-invalid-icon-display);
1298
1192
  flex-shrink:0;
1299
- margin-block-start:calc(.5lh - .5em);
1300
- line-height:1.35;
1193
+ margin-top:calc(.5lh - .5em);
1194
+ line-height:var(--tds-radio-group-description-line-height);
1301
1195
  }
1302
1196
 
1303
- .tds-select > .tds-select-hidden-select{
1304
- position:absolute;
1305
- inline-size:1px;
1306
- block-size:1px;
1307
- padding:0;
1308
- margin:0;
1309
- pointer-events:none;
1310
- opacity:0;
1197
+ .tds-radio-group--sm{
1198
+ --tds-radio-group-line-height:1.35;
1199
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1200
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1201
+ --tds-radio-group-description-line-height:1.3;
1311
1202
  }
1312
1203
 
1313
- .tds-select:has( > button) > button{
1314
- display:block;
1315
- padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1316
- overflow:hidden;
1317
- text-overflow:ellipsis;
1318
- color:var(--tds-select-placeholder-color);
1319
- white-space:nowrap;
1320
- background-image:none;
1321
- transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1322
- -webkit-tap-highlight-color:transparent;
1204
+ .tds-input:has(textarea){
1205
+ --tds-input-padding-block:6px;
1206
+ --tds-input-resizer-size:var(--t-element-size-sm);
1207
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
1208
+ }
1209
+
1210
+ @supports (x: attr(x type(*))){
1211
+
1212
+ .tds-input:has(textarea){
1213
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
1214
+ }
1323
1215
  }
1324
1216
 
1325
- :is(.tds-select:has( > button) > button)::after{
1326
- position:absolute;
1327
- inset-block:0;
1328
- inset-inline-end:var(--tds-select-caret-inline-offset);
1329
- width:var(--tds-select-caret-size);
1330
- height:var(--tds-select-caret-size);
1331
- margin-block:auto;
1332
- pointer-events:none;
1333
- content:var(--tds-select-background-image);
1334
- transform:rotate(0);
1335
- transition:var(--tds-select-caret-transition);
1217
+ .tds-input.tds-textarea--resize-vertical textarea{
1218
+ resize:vertical;
1336
1219
  }
1337
1220
 
1338
- .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1339
- color:var(--tds-select-color);
1340
- }
1221
+ .tds-input.tds-textarea--resize-none textarea{
1222
+ resize:none;
1223
+ }
1341
1224
 
1342
- .tds-select:has( > button) [popover]{
1343
- inset:auto;
1344
- inline-size:-moz-max-content;
1345
- inline-size:max-content;
1346
- min-inline-size:anchor-size(width);
1347
- max-inline-size:100vi;
1348
- max-block-size:min(50vh, 20rem);
1349
- padding:var(--tds-select-dropdown-padding);
1350
- margin-block:var(--tds-select-dropdown-margin-block);
1351
- position-area:block-end span-inline-start;
1352
- position-try-fallbacks:flip-block, flip-inline;
1353
- overflow:auto;
1354
- overflow-x:hidden;
1355
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1356
- -webkit-user-select:none;
1357
- -moz-user-select:none;
1358
- user-select:none;
1359
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1360
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1361
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1362
- background:var(--tds-select-dropdown-background-color);
1363
- border:var(--tds-select-dropdown-border);
1364
- border-radius:var(--tds-select-dropdown-border-radius);
1365
- box-shadow:var(--tds-select-dropdown-box-shadow);
1366
- opacity:var(--tds-select-dropdown-open-opacity);
1367
- transform:var(--tds-select-dropdown-open-transform);
1368
- transition:var(--tds-select-dropdown-transition-enter);
1369
- }
1370
-
1371
- :is(.tds-select:has( > button) [popover]):not(:popover-open){
1372
- opacity:var(--tds-select-dropdown-closed-opacity);
1373
- transform:var(--tds-select-dropdown-closed-transform);
1374
- transition:var(--tds-select-dropdown-transition-exit);
1375
- }
1376
-
1377
- :is(.tds-select:has( > button) [popover]) ul{
1378
- padding:0;
1379
- margin:0;
1380
- list-style:none;
1225
+ .tds-input.tds-textarea--resize-auto textarea{
1226
+ resize:vertical;
1381
1227
  }
1382
1228
 
1383
- @starting-style{
1384
- :is(.tds-select:has( > button) [popover]):popover-open{
1385
- opacity:var(--tds-select-dropdown-closed-opacity);
1386
- transform:var(--tds-select-dropdown-closed-transform);
1229
+ @supports (field-sizing: content){
1230
+ .tds-input.tds-textarea--resize-auto textarea{
1231
+ field-sizing:content;
1232
+ resize:none;
1387
1233
  }
1388
1234
  }
1389
1235
 
1390
- @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1391
- .tds-select select:has(> button){
1392
- padding-inline-end:0;
1393
- background-image:none;
1394
- }
1395
- @media (hover) and (pointer: fine){
1396
- :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1397
- padding-block:0;
1398
- -webkit-appearance:base-select;
1399
- -moz-appearance:base-select;
1400
- appearance:base-select;
1401
- }
1402
- }
1403
- :is(.tds-select select:has( > button))::picker-icon{
1404
- flex-shrink:0;
1405
- width:var(--tds-select-caret-size);
1406
- height:var(--tds-select-caret-size);
1407
- margin-inline-end:var(--tds-select-caret-inline-offset);
1408
- content:var(--tds-select-background-image);
1409
- transition:var(--tds-select-caret-transition);
1236
+ .tds-input textarea{
1237
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
1238
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
1239
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
1240
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
1241
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
1242
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
1243
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
1244
+ --tds-input-scrollbar-thumb-border-radius:999px;
1245
+ --tds-input-scrollbar-thumb-border-width:3px;
1246
+ --tds-input-scrollbar-track-margin-block:.125rem;
1247
+ scrollbar-color:initial;
1248
+ transition-timing-function:var(--t-ease-in-out);
1249
+ transition-duration:var(--t-duration-200);
1250
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
1251
+ }
1252
+
1253
+ @media (pointer: fine){
1254
+ :is(.tds-input textarea)::-webkit-scrollbar{
1255
+ width:12px;
1256
+ height:12px;
1257
+ cursor:default;
1410
1258
  }
1411
1259
 
1412
- :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1413
- opacity:var(--tds-select-dropdown-closed-opacity);
1414
- transform:var(--tds-select-dropdown-closed-transform);
1415
- transition:var(--tds-select-dropdown-transition-exit);
1260
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
1261
+ cursor:default;
1262
+ background:var(--tds-input-scrollbar-thumb-color);
1263
+ background-clip:content-box;
1264
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
1265
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
1416
1266
  }
1417
1267
 
1418
- :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1419
- outline-color:var(--t-focus-ring-color);
1420
- outline-offset:var(--t-focus-ring-offset);
1421
- border-color:var(--tds-select-border-color-active);
1268
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1422
1270
  }
1423
1271
 
1424
- :is(.tds-select select:has( > button)):open::picker-icon{
1425
- opacity:1;
1426
- transform:rotate(.5turn);
1272
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1427
1274
  }
1428
1275
 
1429
- :is(.tds-select select:has( > button)) selectedcontent{
1430
- overflow:hidden;
1431
- text-overflow:ellipsis;
1432
- line-height:calc(var(--tds-select-min-height) - 2px);
1433
- white-space:nowrap;
1276
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1434
1278
  }
1435
1279
 
1436
- :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1437
- color:var(--tds-select-placeholder-color);
1280
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
+ background:var(--tds-input-scrollbar-surface-color);
1438
1282
  }
1439
1283
 
1440
- :is(.tds-select select:has( > button))::picker(select){
1441
- inset:auto;
1442
- inline-size:-moz-max-content;
1443
- inline-size:max-content;
1444
- min-inline-size:anchor-size(width);
1445
- max-inline-size:100vi;
1446
- padding:var(--tds-select-dropdown-padding);
1447
- margin-block:var(--tds-select-dropdown-margin-block);
1448
- position-try-fallbacks:flip-block, flip-inline;
1449
- overflow:auto;
1450
- overflow-x:hidden;
1451
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1452
- -webkit-user-select:none;
1453
- -moz-user-select:none;
1454
- user-select:none;
1455
- scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1456
- scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1457
- background:var(--tds-select-dropdown-background-color);
1458
- border:var(--tds-select-dropdown-border);
1459
- border-radius:var(--tds-select-dropdown-border-radius);
1460
- box-shadow:var(--tds-select-dropdown-box-shadow);
1461
- opacity:var(--tds-select-dropdown-open-opacity);
1462
- transform:var(--tds-select-dropdown-open-transform);
1463
- transition:var(--tds-select-dropdown-transition-enter);
1284
+ :is(.tds-input textarea)::-webkit-resizer{
1285
+ background:var(--tds-input-resizer-icon) no-repeat;
1286
+ background-position:right bottom;
1287
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
1464
1288
  }
1465
1289
 
1466
- :is(.tds-select select:has( > button)) option::checkmark{
1467
- display:none;
1290
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
+ cursor:default;
1468
1293
  }
1469
1294
 
1470
- @starting-style{
1471
- :is(.tds-select select:has( > button))::picker(select):popover-open{
1472
- opacity:var(--tds-select-dropdown-closed-opacity);
1473
- transform:var(--tds-select-dropdown-closed-transform);
1295
+ @supports (-moz-appearance: none){
1296
+ :is(.tds-input textarea){
1297
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
1298
+ scrollbar-width:thin;
1474
1299
  }
1475
- }
1476
- }
1477
1300
 
1478
- @layer t-critical{
1479
- tds-page-header:not(.hydrated){
1480
- display:none;
1301
+ @media (hover){
1302
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1303
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
1304
+ }
1305
+ }
1306
+ }
1481
1307
  }
1482
- }
1483
-
1484
- @layer t-component{
1485
- .tds-page-header{
1486
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1487
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1488
- --tds-page-header-color:var(--t-text-color);
1489
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1490
- --tds-page-header-headline-color:var(--t-text-color-headline);
1491
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1492
- --tds-page-header-padding-x:var(--t-spacing-2);
1493
- --tds-page-header-padding-y:var(--t-spacing-2);
1494
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1495
- --tds-page-header-nav-gap:var(--t-spacing-1);
1496
- --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%);
1497
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1498
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1499
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1500
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1501
- --tds-page-header-nav-item-border-width:1px;
1502
1308
 
1503
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1504
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1309
+ .tds-select{
1310
+ --tds-select-border-color:var(--t-form-border-color);
1311
+ --tds-select-border-color-hover:var(--t-form-border-color-hover);
1312
+ --tds-select-border-color-active:var(--t-form-border-color-hover);
1313
+ --tds-select-background-color:var(--t-form-background-color);
1314
+ --tds-select-color:var(--t-form-color);
1315
+ --tds-select-placeholder-color:var(--t-form-placeholder-color);
1316
+ --tds-select-font-size:var(--t-font-size-md);
1317
+ --tds-select-min-height:var(--t-container-size-md);
1318
+ --tds-select-padding-block:6px;
1319
+ --tds-select-description-color:var(--t-text-color-secondary);
1320
+ --tds-select-description-invalid-icon-display:none;
1321
+ --tds-select-transition-property:background-color, border-color, outline-color, outline-offset;
1322
+ --tds-select-background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLDZsLTUsNWwtNSwtNXoiIGZpbGw9IiMzRDNEM0QiLz48L3N2Zz4=");
1323
+ --tds-select-caret-size:1em;
1324
+ --tds-select-caret-inline-offset:.75em;
1325
+ --tds-select-caret-transition:transform var(--t-duration-300) var(--t-ease-in-out);
1505
1326
 
1506
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1507
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1508
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1327
+ --tds-select-dropdown-background-color:var(--t-surface-color-card);
1328
+ --tds-select-dropdown-border:1px solid var(--t-border-color);
1329
+ --tds-select-dropdown-padding:var(--t-spacing-1);
1330
+ --tds-select-dropdown-margin-block:5px;
1331
+ --tds-select-dropdown-scrollbar-color:#0004 #0000;
1332
+ --tds-select-dropdown-scrollbar-width:thin;
1333
+ --tds-select-dropdown-border-radius:var(--t-border-radius);
1334
+ --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
1335
+ --tds-select-dropdown-scroll-behavior:smooth;
1336
+ --tds-select-dropdown-transition-enter:opacity var(--t-duration-300) var(--t-ease-out), transform var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
1337
+ --tds-select-dropdown-transition-exit:opacity var(--t-duration-200) var(--t-ease-in), transform var(--t-duration-200) var(--t-ease-in), display var(--t-duration-200) allow-discrete, overlay var(--t-duration-200) allow-discrete;
1338
+ --tds-select-dropdown-closed-opacity:0;
1339
+ --tds-select-dropdown-open-opacity:1;
1340
+ --tds-select-dropdown-closed-transform:translateY(-8px);
1341
+ --tds-select-dropdown-open-transform:translateY(0);
1509
1342
 
1510
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1511
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1343
+ --tds-select-option-gap:var(--t-spacing-1);
1344
+ --tds-select-option-padding-block:var(--t-spacing-1);
1345
+ --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
1346
+ --tds-select-option-font-size:1rem;
1347
+ --tds-select-option-color:var(--t-text-color);
1348
+ --tds-select-option-background-hover:var(--t-fill-color-neutral-070);
1349
+ --tds-select-option-background-active:var(--t-fill-color-button-interaction-ghost-active);
1350
+ --tds-select-option-border-radius:var(--t-border-radius);
1512
1351
 
1513
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1514
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1515
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1352
+ --tds-select-group-label-padding-block-start:var(--t-spacing-2);
1353
+ --tds-select-group-label-padding-block:var(--tds-select-group-label-padding-block-start) var(--t-spacing-1);
1354
+ --tds-select-group-label-padding-inline:var(--t-spacing-1);
1355
+ --tds-select-group-label-font-size:var(--t-font-size-sm);
1356
+ --tds-select-group-label-font-weight:var(--t-font-weight-semibold);
1357
+ --tds-select-group-label-letter-spacing:0;
1358
+ --tds-select-group-label-color:var(--t-text-color-secondary);
1359
+ --tds-select-group-label-color-stuck:var(--t-text-color-headline);
1360
+ --tds-select-group-label-background:var(--tds-select-dropdown-background-color);
1361
+ --tds-select-group-label-transition:color var(--t-duration-200) var(--t-ease-in-out);
1516
1362
 
1517
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1518
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1519
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1520
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1521
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1522
- }
1363
+ position:relative;
1364
+ display:flex;
1365
+ flex-direction:column;
1366
+ gap:var(--t-spacing-half);
1367
+ }
1523
1368
 
1524
- .tds-page-header--profile{
1525
- --tds-page-header-padding-y:20px;
1369
+ .tds-select :is(label,.tds-select-label){
1370
+ font-size:var(--t-font-size-md);
1371
+ font-weight:var(--t-font-weight-normal);
1372
+ color:var(--t-text-color);
1373
+ cursor:default;
1526
1374
  }
1527
1375
 
1528
- @supports (color: light-dark(#fff, #000)){
1529
- .tds-page-header{
1530
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1531
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1532
- }
1533
- }
1376
+ .tds-select :is(select,button){
1377
+ position:relative;
1378
+ place-items:center;
1379
+ inline-size:100%;
1380
+ min-block-size:var(--tds-select-min-height);
1381
+ padding-block:var(--tds-select-padding-block);
1382
+ padding-inline:var(--t-spacing-1);
1383
+ padding-inline-end:calc(var(--t-spacing-1) + var(--tds-select-caret-size) + .5em);
1384
+ font-family:inherit;
1385
+ font-size:var(--tds-select-font-size);
1386
+ line-height:1;
1387
+ color:var(--tds-select-color);
1388
+ text-align:left;
1389
+ -webkit-appearance:none;
1390
+ -moz-appearance:none;
1391
+ appearance:none;
1392
+ cursor:var(--tds-select-cursor, default);
1393
+ outline:var(--t-focus-ring-width) solid transparent;
1394
+ outline-offset:0;
1395
+ background-color:var(--tds-select-background-color);
1396
+ background-image:var(--tds-select-background-image);
1397
+ background-repeat:no-repeat;
1398
+ background-position:right var(--tds-select-caret-inline-offset) top 50%;
1399
+ background-size:var(--tds-select-caret-size);
1400
+ border:var(--t-form-border-width) solid var(--tds-select-border-color);
1401
+ border-radius:var(--t-form-border-radius);
1402
+ transition-timing-function:var(--t-ease-in-out);
1403
+ transition-duration:var(--t-duration-300);
1404
+ transition-property:var(--tds-select-transition-property);
1405
+ }
1534
1406
 
1535
- @media (min-width: 600px){
1536
- .tds-page-header{
1537
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1538
- --tds-page-header-color:var(--t-text-color-secondary);
1539
- --tds-page-header-bottom-border-color:var(--t-border-color);
1540
- --tds-page-header-padding-x:var(--t-spacing-3);
1541
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1542
- --tds-page-header-nav-gap:var(--t-spacing-half);
1543
- --tds-page-header-nav-background:transparent;
1544
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1545
- --tds-page-header-nav-item-border-width:1px;
1546
- --tds-page-header-nav-item-color:var(--t-text-color);
1547
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1548
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1549
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1550
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1551
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1407
+ :is(.tds-select :is(select,button)):hover:not(:disabled,:focus,:focus-visible,:focus-within,:active,:open){
1408
+ border-color:var(--tds-select-border-color-hover);
1409
+ }
1410
+
1411
+ :is(.tds-select :is(select,button)):focus{
1412
+ outline-color:var(--t-focus-ring-color);
1413
+ outline-offset:var(--t-focus-ring-offset);
1414
+ border-color:var(--tds-select-border-color-active);
1415
+ }
1416
+
1417
+ :is(.tds-select :is(select,button)):required:invalid,:is(.tds-select :is(select,button)):has(option[hidden][disabled][value=""]:checked){
1418
+ color:var(--tds-select-placeholder-color);
1552
1419
  }
1420
+
1421
+ .tds-select:has(select:user-invalid,[aria-invalid="true"]),.tds-select.tds-select--invalid{
1422
+ --tds-select-border-color:var(--t-form-border-color-error);
1423
+ --tds-select-border-color-hover:var(--t-form-border-color-error-hover);
1424
+ --tds-select-border-color-active:var(--t-form-border-color-error-hover);
1425
+ --tds-select-background-color:var(--t-form-background-color-error);
1426
+ --tds-select-description-color:var(--t-text-color-status-error);
1427
+ --tds-select-description-invalid-icon-display:inline-block;
1553
1428
  }
1554
- }
1555
1429
 
1556
- .tds-page-header{
1557
- display:flex;
1558
- flex-direction:column;
1559
- padding-top:var(--tds-page-header-padding-y);
1560
- color:var(--tds-page-header-color);
1561
- background:var(--tds-page-header-background-color);
1562
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1563
- }
1430
+ .tds-select:has(select:required,[aria-required="true"]) :is(label,.tds-select-label)::after{
1431
+ margin-left:.25ch;
1432
+ color:var(--t-text-color-status-error);
1433
+ content:"*";
1434
+ }
1564
1435
 
1565
- .tds-page-header:not(.has-nav){
1566
- padding-bottom:var(--tds-page-header-padding-y);
1436
+ .tds-select:has(:is(select,button[role="combobox"]):is(:disabled,[aria-disabled="true"])){
1437
+ --tds-select-border-color:var(--t-form-border-color-disabled);
1438
+ --tds-select-background-color:var(--t-form-background-color-disabled);
1439
+ --tds-select-color:var(--t-form-color-disabled);
1440
+ --tds-select-cursor:not-allowed;
1567
1441
  }
1568
1442
 
1569
- .tds-page-header.inactive{
1570
- background:var(--tds-page-header-background-color-inactive);
1443
+ .tds-select:has( > [popover]:popover-open) > button{
1444
+ border-color:var(--tds-select-border-color-active);
1571
1445
  }
1572
1446
 
1573
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1574
- width:100%;
1447
+ :is(.tds-select:has( > [popover]:popover-open) > button)::after{
1448
+ transform:rotate(.5turn);
1449
+ }
1450
+
1451
+ .tds-select :is(hr,li[role="separator"]){
1452
+ margin-block:var(--t-spacing-half);
1453
+ color:var(--tds-select-border-color);
1454
+ border:0;
1455
+ border-top:1px solid;
1575
1456
  }
1576
1457
 
1577
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1578
- display:flex;
1579
- flex-flow:row wrap;
1580
- gap:var(--t-spacing-half) var(--t-spacing-1);
1581
- align-items:flex-start;
1582
- justify-content:flex-start;
1583
- min-width:0;
1458
+ .tds-select :is(li[role="option"],option:not([hidden])){
1459
+ display:block;
1460
+ padding-block:var(--tds-select-option-padding-block);
1461
+ padding-inline:var(--tds-select-option-padding-inline);
1462
+ overflow:hidden;
1463
+ text-overflow:ellipsis;
1464
+ font-size:var(--tds-select-option-font-size);
1465
+ color:var(--tds-select-option-color);
1466
+ white-space:nowrap;
1467
+ cursor:default;
1468
+ border-radius:var(--tds-select-option-border-radius);
1584
1469
  }
1585
1470
 
1586
- :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{
1587
- display:flex;
1588
- gap:var(--tds-page-header-nav-gap);
1589
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1590
- margin:0 0 -1px;
1591
- overflow:auto;
1592
- list-style:none;
1593
- background:var(--tds-page-header-nav-background);
1471
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):focus-visible{
1472
+ outline:none;
1594
1473
  }
1595
1474
 
1596
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1597
- position:relative;
1598
- display:inline-flex;
1599
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1600
- font-size:var(--t-font-size-sm);
1601
- line-height:22px;
1602
- color:var(--tds-page-header-nav-item-color);
1603
- white-space:nowrap;
1604
- text-decoration:none;
1605
- -webkit-appearance:none;
1606
- -moz-appearance:none;
1607
- appearance:none;
1608
- cursor:pointer;
1609
- outline-offset:-2px;
1610
- background-color:var(--tds-page-header-nav-item-background-color);
1611
- background-clip:padding-box;
1612
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1613
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1614
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1475
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is(:focus,:hover,.tds-select-option--active):not([disabled],[aria-disabled="true"]){
1476
+ background:var(--tds-select-option-background-hover);
1615
1477
  }
1616
1478
 
1617
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1618
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1619
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1620
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1621
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1622
- }
1479
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-selected="true"],:checked):not([disabled],[aria-disabled="true"]){
1480
+ background:var(--tds-select-option-background-active);
1481
+ }
1623
1482
 
1624
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1625
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1626
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1627
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1628
- }
1483
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled){
1484
+ color:var(--t-form-color-disabled);
1485
+ cursor:not-allowed;
1486
+ }
1629
1487
 
1630
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1631
- background-color:var(--tds-page-header-nav-item-background-color-active);
1632
- border-color:var(--tds-page-header-nav-item-border-color-active);
1633
- }
1488
+ :is(.tds-select :is(li[role="option"],option:not([hidden]))):is([aria-disabled="true"],:disabled):is(:focus,:hover){
1489
+ background:transparent;
1490
+ }
1634
1491
 
1635
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1636
- color:var(--tds-page-header-nav-item-color-disabled);
1637
- cursor:not-allowed;
1638
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1639
- opacity:1;
1640
- }
1492
+ .tds-select :is(li[role="presentation"],legend){
1493
+ position:sticky;
1494
+ inset-block-start:calc(var(--tds-select-dropdown-padding) * -1);
1495
+ z-index:1;
1496
+ float:inline-start;
1497
+ inline-size:100%;
1498
+ padding-block:var(--tds-select-group-label-padding-block);
1499
+ padding-inline:var(--tds-select-group-label-padding-inline);
1500
+ container-type:scroll-state;
1501
+ font-size:var(--tds-select-group-label-font-size);
1502
+ font-weight:var(--tds-select-group-label-font-weight);
1503
+ letter-spacing:var(--tds-select-group-label-letter-spacing);
1504
+ background:var(--tds-select-group-label-background);
1505
+ text-box:trim-both cap alphabetic;
1506
+ }
1641
1507
 
1642
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1643
- position:relative;
1508
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1509
+ display:inline-flex;
1510
+ gap:var(--t-spacing-half);
1511
+ align-items:center;
1512
+ color:var(--tds-select-group-label-color);
1513
+ transition:var(--tds-select-group-label-transition);
1644
1514
  }
1645
1515
 
1646
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1647
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1648
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1649
- }
1516
+ @container scroll-state(stuck){
1650
1517
 
1651
- :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{
1652
- position:absolute;
1653
- top:-5px;
1654
- right:-2px;
1655
- width:10px;
1656
- height:10px;
1657
- content:"";
1658
- background:var(--tds-page-header-nav-item-indicator-color);
1659
- border-radius:50%;
1660
- }
1518
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1519
+ color:var(--tds-select-group-label-color-stuck);
1520
+ }
1661
1521
 
1662
- @media (prefers-reduced-motion: no-preference){
1663
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1664
- animation:indicator-pulse 1.25s ease infinite;
1522
+ @media (forced-colors: active){
1523
+
1524
+ :is(.tds-select :is(li[role="presentation"],legend)) span{
1525
+ color:var(--tds-select-group-label-color-stuck);
1526
+ }
1665
1527
  }
1666
1528
  }
1667
1529
 
1668
- .tds-page-header__title-bar{
1669
- display:flex;
1670
- flex-direction:column;
1671
- gap:var(--t-spacing-2) var(--t-spacing-1);
1672
- align-items:flex-start;
1673
- justify-content:space-between;
1674
- padding:0 var(--tds-page-header-padding-x);
1675
- }
1676
-
1677
- .tds-page-header--profile > .tds-page-header__title-bar{
1678
- align-items:center;
1530
+ .tds-select.tds-select--lg{
1531
+ --tds-select-min-height:var(--t-container-size-lg);
1532
+ --tds-select-font-size:var(--t-font-size-lg);
1679
1533
  }
1680
1534
 
1681
- .tds-page-header__primary{
1682
- width:100%;
1683
- }
1535
+ @media (prefers-reduced-motion: reduce){
1684
1536
 
1685
- .tds-page-header__primary h1{
1686
- margin:0;
1687
- font-size:var(--tds-page-header-headline-font-size);
1688
- font-weight:var(--t-font-weight-normal);
1689
- line-height:32px;
1690
- color:var(--tds-page-header-headline-color);
1691
- overflow-wrap:break-word;
1537
+ .tds-select{
1538
+ --tds-select-transition-property:none;
1539
+ --tds-select-dropdown-transition-enter:none;
1540
+ --tds-select-dropdown-transition-exit:none;
1541
+ --tds-select-dropdown-scroll-behavior:auto;
1542
+ --tds-select-dropdown-closed-transform:none;
1543
+ --tds-select-dropdown-open-transform:none;
1544
+ --tds-select-caret-transition:none;
1545
+ }
1692
1546
  }
1693
1547
 
1694
- @media (min-width: 960px){
1695
- .tds-page-header__primary{
1696
- flex:1 1 max-content;
1697
- width:auto;
1698
- min-width:0;
1699
- max-width:100%;
1548
+ .tds-select-description{
1549
+ display:flex;
1550
+ gap:var(--t-spacing-half);
1551
+ align-items:flex-start;
1552
+ margin:0;
1553
+ font-size:var(--t-font-size-sm);
1554
+ line-height:1.35;
1555
+ color:var(--tds-select-description-color, var(--t-text-color-secondary));
1556
+ cursor:text;
1557
+ }
1558
+
1559
+ .tds-select-description .tds-select-description-invalid-icon{
1560
+ display:var(--tds-select-description-invalid-icon-display, none);
1561
+ flex-shrink:0;
1562
+ margin-block-start:calc(.5lh - .5em);
1563
+ line-height:1.35;
1700
1564
  }
1701
1565
 
1702
- .tds-page-header__title-bar,
1703
- .tds-page-header--profile .tds-page-header__title-bar{
1704
- flex-flow:row nowrap;
1705
- row-gap:12px;
1706
- align-items:flex-start;
1566
+ .tds-select > .tds-select-hidden-select{
1567
+ position:absolute;
1568
+ inline-size:1px;
1569
+ block-size:1px;
1570
+ padding:0;
1571
+ margin:0;
1572
+ pointer-events:none;
1573
+ opacity:0;
1574
+ }
1575
+
1576
+ .tds-select:has( > button) > button{
1577
+ display:block;
1578
+ padding-inline-end:calc(var(--tds-select-caret-size) + var(--tds-select-caret-inline-offset) + .75ch);
1579
+ overflow:hidden;
1580
+ text-overflow:ellipsis;
1581
+ color:var(--tds-select-placeholder-color);
1582
+ white-space:nowrap;
1583
+ background-image:none;
1584
+ transition:background-color var(--t-duration-300) var(--t-ease-in-out), border-color var(--t-duration-300) var(--t-ease-in-out), outline-color var(--t-duration-300) var(--t-ease-in-out), outline-offset var(--t-duration-300) var(--t-ease-in-out), transform var(--t-duration-100) var(--t-ease-in-out);
1585
+ -webkit-tap-highlight-color:transparent;
1707
1586
  }
1708
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1709
- width:auto;
1587
+
1588
+ :is(.tds-select:has( > button) > button)::after{
1589
+ position:absolute;
1590
+ inset-block:0;
1591
+ inset-inline-end:var(--tds-select-caret-inline-offset);
1592
+ width:var(--tds-select-caret-size);
1593
+ height:var(--tds-select-caret-size);
1594
+ margin-block:auto;
1595
+ pointer-events:none;
1596
+ content:var(--tds-select-background-image);
1597
+ transform:rotate(0);
1598
+ transition:var(--tds-select-caret-transition);
1710
1599
  }
1711
1600
 
1712
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1713
- justify-content:flex-end;
1601
+ .tds-select:has( > button):has([role="option"][aria-selected="true"]) > button{
1602
+ color:var(--tds-select-color);
1603
+ }
1604
+
1605
+ .tds-select:has( > button) [popover]{
1606
+ inset:auto;
1607
+ inline-size:-moz-max-content;
1608
+ inline-size:max-content;
1609
+ min-inline-size:anchor-size(width);
1610
+ max-inline-size:100vi;
1611
+ max-block-size:min(50vh, 20rem);
1612
+ padding:var(--tds-select-dropdown-padding);
1613
+ margin-block:var(--tds-select-dropdown-margin-block);
1614
+ position-area:block-end span-inline-start;
1615
+ position-try-fallbacks:flip-block, flip-inline;
1616
+ overflow:auto;
1617
+ overflow-x:hidden;
1618
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1619
+ -webkit-user-select:none;
1620
+ -moz-user-select:none;
1621
+ user-select:none;
1622
+ scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
1623
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1624
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1625
+ background:var(--tds-select-dropdown-background-color);
1626
+ border:var(--tds-select-dropdown-border);
1627
+ border-radius:var(--tds-select-dropdown-border-radius);
1628
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1629
+ opacity:var(--tds-select-dropdown-open-opacity);
1630
+ transform:var(--tds-select-dropdown-open-transform);
1631
+ transition:var(--tds-select-dropdown-transition-enter);
1632
+ }
1633
+
1634
+ :is(.tds-select:has( > button) [popover]):not(:popover-open){
1635
+ opacity:var(--tds-select-dropdown-closed-opacity);
1636
+ transform:var(--tds-select-dropdown-closed-transform);
1637
+ transition:var(--tds-select-dropdown-transition-exit);
1714
1638
  }
1715
- }
1716
1639
 
1717
- .tds-page-header-phone,
1718
- .tds-page-header-email{
1719
- color:var(--tds-page-header-color);
1720
- white-space:nowrap;
1721
- }
1640
+ :is(.tds-select:has( > button) [popover]) ul{
1641
+ padding:0;
1642
+ margin:0;
1643
+ list-style:none;
1644
+ }
1722
1645
 
1723
- .tds-page-header-email{
1724
- max-width:100%;
1725
- overflow:hidden;
1726
- text-overflow:ellipsis;
1727
- }
1646
+ @starting-style{
1647
+ :is(.tds-select:has( > button) [popover]):popover-open{
1648
+ opacity:var(--tds-select-dropdown-closed-opacity);
1649
+ transform:var(--tds-select-dropdown-closed-transform);
1650
+ }
1651
+ }
1728
1652
 
1729
- @keyframes indicator-pulse{
1730
- 0%{
1731
- opacity:.3;
1732
- transform:scale(.9);
1653
+ @supports ((-webkit-appearance: base-select) or (-moz-appearance: base-select) or (appearance: base-select)){
1654
+ .tds-select select:has(> button){
1655
+ padding-inline-end:0;
1656
+ background-image:none;
1733
1657
  }
1658
+ @media (hover) and (pointer: fine){
1659
+ :is(.tds-select select:has( > button)),:is(.tds-select select:has( > button))::picker(select){
1660
+ padding-block:0;
1661
+ -webkit-appearance:base-select;
1662
+ -moz-appearance:base-select;
1663
+ appearance:base-select;
1664
+ }
1665
+ }
1666
+ :is(.tds-select select:has( > button))::picker-icon{
1667
+ flex-shrink:0;
1668
+ width:var(--tds-select-caret-size);
1669
+ height:var(--tds-select-caret-size);
1670
+ margin-inline-end:var(--tds-select-caret-inline-offset);
1671
+ content:var(--tds-select-background-image);
1672
+ transition:var(--tds-select-caret-transition);
1673
+ }
1734
1674
 
1735
- 100%{
1736
- opacity:0;
1737
- transform:scale(1.75);
1738
- }
1675
+ :is(.tds-select select:has( > button))::picker(select):not(:popover-open){
1676
+ opacity:var(--tds-select-dropdown-closed-opacity);
1677
+ transform:var(--tds-select-dropdown-closed-transform);
1678
+ transition:var(--tds-select-dropdown-transition-exit);
1679
+ }
1680
+
1681
+ :is(.tds-select select:has( > button)):open,:is(.tds-select select:has( > button)):focus-within{
1682
+ outline-color:var(--t-focus-ring-color);
1683
+ outline-offset:var(--t-focus-ring-offset);
1684
+ border-color:var(--tds-select-border-color-active);
1685
+ }
1686
+
1687
+ :is(.tds-select select:has( > button)):open::picker-icon{
1688
+ opacity:1;
1689
+ transform:rotate(.5turn);
1690
+ }
1691
+
1692
+ :is(.tds-select select:has( > button)) selectedcontent{
1693
+ overflow:hidden;
1694
+ text-overflow:ellipsis;
1695
+ line-height:calc(var(--tds-select-min-height) - 2px);
1696
+ white-space:nowrap;
1697
+ }
1698
+
1699
+ :is(.tds-select select:has( > button)):has(option[hidden][disabled][value=""]:checked) > button{
1700
+ color:var(--tds-select-placeholder-color);
1701
+ }
1702
+
1703
+ :is(.tds-select select:has( > button))::picker(select){
1704
+ inset:auto;
1705
+ inline-size:-moz-max-content;
1706
+ inline-size:max-content;
1707
+ min-inline-size:anchor-size(width);
1708
+ max-inline-size:100vi;
1709
+ padding:var(--tds-select-dropdown-padding);
1710
+ margin-block:var(--tds-select-dropdown-margin-block);
1711
+ position-try-fallbacks:flip-block, flip-inline;
1712
+ overflow:auto;
1713
+ overflow-x:hidden;
1714
+ scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
1715
+ -webkit-user-select:none;
1716
+ -moz-user-select:none;
1717
+ user-select:none;
1718
+ scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
1719
+ scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
1720
+ background:var(--tds-select-dropdown-background-color);
1721
+ border:var(--tds-select-dropdown-border);
1722
+ border-radius:var(--tds-select-dropdown-border-radius);
1723
+ box-shadow:var(--tds-select-dropdown-box-shadow);
1724
+ opacity:var(--tds-select-dropdown-open-opacity);
1725
+ transform:var(--tds-select-dropdown-open-transform);
1726
+ transition:var(--tds-select-dropdown-transition-enter);
1727
+ }
1728
+
1729
+ :is(.tds-select select:has( > button)) option::checkmark{
1730
+ display:none;
1731
+ }
1732
+
1733
+ @starting-style{
1734
+ :is(.tds-select select:has( > button))::picker(select):popover-open{
1735
+ opacity:var(--tds-select-dropdown-closed-opacity);
1736
+ transform:var(--tds-select-dropdown-closed-transform);
1737
+ }
1738
+ }
1739
1739
  }
1740
1740
 
1741
1741
  .tds-input{
@@ -3318,382 +3318,175 @@ a[class="tds-btn"]{
3318
3318
  }
3319
3319
  }
3320
3320
 
3321
- @media (prefers-color-scheme: dark){
3322
- }
3323
-
3324
- .tds-checkbox-group{
3325
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3326
- --tds-checkbox-group-line-height:1.4;
3327
- --tds-checkbox-group-gap:var(--t-spacing-1);
3328
-
3329
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3330
-
3331
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3332
- --tds-checkbox-group-description-line-height:1.35;
3333
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3334
- --tds-checkbox-group-description-invalid-icon-display:none;
3335
- display:flex;
3336
- flex-direction:column;
3337
- gap:var(--tds-checkbox-group-gap);
3338
- padding:0;
3339
- margin:0;
3340
-
3341
- font-size:var(--tds-checkbox-group-font-size);
3342
- line-height:var(--tds-checkbox-group-line-height);
3343
- border:0;
3344
- }
3345
-
3346
- .tds-checkbox-group legend{
3347
- padding:0;
3348
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3349
- }
3350
-
3351
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3352
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3353
- }
3354
-
3355
- .tds-checkbox-group[aria-invalid="true"]{
3356
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3357
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3358
- }
3359
-
3360
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3361
- margin-left:.25ch;
3362
- color:var(--t-text-color-status-error);
3363
- content:"*";
3364
- }
3365
-
3366
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3367
- content:none;
3368
- }
3369
-
3370
- .tds-checkbox-group-fields{
3371
- display:flex;
3372
- flex-direction:column;
3373
- gap:var(--tds-checkbox-group-gap);
3374
- align-items:flex-start;
3375
- }
3376
-
3377
- .tds-checkbox-group-description{
3378
- display:flex;
3379
- gap:var(--t-spacing-half);
3380
- align-items:flex-start;
3381
- margin:0;
3382
- font-size:var(--tds-checkbox-group-description-font-size);
3383
- line-height:var(--tds-checkbox-group-description-line-height);
3384
- color:var(--tds-checkbox-group-description-color);
3385
- cursor:text;
3386
- }
3387
-
3388
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3389
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3390
- flex-shrink:0;
3391
- margin-top:calc(.5lh - .5em);
3392
- line-height:var(--tds-checkbox-group-description-line-height);
3393
- }
3394
-
3395
- .tds-checkbox-group--sm{
3396
- --tds-checkbox-group-line-height:1.35;
3397
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3398
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3399
- --tds-checkbox-group-description-line-height:1.3;
3400
- }
3401
-
3402
- .tds-combo-box{
3403
- --tds-combo-box-border-color:var(--t-form-border-color);
3404
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3405
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3406
- --tds-combo-box-background-color:var(--t-form-background-color);
3407
- --tds-combo-box-color:var(--t-form-color);
3408
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3409
- --tds-combo-box-font-size:var(--t-font-size-md);
3410
- --tds-combo-box-min-height:var(--t-container-size-md);
3411
- --tds-combo-box-padding-block:6px;
3412
- --tds-combo-box-button-offset:4px;
3413
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3414
- --tds-combo-box-description-invalid-icon-display:none;
3415
-
3416
- position:relative;
3417
- display:flex;
3418
- flex-direction:column;
3419
- gap:var(--t-spacing-half);
3420
- }
3421
-
3422
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3423
- margin-left:.25ch;
3424
- color:var(--t-text-color-status-error);
3425
- content:"*";
3426
- }
3427
-
3428
- .tds-combo-box[data-invalid]{
3429
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3430
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3431
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3432
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3433
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3434
- --tds-combo-box-description-invalid-icon-display:inline-block;
3435
- }
3436
-
3437
- .tds-combo-box[data-disabled]{
3438
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3439
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3440
- --tds-combo-box-color:var(--t-form-color-disabled);
3441
- }
3442
-
3443
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3444
- color:var(--t-form-color-disabled);
3445
- }
3446
-
3447
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3448
- cursor:not-allowed;
3449
- }
3450
-
3451
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3452
- transform:rotate(.5turn);
3453
- }
3454
-
3455
- .tds-combo-box--lg{
3456
- --tds-combo-box-min-height:var(--t-container-size-lg);
3457
- --tds-combo-box-font-size:var(--t-font-size-lg);
3458
- --tds-combo-box-button-offset:5px;
3459
- }
3460
-
3461
- .tds-combo-box-label{
3462
- font-size:var(--t-font-size-md);
3463
- font-weight:var(--t-font-weight-normal);
3464
- color:var(--t-text-color);
3465
- cursor:default;
3466
- }
3467
-
3468
- .tds-combo-box-field{
3469
- display:flex;
3470
- align-items:center;
3471
- inline-size:100%;
3472
- min-block-size:var(--tds-combo-box-min-height);
3473
- font-family:inherit;
3474
- font-size:var(--tds-combo-box-font-size);
3475
- line-height:1;
3476
- color:var(--tds-combo-box-color);
3477
- -webkit-appearance:none;
3478
- -moz-appearance:none;
3479
- appearance:none;
3480
- cursor:default;
3481
- outline:var(--t-focus-ring-width) solid transparent;
3482
- outline-offset:0;
3483
- background-color:var(--tds-combo-box-background-color);
3484
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3485
- border-radius:var(--t-form-border-radius);
3486
- }
3487
-
3488
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3489
- border-color:var(--tds-combo-box-border-color-hover);
3490
- }
3491
-
3492
- .tds-combo-box-field[data-focus-within]{
3493
- outline-color:var(--t-focus-ring-color);
3494
- outline-offset:var(--t-focus-ring-offset);
3495
- border-color:var(--tds-combo-box-border-color-active);
3496
- }
3497
-
3498
- .tds-combo-box-field:has([readonly]){
3499
- --tds-input-border-color:var(--t-form-border-color-readonly);
3500
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3501
- }
3502
-
3503
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3504
- border-color:var(--t-form-border-color-hover);
3505
- }
3506
-
3507
- .tds-combo-box-input{
3508
- display:flex;
3509
- flex:1;
3510
- align-items:center;
3511
- padding-block:var(--tds-combo-box-padding-block);
3512
- padding-inline-start:var(--t-spacing-1);
3513
- font-family:inherit;
3514
- font-size:inherit;
3515
- color:inherit;
3516
- outline:0;
3517
- background:transparent;
3518
- border:0;
3519
- }
3520
-
3521
- .tds-combo-box-input::-moz-placeholder{
3522
- color:var(--tds-combo-box-placeholder-color);
3523
- -moz-user-select:none;
3524
- user-select:none;
3525
- }
3526
-
3527
- .tds-combo-box-input::placeholder{
3528
- color:var(--tds-combo-box-placeholder-color);
3529
- -webkit-user-select:none;
3530
- -moz-user-select:none;
3531
- user-select:none;
3532
- }
3533
-
3534
- .tds-combo-box-button{
3535
- flex-shrink:0;
3536
- align-self:center;
3537
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3538
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3539
- padding:0;
3540
- margin-inline-end:var(--tds-combo-box-button-offset);
3541
- }
3542
-
3543
- .tds-combo-box-button > svg{
3544
- inline-size:var(--tds-combo-box-font-size);
3545
- block-size:var(--tds-combo-box-font-size);
3546
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3547
- }
3548
-
3549
- .tds-combo-box-button:not(.tds-btn){
3550
- display:inline-flex;
3551
- align-items:center;
3552
- justify-content:center;
3553
- inline-size:auto;
3554
- block-size:auto;
3555
- margin-inline-end:.75em;
3556
- color:var(--t-icon-color);
3557
- cursor:default;
3558
- background:transparent;
3559
- border:0;
3560
- }
3561
-
3562
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3563
- outline:0;
3564
- }
3565
-
3566
- .tds-combo-box-popover{
3567
- width:var(--trigger-width);
3568
- max-block-size:inherit;
3569
- padding:var(--t-spacing-1);
3570
- overflow:auto;
3571
- outline:0;
3572
- scrollbar-color:#0004 #0000;
3573
- scrollbar-width:thin;
3574
- background:var(--t-surface-color-card);
3575
- background-clip:padding-box;
3576
- border:1px solid var(--t-border-color);
3577
- border-radius:var(--t-border-radius);
3578
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3579
- }
3580
-
3581
- .tds-combo-box-popover[data-entering]{
3582
- animation:tds-combo-box-popover-enter 160ms ease;
3583
- }
3321
+ @media (prefers-color-scheme: dark){
3322
+ }
3584
3323
 
3585
- .tds-combo-box-popover[data-exiting]{
3586
- animation:tds-combo-box-popover-exit 130ms ease;
3324
+ .tds-number-stepper{
3325
+ --tds-number-stepper-border-color:var(--t-form-border-color);
3326
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3327
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3328
+ --tds-number-stepper-background-color:var(--t-form-background-color);
3329
+ --tds-number-stepper-color:var(--t-form-color);
3330
+ --tds-number-stepper-font-size:var(--t-font-size-md);
3331
+ --tds-number-stepper-min-height:var(--t-container-size-md);
3332
+ --tds-number-stepper-padding-block:6px;
3333
+ --tds-number-stepper-button-offset:4px;
3334
+ --tds-number-stepper-button-gap:2px;
3335
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
3336
+ --tds-number-stepper-description-invalid-icon-display:none;
3337
+
3338
+ position:relative;
3339
+ display:flex;
3340
+ flex-direction:column;
3341
+ gap:var(--t-spacing-half);
3342
+ }
3343
+
3344
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3345
+ margin-left:.25ch;
3346
+ color:var(--t-text-color-status-error);
3347
+ content:"*";
3587
3348
  }
3588
3349
 
3589
- @keyframes tds-combo-box-popover-enter{
3590
- from{
3591
- opacity:0;
3592
- transform:translateY(-8px);
3350
+ .tds-number-stepper[data-invalid]{
3351
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
3352
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
3353
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
3354
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
3355
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
3356
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
3593
3357
  }
3594
- }
3595
3358
 
3596
- @keyframes tds-combo-box-popover-exit{
3597
- to{
3598
- opacity:0;
3599
- transform:translateY(-8px);
3359
+ .tds-number-stepper[data-disabled]{
3360
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
3361
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
3362
+ --tds-number-stepper-color:var(--t-form-color-disabled);
3600
3363
  }
3601
- }
3602
3364
 
3603
- @media (prefers-reduced-motion: reduce){
3604
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3605
- animation:none;
3365
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3366
+ color:var(--t-form-color-disabled);
3606
3367
  }
3607
3368
 
3608
- .tds-combo-box-button > svg{
3609
- transition:none;
3610
- }
3611
- }
3369
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3370
+ cursor:not-allowed;
3371
+ }
3612
3372
 
3613
- .tds-combo-box-list{
3614
- padding:0;
3615
- margin:0;
3373
+ .tds-number-stepper--lg{
3374
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
3375
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
3376
+ --tds-number-stepper-button-offset:5px;
3377
+ --tds-number-stepper-button-gap:4px;
3616
3378
  }
3617
3379
 
3618
- .tds-combo-box-list-item{
3619
- display:block;
3620
- padding-block:var(--t-spacing-1);
3621
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3622
- overflow:hidden;
3623
- text-overflow:ellipsis;
3624
- font-size:1rem;
3380
+ .tds-number-stepper-label{
3381
+ font-size:var(--t-font-size-md);
3382
+ font-weight:var(--t-font-weight-normal);
3625
3383
  color:var(--t-text-color);
3626
- white-space:nowrap;
3627
3384
  cursor:default;
3628
- outline-offset:-1px;
3629
- border-radius:var(--t-border-radius);
3630
3385
  }
3631
3386
 
3632
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3633
- background:var(--t-fill-color-neutral-070);
3634
- }
3387
+ .tds-number-stepper-field{
3388
+ display:flex;
3389
+ gap:var(--tds-number-stepper-button-gap);
3390
+ align-items:center;
3391
+ inline-size:100%;
3392
+ min-block-size:var(--tds-number-stepper-min-height);
3393
+ font-family:inherit;
3394
+ font-size:var(--tds-number-stepper-font-size);
3395
+ line-height:1;
3396
+ color:var(--tds-number-stepper-color);
3397
+ -webkit-appearance:none;
3398
+ -moz-appearance:none;
3399
+ appearance:none;
3400
+ cursor:default;
3401
+ outline:var(--t-focus-ring-width) solid transparent;
3402
+ outline-offset:0;
3403
+ background-color:var(--tds-number-stepper-background-color);
3404
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3405
+ border-radius:var(--t-form-border-radius);
3406
+ }
3635
3407
 
3636
- .tds-combo-box-list-item[data-selected]{
3637
- background:var(--t-fill-color-button-interaction-ghost-active);
3408
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3409
+ border-color:var(--tds-number-stepper-border-color-hover);
3638
3410
  }
3639
3411
 
3640
- .tds-combo-box-list-item[data-focus-visible]{
3641
- outline:var(--t-focus-ring-outline);
3642
- outline-offset:-1px;
3412
+ .tds-number-stepper-field[data-focus-within]{
3413
+ outline-color:var(--t-focus-ring-color);
3414
+ outline-offset:var(--t-focus-ring-offset);
3415
+ border-color:var(--tds-number-stepper-border-color-active);
3643
3416
  }
3644
3417
 
3645
- .tds-combo-box-list-item[data-disabled]{
3646
- color:var(--t-form-color-disabled);
3647
- cursor:not-allowed;
3418
+ .tds-number-stepper-field:has([readonly]){
3419
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3648
3420
  }
3649
3421
 
3650
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3651
- background:transparent;
3422
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
3423
+ border-color:var(--t-form-border-color-hover);
3652
3424
  }
3653
3425
 
3654
- .tds-combo-box-list-section:not(:first-child){
3655
- margin-block-start:var(--t-spacing-half);
3426
+ .tds-number-stepper-input{
3427
+ display:flex;
3428
+ flex:1;
3429
+ align-items:center;
3430
+ min-inline-size:0;
3431
+ padding-block:var(--tds-number-stepper-padding-block);
3432
+ padding-inline:var(--t-spacing-1);
3433
+ font-family:inherit;
3434
+ font-size:inherit;
3435
+ color:inherit;
3436
+ outline:0;
3437
+ background:transparent;
3438
+ border:0;
3439
+ }
3440
+
3441
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
3442
+ margin:0;
3443
+ -webkit-appearance:none;
3444
+ appearance:none;
3656
3445
  }
3657
3446
 
3658
- .tds-combo-box-section-header{
3659
- padding-block:var(--t-spacing-1);
3660
- padding-inline:var(--t-spacing-1);
3661
- font-size:var(--t-font-size-sm);
3662
- font-weight:var(--t-font-weight-semibold);
3663
- color:var(--t-text-color-secondary);
3447
+ .tds-number-stepper-button{
3448
+ flex-shrink:0;
3449
+ align-self:center;
3450
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3451
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
3452
+ padding:0;
3664
3453
  }
3665
3454
 
3666
- .tds-combo-box-description{
3455
+ .tds-number-stepper-button:last-of-type{
3456
+ margin-inline-end:var(--tds-number-stepper-button-offset);
3457
+ }
3458
+
3459
+ .tds-number-stepper-description{
3667
3460
  display:flex;
3668
3461
  gap:var(--t-spacing-half);
3669
3462
  align-items:flex-start;
3670
3463
  margin:0;
3671
3464
  font-size:var(--t-font-size-sm);
3672
3465
  line-height:1.35;
3673
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3466
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3674
3467
  cursor:text;
3675
3468
  }
3676
3469
 
3677
- .tds-combo-box-description-invalid-icon{
3678
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3470
+ .tds-number-stepper-description-invalid-icon{
3471
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
3679
3472
  flex-shrink:0;
3680
3473
  margin-block-start:calc(.5lh - .5em);
3681
3474
  line-height:1.35;
3682
3475
  }
3683
3476
 
3684
- .tds-date-picker{
3685
- --tds-date-picker-border-color:var(--t-form-border-color);
3686
- --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3687
- --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3688
- --tds-date-picker-background-color:var(--t-form-background-color);
3689
- --tds-date-picker-color:var(--t-form-color);
3690
- --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3691
- --tds-date-picker-font-size:var(--t-font-size-md);
3692
- --tds-date-picker-min-height:var(--t-container-size-md);
3693
- --tds-date-picker-padding-block:6px;
3694
- --tds-date-picker-button-offset:4px;
3695
- --tds-date-picker-description-color:var(--t-text-color-secondary);
3696
- --tds-date-picker-description-invalid-icon-display:none;
3477
+ .tds-combo-box{
3478
+ --tds-combo-box-border-color:var(--t-form-border-color);
3479
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3480
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3481
+ --tds-combo-box-background-color:var(--t-form-background-color);
3482
+ --tds-combo-box-color:var(--t-form-color);
3483
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3484
+ --tds-combo-box-font-size:var(--t-font-size-md);
3485
+ --tds-combo-box-min-height:var(--t-container-size-md);
3486
+ --tds-combo-box-padding-block:6px;
3487
+ --tds-combo-box-button-offset:4px;
3488
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3489
+ --tds-combo-box-description-invalid-icon-display:none;
3697
3490
 
3698
3491
  position:relative;
3699
3492
  display:flex;
@@ -3701,170 +3494,181 @@ a[class="tds-btn"]{
3701
3494
  gap:var(--t-spacing-half);
3702
3495
  }
3703
3496
 
3704
- .tds-date-picker[data-required] .tds-date-picker-label::after{
3497
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3705
3498
  margin-left:.25ch;
3706
3499
  color:var(--t-text-color-status-error);
3707
3500
  content:"*";
3708
3501
  }
3709
3502
 
3710
- .tds-date-picker[data-invalid]{
3711
- --tds-date-picker-border-color:var(--t-form-border-color-error);
3712
- --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
3713
- --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
3714
- --tds-date-picker-background-color:var(--t-form-background-color-error);
3715
- --tds-date-picker-description-color:var(--t-text-color-status-error);
3716
- --tds-date-picker-description-invalid-icon-display:inline-block;
3503
+ .tds-combo-box[data-invalid]{
3504
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3505
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3506
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3507
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3508
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3509
+ --tds-combo-box-description-invalid-icon-display:inline-block;
3717
3510
  }
3718
3511
 
3719
- .tds-date-picker[data-disabled]{
3720
- --tds-date-picker-border-color:var(--t-form-border-color-disabled);
3721
- --tds-date-picker-background-color:var(--t-form-background-color-disabled);
3722
- --tds-date-picker-color:var(--t-form-color-disabled);
3723
- --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
3512
+ .tds-combo-box[data-disabled]{
3513
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3514
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3515
+ --tds-combo-box-color:var(--t-form-color-disabled);
3724
3516
  }
3725
3517
 
3726
- .tds-date-picker[data-disabled] .tds-date-picker-field{
3518
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3519
+ color:var(--t-form-color-disabled);
3520
+ }
3521
+
3522
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3727
3523
  cursor:not-allowed;
3728
3524
  }
3729
3525
 
3730
- .tds-date-picker--lg{
3731
- --tds-date-picker-min-height:var(--t-container-size-lg);
3732
- --tds-date-picker-font-size:var(--t-font-size-lg);
3733
- --tds-date-picker-button-offset:5px;
3526
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3527
+ transform:rotate(.5turn);
3528
+ }
3529
+
3530
+ .tds-combo-box--lg{
3531
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3532
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3533
+ --tds-combo-box-button-offset:5px;
3734
3534
  }
3735
3535
 
3736
- .tds-date-picker-label{
3536
+ .tds-combo-box-label{
3737
3537
  font-size:var(--t-font-size-md);
3738
3538
  font-weight:var(--t-font-weight-normal);
3739
3539
  color:var(--t-text-color);
3740
3540
  cursor:default;
3741
3541
  }
3742
3542
 
3743
- .tds-date-picker-field{
3543
+ .tds-combo-box-field{
3744
3544
  display:flex;
3745
3545
  align-items:center;
3746
3546
  inline-size:100%;
3747
- min-block-size:var(--tds-date-picker-min-height);
3547
+ min-block-size:var(--tds-combo-box-min-height);
3748
3548
  font-family:inherit;
3749
- font-size:var(--tds-date-picker-font-size);
3549
+ font-size:var(--tds-combo-box-font-size);
3750
3550
  line-height:1;
3751
- color:var(--tds-date-picker-color);
3551
+ color:var(--tds-combo-box-color);
3752
3552
  -webkit-appearance:none;
3753
3553
  -moz-appearance:none;
3754
3554
  appearance:none;
3755
- cursor:text;
3555
+ cursor:default;
3756
3556
  outline:var(--t-focus-ring-width) solid transparent;
3757
3557
  outline-offset:0;
3758
- background-color:var(--tds-date-picker-background-color);
3759
- border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
3558
+ background-color:var(--tds-combo-box-background-color);
3559
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3760
3560
  border-radius:var(--t-form-border-radius);
3761
3561
  }
3762
3562
 
3763
- .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3764
- border-color:var(--tds-date-picker-border-color-hover);
3563
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3564
+ border-color:var(--tds-combo-box-border-color-hover);
3765
3565
  }
3766
3566
 
3767
- .tds-date-picker-field[data-focus-within]{
3567
+ .tds-combo-box-field[data-focus-within]{
3768
3568
  outline-color:var(--t-focus-ring-color);
3769
3569
  outline-offset:var(--t-focus-ring-offset);
3770
- border-color:var(--tds-date-picker-border-color-active);
3570
+ border-color:var(--tds-combo-box-border-color-active);
3771
3571
  }
3772
3572
 
3773
- .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
3774
- color:var(--t-form-color-readonly);
3775
- background-color:var(--t-form-background-color-readonly);
3776
- border-color:var(--t-form-border-color-readonly);
3573
+ .tds-combo-box-field:has([readonly]){
3574
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3575
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3777
3576
  }
3778
3577
 
3779
- .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
3780
- border-color:var(--t-form-border-color-readonly);
3781
- }
3782
-
3783
- .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
3784
- outline-color:var(--t-focus-ring-color);
3785
- outline-offset:var(--t-focus-ring-offset);
3578
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3786
3579
  border-color:var(--t-form-border-color-hover);
3787
3580
  }
3788
3581
 
3789
- .tds-date-picker-input{
3582
+ .tds-combo-box-input{
3583
+ display:flex;
3790
3584
  flex:1;
3791
- padding-block:var(--tds-date-picker-padding-block);
3585
+ align-items:center;
3586
+ padding-block:var(--tds-combo-box-padding-block);
3792
3587
  padding-inline-start:var(--t-spacing-1);
3793
- font-variant-numeric:tabular-nums;
3794
- }
3795
-
3796
- .tds-date-picker-segment{
3797
- padding-inline:2px;
3798
- caret-color:transparent;
3799
- border-radius:var(--t-border-radius-sm);
3588
+ font-family:inherit;
3589
+ font-size:inherit;
3590
+ color:inherit;
3591
+ outline:0;
3592
+ background:transparent;
3593
+ border:0;
3800
3594
  }
3801
3595
 
3802
- .tds-date-picker-segment[data-placeholder]{
3803
- color:var(--tds-date-picker-placeholder-color);
3596
+ .tds-combo-box-input::-moz-placeholder{
3597
+ color:var(--tds-combo-box-placeholder-color);
3598
+ -moz-user-select:none;
3599
+ user-select:none;
3804
3600
  }
3805
3601
 
3806
- .tds-date-picker-segment[data-focused]{
3807
- color:var(--t-text-color-inverted);
3808
- outline:0;
3809
- background:var(--t-fill-color-interaction);
3602
+ .tds-combo-box-input::placeholder{
3603
+ color:var(--tds-combo-box-placeholder-color);
3604
+ -webkit-user-select:none;
3605
+ -moz-user-select:none;
3606
+ user-select:none;
3810
3607
  }
3811
3608
 
3812
- .tds-date-picker-segment-separator{
3813
- padding-inline:0;
3814
- color:var(--tds-date-picker-placeholder-color);
3609
+ .tds-combo-box-button{
3610
+ flex-shrink:0;
3611
+ align-self:center;
3612
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3613
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3614
+ padding:0;
3615
+ margin-inline-end:var(--tds-combo-box-button-offset);
3815
3616
  }
3816
3617
 
3817
- .tds-date-picker-description{
3818
- display:flex;
3819
- gap:var(--t-spacing-half);
3820
- align-items:flex-start;
3821
- margin:0;
3822
- font-size:var(--t-font-size-sm);
3823
- line-height:1.35;
3824
- color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
3825
- cursor:text;
3826
- }
3618
+ .tds-combo-box-button > svg{
3619
+ inline-size:var(--tds-combo-box-font-size);
3620
+ block-size:var(--tds-combo-box-font-size);
3621
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
3622
+ }
3827
3623
 
3828
- .tds-date-picker-description .tds-date-picker-description-invalid-icon{
3829
- display:var(--tds-date-picker-description-invalid-icon-display, none);
3830
- flex-shrink:0;
3831
- margin-block-start:calc(.5lh - .5em);
3832
- line-height:1.35;
3624
+ .tds-combo-box-button:not(.tds-btn){
3625
+ display:inline-flex;
3626
+ align-items:center;
3627
+ justify-content:center;
3628
+ inline-size:auto;
3629
+ block-size:auto;
3630
+ margin-inline-end:.75em;
3631
+ color:var(--t-icon-color);
3632
+ cursor:default;
3633
+ background:transparent;
3634
+ border:0;
3833
3635
  }
3834
3636
 
3835
- .tds-date-picker-button{
3836
- flex-shrink:0;
3837
- align-self:center;
3838
- inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3839
- block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
3840
- padding:0;
3841
- margin-inline-end:var(--tds-date-picker-button-offset);
3842
- }
3637
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3638
+ outline:0;
3639
+ }
3843
3640
 
3844
- .tds-date-picker-popover{
3845
- padding:var(--t-spacing-2);
3641
+ .tds-combo-box-popover{
3642
+ width:var(--trigger-width);
3643
+ max-block-size:inherit;
3644
+ padding:var(--t-spacing-1);
3645
+ overflow:auto;
3646
+ outline:0;
3647
+ scrollbar-color:#0004 #0000;
3648
+ scrollbar-width:thin;
3846
3649
  background:var(--t-surface-color-card);
3650
+ background-clip:padding-box;
3847
3651
  border:1px solid var(--t-border-color);
3848
3652
  border-radius:var(--t-border-radius);
3849
3653
  box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3850
3654
  }
3851
3655
 
3852
- .tds-date-picker-popover[data-entering]{
3853
- animation:tds-date-picker-popover-enter 160ms ease;
3656
+ .tds-combo-box-popover[data-entering]{
3657
+ animation:tds-combo-box-popover-enter 160ms ease;
3854
3658
  }
3855
3659
 
3856
- .tds-date-picker-popover[data-exiting]{
3857
- animation:tds-date-picker-popover-exit 130ms ease;
3660
+ .tds-combo-box-popover[data-exiting]{
3661
+ animation:tds-combo-box-popover-exit 130ms ease;
3858
3662
  }
3859
3663
 
3860
- @keyframes tds-date-picker-popover-enter{
3664
+ @keyframes tds-combo-box-popover-enter{
3861
3665
  from{
3862
3666
  opacity:0;
3863
3667
  transform:translateY(-8px);
3864
3668
  }
3865
3669
  }
3866
3670
 
3867
- @keyframes tds-date-picker-popover-exit{
3671
+ @keyframes tds-combo-box-popover-exit{
3868
3672
  to{
3869
3673
  opacity:0;
3870
3674
  transform:translateY(-8px);
@@ -3872,133 +3676,176 @@ a[class="tds-btn"]{
3872
3676
  }
3873
3677
 
3874
3678
  @media (prefers-reduced-motion: reduce){
3875
- .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
3679
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3876
3680
  animation:none;
3877
3681
  }
3878
- }
3879
-
3880
- .tds-date-picker-calendar{
3881
- inline-size:-moz-fit-content;
3882
- inline-size:fit-content;
3883
- }
3884
3682
 
3885
- .tds-date-picker-calendar-header{
3886
- display:flex;
3887
- align-items:center;
3888
- justify-content:space-between;
3889
- padding-block-end:var(--t-spacing-1);
3683
+ .tds-combo-box-button > svg{
3684
+ transition:none;
3685
+ }
3890
3686
  }
3891
3687
 
3892
- .tds-date-picker-calendar-title{
3893
- flex:1;
3688
+ .tds-combo-box-list{
3689
+ padding:0;
3894
3690
  margin:0;
3895
- font-size:var(--t-font-size-md);
3896
- font-weight:var(--t-font-weight-semibold);
3897
- text-align:center;
3898
3691
  }
3899
3692
 
3900
- .tds-date-picker-calendar-nav{
3901
- display:flex;
3902
- align-items:center;
3903
- justify-content:center;
3904
- padding:var(--t-spacing-half);
3693
+ .tds-combo-box-list-item{
3694
+ display:block;
3695
+ padding-block:var(--t-spacing-1);
3696
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3697
+ overflow:hidden;
3698
+ text-overflow:ellipsis;
3699
+ font-size:1rem;
3905
3700
  color:var(--t-text-color);
3701
+ white-space:nowrap;
3906
3702
  cursor:default;
3907
- outline:0;
3908
- background:transparent;
3909
- border:0;
3910
- border-radius:var(--t-border-radius-sm);
3703
+ outline-offset:-1px;
3704
+ border-radius:var(--t-border-radius);
3911
3705
  }
3912
3706
 
3913
- .tds-date-picker-calendar-nav[data-hovered]{
3707
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3914
3708
  background:var(--t-fill-color-neutral-070);
3915
3709
  }
3916
3710
 
3917
- .tds-date-picker-calendar-nav[data-pressed]{
3711
+ .tds-combo-box-list-item[data-selected]{
3918
3712
  background:var(--t-fill-color-button-interaction-ghost-active);
3919
3713
  }
3920
3714
 
3921
- .tds-date-picker-calendar-nav[data-focus-visible]{
3922
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3923
- outline-offset:var(--t-focus-ring-offset);
3715
+ .tds-combo-box-list-item[data-focus-visible]{
3716
+ outline:var(--t-focus-ring-outline);
3717
+ outline-offset:-1px;
3924
3718
  }
3925
3719
 
3926
- .tds-date-picker-calendar-nav[data-disabled]{
3720
+ .tds-combo-box-list-item[data-disabled]{
3927
3721
  color:var(--t-form-color-disabled);
3928
3722
  cursor:not-allowed;
3929
3723
  }
3930
3724
 
3931
- .tds-date-picker-calendar-grid{
3932
- border-collapse:collapse;
3933
- }
3725
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
3726
+ background:transparent;
3727
+ }
3934
3728
 
3935
- .tds-date-picker-calendar-header-cell{
3936
- padding-block:var(--t-spacing-half);
3729
+ .tds-combo-box-list-section:not(:first-child){
3730
+ margin-block-start:var(--t-spacing-half);
3731
+ }
3732
+
3733
+ .tds-combo-box-section-header{
3734
+ padding-block:var(--t-spacing-1);
3735
+ padding-inline:var(--t-spacing-1);
3937
3736
  font-size:var(--t-font-size-sm);
3938
- font-weight:var(--t-font-weight-normal);
3737
+ font-weight:var(--t-font-weight-semibold);
3939
3738
  color:var(--t-text-color-secondary);
3940
- text-align:center;
3941
3739
  }
3942
3740
 
3943
- .tds-date-picker-calendar-cell{
3741
+ .tds-combo-box-description{
3944
3742
  display:flex;
3945
- align-items:center;
3946
- justify-content:center;
3947
- inline-size:2.25rem;
3948
- block-size:2.25rem;
3949
- font-size:var(--t-font-size-md);
3950
- color:var(--t-text-color);
3951
- cursor:default;
3952
- outline:0;
3953
- border-radius:var(--t-border-radius-sm);
3743
+ gap:var(--t-spacing-half);
3744
+ align-items:flex-start;
3745
+ margin:0;
3746
+ font-size:var(--t-font-size-sm);
3747
+ line-height:1.35;
3748
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3749
+ cursor:text;
3954
3750
  }
3955
3751
 
3956
- .tds-date-picker-calendar-cell[data-hovered]{
3957
- background:var(--t-fill-color-neutral-070);
3752
+ .tds-combo-box-description-invalid-icon{
3753
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
3754
+ flex-shrink:0;
3755
+ margin-block-start:calc(.5lh - .5em);
3756
+ line-height:1.35;
3757
+ }
3758
+
3759
+ .tds-checkbox-group{
3760
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3761
+ --tds-checkbox-group-line-height:1.4;
3762
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3763
+
3764
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3765
+
3766
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3767
+ --tds-checkbox-group-description-line-height:1.35;
3768
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3769
+ --tds-checkbox-group-description-invalid-icon-display:none;
3770
+ display:flex;
3771
+ flex-direction:column;
3772
+ gap:var(--tds-checkbox-group-gap);
3773
+ padding:0;
3774
+ margin:0;
3775
+
3776
+ font-size:var(--tds-checkbox-group-font-size);
3777
+ line-height:var(--tds-checkbox-group-line-height);
3778
+ border:0;
3779
+ }
3780
+
3781
+ .tds-checkbox-group legend{
3782
+ padding:0;
3783
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3958
3784
  }
3959
3785
 
3960
- .tds-date-picker-calendar-cell[data-pressed]{
3961
- background:var(--t-fill-color-button-interaction-ghost-active);
3786
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3787
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3962
3788
  }
3963
3789
 
3964
- .tds-date-picker-calendar-cell[data-selected]{
3965
- color:var(--t-text-color-inverted);
3966
- background:var(--t-fill-color-interaction);
3790
+ .tds-checkbox-group[aria-invalid="true"]{
3791
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3792
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3967
3793
  }
3968
3794
 
3969
- .tds-date-picker-calendar-cell[data-focus-visible]{
3970
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3971
- outline-offset:var(--t-focus-ring-offset);
3972
- }
3795
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3796
+ margin-left:.25ch;
3797
+ color:var(--t-text-color-status-error);
3798
+ content:"*";
3799
+ }
3973
3800
 
3974
- .tds-date-picker-calendar-cell[data-unavailable]{
3975
- color:var(--t-text-color-secondary);
3976
- text-decoration:line-through;
3977
- cursor:not-allowed;
3978
- }
3801
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3802
+ content:none;
3803
+ }
3979
3804
 
3980
- .tds-date-picker-calendar-cell[data-disabled]{
3981
- color:var(--t-form-color-disabled);
3982
- cursor:not-allowed;
3983
- }
3805
+ .tds-checkbox-group-fields{
3806
+ display:flex;
3807
+ flex-direction:column;
3808
+ gap:var(--tds-checkbox-group-gap);
3809
+ align-items:flex-start;
3810
+ }
3984
3811
 
3985
- .tds-date-picker-calendar-cell[data-outside-month]{
3986
- color:var(--t-text-color-secondary);
3812
+ .tds-checkbox-group-description{
3813
+ display:flex;
3814
+ gap:var(--t-spacing-half);
3815
+ align-items:flex-start;
3816
+ margin:0;
3817
+ font-size:var(--tds-checkbox-group-description-font-size);
3818
+ line-height:var(--tds-checkbox-group-description-line-height);
3819
+ color:var(--tds-checkbox-group-description-color);
3820
+ cursor:text;
3821
+ }
3822
+
3823
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3824
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3825
+ flex-shrink:0;
3826
+ margin-top:calc(.5lh - .5em);
3827
+ line-height:var(--tds-checkbox-group-description-line-height);
3987
3828
  }
3988
3829
 
3989
- .tds-number-stepper{
3990
- --tds-number-stepper-border-color:var(--t-form-border-color);
3991
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
3992
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
3993
- --tds-number-stepper-background-color:var(--t-form-background-color);
3994
- --tds-number-stepper-color:var(--t-form-color);
3995
- --tds-number-stepper-font-size:var(--t-font-size-md);
3996
- --tds-number-stepper-min-height:var(--t-container-size-md);
3997
- --tds-number-stepper-padding-block:6px;
3998
- --tds-number-stepper-button-offset:4px;
3999
- --tds-number-stepper-button-gap:2px;
4000
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
4001
- --tds-number-stepper-description-invalid-icon-display:none;
3830
+ .tds-checkbox-group--sm{
3831
+ --tds-checkbox-group-line-height:1.35;
3832
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3833
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3834
+ --tds-checkbox-group-description-line-height:1.3;
3835
+ }
3836
+
3837
+ .tds-time-field{
3838
+ --tds-time-field-border-color:var(--t-form-border-color);
3839
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3840
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3841
+ --tds-time-field-background-color:var(--t-form-background-color);
3842
+ --tds-time-field-color:var(--t-form-color);
3843
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3844
+ --tds-time-field-font-size:var(--t-font-size-md);
3845
+ --tds-time-field-min-height:var(--t-container-size-md);
3846
+ --tds-time-field-padding-block:6px;
3847
+ --tds-time-field-description-color:var(--t-text-color-secondary);
3848
+ --tds-time-field-description-invalid-icon-display:none;
4002
3849
 
4003
3850
  position:relative;
4004
3851
  display:flex;
@@ -4006,151 +3853,148 @@ a[class="tds-btn"]{
4006
3853
  gap:var(--t-spacing-half);
4007
3854
  }
4008
3855
 
4009
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
3856
+ .tds-time-field[data-required] .tds-time-field-label::after{
4010
3857
  margin-left:.25ch;
4011
3858
  color:var(--t-text-color-status-error);
4012
3859
  content:"*";
4013
3860
  }
4014
3861
 
4015
- .tds-number-stepper[data-invalid]{
4016
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
4017
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4018
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4019
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
4020
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
4021
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3862
+ .tds-time-field[data-invalid]{
3863
+ --tds-time-field-border-color:var(--t-form-border-color-error);
3864
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3865
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3866
+ --tds-time-field-background-color:var(--t-form-background-color-error);
3867
+ --tds-time-field-description-color:var(--t-text-color-status-error);
3868
+ --tds-time-field-description-invalid-icon-display:inline-block;
4022
3869
  }
4023
3870
 
4024
- .tds-number-stepper[data-disabled]{
4025
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4026
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4027
- --tds-number-stepper-color:var(--t-form-color-disabled);
3871
+ .tds-time-field[data-disabled]{
3872
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
3873
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
3874
+ --tds-time-field-color:var(--t-form-color-disabled);
3875
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4028
3876
  }
4029
3877
 
4030
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
3878
+ .tds-time-field[data-disabled] .tds-time-field-label{
4031
3879
  color:var(--t-form-color-disabled);
4032
3880
  }
4033
3881
 
4034
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
3882
+ .tds-time-field[data-disabled] .tds-time-field-input{
4035
3883
  cursor:not-allowed;
4036
3884
  }
4037
3885
 
4038
- .tds-number-stepper--lg{
4039
- --tds-number-stepper-min-height:var(--t-container-size-lg);
4040
- --tds-number-stepper-font-size:var(--t-font-size-lg);
4041
- --tds-number-stepper-button-offset:5px;
4042
- --tds-number-stepper-button-gap:4px;
3886
+ .tds-time-field--lg{
3887
+ --tds-time-field-min-height:var(--t-container-size-lg);
3888
+ --tds-time-field-font-size:var(--t-font-size-lg);
4043
3889
  }
4044
3890
 
4045
- .tds-number-stepper-label{
3891
+ .tds-time-field-label{
4046
3892
  font-size:var(--t-font-size-md);
4047
3893
  font-weight:var(--t-font-weight-normal);
4048
3894
  color:var(--t-text-color);
4049
3895
  cursor:default;
4050
3896
  }
4051
3897
 
4052
- .tds-number-stepper-field{
3898
+ .tds-time-field-input{
4053
3899
  display:flex;
4054
- gap:var(--tds-number-stepper-button-gap);
4055
3900
  align-items:center;
4056
3901
  inline-size:100%;
4057
- min-block-size:var(--tds-number-stepper-min-height);
3902
+ min-block-size:var(--tds-time-field-min-height);
3903
+ padding-block:var(--tds-time-field-padding-block);
3904
+ padding-inline:var(--t-spacing-1);
4058
3905
  font-family:inherit;
4059
- font-size:var(--tds-number-stepper-font-size);
3906
+ font-size:var(--tds-time-field-font-size);
3907
+ font-variant-numeric:tabular-nums;
4060
3908
  line-height:1;
4061
- color:var(--tds-number-stepper-color);
4062
- -webkit-appearance:none;
4063
- -moz-appearance:none;
4064
- appearance:none;
4065
- cursor:default;
3909
+ color:var(--tds-time-field-color);
3910
+ cursor:text;
4066
3911
  outline:var(--t-focus-ring-width) solid transparent;
4067
3912
  outline-offset:0;
4068
- background-color:var(--tds-number-stepper-background-color);
4069
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
3913
+ background-color:var(--tds-time-field-background-color);
3914
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4070
3915
  border-radius:var(--t-form-border-radius);
4071
3916
  }
4072
3917
 
4073
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4074
- border-color:var(--tds-number-stepper-border-color-hover);
3918
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3919
+ border-color:var(--tds-time-field-border-color-hover);
4075
3920
  }
4076
3921
 
4077
- .tds-number-stepper-field[data-focus-within]{
3922
+ .tds-time-field-input[data-focus-within]{
4078
3923
  outline-color:var(--t-focus-ring-color);
4079
3924
  outline-offset:var(--t-focus-ring-offset);
4080
- border-color:var(--tds-number-stepper-border-color-active);
3925
+ border-color:var(--tds-time-field-border-color-active);
4081
3926
  }
4082
3927
 
4083
- .tds-number-stepper-field:has([readonly]){
4084
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
3928
+ .tds-time-field-input[data-readonly]{
3929
+ color:var(--t-form-color-readonly);
3930
+ background-color:var(--t-form-background-color-readonly);
3931
+ border-color:var(--t-form-border-color-readonly);
4085
3932
  }
4086
3933
 
4087
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
3934
+ .tds-time-field-input[data-readonly][data-hovered]{
3935
+ border-color:var(--t-form-border-color-readonly);
3936
+ }
3937
+
3938
+ .tds-time-field-input[data-readonly][data-focus-within]{
3939
+ outline-color:var(--t-focus-ring-color);
3940
+ outline-offset:var(--t-focus-ring-offset);
4088
3941
  border-color:var(--t-form-border-color-hover);
4089
3942
  }
4090
3943
 
4091
- .tds-number-stepper-input{
4092
- display:flex;
4093
- flex:1;
4094
- align-items:center;
4095
- min-inline-size:0;
4096
- padding-block:var(--tds-number-stepper-padding-block);
4097
- padding-inline:var(--t-spacing-1);
4098
- font-family:inherit;
4099
- font-size:inherit;
4100
- color:inherit;
4101
- outline:0;
4102
- background:transparent;
4103
- border:0;
3944
+ .tds-time-field-segment{
3945
+ padding-inline:1px;
3946
+ font-variant-numeric:tabular-nums;
3947
+ cursor:text;
3948
+ caret-color:transparent;
3949
+ border-radius:var(--t-border-radius-sm);
4104
3950
  }
4105
3951
 
4106
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4107
- margin:0;
4108
- -webkit-appearance:none;
4109
- appearance:none;
3952
+ .tds-time-field-segment[data-placeholder]{
3953
+ color:var(--tds-time-field-placeholder-color);
4110
3954
  }
4111
3955
 
4112
- .tds-number-stepper-button{
4113
- flex-shrink:0;
4114
- align-self:center;
4115
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4116
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4117
- padding:0;
4118
- }
4119
-
4120
- .tds-number-stepper-button:last-of-type{
4121
- margin-inline-end:var(--tds-number-stepper-button-offset);
3956
+ .tds-time-field-segment[data-focused]{
3957
+ color:var(--t-text-color-inverted);
3958
+ outline:0;
3959
+ background:var(--t-fill-color-interaction);
4122
3960
  }
4123
3961
 
4124
- .tds-number-stepper-description{
3962
+ .tds-time-field-segment-separator{
3963
+ padding-inline:0;
3964
+ color:var(--tds-time-field-placeholder-color);
3965
+ }
3966
+
3967
+ .tds-time-field-description{
4125
3968
  display:flex;
4126
3969
  gap:var(--t-spacing-half);
4127
3970
  align-items:flex-start;
4128
3971
  margin:0;
4129
3972
  font-size:var(--t-font-size-sm);
4130
3973
  line-height:1.35;
4131
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
3974
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4132
3975
  cursor:text;
4133
3976
  }
4134
3977
 
4135
- .tds-number-stepper-description-invalid-icon{
4136
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
4137
- flex-shrink:0;
4138
- margin-block-start:calc(.5lh - .5em);
4139
- line-height:1.35;
4140
- }
3978
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
3979
+ display:var(--tds-time-field-description-invalid-icon-display, none);
3980
+ flex-shrink:0;
3981
+ margin-block-start:calc(.5lh - .5em);
3982
+ line-height:1.35;
3983
+ }
4141
3984
 
4142
- .tds-time-field{
4143
- --tds-time-field-border-color:var(--t-form-border-color);
4144
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4145
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4146
- --tds-time-field-background-color:var(--t-form-background-color);
4147
- --tds-time-field-color:var(--t-form-color);
4148
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4149
- --tds-time-field-font-size:var(--t-font-size-md);
4150
- --tds-time-field-min-height:var(--t-container-size-md);
4151
- --tds-time-field-padding-block:6px;
4152
- --tds-time-field-description-color:var(--t-text-color-secondary);
4153
- --tds-time-field-description-invalid-icon-display:none;
3985
+ .tds-date-picker{
3986
+ --tds-date-picker-border-color:var(--t-form-border-color);
3987
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
3988
+ --tds-date-picker-border-color-active:var(--t-form-border-color-focus);
3989
+ --tds-date-picker-background-color:var(--t-form-background-color);
3990
+ --tds-date-picker-color:var(--t-form-color);
3991
+ --tds-date-picker-placeholder-color:var(--t-form-placeholder-color);
3992
+ --tds-date-picker-font-size:var(--t-font-size-md);
3993
+ --tds-date-picker-min-height:var(--t-container-size-md);
3994
+ --tds-date-picker-padding-block:6px;
3995
+ --tds-date-picker-button-offset:4px;
3996
+ --tds-date-picker-description-color:var(--t-text-color-secondary);
3997
+ --tds-date-picker-description-invalid-icon-display:none;
4154
3998
 
4155
3999
  position:relative;
4156
4000
  display:flex;
@@ -4158,135 +4002,291 @@ a[class="tds-btn"]{
4158
4002
  gap:var(--t-spacing-half);
4159
4003
  }
4160
4004
 
4161
- .tds-time-field[data-required] .tds-time-field-label::after{
4005
+ .tds-date-picker[data-required] .tds-date-picker-label::after{
4162
4006
  margin-left:.25ch;
4163
4007
  color:var(--t-text-color-status-error);
4164
4008
  content:"*";
4165
4009
  }
4166
4010
 
4167
- .tds-time-field[data-invalid]{
4168
- --tds-time-field-border-color:var(--t-form-border-color-error);
4169
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4170
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4171
- --tds-time-field-background-color:var(--t-form-background-color-error);
4172
- --tds-time-field-description-color:var(--t-text-color-status-error);
4173
- --tds-time-field-description-invalid-icon-display:inline-block;
4011
+ .tds-date-picker[data-invalid]{
4012
+ --tds-date-picker-border-color:var(--t-form-border-color-error);
4013
+ --tds-date-picker-border-color-hover:var(--t-form-border-color-error-hover);
4014
+ --tds-date-picker-border-color-active:var(--t-form-border-color-error-hover);
4015
+ --tds-date-picker-background-color:var(--t-form-background-color-error);
4016
+ --tds-date-picker-description-color:var(--t-text-color-status-error);
4017
+ --tds-date-picker-description-invalid-icon-display:inline-block;
4174
4018
  }
4175
4019
 
4176
- .tds-time-field[data-disabled]{
4177
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
4178
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
4179
- --tds-time-field-color:var(--t-form-color-disabled);
4180
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4020
+ .tds-date-picker[data-disabled]{
4021
+ --tds-date-picker-border-color:var(--t-form-border-color-disabled);
4022
+ --tds-date-picker-background-color:var(--t-form-background-color-disabled);
4023
+ --tds-date-picker-color:var(--t-form-color-disabled);
4024
+ --tds-date-picker-placeholder-color:var(--t-form-color-disabled);
4181
4025
  }
4182
4026
 
4183
- .tds-time-field[data-disabled] .tds-time-field-label{
4184
- color:var(--t-form-color-disabled);
4185
- }
4186
-
4187
- .tds-time-field[data-disabled] .tds-time-field-input{
4027
+ .tds-date-picker[data-disabled] .tds-date-picker-field{
4188
4028
  cursor:not-allowed;
4189
4029
  }
4190
4030
 
4191
- .tds-time-field--lg{
4192
- --tds-time-field-min-height:var(--t-container-size-lg);
4193
- --tds-time-field-font-size:var(--t-font-size-lg);
4031
+ .tds-date-picker--lg{
4032
+ --tds-date-picker-min-height:var(--t-container-size-lg);
4033
+ --tds-date-picker-font-size:var(--t-font-size-lg);
4034
+ --tds-date-picker-button-offset:5px;
4194
4035
  }
4195
4036
 
4196
- .tds-time-field-label{
4037
+ .tds-date-picker-label{
4197
4038
  font-size:var(--t-font-size-md);
4198
4039
  font-weight:var(--t-font-weight-normal);
4199
4040
  color:var(--t-text-color);
4200
4041
  cursor:default;
4201
4042
  }
4202
4043
 
4203
- .tds-time-field-input{
4044
+ .tds-date-picker-field{
4204
4045
  display:flex;
4205
4046
  align-items:center;
4206
4047
  inline-size:100%;
4207
- min-block-size:var(--tds-time-field-min-height);
4208
- padding-block:var(--tds-time-field-padding-block);
4209
- padding-inline:var(--t-spacing-1);
4048
+ min-block-size:var(--tds-date-picker-min-height);
4210
4049
  font-family:inherit;
4211
- font-size:var(--tds-time-field-font-size);
4212
- font-variant-numeric:tabular-nums;
4050
+ font-size:var(--tds-date-picker-font-size);
4213
4051
  line-height:1;
4214
- color:var(--tds-time-field-color);
4052
+ color:var(--tds-date-picker-color);
4053
+ -webkit-appearance:none;
4054
+ -moz-appearance:none;
4055
+ appearance:none;
4215
4056
  cursor:text;
4216
4057
  outline:var(--t-focus-ring-width) solid transparent;
4217
4058
  outline-offset:0;
4218
- background-color:var(--tds-time-field-background-color);
4219
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4059
+ background-color:var(--tds-date-picker-background-color);
4060
+ border:var(--t-form-border-width) solid var(--tds-date-picker-border-color);
4220
4061
  border-radius:var(--t-form-border-radius);
4221
4062
  }
4222
4063
 
4223
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4224
- border-color:var(--tds-time-field-border-color-hover);
4064
+ .tds-date-picker-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4065
+ border-color:var(--tds-date-picker-border-color-hover);
4225
4066
  }
4226
4067
 
4227
- .tds-time-field-input[data-focus-within]{
4068
+ .tds-date-picker-field[data-focus-within]{
4228
4069
  outline-color:var(--t-focus-ring-color);
4229
4070
  outline-offset:var(--t-focus-ring-offset);
4230
- border-color:var(--tds-time-field-border-color-active);
4071
+ border-color:var(--tds-date-picker-border-color-active);
4231
4072
  }
4232
4073
 
4233
- .tds-time-field-input[data-readonly]{
4074
+ .tds-date-picker-field:has(.tds-date-picker-input[data-readonly]){
4234
4075
  color:var(--t-form-color-readonly);
4235
4076
  background-color:var(--t-form-background-color-readonly);
4236
4077
  border-color:var(--t-form-border-color-readonly);
4237
4078
  }
4238
4079
 
4239
- .tds-time-field-input[data-readonly][data-hovered]{
4080
+ .tds-date-picker-field[data-hovered]:has(.tds-date-picker-input[data-readonly]){
4240
4081
  border-color:var(--t-form-border-color-readonly);
4241
4082
  }
4242
4083
 
4243
- .tds-time-field-input[data-readonly][data-focus-within]{
4084
+ .tds-date-picker-field[data-focus-within]:has(.tds-date-picker-input[data-readonly]){
4244
4085
  outline-color:var(--t-focus-ring-color);
4245
4086
  outline-offset:var(--t-focus-ring-offset);
4246
4087
  border-color:var(--t-form-border-color-hover);
4247
4088
  }
4248
4089
 
4249
- .tds-time-field-segment{
4250
- padding-inline:1px;
4090
+ .tds-date-picker-input{
4091
+ flex:1;
4092
+ padding-block:var(--tds-date-picker-padding-block);
4093
+ padding-inline-start:var(--t-spacing-1);
4251
4094
  font-variant-numeric:tabular-nums;
4252
- cursor:text;
4095
+ }
4096
+
4097
+ .tds-date-picker-segment{
4098
+ padding-inline:2px;
4253
4099
  caret-color:transparent;
4254
4100
  border-radius:var(--t-border-radius-sm);
4255
4101
  }
4256
4102
 
4257
- .tds-time-field-segment[data-placeholder]{
4258
- color:var(--tds-time-field-placeholder-color);
4103
+ .tds-date-picker-segment[data-placeholder]{
4104
+ color:var(--tds-date-picker-placeholder-color);
4259
4105
  }
4260
4106
 
4261
- .tds-time-field-segment[data-focused]{
4107
+ .tds-date-picker-segment[data-focused]{
4262
4108
  color:var(--t-text-color-inverted);
4263
4109
  outline:0;
4264
4110
  background:var(--t-fill-color-interaction);
4265
4111
  }
4266
4112
 
4267
- .tds-time-field-segment-separator{
4113
+ .tds-date-picker-segment-separator{
4268
4114
  padding-inline:0;
4269
- color:var(--tds-time-field-placeholder-color);
4115
+ color:var(--tds-date-picker-placeholder-color);
4270
4116
  }
4271
4117
 
4272
- .tds-time-field-description{
4118
+ .tds-date-picker-description{
4273
4119
  display:flex;
4274
4120
  gap:var(--t-spacing-half);
4275
4121
  align-items:flex-start;
4276
4122
  margin:0;
4277
4123
  font-size:var(--t-font-size-sm);
4278
4124
  line-height:1.35;
4279
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4125
+ color:var(--tds-date-picker-description-color, var(--t-text-color-secondary));
4280
4126
  cursor:text;
4281
4127
  }
4282
4128
 
4283
- .tds-time-field-description .tds-time-field-description-invalid-icon{
4284
- display:var(--tds-time-field-description-invalid-icon-display, none);
4129
+ .tds-date-picker-description .tds-date-picker-description-invalid-icon{
4130
+ display:var(--tds-date-picker-description-invalid-icon-display, none);
4285
4131
  flex-shrink:0;
4286
4132
  margin-block-start:calc(.5lh - .5em);
4287
4133
  line-height:1.35;
4288
4134
  }
4289
4135
 
4136
+ .tds-date-picker-button{
4137
+ flex-shrink:0;
4138
+ align-self:center;
4139
+ inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4140
+ block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
4141
+ padding:0;
4142
+ margin-inline-end:var(--tds-date-picker-button-offset);
4143
+ }
4144
+
4145
+ .tds-date-picker-popover{
4146
+ padding:var(--t-spacing-2);
4147
+ background:var(--t-surface-color-card);
4148
+ border:1px solid var(--t-border-color);
4149
+ border-radius:var(--t-border-radius);
4150
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4151
+ }
4152
+
4153
+ .tds-date-picker-popover[data-entering]{
4154
+ animation:tds-date-picker-popover-enter 160ms ease;
4155
+ }
4156
+
4157
+ .tds-date-picker-popover[data-exiting]{
4158
+ animation:tds-date-picker-popover-exit 130ms ease;
4159
+ }
4160
+
4161
+ @keyframes tds-date-picker-popover-enter{
4162
+ from{
4163
+ opacity:0;
4164
+ transform:translateY(-8px);
4165
+ }
4166
+ }
4167
+
4168
+ @keyframes tds-date-picker-popover-exit{
4169
+ to{
4170
+ opacity:0;
4171
+ transform:translateY(-8px);
4172
+ }
4173
+ }
4174
+
4175
+ @media (prefers-reduced-motion: reduce){
4176
+ .tds-date-picker-popover[data-entering],.tds-date-picker-popover[data-exiting]{
4177
+ animation:none;
4178
+ }
4179
+ }
4180
+
4181
+ .tds-date-picker-calendar{
4182
+ inline-size:-moz-fit-content;
4183
+ inline-size:fit-content;
4184
+ }
4185
+
4186
+ .tds-date-picker-calendar-header{
4187
+ display:flex;
4188
+ align-items:center;
4189
+ justify-content:space-between;
4190
+ padding-block-end:var(--t-spacing-1);
4191
+ }
4192
+
4193
+ .tds-date-picker-calendar-title{
4194
+ flex:1;
4195
+ margin:0;
4196
+ font-size:var(--t-font-size-md);
4197
+ font-weight:var(--t-font-weight-semibold);
4198
+ text-align:center;
4199
+ }
4200
+
4201
+ .tds-date-picker-calendar-nav{
4202
+ display:flex;
4203
+ align-items:center;
4204
+ justify-content:center;
4205
+ padding:var(--t-spacing-half);
4206
+ color:var(--t-text-color);
4207
+ cursor:default;
4208
+ outline:0;
4209
+ background:transparent;
4210
+ border:0;
4211
+ border-radius:var(--t-border-radius-sm);
4212
+ }
4213
+
4214
+ .tds-date-picker-calendar-nav[data-hovered]{
4215
+ background:var(--t-fill-color-neutral-070);
4216
+ }
4217
+
4218
+ .tds-date-picker-calendar-nav[data-pressed]{
4219
+ background:var(--t-fill-color-button-interaction-ghost-active);
4220
+ }
4221
+
4222
+ .tds-date-picker-calendar-nav[data-focus-visible]{
4223
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4224
+ outline-offset:var(--t-focus-ring-offset);
4225
+ }
4226
+
4227
+ .tds-date-picker-calendar-nav[data-disabled]{
4228
+ color:var(--t-form-color-disabled);
4229
+ cursor:not-allowed;
4230
+ }
4231
+
4232
+ .tds-date-picker-calendar-grid{
4233
+ border-collapse:collapse;
4234
+ }
4235
+
4236
+ .tds-date-picker-calendar-header-cell{
4237
+ padding-block:var(--t-spacing-half);
4238
+ font-size:var(--t-font-size-sm);
4239
+ font-weight:var(--t-font-weight-normal);
4240
+ color:var(--t-text-color-secondary);
4241
+ text-align:center;
4242
+ }
4243
+
4244
+ .tds-date-picker-calendar-cell{
4245
+ display:flex;
4246
+ align-items:center;
4247
+ justify-content:center;
4248
+ inline-size:2.25rem;
4249
+ block-size:2.25rem;
4250
+ font-size:var(--t-font-size-md);
4251
+ color:var(--t-text-color);
4252
+ cursor:default;
4253
+ outline:0;
4254
+ border-radius:var(--t-border-radius-sm);
4255
+ }
4256
+
4257
+ .tds-date-picker-calendar-cell[data-hovered]{
4258
+ background:var(--t-fill-color-neutral-070);
4259
+ }
4260
+
4261
+ .tds-date-picker-calendar-cell[data-pressed]{
4262
+ background:var(--t-fill-color-button-interaction-ghost-active);
4263
+ }
4264
+
4265
+ .tds-date-picker-calendar-cell[data-selected]{
4266
+ color:var(--t-text-color-inverted);
4267
+ background:var(--t-fill-color-interaction);
4268
+ }
4269
+
4270
+ .tds-date-picker-calendar-cell[data-focus-visible]{
4271
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4272
+ outline-offset:var(--t-focus-ring-offset);
4273
+ }
4274
+
4275
+ .tds-date-picker-calendar-cell[data-unavailable]{
4276
+ color:var(--t-text-color-secondary);
4277
+ text-decoration:line-through;
4278
+ cursor:not-allowed;
4279
+ }
4280
+
4281
+ .tds-date-picker-calendar-cell[data-disabled]{
4282
+ color:var(--t-form-color-disabled);
4283
+ cursor:not-allowed;
4284
+ }
4285
+
4286
+ .tds-date-picker-calendar-cell[data-outside-month]{
4287
+ color:var(--t-text-color-secondary);
4288
+ }
4289
+
4290
4290
  .t-banner{
4291
4291
  --t-banner-font-size:var(--t-font-size-md);
4292
4292
  --t-banner-font-color:var(--t-text-color);