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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/date-picker/DatePicker.js +3 -3
  2. package/dist/components/date-picker/DatePicker.js.map +1 -1
  3. package/dist/components/time-field/TimeField.d.ts +8 -18
  4. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  5. package/dist/components/time-field/TimeField.js +2 -2
  6. package/dist/components/time-field/TimeField.js.map +1 -1
  7. package/dist/components/time-field/index.d.ts +1 -1
  8. package/dist/components/time-field/index.d.ts.map +1 -1
  9. package/dist/reactRender.css +1167 -1167
  10. package/dist/reactRender.css.map +1 -1
  11. package/dist/reactRenderLegacy.css +1167 -1167
  12. package/dist/reactRenderLegacy.css.map +1 -1
  13. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -1,288 +1,195 @@
1
- @layer t-critical{
2
- tds-page-header:not(.hydrated){
3
- display:none;
4
- }
5
- }
1
+ .tds-checkbox{
2
+ --tds-checkbox-font-size:var(--t-font-size-md);
3
+ --tds-checkbox-cursor:pointer;
4
+ --tds-checkbox-line-height:1.4;
5
+ --tds-checkbox-transition-property:background-color, border-color;
6
6
 
7
- @layer t-component{
8
- .tds-page-header{
9
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
10
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
11
- --tds-page-header-color:var(--t-text-color);
12
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
13
- --tds-page-header-headline-color:var(--t-text-color-headline);
14
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
- --tds-page-header-padding-x:var(--t-spacing-2);
16
- --tds-page-header-padding-y:var(--t-spacing-2);
17
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
- --tds-page-header-nav-gap:var(--t-spacing-1);
19
- --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
- --tds-page-header-nav-item-border-width:1px;
7
+ --tds-checkbox-input-size:var(--t-element-size-md);
8
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
9
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
10
+ --tds-checkbox-input-background-color:transparent;
25
11
 
26
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
27
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
12
+ --tds-checkbox-input-icon:none;
13
+ --tds-checkbox-input-icon-visibility:hidden;
14
+ --tds-checkbox-input-icon-opacity:0;
15
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
28
16
 
29
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
30
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
31
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
17
+ --tds-checkbox-label-color:var(--t-form-color);
32
18
 
33
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
34
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
19
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
20
+ --tds-checkbox-description-line-height:1.35;
21
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
22
+ --tds-checkbox-description-invalid-icon-display:none;
35
23
 
36
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
37
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
38
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
24
+ position:relative;
25
+ display:inline-grid;
26
+ grid-template-columns:auto;
27
+ grid-auto-columns:1fr;
28
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
29
+ line-height:var(--tds-checkbox-line-height);
30
+ cursor:var(--tds-checkbox-cursor);
31
+ -webkit-user-select:none;
32
+ -moz-user-select:none;
33
+ user-select:none;
34
+ }
39
35
 
40
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
41
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
42
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
43
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
36
+ .tds-checkbox label{
37
+ grid-area:1 / 2;
38
+ font-size:var(--tds-checkbox-font-size);
39
+ font-weight:var(--t-font-weight-normal);
40
+ color:var(--tds-checkbox-label-color);
41
+ cursor:var(--tds-checkbox-cursor);
45
42
  }
46
43
 
47
- .tds-page-header--profile{
48
- --tds-page-header-padding-y:20px;
44
+ .tds-checkbox tds-indeterminate{
45
+ display:flex;
49
46
  }
50
47
 
51
- @supports (color: light-dark(#fff, #000)){
52
- .tds-page-header{
53
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
54
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
55
- }
48
+ .tds-checkbox input[type="checkbox"]{
49
+ position:relative;
50
+ width:1em;
51
+ height:1em;
52
+ margin:calc((1lh - 1em) / 2) 0 0;
53
+ font-size:var(--tds-checkbox-font-size);
54
+ line-height:inherit;
55
+ -webkit-appearance:none;
56
+ -moz-appearance:none;
57
+ appearance:none;
58
+ cursor:var(--tds-checkbox-cursor);
59
+ background-color:var(--tds-checkbox-input-background-color);
60
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
61
+ border-radius:var(--tds-checkbox-input-border-radius);
62
+ transition-timing-function:var(--t-ease-in-out);
63
+ transition-duration:var(--t-duration-200);
64
+ transition-property:var(--tds-checkbox-transition-property);
56
65
  }
57
66
 
58
- @media (min-width: 600px){
59
- .tds-page-header{
60
- --tds-page-header-background-color:var(--t-surface-color-canvas);
61
- --tds-page-header-color:var(--t-text-color-secondary);
62
- --tds-page-header-bottom-border-color:var(--t-border-color);
63
- --tds-page-header-padding-x:var(--t-spacing-3);
64
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
65
- --tds-page-header-nav-gap:var(--t-spacing-half);
66
- --tds-page-header-nav-background:transparent;
67
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
68
- --tds-page-header-nav-item-border-width:1px;
69
- --tds-page-header-nav-item-color:var(--t-text-color);
70
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
71
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
72
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
67
+ :is(.tds-checkbox input[type="checkbox"])::before{
68
+ position:absolute;
69
+ top:50%;
70
+ left:50%;
71
+ visibility:var(--tds-checkbox-input-icon-visibility);
72
+ width:100%;
73
+ height:100%;
74
+ content:"";
75
+ background-color:var(--tds-checkbox-input-icon-fill);
76
+ border-radius:var(--tds-checkbox-input-border-radius);
77
+ opacity:var(--tds-checkbox-input-icon-opacity);
78
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
79
+ mask-image:var(--tds-checkbox-input-icon);
80
+ -webkit-mask-repeat:no-repeat;
81
+ mask-repeat:no-repeat;
82
+ -webkit-mask-size:contain;
83
+ mask-size:contain;
84
+ transform:translate(-50%, -50%);
75
85
  }
76
- }
77
- }
78
86
 
79
- .tds-page-header{
80
- display:flex;
81
- flex-direction:column;
82
- padding-top:var(--tds-page-header-padding-y);
83
- color:var(--tds-page-header-color);
84
- background:var(--tds-page-header-background-color);
85
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
86
- }
87
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
88
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
89
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
90
+ }
87
91
 
88
- .tds-page-header:not(.has-nav){
89
- padding-bottom:var(--tds-page-header-padding-y);
92
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
93
+ outline:var(--t-focus-ring-outline);
94
+ outline-offset:var(--t-focus-ring-offset);
95
+ }
96
+
97
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
98
+ pointer-events:none;
99
+ }
100
+
101
+ @media (prefers-reduced-motion: reduce){
102
+
103
+ .tds-checkbox input[type="checkbox"]{
104
+ --tds-checkbox-transition-property:none;
90
105
  }
106
+ }
91
107
 
92
- .tds-page-header.inactive{
93
- background:var(--tds-page-header-background-color-inactive);
108
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
109
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
110
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
111
+ --tds-checkbox-input-icon-visibility:visible;
112
+ --tds-checkbox-input-icon-opacity:1;
94
113
  }
95
114
 
96
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
- width:100%;
115
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
116
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
117
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
118
+ }
119
+
120
+ .tds-checkbox:has(input:checked){
121
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
98
122
  }
99
123
 
100
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
101
- display:flex;
102
- flex-flow:row wrap;
103
- gap:var(--t-spacing-half) var(--t-spacing-1);
104
- align-items:flex-start;
105
- justify-content:flex-start;
106
- min-width:0;
124
+ .tds-checkbox:has(input:indeterminate){
125
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
107
126
  }
108
127
 
109
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
- display:flex;
111
- gap:var(--tds-page-header-nav-gap);
112
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
- margin:0 0 -1px;
114
- overflow:auto;
115
- list-style:none;
116
- background:var(--tds-page-header-nav-background);
128
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
129
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
130
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
131
+ --tds-checkbox-description-invalid-icon-display:inline-block;
132
+ }
133
+
134
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
135
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
136
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
117
137
  }
118
138
 
119
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
- position:relative;
121
- display:inline-flex;
122
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
- font-size:var(--t-font-size-sm);
124
- line-height:22px;
125
- color:var(--tds-page-header-nav-item-color);
126
- white-space:nowrap;
127
- text-decoration:none;
128
- -webkit-appearance:none;
129
- -moz-appearance:none;
130
- appearance:none;
131
- cursor:pointer;
132
- outline-offset:-2px;
133
- background-color:var(--tds-page-header-nav-item-background-color);
134
- background-clip:padding-box;
135
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
139
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
140
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
141
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
138
142
  }
139
143
 
140
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
145
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
146
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
145
147
  }
146
148
 
147
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
- }
149
+ .tds-checkbox:has(input:required) label::after{
150
+ margin-left:.25ch;
151
+ color:var(--t-text-color-status-error);
152
+ content:"*";
153
+ }
152
154
 
153
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
- background-color:var(--tds-page-header-nav-item-background-color-active);
155
- border-color:var(--tds-page-header-nav-item-border-color-active);
156
- }
155
+ .tds-checkbox:has(input:disabled){
156
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
157
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
157
158
 
158
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
- color:var(--tds-page-header-nav-item-color-disabled);
160
- cursor:not-allowed;
161
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
- opacity:1;
163
- }
159
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
160
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
161
+ --tds-checkbox-cursor:not-allowed;
162
+ }
164
163
 
165
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
- position:relative;
164
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
165
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
167
166
  }
168
167
 
169
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
172
- }
173
-
174
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
175
- position:absolute;
176
- top:-5px;
177
- right:-2px;
178
- width:10px;
179
- height:10px;
180
- content:"";
181
- background:var(--tds-page-header-nav-item-indicator-color);
182
- border-radius:50%;
183
- }
184
-
185
- @media (prefers-reduced-motion: no-preference){
186
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
- animation:indicator-pulse 1.25s ease infinite;
188
- }
189
- }
190
-
191
- .tds-page-header__title-bar{
168
+ .tds-checkbox-description{
192
169
  display:flex;
193
- flex-direction:column;
194
- gap:var(--t-spacing-2) var(--t-spacing-1);
170
+ grid-area:2 / 2;
171
+ gap:var(--t-spacing-half);
195
172
  align-items:flex-start;
196
- justify-content:space-between;
197
- padding:0 var(--tds-page-header-padding-x);
198
- }
199
-
200
- .tds-page-header--profile > .tds-page-header__title-bar{
201
- align-items:center;
202
- }
203
-
204
- .tds-page-header__primary{
205
- width:100%;
206
- }
207
-
208
- .tds-page-header__primary h1{
209
- margin:0;
210
- font-size:var(--tds-page-header-headline-font-size);
211
- font-weight:var(--t-font-weight-normal);
212
- line-height:32px;
213
- color:var(--tds-page-header-headline-color);
214
- overflow-wrap:break-word;
215
- }
216
-
217
- @media (min-width: 960px){
218
- .tds-page-header__primary{
219
- flex:1 1 max-content;
220
- width:auto;
221
- min-width:0;
222
- max-width:100%;
223
- }
224
-
225
- .tds-page-header__title-bar,
226
- .tds-page-header--profile .tds-page-header__title-bar{
227
- flex-flow:row nowrap;
228
- row-gap:12px;
229
- align-items:flex-start;
230
- }
231
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
- width:auto;
233
- }
234
-
235
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
- justify-content:flex-end;
237
- }
238
- }
239
-
240
- .tds-page-header-phone,
241
- .tds-page-header-email{
242
- color:var(--tds-page-header-color);
243
- white-space:nowrap;
244
- }
245
-
246
- .tds-page-header-email{
247
- max-width:100%;
248
- overflow:hidden;
249
- text-overflow:ellipsis;
250
- }
251
-
252
- @keyframes indicator-pulse{
253
- 0%{
254
- opacity:.3;
255
- transform:scale(.9);
256
- }
257
-
258
- 100%{
259
- opacity:0;
260
- transform:scale(1.75);
261
- }
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;
262
178
  }
