@planningcenter/tapestry 2.10.0-rc.5 → 2.10.0

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 +601 -601
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +601 -601
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,745 +1,745 @@
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, .tds-sidenav{
11
- --tds-sidenav-indent:12px;
12
- --tds-sidenav-item-depth: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;
13
25
 
14
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
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);
15
28
 
16
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
17
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
18
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
19
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
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);
20
32
 
21
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
22
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
23
- --tds-sidenav-item-nested-background-selected:transparent;
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);
24
35
 
25
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
26
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
27
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
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);
28
39
 
29
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
30
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
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);
31
45
  }
32
46
 
33
- .tds-sidenav--theme-gray{
34
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
35
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
36
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
37
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
38
- --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;
39
49
  }
40
- }
41
50
 
42
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
43
- 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
+ }
44
56
  }
45
57
 
46
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
47
- flex-direction:column;
48
- gap:var(--t-spacing-half);
49
- 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
+ }
50
76
  }
51
-
52
- .tds-sidenav-section-list{
53
- width:100%;
54
- padding:0;
55
- margin:0;
56
- list-style:none;
57
77
  }
58
78
 
59
- .tds-sidenav-section-header{
79
+ .tds-page-header{
60
80
  display:flex;
61
- align-items:baseline;
62
- justify-content:space-between;
63
- 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);
64
86
  }
65
87
 
66
- .tds-sidenav-section-header h2{
67
- margin:0;
68
- font-size:var(--t-font-size-sm);
69
- font-weight:var(--t-font-weight-semibold);
70
- line-height:1.35;
71
- color:var(--t-text-color-secondary);
72
- text-transform:uppercase;
73
- }
74
-
75
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
76
- padding-top:0;
77
- }
88
+ .tds-page-header:not(.has-nav){
89
+ padding-bottom:var(--tds-page-header-padding-y);
90
+ }
78
91
 
79
- .tds-sidenav-section-header [slot="label-actions"]{
80
- display:flex;
81
- gap:var(--t-spacing-half);
82
- align-items:center;
83
- }
92
+ .tds-page-header.inactive{
93
+ background:var(--tds-page-header-background-color-inactive);
94
+ }
84
95
 
85
- .tds-sidenav-section [slot="section-actions"]{
96
+ .tds-page-header__title-bar{
86
97
  display:flex;
87
- gap:12px;
98
+ flex-direction:column;
99
+ gap:var(--t-spacing-2) var(--t-spacing-1);
100
+ align-items:flex-start;
101
+ justify-content:space-between;
102
+ padding:0 var(--tds-page-header-padding-x);
103
+ }
104
+
105
+ .tds-page-header--profile > .tds-page-header__title-bar{
88
106
  align-items:center;
89
- min-height:42px;
90
- padding:var(--t-spacing-1) 0;
91
107
  }
92
108
 
93
- .tds-sidenav-section-list,
94
- .tds-sidenav-item{
109
+ .tds-page-header__primary{
95
110
  width:100%;
96
- padding:0;
111
+ }
112
+
113
+ .tds-page-header__primary h1{
97
114
  margin:0;
115
+ font-size:var(--tds-page-header-headline-font-size);
116
+ font-weight:var(--t-font-weight-normal);
117
+ line-height:32px;
118
+ color:var(--tds-page-header-headline-color);
119
+ overflow-wrap:break-word;
98
120
  }
99
121
 
100
- .tds-sidenav-item :is(a,button){
101
- position:relative;
102
- display:flex;
103
- gap:12px;
104
- align-items:center;
105
- width:100%;
106
- padding:12px;
107
- overflow:hidden;
108
- font-size:var(--t-font-size-sm);
109
- line-height:18px;
110
- color:var(--t-text-color-headline);
111
- white-space:nowrap;
112
- text-decoration:none;
113
- -webkit-appearance:none;
114
- -moz-appearance:none;
115
- appearance:none;
116
- cursor:pointer;
117
- background-color:var(--tds-sidenav-item-background, transparent);
118
- border:0;
119
- border-radius:var(--t-border-radius);
120
- transition:var(--tds-sidenav-item-transition);
121
- }
122
+ .tds-page-header [slot="actions"],
123
+ .tds-page-header .tds-page-header__actions{
124
+ width:100%;
125
+ }
122
126
 
123
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
124
- display:block;
125
- flex:1;
126
- overflow:hidden;
127
- text-overflow:ellipsis;
128
- text-align:left;
129
- white-space:nowrap;
130
- }
127
+ .has-multi-actions.tds-page-header [slot="actions"],
128
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
129
+ display:flex;
130
+ flex-flow:row wrap;
131
+ gap:var(--t-spacing-half) var(--t-spacing-1);
132
+ align-items:flex-start;
133
+ justify-content:flex-start;
134
+ min-width:0;
135
+ }
131
136
 
