@planningcenter/tapestry 3.2.3-rc.11 → 3.2.3-rc.13

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