@planningcenter/tapestry 3.2.2-rc.8 → 3.2.2-rc.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/reactRender.css +738 -738
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +738 -738
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,628 +1,628 @@
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;
231
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
232
+ width:auto;
318
233
  }
319
234
 
320
- .tds-sidenav-collapse:not(:popover-open){
321
- opacity:var(--tds-sidenav-collapse-closed-opacity);
322
- transition:var(--tds-sidenav-collapse-transition-exit);
235
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
236
+ justify-content:flex-end;
323
237
  }
238
+ }
324
239
 
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
- }
240
+ .tds-page-header-phone,
241
+ .tds-page-header-email{
242
+ color:var(--tds-page-header-color);
243
+ white-space:nowrap;
244
+ }
245
+
246
+ .tds-page-header-email{
247
+ max-width:100%;
248
+ overflow:hidden;
249
+ text-overflow:ellipsis;
250
+ }
251
+
252
+ @keyframes indicator-pulse{
253
+ 0%{
254
+ opacity:.3;
255
+ transform:scale(.9);
331
256
  }
332
- @supports not selector(:popover-open){
333
- .tds-sidenav-collapse.\:popover-open{
334
- display:flex;
335
- }
336
257
 
337
- .tds-sidenav-collapse:not(.\:popover-open){
338
- opacity:var(--tds-sidenav-collapse-closed-opacity);
339
- transition:var(--tds-sidenav-collapse-transition-exit);
340
- }
258
+ 100%{
259
+ opacity:0;
260
+ transform:scale(1.75);
341
261
  }
342
262
  }
343
263
 
344
- @media (min-width: 720px){
345
- .tds-sidenav-responsive-header{
346
- display:none;
347
- }
264
+
265
+ @media (prefers-reduced-motion: no-preference){
266
+
267
+ :root{
268
+ interpolate-size:allow-keywords;
348
269
  }
270
+ }
349
271
 
350
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
351
- display:none;
352
- }
272
+ @layer tds-component{
273
+ tds-sidenav,
274
+ .tds-sidenav{
275
+ --tds-sidenav-indent:12px;
276
+ --tds-sidenav-item-depth:0;
353
277
 
354
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
355
- display:block;
356
- }
278
+ --tds-sidenav-item-transition:background-color var(--t-duration-200) var(--t-ease-in-out);
357
279
 
358
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
359
- display:flex;
360
- flex-direction:column;
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);
286
+
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
+ }
361
312
  }
362
313
 
363
- @layer t-critical{
364
- tds-page-header:not(.hydrated){
365
- display:none;
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);
366
320
  }
367
321
  }
368
322
 
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);
323
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
324
+ display:flex;
325
+ }
390
326
 
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);
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
+ }
394
332
 
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);
333
+ .tds-sidenav-section-list{
334
+ width:100%;
335
+ padding:0;
336
+ margin:0;
337
+ list-style:none;
338
+ }
397
339
 
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);
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
+ }
401
346
 
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);
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;
407
354
  }
408
355
 
409
- .tds-page-header--profile{
410
- --tds-page-header-padding-y:20px;
356
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
357
+ padding-top:0;
411
358
  }
412
359
 
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));
417
- }
360
+ .tds-sidenav-section-header [slot="label-actions"]{
361
+ display:flex;
362
+ gap:var(--t-spacing-half);
363
+ align-items:center;
418
364
  }
419
365
 
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);
437
- }
438
- }
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;
439
372
  }
440
373
 
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);
374
+ .tds-sidenav-section-list,
375
+ .tds-sidenav-item{
376
+ width:100%;
377
+ padding:0;
378
+ margin:0;
448
379
  }
449
380
 
