@planningcenter/tapestry 2.3.0-rc.9 → 2.4.0-rc.1

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 (15) hide show
  1. package/dist/index.css +4 -4
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +394 -394
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +394 -394
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tokens/ts/tokens.d.ts +1 -1
  8. package/dist/tokens/ts/tokens.js +1 -1
  9. package/dist/tokens/ts/tokens.js.map +1 -1
  10. package/dist/tokens-dark.css +2 -2
  11. package/dist/tokens.css +1 -1
  12. package/dist/tokens.css.map +1 -1
  13. package/dist/unstable.css +4 -4
  14. package/dist/unstable.css.map +1 -1
  15. package/package.json +2 -2
package/dist/reactRenderLegacy.css CHANGED
@@ -1,430 +1,157 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- @layer t-critical {
4
- tds-page-header:not(.hydrated) {
5
- display: none;
6
- }
3
+
4
+ @media (prefers-reduced-motion: no-preference) {
5
+
6
+ :root {
7
+ interpolate-size: allow-keywords;
7
8
  }
9
+ }
8
10
 
9
- @layer t-component {
10
- .tds-page-header {
11
- --tds-page-header-background-color: var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-card));
12
- --tds-page-header-background-color-inactive: var(--t-fill-color-neutral-090);
13
- --tds-page-header-color: var(--t-text-color-default-primary);
14
- --tds-page-header-headline-color: var(--t-text-color-default-headline);
15
- --tds-page-header-headline-font-size: var(--t-font-size-2xl);
16
- --tds-page-header-padding-x: var(--t-spacing-2);
17
- --tds-page-header-padding-y: var(--t-spacing-2);
18
- --tds-page-header-nav-padding-x: var(--tds-page-header-padding-x, var(--t-spacing-3));
19
- --tds-page-header-nav-gap: var(--t-spacing-1);
20
- --tds-page-header-nav-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
21
- --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
22
- --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
23
- --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
24
- --tds-page-header-nav-item-background-color: var(--t-fill-color-transparency-light-060);
25
- --tds-page-header-nav-item-border-width: 1px;
11
+ @layer tds-component {
12
+ tds-sidenav, .tds-sidenav {
13
+ --tds-sidenav-indent: 12px;
14
+ --tds-sidenav-item-depth: 0;
26
15
 
27
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-background-color);
28
- --tds-page-header-nav-item-border-bottom-color: var(--t-border-color-default-base);
16
+ --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
29
17
 
30
- --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
31
- --tds-page-header-nav-item-background-color-hover: var(--t-fill-color-neutral-080);
32
- --tds-page-header-nav-item-border-color-hover: var(--tds-page-header-nav-item-background-color-hover);
18
+ --tds-sidenav-item-icon-size: var(--t-element-size-md);
19
+ --tds-sidenav-item-background-hover: var(--t-fill-color-button-interaction-ghost-hover);
20
+ --tds-sidenav-item-background-active: var(--t-fill-color-button-interaction-ghost-active);
21
+ --tds-sidenav-item-background-selected: var(--t-fill-color-button-interaction-ghost-active);
33
22
 
34
- --tds-page-header-nav-item-background-color-active: var(--t-fill-color-neutral-060);
35
- --tds-page-header-nav-item-border-color-active: var(--tds-page-header-nav-item-background-color-hover);
23
+ --tds-sidenav-item-nested-background-hover: var(--tds-sidenav-item-background-hover);
24
+ --tds-sidenav-item-nested-background-active: var(--tds-sidenav-item-background-hover);
25
+ --tds-sidenav-item-nested-background-selected: transparent;
36
26
 
37
- --tds-page-header-nav-item-color-disabled: var(--t-text-color-default-disabled);
38
- --tds-page-header-nav-item-background-color-disabled: var(--t-fill-color-neutral-080);
39
- --tds-page-header-nav-item-border-color-disabled: var(--tds-page-header-nav-item-background-color-disabled);
27
+ --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
28
+ --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
29
+ --tds-sidenav-item-nested-border-color-selected: var(--t-border-color-status-info);
40
30
 
41
- --tds-page-header-nav-item-color-selected: var(--t-text-color-default-primary);
42
- --tds-page-header-nav-item-background-color-selected: var(--t-surface-color-card);
43
- --tds-page-header-nav-item-border-color-selected: var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-border-bottom-color-selected: var(--tds-page-header-nav-item-background-color-selected);
45
- --tds-page-header-nav-item-indicator-color: var(--t-icon-color-status-warning-primary);
31
+ --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
32
+ --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
46
33
  }
47
34
 
48
- .tds-page-header--profile {
49
- --tds-page-header-padding-y: 20px;
50
- }
51
- @media (min-width: 600px) {
52
- .tds-page-header {
53
- --tds-page-header-background-color: var(--t-surface-color-card);
54
- --tds-page-header-color: var(--t-text-color-default-secondary);
55
- --tds-page-header-padding-x: var(--t-spacing-3);
56
- --tds-page-header-headline-font-size: var(--t-font-size-3xl);
57
- --tds-page-header-nav-gap: var(--t-spacing-half);
58
- --tds-page-header-nav-background: transparent;
59
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
60
- --tds-page-header-nav-item-border-width: 1px;
61
- --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
62
- --tds-page-header-nav-item-background-color: var(--t-fill-color-neutral-070);
63
- --tds-page-header-nav-item-border-color-selected: var(--t-border-color-default-base);
64
- }
35
+ .is-classic tds-sidenav, .is-classic .tds-sidenav,
36
+ .tds-sidenav--theme-gray {
37
+ --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
38
+ --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
39
+ --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
40
+ --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
41
+ --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
65
42
  }
66
43
  }
67
44
 
68
- .tds-page-header {
69
- display: flex;
70
- flex-direction: column;
71
- padding-top: var(--tds-page-header-padding-y);
72
- color: var(--tds-page-header-color);
73
- background: var(--tds-page-header-background-color);
74
- border-bottom: 1px solid var(--t-border-color-default-base);
75
- }
45
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
46
+ display: flex;
47
+ }
76
48
 