263
179
 
264
-
265
- :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{
266
- -webkit-appearance:none;
267
- appearance:none;
268
- }
269
-
270
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
271
- inline-size:1em;
272
- block-size:2em;
273
- }
274
-
275
- @supports (field-sizing: content){
276
- .tds-input--auto-width{
277
- inline-size:-moz-fit-content;
278
- inline-size:fit-content;
279
- min-inline-size:min(100%, 122px);
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);
280
185
  }
281
186
 
282
- .tds-input--auto-width input{
283
- field-sizing:content;
284
- inline-size:auto;
285
- }
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;
286
193
  }
287
194
 
288
195
 
@@ -647,198 +554,220 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
647
554
  flex-direction:column;
648
555
  }
649
556
 
650
- .tds-checkbox{
651
- --tds-checkbox-font-size:var(--t-font-size-md);
652
- --tds-checkbox-cursor:pointer;
653
- --tds-checkbox-line-height:1.4;
654
- --tds-checkbox-transition-property:background-color, border-color;
655
-
656
- --tds-checkbox-input-size:var(--t-element-size-md);
657
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
658
- --tds-checkbox-input-border-color:var(--t-form-border-color);
659
- --tds-checkbox-input-background-color:transparent;
660
557
 
661
- --tds-checkbox-input-icon:none;
662
- --tds-checkbox-input-icon-visibility:hidden;
663
- --tds-checkbox-input-icon-opacity:0;
664
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
558
+ :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{
559
+ -webkit-appearance:none;
560
+ appearance:none;
561
+ }
665
562
 
666
- --tds-checkbox-label-color:var(--t-form-color);
563
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
564
+ inline-size:1em;
565
+ block-size:2em;
566
+ }
667
567
 
668
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
669
- --tds-checkbox-description-line-height:1.35;
670
- --tds-checkbox-description-color:var(--t-text-color-secondary);
671
- --tds-checkbox-description-invalid-icon-display:none;
568
+ @supports (field-sizing: content){
569
+ .tds-input--auto-width{
570
+ inline-size:-moz-fit-content;
571
+ inline-size:fit-content;
572
+ min-inline-size:min(100%, 122px);
573
+ }
672
574
 
673
- position:relative;
674
- display:inline-grid;
675
- grid-template-columns:auto;
676
- grid-auto-columns:1fr;
677
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
678
- line-height:var(--tds-checkbox-line-height);
679
- cursor:var(--tds-checkbox-cursor);
680
- -webkit-user-select:none;
681
- -moz-user-select:none;
682
- user-select:none;
575
+ .tds-input--auto-width input{
576
+ field-sizing:content;
577
+ inline-size:auto;
578
+ }
683
579
  }
684
580
 
685
- .tds-checkbox label{
686
- grid-area:1 / 2;
687
- font-size:var(--tds-checkbox-font-size);
688
- font-weight:var(--t-font-weight-normal);
689
- color:var(--tds-checkbox-label-color);
690
- cursor:var(--tds-checkbox-cursor);
691
- }
581
+ .tds-input:has(textarea){
582
+ --tds-input-padding-block:6px;
583
+ --tds-input-resizer-size:var(--t-element-size-sm);
584
+ --tds-input-resizer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%236f7784' stroke-linecap='round' stroke-width='1.25'%3E%3Cpath d='M5.5 13l7.5-7.5'/%3E%3Cpath d='M9 13l4-4'/%3E%3C/g%3E%3C/svg%3E");
585
+ }
692
586
 
693
- .tds-checkbox tds-indeterminate{
694
- display:flex;
695
- }
587
+ @supports (x: attr(x type(*))){
696
588
 
697
- .tds-checkbox input[type="checkbox"]{
698
- position:relative;
699
- width:1em;
700
- height:1em;
701
- margin:calc((1lh - 1em) / 2) 0 0;
702
- font-size:var(--tds-checkbox-font-size);
703
- line-height:inherit;
704
- -webkit-appearance:none;
705
- -moz-appearance:none;
706
- appearance:none;
707
- cursor:var(--tds-checkbox-cursor);
708
- background-color:var(--tds-checkbox-input-background-color);
709
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
710
- border-radius:var(--tds-checkbox-input-border-radius);
711
- transition-timing-function:var(--t-ease-in-out);
712
- transition-duration:var(--t-duration-200);
713
- transition-property:var(--tds-checkbox-transition-property);
589
+ .tds-input:has(textarea){
590
+ --tds-input-min-height:calc((attr(rows type(<number>), 3) * 1lh) + (var(--tds-input-padding-block) * 2) + 2px);
591
+ }
714
592
  }
715
593
 
716
- :is(.tds-checkbox input[type="checkbox"])::before{
717
- position:absolute;
718
- top:50%;
719
- left:50%;
720
- visibility:var(--tds-checkbox-input-icon-visibility);
721
- width:100%;
722
- height:100%;
723
- content:"";
724
- background-color:var(--tds-checkbox-input-icon-fill);
725
- border-radius:var(--tds-checkbox-input-border-radius);
726
- opacity:var(--tds-checkbox-input-icon-opacity);
727
- -webkit-mask-image:var(--tds-checkbox-input-icon);
728
- mask-image:var(--tds-checkbox-input-icon);
729
- -webkit-mask-repeat:no-repeat;
730
- mask-repeat:no-repeat;
731
- -webkit-mask-size:contain;
732
- mask-size:contain;
733
- transform:translate(-50%, -50%);
594
+ .tds-input.tds-textarea--resize-vertical textarea{
595
+ resize:vertical;
734
596
  }
735
597
 
736
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
737
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
738
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
598
+ .tds-input.tds-textarea--resize-none textarea{
599
+ resize:none;
739
600
  }
740
601
 
741
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
742
- outline:var(--t-focus-ring-outline);
743
- outline-offset:var(--t-focus-ring-offset);
602
+ .tds-input.tds-textarea--resize-auto textarea{
603
+ resize:vertical;
744
604
  }
745
605
 
746
- :is(.tds-checkbox input[type="checkbox"]):disabled{
747
- pointer-events:none;
606
+ @supports (field-sizing: content){
607
+ .tds-input.tds-textarea--resize-auto textarea{
608
+ field-sizing:content;
609
+ resize:none;
610
+ }
748
611
  }
749
612
 
750
- @media (prefers-reduced-motion: reduce){
613
+ .tds-input textarea{
614
+ --tds-input-scrollbar-thumb-color-default:var(--t-fill-color-neutral-040);
615
+ --tds-input-scrollbar-thumb-color-hidden:transparent;
616
+ --tds-input-scrollbar-thumb-color-hover:var(--t-fill-color-neutral-030);
617
+ --tds-input-scrollbar-thumb-color-thumb-hover:var(--t-fill-color-neutral-020);
618
+ --tds-input-scrollbar-thumb-color-thumb-active:var(--t-fill-color-neutral-010);
619
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-default);
620
+ --tds-input-scrollbar-surface-color:rgba(0, 0, 0, 0);
621
+ --tds-input-scrollbar-thumb-border-radius:999px;
622
+ --tds-input-scrollbar-thumb-border-width:3px;
623
+ --tds-input-scrollbar-track-margin-block:.125rem;
624
+ scrollbar-color:initial;
625
+ transition-timing-function:var(--t-ease-in-out);
626
+ transition-duration:var(--t-duration-200);
627
+ transition-property:var(--tds-input-transition-property), --tds-input-scrollbar-thumb-color;
628
+ }
751
629
 
752
- .tds-checkbox input[type="checkbox"]{
753
- --tds-checkbox-transition-property:none;
754
- }
630
+ @media (pointer: fine){
631
+ :is(.tds-input textarea)::-webkit-scrollbar{
632
+ width:12px;
633
+ height:12px;
634
+ cursor:default;
755
635
  }
756
636
 
757
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
758
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
759
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
760
- --tds-checkbox-input-icon-visibility:visible;
761
- --tds-checkbox-input-icon-opacity:1;
762
- }
637
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb{
638
+ cursor:default;
639
+ background:var(--tds-input-scrollbar-thumb-color);
640
+ background-clip:content-box;
641
+ border:var(--tds-input-scrollbar-thumb-border-width) solid var(--tds-input-scrollbar-surface-color);
642
+ border-radius:var(--tds-input-scrollbar-thumb-border-radius);
643
+ }
763
644
 
764
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
765
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
766
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
645
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
646
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
767
647
  }
768
648
 
769
- .tds-checkbox:has(input:checked){
770
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
649
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
650
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
651
+ }
652
+
653
+ :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
654
+ --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
655
+ }
656
+
657
+ :is(.tds-input textarea)::-webkit-scrollbar-corner{
658
+ background:var(--tds-input-scrollbar-surface-color);
659
+ }
660
+
661
+ :is(.tds-input textarea)::-webkit-resizer{
662
+ background:var(--tds-input-resizer-icon) no-repeat;
663
+ background-position:right bottom;
664
+ background-size:var(--tds-input-resizer-size) var(--tds-input-resizer-size);
665
+ }
666
+
667
+ :is(.tds-input textarea)::-webkit-scrollbar-track{
668
+ margin-block:var(--tds-input-scrollbar-track-margin-block);
669
+ cursor:default;
670
+ }
671
+
672
+ @supports (-moz-appearance: none){
673
+ :is(.tds-input textarea){
674
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-default) var(--tds-input-scrollbar-surface-color);
675
+ scrollbar-width:thin;
676
+ }
677
+
678
+ @media (hover){
679
+ :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
680
+ scrollbar-color:var(--tds-input-scrollbar-thumb-color-hover) var(--tds-input-scrollbar-surface-color);
681
+ }
682
+ }
683
+ }
771
684
  }
772
685
 