450
- .tds-page-header:not(.has-nav){
451
- padding-bottom:var(--tds-page-header-padding-y);
452
- }
381
+ .tds-sidenav-item :is(a,button){
382
+ position:relative;
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;
394
+ -webkit-appearance:none;
395
+ -moz-appearance:none;
396
+ appearance:none;
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);
402
+ }
403
+
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;
411
+ }
412
+
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;
417
+ }
418
+
419
+ :is(.tds-sidenav-item :is(a,button)):active{
420
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
421
+ }
422
+
423
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
424
+ overflow:hidden;
425
+ color:var(--tds-sidenav-item-icon-color);
426
+ }
427
+
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
+ }
433
+
434
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
435
+ --tds-sidenav-indent:19px;
436
+ }
437
+
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;
442
+ }
443
+
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);
453
447
 
454
- .tds-page-header.inactive{
455
- background:var(--tds-page-header-background-color-inactive);
448
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
449
+ font-weight:var(--t-font-weight-semibold);
456
450
  }
457
451
 
458
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
459
- width:100%;
452
+ .tds-sidenav-item:has(.tds-sidenav-section){
453
+ display:flex;
454
+ flex-direction:column;
455
+ gap:var(--t-spacing-half);
460
456
  }
461
457
 
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;
458
+ .tds-sidenav-item .tds-sidenav-section-list{
459
+ --tds-sidenav-item-depth:1;
460
+ gap:0;
469
461
  }
470
462
 
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);
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);
479
469
  }
480
470
 
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;
471
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
472
+ --tds-sidenav-item-depth:2;
500
473
  }
501
474
 
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);
507
- }
508
-
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
- }
514
-
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
- }
519
-
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
- }
526
-
527
- :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
528
- position:relative;
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;
529
481
  }
530
482
 
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);
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);
534
492
  }
535
493
 
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{
494
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
537
495
  position:absolute;
538
- top:-5px;
539
- right:-2px;
540
- width:10px;
541
- height:10px;
496
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
497
+ z-index:-1;
498
+ height:100%;
542
499
  content:"";
543
- background:var(--tds-page-header-nav-item-indicator-color);
544
- border-radius:50%;
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);
545
503
  }
546
504
 
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
- }
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;
551
509
  }
552
510
 
553
- .tds-page-header__title-bar{
554
- display:flex;
555
- 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
- }
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
+ }
561
515
 
562
- .tds-page-header--profile > .tds-page-header__title-bar{
563
- align-items:center;
564
- }
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
+ }
565
519
 
566
- .tds-page-header__primary{
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);
523
+ }
524
+
525
+ .tds-sidenav-responsive-header{
526
+ display:flex;
527
+ gap:var(--t-spacing-2);
528
+ align-items:center;
567
529
  width:100%;
568
530
  }
569
531
 
570
- .tds-page-header__primary h1{
532
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
533
+ order:0;
534
+ }
535
+
536
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
537
+ flex:1;
538
+ order:1;
571
539
  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;
540
+ font-size:var(--t-font-size-lg);
541
+ font-weight:var(--t-font-weight-medium);
542
+ color:var(--t-text-color-headline);
577
543
  }
578
544
 
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%;
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;
585
563
  }
586
564
 
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;
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;
592
573
  }
593
- .tds-page-header :is([slot="actions"],.tds-page-header__actions){
594
- width:auto;
595
- }
596
574
 
597
- .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
598
- justify-content:flex-end;
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;
599
581
  }
600
- }
601
582
 
602
- .tds-page-header-phone,
603
- .tds-page-header-email{
604
- color:var(--tds-page-header-color);
605
- white-space:nowrap;
606
- }
583
+ .tds-sidenav-collapse:not(:popover-open){
584
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
585
+ transition:var(--tds-sidenav-collapse-transition-exit);
586
+ }
607
587
 
