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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/date-picker/DatePicker.js +3 -3
  2. package/dist/components/date-picker/DatePicker.js.map +1 -1
  3. package/dist/components/link/BaseLink.js +1 -1
  4. package/dist/components/link/BaseLink.js.map +1 -1
  5. package/dist/index.css +2 -3
  6. package/dist/index.css.map +1 -1
  7. package/dist/reactRender.css +899 -900
  8. package/dist/reactRender.css.map +1 -1
  9. package/dist/reactRenderLegacy.css +899 -900
  10. package/dist/reactRenderLegacy.css.map +1 -1
  11. package/dist/unstable.css +2 -3
  12. package/dist/unstable.css.map +1 -1
  13. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -1,644 +1,650 @@
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:var(--t-surface-color-canvas);
13
+ --tds-page-header-headline-color:var(--t-text-color-headline);
14
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
15
+ --tds-page-header-padding-x:var(--t-spacing-2);
16
+ --tds-page-header-padding-y:var(--t-spacing-2);
17
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
18
+ --tds-page-header-nav-gap:var(--t-spacing-1);
19
+ --tds-page-header-nav-background:linear-gradient(180deg, var(--tds-page-header-nav-background-start, rgba(0, 0, 0, 0)) 0%, var(--tds-page-header-nav-background-end, rgba(0, 0, 0, .1)) 100%);
20
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
21
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
22
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
23
+ --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
24
+ --tds-page-header-nav-item-border-width:1px;
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-bottom-border-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-background-color-hover:var(--t-fill-color-neutral-060);
72
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
73
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
74
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
75
+ }
68
76
  }
69
-
70
- .tds-sidenav-section-list{
71
- width:100%;
72
- padding:0;
73
- margin:0;
74
- list-style:none;
75
77
  }
76
78
 
77
- .tds-sidenav-section-header{
79
+ .tds-page-header{
78
80
  display:flex;
79
- align-items:baseline;
80
- justify-content:space-between;
81
- padding-top:var(--t-spacing-2);
81
+ flex-direction:column;
82
+ padding-top:var(--tds-page-header-padding-y);
83
+ color:var(--tds-page-header-color);
84
+ background:var(--tds-page-header-background-color);
85
+ border-bottom:1px solid var(--tds-page-header-bottom-border-color);
82
86
  }
83
87
 
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;
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
91
90
  }
92
91
 
93
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
94
- padding-top:0;
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
95
94
  }
96
95
 
97
- .tds-sidenav-section-header [slot="label-actions"]{
98
- display:flex;
99
- gap:var(--t-spacing-half);
100
- align-items:center;
96
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
97
+ width:100%;
101
98
  }
102
99
 
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;
100
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
120
101
  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);
102
+ flex-flow:row wrap;
103
+ gap:var(--t-spacing-half) var(--t-spacing-1);
104
+ align-items:flex-start;
105
+ justify-content:flex-start;
106
+ min-width:0;
139
107
  }
140
108
 
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;
109
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
110
+ display:flex;
111
+ gap:var(--tds-page-header-nav-gap);
112
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
113
+ margin:0 0 -1px;
114
+ overflow:auto;
115
+ list-style:none;
116
+ background:var(--tds-page-header-nav-background);
148
117
  }
149
118
 
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);
119
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
120
+ position:relative;
121
+ display:inline-flex;
122
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
123
+ font-size:var(--t-font-size-sm);
124
+ line-height:22px;
125
+ color:var(--tds-page-header-nav-item-color);
126
+ white-space:nowrap;
153
127
  text-decoration:none;
128
+ -webkit-appearance:none;
129
+ -moz-appearance:none;
130
+ appearance:none;
131
+ cursor:pointer;
132
+ outline-offset:-2px;
133
+ background-color:var(--tds-page-header-nav-item-background-color);
134
+ background-clip:padding-box;
135
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
136
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
137
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
154
138
  }
155
139
 
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);
140
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
141
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
142
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
143
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
144
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
169
145
  }
170
146
 
171
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
172
- --tds-sidenav-indent:19px;
173
- }
147
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
148
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
149
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
150
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
151
+ }
174
152
 
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
- }
199
-
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
- }
153
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
154
+ background-color:var(--tds-page-header-nav-item-background-color-active);
155
+ border-color:var(--tds-page-header-nav-item-border-color-active);
156
+ }
207
157
 
208
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
209
- --tds-sidenav-item-depth:2;
210
- }
158
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
159
+ color:var(--tds-page-header-nav-item-color-disabled);
160
+ cursor:not-allowed;
161
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
162
+ opacity:1;
163
+ }
211
164
 
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;
165
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
166
+ position:relative;
218
167
  }
219
168
 
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);
169
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
170
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
171
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
229
172
  }
230
173
 
231
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
174
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
232
175
  position:absolute;
233
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
234
- z-index:-1;
235
- height:100%;
176
+ top:-5px;
177
+ right:-2px;
178
+ width:10px;
179
+ height:10px;
236
180
  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);
181
+ background:var(--tds-page-header-nav-item-indicator-color);
182
+ border-radius:50%;
251
183
  }
252
184
 
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);
185
+ @media (prefers-reduced-motion: no-preference){
186
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
187
+ animation:indicator-pulse 1.25s ease infinite;
188
+ }
255
189
  }
256
190
 
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{
191
+ .tds-page-header__title-bar{
263
192
  display:flex;
264
- gap:var(--t-spacing-2);
265
- align-items:center;
266
- width:100%;
193
+ flex-direction:column;
194
+ gap:var(--t-spacing-2) var(--t-spacing-1);
195
+ align-items:flex-start;
196
+ justify-content:space-between;
197
+ padding:0 var(--tds-page-header-padding-x);
267
198
  }
268
199
 
269
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
270
- order:0;
200
+ .tds-page-header--profile > .tds-page-header__title-bar{
201
+ align-items:center;
271
202
  }
272
203
 
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
- }
204
+ .tds-page-header__primary{
205
+ width:100%;
206
+ }
281
207
 
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;
208
+ .tds-page-header__primary h1{
209
+ margin:0;
210
+ font-size:var(--tds-page-header-headline-font-size);
211
+ font-weight:var(--t-font-weight-normal);
212
+ line-height:32px;
213
+ color:var(--tds-page-header-headline-color);
214
+ overflow-wrap:break-word;
300
215
  }
301
216
 
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;
217
+ @media (min-width: 960px){
218
+ .tds-page-header__primary{
219
+ flex:1 1 max-content;
220
+ width:auto;
221
+ min-width:0;
222
+ max-width:100%;
310
223
  }
311
224
 
312
- .tds-sidenav-item :is(a, button) :is(.prefix){
313
- display:none;
225
+ .tds-page-header__title-bar,
226
+ .tds-page-header--profile .tds-page-header__title-bar{
227
+ flex-flow:row nowrap;
228
+ row-gap:12px;
229
+ align-items:flex-start;
314
230
  }
315
- @supports selector(:popover-open){
316
- .tds-sidenav-collapse:popover-open{
317
- display:flex;
318
- }
319
-
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
323
233
  }
324
234
 
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;
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
335
237
  }
238
+ }
336
239
 
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
- }
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
342
244
  }
343
245
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
347
- }
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
348
250
  }
349
251
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
256
+ }
353
257
 
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
261
+ }
262
+ }
357
263
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
361
- }
362
264
 