773
- .tds-checkbox:has(input:indeterminate){
774
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
686
+ .tds-radio-group{
687
+ --tds-radio-group-font-size:var(--t-font-size-md);
688
+ --tds-radio-group-line-height:1.4;
689
+ --tds-radio-group-gap:var(--t-spacing-1);
690
+
691
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
692
+
693
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
694
+ --tds-radio-group-description-line-height:1.35;
695
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
696
+ --tds-radio-group-description-invalid-icon-display:none;
697
+ display:flex;
698
+ flex-direction:column;
699
+ gap:var(--tds-radio-group-gap);
700
+ padding:0;
701
+ margin:0;
702
+
703
+ font-size:var(--tds-radio-group-font-size);
704
+ line-height:var(--tds-radio-group-line-height);
705
+ border:0;
706
+ }
707
+
708
+ .tds-radio-group legend{
709
+ padding:0;
710
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
775
711
  }
776
712
 
777
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
778
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
779
- --tds-checkbox-description-color:var(--t-text-color-status-error);
780
- --tds-checkbox-description-invalid-icon-display:inline-block;
713
+ .tds-radio-group:has(.tds-radio-group-description){
714
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
781
715
  }
782
716
 
783
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
784
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
785
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
786
- }
717
+ .tds-radio-group[aria-invalid="true"]{
718
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
719
+ --tds-radio-group-description-invalid-icon-display:inline-block;
720
+ }
787
721
 
788
- :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{
789
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
790
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
722
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
723
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
791
724
  }
792
725
 
793
- :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){
794
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
795
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
726
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
727
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
728
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
796
729
  }
797
730
 
798
- .tds-checkbox:has(input:required) label::after{
731
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
732
+ --tds-radio-input-background-color:var(--t-form-background-color);
733
+ }
734
+
735
+ .tds-radio-group:has(input:required) legend::after{
799
736
  margin-left:.25ch;
800
737
  color:var(--t-text-color-status-error);
801
738
  content:"*";
802
739
  }
803
740
 
804
- .tds-checkbox:has(input:disabled){
805
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
806
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
807
-
808
- --tds-checkbox-label-color:var(--t-form-color-disabled);
809
- --tds-checkbox-description-color:var(--t-form-color-disabled);
810
- --tds-checkbox-cursor:not-allowed;
811
- }
812
-
813
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
814
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
815
- }
741
+ .tds-radio-group-fields{
742
+ display:flex;
743
+ flex-direction:column;
744
+ gap:var(--tds-radio-group-gap);
745
+ align-items:flex-start;
746
+ }
816
747
 
817
- .tds-checkbox-description{
748
+ .tds-radio-group-description{
818
749
  display:flex;
819
- grid-area:2 / 2;
820
750
  gap:var(--t-spacing-half);
821
751
  align-items:flex-start;
822
752
  margin:0;
823
- font-size:var(--tds-checkbox-description-font-size);
824
- line-height:var(--tds-checkbox-description-line-height);
825
- color:var(--tds-checkbox-description-color);
753
+ font-size:var(--tds-radio-group-description-font-size);
754
+ line-height:var(--tds-radio-group-description-line-height);
755
+ color:var(--tds-radio-group-description-color);
826
756
  cursor:text;
827
757
  }
828
758
 
829
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
830
- display:var(--tds-checkbox-description-invalid-icon-display);
759
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
760
+ display:var(--tds-radio-group-description-invalid-icon-display);
831
761
  flex-shrink:0;
832
762
  margin-top:calc(.5lh - .5em);
833
- line-height:var(--tds-checkbox-description-line-height);
763
+ line-height:var(--tds-radio-group-description-line-height);
834
764
  }
835
765
 
836
- .tds-checkbox--sm{
837
- --tds-checkbox-line-height:1.35;
838
- --tds-checkbox-input-size:var(--t-element-size-sm);
839
- --tds-checkbox-font-size:var(--t-font-size-sm);
840
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
841
- --tds-checkbox-description-line-height:1.3;
766
+ .tds-radio-group--sm{
767
+ --tds-radio-group-line-height:1.35;
768
+ --tds-radio-group-font-size:var(--t-font-size-sm);
769
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
770
+ --tds-radio-group-description-line-height:1.3;
842
771
  }
843
772
 
844
773
  .tds-toggle-switch{
@@ -982,129 +911,42 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
982
911
  --tds-toggle-switch-display:inline-flex;
983
912
  }
984
913
 
985
- .tds-radio-group{
986
- --tds-radio-group-font-size:var(--t-font-size-md);
987
- --tds-radio-group-line-height:1.4;
988
- --tds-radio-group-gap:var(--t-spacing-1);
989
-
990
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
914
+ .tds-radio{
915
+ --tds-radio-font-size:var(--t-font-size-md);
916
+ --tds-radio-cursor:pointer;
917
+ --tds-radio-line-height:1.4;
918
+ --tds-radio-transition-property:border-width;
991
919
 
992
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
993
- --tds-radio-group-description-line-height:1.35;
994
- --tds-radio-group-description-color:var(--t-text-color-secondary);
995
- --tds-radio-group-description-invalid-icon-display:none;
996
- display:flex;
997
- flex-direction:column;
998
- gap:var(--tds-radio-group-gap);
999
- padding:0;
1000
- margin:0;
920
+ --tds-radio-input-size:var(--t-element-size-md);
921
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
922
+ --tds-radio-input-border-color:var(--t-form-border-color);
923
+ --tds-radio-input-border-width:var(--t-form-border-width);
924
+ --tds-radio-input-background-color:transparent;
1001
925
 
1002
- font-size:var(--tds-radio-group-font-size);
1003
- line-height:var(--tds-radio-group-line-height);
1004
- border:0;
1005
- }
926
+ --tds-radio-label-color:var(--t-form-color);
1006
927
 
1007
- .tds-radio-group legend{
1008
- padding:0;
1009
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1010
- }
928
+ --tds-radio-description-font-size:var(--t-font-size-sm);
929
+ --tds-radio-description-line-height:1.35;
930
+ --tds-radio-description-color:var(--t-text-color-secondary);
1011
931
 
1012
- .tds-radio-group:has(.tds-radio-group-description){
1013
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1014
- }
932
+ position:relative;
933
+ display:inline-grid;
934
+ grid-template-columns:auto;
935
+ grid-auto-columns:1fr;
936
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
937
+ line-height:var(--tds-radio-line-height);
938
+ cursor:var(--tds-radio-cursor);
939
+ -webkit-user-select:none;
940
+ -moz-user-select:none;
941
+ user-select:none;
942
+ }
1015
943
 
1016
- .tds-radio-group[aria-invalid="true"]{
1017
- --tds-radio-group-description-color:var(--t-text-color-status-error);
1018
- --tds-radio-group-description-invalid-icon-display:inline-block;
1019
- }
1020
-
1021
- .tds-radio-group[aria-invalid="true"] .tds-radio{
1022
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1023
- }
1024
-
1025
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1026
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1027
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1028
- }
1029
-
1030
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1031
- --tds-radio-input-background-color:var(--t-form-background-color);
1032
- }
1033
-
1034
- .tds-radio-group:has(input:required) legend::after{
1035
- margin-left:.25ch;
1036
- color:var(--t-text-color-status-error);
1037
- content:"*";
1038
- }
1039
-
1040
- .tds-radio-group-fields{
1041
- display:flex;
1042
- flex-direction:column;
1043
- gap:var(--tds-radio-group-gap);
1044
- align-items:flex-start;
1045
- }
1046
-
1047
- .tds-radio-group-description{
1048
- display:flex;
1049
- gap:var(--t-spacing-half);
1050
- align-items:flex-start;
1051
- margin:0;
1052
- font-size:var(--tds-radio-group-description-font-size);
1053
- line-height:var(--tds-radio-group-description-line-height);
1054
- color:var(--tds-radio-group-description-color);
1055
- cursor:text;
1056
- }
1057
-
1058
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1059
- display:var(--tds-radio-group-description-invalid-icon-display);
1060
- flex-shrink:0;
1061
- margin-top:calc(.5lh - .5em);
1062
- line-height:var(--tds-radio-group-description-line-height);
1063
- }
1064
-
1065
- .tds-radio-group--sm{
1066
- --tds-radio-group-line-height:1.35;
1067
- --tds-radio-group-font-size:var(--t-font-size-sm);
1068
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1069
- --tds-radio-group-description-line-height:1.3;
1070
- }
1071
-
1072
- .tds-radio{
1073
- --tds-radio-font-size:var(--t-font-size-md);
1074
- --tds-radio-cursor:pointer;
1075
- --tds-radio-line-height:1.4;
1076
- --tds-radio-transition-property:border-width;
1077
-
1078
- --tds-radio-input-size:var(--t-element-size-md);
1079
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1080
- --tds-radio-input-border-color:var(--t-form-border-color);
1081
- --tds-radio-input-border-width:var(--t-form-border-width);
1082
- --tds-radio-input-background-color:transparent;
1083
-
1084
- --tds-radio-label-color:var(--t-form-color);
1085
-
1086
- --tds-radio-description-font-size:var(--t-font-size-sm);
1087
- --tds-radio-description-line-height:1.35;
1088
- --tds-radio-description-color:var(--t-text-color-secondary);
1089
-
1090
- position:relative;
1091
- display:inline-grid;
1092
- grid-template-columns:auto;
1093
- grid-auto-columns:1fr;
1094
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1095
- line-height:var(--tds-radio-line-height);
1096
- cursor:var(--tds-radio-cursor);
1097
- -webkit-user-select:none;
1098
- -moz-user-select:none;
1099
- user-select:none;
1100
- }
1101
-
1102
- .tds-radio label{
1103
- grid-area:1 / 2;
1104
- font-size:var(--tds-radio-font-size);
1105
- font-weight:var(--t-font-weight-normal);
1106
- color:var(--tds-radio-label-color);
1107
- cursor:var(--tds-radio-cursor);
944
+ .tds-radio label{
945
+ grid-area:1 / 2;
946
+ font-size:var(--tds-radio-font-size);
947
+ font-weight:var(--t-font-weight-normal);
948
+ color:var(--tds-radio-label-color);
949
+ cursor:var(--tds-radio-cursor);
1108
950
  }
1109
951
 
1110
952
  .tds-radio input[type="radio"]{
@@ -1201,111 +1043,269 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1201
1043
  --tds-radio-description-line-height:1.3;
1202
1044
  }
1203
1045
 
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");
1046
+ @layer t-critical{
1047
+ tds-page-header:not(.hydrated){
1048
+ display:none;
1049
+ }
1208
1050
  }
1209
1051
 
1210
- @supports (x: attr(x type(*))){
1052
+ @layer t-component{
1053
+ .tds-page-header{
1054
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1055
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1056
+ --tds-page-header-color:var(--t-text-color);
1057
+ --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
1058
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1059
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1060
+ --tds-page-header-padding-x:var(--t-spacing-2);
1061
+ --tds-page-header-padding-y:var(--t-spacing-2);
1062
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1063
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1064
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
1065
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1066
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1067
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1068
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
1069
+ --tds-page-header-nav-item-border-width:1px;
1211
1070
 
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
- }
1215
- }
1071
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1072
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
1216
1073
 
1217
- .tds-input.tds-textarea--resize-vertical textarea{
1218
- resize:vertical;
1219
- }
1074
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1075
+ --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
1076
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1220
1077
 
1221
- .tds-input.tds-textarea--resize-none textarea{
1222
- resize:none;
1223
- }
1078
+ --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
1079
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
1224
1080
 
1225
- .tds-input.tds-textarea--resize-auto textarea{
1226
- resize:vertical;
1227
- }
1081
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1082
+ --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
1083
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1228
1084
 
1229
- @supports (field-sizing: content){
1230
- .tds-input.tds-textarea--resize-auto textarea{
1231
- field-sizing:content;
1232
- resize:none;
1233
- }
1234
- }
1085
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1086
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1087
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1088
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1089
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1090
+ }
1235
1091
 
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
- }
1092
+ .tds-page-header--profile{
1093
+ --tds-page-header-padding-y:20px;
1094
+ }
1252
1095
 