132
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
133
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
134
- color:var(--t-text-color-headline);
135
- text-decoration:none;
136
- }
137
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
138
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
139
+ .tds-page-header nav[slot="navigation"] ul,
140
+ .tds-page-header nav.tds-page-header__nav ul{
141
+ display:flex;
142
+ gap:var(--tds-page-header-nav-gap);
143
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
144
+ margin:0 0 -1px;
145
+ overflow:auto;
146
+ list-style:none;
147
+ background:var(--tds-page-header-nav-background);
148
+ }
137
149
 
138
- :is(.tds-sidenav-item :is(a,button)):active{
139
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
140
- }
150
+ .tds-page-header nav[slot="navigation"] a,
151
+ .tds-page-header nav[slot="navigation"] button,
152
+ .tds-page-header nav.tds-page-header__nav a,
153
+ .tds-page-header nav.tds-page-header__nav button{
154
+ position:relative;
155
+ display:inline-flex;
156
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
157
+ font-size:var(--t-font-size-sm);
158
+ line-height:22px;
159
+ color:var(--tds-page-header-nav-item-color);
160
+ white-space:nowrap;
161
+ text-decoration:none;
162
+ -webkit-appearance:none;
163
+ -moz-appearance:none;
164
+ appearance:none;
165
+ cursor:pointer;
166
+ outline-offset:-2px;
167
+ background-color:var(--tds-page-header-nav-item-background-color);
168
+ background-clip:padding-box;
169
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
170
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
171
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
172
+ }
141
173
 
142
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
143
- overflow:hidden;
144
- color:var(--tds-sidenav-item-icon-color);
145
- }
174
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
175
+ position:relative;
176
+ }
146
177
 
147
- :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{
148
- display:block;
149
- width:var(--tds-sidenav-item-icon-size);
150
- height:var(--tds-sidenav-item-icon-size);
151
- }
152
-
153
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
154
- --tds-sidenav-indent:19px;
155
- }
156
-
157
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
158
- visibility:visible;
159
- block-size:auto;
160
- opacity:1;
161
- }
162
-
163
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
164
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
165
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
166
-
167
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
168
- font-weight:var(--t-font-weight-semibold);
169
- }
178
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
179
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
180
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
181
+ }
170
182
 
171
- .tds-sidenav-item:has(.tds-sidenav-section){
172
- display:flex;
173
- flex-direction:column;
174
- gap:var(--t-spacing-half);
175
- }
183
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
184
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
185
+ position:absolute;
186
+ top:-5px;
187
+ right:-2px;
188
+ width:10px;
189
+ height:10px;
190
+ content:"";
191
+ background:var(--tds-page-header-nav-item-indicator-color);
192
+ border-radius:50%;
193
+ }
176
194
 
177
- .tds-sidenav-item .tds-sidenav-section-list{
178
- --tds-sidenav-item-depth:1;
179
- gap:0;
195
+ @media (prefers-reduced-motion: no-preference){
196
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
197
+ animation:indicator-pulse 1.25s ease infinite;
180
198
  }
199
+ }
181
200
 
182
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
183
- visibility:hidden;
184
- block-size:0;
185
- overflow-y:clip;
186
- opacity:0;
187
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
188
- }
189
-
190
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
191
- --tds-sidenav-item-depth:2;
192
- }
193
-
194
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
195
- min-height:var(--t-element-size-2xl);
196
- padding-block:9px;
197
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
198
- line-height:1;
199
- background-color:transparent;
200
- }
201
-
202
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
203
- position:absolute;
204
- top:0;
205
- bottom:0;
206
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
207
- width:2px;
208
- content:"";
209
- background-color:var(--tds-sidenav-item-nested-border-color);
210
- transition:var(--tds-sidenav-item-transition);
211
- }
212
-
213
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
214
- position:absolute;
215
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
216
- z-index:-1;
217
- height:100%;
218
- content:"";
219
- background-color:var(--tds-sidenav-item-nested-background);
220
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
221
- transition:var(--tds-sidenav-item-transition);
222
- }
223
-
224
- :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)){
225
- display:block;
226
- text-align:left;
227
- white-space:normal;
228
- }
229
-
230
- :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{
231
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
232
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
233
- }
234
-
235
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
236
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
237
- }
201
+ .tds-page-header nav[slot="navigation"] a.selected,
202
+ .tds-page-header nav[slot="navigation"] button.selected,
203
+ .tds-page-header nav.tds-page-header__nav a.selected,
204
+ .tds-page-header nav.tds-page-header__nav button.selected{
205
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
206
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
207
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
208
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
209
+ }
238
210
 
239
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
240
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
241
- font-weight:var(--t-font-weight-medium);
242
- }
211
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
212
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
213
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
214
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
215
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
216
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
217
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
218
+ }
243
219
 
244
- .tds-sidenav-responsive-header{
245
- display:flex;
246
- gap:var(--t-spacing-2);
247
- align-items:center;
248
- width:100%;
220
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
221
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
222
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
223
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
224
+ border-color:var(--tds-page-header-nav-item-border-color-active);
225
+ background-color:var(--tds-page-header-nav-item-background-color-active);
249
226
  }