363
- .tds-checkbox{
364
- --tds-checkbox-font-size:var(--t-font-size-md);
365
- --tds-checkbox-cursor:pointer;
366
- --tds-checkbox-line-height:1.4;
367
- --tds-checkbox-transition-property:background-color, border-color;
265
+ @media (prefers-reduced-motion: no-preference){
368
266
 
369
- --tds-checkbox-input-size:var(--t-element-size-md);
370
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
371
- --tds-checkbox-input-border-color:var(--t-form-border-color);
372
- --tds-checkbox-input-background-color:transparent;
267
+ :root{
268
+ interpolate-size:allow-keywords;
269
+ }
270
+ }
373
271
 
374
- --tds-checkbox-input-icon:none;
375
- --tds-checkbox-input-icon-visibility:hidden;
376
- --tds-checkbox-input-icon-opacity:0;
377
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
272
+ @layer tds-component{
273
+ tds-sidenav,
274
+ .tds-sidenav{
275
+ --tds-sidenav-indent:12px;
276
+ --tds-sidenav-item-depth:0;
378
277
 
379
- --tds-checkbox-label-color:var(--t-form-color);
278
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
380
279
 
381
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
382
- --tds-checkbox-description-line-height:1.35;
383
- --tds-checkbox-description-color:var(--t-text-color-secondary);
384
- --tds-checkbox-description-invalid-icon-display:none;
280
+ --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;
281
+ --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;
282
+ --tds-sidenav-collapse-closed-opacity:0;
283
+ --tds-sidenav-collapse-open-opacity:1;
284
+ --tds-sidenav-collapse-closed-transform:translateY(-8px);
285
+ --tds-sidenav-collapse-open-transform:translateY(0);
385
286
 
386
- position:relative;
387
- display:inline-grid;
388
- grid-template-columns:auto;
389
- grid-auto-columns:1fr;
390
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
391
- line-height:var(--tds-checkbox-line-height);
392
- cursor:var(--tds-checkbox-cursor);
393
- -webkit-user-select:none;
394
- -moz-user-select:none;
395
- user-select:none;
287
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
288
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
289
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
290
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
291
+
292
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
293
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
294
+ --tds-sidenav-item-nested-background-selected:transparent;
295
+
296
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
297
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
298
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
299
+
300
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
301
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
302
+ }
303
+
304
+ @media (prefers-reduced-motion: reduce){
305
+ tds-sidenav,
306
+ .tds-sidenav{
307
+ --tds-sidenav-collapse-transition-enter:none;
308
+ --tds-sidenav-collapse-transition-exit:none;
309
+ --tds-sidenav-collapse-closed-transform:none;
310
+ --tds-sidenav-collapse-open-transform:none;
311
+ }
312
+ }
313
+
314
+ .tds-sidenav--theme-gray{
315
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
316
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
317
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
318
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
319
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
320
+ }
396
321
  }
397
322
 
398
- .tds-checkbox label{
399
- grid-area:1 / 2;
400
- font-size:var(--tds-checkbox-font-size);
401
- font-weight:var(--t-font-weight-normal);
402
- color:var(--tds-checkbox-label-color);
403
- cursor:var(--tds-checkbox-cursor);
323
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
324
+ display:flex;
404
325
  }
405
326
 
406
- .tds-checkbox tds-indeterminate{
327
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
328
+ flex-direction:column;
329
+ gap:var(--t-spacing-half);
330
+ width:100%;
331
+ }
332
+
333
+ .tds-sidenav-section-list{
334
+ width:100%;
335
+ padding:0;
336
+ margin:0;
337
+ list-style:none;
338
+ }
339
+
340
+ .tds-sidenav-section-header{
341
+ display:flex;
342
+ align-items:baseline;
343
+ justify-content:space-between;
344
+ padding-top:var(--t-spacing-2);
345
+ }
346
+
347
+ .tds-sidenav-section-header h2{
348
+ margin:0;
349
+ font-size:var(--t-font-size-sm);
350
+ font-weight:var(--t-font-weight-semibold);
351
+ line-height:1.35;
352
+ color:var(--t-text-color-secondary);
353
+ text-transform:uppercase;
354
+ }
355
+
356
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
357
+ padding-top:0;
358
+ }
359
+
360
+ .tds-sidenav-section-header [slot="label-actions"]{
407
361
  display:flex;
362
+ gap:var(--t-spacing-half);
363
+ align-items:center;
408
364
  }
409
365
 
410
- .tds-checkbox input[type="checkbox"]{
366
+ .tds-sidenav-section [slot="section-actions"]{
367
+ display:flex;
368
+ gap:12px;
369
+ align-items:center;
370
+ min-height:42px;
371
+ padding:var(--t-spacing-1) 0;
372
+ }
373
+
374
+ .tds-sidenav-section-list,
375
+ .tds-sidenav-item{
376
+ width:100%;
377
+ padding:0;
378
+ margin:0;
379
+ }
380
+
381
+ .tds-sidenav-item :is(a,button){
411
382
  position:relative;
412
- width:1em;
413
- height:1em;
414
- margin:calc((1lh - 1em) / 2) 0 0;
415
- font-size:var(--tds-checkbox-font-size);
416
- line-height:inherit;
383
+ display:flex;
384
+ gap:12px;
385
+ align-items:center;
386
+ width:100%;
387
+ padding:12px;
388
+ overflow:hidden;
389
+ font-size:var(--t-font-size-sm);
390
+ line-height:18px;
391
+ color:var(--t-text-color-headline);
392
+ white-space:nowrap;
393
+ text-decoration:none;
417
394
  -webkit-appearance:none;
418
395
  -moz-appearance:none;
419
396
  appearance:none;
420
- cursor:var(--tds-checkbox-cursor);
421
- background-color:var(--tds-checkbox-input-background-color);
422
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
423
- border-radius:var(--tds-checkbox-input-border-radius);
424
- transition-timing-function:var(--t-ease-in-out);
425
- transition-duration:var(--t-duration-200);
426
- transition-property:var(--tds-checkbox-transition-property);
397
+ cursor:pointer;
398
+ background-color:var(--tds-sidenav-item-background, transparent);
399
+ border:0;
400
+ border-radius:var(--t-border-radius);
401
+ transition:var(--tds-sidenav-item-transition);
427
402
  }
428
403
 
429
- :is(.tds-checkbox input[type="checkbox"])::before{
430
- position:absolute;
431
- top:50%;
432
- left:50%;
433
- visibility:var(--tds-checkbox-input-icon-visibility);
434
- width:100%;
435
- height:100%;
436
- content:"";
437
- background-color:var(--tds-checkbox-input-icon-fill);
438
- border-radius:var(--tds-checkbox-input-border-radius);
439
- opacity:var(--tds-checkbox-input-icon-opacity);
440
- -webkit-mask-image:var(--tds-checkbox-input-icon);
441
- mask-image:var(--tds-checkbox-input-icon);
442
- -webkit-mask-repeat:no-repeat;
443
- mask-repeat:no-repeat;
444
- -webkit-mask-size:contain;
445
- mask-size:contain;
446
- transform:translate(-50%, -50%);
404
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
405
+ display:block;
406
+ flex:1;
407
+ overflow:hidden;
408
+ text-overflow:ellipsis;
409
+ text-align:left;
410
+ white-space:nowrap;
447
411
  }
448
412
 
449
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
450
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
451
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
413
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
414
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
415
+ color:var(--t-text-color-headline);
416
+ text-decoration:none;
452
417
  }