1253
- @media (pointer: fine){
1254
- :is(.tds-input textarea)::-webkit-scrollbar{
1255
- width:12px;
1256
- height:12px;
1257
- cursor:default;
1096
+ @supports (color: light-dark(#fff, #000)){
1097
+ .tds-page-header{
1098
+ --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
1099
+ --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
1258
1100
  }
1101
+ }
1259
1102
 
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);
1103
+ @media (min-width: 600px){
1104
+ .tds-page-header{
1105
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1106
+ --tds-page-header-color:var(--t-text-color-secondary);
1107
+ --tds-page-header-bottom-border-color:var(--t-border-color);
1108
+ --tds-page-header-padding-x:var(--t-spacing-3);
1109
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1110
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1111
+ --tds-page-header-nav-background:transparent;
1112
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1113
+ --tds-page-header-nav-item-border-width:1px;
1114
+ --tds-page-header-nav-item-color:var(--t-text-color);
1115
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1116
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
1117
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
1118
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1119
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1266
1120
  }
1121
+ }
1122
+ }
1267
1123
 
1268
- :is(.tds-input textarea):is(:hover,:focus-within,:focus-visible){
1269
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-hover);
1270
- }
1124
+ .tds-page-header{
1125
+ display:flex;
1126
+ flex-direction:column;
1127
+ padding-top:var(--tds-page-header-padding-y);
1128
+ color:var(--tds-page-header-color);
1129
+ background:var(--tds-page-header-background-color);
1130
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
1131
+ }
1271
1132
 
1272
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:hover{
1273
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-hover);
1274
- }
1133
+ .tds-page-header:not(.has-nav){
1134
+ padding-bottom:var(--tds-page-header-padding-y);
1135
+ }
1275
1136
 
1276
- :is(.tds-input textarea)::-webkit-scrollbar-thumb:active{
1277
- --tds-input-scrollbar-thumb-color:var(--tds-input-scrollbar-thumb-color-thumb-active);
1278
- }
1137
+ .tds-page-header.inactive{
1138
+ background:var(--tds-page-header-background-color-inactive);
1139
+ }
1279
1140
 
1280
- :is(.tds-input textarea)::-webkit-scrollbar-corner{
1281
- background:var(--tds-input-scrollbar-surface-color);
1282
- }
1141
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1142
+ width:100%;
1143
+ }
1283
1144
 
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);
1288
- }
1145
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1146
+ display:flex;
1147
+ flex-flow:row wrap;
1148
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1149
+ align-items:flex-start;
1150
+ justify-content:flex-start;
1151
+ min-width:0;
1152
+ }
1289
1153
 
1290
- :is(.tds-input textarea)::-webkit-scrollbar-track{
1291
- margin-block:var(--tds-input-scrollbar-track-margin-block);
1292
- cursor:default;
1154
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1155
+ display:flex;
1156
+ gap:var(--tds-page-header-nav-gap);
1157
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1158
+ margin:0 0 -1px;
1159
+ overflow:auto;
1160
+ list-style:none;
1161
+ background:var(--tds-page-header-nav-background);
1293
1162
  }
1294
1163
 
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;
1299
- }
1300
-
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);
1164
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1165
+ position:relative;
1166
+ display:inline-flex;
1167
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1168
+ font-size:var(--t-font-size-sm);
1169
+ line-height:22px;
1170
+ color:var(--tds-page-header-nav-item-color);
1171
+ white-space:nowrap;
1172
+ text-decoration:none;
1173
+ -webkit-appearance:none;
1174
+ -moz-appearance:none;
1175
+ appearance:none;
1176
+ cursor:pointer;
1177
+ outline-offset:-2px;
1178
+ background-color:var(--tds-page-header-nav-item-background-color);
1179
+ background-clip:padding-box;
1180
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1181
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1182
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1183
+ }
1184
+
1185
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1186
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1187
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1188
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1189
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1190
+ }
1191
+
1192
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1193
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1194
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1195
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1196
+ }
1197
+
1198
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1199
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1200
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1201
+ }
1202
+
1203
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1204
+ color:var(--tds-page-header-nav-item-color-disabled);
1205
+ cursor:not-allowed;
1206
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1207
+ opacity:1;
1208
+ }
1209
+
1210
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1211
+ position:relative;
1212
+ }
1213
+
1214
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1215
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1216
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1217
+ }
1218
+
1219
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1220
+ position:absolute;
1221
+ top:-5px;
1222
+ right:-2px;
1223
+ width:10px;
1224
+ height:10px;
1225
+ content:"";
1226
+ background:var(--tds-page-header-nav-item-indicator-color);
1227
+ border-radius:50%;
1228
+ }
1229
+
1230
+ @media (prefers-reduced-motion: no-preference){
1231
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1232
+ animation:indicator-pulse 1.25s ease infinite;
1304
1233
  }
1305
1234
  }
1235
+
1236
+ .tds-page-header__title-bar{
1237
+ display:flex;
1238
+ flex-direction:column;
1239
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1240
+ align-items:flex-start;
1241
+ justify-content:space-between;
1242
+ padding:0 var(--tds-page-header-padding-x);
1243
+ }
1244
+
1245
+ .tds-page-header--profile > .tds-page-header__title-bar{
1246
+ align-items:center;
1247
+ }
1248
+
1249
+ .tds-page-header__primary{
1250
+ width:100%;
1251
+ }
1252
+
1253
+ .tds-page-header__primary h1{
1254
+ margin:0;
1255
+ font-size:var(--tds-page-header-headline-font-size);
1256
+ font-weight:var(--t-font-weight-normal);
1257
+ line-height:32px;
1258
+ color:var(--tds-page-header-headline-color);
1259
+ overflow-wrap:break-word;
1260
+ }
1261
+
1262
+ @media (min-width: 960px){
1263
+ .tds-page-header__primary{
1264
+ flex:1 1 max-content;
1265
+ width:auto;
1266
+ min-width:0;
1267
+ max-width:100%;
1268
+ }
1269
+
1270
+ .tds-page-header__title-bar,
1271
+ .tds-page-header--profile .tds-page-header__title-bar{
1272
+ flex-flow:row nowrap;
1273
+ row-gap:12px;
1274
+ align-items:flex-start;
1275
+ }
1276
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1277
+ width:auto;
1278
+ }
1279
+
1280
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1281
+ justify-content:flex-end;
1306
1282
  }