250
227
 
251
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
252
- order:0;
253
- }
228
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
229
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
230
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
231
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
232
+ color:var(--tds-page-header-nav-item-color-disabled);
233
+ cursor:not-allowed;
234
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
235
+ opacity:1;
236
+ }
254
237
 
255
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
256
- flex:1;
257
- order:1;
258
- margin:0;
259
- font-size:var(--t-font-size-lg);
260
- font-weight:var(--t-font-weight-medium);
261
- color:var(--t-text-color-headline);
238
+ @media (min-width: 960px){
239
+ .tds-page-header__primary{
240
+ flex:1 1 max-content;
241
+ width:auto;
242
+ min-width:0;
243
+ max-width:100%;
262
244
  }
263
245
 
264
- @media (max-width: 719px){
265
- .tds-sidenav-collapse{
266
- z-index:10001;
267
- display:none;
268
- max-width:min(448px, calc(100vw - 48px));
269
- padding:0;
270
- margin:12px 0;
271
- overflow:hidden;
272
- outline:0;
273
- background:var(--t-surface-color-card);
274
- border:0;
275
- border-radius:6px;
276
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
277
- will-change:transform;
278
- position-area:bottom span-right;
246
+ .tds-page-header__title-bar,
247
+ .tds-page-header--profile .tds-page-header__title-bar{
248
+ flex-flow:row nowrap;
249
+ row-gap:12px;
250
+ align-items:flex-start;
279
251
  }
280
252
 
281
- .tds-sidenav-scroll-container{
282
- --webkit-overflow-scrolling:touch;
283
- display:block;
284
- width:100%;
285
- height:-moz-fit-content;
286
- height:fit-content;
287
- padding:var(--t-spacing-2);
288
- overflow-y:auto;
253
+ .tds-page-header [slot="actions"],
254
+ .tds-page-header .tds-page-header__actions{
255
+ width:auto;
289
256
  }
290
257
 
291
- .tds-sidenav-item :is(a, button) :is(.prefix){
292
- display:none;
293
- }
294
- @supports selector(:popover-open){
295
- .tds-sidenav-collapse:popover-open{
296
- display:flex;
297
- }
298
- }
299
- @supports not selector(:popover-open){
300
- .tds-sidenav-collapse.\:popover-open{
301
- display:flex;
302
- }
258
+ .has-multi-actions.tds-page-header [slot="actions"],
259
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
260
+ justify-content:flex-end;
303
261
  }
304
262
  }
305
263
 
306
- @media (min-width: 720px){
307
- .tds-sidenav-responsive-header{
308
- display:none;
309
- }
264
+ .tds-page-header-phone,
265
+ .tds-page-header-email{
266
+ color:var(--tds-page-header-color);
267
+ white-space:nowrap;
310
268
  }
311
269
 
312
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
313
- display:none;
314
- }
315
-
316
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
317
- display:block;
318
- }
270
+ .tds-page-header-email{
271
+ max-width:100%;
272
+ overflow:hidden;
273
+ text-overflow:ellipsis;
274
+ }
319
275
 
320
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
321
- display:flex;
322
- flex-direction:column;
323
- }
276
+ @keyframes indicator-pulse{
277
+ 0%{
278
+ opacity:.3;
279
+ transform:scale(.9);
280
+ }
324
281
 
325
- @layer t-critical{
326
- tds-page-header:not(.hydrated){
327
- display:none;
282
+ 100%{
283
+ opacity:0;
284
+ transform:scale(1.75);
328
285
  }
329
286
  }
330
287
 
331
- @layer t-component{
332
- .tds-page-header{
333
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
334
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
335
- --tds-page-header-color:var(--t-text-color);
336
- --tds-page-header-bottom-border-color:var(--t-surface-color-canvas);
337
- --tds-page-header-headline-color:var(--t-text-color-headline);
338
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
339
- --tds-page-header-padding-x:var(--t-spacing-2);
340
- --tds-page-header-padding-y:var(--t-spacing-2);
341
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
342
- --tds-page-header-nav-gap:var(--t-spacing-1);
343
- --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%);
344
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
345
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
346
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
347
- --tds-page-header-nav-item-background-color:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 35%);
348
- --tds-page-header-nav-item-border-width:1px;
288
+ .tds-radio{
289
+ --tds-radio-font-size:var(--t-font-size-md);
290
+ --tds-radio-cursor:pointer;
291
+ --tds-radio-line-height:1.4;
292
+ --tds-radio-transition-property:border-width;
349
293
 
350
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
351
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-bottom-border-color);
294
+ --tds-radio-input-size:var(--t-element-size-md);
295
+ --tds-radio-input-border-radius:var(--t-border-radius-round);
296
+ --tds-radio-input-border-color:var(--t-border-color-control-neutral);
297
+ --tds-radio-input-border-width:var(--t-border-width);
298
+ --tds-radio-input-background-color:transparent;
352
299
 
353
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
354
- --tds-page-header-nav-item-background-color-hover:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 20%);
355
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
300
+ --tds-radio-label-color:var(--t-text-color);
356
301
 
357
- --tds-page-header-nav-item-background-color-active:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 10%);
358
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-active);
302
+ --tds-radio-description-font-size:var(--t-font-size-sm);
303
+ --tds-radio-description-line-height:1.35;
304
+ --tds-radio-description-color:var(--t-text-color-secondary);
359
305
 