608
- .tds-page-header-email{
609
- max-width:100%;
610
- overflow:hidden;
611
- text-overflow:ellipsis;
612
- }
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
+ }
594
+ }
595
+ @supports not selector(:popover-open){
596
+ .tds-sidenav-collapse.\:popover-open{
597
+ display:flex;
598
+ }
613
599
 
614
- @keyframes indicator-pulse{
615
- 0%{
616
- opacity:.3;
617
- transform:scale(.9);
600
+ .tds-sidenav-collapse:not(.\:popover-open){
601
+ opacity:var(--tds-sidenav-collapse-closed-opacity);
602
+ transition:var(--tds-sidenav-collapse-transition-exit);
603
+ }
618
604
  }
605
+ }
619
606
 
620
- 100%{
621
- opacity:0;
622
- transform:scale(1.75);
607
+ @media (min-width: 720px){
608
+ .tds-sidenav-responsive-header{
609
+ display:none;
623
610
  }
624
611
  }
625
612
 
613
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
614
+ display:none;
615
+ }
616
+
617
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
618
+ display:block;
619
+ }
620
+
621
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
622
+ display:flex;
623
+ flex-direction:column;
624
+ }
625
+
626
626
 
627
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
628
  -webkit-appearance:none;
@@ -946,91 +946,136 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
946
946
  }
947
947
  }
948
948
 