453
418
 
454
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
455
- outline:var(--t-focus-ring-outline);
456
- outline-offset:var(--t-focus-ring-offset);
419
+ :is(.tds-sidenav-item :is(a,button)):active{
420
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
457
421
  }
458
422
 
459
- :is(.tds-checkbox input[type="checkbox"]):disabled{
460
- pointer-events:none;
423
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
424
+ overflow:hidden;
425
+ color:var(--tds-sidenav-item-icon-color);
461
426
  }
462
427
 
463
- @media (prefers-reduced-motion: reduce){
428
+ :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{
429
+ display:block;
430
+ width:var(--tds-sidenav-item-icon-size);
431
+ height:var(--tds-sidenav-item-icon-size);
432
+ }
464
433
 
465
- .tds-checkbox input[type="checkbox"]{
466
- --tds-checkbox-transition-property:none;
467
- }
434
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
435
+ --tds-sidenav-indent:19px;
468
436
  }
469
437
 
470
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
471
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
472
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
473
- --tds-checkbox-input-icon-visibility:visible;
474
- --tds-checkbox-input-icon-opacity:1;
475
- }
476
-
477
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
478
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
479
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
438
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
439
+ visibility:visible;
440
+ block-size:auto;
441
+ opacity:1;
480
442
  }
481
443
 
482
- .tds-checkbox:has(input:checked){
483
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
444
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
445
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
446
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
447
+
448
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
449
+ font-weight:var(--t-font-weight-semibold);
484
450
  }
485
451
 
486
- .tds-checkbox:has(input:indeterminate){
487
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
452
+ .tds-sidenav-item:has(.tds-sidenav-section){
453
+ display:flex;
454
+ flex-direction:column;
455
+ gap:var(--t-spacing-half);
488
456
  }
489
457
 
490
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
491
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
492
- --tds-checkbox-description-color:var(--t-text-color-status-error);
493
- --tds-checkbox-description-invalid-icon-display:inline-block;
458
+ .tds-sidenav-item .tds-sidenav-section-list{
459
+ --tds-sidenav-item-depth:1;
460
+ gap:0;
494
461
  }
495
462
 
496
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
497
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
498
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
463
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
464
+ visibility:hidden;
465
+ block-size:0;
466
+ overflow-y:clip;
467
+ opacity:0;
468
+ transition:content-visibility var(--t-duration-400) allow-discrete, opacity var(--t-duration-400), block-size var(--t-duration-400);
499
469
  }
500
470
 
501
- :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{
502
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
503
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
471
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
472
+ --tds-sidenav-item-depth:2;
504
473
  }
505
474
 
506
- :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){
507
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
508
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
509
- }
475
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
476
+ min-height:var(--t-element-size-2xl);
477
+ padding-block:9px;
478
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
479
+ line-height:1;
480
+ background-color:transparent;
481
+ }
510
482
 
511
- .tds-checkbox:has(input:required) label::after{
512
- margin-left:.25ch;
513
- color:var(--t-text-color-status-error);
514
- content:"*";
515
- }
483
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
484
+ position:absolute;
485
+ top:0;
486
+ bottom:0;
487
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
488
+ width:2px;
489
+ content:"";
490
+ background-color:var(--tds-sidenav-item-nested-border-color);
491
+ transition:var(--tds-sidenav-item-transition);
492
+ }
516
493
 
517
- .tds-checkbox:has(input:disabled){
518
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
519
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
494
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
495
+ position:absolute;
496
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
497
+ z-index:-1;
498
+ height:100%;
499
+ content:"";
500
+ background-color:var(--tds-sidenav-item-nested-background);
501
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
502
+ transition:var(--tds-sidenav-item-transition);
503
+ }
520
504
 
521
- --tds-checkbox-label-color:var(--t-form-color-disabled);
522
- --tds-checkbox-description-color:var(--t-form-color-disabled);
523
- --tds-checkbox-cursor:not-allowed;
524
- }
505
+ :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)){
506
+ display:block;
507
+ text-align:left;
508
+ white-space:normal;
509
+ }
525
510
 
526
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
527
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
511
+ :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{
512
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
513
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
514
+ }
515
+
516
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
517
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
518
+ }
519
+
520
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
521
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
522
+ font-weight:var(--t-font-weight-medium);
528
523
  }
529
524
 
530
- .tds-checkbox-description{
525
+ .tds-sidenav-responsive-header{
531
526
  display:flex;
532
- grid-area:2 / 2;
533
- gap:var(--t-spacing-half);
534
- align-items:flex-start;
535
- margin:0;
536
- font-size:var(--tds-checkbox-description-font-size);
537
- line-height:var(--tds-checkbox-description-line-height);
538
- color:var(--tds-checkbox-description-color);
539
- cursor:text;
527
+ gap:var(--t-spacing-2);
528
+ align-items:center;
529
+ width:100%;
540
530
  }
541
531
 
542
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
543
- display:var(--tds-checkbox-description-invalid-icon-display);
544
- flex-shrink:0;
545
- margin-top:calc(.5lh - .5em);
546
- line-height:var(--tds-checkbox-description-line-height);
532
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
533
+ order:0;
547
534
  }
548
535
 
549
- .tds-checkbox--sm{
550
- --tds-checkbox-line-height:1.35;
551
- --tds-checkbox-input-size:var(--t-element-size-sm);
552
- --tds-checkbox-font-size:var(--t-font-size-sm);
553
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
554
- --tds-checkbox-description-line-height:1.3;
555
- }
536
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
537
+ flex:1;
538
+ order:1;
539
+ margin:0;
540
+ font-size:var(--t-font-size-lg);
541
+ font-weight:var(--t-font-weight-medium);
542
+ color:var(--t-text-color-headline);
543
+ }
556
544
 