360
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
361
- --tds-page-header-nav-item-background-color-disabled:color-mix(in srgb, var(--t-surface-color-canvas) 100%, transparent 50%);
362
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
306
+ position:relative;
307
+ display:inline-grid;
308
+ grid-template-columns:auto;
309
+ grid-auto-columns:1fr;
310
+ gap:var(--t-spacing-fourth) var(--t-spacing-1);
311
+ line-height:var(--tds-radio-line-height);
312
+ cursor:var(--tds-radio-cursor);
313
+ -webkit-user-select:none;
314
+ -moz-user-select:none;
315
+ user-select:none;
316
+ }
363
317
 
364
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
365
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
366
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
367
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
368
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
318
+ .tds-radio label{
319
+ grid-area:1 / 2;
320
+ font-size:var(--tds-radio-font-size);
321
+ font-weight:var(--t-font-weight-normal);
322
+ color:var(--tds-radio-label-color);
323
+ cursor:var(--tds-radio-cursor);
369
324
  }
370
325
 
371
- .tds-page-header--profile{
372
- --tds-page-header-padding-y:20px;
326
+ .tds-radio input[type="radio"]{
327
+ position:relative;
328
+ width:1em;
329
+ height:1em;
330
+ margin:calc((1lh - 1em) / 2) 0 0;
331
+ font-size:var(--tds-radio-font-size);
332
+ line-height:inherit;
333
+ -webkit-appearance:none;
334
+ -moz-appearance:none;
335
+ appearance:none;
336
+ cursor:var(--tds-radio-cursor);
337
+ background-color:var(--tds-radio-input-background-color);
338
+ border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
339
+ border-radius:var(--tds-radio-input-border-radius);
340
+ transition-timing-function:ease-in-out;
341
+ transition-duration:180ms;
342
+ transition-property:var(--tds-radio-transition-property);
373
343
  }
374
344
 
375
- @supports (color: light-dark(#fff, #000)){
376
- .tds-page-header{
377
- --tds-page-header-nav-background-start:light-dark(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0));
378
- --tds-page-header-nav-background-end:light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .1));
345
+ :is(.tds-radio input[type="radio"]):hover:not(:disabled){
346
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
347
+ --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
379
348
  }
380
- }
381
349
 
382
- @media (min-width: 600px){
383
- .tds-page-header{
384
- --tds-page-header-background-color:var(--t-surface-color-canvas);
385
- --tds-page-header-color:var(--t-text-color-secondary);
386
- --tds-page-header-bottom-border-color:var(--t-border-color);
387
- --tds-page-header-padding-x:var(--t-spacing-3);
388
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
389
- --tds-page-header-nav-gap:var(--t-spacing-half);
390
- --tds-page-header-nav-background:transparent;
391
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
392
- --tds-page-header-nav-item-border-width:1px;
393
- --tds-page-header-nav-item-color:var(--t-text-color);
394
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
395
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-060);
396
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-050);
397
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
398
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
350
+ :is(.tds-radio input[type="radio"]):focus-visible{
351
+ outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
352
+ outline-offset:var(--t-spacing-fourth);
399
353
  }
400
- }
401
- }
402
354
 
403
- .tds-page-header{
404
- display:flex;
405
- flex-direction:column;
406
- padding-top:var(--tds-page-header-padding-y);
407
- color:var(--tds-page-header-color);
408
- background:var(--tds-page-header-background-color);
409
- border-bottom:1px solid var(--tds-page-header-bottom-border-color);
410
- }
355
+ :is(.tds-radio input[type="radio"]):disabled{
356
+ pointer-events:none;
357
+ }
411
358
 
412
- .tds-page-header:not(.has-nav){
413
- padding-bottom:var(--tds-page-header-padding-y);
414
- }
359
+ @media (prefers-reduced-motion: reduce){
415
360
 
416
- .tds-page-header.inactive{
417
- background:var(--tds-page-header-background-color-inactive);
418
- }
361
+ .tds-radio input[type="radio"]{
362
+ --tds-radio-transition-property:none;
363
+ }
364
+ }
419
365
 
420
- .tds-page-header__title-bar{
421
- display:flex;
422
- flex-direction:column;
423
- gap:var(--t-spacing-2) var(--t-spacing-1);
424
- align-items:flex-start;
425
- justify-content:space-between;
426
- padding:0 var(--tds-page-header-padding-x);
427
- }
366
+ .tds-radio:has(input:checked){
367
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
368
+ --tds-radio-input-border-color:var(--t-border-color-control-info);
369
+ --tds-radio-input-border-width:4px;
370
+ }
428
371
 