949
- .tds-radio-group{
950
- --tds-radio-group-font-size:var(--t-font-size-md);
951
- --tds-radio-group-line-height:1.4;
952
- --tds-radio-group-gap:var(--t-spacing-1);
949
+ .tds-radio{
950
+ --tds-radio-font-size:var(--t-font-size-md);
951
+ --tds-radio-cursor:pointer;
952
+ --tds-radio-line-height:1.4;
953
+ --tds-radio-transition-property:border-width;
953
954
 
954
- --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
955
+ --tds-radio-input-size:var(--t-element-size-md);
956
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
957
+ --tds-radio-input-border-color:var(--t-form-border-color);
958
+ --tds-radio-input-border-width:var(--t-form-border-width);
959
+ --tds-radio-input-background-color:transparent;
955
960
 
956
- --tds-radio-group-description-font-size:var(--t-font-size-sm);
957
- --tds-radio-group-description-line-height:1.35;
958
- --tds-radio-group-description-color:var(--t-text-color-secondary);
959
- --tds-radio-group-description-invalid-icon-display:none;
960
- display:flex;
961
- flex-direction:column;
962
- gap:var(--tds-radio-group-gap);
963
- padding:0;
964
- margin:0;
961
+ --tds-radio-label-color:var(--t-form-color);
965
962
 
966
- font-size:var(--tds-radio-group-font-size);
967
- line-height:var(--tds-radio-group-line-height);
968
- border:0;
963
+ --tds-radio-description-font-size:var(--t-font-size-sm);
964
+ --tds-radio-description-line-height:1.35;
965
+ --tds-radio-description-color:var(--t-text-color-secondary);
966
+
967
+ position:relative;
968
+ display:inline-grid;
969
+ grid-template-columns:auto;
970
+ grid-auto-columns:1fr;
971
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
972
+ line-height:var(--tds-radio-line-height);
973
+ cursor:var(--tds-radio-cursor);
974
+ -webkit-user-select:none;
975
+ -moz-user-select:none;
976
+ user-select:none;
969
977
  }
970
978
 
971
- .tds-radio-group legend{
972
- padding:0;
973
- margin-bottom:var(--tds-radio-group-legend-margin-bottom);
979
+ .tds-radio label{
980
+ grid-area:1 / 2;
981
+ font-size:var(--tds-radio-font-size);
982
+ font-weight:var(--t-font-weight-normal);
983
+ color:var(--tds-radio-label-color);
984
+ cursor:var(--tds-radio-cursor);
974
985
  }
975
986
 
976
- .tds-radio-group:has(.tds-radio-group-description){
977
- --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
987
+ .tds-radio input[type="radio"]{
988
+ position:relative;
989
+ width:1em;
990
+ height:1em;
991
+ margin:calc((1lh - 1em) / 2) 0 0;
992
+ font-size:var(--tds-radio-font-size);
993
+ line-height:inherit;
994
+ -webkit-appearance:none;
995
+ -moz-appearance:none;
996
+ appearance:none;
997
+ cursor:var(--tds-radio-cursor);
998
+ background-color:var(--tds-radio-input-background-color);
999
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1000
+ border-radius:var(--tds-radio-input-border-radius);
1001
+ transition-timing-function:var(--t-ease-in-out);
1002
+ transition-duration:var(--t-duration-200);
1003
+ transition-property:var(--tds-radio-transition-property);
978
1004
  }
979
1005
 
980
- .tds-radio-group[aria-invalid="true"]{
981
- --tds-radio-group-description-color:var(--t-text-color-status-error);
982
- --tds-radio-group-description-invalid-icon-display:inline-block;
983
- }
1006
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1007
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1008
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1009
+ }
984
1010
 
985
- .tds-radio-group[aria-invalid="true"] .tds-radio{
986
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1011
+ :is(.tds-radio input[type="radio"]):focus-visible{
1012
+ outline:var(--t-focus-ring-outline);
1013
+ outline-offset:var(--t-focus-ring-offset);
987
1014
  }
988
1015
 
989
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
990
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
991
- --tds-radio-input-background-color:var(--t-form-background-color-error);
992
- }
1016
+ :is(.tds-radio input[type="radio"]):disabled{
1017
+ pointer-events:none;
1018
+ }
993
1019
 
994
- :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
995
- --tds-radio-input-background-color:var(--t-form-background-color);
996
- }
1020
+ @media (prefers-reduced-motion: reduce){
997
1021
 
998
- .tds-radio-group:has(input:required) legend::after{
999
- margin-left:.25ch;
1000
- color:var(--t-text-color-status-error);
1001
- content:"*";
1022
+ .tds-radio input[type="radio"]{
1023
+ --tds-radio-transition-property:none;
1024
+ }
1002
1025
  }
1003
1026
 
1004
- .tds-radio-group-fields{
1005
- display:flex;
1006
- flex-direction:column;
1007
- gap:var(--tds-radio-group-gap);
1008
- align-items:flex-start;
1009
- }
1027
+ .tds-radio:has(input:checked){
1028
+ --tds-radio-input-background-color:var(--t-form-background-color);
1029
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
1030
+ --tds-radio-input-border-width:4px;
1031
+ }
1010
1032
 
1011
- .tds-radio-group-description{
1033
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
1034
+ --tds-radio-input-background-color:var(--t-form-background-color);
1035
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1036
+ }
1037
+
1038
+ .tds-radio:has(input:user-invalid){
1039
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1040
+ }
1041
+
1042
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1043
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1044
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1045
+ }
1046
+
1047
+ .tds-radio:has(input:disabled){
1048
+ --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1049
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1050
+
1051
+ --tds-radio-label-color:var(--t-form-color-disabled);
1052
+ --tds-radio-description-color:var(--t-form-color-disabled);
1053
+ --tds-radio-cursor:not-allowed;
1054
+ }
1055
+
1056
+ .tds-radio:has(input:disabled) input:checked{
1057
+ --tds-radio-input-background-color:var(--t-form-background-color);
1058
+ --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1059
+ }
1060
+
1061
+ .tds-radio-description{
1012
1062
  display:flex;
1063
+ grid-area:2 / 2;
1013
1064
  gap:var(--t-spacing-half);
1014
1065
  align-items:flex-start;
1015
1066
  margin:0;
1016
- font-size:var(--tds-radio-group-description-font-size);
1017
- line-height:var(--tds-radio-group-description-line-height);
1018
- color:var(--tds-radio-group-description-color);
1067
+ font-size:var(--tds-radio-description-font-size);
1068
+ line-height:var(--tds-radio-description-line-height);
1069
+ color:var(--tds-radio-description-color);
1019
1070
  cursor:text;
1020
1071
  }
1021
1072
 
1022
- .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1023
- display:var(--tds-radio-group-description-invalid-icon-display);
1024
- flex-shrink:0;
1025
- margin-top:calc(.5lh - .5em);
1026
- line-height:var(--tds-radio-group-description-line-height);
1027
- }
1028
-
1029
- .tds-radio-group--sm{
1030
- --tds-radio-group-line-height:1.35;
1031
- --tds-radio-group-font-size:var(--t-font-size-sm);
1032
- --tds-radio-group-description-font-size:var(--t-font-size-xs);
1033
- --tds-radio-group-description-line-height:1.3;
1073
+ .tds-radio--sm{
1074
+ --tds-radio-line-height:1.35;
1075
+ --tds-radio-input-size:var(--t-element-size-sm);
1076
+ --tds-radio-font-size:var(--t-font-size-sm);
1077
+ --tds-radio-description-font-size:var(--t-font-size-xs);
1078
+ --tds-radio-description-line-height:1.3;
1034
1079
  }
1035
1080
 
1036
1081
  .tds-toggle-switch{
@@ -1174,136 +1219,91 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1174
1219
  --tds-toggle-switch-display:inline-flex;
1175
1220
  }
1176
1221
 
1177
- .tds-radio{
1178
- --tds-radio-font-size:var(--t-font-size-md);
1179
- --tds-radio-cursor:pointer;
1180
- --tds-radio-line-height:1.4;
1181
- --tds-radio-transition-property:border-width;
1182
-
1183
- --tds-radio-input-size:var(--t-element-size-md);
1184
- --tds-radio-input-border-radius:var(--t-border-radius-round);
1185
- --tds-radio-input-border-color:var(--t-form-border-color);
1186
- --tds-radio-input-border-width:var(--t-form-border-width);
1187
- --tds-radio-input-background-color:transparent;
1188
-
1189
- --tds-radio-label-color:var(--t-form-color);
1190
-
1191
- --tds-radio-description-font-size:var(--t-font-size-sm);
1192
- --tds-radio-description-line-height:1.35;
1193
- --tds-radio-description-color:var(--t-text-color-secondary);
1194
-
1195
- position:relative;
1196
- display:inline-grid;
1197
- grid-template-columns:auto;
1198
- grid-auto-columns:1fr;
1199
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
1200
- line-height:var(--tds-radio-line-height);
1201
- cursor:var(--tds-radio-cursor);
1202
- -webkit-user-select:none;
1203
- -moz-user-select:none;
1204
- user-select:none;
1205
- }
1206
-
1207
- .tds-radio label{
1208
- grid-area:1 / 2;
1209
- font-size:var(--tds-radio-font-size);
1210
- font-weight:var(--t-font-weight-normal);
1211
- color:var(--tds-radio-label-color);
1212
- cursor:var(--tds-radio-cursor);
1213
- }
1214
-
1215
- .tds-radio input[type="radio"]{
1216
- position:relative;
1217
- width:1em;
1218
- height:1em;
1219
- margin:calc((1lh - 1em) / 2) 0 0;
1220
- font-size:var(--tds-radio-font-size);
1221
- line-height:inherit;
1222
- -webkit-appearance:none;
1223
- -moz-appearance:none;
1224
- appearance:none;
1225
- cursor:var(--tds-radio-cursor);
1226
- background-color:var(--tds-radio-input-background-color);
1227
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
1228
- border-radius:var(--tds-radio-input-border-radius);
1229
- transition-timing-function:var(--t-ease-in-out);
1230
- transition-duration:var(--t-duration-200);
1231
- transition-property:var(--tds-radio-transition-property);
1232
- }
1233
-
1234
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
1235
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1236
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1237
- }
1222
+ .tds-radio-group{
1223
+ --tds-radio-group-font-size:var(--t-font-size-md);
1224
+ --tds-radio-group-line-height:1.4;
1225
+ --tds-radio-group-gap:var(--t-spacing-1);
1238
1226
 
1239
- :is(.tds-radio input[type="radio"]):focus-visible{
1240
- outline:var(--t-focus-ring-outline);
1241
- outline-offset:var(--t-focus-ring-offset);
1242
- }
1227
+ --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
1243
1228
 
1244
- :is(.tds-radio input[type="radio"]):disabled{
1245
- pointer-events:none;
1246
- }
1229
+ --tds-radio-group-description-font-size:var(--t-font-size-sm);
1230
+ --tds-radio-group-description-line-height:1.35;
1231
+ --tds-radio-group-description-color:var(--t-text-color-secondary);
1232
+ --tds-radio-group-description-invalid-icon-display:none;
1233
+ display:flex;
1234
+ flex-direction:column;
1235
+ gap:var(--tds-radio-group-gap);
1236
+ padding:0;
1237
+ margin:0;
1247
1238
 
1248
- @media (prefers-reduced-motion: reduce){
1239
+ font-size:var(--tds-radio-group-font-size);
1240
+ line-height:var(--tds-radio-group-line-height);
1241
+ border:0;
1242
+ }
1249
1243
 
1250
- .tds-radio input[type="radio"]{
1251
- --tds-radio-transition-property:none;
1244
+ .tds-radio-group legend{
1245
+ padding:0;
1246
+ margin-bottom:var(--tds-radio-group-legend-margin-bottom);
1252
1247
  }
1253
- }
1254
1248
 
1255
- .tds-radio:has(input:checked){
1256
- --tds-radio-input-background-color:var(--t-form-background-color);
1257
- --tds-radio-input-border-color:var(--t-border-color-control-info);
1258
- --tds-radio-input-border-width:4px;
1249
+ .tds-radio-group:has(.tds-radio-group-description){
1250
+ --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
1259
1251
  }
1260
1252
 
1261
- .tds-radio:has(input:checked) input:hover:not(:disabled){
1262
- --tds-radio-input-background-color:var(--t-form-background-color);
1263
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
1264
- }
1265
-
1266
- .tds-radio:has(input:user-invalid){
1267
- --tds-radio-input-border-color:var(--t-form-border-color-error);
1253
+ .tds-radio-group[aria-invalid="true"]{
1254
+ --tds-radio-group-description-color:var(--t-text-color-status-error);
1255
+ --tds-radio-group-description-invalid-icon-display:inline-block;
1268
1256
  }
1269
1257
 
1270
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
1271
- --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1272
- --tds-radio-input-background-color:var(--t-form-background-color-error);
1258
+ .tds-radio-group[aria-invalid="true"] .tds-radio{
1259
+ --tds-radio-input-border-color:var(--t-form-border-color-error);
1273
1260
  }
1274
1261
 
1275
- .tds-radio:has(input:disabled){
1276
- --tds-radio-input-background-color:var(--t-form-background-color-disabled);
1277
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1262
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
1263
+ --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
1264
+ --tds-radio-input-background-color:var(--t-form-background-color-error);
1265
+ }
1278
1266
 
1279
- --tds-radio-label-color:var(--t-form-color-disabled);
1280
- --tds-radio-description-color:var(--t-form-color-disabled);
1281
- --tds-radio-cursor:not-allowed;
1282
- }
1267
+ :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
1268
+ --tds-radio-input-background-color:var(--t-form-background-color);
1269
+ }
1283
1270
 
1284
- .tds-radio:has(input:disabled) input:checked{
1285
- --tds-radio-input-background-color:var(--t-form-background-color);
1286
- --tds-radio-input-border-color:var(--t-form-border-color-disabled);
1271
+ .tds-radio-group:has(input:required) legend::after{
1272
+ margin-left:.25ch;
1273
+ color:var(--t-text-color-status-error);
1274
+ content:"*";
1287
1275
  }
1288
1276
 
1289
- .tds-radio-description{
1277
+ .tds-radio-group-fields{
1278
+ display:flex;
1279
+ flex-direction:column;
1280
+ gap:var(--tds-radio-group-gap);
1281
+ align-items:flex-start;
1282
+ }
1283
+
1284
+ .tds-radio-group-description{
1290
1285
  display:flex;
1291
- grid-area:2 / 2;
1292
1286
  gap:var(--t-spacing-half);
1293
1287
  align-items:flex-start;
1294
1288
  margin:0;
1295
- font-size:var(--tds-radio-description-font-size);
1296
- line-height:var(--tds-radio-description-line-height);
1297
- color:var(--tds-radio-description-color);
1289
+ font-size:var(--tds-radio-group-description-font-size);
1290
+ line-height:var(--tds-radio-group-description-line-height);
1291
+ color:var(--tds-radio-group-description-color);
1298
1292
  cursor:text;
1299
1293
  }
1300
1294
 
1301
- .tds-radio--sm{
1302
- --tds-radio-line-height:1.35;
1303
- --tds-radio-input-size:var(--t-element-size-sm);
1304
- --tds-radio-font-size:var(--t-font-size-sm);
1305
- --tds-radio-description-font-size:var(--t-font-size-xs);
1306
- --tds-radio-description-line-height:1.3;
1295
+ .tds-radio-group-description .tds-radio-group-description-invalid-icon{
1296
+ display:var(--tds-radio-group-description-invalid-icon-display);
1297
+ flex-shrink:0;
1298
+ margin-top:calc(.5lh - .5em);
1299
+ line-height:var(--tds-radio-group-description-line-height);
1300
+ }
1301
+
1302
+ .tds-radio-group--sm{
1303
+ --tds-radio-group-line-height:1.35;
1304
+ --tds-radio-group-font-size:var(--t-font-size-sm);
1305
+ --tds-radio-group-description-font-size:var(--t-font-size-xs);
1306
+ --tds-radio-group-description-line-height:1.3;
1307
1307
  }
1308
1308
 
1309
1309
  .tds-select{
@@ -3323,6 +3323,84 @@ a[class="tds-btn"]{
3323
3323
  @media (prefers-color-scheme: dark){
3324
3324
  }
3325
3325
 
3326
+ .tds-checkbox-group{
3327
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
3328
+ --tds-checkbox-group-line-height:1.4;
3329
+ --tds-checkbox-group-gap:var(--t-spacing-1);
3330
+
3331
+ --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3332
+
3333
+ --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3334
+ --tds-checkbox-group-description-line-height:1.35;
3335
+ --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3336
+ --tds-checkbox-group-description-invalid-icon-display:none;
3337
+ display:flex;
3338
+ flex-direction:column;
3339
+ gap:var(--tds-checkbox-group-gap);
3340
+ padding:0;
3341
+ margin:0;
3342
+
3343
+ font-size:var(--tds-checkbox-group-font-size);
3344
+ line-height:var(--tds-checkbox-group-line-height);
3345
+ border:0;
3346
+ }
3347
+
3348
+ .tds-checkbox-group legend{
3349
+ padding:0;
3350
+ margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3351
+ }
3352
+
3353
+ .tds-checkbox-group:has(.tds-checkbox-group-description){
3354
+ --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3355
+ }
3356
+
3357
+ .tds-checkbox-group[aria-invalid="true"]{
3358
+ --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3359
+ --tds-checkbox-group-description-invalid-icon-display:inline-block;
3360
+ }
3361
+
3362
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3363
+ margin-left:.25ch;
3364
+ color:var(--t-text-color-status-error);
3365
+ content:"*";
3366
+ }
3367
+
3368
+ .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3369
+ content:none;
3370
+ }
3371
+
3372
+ .tds-checkbox-group-fields{
3373
+ display:flex;
3374
+ flex-direction:column;
3375
+ gap:var(--tds-checkbox-group-gap);
3376
+ align-items:flex-start;
3377
+ }
3378
+
3379
+ .tds-checkbox-group-description{
3380
+ display:flex;
3381
+ gap:var(--t-spacing-half);
3382
+ align-items:flex-start;
3383
+ margin:0;
3384
+ font-size:var(--tds-checkbox-group-description-font-size);
3385
+ line-height:var(--tds-checkbox-group-description-line-height);
3386
+ color:var(--tds-checkbox-group-description-color);
3387
+ cursor:text;
3388
+ }
3389
+
3390
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3391
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
3392
+ flex-shrink:0;
3393
+ margin-top:calc(.5lh - .5em);
3394
+ line-height:var(--tds-checkbox-group-description-line-height);
3395
+ }
3396
+
3397
+ .tds-checkbox-group--sm{
3398
+ --tds-checkbox-group-line-height:1.35;
3399
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
3400
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3401
+ --tds-checkbox-group-description-line-height:1.3;
3402
+ }
3403
+
3326
3404
  .tds-combo-box{
3327
3405
  --tds-combo-box-border-color:var(--t-form-border-color);
3328
3406
  --tds-combo-box-border-color-hover:var(--t-form-border-color-hover);
@@ -3910,84 +3988,6 @@ a[class="tds-btn"]{
3910
3988
  color:var(--t-text-color-secondary);
3911
3989
  }
3912
3990
 
3913
- .tds-checkbox-group{
3914
- --tds-checkbox-group-font-size:var(--t-font-size-md);
3915
- --tds-checkbox-group-line-height:1.4;
3916
- --tds-checkbox-group-gap:var(--t-spacing-1);
3917
-
3918
- --tds-checkbox-group-legend-margin-bottom:var(--tds-checkbox-group-gap);
3919
-
3920
- --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
3921
- --tds-checkbox-group-description-line-height:1.35;
3922
- --tds-checkbox-group-description-color:var(--t-text-color-secondary);
3923
- --tds-checkbox-group-description-invalid-icon-display:none;
3924
- display:flex;
3925
- flex-direction:column;
3926
- gap:var(--tds-checkbox-group-gap);
3927
- padding:0;
3928
- margin:0;
3929
-
3930
- font-size:var(--tds-checkbox-group-font-size);
3931
- line-height:var(--tds-checkbox-group-line-height);
3932
- border:0;
3933
- }
3934
-
3935
- .tds-checkbox-group legend{
3936
- padding:0;
3937
- margin-bottom:var(--tds-checkbox-group-legend-margin-bottom);
3938
- }
3939
-
3940
- .tds-checkbox-group:has(.tds-checkbox-group-description){
3941
- --tds-checkbox-group-legend-margin-bottom:var(--t-spacing-fourth);
3942
- }
3943
-
3944
- .tds-checkbox-group[aria-invalid="true"]{
3945
- --tds-checkbox-group-description-color:var(--t-text-color-status-error);
3946
- --tds-checkbox-group-description-invalid-icon-display:inline-block;
3947
- }
3948
-
3949
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
3950
- margin-left:.25ch;
3951
- color:var(--t-text-color-status-error);
3952
- content:"*";
3953
- }
3954
-
3955
- .tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
3956
- content:none;
3957
- }
3958
-
3959
- .tds-checkbox-group-fields{
3960
- display:flex;
3961
- flex-direction:column;
3962
- gap:var(--tds-checkbox-group-gap);
3963
- align-items:flex-start;
3964
- }
3965
-
3966
- .tds-checkbox-group-description{
3967
- display:flex;
3968
- gap:var(--t-spacing-half);
3969
- align-items:flex-start;
3970
- margin:0;
3971
- font-size:var(--tds-checkbox-group-description-font-size);
3972
- line-height:var(--tds-checkbox-group-description-line-height);
3973
- color:var(--tds-checkbox-group-description-color);
3974
- cursor:text;
3975
- }
3976
-
3977
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
3978
- display:var(--tds-checkbox-group-description-invalid-icon-display);
3979
- flex-shrink:0;
3980
- margin-top:calc(.5lh - .5em);
3981
- line-height:var(--tds-checkbox-group-description-line-height);
3982
- }
3983
-
3984
- .tds-checkbox-group--sm{
3985
- --tds-checkbox-group-line-height:1.35;
3986
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
3987
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
3988
- --tds-checkbox-group-description-line-height:1.3;
3989
- }
3990
-
3991
3991
  .tds-number-stepper{
3992
3992
  --tds-number-stepper-border-color:var(--t-form-border-color);
3993
3993
  --tds-number-stepper-border-color-hover:var(--t-form-border-color-hover);