557
- .tds-radio-group{
558
- --tds-radio-group-font-size:var(--t-font-size-md);
559
- --tds-radio-group-line-height:1.4;
560
- --tds-radio-group-gap:var(--t-spacing-1);
545
+ @media (max-width: 719px){
546
+ .tds-sidenav-collapse{
547
+ z-index:10001;
548
+ display:none;
549
+ max-width:min(448px, calc(100vw - 48px));
550
+ padding:0;
551
+ margin:12px 0;
552
+ position-area:bottom span-right;
553
+ overflow:hidden;
554
+ outline:0;
555
+ background:var(--t-surface-color-card);
556
+ border:0;
557
+ border-radius:6px;
558
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
559
+ opacity:var(--tds-sidenav-collapse-open-opacity);
560
+ transform:var(--tds-sidenav-collapse-open-transform);
561
+ transition:var(--tds-sidenav-collapse-transition-enter);
562
+ will-change:transform;
563
+ }
561
564
 
562
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
565
+ .tds-sidenav-scroll-container{
566
+ --webkit-overflow-scrolling:touch;
567
+ display:block;
568
+ width:100%;
569
+ height:-moz-fit-content;
570
+ height:fit-content;
571
+ padding:var(--t-spacing-2);
572
+ overflow-y:auto;
573
+ }
563
574
 
564
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
565
- --tds-radio-group-description-line-height:1.35;
566
- --tds-radio-group-description-color:var(--t-text-color-secondary);
567
- --tds-radio-group-description-invalid-icon-display:none;
568
- display:flex;
569
- flex-direction:column;
570
- gap:var(--tds-radio-group-gap);
571
- padding:0;
572
- margin:0;
575
+ .tds-sidenav-item :is(a, button) :is(.prefix){
576
+ display:none;
577
+ }
578
+ @supports selector(:popover-open){
579
+ .tds-sidenav-collapse:popover-open{
580
+ display:flex;
581
+ }
573
582
 
574
- font-size:var(--tds-radio-group-font-size);
575
- line-height:var(--tds-radio-group-line-height);
576
- border:0;
577
- }
583
+ .tds-sidenav-collapse:not(:popover-open){
584
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
585
+ transition:var(--tds-sidenav-collapse-transition-exit);
586
+ }
578
587
 
579
- .tds-radio-group legend{
580
- padding:0;
581
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
588
+ @starting-style{
589
+ .tds-sidenav-collapse:popover-open{
590
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
591
+ transform:var(--tds-sidenav-collapse-closed-transform);
592
+ }
593
+ }
582
594
  }
595
+ @supports not selector(:popover-open){
596
+ .tds-sidenav-collapse.\:popover-open{
597
+ display:flex;
598
+ }
583
599
 
584
- .tds-radio-group:has(.tds-radio-group-description){
585
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
600
+ .tds-sidenav-collapse:not(.\:popover-open){
601
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
602
+ transition:var(--tds-sidenav-collapse-transition-exit);
603
+ }
586
604
  }
605
+ }
587
606
 
588
- .tds-radio-group[aria-invalid="true"]{
589
- --tds-radio-group-description-color:var(--t-text-color-status-error);
590
- --tds-radio-group-description-invalid-icon-display:inline-block;
607
+ @media (min-width: 720px){
608
+ .tds-sidenav-responsive-header{
609
+ display:none;
591
610
  }
611
+ }
592
612
 
593
- .tds-radio-group[aria-invalid="true"] .tds-radio{
594
- --tds-radio-input-border-color:var(--t-form-border-color-error);
613
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
+ display:none;
595
615
  }
596
616
 
597
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
598
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
599
- --tds-radio-input-background-color:var(--t-form-background-color-error);
600
- }
601
-
602
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
603
- --tds-radio-input-background-color:var(--t-form-background-color);
604
- }
617
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
+ display:block;
619
+ }
605
620
 
606
- .tds-radio-group:has(input:required) legend::after{
607
- margin-left:.25ch;
608
- color:var(--t-text-color-status-error);
609
- content:"*";
621
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
622
+ display:flex;
623
+ flex-direction:column;
610
624
  }
611
625
 
612
- .tds-radio-group-fields{
613
- display:flex;
614
- flex-direction:column;
615
- gap:var(--tds-radio-group-gap);
616
- align-items:flex-start;
617
- }
618
626
 
619
- .tds-radio-group-description{
620
- display:flex;
621
- gap:var(--t-spacing-half);
622
- align-items:flex-start;
623
- margin:0;
624
- font-size:var(--tds-radio-group-description-font-size);
625
- line-height:var(--tds-radio-group-description-line-height);
626
- color:var(--tds-radio-group-description-color);
627
- cursor:text;
628
- }
627
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
628
+ -webkit-appearance:none;
629
+ appearance:none;
630
+ }
629
631
 