429
- .tds-page-header--profile > .tds-page-header__title-bar{
430
- align-items:center;
431
- }
372
+ .tds-radio:has(input:checked) input:hover:not(:disabled){
373
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
374
+ --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
375
+ }
432
376
 
433
- .tds-page-header__primary{
434
- width:100%;
435
- }
377
+ .tds-radio:has(input:user-invalid){
378
+ --tds-radio-input-border-color:var(--t-border-color-control-error);
379
+ }
436
380
 
437
- .tds-page-header__primary h1{
438
- margin:0;
439
- font-size:var(--tds-page-header-headline-font-size);
440
- font-weight:var(--t-font-weight-normal);
441
- line-height:32px;
442
- color:var(--tds-page-header-headline-color);
443
- overflow-wrap:break-word;
444
- }
381
+ .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
382
+ --tds-radio-input-border-color:var(--t-border-color-control-error);
383
+ --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
384
+ }
445
385
 
446
- .tds-page-header [slot="actions"],
447
- .tds-page-header .tds-page-header__actions{
448
- width:100%;
449
- }
386
+ .tds-radio:has(input:disabled){
387
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-070);
388
+ --tds-radio-input-border-color:var(--t-border-color-control-disabled);
450
389
 
451
- .has-multi-actions.tds-page-header [slot="actions"],
452
- .has-multi-actions.tds-page-header .tds-page-header__actions{
390
+ --tds-radio-label-color:var(--t-text-color-disabled);
391
+ --tds-radio-description-color:var(--t-text-color-disabled);
392
+ --tds-radio-cursor:not-allowed;
393
+ }
394
+
395
+ .tds-radio:has(input:disabled) input:checked{
396
+ --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
397
+ --tds-radio-input-border-color:var(--t-border-color-control-disabled);
398
+ }
399
+
400
+ .tds-radio-description{
453
401
  display:flex;
454
- flex-flow:row wrap;
455
- gap:var(--t-spacing-half) var(--t-spacing-1);
402
+ grid-area:2 / 2;
403
+ gap:4px;
456
404
  align-items:flex-start;
457
- justify-content:flex-start;
458
- min-width:0;
405
+ margin:0;
406
+ font-size:var(--tds-radio-description-font-size);
407
+ line-height:var(--tds-radio-description-line-height);
408
+ color:var(--tds-radio-description-color);
409
+ cursor:text;
459
410
  }
460
411
 
461
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
462
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
463
- .tds-page-header nav[slot="navigation"] ul,
464
- .tds-page-header nav.tds-page-header__nav ul{
465
- display:flex;
466
- gap:var(--tds-page-header-nav-gap);
467
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
468
- margin:0 0 -1px;
469
- overflow:auto;
470
- list-style:none;
471
- background:var(--tds-page-header-nav-background);
412
+ .tds-radio--sm{
413
+ --tds-radio-line-height:1.35;
414
+ --tds-radio-input-size:var(--t-element-size-sm);
415
+ --tds-radio-font-size:var(--t-font-size-sm);
416
+ --tds-radio-description-font-size:var(--t-font-size-xs);
417
+ --tds-radio-description-line-height:1.3;
472
418
  }
473
419
 
474
- .tds-page-header nav[slot="navigation"] a,
475
- .tds-page-header nav[slot="navigation"] button,
476
- .tds-page-header nav.tds-page-header__nav a,
477
- .tds-page-header nav.tds-page-header__nav button{
478
- position:relative;
479
- display:inline-flex;
480
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
481
- font-size:var(--t-font-size-sm);
482
- line-height:22px;
483
- color:var(--tds-page-header-nav-item-color);
484
- white-space:nowrap;
485
- text-decoration:none;
486
- -webkit-appearance:none;
487
- -moz-appearance:none;
488
- appearance:none;
489
- cursor:pointer;
490
- outline-offset:-2px;
491
- background-color:var(--tds-page-header-nav-item-background-color);
492
- background-clip:padding-box;
493
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
494
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
495
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
496
- }
497
420
 
498
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
499
- position:relative;
500
- }
421
+ @media (prefers-reduced-motion: no-preference){
501
422
 
502
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
503
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
504
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
423
+ :root{
424
+ interpolate-size:allow-keywords;
505
425
  }
426
+ }
506
427
 