77
- .tds-page-header:not(.has-nav) {
78
- padding-bottom: var(--tds-page-header-padding-y);
79
- }
49
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
50
+ flex-direction: column;
51
+ gap: var(--t-spacing-half);
52
+ width: 100%;
53
+ }
80
54
 
81
- .tds-page-header.inactive {
82
- background: var(--tds-page-header-background-color-inactive);
55
+ .tds-sidenav-section-list {
56
+ width: 100%;
57
+ padding: 0;
58
+ margin: 0;
59
+ list-style: none;
83
60
  }
84
61
 
85
- .tds-page-header__title-bar {
62
+ .tds-sidenav-section-header {
86
63
  display: flex;
87
- flex-direction: column;
88
- gap: var(--t-spacing-2) var(--t-spacing-1);
89
- align-items: flex-start;
64
+ align-items: baseline;
90
65
  justify-content: space-between;
91
- padding: 0 var(--tds-page-header-padding-x);
66
+ padding-top: var(--t-spacing-2);
92
67
  }
93
68
 
94
- .tds-page-header--profile > .tds-page-header__title-bar {
69
+ .tds-sidenav-section-header h2 {
70
+ margin: 0;
71
+ font-size: var(--t-font-size-sm);
72
+ font-weight: var(--t-font-weight-semibold);
73
+ line-height: 1.35;
74
+ color: var(--t-text-color-default-secondary);
75
+ text-transform: uppercase;
76
+ }
77
+
78
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
79
+ padding-top: 0;
80
+ }
81
+
82
+ .tds-sidenav-section-header [slot="label-actions"] {
83
+ display: flex;
84
+ gap: var(--t-spacing-half);
85
+ align-items: center;
86
+ }
87
+
88
+ .tds-sidenav-section [slot="section-actions"] {
89
+ display: flex;
90
+ gap: 12px;
95
91
  align-items: center;
92
+ min-height: 42px;
93
+ padding: var(--t-spacing-1) 0;
96
94
  }
97
95
 
98
- .tds-page-header__primary {
96
+ .tds-sidenav-section-list,
97
+ .tds-sidenav-item {
99
98
  width: 100%;
100
- }
101
-
102
- .tds-page-header__primary h1 {
99
+ padding: 0;
103
100
  margin: 0;
104
- font-size: var(--tds-page-header-headline-font-size);
105
- font-weight: var(--t-font-weight-normal);
106
- line-height: 32px;
107
- color: var(--tds-page-header-headline-color);
108
- overflow-wrap: break-word;
109
101
  }
110
102
 
111
- .tds-page-header [slot="actions"] {
112
- width: 100%;
113
- }
103
+ .tds-sidenav-item :is(a,button) {
104
+ position: relative;
105
+ display: flex;
106
+ gap: 12px;
107
+ align-items: center;
108
+ width: 100%;
109
+ padding: 12px;
110
+ overflow: hidden;
111
+ font-size: var(--t-font-size-sm);
112
+ line-height: 18px;
113
+ color: var(--t-text-color-default-headline);
114
+ white-space: nowrap;
115
+ text-decoration: none;
116
+ -webkit-appearance: none;
117
+ -moz-appearance: none;
118
+ appearance: none;
119
+ cursor: pointer;
120
+ background-color: var(--tds-sidenav-item-background, transparent);
121
+ border: 0;
122
+ border-radius: var(--t-border-radius-default);
123
+ transition: var(--tds-sidenav-item-transition);
124
+ }
114
125
 
115
- .has-multi-actions.tds-page-header [slot="actions"],
116
- .has-multi-actions.tds-page-header .tds-page-header__actions {
117
- display: flex;
118
- flex-flow: row wrap;
119
- gap: var(--t-spacing-half) var(--t-spacing-1);
120
- align-items: flex-start;
121
- justify-content: flex-start;
122
- min-width: 0;
123
- }
126
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)) {
127
+ display: block;
128
+ flex: 1;
129
+ overflow: hidden;
130
+ text-overflow: ellipsis;
131
+ text-align: left;
132
+ white-space: nowrap;
133
+ }
124
134
 
125
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
126
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
127
- .tds-page-header nav[slot="navigation"] ul,
128
- .tds-page-header nav.tds-page-header__nav ul {
129
- display: flex;
130
- gap: var(--tds-page-header-nav-gap);
131
- padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
132
- margin: 0 0 -1px;
133
- overflow: auto;
134
- list-style: none;
135
- background: var(--tds-page-header-nav-background);
136
- }
135
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
136
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
137
+ color: var(--t-text-color-default-headline);
138
+ text-decoration: none;
139
+ }
137
140
 