630
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
631
- display:var(--tds-radio-group-description-invalid-icon-display);
632
- flex-shrink:0;
633
- margin-top:calc(.5lh - .5em);
634
- line-height:var(--tds-radio-group-description-line-height);
632
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
633
+ inline-size:1em;
634
+ block-size:2em;
635
+ }
636
+
637
+ @supports (field-sizing: content){
638
+ .tds-input--auto-width{
639
+ inline-size:-moz-fit-content;
640
+ inline-size:fit-content;
641
+ min-inline-size:min(100%, 122px);
635
642
  }
636
643
 
637
- .tds-radio-group--sm{
638
- --tds-radio-group-line-height:1.35;
639
- --tds-radio-group-font-size:var(--t-font-size-sm);
640
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
641
- --tds-radio-group-description-line-height:1.3;
644
+ .tds-input--auto-width input{
645
+ field-sizing:content;
646
+ inline-size:auto;
647
+ }
642
648
  }
643
649
 
644
650
  .tds-radio{
@@ -773,291 +779,285 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
773
779
  --tds-radio-description-line-height:1.3;
774
780
  }
775
781
 
776
- @layer t-critical{
777
- tds-page-header:not(.hydrated){
778
- display:none;
779
- }
780
- }
782
+ .tds-checkbox{
783
+ --tds-checkbox-font-size:var(--t-font-size-md);
784
+ --tds-checkbox-cursor:pointer;
785
+ --tds-checkbox-line-height:1.4;
786
+ --tds-checkbox-transition-property:background-color, border-color;
781
787
 
782
- @layer t-component{
783
- .tds-page-header{
784
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
785
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
786
- --tds-page-header-color:var(--t-text-color);
787
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
788
- --tds-page-header-headline-color:var(--t-text-color-headline);
789
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
790
- --tds-page-header-padding-x:var(--t-spacing-2);
791
- --tds-page-header-padding-y:var(--t-spacing-2);
792
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
793
- --tds-page-header-nav-gap:var(--t-spacing-1);
794
- --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%);
795
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
796
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
797
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
798
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
799
- --tds-page-header-nav-item-border-width:1px;
788
+ --tds-checkbox-input-size:var(--t-element-size-md);
789
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
790
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
791
+ --tds-checkbox-input-background-color:transparent;
800
792
 
801
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
802
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
793
+ --tds-checkbox-input-icon:none;
794
+ --tds-checkbox-input-icon-visibility:hidden;
795
+ --tds-checkbox-input-icon-opacity:0;
796
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
803
797
 
804
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
805
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
806
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
798
+ --tds-checkbox-label-color:var(--t-form-color);
807
799
 
808
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
809
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
800
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
801
+ --tds-checkbox-description-line-height:1.35;
802
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
803
+ --tds-checkbox-description-invalid-icon-display:none;
810
804
 
811
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
812
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
813
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
805
+ position:relative;
806
+ display:inline-grid;
807
+ grid-template-columns:auto;
808
+ grid-auto-columns:1fr;
809
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
810
+ line-height:var(--tds-checkbox-line-height);
811
+ cursor:var(--tds-checkbox-cursor);
812
+ -webkit-user-select:none;
813
+ -moz-user-select:none;
814
+ user-select:none;
815
+ }
814
816
 
815
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
816
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
817
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
818
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
819
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
817
+ .tds-checkbox label{
818
+ grid-area:1 / 2;
819
+ font-size:var(--tds-checkbox-font-size);
820
+ font-weight:var(--t-font-weight-normal);
821
+ color:var(--tds-checkbox-label-color);
822
+ cursor:var(--tds-checkbox-cursor);
820
823
  }
821
824
 
822
- .tds-page-header--profile{
823
- --tds-page-header-padding-y:20px;
825
+ .tds-checkbox tds-indeterminate{
826
+ display:flex;
824
827
  }
825
828
 
826
- @supports (color: light-dark(#fff, #000)){
827
- .tds-page-header{
828
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
829
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
830
- }
829
+ .tds-checkbox input[type="checkbox"]{
830
+ position:relative;
831
+ width:1em;
832
+ height:1em;
833
+ margin:calc((1lh - 1em) / 2) 0 0;
834
+ font-size:var(--tds-checkbox-font-size);
835
+ line-height:inherit;
836
+ -webkit-appearance:none;
837
+ -moz-appearance:none;
838
+ appearance:none;
839
+ cursor:var(--tds-checkbox-cursor);
840
+ background-color:var(--tds-checkbox-input-background-color);
841
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
842
+ border-radius:var(--tds-checkbox-input-border-radius);
843
+ transition-timing-function:var(--t-ease-in-out);
844
+ transition-duration:var(--t-duration-200);
845
+ transition-property:var(--tds-checkbox-transition-property);
831
846
  }
832
847
 
833
- @media (min-width: 600px){
834
- .tds-page-header{
835
- --tds-page-header-background-color:var(--t-surface-color-canvas);
836
- --tds-page-header-color:var(--t-text-color-secondary);
837
- --tds-page-header-bottom-border-color:var(--t-border-color);
838
- --tds-page-header-padding-x:var(--t-spacing-3);
839
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
840
- --tds-page-header-nav-gap:var(--t-spacing-half);
841
- --tds-page-header-nav-background:transparent;
842
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
843
- --tds-page-header-nav-item-border-width:1px;
844
- --tds-page-header-nav-item-color:var(--t-text-color);
845
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
846
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
847
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
848
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
849
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
848
+ :is(.tds-checkbox input[type="checkbox"])::before{
849
+ position:absolute;
850
+ top:50%;
851
+ left:50%;
852
+ visibility:var(--tds-checkbox-input-icon-visibility);
853
+ width:100%;
854
+ height:100%;
855
+ content:"";
856
+ background-color:var(--tds-checkbox-input-icon-fill);
857
+ border-radius:var(--tds-checkbox-input-border-radius);
858
+ opacity:var(--tds-checkbox-input-icon-opacity);
859
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
860
+ mask-image:var(--tds-checkbox-input-icon);
861
+ -webkit-mask-repeat:no-repeat;
862
+ mask-repeat:no-repeat;
863
+ -webkit-mask-size:contain;
864
+ mask-size:contain;
865
+ transform:translate(-50%, -50%);
850
866
  }
851
- }
852
- }
853
867
 
854
- .tds-page-header{
855
- display:flex;
856
- flex-direction:column;
857
- padding-top:var(--tds-page-header-padding-y);
858
- color:var(--tds-page-header-color);
859
- background:var(--tds-page-header-background-color);
860
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
861
- }
868
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
869
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
870
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
871
+ }
862
872
 
863
- .tds-page-header:not(.has-nav){
864
- padding-bottom:var(--tds-page-header-padding-y);
873
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
874
+ outline:var(--t-focus-ring-outline);
875
+ outline-offset:var(--t-focus-ring-offset);
876
+ }
877
+
878
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
879
+ pointer-events:none;
880
+ }
881
+
882
+ @media (prefers-reduced-motion: reduce){
883
+
884
+ .tds-checkbox input[type="checkbox"]{
885
+ --tds-checkbox-transition-property:none;
865
886
  }
887
+ }
866
888
 
867
- .tds-page-header.inactive{
868
- background:var(--tds-page-header-background-color-inactive);
889
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
890
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
891
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
892
+ --tds-checkbox-input-icon-visibility:visible;
893
+ --tds-checkbox-input-icon-opacity:1;
869
894
  }
870
895
 
871
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
872
- width:100%;
896
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
897
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
898
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
899
+ }
900
+
901
+ .tds-checkbox:has(input:checked){
902
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
873
903
  }
874
904
 
875
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
876
- display:flex;
877
- flex-flow:row wrap;
878
- gap:var(--t-spacing-half) var(--t-spacing-1);
879
- align-items:flex-start;
880
- justify-content:flex-start;
881
- min-width:0;
905
+ .tds-checkbox:has(input:indeterminate){
906
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
882
907
  }
883
908
 
884
- :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{
885
- display:flex;
886
- gap:var(--tds-page-header-nav-gap);
887
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
888
- margin:0 0 -1px;
889
- overflow:auto;
890
- list-style:none;
891
- background:var(--tds-page-header-nav-background);
909
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
910
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
911
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
912
+ --tds-checkbox-description-invalid-icon-display:inline-block;
913
+ }
914
+
915
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
916
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
917
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
892
918
  }
893
919
 
894
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
895
- position:relative;
896
- display:inline-flex;
897
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
898
- font-size:var(--t-font-size-sm);
899
- line-height:22px;
900
- color:var(--tds-page-header-nav-item-color);
901
- white-space:nowrap;
902
- text-decoration:none;
903
- -webkit-appearance:none;
904
- -moz-appearance:none;
905
- appearance:none;
906
- cursor:pointer;
907
- outline-offset:-2px;
908
- background-color:var(--tds-page-header-nav-item-background-color);
909
- background-clip:padding-box;
910
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
911
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
912
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
920
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
921
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
922
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
913
923
  }
914
924
 
915
- .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
916
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
917
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
918
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
919
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
925
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
926
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
927
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
920
928
  }
921
929
 
922
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
923
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
924
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
925
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
926
- }
927
-
928
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
929
- background-color:var(--tds-page-header-nav-item-background-color-active);
930
- border-color:var(--tds-page-header-nav-item-border-color-active);
931
- }
932
-
933
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
934
- color:var(--tds-page-header-nav-item-color-disabled);
935
- cursor:not-allowed;
936
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
937
- opacity:1;
938
- }
939
-
940
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
941
- position:relative;
930
+ .tds-checkbox:has(input:required) label::after{
931
+ margin-left:.25ch;
932
+ color:var(--t-text-color-status-error);
933
+ content:"*";
942
934
  }
943
935
 
944
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
945
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
946
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
947
- }
936
+ .tds-checkbox:has(input:disabled){
937
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
938
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
948
939
 
949
- :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{
950
- position:absolute;
951
- top:-5px;
952
- right:-2px;
953
- width:10px;
954
- height:10px;
955
- content:"";
956
- background:var(--tds-page-header-nav-item-indicator-color);
957
- border-radius:50%;
958
- }
940
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
941
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
942
+ --tds-checkbox-cursor:not-allowed;
943
+ }
959
944
 
960
- @media (prefers-reduced-motion: no-preference){
961
- :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
962
- animation:indicator-pulse 1.25s ease infinite;
963
- }
964
- }
945
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
946
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
947
+ }
965
948
 