507
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
508
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
509
- position:absolute;
510
- top:-5px;
511
- right:-2px;
512
- width:10px;
513
- height:10px;
514
- content:"";
515
- background:var(--tds-page-header-nav-item-indicator-color);
516
- border-radius:50%;
517
- }
428
+ @layer tds-component{
429
+ tds-sidenav, .tds-sidenav{
430
+ --tds-sidenav-indent:12px;
431
+ --tds-sidenav-item-depth:0;
518
432
 
519
- @media (prefers-reduced-motion: no-preference){
520
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
521
- animation:indicator-pulse 1.25s ease infinite;
433
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
434
+
435
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
436
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
437
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
438
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
439
+
440
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
441
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
442
+ --tds-sidenav-item-nested-background-selected:transparent;
443
+
444
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
445
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
446
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
447
+
448
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
449
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
522
450
  }
523
- }
524
451
 
525
- .tds-page-header nav[slot="navigation"] a.selected,
526
- .tds-page-header nav[slot="navigation"] button.selected,
527
- .tds-page-header nav.tds-page-header__nav a.selected,
528
- .tds-page-header nav.tds-page-header__nav button.selected{
529
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
530
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
531
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
532
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
452
+ .tds-sidenav--theme-gray{
453
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
454
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
455
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
456
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
457
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
458
+ }
533
459
  }
534
460
 
535
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
536
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
537
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
538
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
539
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
540
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
541
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
542
- }
461
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
462
+ display:flex;
463
+ }
543
464
 
544
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
545
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
546
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
547
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
548
- border-color:var(--tds-page-header-nav-item-border-color-active);
549
- background-color:var(--tds-page-header-nav-item-background-color-active);
465
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
466
+ flex-direction:column;
467
+ gap:var(--t-spacing-half);
468
+ width:100%;
469
+ }
470
+
471
+ .tds-sidenav-section-list{
472
+ width:100%;
473
+ padding:0;
474
+ margin:0;
475
+ list-style:none;
550
476
  }
551
477
 
552
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
553
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
554
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
555
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
556
- color:var(--tds-page-header-nav-item-color-disabled);
557
- cursor:not-allowed;
558
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
559
- opacity:1;
478
+ .tds-sidenav-section-header{
479
+ display:flex;
480
+ align-items:baseline;
481
+ justify-content:space-between;
482
+ padding-top:var(--t-spacing-2);
560
483
  }
561
484
 
562
- @media (min-width: 960px){
563
- .tds-page-header__primary{
564
- flex:1 1 max-content;
565
- width:auto;
566
- min-width:0;
567
- max-width:100%;
485
+ .tds-sidenav-section-header h2{
486
+ margin:0;
487
+ font-size:var(--t-font-size-sm);
488
+ font-weight:var(--t-font-weight-semibold);
489
+ line-height:1.35;
490
+ color:var(--t-text-color-secondary);
491
+ text-transform:uppercase;
568
492
  }
569
493
 
570
- .tds-page-header__title-bar,
571
- .tds-page-header--profile .tds-page-header__title-bar{
572
- flex-flow:row nowrap;
573
- row-gap:12px;
574
- align-items:flex-start;
494
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
495
+ padding-top:0;
575
496
  }
576
497
 
577
- .tds-page-header [slot="actions"],
578
- .tds-page-header .tds-page-header__actions{
579
- width:auto;
498
+ .tds-sidenav-section-header [slot="label-actions"]{
499
+ display:flex;
500
+ gap:var(--t-spacing-half);
501
+ align-items:center;
580
502
  }
581
503
 
582
- .has-multi-actions.tds-page-header [slot="actions"],
583
- .has-multi-actions.tds-page-header .tds-page-header__actions{
584
- justify-content:flex-end;
585
- }
504
+ .tds-sidenav-section [slot="section-actions"]{
505
+ display:flex;
506
+ gap:12px;
507
+ align-items:center;
508
+ min-height:42px;
509
+ padding:var(--t-spacing-1) 0;
586
510
  }
587
511
 
588
- .tds-page-header-phone,
589
- .tds-page-header-email{
590
- color:var(--tds-page-header-color);
591
- white-space:nowrap;
512
+ .tds-sidenav-section-list,
513
+ .tds-sidenav-item{
514
+ width:100%;
515
+ padding:0;
516
+ margin:0;
592
517
  }
593
518
 
594
- .tds-page-header-email{
595
- max-width:100%;
596
- overflow:hidden;
597
- text-overflow:ellipsis;
598
- }
519
+ .tds-sidenav-item :is(a,button){
520
+ position:relative;
521
+ display:flex;
522
+ gap:12px;
523
+ align-items:center;
524
+ width:100%;
525
+ padding:12px;
526
+ overflow:hidden;
527
+ font-size:var(--t-font-size-sm);
528
+ line-height:18px;
529
+ color:var(--t-text-color-headline);
530
+ white-space:nowrap;
531
+ text-decoration:none;
532
+ -webkit-appearance:none;
533
+ -moz-appearance:none;
534
+ appearance:none;
535
+ cursor:pointer;
536
+ background-color:var(--tds-sidenav-item-background, transparent);
537
+ border:0;
538
+ border-radius:var(--t-border-radius);
539
+ transition:var(--tds-sidenav-item-transition);
540
+ }
541
+
542
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
543
+ display:block;
544
+ flex:1;
545
+ overflow:hidden;
546
+ text-overflow:ellipsis;
547
+ text-align:left;
548
+ white-space:nowrap;
549
+ }
550
+
551
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
552
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
553
+ color:var(--t-text-color-headline);
554
+ text-decoration:none;
555
+ }
556
+
557
+ :is(.tds-sidenav-item :is(a,button)):active{
558
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
559
+ }
560
+
561
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
562
+ overflow:hidden;
563
+ color:var(--tds-sidenav-item-icon-color);
564
+ }
565
+
566
+ :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{
567
+ display:block;
568
+ width:var(--tds-sidenav-item-icon-size);
569
+ height:var(--tds-sidenav-item-icon-size);
570
+ }
571
+
572
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
573
+ --tds-sidenav-indent:19px;
574
+ }
575
+
576
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
577
+ visibility:visible;
578
+ block-size:auto;
579
+ opacity:1;
580
+ }
599
581
 