138
- .tds-page-header nav[slot="navigation"] a,
139
- .tds-page-header nav[slot="navigation"] button,
140
- .tds-page-header nav.tds-page-header__nav a,
141
- .tds-page-header nav.tds-page-header__nav button {
142
- position: relative;
143
- display: inline-flex;
144
- padding: var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
145
- font-size: var(--t-font-size-sm);
146
- line-height: 22px;
147
- color: var(--tds-page-header-nav-item-color);
148
- white-space: nowrap;
149
- text-decoration: none;
150
- -webkit-appearance: none;
151
- -moz-appearance: none;
152
- appearance: none;
153
- cursor: pointer;
154
- outline-offset: -2px;
155
- background-color: var(--tds-page-header-nav-item-background-color);
156
- background-clip: padding-box;
157
- border: var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
158
- border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
159
- border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
160
- }
141
+ :is(.tds-sidenav-item :is(a,button)):active {
142
+ --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
143
+ }
161
144
 
162
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) {
163
- position: relative;
164
- }
145
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
146
+ overflow: hidden;
147
+ color: var(--tds-sidenav-item-icon-color);
148
+ }
165
149
 
166
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button) {
167
- -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
168
- mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
169
- }
170
-
171
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
172
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
173
- position: absolute;
174
- top: -5px;
175
- right: -2px;
176
- width: 10px;
177
- height: 10px;
178
- content: "";
179
- background: var(--tds-page-header-nav-item-indicator-color);
180
- border-radius: 50%;
181
- }
182
-
183
- @media (prefers-reduced-motion: no-preference) {
184
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
185
- animation: indicator-pulse 1.25s ease infinite;
186
- }
187
- }
188
-
189
- .tds-page-header nav[slot="navigation"] a.selected,
190
- .tds-page-header nav[slot="navigation"] button.selected,
191
- .tds-page-header nav.tds-page-header__nav a.selected,
192
- .tds-page-header nav.tds-page-header__nav button.selected {
193
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-selected);
194
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-selected);
195
- --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-selected);
196
- --tds-page-header-nav-item-border-bottom-color: var(--tds-page-header-nav-item-background-color-selected);
197
- }
198
-
199
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
200
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
201
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
202
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
203
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
204
- --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-hover);
205
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-hover);
206
- }
207
-
208
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
209
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
210
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
211
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
212
- background-color: var(--tds-page-header-nav-item-background-color-active);
213
- }
214
-
215
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
216
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
217
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
218
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
219
- color: var(--tds-page-header-nav-item-color-disabled);
220
- cursor: not-allowed;
221
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
222
- opacity: 1;
223
- }
224
-
225
- @media (min-width: 960px) {
226
- .tds-page-header__primary {
227
- flex: 1 1 max-content;
228
- width: auto;
229
- min-width: 0;
230
- max-width: 100%;
231
- }
232
-
233
- .tds-page-header__title-bar,
234
- .tds-page-header--profile .tds-page-header__title-bar {
235
- flex-flow: row nowrap;
236
- row-gap: 12px;
237
- align-items: flex-start;
238
- }
239
-
240
- .tds-page-header [slot="actions"] {
241
- width: auto;
242
- }
243
-
244
- .has-multi-actions.tds-page-header [slot="actions"],
245
- .has-multi-actions.tds-page-header .tds-page-header__actions {
246
- justify-content: flex-end;
247
- }
248
- }
249
-
250
- .tds-page-header-phone,
251
- .tds-page-header-email {
252
- color: var(--tds-page-header-color);
253
- white-space: nowrap;
254
- }
255
-
256
- /* Truncate email */
257
-
258
- .tds-page-header-email {
259
- max-width: 100%;
260
- overflow: hidden;
261
- text-overflow: ellipsis;
262
- }
263
-
264
- @keyframes indicator-pulse {
265
- 0% {
266
- opacity: .3;
267
- transform: scale(.9);
268
- }
269
-
270
- 100% {
271
- opacity: 0;
272
- transform: scale(1.75);
273
- }
274
- }
275
-
276
-
277
- @media (prefers-reduced-motion: no-preference) {
278
-
279
- :root {
280
- interpolate-size: allow-keywords;
281
- }
282
- }
283
-
284
- @layer tds-component {
285
- tds-sidenav, .tds-sidenav {
286
- --tds-sidenav-indent: 12px;
287
- --tds-sidenav-item-depth: 0;
288
-
289
- --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
290
-
291
- --tds-sidenav-item-icon-size: var(--t-element-size-md);
292
- --tds-sidenav-item-background-hover: var(--t-fill-color-button-interaction-ghost-hover);
293
- --tds-sidenav-item-background-active: var(--t-fill-color-button-interaction-ghost-active);
294
- --tds-sidenav-item-background-selected: var(--t-fill-color-button-interaction-ghost-active);
295
-
296
- --tds-sidenav-item-nested-background-hover: var(--tds-sidenav-item-background-hover);
297
- --tds-sidenav-item-nested-background-active: var(--tds-sidenav-item-background-hover);
298
- --tds-sidenav-item-nested-background-selected: transparent;
299
-
300
- --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
301
- --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
302
- --tds-sidenav-item-nested-border-color-selected: var(--t-border-color-status-info);
303
-
304
- --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
305
- --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
306
- }
307
-
308
- .is-classic tds-sidenav, .is-classic .tds-sidenav,
309
- .tds-sidenav--theme-gray {
310
- --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
311
- --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
312
- --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
313
- --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
314
- --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
315
- }
316
- }
317
-
318
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
319
- display: flex;
320
- }
321
-
322
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
323
- flex-direction: column;
324
- gap: var(--t-spacing-half);
325
- width: 100%;
326
- }
327
-
328
- .tds-sidenav-section-list {
329
- width: 100%;
330
- padding: 0;
331
- margin: 0;
332
- list-style: none;
333
- }
334
-
335
- .tds-sidenav-section-header {
336
- display: flex;
337
- align-items: baseline;
338
- justify-content: space-between;
339
- padding-top: var(--t-spacing-2);
340
- }
341
-
342
- .tds-sidenav-section-header h2 {
343
- margin: 0;
344
- font-size: var(--t-font-size-sm);
345
- font-weight: var(--t-font-weight-semibold);
346
- line-height: 1.35;
347
- color: var(--t-text-color-default-secondary);
348
- text-transform: uppercase;
349
- }
350
-
351
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
352
- padding-top: 0;
353
- }
354
-
355
- .tds-sidenav-section-header [slot="label-actions"] {
356
- display: flex;
357
- gap: var(--t-spacing-half);
358
- align-items: center;
359
- }
360
-
361
- .tds-sidenav-section [slot="section-actions"] {
362
- display: flex;
363
- gap: 12px;
364
- align-items: center;
365
- min-height: 42px;
366
- padding: var(--t-spacing-1) 0;
367
- }
368
-
369
- .tds-sidenav-section-list,
370
- .tds-sidenav-item {
371
- width: 100%;
372
- padding: 0;
373
- margin: 0;
374
- }
375
-
376
- .tds-sidenav-item :is(a,button) {
377
- position: relative;
378
- display: flex;
379
- gap: 12px;
380
- align-items: center;
381
- width: 100%;
382
- padding: 12px;
383
- overflow: hidden;
384
- font-size: var(--t-font-size-sm);
385
- line-height: 18px;
386
- color: var(--t-text-color-default-headline);
387
- white-space: nowrap;
388
- text-decoration: none;
389
- -webkit-appearance: none;
390
- -moz-appearance: none;
391
- appearance: none;
392
- cursor: pointer;
393
- background-color: var(--tds-sidenav-item-background, transparent);
394
- border: 0;
395
- border-radius: var(--t-border-radius-default);
396
- transition: var(--tds-sidenav-item-transition);
397
- }
398
-
399
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)) {
400
- display: block;
401
- flex: 1;
402
- overflow: hidden;
403
- text-overflow: ellipsis;
404
- text-align: left;
405
- white-space: nowrap;
406
- }
407
-
408
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
409
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
410
- color: var(--t-text-color-default-headline);
411
- text-decoration: none;
412
- }
413
-
414
- :is(.tds-sidenav-item :is(a,button)):active {
415
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
416
- }
417
-
418
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
419
- overflow: hidden;
420
- color: var(--tds-sidenav-item-icon-color);
421
- }
422
-
423
- :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 {
424
- display: block;
425
- width: var(--tds-sidenav-item-icon-size);
426
- height: var(--tds-sidenav-item-icon-size);
427
- }
150
+ :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 {
151
+ display: block;
152
+ width: var(--tds-sidenav-item-icon-size);
153
+ height: var(--tds-sidenav-item-icon-size);
154
+ }
428
155
 