966
- .tds-page-header__title-bar{
949
+ .tds-checkbox-description{
967
950
  display:flex;
968
- flex-direction:column;
969
- gap:var(--t-spacing-2) var(--t-spacing-1);
951
+ grid-area:2 / 2;
952
+ gap:var(--t-spacing-half);
970
953
  align-items:flex-start;
971
- justify-content:space-between;
972
- padding:0 var(--tds-page-header-padding-x);
954
+ margin:0;
955
+ font-size:var(--tds-checkbox-description-font-size);
956
+ line-height:var(--tds-checkbox-description-line-height);
957
+ color:var(--tds-checkbox-description-color);
958
+ cursor:text;
973
959
  }
974
960
 
975
- .tds-page-header--profile > .tds-page-header__title-bar{
976
- align-items:center;
961
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
962
+ display:var(--tds-checkbox-description-invalid-icon-display);
963
+ flex-shrink:0;
964
+ margin-top:calc(.5lh - .5em);
965
+ line-height:var(--tds-checkbox-description-line-height);
977
966
  }
978
967
 
979
- .tds-page-header__primary{
980
- width:100%;
968
+ .tds-checkbox--sm{
969
+ --tds-checkbox-line-height:1.35;
970
+ --tds-checkbox-input-size:var(--t-element-size-sm);
971
+ --tds-checkbox-font-size:var(--t-font-size-sm);
972
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
973
+ --tds-checkbox-description-line-height:1.3;
981
974
  }
982
975
 
983
- .tds-page-header__primary h1{
984
- margin:0;
985
- font-size:var(--tds-page-header-headline-font-size);
986
- font-weight:var(--t-font-weight-normal);
987
- line-height:32px;
988
- color:var(--tds-page-header-headline-color);
989
- overflow-wrap:break-word;
990
- }
991
-
992
- @media (min-width: 960px){
993
- .tds-page-header__primary{
994
- flex:1 1 max-content;
995
- width:auto;
996
- min-width:0;
997
- max-width:100%;
998
- }
999
-
1000
- .tds-page-header__title-bar,
1001
- .tds-page-header--profile .tds-page-header__title-bar{
1002
- flex-flow:row nowrap;
1003
- row-gap:12px;
1004
- align-items:flex-start;
1005
- }
1006
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1007
- width:auto;
1008
- }
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);
1009
980
 
1010
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1011
- justify-content:flex-end;
1012
- }
1013
- }
981
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1014
982
 
1015
- .tds-page-header-phone,
1016
- .tds-page-header-email{
1017
- color:var(--tds-page-header-color);
1018
- white-space:nowrap;
1019
- }
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;
1020
992
 
1021
- .tds-page-header-email{
1022
- max-width:100%;
1023
- overflow:hidden;
1024
- text-overflow:ellipsis;
993
+ font-size:var(--tds-radio-group-font-size);
994
+ line-height:var(--tds-radio-group-line-height);
995
+ border:0;
1025
996
  }
1026
997
 
1027
- @keyframes indicator-pulse{
1028
- 0%{
1029
- opacity:.3;
1030
- transform:scale(.9);
998
+ .tds-radio-group legend{
999
+ padding:0;
1000
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1031
1001
  }
1032
1002
 
1033
- 100%{
1034
- opacity:0;
1035
- transform:scale(1.75);
1003
+ .tds-radio-group:has(.tds-radio-group-description){
1004
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1036
1005
  }
1037
- }
1038
1006
 
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
+ }
1039
1011
 
1040
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1041
- -webkit-appearance:none;
1042
- appearance:none;
1012
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1013
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1043
1014
  }
1044
1015
 
1045
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1046
- inline-size:1em;
1047
- block-size:2em;
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
+ }
1020
+
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
+ }
1024
+
1025
+ .tds-radio-group:has(input:required) legend::after{
1026
+ margin-left:.25ch;
1027
+ color:var(--t-text-color-status-error);
1028
+ content:"*";
1048
1029
  }
1049
1030
 
1050
- @supports (field-sizing: content){
1051
- .tds-input--auto-width{
1052
- inline-size:-moz-fit-content;
1053
- inline-size:fit-content;
1054
- min-inline-size:min(100%, 122px);
1055
- }
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
+ }
1056
1037
 
1057
- .tds-input--auto-width input{
1058
- field-sizing:content;
1059
- inline-size:auto;
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
+ }
1048
+
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);
1060
1054
  }
1055
+
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;
1061
1061
  }
1062
1062
 
1063
1063
  .tds-input:has(textarea){
@@ -2209,8 +2209,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2209
2209
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
2210
2210
  }
2211
2211
 