600
- @keyframes indicator-pulse{
601
- 0%{
602
- opacity:.3;
603
- transform:scale(.9);
582
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
583
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
584
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
585
+
586
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
587
+ font-weight:var(--t-font-weight-semibold);
604
588
  }
605
589
 
606
- 100%{
607
- opacity:0;
608
- transform:scale(1.75);
590
+ .tds-sidenav-item:has(.tds-sidenav-section){
591
+ display:flex;
592
+ flex-direction:column;
593
+ gap:var(--t-spacing-half);
609
594
  }
610
- }
611
595
 
612
- .tds-radio{
613
- --tds-radio-font-size:var(--t-font-size-md);
614
- --tds-radio-cursor:pointer;
615
- --tds-radio-line-height:1.4;
616
- --tds-radio-transition-property:border-width;
596
+ .tds-sidenav-item .tds-sidenav-section-list{
597
+ --tds-sidenav-item-depth:1;
598
+ gap:0;
599
+ }
617
600
 
618
- --tds-radio-input-size:var(--t-element-size-md);
619
- --tds-radio-input-border-radius:var(--t-border-radius-round);
620
- --tds-radio-input-border-color:var(--t-border-color-control-neutral);
621
- --tds-radio-input-border-width:var(--t-border-width);
622
- --tds-radio-input-background-color:transparent;
601
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
602
+ visibility:hidden;
603
+ block-size:0;
604
+ overflow-y:clip;
605
+ opacity:0;
606
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
607
+ }
623
608
 
624
- --tds-radio-label-color:var(--t-text-color);
609
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
610
+ --tds-sidenav-item-depth:2;
611
+ }
625
612
 
626
- --tds-radio-description-font-size:var(--t-font-size-sm);
627
- --tds-radio-description-line-height:1.35;
628
- --tds-radio-description-color:var(--t-text-color-secondary);
613
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
614
+ min-height:var(--t-element-size-2xl);
615
+ padding-block:9px;
616
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
617
+ line-height:1;
618
+ background-color:transparent;
619
+ }
629
620
 
630
- position:relative;
631
- display:inline-grid;
632
- grid-template-columns:auto;
633
- grid-auto-columns:1fr;
634
- gap:var(--t-spacing-fourth) var(--t-spacing-1);
635
- line-height:var(--tds-radio-line-height);
636
- cursor:var(--tds-radio-cursor);
637
- -webkit-user-select:none;
638
- -moz-user-select:none;
639
- user-select:none;
640
- }
621
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
622
+ position:absolute;
623
+ top:0;
624
+ bottom:0;
625
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
626
+ width:2px;
627
+ content:"";
628
+ background-color:var(--tds-sidenav-item-nested-border-color);
629
+ transition:var(--tds-sidenav-item-transition);
630
+ }
641
631
 
642
- .tds-radio label{
643
- grid-area:1 / 2;
644
- font-size:var(--tds-radio-font-size);
645
- font-weight:var(--t-font-weight-normal);
646
- color:var(--tds-radio-label-color);
647
- cursor:var(--tds-radio-cursor);
648
- }
632
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
633
+ position:absolute;
634
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
635
+ z-index:-1;
636
+ height:100%;
637
+ content:"";
638
+ background-color:var(--tds-sidenav-item-nested-background);
639
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
640
+ transition:var(--tds-sidenav-item-transition);
641
+ }
649
642
 
650
- .tds-radio input[type="radio"]{
651
- position:relative;
652
- width:1em;
653
- height:1em;
654
- margin:calc((1lh - 1em) / 2) 0 0;
655
- font-size:var(--tds-radio-font-size);
656
- line-height:inherit;
657
- -webkit-appearance:none;
658
- -moz-appearance:none;
659
- appearance:none;
660
- cursor:var(--tds-radio-cursor);
661
- background-color:var(--tds-radio-input-background-color);
662
- border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
663
- border-radius:var(--tds-radio-input-border-radius);
664
- transition-timing-function:ease-in-out;
665
- transition-duration:180ms;
666
- transition-property:var(--tds-radio-transition-property);
667
- }
643
+ :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)){
644
+ display:block;
645
+ text-align:left;
646
+ white-space:normal;
647
+ }
668
648
 