1283
+ }
1284
+
1285
+ .tds-page-header-phone,
1286
+ .tds-page-header-email{
1287
+ color:var(--tds-page-header-color);
1288
+ white-space:nowrap;
1289
+ }
1290
+
1291
+ .tds-page-header-email{
1292
+ max-width:100%;
1293
+ overflow:hidden;
1294
+ text-overflow:ellipsis;
1295
+ }
1296
+
1297
+ @keyframes indicator-pulse{
1298
+ 0%{
1299
+ opacity:.3;
1300
+ transform:scale(.9);
1307
1301
  }
1308
1302
 
1303
+ 100%{
1304
+ opacity:0;
1305
+ transform:scale(1.75);
1306
+ }
1307
+ }
1308
+
1309
1309
  .tds-select{
1310
1310
  --tds-select-border-color:var(--t-form-border-color);
1311
1311
  --tds-select-border-color-hover:var(--t-form-border-color-hover);
@@ -3255,431 +3255,71 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3255
3255
  --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
3256
3256
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
3257
3257
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
3258
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 15%);
3259
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
3260
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
3261
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
3262
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 15%);
3263
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
3264
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
3265
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
3266
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
3267
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
3268
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
3269
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 15%);
3270
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
3271
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
3272
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
3273
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 15%);
3274
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
3275
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
3276
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
3277
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
3278
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
3279
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
3280
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
3281
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
3282
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
3283
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
3284
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
3285
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
3286
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
3287
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
3288
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
3289
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
3290
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
3291
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
3292
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
3293
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
3294
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
3295
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
3296
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
3297
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
3298
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
3299
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
3300
- --t-surface-color-card:hsl(0, 0%, 12%);
3301
- --t-surface-color-canvas:hsl(0, 0%, 10%);
3302
- --t-border-color:hsl(0, 0%, 21%);
3303
- --t-border-color-dark:hsl(0, 0%, 25%);
3304
- --t-border-color-darker:hsl(0, 0%, 33%);
3305
- --t-border-color-darkest:hsl(0, 0%, 38%);
3306
- --t-border-color-disabled:hsl(0, 0%, 21%);
3307
- --t-border-color-dim:hsl(0, 0%, 16%);
3308
- --t-border-color-white:hsl(0, 0%, 12%);
3309
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
3310
- --t-border-color-status-info:hsl(204, 100%, 35%);
3311
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
3312
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
3313
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
3314
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
3315
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
3316
- --t-border-color-control-info:hsl(204, 100%, 35%);
3317
- --t-border-color-control-disabled:hsl(0, 0%, 24%);
3318
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3319
- }
3320
- }
3321
-
3322
- @media (prefers-color-scheme: dark){
3323
- }
3324
-
3325
- .tds-combo-box{
3326
- --tds-combo-box-border-color:var(--t-form-border-color);
3327
- --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3328
- --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3329
- --tds-combo-box-background-color:var(--t-form-background-color);
3330
- --tds-combo-box-color:var(--t-form-color);
3331
- --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3332
- --tds-combo-box-font-size:var(--t-font-size-md);
3333
- --tds-combo-box-min-height:var(--t-container-size-md);
3334
- --tds-combo-box-padding-block:6px;
3335
- --tds-combo-box-button-offset:4px;
3336
- --tds-combo-box-description-color:var(--t-text-color-secondary);
3337
- --tds-combo-box-description-invalid-icon-display:none;
3338
-
3339
- position:relative;
3340
- display:flex;
3341
- flex-direction:column;
3342
- gap:var(--t-spacing-half);
3343
- }
3344
-
3345
- .tds-combo-box[data-required] .tds-combo-box-label::after{
3346
- margin-left:.25ch;
3347
- color:var(--t-text-color-status-error);
3348
- content:"*";
3349
- }
3350
-
3351
- .tds-combo-box[data-invalid]{
3352
- --tds-combo-box-border-color:var(--t-form-border-color-error);
3353
- --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3354
- --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3355
- --tds-combo-box-background-color:var(--t-form-background-color-error);
3356
- --tds-combo-box-description-color:var(--t-text-color-status-error);
3357
- --tds-combo-box-description-invalid-icon-display:inline-block;
3358
- }
3359
-
3360
- .tds-combo-box[data-disabled]{
3361
- --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3362
- --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3363
- --tds-combo-box-color:var(--t-form-color-disabled);
3364
- }
3365
-
3366
- .tds-combo-box[data-disabled] .tds-combo-box-label{
3367
- color:var(--t-form-color-disabled);
3368
- }
3369
-
3370
- .tds-combo-box[data-disabled] .tds-combo-box-field{
3371
- cursor:not-allowed;
3372
- }
3373
-
3374
- .tds-combo-box[data-open] .tds-combo-box-button > svg{
3375
- transform:rotate(.5turn);
3376
- }
3377
-
3378
- .tds-combo-box--lg{
3379
- --tds-combo-box-min-height:var(--t-container-size-lg);
3380
- --tds-combo-box-font-size:var(--t-font-size-lg);
3381
- --tds-combo-box-button-offset:5px;
3382
- }
3383
-
3384
- .tds-combo-box-label{
3385
- font-size:var(--t-font-size-md);
3386
- font-weight:var(--t-font-weight-normal);
3387
- color:var(--t-text-color);
3388
- cursor:default;
3389
- }
3390
-
3391
- .tds-combo-box-field{
3392
- display:flex;
3393
- align-items:center;
3394
- inline-size:100%;
3395
- min-block-size:var(--tds-combo-box-min-height);
3396
- font-family:inherit;
3397
- font-size:var(--tds-combo-box-font-size);
3398
- line-height:1;
3399
- color:var(--tds-combo-box-color);
3400
- -webkit-appearance:none;
3401
- -moz-appearance:none;
3402
- appearance:none;
3403
- cursor:default;
3404
- outline:var(--t-focus-ring-width) solid transparent;
3405
- outline-offset:0;
3406
- background-color:var(--tds-combo-box-background-color);
3407
- border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3408
- border-radius:var(--t-form-border-radius);
3409
- }
3410
-
3411
- .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3412
- border-color:var(--tds-combo-box-border-color-hover);
3413
- }
3414
-
3415
- .tds-combo-box-field[data-focus-within]{
3416
- outline-color:var(--t-focus-ring-color);
3417
- outline-offset:var(--t-focus-ring-offset);
3418
- border-color:var(--tds-combo-box-border-color-active);
3419
- }
3420
-
3421
- .tds-combo-box-field:has([readonly]){
3422
- --tds-input-border-color:var(--t-form-border-color-readonly);
3423
- --tds-combo-box-background-color:var(--t-form-background-color-readonly);
3424
- }
3425
-
3426
- .tds-combo-box-field[data-focus-within]:has([readonly]){
3427
- border-color:var(--t-form-border-color-hover);
3428
- }
3429
-
3430
- .tds-combo-box-input{
3431
- display:flex;
3432
- flex:1;
3433
- align-items:center;
3434
- padding-block:var(--tds-combo-box-padding-block);
3435
- padding-inline-start:var(--t-spacing-1);
3436
- font-family:inherit;
3437
- font-size:inherit;
3438
- color:inherit;
3439
- outline:0;
3440
- background:transparent;
3441
- border:0;
3442
- }
3443
-
3444
- .tds-combo-box-input::-moz-placeholder{
3445
- color:var(--tds-combo-box-placeholder-color);
3446
- -moz-user-select:none;
3447
- user-select:none;
3448
- }
3449
-
3450
- .tds-combo-box-input::placeholder{
3451
- color:var(--tds-combo-box-placeholder-color);
3452
- -webkit-user-select:none;
3453
- -moz-user-select:none;
3454
- user-select:none;
3455
- }
3456
-
3457
- .tds-combo-box-button{
3458
- flex-shrink:0;
3459
- align-self:center;
3460
- inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3461
- block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3462
- padding:0;
3463
- margin-inline-end:var(--tds-combo-box-button-offset);
3464
- }
3465
-
3466
- .tds-combo-box-button > svg{
3467
- inline-size:var(--tds-combo-box-font-size);
3468
- block-size:var(--tds-combo-box-font-size);
3469
- transition:transform var(--t-duration-300) var(--t-ease-in-out);
3470
- }
3471
-
3472
- .tds-combo-box-button:not(.tds-btn){
3473
- display:inline-flex;
3474
- align-items:center;
3475
- justify-content:center;
3476
- inline-size:auto;
3477
- block-size:auto;
3478
- margin-inline-end:.75em;
3479
- color:var(--t-icon-color);
3480
- cursor:default;
3481
- background:transparent;
3482
- border:0;
3483
- }
3484
-
3485
- .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3486
- outline:0;
3487
- }
3488
-
3489
- .tds-combo-box-popover{
3490
- width:var(--trigger-width);
3491
- max-block-size:inherit;
3492
- padding:var(--t-spacing-1);
3493
- overflow:auto;
3494
- outline:0;
3495
- scrollbar-color:#0004 #0000;
3496
- scrollbar-width:thin;
3497
- background:var(--t-surface-color-card);
3498
- background-clip:padding-box;
3499
- border:1px solid var(--t-border-color);
3500
- border-radius:var(--t-border-radius);
3501
- box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3502
- }
3503
-
3504
- .tds-combo-box-popover[data-entering]{
3505
- animation:tds-combo-box-popover-enter 160ms ease;
3506
- }
3507
-
3508
- .tds-combo-box-popover[data-exiting]{
3509
- animation:tds-combo-box-popover-exit 130ms ease;
3510
- }
3511
-
3512
- @keyframes tds-combo-box-popover-enter{
3513
- from{
3514
- opacity:0;
3515
- transform:translateY(-8px);
3516
- }
3517
- }
3518
-
3519
- @keyframes tds-combo-box-popover-exit{
3520
- to{
3521
- opacity:0;
3522
- transform:translateY(-8px);
3523
- }
3524
- }
3525
-
3526
- @media (prefers-reduced-motion: reduce){
3527
- .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
3528
- animation:none;
3529
- }
3530
-
3531
- .tds-combo-box-button > svg{
3532
- transition:none;
3533
- }
3534
- }
3535
-
3536
- .tds-combo-box-list{
3537
- padding:0;
3538
- margin:0;
3539
- }
3540
-
3541
- .tds-combo-box-list-item{
3542
- display:block;
3543
- padding-block:var(--t-spacing-1);
3544
- padding-inline:var(--t-spacing-2) var(--t-spacing-1);
3545
- overflow:hidden;
3546
- text-overflow:ellipsis;
3547
- font-size:1rem;
3548
- color:var(--t-text-color);
3549
- white-space:nowrap;
3550
- cursor:default;
3551
- outline-offset:-1px;
3552
- border-radius:var(--t-border-radius);
3553
- }
3554
-
3555
- .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
3556
- background:var(--t-fill-color-neutral-070);
3557
- }
3558
-
3559
- .tds-combo-box-list-item[data-selected]{
3560
- background:var(--t-fill-color-button-interaction-ghost-active);
3561
- }
3562
-
3563
- .tds-combo-box-list-item[data-focus-visible]{
3564
- outline:var(--t-focus-ring-outline);
3565
- outline-offset:-1px;
3566
- }
3567
-
3568
- .tds-combo-box-list-item[data-disabled]{
3569
- color:var(--t-form-color-disabled);
3570
- cursor:not-allowed;
3571
- }
3572
-
3573
- .tds-combo-box-list-item[data-disabled][data-hovered]{
3574
- background:transparent;
3575
- }
3576
-
3577
- .tds-combo-box-list-section:not(:first-child){
3578
- margin-block-start:var(--t-spacing-half);
3579
- }
3580
-
3581
- .tds-combo-box-section-header{
3582
- padding-block:var(--t-spacing-1);
3583
- padding-inline:var(--t-spacing-1);
3584
- font-size:var(--t-font-size-sm);
3585
- font-weight:var(--t-font-weight-semibold);
3586
- color:var(--t-text-color-secondary);
3587
- }
3588
-
3589
- .tds-combo-box-description{
3590
- display:flex;
3591
- gap:var(--t-spacing-half);
3592
- align-items:flex-start;
3593
- margin:0;
3594
- font-size:var(--t-font-size-sm);
3595
- line-height:1.35;
3596
- color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
3597
- cursor:text;
3598
- }
3599
-
3600
- .tds-combo-box-description-invalid-icon{
3601
- display:var(--tds-combo-box-description-invalid-icon-display, none);
3602
- flex-shrink:0;
3603
- margin-block-start:calc(.5lh - .5em);
3604
- line-height:1.35;
3605
- }
3606
-
3607
- .tds-checkbox-group{
3608
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3609
- --tds-checkbox-group-line-height:1.4;
3610
- --tds-checkbox-group-gap:var(--t-spacing-1);
3611
-
3612
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3613
-
3614
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3615
- --tds-checkbox-group-description-line-height:1.35;
3616
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3617
- --tds-checkbox-group-description-invalid-icon-display:none;
3618
- display:flex;
3619
- flex-direction:column;
3620
- gap:var(--tds-checkbox-group-gap);
3621
- padding:0;
3622
- margin:0;
3623
-
3624
- font-size:var(--tds-checkbox-group-font-size);
3625
- line-height:var(--tds-checkbox-group-line-height);
3626
- border:0;
3627
- }
3628
-
3629
- .tds-checkbox-group legend{
3630
- padding:0;
3631
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3632
- }
3633
-
3634
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3635
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3636
- }
3637
-
3638
- .tds-checkbox-group[aria-invalid="true"]{
3639
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3640
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3641
- }
3642
-
3643
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3644
- margin-left:.25ch;
3645
- color:var(--t-text-color-status-error);
3646
- content:"*";
3647
- }
3648
-
3649
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3650
- content:none;
3651
- }
3652
-
3653
- .tds-checkbox-group-fields{
3654
- display:flex;
3655
- flex-direction:column;
3656
- gap:var(--tds-checkbox-group-gap);
3657
- align-items:flex-start;
3258
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 15%);
3259
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
3260
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
3261
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
3262
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 15%);
3263
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
3264
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
3265
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
3266
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
3267
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
3268
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
3269
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 15%);
3270
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
3271
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
3272
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
3273
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 15%);
3274
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
3275
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
3276
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
3277
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
3278
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
3279
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
3280
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
3281
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
3282
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
3283
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
3284
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
3285
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
3286
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
3287
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
3288
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
3289
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
3290
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
3291
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
3292
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
3293
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
3294
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
3295
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
3296
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
3297
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
3298
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
3299
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
3300
+ --t-surface-color-card:hsl(0, 0%, 12%);
3301
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
3302
+ --t-border-color:hsl(0, 0%, 21%);
3303
+ --t-border-color-dark:hsl(0, 0%, 25%);
3304
+ --t-border-color-darker:hsl(0, 0%, 33%);
3305
+ --t-border-color-darkest:hsl(0, 0%, 38%);
3306
+ --t-border-color-disabled:hsl(0, 0%, 21%);
3307
+ --t-border-color-dim:hsl(0, 0%, 16%);
3308
+ --t-border-color-white:hsl(0, 0%, 12%);
3309
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
3310
+ --t-border-color-status-info:hsl(204, 100%, 35%);
3311
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
3312
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
3313
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
3314
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
3315
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
3316
+ --t-border-color-control-info:hsl(204, 100%, 35%);
3317
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
3318
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
3658
3319
  }