429
156
  :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
430
157
  --tds-sidenav-indent: 19px;
@@ -602,6 +329,279 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
602
329
  flex-direction: column;
603
330
  }
604
331
 
332
+ @layer t-critical {
333
+ tds-page-header:not(.hydrated) {
334
+ display: none;
335
+ }
336
+ }
337
+
338
+ @layer t-component {
339
+ .tds-page-header {
340
+ --tds-page-header-background-color: var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
341
+ --tds-page-header-background-color-inactive: var(--t-fill-color-neutral-090);
342
+ --tds-page-header-color: var(--t-text-color-default-primary);
343
+ --tds-page-header-headline-color: var(--t-text-color-default-headline);
344
+ --tds-page-header-headline-font-size: var(--t-font-size-2xl);
345
+ --tds-page-header-padding-x: var(--t-spacing-2);
346
+ --tds-page-header-padding-y: var(--t-spacing-2);
347
+ --tds-page-header-nav-padding-x: var(--tds-page-header-padding-x, var(--t-spacing-3));
348
+ --tds-page-header-nav-gap: var(--t-spacing-1);
349
+ --tds-page-header-nav-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
350
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
351
+ --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
352
+ --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
353
+ --tds-page-header-nav-item-background-color: var(--t-fill-color-transparency-light-060);
354
+ --tds-page-header-nav-item-border-width: 1px;
355
+
356
+ --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-background-color);
357
+ --tds-page-header-nav-item-border-bottom-color: var(--t-border-color-default-base);
358
+
359
+ --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
360
+ --tds-page-header-nav-item-background-color-hover: var(--t-fill-color-neutral-080);
361
+ --tds-page-header-nav-item-border-color-hover: var(--tds-page-header-nav-item-background-color-hover);
362
+
363
+ --tds-page-header-nav-item-background-color-active: var(--t-fill-color-neutral-060);
364
+ --tds-page-header-nav-item-border-color-active: var(--tds-page-header-nav-item-background-color-hover);
365
+
366
+ --tds-page-header-nav-item-color-disabled: var(--t-text-color-default-disabled);
367
+ --tds-page-header-nav-item-background-color-disabled: var(--t-fill-color-neutral-080);
368
+ --tds-page-header-nav-item-border-color-disabled: var(--tds-page-header-nav-item-background-color-disabled);
369
+
370
+ --tds-page-header-nav-item-color-selected: var(--t-text-color-default-primary);
371
+ --tds-page-header-nav-item-background-color-selected: var(--t-surface-color-canvas);
372
+ --tds-page-header-nav-item-border-color-selected: var(--tds-page-header-nav-item-background-color-selected);
373
+ --tds-page-header-nav-item-border-bottom-color-selected: var(--tds-page-header-nav-item-background-color-selected);
374
+ --tds-page-header-nav-item-indicator-color: var(--t-icon-color-status-warning-primary);
375
+ }
376
+
377
+ .tds-page-header--profile {
378
+ --tds-page-header-padding-y: 20px;
379
+ }
380
+ @media (min-width: 600px) {
381
+ .tds-page-header {
382
+ --tds-page-header-background-color: var(--t-surface-color-canvas);
383
+ --tds-page-header-color: var(--t-text-color-default-secondary);
384
+ --tds-page-header-padding-x: var(--t-spacing-3);
385
+ --tds-page-header-headline-font-size: var(--t-font-size-3xl);
386
+ --tds-page-header-nav-gap: var(--t-spacing-half);
387
+ --tds-page-header-nav-background: transparent;
388
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
389
+ --tds-page-header-nav-item-border-width: 1px;
390
+ --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
391
+ --tds-page-header-nav-item-background-color: var(--t-fill-color-neutral-070);
392
+ --tds-page-header-nav-item-border-color-selected: var(--t-border-color-default-base);
393
+ }
394
+ }
395
+ }
396
+
397
+ .tds-page-header {
398
+ display: flex;
399
+ flex-direction: column;
400
+ padding-top: var(--tds-page-header-padding-y);
401
+ color: var(--tds-page-header-color);
402
+ background: var(--tds-page-header-background-color);
403
+ border-bottom: 1px solid var(--t-border-color-default-base);
404
+ }
405
+
406
+ .tds-page-header:not(.has-nav) {
407
+ padding-bottom: var(--tds-page-header-padding-y);
408
+ }
409
+
410
+ .tds-page-header.inactive {
411
+ background: var(--tds-page-header-background-color-inactive);
412
+ }
413
+
414
+ .tds-page-header__title-bar {
415
+ display: flex;
416
+ flex-direction: column;
417
+ gap: var(--t-spacing-2) var(--t-spacing-1);
418
+ align-items: flex-start;
419
+ justify-content: space-between;
420
+ padding: 0 var(--tds-page-header-padding-x);
421
+ }
422
+
423
+ .tds-page-header--profile > .tds-page-header__title-bar {
424
+ align-items: center;
425
+ }
426
+
427
+ .tds-page-header__primary {
428
+ width: 100%;
429
+ }
430
+
431
+ .tds-page-header__primary h1 {
432
+ margin: 0;
433
+ font-size: var(--tds-page-header-headline-font-size);
434
+ font-weight: var(--t-font-weight-normal);
435
+ line-height: 32px;
436
+ color: var(--tds-page-header-headline-color);
437
+ overflow-wrap: break-word;
438
+ }
439
+
440
+ .tds-page-header [slot="actions"] {
441
+ width: 100%;
442
+ }
443
+
444
+ .has-multi-actions.tds-page-header [slot="actions"],
445
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
446
+ display: flex;
447
+ flex-flow: row wrap;
448
+ gap: var(--t-spacing-half) var(--t-spacing-1);
449
+ align-items: flex-start;
450
+ justify-content: flex-start;
451
+ min-width: 0;
452
+ }
453
+
454
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
455
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
456
+ .tds-page-header nav[slot="navigation"] ul,
457
+ .tds-page-header nav.tds-page-header__nav ul {
458
+ display: flex;
459
+ gap: var(--tds-page-header-nav-gap);
460
+ padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
461
+ margin: 0 0 -1px;
462
+ overflow: auto;
463
+ list-style: none;
464
+ background: var(--tds-page-header-nav-background);
465
+ }
466
+
467
+ .tds-page-header nav[slot="navigation"] a,
468
+ .tds-page-header nav[slot="navigation"] button,
469
+ .tds-page-header nav.tds-page-header__nav a,
470
+ .tds-page-header nav.tds-page-header__nav button {
471
+ position: relative;
472
+ display: inline-flex;
473
+ padding: var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
474
+ font-size: var(--t-font-size-sm);
475
+ line-height: 22px;
476
+ color: var(--tds-page-header-nav-item-color);
477
+ white-space: nowrap;
478
+ text-decoration: none;
479
+ -webkit-appearance: none;
480
+ -moz-appearance: none;
481
+ appearance: none;
482
+ cursor: pointer;
483
+ outline-offset: -2px;
484
+ background-color: var(--tds-page-header-nav-item-background-color);
485
+ background-clip: padding-box;
486
+ border: var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
487
+ border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
488
+ border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
489
+ }
490
+
491
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) {
492
+ position: relative;
493
+ }
494
+
495
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button) {
496
+ -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
497
+ mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
498
+ }
499
+
500
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
501
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
502
+ position: absolute;
503
+ top: -5px;
504
+ right: -2px;
505
+ width: 10px;
506
+ height: 10px;
507
+ content: "";
508
+ background: var(--tds-page-header-nav-item-indicator-color);
509
+ border-radius: 50%;
510
+ }
511
+
512
+ @media (prefers-reduced-motion: no-preference) {
513
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
514
+ animation: indicator-pulse 1.25s ease infinite;
515
+ }
516
+ }
517
+
518
+ .tds-page-header nav[slot="navigation"] a.selected,
519
+ .tds-page-header nav[slot="navigation"] button.selected,
520
+ .tds-page-header nav.tds-page-header__nav a.selected,
521
+ .tds-page-header nav.tds-page-header__nav button.selected {
522
+ --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-selected);
523
+ --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-selected);
524
+ --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-selected);
525
+ --tds-page-header-nav-item-border-bottom-color: var(--tds-page-header-nav-item-background-color-selected);
526
+ }
527
+
528
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
529
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
530
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
531
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
532
+ --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
533
+ --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-hover);
534
+ --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-hover);
535
+ }
536
+
537
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
538
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
539
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
540
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
541
+ background-color: var(--tds-page-header-nav-item-background-color-active);
542
+ }
543
+
544
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
545
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
546
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
547
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
548
+ color: var(--tds-page-header-nav-item-color-disabled);
549
+ cursor: not-allowed;
550
+ background-color: var(--tds-page-header-nav-item-background-color-disabled);
551
+ opacity: 1;
552
+ }
553
+
554
+ @media (min-width: 960px) {
555
+ .tds-page-header__primary {
556
+ flex: 1 1 max-content;
557
+ width: auto;
558
+ min-width: 0;
559
+ max-width: 100%;
560
+ }
561
+
562
+ .tds-page-header__title-bar,
563
+ .tds-page-header--profile .tds-page-header__title-bar {
564
+ flex-flow: row nowrap;
565
+ row-gap: 12px;
566
+ align-items: flex-start;
567
+ }
568
+
569
+ .tds-page-header [slot="actions"] {
570
+ width: auto;
571
+ }
572
+
573
+ .has-multi-actions.tds-page-header [slot="actions"],
574
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
575
+ justify-content: flex-end;
576
+ }
577
+ }
578
+
579
+ .tds-page-header-phone,
580
+ .tds-page-header-email {
581
+ color: var(--tds-page-header-color);
582
+ white-space: nowrap;
583
+ }
584
+
585
+ /* Truncate email */
586
+
587
+ .tds-page-header-email {
588
+ max-width: 100%;
589
+ overflow: hidden;
590
+ text-overflow: ellipsis;
591
+ }
592
+
593
+ @keyframes indicator-pulse {
594
+ 0% {
595
+ opacity: .3;
596
+ transform: scale(.9);
597
+ }
598
+
599
+ 100% {
600
+ opacity: 0;
601
+ transform: scale(1.75);
602
+ }
603
+ }
604
+
605
605
  .tds-loading-spinner {
606
606
  --tds-loading-spinner-size: 1.25em;
607
607
 
@@ -994,8 +994,8 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
994
994
  --t-fill-color-transparency-dark-070: hsla(0, 0%, 0%, 0.7);
995
995
  --t-fill-color-transparency-dark-080: hsla(0, 0%, 0%, 0.8);
996
996
  --t-fill-color-transparency-dark-090: hsla(0, 0%, 0%, 0.9);
997
- --t-surface-color-canvas: hsl(0, 0%, 98%);
998
997
  --t-surface-color-card: hsl(0, 0%, 100%);
998
+ --t-surface-color-canvas: hsl(0, 0%, 100%);
999
999
  --t-border-color-default-base: hsl(0, 0%, 88%);
1000
1000
  --t-border-color-default-dark: hsl(0, 0%, 81%);
1001
1001
  --t-border-color-default-darker: hsl(0, 0%, 68%);