669
- :is(.tds-radio input[type="radio"]):hover:not(:disabled){
670
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
671
- --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
672
- }
649
+ :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{
650
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
651
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
652
+ }
673
653
 
674
- :is(.tds-radio input[type="radio"]):focus-visible{
675
- outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
676
- outline-offset:var(--t-spacing-fourth);
677
- }
654
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
655
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
656
+ }
678
657
 
679
- :is(.tds-radio input[type="radio"]):disabled{
680
- pointer-events:none;
658
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
659
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
660
+ font-weight:var(--t-font-weight-medium);
681
661
  }
682
662
 
683
- @media (prefers-reduced-motion: reduce){
663
+ .tds-sidenav-responsive-header{
664
+ display:flex;
665
+ gap:var(--t-spacing-2);
666
+ align-items:center;
667
+ width:100%;
668
+ }
684
669
 
685
- .tds-radio input[type="radio"]{
686
- --tds-radio-transition-property:none;
670
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
671
+ order:0;
687
672
  }
688
- }
689
673
 
690
- .tds-radio:has(input:checked){
691
- --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
692
- --tds-radio-input-border-color:var(--t-border-color-control-info);
693
- --tds-radio-input-border-width:4px;
674
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
675
+ flex:1;
676
+ order:1;
677
+ margin:0;
678
+ font-size:var(--t-font-size-lg);
679
+ font-weight:var(--t-font-weight-medium);
680
+ color:var(--t-text-color-headline);
694
681
  }
695
682
 
696
- .tds-radio:has(input:checked) input:hover:not(:disabled){
697
- --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
698
- --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
699
- }
683
+ @media (max-width: 719px){
684
+ .tds-sidenav-collapse{
685
+ z-index:10001;
686
+ display:none;
687
+ max-width:min(448px, calc(100vw - 48px));
688
+ padding:0;
689
+ margin:12px 0;
690
+ overflow:hidden;
691
+ outline:0;
692
+ background:var(--t-surface-color-card);
693
+ border:0;
694
+ border-radius:6px;
695
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
696
+ will-change:transform;
697
+ position-area:bottom span-right;
698
+ }
700
699
 
701
- .tds-radio:has(input:user-invalid){
702
- --tds-radio-input-border-color:var(--t-border-color-control-error);
700
+ .tds-sidenav-scroll-container{
701
+ --webkit-overflow-scrolling:touch;
702
+ display:block;
703
+ width:100%;
704
+ height:-moz-fit-content;
705
+ height:fit-content;
706
+ padding:var(--t-spacing-2);
707
+ overflow-y:auto;
703
708
  }
704
709
 
705
- .tds-radio:has(input:user-invalid) input:hover:not(:disabled){
706
- --tds-radio-input-border-color:var(--t-border-color-control-error);
707
- --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
710
+ .tds-sidenav-item :is(a, button) :is(.prefix){
711
+ display:none;
712
+ }
713
+ @supports selector(:popover-open){
714
+ .tds-sidenav-collapse:popover-open{
715
+ display:flex;
708
716
  }
717
+ }
718
+ @supports not selector(:popover-open){
719
+ .tds-sidenav-collapse.\:popover-open{
720
+ display:flex;
721
+ }
722
+ }
723
+ }
709
724
 
710
- .tds-radio:has(input:disabled){
711
- --tds-radio-input-background-color:var(--t-fill-color-neutral-070);
712
- --tds-radio-input-border-color:var(--t-border-color-control-disabled);
713
-
714
- --tds-radio-label-color:var(--t-text-color-disabled);
715
- --tds-radio-description-color:var(--t-text-color-disabled);
716
- --tds-radio-cursor:not-allowed;
725
+ @media (min-width: 720px){
726
+ .tds-sidenav-responsive-header{
727
+ display:none;
717
728
  }
729
+ }
718
730
 
719
- .tds-radio:has(input:disabled) input:checked{
720
- --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
721
- --tds-radio-input-border-color:var(--t-border-color-control-disabled);
731
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
732
+ display:none;
722
733
  }
723
734
 
724
- .tds-radio-description{
725
- display:flex;
726
- grid-area:2 / 2;
727
- gap:4px;
728
- align-items:flex-start;
729
- margin:0;
730
- font-size:var(--tds-radio-description-font-size);
731
- line-height:var(--tds-radio-description-line-height);
732
- color:var(--tds-radio-description-color);
733
- cursor:text;
734
- }
735
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
736
+ display:block;
737
+ }
735
738
 
736
- .tds-radio--sm{
737
- --tds-radio-line-height:1.35;
738
- --tds-radio-input-size:var(--t-element-size-sm);
739
- --tds-radio-font-size:var(--t-font-size-sm);
740
- --tds-radio-description-font-size:var(--t-font-size-xs);
741
- --tds-radio-description-line-height:1.3;
742
- }
739
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
740
+ display:flex;
741
+ flex-direction:column;
742
+ }
743
743
 
744
744
  .tds-checkbox{
745
745
  --tds-checkbox-font-size:var(--t-font-size-md);