3659
-
3660
- .tds-checkbox-group-description{
3661
- display:flex;
3662
- gap:var(--t-spacing-half);
3663
- align-items:flex-start;
3664
- margin:0;
3665
- font-size:var(--tds-checkbox-group-description-font-size);
3666
- line-height:var(--tds-checkbox-group-description-line-height);
3667
- color:var(--tds-checkbox-group-description-color);
3668
- cursor:text;
3669
3320
  }
3670
3321
 
3671
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3672
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3673
- flex-shrink:0;
3674
- margin-top:calc(.5lh - .5em);
3675
- line-height:var(--tds-checkbox-group-description-line-height);
3676
- }
3677
-
3678
- .tds-checkbox-group--sm{
3679
- --tds-checkbox-group-line-height:1.35;
3680
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3681
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3682
- --tds-checkbox-group-description-line-height:1.3;
3322
+ @media (prefers-color-scheme: dark){
3683
3323
  }
3684
3324
 
3685
3325
  .tds-date-picker{
@@ -4003,243 +3643,450 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4003
3643
  clip-path:inset(50%);
4004
3644
  }
4005
3645
 
4006
- .tds-date-picker-calendar-nav{
3646
+ .tds-date-picker-calendar-nav{
3647
+ display:flex;
3648
+ align-items:center;
3649
+ justify-content:center;
3650
+ padding:var(--t-spacing-half);
3651
+ color:var(--t-text-color);
3652
+ cursor:default;
3653
+ outline:0;
3654
+ background:transparent;
3655
+ border:0;
3656
+ border-radius:var(--t-border-radius-sm);
3657
+ }
3658
+
3659
+ .tds-date-picker-calendar-nav[data-hovered]{
3660
+ background:var(--t-fill-color-neutral-070);
3661
+ }
3662
+
3663
+ .tds-date-picker-calendar-nav[data-pressed]{
3664
+ background:var(--t-fill-color-button-interaction-ghost-active);
3665
+ }
3666
+
3667
+ .tds-date-picker-calendar-nav[data-focus-visible]{
3668
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3669
+ outline-offset:var(--t-focus-ring-offset);
3670
+ }
3671
+
3672
+ .tds-date-picker-calendar-nav[data-disabled]{
3673
+ color:var(--t-form-color-disabled);
3674
+ cursor:not-allowed;
3675
+ }
3676
+
3677
+ .tds-date-picker-calendar-grid{
3678
+ border-collapse:collapse;
3679
+ }
3680
+
3681
+ .tds-date-picker-calendar-header-cell{
3682
+ padding-block:var(--t-spacing-half);
3683
+ font-size:var(--t-font-size-sm);
3684
+ font-weight:var(--t-font-weight-normal);
3685
+ color:var(--t-text-color-secondary);
3686
+ text-align:center;
3687
+ }
3688
+
3689
+ .tds-date-picker-calendar-cell{
3690
+ display:flex;
3691
+ align-items:center;
3692
+ justify-content:center;
3693
+ inline-size:2.25rem;
3694
+ block-size:2.25rem;
3695
+ font-size:var(--t-font-size-md);
3696
+ color:var(--t-text-color);
3697
+ cursor:default;
3698
+ outline:0;
3699
+ border-radius:var(--t-border-radius-sm);
3700
+ }
3701
+
3702
+ .tds-date-picker-calendar-cell[data-hovered]{
3703
+ background:var(--t-fill-color-neutral-070);
3704
+ }
3705
+
3706
+ .tds-date-picker-calendar-cell[data-pressed]{
3707
+ background:var(--t-fill-color-button-interaction-ghost-active);
3708
+ }
3709
+
3710
+ .tds-date-picker-calendar-cell[data-selected]{
3711
+ color:var(--t-text-color-inverted);
3712
+ background:var(--t-fill-color-interaction);
3713
+ }
3714
+
3715
+ .tds-date-picker-calendar-cell[data-focus-visible]{
3716
+ outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
3717
+ outline-offset:var(--t-focus-ring-offset);
3718
+ }
3719
+
3720
+ .tds-date-picker-calendar-cell[data-unavailable]{
3721
+ color:var(--t-text-color-secondary);
3722
+ text-decoration:line-through;
3723
+ cursor:not-allowed;
3724
+ }
3725
+
3726
+ .tds-date-picker-calendar-cell[data-disabled]{
3727
+ color:var(--t-form-color-disabled);
3728
+ cursor:not-allowed;
3729
+ }
3730
+
3731
+ .tds-date-picker-calendar-cell[data-outside-month]{
3732
+ color:var(--t-text-color-secondary);
3733
+ }
3734
+
3735
+ .tds-checkbox-group{
3736
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3737
+ --tds-checkbox-group-line-height:1.4;
3738
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3739
+
3740
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3741
+
3742
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3743
+ --tds-checkbox-group-description-line-height:1.35;
3744
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3745
+ --tds-checkbox-group-description-invalid-icon-display:none;
3746
+ display:flex;
3747
+ flex-direction:column;
3748
+ gap:var(--tds-checkbox-group-gap);
3749
+ padding:0;
3750
+ margin:0;
3751
+
3752
+ font-size:var(--tds-checkbox-group-font-size);
3753
+ line-height:var(--tds-checkbox-group-line-height);
3754
+ border:0;
3755
+ }
3756
+
3757
+ .tds-checkbox-group legend{
3758
+ padding:0;
3759
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3760
+ }
3761
+
3762
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3763
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3764
+ }
3765
+
3766
+ .tds-checkbox-group[aria-invalid="true"]{
3767
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3768
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3769
+ }
3770
+
3771
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3772
+ margin-left:.25ch;
3773
+ color:var(--t-text-color-status-error);
3774
+ content:"*";
3775
+ }
3776
+
3777
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3778
+ content:none;
3779
+ }
3780
+
3781
+ .tds-checkbox-group-fields{
3782
+ display:flex;
3783
+ flex-direction:column;
3784
+ gap:var(--tds-checkbox-group-gap);
3785
+ align-items:flex-start;
3786
+ }
3787
+
3788
+ .tds-checkbox-group-description{
3789
+ display:flex;
3790
+ gap:var(--t-spacing-half);
3791
+ align-items:flex-start;
3792
+ margin:0;
3793
+ font-size:var(--tds-checkbox-group-description-font-size);
3794
+ line-height:var(--tds-checkbox-group-description-line-height);
3795
+ color:var(--tds-checkbox-group-description-color);
3796
+ cursor:text;
3797
+ }
3798
+
3799
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3800
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3801
+ flex-shrink:0;
3802
+ margin-top:calc(.5lh - .5em);
3803
+ line-height:var(--tds-checkbox-group-description-line-height);
3804
+ }
3805
+
3806
+ .tds-checkbox-group--sm{
3807
+ --tds-checkbox-group-line-height:1.35;
3808
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3809
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3810
+ --tds-checkbox-group-description-line-height:1.3;
3811
+ }
3812
+
3813
+ .tds-combo-box{
3814
+ --tds-combo-box-border-color:var(--t-form-border-color);
3815
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
3816
+ --tds-combo-box-border-color-active:var(--t-form-border-color-focus);
3817
+ --tds-combo-box-background-color:var(--t-form-background-color);
3818
+ --tds-combo-box-color:var(--t-form-color);
3819
+ --tds-combo-box-placeholder-color:var(--t-form-placeholder-color);
3820
+ --tds-combo-box-font-size:var(--t-font-size-md);
3821
+ --tds-combo-box-min-height:var(--t-container-size-md);
3822
+ --tds-combo-box-padding-block:6px;
3823
+ --tds-combo-box-button-offset:4px;
3824
+ --tds-combo-box-description-color:var(--t-text-color-secondary);
3825
+ --tds-combo-box-description-invalid-icon-display:none;
3826
+
3827
+ position:relative;
4007
3828
  display:flex;
4008
- align-items:center;
4009
- justify-content:center;
4010
- padding:var(--t-spacing-half);
4011
- color:var(--t-text-color);
4012
- cursor:default;
4013
- outline:0;
4014
- background:transparent;
4015
- border:0;
4016
- border-radius:var(--t-border-radius-sm);
3829
+ flex-direction:column;
3830
+ gap:var(--t-spacing-half);
4017
3831
  }
4018
3832
 