2212
- .tds-btn--inline-text,
2213
- a[class="tds-btn"]{
2212
+ .tds-btn--inline-text{
2214
2213
  --tds-btn-color:var(--t-text-color-interaction);
2215
2214
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
2216
2215
  --tds-btn-color-active:var(--t-text-color-interaction-active);
@@ -2231,7 +2230,7 @@ a[class="tds-btn"]{
2231
2230
  vertical-align:inherit;
2232
2231
  }
2233
2232
 
2234
- :is(.tds-btn--inline-text,a[class="tds-btn"]):hover,:is(.tds-btn--inline-text,a[class="tds-btn"]):focus-visible{
2233
+ .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
2235
2234
  --tds-btn-text-decoration:none;
2236
2235
  }
2237
2236
 
@@ -3605,154 +3604,84 @@ a[class="tds-btn"]{
3605
3604
  line-height:1.35;
3606
3605
  }
3607
3606
 
3608
- .tds-time-field{
3609
- --tds-time-field-border-color:var(--t-form-border-color);
3610
- --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
3611
- --tds-time-field-border-color-active:var(--t-form-border-color-focus);
3612
- --tds-time-field-background-color:var(--t-form-background-color);
3613
- --tds-time-field-color:var(--t-form-color);
3614
- --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
3615
- --tds-time-field-font-size:var(--t-font-size-md);
3616
- --tds-time-field-min-height:var(--t-container-size-md);
3617
- --tds-time-field-padding-block:6px;
3618
- --tds-time-field-description-color:var(--t-text-color-secondary);
3619
- --tds-time-field-description-invalid-icon-display:none;
3620
-
3621
- position:relative;
3622
- display:flex;
3623
- flex-direction:column;
3624
- gap:var(--t-spacing-half);
3625
- }
3626
-
3627
- .tds-time-field[data-required] .tds-time-field-label::after{
3628
- margin-left:.25ch;
3629
- color:var(--t-text-color-status-error);
3630
- content:"*";
3631
- }
3632
-
3633
- .tds-time-field[data-invalid]{
3634
- --tds-time-field-border-color:var(--t-form-border-color-error);
3635
- --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
3636
- --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
3637
- --tds-time-field-background-color:var(--t-form-background-color-error);
3638
- --tds-time-field-description-color:var(--t-text-color-status-error);
3639
- --tds-time-field-description-invalid-icon-display:inline-block;
3640
- }
3641
-
3642
- .tds-time-field[data-disabled]{
3643
- --tds-time-field-border-color:var(--t-form-border-color-disabled);
3644
- --tds-time-field-background-color:var(--t-form-background-color-disabled);
3645
- --tds-time-field-color:var(--t-form-color-disabled);
3646
- --tds-time-field-placeholder-color:var(--t-form-color-disabled);
3647
- }
3648
-
3649
- .tds-time-field[data-disabled] .tds-time-field-label{
3650
- color:var(--t-form-color-disabled);
3651
- }
3652
-
3653
- .tds-time-field[data-disabled] .tds-time-field-input{
3654
- cursor:not-allowed;
3655
- }
3656
-
3657
- .tds-time-field--lg{
3658
- --tds-time-field-min-height:var(--t-container-size-lg);
3659
- --tds-time-field-font-size:var(--t-font-size-lg);
3660
- }
3607
+ .tds-checkbox-group{
3608
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3609
+ --tds-checkbox-group-line-height:1.4;
3610
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3661
3611
 
3662
- .tds-time-field-label{
3663
- font-size:var(--t-font-size-md);
3664
- font-weight:var(--t-font-weight-normal);
3665
- color:var(--t-text-color);
3666
- cursor:default;
3667
- }
3612
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3668
3613
 
3669
- .tds-time-field-input{
3614
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3615
+ --tds-checkbox-group-description-line-height:1.35;
3616
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3617
+ --tds-checkbox-group-description-invalid-icon-display:none;
3670
3618
  display:flex;
3671
- align-items:center;
3672
- inline-size:100%;
3673
- min-block-size:var(--tds-time-field-min-height);
3674
- padding-block:var(--tds-time-field-padding-block);
3675
- padding-inline:var(--t-spacing-1);
3676
- font-family:inherit;
3677
- font-size:var(--tds-time-field-font-size);
3678
- font-variant-numeric:tabular-nums;
3679
- line-height:1;
3680
- color:var(--tds-time-field-color);
3681
- cursor:text;
3682
- outline:var(--t-focus-ring-width) solid transparent;
3683
- outline-offset:0;
3684
- background-color:var(--tds-time-field-background-color);
3685
- border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
3686
- border-radius:var(--t-form-border-radius);
3619
+ flex-direction:column;
3620
+ gap:var(--tds-checkbox-group-gap);
3621
+ padding:0;
3622
+ margin:0;
3623
+
3624
+ font-size:var(--tds-checkbox-group-font-size);
3625
+ line-height:var(--tds-checkbox-group-line-height);
3626
+ border:0;
3687
3627
  }
3688
3628
 
3689
- .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
3690
- border-color:var(--tds-time-field-border-color-hover);
3629
+ .tds-checkbox-group legend{
3630
+ padding:0;
3631
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3691
3632
  }
3692
3633
 
3693
- .tds-time-field-input[data-focus-within]{
3694
- outline-color:var(--t-focus-ring-color);
3695
- outline-offset:var(--t-focus-ring-offset);
3696
- border-color:var(--tds-time-field-border-color-active);
3634
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3635
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3697
3636
  }
3698
3637
 
3699
- .tds-time-field-input[data-readonly]{
3700
- color:var(--t-form-color-readonly);
3701
- background-color:var(--t-form-background-color-readonly);
3702
- border-color:var(--t-form-border-color-readonly);
3638
+ .tds-checkbox-group[aria-invalid="true"]{
3639
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3640
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3703
3641
  }
3704
3642
 
3705
- .tds-time-field-input[data-readonly][data-hovered]{
3706
- border-color:var(--t-form-border-color-readonly);
3643
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3644
+ margin-left:.25ch;
3645
+ color:var(--t-text-color-status-error);
3646
+ content:"*";
3707
3647
  }
3708
3648
 
3709
- .tds-time-field-input[data-readonly][data-focus-within]{
3710
- outline-color:var(--t-focus-ring-color);
3711
- outline-offset:var(--t-focus-ring-offset);
3712
- border-color:var(--t-form-border-color-hover);
3649
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3650
+ content:none;
3713
3651
  }
3714
3652
 
3715
- .tds-time-field-segment{
3716
- padding-inline:1px;
3717
- font-variant-numeric:tabular-nums;
3718
- cursor:text;
3719
- caret-color:transparent;
3720
- border-radius:var(--t-border-radius-sm);
3721
- }
3722
-
3723
- .tds-time-field-segment[data-placeholder]{
3724
- color:var(--tds-time-field-placeholder-color);
3725
- }
3726
-
3727
- .tds-time-field-segment[data-focused]{
3728
- color:var(--t-text-color-inverted);
3729
- outline:0;
3730
- background:var(--t-fill-color-interaction);
3731
- }
3732
-
3733
- .tds-time-field-segment-separator{
3734
- padding-inline:0;
3735
- color:var(--tds-time-field-placeholder-color);
3653
+ .tds-checkbox-group-fields{
3654
+ display:flex;
3655
+ flex-direction:column;
3656
+ gap:var(--tds-checkbox-group-gap);
3657
+ align-items:flex-start;
3736
3658
  }
3737
3659
 
3738
- .tds-time-field-description{
3660
+ .tds-checkbox-group-description{
3739
3661
  display:flex;
3740
3662
  gap:var(--t-spacing-half);
3741
3663
  align-items:flex-start;
3742
3664
  margin:0;
3743
- font-size:var(--t-font-size-sm);
3744
- line-height:1.35;
3745
- color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
3665
+ font-size:var(--tds-checkbox-group-description-font-size);
3666
+ line-height:var(--tds-checkbox-group-description-line-height);
3667
+ color:var(--tds-checkbox-group-description-color);
3746
3668
  cursor:text;
3747
3669
  }
3748
3670
 
3749
- .tds-time-field-description .tds-time-field-description-invalid-icon{
3750
- display:var(--tds-time-field-description-invalid-icon-display, none);
3671
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3672
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3751
3673
  flex-shrink:0;
3752
- margin-block-start:calc(.5lh - .5em);
3753
- line-height:1.35;
3674
+ margin-top:calc(.5lh - .5em);
3675
+ line-height:var(--tds-checkbox-group-description-line-height);
3754
3676
  }
3755
3677
 
3678
+ .tds-checkbox-group--sm{
3679
+ --tds-checkbox-group-line-height:1.35;
3680
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3681
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3682
+ --tds-checkbox-group-description-line-height:1.3;
3683
+ }
3684
+
3756
3685
  .tds-date-picker{
3757
3686
  --tds-date-picker-border-color:var(--t-form-border-color);
3758
3687
  --tds-date-picker-border-color-hover:var(--t-form-border-color-hover);
@@ -4163,84 +4092,154 @@ a[class="tds-btn"]{
4163
4092
  color:var(--t-text-color-secondary);
4164
4093
  }
4165
4094
 
4166
- .tds-checkbox-group{
4167
- --tds-checkbox-group-font-size:var(--t-font-size-md);
4168
- --tds-checkbox-group-line-height:1.4;
4169
- --tds-checkbox-group-gap:var(--t-spacing-1);
4170
-
4171
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
4095
+ .tds-time-field{
4096
+ --tds-time-field-border-color:var(--t-form-border-color);
4097
+ --tds-time-field-border-color-hover:var(--t-form-border-color-hover);
4098
+ --tds-time-field-border-color-active:var(--t-form-border-color-focus);
4099
+ --tds-time-field-background-color:var(--t-form-background-color);
4100
+ --tds-time-field-color:var(--t-form-color);
4101
+ --tds-time-field-placeholder-color:var(--t-form-placeholder-color);
4102
+ --tds-time-field-font-size:var(--t-font-size-md);
4103
+ --tds-time-field-min-height:var(--t-container-size-md);
4104
+ --tds-time-field-padding-block:6px;
4105
+ --tds-time-field-description-color:var(--t-text-color-secondary);
4106
+ --tds-time-field-description-invalid-icon-display:none;
4172
4107
 
4173
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
4174
- --tds-checkbox-group-description-line-height:1.35;
4175
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
4176
- --tds-checkbox-group-description-invalid-icon-display:none;
4108
+ position:relative;
4177
4109
  display:flex;
4178
4110
  flex-direction:column;
4179
- gap:var(--tds-checkbox-group-gap);
4180
- padding:0;
4181
- margin:0;
4182
-
4183
- font-size:var(--tds-checkbox-group-font-size);
4184
- line-height:var(--tds-checkbox-group-line-height);
4185
- border:0;
4111
+ gap:var(--t-spacing-half);
4186
4112
  }
4187
4113
 
4188
- .tds-checkbox-group legend{
4189
- padding:0;
4190
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
4114
+ .tds-time-field[data-required] .tds-time-field-label::after{
4115
+ margin-left:.25ch;
4116
+ color:var(--t-text-color-status-error);
4117
+ content:"*";
4191
4118
  }
4192
4119
 
4193
- .tds-checkbox-group:has(.tds-checkbox-group-description){
4194
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
4120
+ .tds-time-field[data-invalid]{
4121
+ --tds-time-field-border-color:var(--t-form-border-color-error);
4122
+ --tds-time-field-border-color-hover:var(--t-form-border-color-error-hover);
4123
+ --tds-time-field-border-color-active:var(--t-form-border-color-error-hover);
4124
+ --tds-time-field-background-color:var(--t-form-background-color-error);
4125
+ --tds-time-field-description-color:var(--t-text-color-status-error);
4126
+ --tds-time-field-description-invalid-icon-display:inline-block;
4195
4127
  }
4196
4128
 
4197
- .tds-checkbox-group[aria-invalid="true"]{
4198
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
4199
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
4129
+ .tds-time-field[data-disabled]{
4130
+ --tds-time-field-border-color:var(--t-form-border-color-disabled);
4131
+ --tds-time-field-background-color:var(--t-form-background-color-disabled);
4132
+ --tds-time-field-color:var(--t-form-color-disabled);
4133
+ --tds-time-field-placeholder-color:var(--t-form-color-disabled);
4200
4134
  }
4201
4135
 
4202
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
4203
- margin-left:.25ch;
4204
- color:var(--t-text-color-status-error);
4205
- content:"*";
4136
+ .tds-time-field[data-disabled] .tds-time-field-label{
4137
+ color:var(--t-form-color-disabled);
4206
4138
  }
4207
4139
 
4208
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
4209
- content:none;
4140
+ .tds-time-field[data-disabled] .tds-time-field-input{
4141
+ cursor:not-allowed;
4210
4142
  }
4211
4143
 
4212
- .tds-checkbox-group-fields{
4144
+ .tds-time-field--lg{
4145
+ --tds-time-field-min-height:var(--t-container-size-lg);
4146
+ --tds-time-field-font-size:var(--t-font-size-lg);
4147
+ }
4148
+
4149
+ .tds-time-field-label{
4150
+ font-size:var(--t-font-size-md);
4151
+ font-weight:var(--t-font-weight-normal);
4152
+ color:var(--t-text-color);
4153
+ cursor:default;
4154
+ }
4155
+
4156
+ .tds-time-field-input{
4213
4157
  display:flex;
4214
- flex-direction:column;
4215
- gap:var(--tds-checkbox-group-gap);
4216
- align-items:flex-start;
4158
+ align-items:center;
4159
+ inline-size:100%;
4160
+ min-block-size:var(--tds-time-field-min-height);
4161
+ padding-block:var(--tds-time-field-padding-block);
4162
+ padding-inline:var(--t-spacing-1);
4163
+ font-family:inherit;
4164
+ font-size:var(--tds-time-field-font-size);
4165
+ font-variant-numeric:tabular-nums;
4166
+ line-height:1;
4167
+ color:var(--tds-time-field-color);
4168
+ cursor:text;
4169
+ outline:var(--t-focus-ring-width) solid transparent;
4170
+ outline-offset:0;
4171
+ background-color:var(--tds-time-field-background-color);
4172
+ border:var(--t-form-border-width) solid var(--tds-time-field-border-color);
4173
+ border-radius:var(--t-form-border-radius);
4217
4174
  }
4218
4175
 
4219
- .tds-checkbox-group-description{
4176
+ .tds-time-field-input[data-hovered]:not([data-focus-visible],[data-focused],[data-disabled]){
4177
+ border-color:var(--tds-time-field-border-color-hover);
4178
+ }
4179
+
4180
+ .tds-time-field-input[data-focus-within]{
4181
+ outline-color:var(--t-focus-ring-color);
4182
+ outline-offset:var(--t-focus-ring-offset);
4183
+ border-color:var(--tds-time-field-border-color-active);
4184
+ }
4185
+
4186
+ .tds-time-field-input[data-readonly]{
4187
+ color:var(--t-form-color-readonly);
4188
+ background-color:var(--t-form-background-color-readonly);
4189
+ border-color:var(--t-form-border-color-readonly);
4190
+ }
4191
+
4192
+ .tds-time-field-input[data-readonly][data-hovered]{
4193
+ border-color:var(--t-form-border-color-readonly);
4194
+ }
4195
+
4196
+ .tds-time-field-input[data-readonly][data-focus-within]{
4197
+ outline-color:var(--t-focus-ring-color);
4198
+ outline-offset:var(--t-focus-ring-offset);
4199
+ border-color:var(--t-form-border-color-hover);
4200
+ }
4201
+
4202
+ .tds-time-field-segment{
4203
+ padding-inline:1px;
4204
+ font-variant-numeric:tabular-nums;
4205
+ cursor:text;
4206
+ caret-color:transparent;
4207
+ border-radius:var(--t-border-radius-sm);
4208
+ }
4209
+
4210
+ .tds-time-field-segment[data-placeholder]{
4211
+ color:var(--tds-time-field-placeholder-color);
4212
+ }
4213
+
4214
+ .tds-time-field-segment[data-focused]{
4215
+ color:var(--t-text-color-inverted);
4216
+ outline:0;
4217
+ background:var(--t-fill-color-interaction);
4218
+ }
4219
+
4220
+ .tds-time-field-segment-separator{
4221
+ padding-inline:0;
4222
+ color:var(--tds-time-field-placeholder-color);
4223
+ }
4224
+
4225
+ .tds-time-field-description{
4220
4226
  display:flex;
4221
4227
  gap:var(--t-spacing-half);
4222
4228
  align-items:flex-start;
4223
4229
  margin:0;
4224
- font-size:var(--tds-checkbox-group-description-font-size);
4225
- line-height:var(--tds-checkbox-group-description-line-height);
4226
- color:var(--tds-checkbox-group-description-color);
4230
+ font-size:var(--t-font-size-sm);
4231
+ line-height:1.35;
4232
+ color:var(--tds-time-field-description-color, var(--t-text-color-secondary));
4227
4233
  cursor:text;
4228
4234
  }
4229
4235
 
4230
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
4231
- display:var(--tds-checkbox-group-description-invalid-icon-display);
4236
+ .tds-time-field-description .tds-time-field-description-invalid-icon{
4237
+ display:var(--tds-time-field-description-invalid-icon-display, none);
4232
4238
  flex-shrink:0;
4233
- margin-top:calc(.5lh - .5em);
4234
- line-height:var(--tds-checkbox-group-description-line-height);
4239
+ margin-block-start:calc(.5lh - .5em);
4240
+ line-height:1.35;
4235
4241
  }
4236
4242
 
4237
- .tds-checkbox-group--sm{
4238
- --tds-checkbox-group-line-height:1.35;
4239
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
4240
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
4241
- --tds-checkbox-group-description-line-height:1.3;
4242
- }
4243
-
4244
4243
  .tds-number-stepper{
4245
4244
  --tds-number-stepper-border-color:var(--t-form-border-color);
4246
4245
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);