4019
- .tds-date-picker-calendar-nav[data-hovered]{
4020
- background:var(--t-fill-color-neutral-070);
3833
+ .tds-combo-box[data-required] .tds-combo-box-label::after{
3834
+ margin-left:.25ch;
3835
+ color:var(--t-text-color-status-error);
3836
+ content:"*";
4021
3837
  }
4022
3838
 
4023
- .tds-date-picker-calendar-nav[data-pressed]{
4024
- background:var(--t-fill-color-button-interaction-ghost-active);
3839
+ .tds-combo-box[data-invalid]{
3840
+ --tds-combo-box-border-color:var(--t-form-border-color-error);
3841
+ --tds-combo-box-border-color-hover:var(--t-form-border-color-error-hover);
3842
+ --tds-combo-box-border-color-active:var(--t-form-border-color-error-hover);
3843
+ --tds-combo-box-background-color:var(--t-form-background-color-error);
3844
+ --tds-combo-box-description-color:var(--t-text-color-status-error);
3845
+ --tds-combo-box-description-invalid-icon-display:inline-block;
4025
3846
  }
4026
3847
 
4027
- .tds-date-picker-calendar-nav[data-focus-visible]{
4028
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4029
- outline-offset:var(--t-focus-ring-offset);
3848
+ .tds-combo-box[data-disabled]{
3849
+ --tds-combo-box-border-color:var(--t-form-border-color-disabled);
3850
+ --tds-combo-box-background-color:var(--t-form-background-color-disabled);
3851
+ --tds-combo-box-color:var(--t-form-color-disabled);
4030
3852
  }
4031
3853
 
4032
- .tds-date-picker-calendar-nav[data-disabled]{
4033
- color:var(--t-form-color-disabled);
4034
- cursor:not-allowed;
3854
+ .tds-combo-box[data-disabled] .tds-combo-box-label{
3855
+ color:var(--t-form-color-disabled);
3856
+ }
3857
+
3858
+ .tds-combo-box[data-disabled] .tds-combo-box-field{
3859
+ cursor:not-allowed;
3860
+ }
3861
+
3862
+ .tds-combo-box[data-open] .tds-combo-box-button > svg{
3863
+ transform:rotate(.5turn);
4035
3864
  }
4036
3865
 
4037
- .tds-date-picker-calendar-grid{
4038
- border-collapse:collapse;
3866
+ .tds-combo-box--lg{
3867
+ --tds-combo-box-min-height:var(--t-container-size-lg);
3868
+ --tds-combo-box-font-size:var(--t-font-size-lg);
3869
+ --tds-combo-box-button-offset:5px;
4039
3870
  }
4040
3871
 
4041
- .tds-date-picker-calendar-header-cell{
4042
- padding-block:var(--t-spacing-half);
4043
- font-size:var(--t-font-size-sm);
3872
+ .tds-combo-box-label{
3873
+ font-size:var(--t-font-size-md);
4044
3874
  font-weight:var(--t-font-weight-normal);
4045
- color:var(--t-text-color-secondary);
4046
- text-align:center;
3875
+ color:var(--t-text-color);
3876
+ cursor:default;
4047
3877
  }
4048
3878
 
4049
- .tds-date-picker-calendar-cell{
3879
+ .tds-combo-box-field{
4050
3880
  display:flex;
4051
3881
  align-items:center;
4052
- justify-content:center;
4053
- inline-size:2.25rem;
4054
- block-size:2.25rem;
4055
- font-size:var(--t-font-size-md);
4056
- color:var(--t-text-color);
3882
+ inline-size:100%;
3883
+ min-block-size:var(--tds-combo-box-min-height);
3884
+ font-family:inherit;
3885
+ font-size:var(--tds-combo-box-font-size);
3886
+ line-height:1;
3887
+ color:var(--tds-combo-box-color);
3888
+ -webkit-appearance:none;
3889
+ -moz-appearance:none;
3890
+ appearance:none;
4057
3891
  cursor:default;
4058
- outline:0;
4059
- border-radius:var(--t-border-radius-sm);
3892
+ outline:var(--t-focus-ring-width) solid transparent;
3893
+ outline-offset:0;
3894
+ background-color:var(--tds-combo-box-background-color);
3895
+ border:var(--t-form-border-width) solid var(--tds-combo-box-border-color);
3896
+ border-radius:var(--t-form-border-radius);
4060
3897
  }
4061
3898
 
4062
- .tds-date-picker-calendar-cell[data-hovered]{
4063
- background:var(--t-fill-color-neutral-070);
3899
+ .tds-combo-box-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
3900
+ border-color:var(--tds-combo-box-border-color-hover);
4064
3901
  }
4065
3902
 
4066
- .tds-date-picker-calendar-cell[data-pressed]{
4067
- background:var(--t-fill-color-button-interaction-ghost-active);
3903
+ .tds-combo-box-field[data-focus-within]{
3904
+ outline-color:var(--t-focus-ring-color);
3905
+ outline-offset:var(--t-focus-ring-offset);
3906
+ border-color:var(--tds-combo-box-border-color-active);
4068
3907
  }
4069
3908
 
4070
- .tds-date-picker-calendar-cell[data-selected]{
4071
- color:var(--t-text-color-inverted);
4072
- background:var(--t-fill-color-interaction);
3909
+ .tds-combo-box-field:has([readonly]){
3910
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3911
+ --tds-combo-box-background-color:var(--t-form-background-color-readonly);
4073
3912
  }
4074
3913
 
4075
- .tds-date-picker-calendar-cell[data-focus-visible]{
4076
- outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
4077
- outline-offset:var(--t-focus-ring-offset);
3914
+ .tds-combo-box-field[data-focus-within]:has([readonly]){
3915
+ border-color:var(--t-form-border-color-hover);
3916
+ }
3917
+
3918
+ .tds-combo-box-input{
3919
+ display:flex;
3920
+ flex:1;
3921
+ align-items:center;
3922
+ padding-block:var(--tds-combo-box-padding-block);
3923
+ padding-inline-start:var(--t-spacing-1);
3924
+ font-family:inherit;
3925
+ font-size:inherit;
3926
+ color:inherit;
3927
+ outline:0;
3928
+ background:transparent;
3929
+ border:0;
3930
+ }
3931
+
3932
+ .tds-combo-box-input::-moz-placeholder{
3933
+ color:var(--tds-combo-box-placeholder-color);
3934
+ -moz-user-select:none;
3935
+ user-select:none;
4078
3936
  }
4079
3937
 
4080
- .tds-date-picker-calendar-cell[data-unavailable]{
4081
- color:var(--t-text-color-secondary);
4082
- text-decoration:line-through;
4083
- cursor:not-allowed;
3938
+ .tds-combo-box-input::placeholder{
3939
+ color:var(--tds-combo-box-placeholder-color);
3940
+ -webkit-user-select:none;
3941
+ -moz-user-select:none;
3942
+ user-select:none;
4084
3943
  }
4085
3944
 
4086
- .tds-date-picker-calendar-cell[data-disabled]{
4087
- color:var(--t-form-color-disabled);
4088
- cursor:not-allowed;
3945
+ .tds-combo-box-button{
3946
+ flex-shrink:0;
3947
+ align-self:center;
3948
+ inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3949
+ block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
3950
+ padding:0;
3951
+ margin-inline-end:var(--tds-combo-box-button-offset);
3952
+ }
3953
+
3954
+ .tds-combo-box-button > svg{
3955
+ inline-size:var(--tds-combo-box-font-size);
3956
+ block-size:var(--tds-combo-box-font-size);
3957
+ transition:transform var(--t-duration-300) var(--t-ease-in-out);
4089
3958
  }
4090
3959
 
4091
- .tds-date-picker-calendar-cell[data-outside-month]{
4092
- color:var(--t-text-color-secondary);
3960
+ .tds-combo-box-button:not(.tds-btn){
3961
+ display:inline-flex;
3962
+ align-items:center;
3963
+ justify-content:center;
3964
+ inline-size:auto;
3965
+ block-size:auto;
3966
+ margin-inline-end:.75em;
3967
+ color:var(--t-icon-color);
3968
+ cursor:default;
3969
+ background:transparent;
3970
+ border:0;
4093
3971
  }
4094
3972
 
4095
- .tds-number-stepper{
4096
- --tds-number-stepper-border-color:var(--t-form-border-color);
4097
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4098
- --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4099
- --tds-number-stepper-background-color:var(--t-form-background-color);
4100
- --tds-number-stepper-color:var(--t-form-color);
4101
- --tds-number-stepper-font-size:var(--t-font-size-md);
4102
- --tds-number-stepper-min-height:var(--t-container-size-md);
4103
- --tds-number-stepper-padding-block:6px;
4104
- --tds-number-stepper-button-offset:4px;
4105
- --tds-number-stepper-button-gap:2px;
4106
- --tds-number-stepper-description-color:var(--t-text-color-secondary);
4107
- --tds-number-stepper-description-invalid-icon-display:none;
3973
+ .tds-combo-box-button[data-focus-visible]:not(.tds-btn){
3974
+ outline:0;
3975
+ }
4108
3976
 
4109
- position:relative;
4110
- display:flex;
4111
- flex-direction:column;
4112
- gap:var(--t-spacing-half);
3977
+ .tds-combo-box-popover{
3978
+ width:var(--trigger-width);
3979
+ max-block-size:inherit;
3980
+ padding:var(--t-spacing-1);
3981
+ overflow:auto;
3982
+ outline:0;
3983
+ scrollbar-color:#0004 #0000;
3984
+ scrollbar-width:thin;
3985
+ background:var(--t-surface-color-card);
3986
+ background-clip:padding-box;
3987
+ border:1px solid var(--t-border-color);
3988
+ border-radius:var(--t-border-radius);
3989
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
4113
3990
  }
4114
3991
 
4115
- .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4116
- margin-left:.25ch;
4117
- color:var(--t-text-color-status-error);
4118
- content:"*";
3992
+ .tds-combo-box-popover[data-entering]{
3993
+ animation:tds-combo-box-popover-enter 160ms ease;
4119
3994
  }
4120
3995
 
4121
- .tds-number-stepper[data-invalid]{
4122
- --tds-number-stepper-border-color:var(--t-form-border-color-error);
4123
- --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4124
- --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4125
- --tds-number-stepper-background-color:var(--t-form-background-color-error);
4126
- --tds-number-stepper-description-color:var(--t-text-color-status-error);
4127
- --tds-number-stepper-description-invalid-icon-display:inline-block;
3996
+ .tds-combo-box-popover[data-exiting]{
3997
+ animation:tds-combo-box-popover-exit 130ms ease;
4128
3998
  }
4129
3999
 
4130
- .tds-number-stepper[data-disabled]{
4131
- --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4132
- --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4133
- --tds-number-stepper-color:var(--t-form-color-disabled);
4000
+ @keyframes tds-combo-box-popover-enter{
4001
+ from{
4002
+ opacity:0;
4003
+ transform:translateY(-8px);
4134
4004
  }
4005
+ }
4135
4006
 
4136
- .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4137
- color:var(--t-form-color-disabled);
4138
- }
4007
+ @keyframes tds-combo-box-popover-exit{
4008
+ to{
4009
+ opacity:0;
4010
+ transform:translateY(-8px);
4011
+ }
4012
+ }
4139
4013
 
4140
- .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4141
- cursor:not-allowed;
4014
+ @media (prefers-reduced-motion: reduce){
4015
+ .tds-combo-box-popover[data-entering],.tds-combo-box-popover[data-exiting]{
4016
+ animation:none;
4142
4017
  }
4143
4018
 
4144
- .tds-number-stepper--lg{
4145
- --tds-number-stepper-min-height:var(--t-container-size-lg);
4146
- --tds-number-stepper-font-size:var(--t-font-size-lg);
4147
- --tds-number-stepper-button-offset:5px;
4148
- --tds-number-stepper-button-gap:4px;
4019
+ .tds-combo-box-button > svg{
4020
+ transition:none;
4021
+ }
4022
+ }
4023
+
4024
+ .tds-combo-box-list{
4025
+ padding:0;
4026
+ margin:0;
4149
4027
  }
4150
4028
 
4151
- .tds-number-stepper-label{
4152
- font-size:var(--t-font-size-md);
4153
- font-weight:var(--t-font-weight-normal);
4029
+ .tds-combo-box-list-item{
4030
+ display:block;
4031
+ padding-block:var(--t-spacing-1);
4032
+ padding-inline:var(--t-spacing-2) var(--t-spacing-1);
4033
+ overflow:hidden;
4034
+ text-overflow:ellipsis;
4035
+ font-size:1rem;
4154
4036
  color:var(--t-text-color);
4037
+ white-space:nowrap;
4155
4038
  cursor:default;
4039
+ outline-offset:-1px;
4040
+ border-radius:var(--t-border-radius);
4156
4041
  }
4157
4042
 
4158
- .tds-number-stepper-field{
4159
- display:flex;
4160
- gap:var(--tds-number-stepper-button-gap);
4161
- align-items:center;
4162
- inline-size:100%;
4163
- min-block-size:var(--tds-number-stepper-min-height);
4164
- font-family:inherit;
4165
- font-size:var(--tds-number-stepper-font-size);
4166
- line-height:1;
4167
- color:var(--tds-number-stepper-color);
4168
- -webkit-appearance:none;
4169
- -moz-appearance:none;
4170
- appearance:none;
4171
- cursor:default;
4172
- outline:var(--t-focus-ring-width) solid transparent;
4173
- outline-offset:0;
4174
- background-color:var(--tds-number-stepper-background-color);
4175
- border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4176
- border-radius:var(--t-form-border-radius);
4177
- }
4043
+ .tds-combo-box-list-item[data-hovered]:not([data-disabled]){
4044
+ background:var(--t-fill-color-neutral-070);
4045
+ }
4178
4046
 
4179
- .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4180
- border-color:var(--tds-number-stepper-border-color-hover);
4047
+ .tds-combo-box-list-item[data-selected]{
4048
+ background:var(--t-fill-color-button-interaction-ghost-active);
4181
4049
  }
4182
4050
 
4183
- .tds-number-stepper-field[data-focus-within]{
4184
- outline-color:var(--t-focus-ring-color);
4185
- outline-offset:var(--t-focus-ring-offset);
4186
- border-color:var(--tds-number-stepper-border-color-active);
4051
+ .tds-combo-box-list-item[data-focus-visible]{
4052
+ outline:var(--t-focus-ring-outline);
4053
+ outline-offset:-1px;
4187
4054
  }
4188
4055
 
4189
- .tds-number-stepper-field:has([readonly]){
4190
- --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4056
+ .tds-combo-box-list-item[data-disabled]{
4057
+ color:var(--t-form-color-disabled);
4058
+ cursor:not-allowed;
4191
4059
  }
4192
4060
 
4193
- .tds-number-stepper-field[data-focus-within]:has([readonly]){
4194
- border-color:var(--t-form-border-color-hover);
4061
+ .tds-combo-box-list-item[data-disabled][data-hovered]{
4062
+ background:transparent;
4195
4063
  }
4196
4064
 
4197
- .tds-number-stepper-input{
4198
- display:flex;
4199
- flex:1;
4200
- align-items:center;
4201
- min-inline-size:0;
4202
- padding-block:var(--tds-number-stepper-padding-block);
4203
- padding-inline:var(--t-spacing-1);
4204
- font-family:inherit;
4205
- font-size:inherit;
4206
- color:inherit;
4207
- outline:0;
4208
- background:transparent;
4209
- border:0;
4210
- }
4211
-
4212
- .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4213
- margin:0;
4214
- -webkit-appearance:none;
4215
- appearance:none;
4065
+ .tds-combo-box-list-section:not(:first-child){
4066
+ margin-block-start:var(--t-spacing-half);
4216
4067
  }
4217
4068
 
4218
- .tds-number-stepper-button{
4219
- flex-shrink:0;
4220
- align-self:center;
4221
- inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4222
- block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4223
- padding:0;
4069
+ .tds-combo-box-section-header{
4070
+ padding-block:var(--t-spacing-1);
4071
+ padding-inline:var(--t-spacing-1);
4072
+ font-size:var(--t-font-size-sm);
4073
+ font-weight:var(--t-font-weight-semibold);
4074
+ color:var(--t-text-color-secondary);
4224
4075
  }
4225
4076
 
4226
- .tds-number-stepper-button:last-of-type{
4227
- margin-inline-end:var(--tds-number-stepper-button-offset);
4228
- }
4229
-
4230
- .tds-number-stepper-description{
4077
+ .tds-combo-box-description{
4231
4078
  display:flex;
4232
4079
  gap:var(--t-spacing-half);
4233
4080
  align-items:flex-start;
4234
4081
  margin:0;
4235
4082
  font-size:var(--t-font-size-sm);
4236
4083
  line-height:1.35;
4237
- color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4084
+ color:var(--tds-combo-box-description-color, var(--t-text-color-secondary));
4238
4085
  cursor:text;
4239
4086
  }
4240
4087
 
4241
- .tds-number-stepper-description-invalid-icon{
4242
- display:var(--tds-number-stepper-description-invalid-icon-display, none);
4088
+ .tds-combo-box-description-invalid-icon{
4089
+ display:var(--tds-combo-box-description-invalid-icon-display, none);
4243
4090
  flex-shrink:0;
4244
4091
  margin-block-start:calc(.5lh - .5em);
4245
4092
  line-height:1.35;
@@ -4393,6 +4240,159 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4393
4240
  line-height:1.35;
4394
4241
  }
4395
4242
 
4243
+ .tds-number-stepper{
4244
+ --tds-number-stepper-border-color:var(--t-form-border-color);
4245
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);
4246
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-focus);
4247
+ --tds-number-stepper-background-color:var(--t-form-background-color);
4248
+ --tds-number-stepper-color:var(--t-form-color);
4249
+ --tds-number-stepper-font-size:var(--t-font-size-md);
4250
+ --tds-number-stepper-min-height:var(--t-container-size-md);
4251
+ --tds-number-stepper-padding-block:6px;
4252
+ --tds-number-stepper-button-offset:4px;
4253
+ --tds-number-stepper-button-gap:2px;
4254
+ --tds-number-stepper-description-color:var(--t-text-color-secondary);
4255
+ --tds-number-stepper-description-invalid-icon-display:none;
4256
+
4257
+ position:relative;
4258
+ display:flex;
4259
+ flex-direction:column;
4260
+ gap:var(--t-spacing-half);
4261
+ }
4262
+
4263
+ .tds-number-stepper[data-required] .tds-number-stepper-label::after{
4264
+ margin-left:.25ch;
4265
+ color:var(--t-text-color-status-error);
4266
+ content:"*";
4267
+ }
4268
+
4269
+ .tds-number-stepper[data-invalid]{
4270
+ --tds-number-stepper-border-color:var(--t-form-border-color-error);
4271
+ --tds-number-stepper-border-color-hover:var(--t-form-border-color-error-hover);
4272
+ --tds-number-stepper-border-color-active:var(--t-form-border-color-error-hover);
4273
+ --tds-number-stepper-background-color:var(--t-form-background-color-error);
4274
+ --tds-number-stepper-description-color:var(--t-text-color-status-error);
4275
+ --tds-number-stepper-description-invalid-icon-display:inline-block;
4276
+ }
4277
+
4278
+ .tds-number-stepper[data-disabled]{
4279
+ --tds-number-stepper-border-color:var(--t-form-border-color-disabled);
4280
+ --tds-number-stepper-background-color:var(--t-form-background-color-disabled);
4281
+ --tds-number-stepper-color:var(--t-form-color-disabled);
4282
+ }
4283
+
4284
+ .tds-number-stepper[data-disabled] .tds-number-stepper-label{
4285
+ color:var(--t-form-color-disabled);
4286
+ }
4287
+
4288
+ .tds-number-stepper[data-disabled] .tds-number-stepper-field{
4289
+ cursor:not-allowed;
4290
+ }
4291
+
4292
+ .tds-number-stepper--lg{
4293
+ --tds-number-stepper-min-height:var(--t-container-size-lg);
4294
+ --tds-number-stepper-font-size:var(--t-font-size-lg);
4295
+ --tds-number-stepper-button-offset:5px;
4296
+ --tds-number-stepper-button-gap:4px;
4297
+ }
4298
+
4299
+ .tds-number-stepper-label{
4300
+ font-size:var(--t-font-size-md);
4301
+ font-weight:var(--t-font-weight-normal);
4302
+ color:var(--t-text-color);
4303
+ cursor:default;
4304
+ }
4305
+
4306
+ .tds-number-stepper-field{
4307
+ display:flex;
4308
+ gap:var(--tds-number-stepper-button-gap);
4309
+ align-items:center;
4310
+ inline-size:100%;
4311
+ min-block-size:var(--tds-number-stepper-min-height);
4312
+ font-family:inherit;
4313
+ font-size:var(--tds-number-stepper-font-size);
4314
+ line-height:1;
4315
+ color:var(--tds-number-stepper-color);
4316
+ -webkit-appearance:none;
4317
+ -moz-appearance:none;
4318
+ appearance:none;
4319
+ cursor:default;
4320
+ outline:var(--t-focus-ring-width) solid transparent;
4321
+ outline-offset:0;
4322
+ background-color:var(--tds-number-stepper-background-color);
4323
+ border:var(--t-form-border-width) solid var(--tds-number-stepper-border-color);
4324
+ border-radius:var(--t-form-border-radius);
4325
+ }
4326
+
4327
+ .tds-number-stepper-field[data-hovered]:not([data-focus-visible],[data-focus-within],[data-disabled]){
4328
+ border-color:var(--tds-number-stepper-border-color-hover);
4329
+ }
4330
+
4331
+ .tds-number-stepper-field[data-focus-within]{
4332
+ outline-color:var(--t-focus-ring-color);
4333
+ outline-offset:var(--t-focus-ring-offset);
4334
+ border-color:var(--tds-number-stepper-border-color-active);
4335
+ }
4336
+
4337
+ .tds-number-stepper-field:has([readonly]){
4338
+ --tds-number-stepper-background-color:var(--t-form-background-color-readonly);
4339
+ }
4340
+
4341
+ .tds-number-stepper-field[data-focus-within]:has([readonly]){
4342
+ border-color:var(--t-form-border-color-hover);
4343
+ }
4344
+
4345
+ .tds-number-stepper-input{
4346
+ display:flex;
4347
+ flex:1;
4348
+ align-items:center;
4349
+ min-inline-size:0;
4350
+ padding-block:var(--tds-number-stepper-padding-block);
4351
+ padding-inline:var(--t-spacing-1);
4352
+ font-family:inherit;
4353
+ font-size:inherit;
4354
+ color:inherit;
4355
+ outline:0;
4356
+ background:transparent;
4357
+ border:0;
4358
+ }
4359
+
4360
+ .tds-number-stepper-input::-webkit-inner-spin-button,.tds-number-stepper-input::-webkit-outer-spin-button{
4361
+ margin:0;
4362
+ -webkit-appearance:none;
4363
+ appearance:none;
4364
+ }
4365
+
4366
+ .tds-number-stepper-button{
4367
+ flex-shrink:0;
4368
+ align-self:center;
4369
+ inline-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4370
+ block-size:calc(var(--tds-number-stepper-min-height) - (var(--tds-number-stepper-button-offset) * 2));
4371
+ padding:0;
4372
+ }
4373
+
4374
+ .tds-number-stepper-button:last-of-type{
4375
+ margin-inline-end:var(--tds-number-stepper-button-offset);
4376
+ }
4377
+
4378
+ .tds-number-stepper-description{
4379
+ display:flex;
4380
+ gap:var(--t-spacing-half);
4381
+ align-items:flex-start;
4382
+ margin:0;
4383
+ font-size:var(--t-font-size-sm);
4384
+ line-height:1.35;
4385
+ color:var(--tds-number-stepper-description-color, var(--t-text-color-secondary));
4386
+ cursor:text;
4387
+ }
4388
+
4389
+ .tds-number-stepper-description-invalid-icon{
4390
+ display:var(--tds-number-stepper-description-invalid-icon-display, none);
4391
+ flex-shrink:0;
4392
+ margin-block-start:calc(.5lh - .5em);
4393
+ line-height:1.35;
4394
+ }
4395
+
4396
4396
  .t-banner{
4397
4397
  --t-banner-font-size:var(--t-font-size-md);
4398
4398
  --t-banner-font-color:var(--t-text-color);