@planningcenter/tapestry 1.5.0-rc.16 → 1.5.0-rc.17

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 (29) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/tapestry-wc/dist/components/{p-DQ53q9O9.js → p-CA7zK3SO.js} +3 -3
  4. package/dist/tapestry-wc/dist/components/{p-DQ53q9O9.js.map → p-CA7zK3SO.js.map} +1 -1
  5. package/dist/tapestry-wc/dist/components/{p-DPCj7GKm.js → p-CfU_LYGG.js} +3 -3
  6. package/dist/tapestry-wc/dist/components/{p-DPCj7GKm.js.map → p-CfU_LYGG.js.map} +1 -1
  7. package/dist/tapestry-wc/dist/components/{p-BmJfF5rh.js → p-Cwy_O_rw.js} +2 -2
  8. package/dist/tapestry-wc/dist/components/{p-BmJfF5rh.js.map → p-Cwy_O_rw.js.map} +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-0NOtJtQw.js → p-DIJkUYRO.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-0NOtJtQw.js.map → p-DIJkUYRO.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-CBPDAAEc.js → p-Dj3aFWtM.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-CBPDAAEc.js.map → p-Dj3aFWtM.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  14. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  15. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  16. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  17. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  18. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  20. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  24. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  25. package/dist/unstable.css +538 -538
  26. package/dist/unstable.css.map +1 -1
  27. package/dist/webComponents.css +538 -538
  28. package/dist/webComponents.css.map +1 -1
  29. package/package.json +5 -4
package/dist/webComponents.css CHANGED
@@ -1,441 +1,132 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- @layer t-critical {
4
- tds-page-header:not(.hydrated) {
5
- display: none;
6
- }
7
- }
8
3
 
9
- @layer t-component {
10
- .tds-page-header {
11
- --tds-page-header-background-color: var(
12
- --t-fill-color-product-current-gradient-tint,
13
- var(--t-surface-color-card)
14
- );
15
- --tds-page-header-background-color-inactive: var(
16
- --t-fill-color-transparency-dark-010
17
- );
18
- --tds-page-header-color: var(--t-text-color-default-secondary);
19
- --tds-page-header-headline-color: var(--t-text-color-default-headline);
20
- --tds-page-header-padding-x: var(--t-spacing-2);
21
- --tds-page-header-padding-y: var(--t-spacing-2);
22
- --tds-page-header-nav-padding-x: var(
23
- --tds-page-header-padding-x,
24
- var(--t-spacing-3)
25
- );
26
- --tds-page-header-nav-background: linear-gradient(
27
- 180deg,
28
- rgba(0, 0, 0, 0) 0%,
29
- rgba(0, 0, 0, 0.1) 100%
30
- );
31
- --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
32
- --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
33
- --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
34
- --tds-page-header-nav-item-background-color: var(
35
- --t-fill-color-transparency-light-060
36
- );
37
- --tds-page-header-nav-item-border-width: 0;
4
+ @media (prefers-reduced-motion: no-preference) {
38
5
 
39
- --tds-page-header-nav-item-border-color: var(
40
- --tds-page-header-nav-item-background-color
41
- );
42
- --tds-page-header-nav-item-border-bottom-color: var(
43
- --t-border-color-default-base
44
- );
6
+ :root {
7
+ interpolate-size: allow-keywords;
8
+ }
9
+ }
45
10
 
46
- --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
47
- --tds-page-header-nav-item-background-color-hover: var(
48
- --t-fill-color-neutral-080
49
- );
50
- --tds-page-header-nav-item-border-color-hover: var(
51
- --tds-page-header-nav-item-background-color-hover
52
- );
11
+ @layer tds-component {
12
+ tds-sidenav {
13
+ --tds-sidenav-indent: 12px;
14
+ --tds-sidenav-item-depth: 0;
53
15
 
54
- --tds-page-header-nav-item-background-color-active: var(
55
- --t-fill-color-neutral-060
56
- );
57
- --tds-page-header-nav-item-border-color-active: var(
58
- --tds-page-header-nav-item-background-color-hover
59
- );
16
+ --tds-sidenav-item-transition: background-color 0.2s
17
+ cubic-bezier(0.19, 0.91, 0.38, 1);
60
18
 
61
- --tds-page-header-nav-item-color-disabled: var(
62
- --t-text-color-default-disabled
19
+ --tds-sidenav-item-background-hover: var(
20
+ --t-fill-color-button-interaction-ghost-hover
63
21
  );
64
- --tds-page-header-nav-item-background-color-disabled: var(
65
- --t-fill-color-neutral-080
22
+ --tds-sidenav-item-background-active: var(
23
+ --t-fill-color-button-interaction-ghost-active
66
24
  );
67
- --tds-page-header-nav-item-border-color-disabled: var(
68
- --tds-page-header-nav-item-background-color-disabled
25
+ --tds-sidenav-item-background-selected: var(
26
+ --t-fill-color-button-interaction-ghost-active
69
27
  );
70
28
 
71
- --tds-page-header-nav-item-color-selected: var(
72
- --t-text-color-default-primary
73
- );
74
- --tds-page-header-nav-item-border-color-selected: var(
75
- --t-border-color-default-base
76
- );
77
- --tds-page-header-nav-item-background-color-selected: var(
78
- --t-fill-color-neutral-100
79
- );
80
- --tds-page-header-nav-item-border-bottom-color-selected: var(
81
- --tds-page-header-nav-item-background-color-selected
29
+ --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
30
+ --tds-sidenav-item-nested-border-color-hover: var(
31
+ --t-fill-color-neutral-050
82
32
  );
83
- --tds-page-header-nav-item-indicator-color: var(
84
- --t-icon-color-status-warning-primary
33
+ --tds-sidenav-item-nested-border-color-selected: var(
34
+ --t-border-color-status-info
85
35
  );
36
+
37
+ --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
38
+ --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
86
39
  }
87
40
 
88
- @media (min-width: 720px) {
89
- .tds-page-header {
90
- --tds-page-header-background-color: var(--t-surface-color-card);
91
- --tds-page-header-padding-x: var(--t-spacing-3);
92
- --tds-page-header-nav-background: transparent;
93
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
94
- --tds-page-header-nav-item-border-width: 1px;
95
- --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
96
- --tds-page-header-nav-item-background-color: var(
97
- --t-fill-color-neutral-070
98
- );
99
- }
41
+ .is-classic tds-sidenav,
42
+ .tds-sidenav--theme-gray {
43
+ --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
44
+ --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
45
+ --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
46
+ --tds-sidenav-item-nested-border-color-hover: var(
47
+ --t-fill-color-neutral-050
48
+ );
49
+ --tds-sidenav-item-nested-border-color-selected: var(
50
+ --t-fill-color-neutral-010
51
+ );
100
52
  }
101
53
  }
102
54
 
103
- .tds-page-header {
104
- display: flex;
105
- flex-direction: column;
106
- padding-top: var(--tds-page-header-padding-y);
107
- color: var(--tds-page-header-color);
108
- background: var(--tds-page-header-background-color);
109
- border-bottom: 1px solid var(--t-border-color-default-base);
110
- }
55
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
56
+ display: flex;
57
+ }
111
58
 
112
- .tds-page-header:not(.has-nav) {
113
- padding-bottom: var(--tds-page-header-padding-y);
114
- }
59
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
60
+ flex-direction: column;
61
+ gap: var(--t-spacing-half);
62
+ width: 100%;
63
+ }
115
64
 
116
- .tds-page-header.inactive {
117
- background-color: var(--tds-page-header-background-color-inactive);
65
+ .tds-sidenav-section-list {
66
+ width: 100%;
67
+ padding: 0;
68
+ margin: 0;
69
+ list-style: none;
118
70
  }
119
71
 
120
- .tds-page-header__title-bar {
72
+ .tds-sidenav-section-header {
121
73
  display: flex;
122
- flex-direction: column;
123
- gap: var(--t-spacing-2) var(--t-spacing-half);
124
- align-items: flex-start;
74
+ align-items: baseline;
125
75
  justify-content: space-between;
126
- padding: 0 var(--tds-page-header-padding-x);
76
+ padding-top: var(--t-spacing-2);
127
77
  }
128
78
 
129
- .tds-page-header--profile > .tds-page-header__title-bar {
130
- align-items: center;
131
- }
79
+ .tds-sidenav-section-header h2 {
80
+ margin: 0;
81
+ font-size: var(--t-font-size-sm);
82
+ font-weight: var(--t-font-weight-semibold);
83
+ color: var(--t-text-color-default-secondary);
84
+ text-transform: uppercase;
85
+ line-height: 1.35;
86
+ }
132
87
 
133
- .tds-page-header__primary {
134
- flex: 1 1 auto;
135
- width: 100%;
136
- }
88
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
89
+ margin-top: 0;
90
+ }
137
91
 
138
- .tds-page-header__primary h1 {
92
+ .tds-sidenav-section-list,
93
+ .tds-sidenav-item {
94
+ width: 100%;
95
+ padding: 0;
139
96
  margin: 0;
140
- font-size: var(--t-font-size-3xl);
141
- font-weight: var(--t-font-weight-normal);
142
- line-height: 40px;
143
- color: var(--tds-page-header-headline-color);
144
- }
145
-
146
- .has-multi-actions.tds-page-header [slot="actions"],
147
- .has-multi-actions.tds-page-header .tds-page-header__actions {
148
- display: flex;
149
- flex-flow: row wrap;
150
- gap: var(--t-spacing-half) var(--t-spacing-1);
151
- align-items: flex-start;
152
- justify-content: flex-start;
153
97
  }
154
98
 
155
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
156
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
157
- .tds-page-header nav[slot="navigation"] ul,
158
- .tds-page-header nav.tds-page-header__nav ul {
159
- display: flex;
160
- gap: var(--t-spacing-half);
161
- padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
162
- margin: 0 0 -1px;
163
- overflow: auto;
164
- list-style: none;
165
- background: var(--tds-page-header-nav-background);
166
- }
99
+ .tds-sidenav-item :is(a,button) {
100
+ position: relative;
101
+ display: flex;
102
+ gap: 12px;
103
+ align-items: center;
104
+ width: 100%;
105
+ padding: 12px;
106
+ overflow: hidden;
107
+ font-size: var(--t-font-size-sm);
108
+ line-height: 18px;
109
+ color: var(--t-text-color-default-headline);
110
+ white-space: nowrap;
111
+ text-decoration: none;
112
+ -webkit-appearance: none;
113
+ -moz-appearance: none;
114
+ appearance: none;
115
+ cursor: pointer;
116
+ background-color: var(--tds-sidenav-item-background, transparent);
117
+ border: 0;
118
+ border-radius: var(--t-border-radius-default);
119
+ transition: var(--tds-sidenav-item-transition);
120
+ }
167
121
 
168
- .tds-page-header nav[slot="navigation"] a,
169
- .tds-page-header nav[slot="navigation"] button,
170
- .tds-page-header nav.tds-page-header__nav a,
171
- .tds-page-header nav.tds-page-header__nav button {
172
- position: relative;
173
- display: inline-flex;
174
- padding: var(--tds-page-header-nav-item-padding-y)
175
- var(--tds-page-header-nav-item-padding-x);
176
- font-size: var(--t-font-size-md);
177
- color: var(--tds-page-header-nav-item-color);
178
- white-space: nowrap;
179
- text-decoration: none;
180
- -webkit-appearance: none;
181
- -moz-appearance: none;
182
- appearance: none;
183
- cursor: pointer;
184
- outline-offset: -2px;
185
- background-color: var(--tds-page-header-nav-item-background-color);
186
- border: var(--tds-page-header-nav-item-border-width) solid
187
- var(--tds-page-header-nav-item-border-color);
188
- border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
189
- border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
190
- }
191
-
192
- .tds-page-header
193
- nav:is([slot="navigation"], .tds-page-header__nav)
194
- li:has(.indicator) {
195
- position: relative;
196
- }
197
-
198
- .tds-page-header
199
- nav:is([slot="navigation"], .tds-page-header__nav)
200
- li:has(.indicator)
201
- :is(a, button) {
202
- -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
203
- mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
204
- }
205
-
206
- .tds-page-header
207
- nav:is([slot="navigation"], .tds-page-header__nav)
208
- li:has(.indicator)::before,
209
- .tds-page-header
210
- nav:is([slot="navigation"], .tds-page-header__nav)
211
- li:has(.indicator)::after {
212
- position: absolute;
213
- top: -5px;
214
- right: -2px;
215
- width: 10px;
216
- height: 10px;
217
- content: "";
218
- background: var(--tds-page-header-nav-item-indicator-color);
219
- border-radius: 50%;
220
- }
221
-
222
- @media (prefers-reduced-motion: no-preference) {
223
- .tds-page-header
224
- nav:is([slot="navigation"], .tds-page-header__nav)
225
- li:has(.indicator)::after {
226
- animation: indicator-pulse 1.25s ease infinite;
227
- }
228
- }
229
-
230
- .tds-page-header nav[slot="navigation"] a.selected,
231
- .tds-page-header nav[slot="navigation"] button.selected,
232
- .tds-page-header nav.tds-page-header__nav a.selected,
233
- .tds-page-header nav.tds-page-header__nav button.selected {
234
- --tds-page-header-nav-item-color: var(
235
- --tds-page-header-nav-item-color-selected
236
- );
237
- --tds-page-header-nav-item-border-color: var(
238
- --tds-page-header-nav-item-border-color-selected
239
- );
240
- --tds-page-header-nav-item-background-color: var(
241
- --tds-page-header-nav-item-background-color-selected
242
- );
243
- --tds-page-header-nav-item-border-bottom-color: var(
244
- --tds-page-header-nav-item-background-color-selected
245
- );
246
- }
247
-
248
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
249
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
250
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
251
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
252
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
253
- --tds-page-header-nav-item-background-color: var(
254
- --tds-page-header-nav-item-background-color-hover
255
- );
256
- --tds-page-header-nav-item-border-color: var(
257
- --tds-page-header-nav-item-border-color-hover
258
- );
259
- }
260
-
261
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
262
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
263
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
264
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
265
- background-color: var(--tds-page-header-nav-item-background-color-active);
266
- }
267
-
268
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
269
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
270
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
271
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
272
- color: var(--tds-page-header-nav-item-color-disabled);
273
- cursor: not-allowed;
274
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
275
- opacity: 1;
276
- }
277
-
278
- @media (min-width: 720px) {
279
- .tds-page-header__title-bar,
280
- .tds-page-header--profile .tds-page-header__title-bar {
281
- flex-direction: row;
282
- align-items: flex-start;
283
- }
284
-
285
- .tds-page-header__primary {
286
- width: auto;
287
- }
288
-
289
- [slot="actions"],
290
- .tds-page-header__actions {
291
- margin-left: auto;
292
- }
293
-
294
- .has-multi-actions.tds-page-header [slot="actions"],
295
- .has-multi-actions.tds-page-header .tds-page-header__actions {
296
- flex-flow: row wrap;
297
- margin-top: var(--t-spacing-half);
298
- }
299
- }
300
-
301
- @keyframes indicator-pulse {
302
- 0% {
303
- opacity: 0.3;
304
- transform: scale(0.9);
305
- }
306
- 100% {
307
- opacity: 0;
308
- transform: scale(1.75);
309
- }
310
- }
311
-
312
-
313
- @media (prefers-reduced-motion: no-preference) {
314
-
315
- :root {
316
- interpolate-size: allow-keywords;
317
- }
318
- }
319
-
320
- @layer tds-component {
321
- tds-sidenav {
322
- --tds-sidenav-indent: 12px;
323
- --tds-sidenav-item-depth: 0;
324
-
325
- --tds-sidenav-item-transition: background-color 0.2s
326
- cubic-bezier(0.19, 0.91, 0.38, 1);
327
-
328
- --tds-sidenav-item-background-hover: var(
329
- --t-fill-color-button-interaction-ghost-hover
330
- );
331
- --tds-sidenav-item-background-active: var(
332
- --t-fill-color-button-interaction-ghost-active
333
- );
334
- --tds-sidenav-item-background-selected: var(
335
- --t-fill-color-button-interaction-ghost-active
336
- );
337
-
338
- --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
339
- --tds-sidenav-item-nested-border-color-hover: var(
340
- --t-fill-color-neutral-050
341
- );
342
- --tds-sidenav-item-nested-border-color-selected: var(
343
- --t-border-color-status-info
344
- );
345
-
346
- --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
347
- --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
348
- }
349
-
350
- .is-classic tds-sidenav,
351
- .tds-sidenav--theme-gray {
352
- --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
353
- --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
354
- --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
355
- --tds-sidenav-item-nested-border-color-hover: var(
356
- --t-fill-color-neutral-050
357
- );
358
- --tds-sidenav-item-nested-border-color-selected: var(
359
- --t-fill-color-neutral-010
360
- );
361
- }
362
- }
363
-
364
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
365
- display: flex;
366
- }
367
-
368
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
369
- flex-direction: column;
370
- gap: var(--t-spacing-half);
371
- width: 100%;
372
- }
373
-
374
- .tds-sidenav-section-list {
375
- width: 100%;
376
- padding: 0;
377
- margin: 0;
378
- list-style: none;
379
- }
380
-
381
- .tds-sidenav-section-header {
382
- display: flex;
383
- align-items: baseline;
384
- justify-content: space-between;
385
- padding-top: var(--t-spacing-2);
386
- }
387
-
388
- .tds-sidenav-section-header h2 {
389
- margin: 0;
390
- font-size: var(--t-font-size-sm);
391
- font-weight: var(--t-font-weight-semibold);
392
- color: var(--t-text-color-default-secondary);
393
- text-transform: uppercase;
394
- line-height: 1.35;
395
- }
396
-
397
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
398
- margin-top: 0;
399
- }
400
-
401
- .tds-sidenav-section-list,
402
- .tds-sidenav-item {
403
- width: 100%;
404
- padding: 0;
405
- margin: 0;
406
- }
407
-
408
- .tds-sidenav-item :is(a,button) {
409
- position: relative;
410
- display: flex;
411
- gap: 12px;
412
- align-items: center;
413
- width: 100%;
414
- padding: 12px;
415
- overflow: hidden;
416
- font-size: var(--t-font-size-sm);
417
- line-height: 18px;
418
- color: var(--t-text-color-default-headline);
419
- white-space: nowrap;
420
- text-decoration: none;
421
- -webkit-appearance: none;
422
- -moz-appearance: none;
423
- appearance: none;
424
- cursor: pointer;
425
- background-color: var(--tds-sidenav-item-background, transparent);
426
- border: 0;
427
- border-radius: var(--t-border-radius-default);
428
- transition: var(--tds-sidenav-item-transition);
429
- }
430
-
431
- :is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
432
- display: block;
433
- flex: 1;
434
- overflow: hidden;
435
- text-overflow: ellipsis;
436
- text-align: left;
437
- white-space: nowrap;
438
- }
122
+ :is(.tds-sidenav-item :is(a,button)):not(:has([slot="prefix"],.prefix,[slot="suffix"],.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not([slot="prefix"],.prefix,[slot="suffix"],.suffix)) {
123
+ display: block;
124
+ flex: 1;
125
+ overflow: hidden;
126
+ text-overflow: ellipsis;
127
+ text-align: left;
128
+ white-space: nowrap;
129
+ }
439
130
 
440
131
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
441
132
  --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
@@ -866,167 +557,476 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
866
557
  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
867
558
  }
868
559
 
869
- .tds-btn--ghost-neutral {
870
- --tds-btn-color: var(--t-text-color-status-neutral);
871
- --tds-btn-border-color: transparent;
872
- --tds-btn-color-hover: var(--tds-btn-color);
873
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
874
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
875
- --tds-btn-color-active: var(--tds-btn-color);
876
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
877
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
878
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
879
- --tds-btn-bg-disabled: transparent;
880
- --tds-btn-border-color-disabled: transparent;
560
+ .tds-btn--ghost-neutral {
561
+ --tds-btn-color: var(--t-text-color-status-neutral);
562
+ --tds-btn-border-color: transparent;
563
+ --tds-btn-color-hover: var(--tds-btn-color);
564
+ --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
565
+ --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
566
+ --tds-btn-color-active: var(--tds-btn-color);
567
+ --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
568
+ --tds-btn-border-color-active: var(--tds-btn-bg-active);
569
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
570
+ --tds-btn-bg-disabled: transparent;
571
+ --tds-btn-border-color-disabled: transparent;
572
+ }
573
+
574
+ .tds-btn--ghost-interaction {
575
+ --tds-btn-color: var(--t-text-color-status-info);
576
+ --tds-btn-border-color: transparent;
577
+ --tds-btn-color-hover: var(--tds-btn-color);
578
+ --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
579
+ --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
580
+ --tds-btn-color-active: var(--tds-btn-color);
581
+ --tds-btn-bg-active: var(
582
+ --t-fill-color-button-interaction-outline-dim-active
583
+ );
584
+ --tds-btn-border-color-active: var(--tds-btn-bg-active);
585
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
586
+ --tds-btn-bg-disabled: transparent;
587
+ --tds-btn-border-color-disabled: transparent;
588
+ }
589
+
590
+ .tds-btn--ghost-delete {
591
+ --tds-btn-color: var(--t-text-color-status-error);
592
+ --tds-btn-border-color: transparent;
593
+ --tds-btn-color-hover: var(--tds-btn-color);
594
+ --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
595
+ --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
596
+ --tds-btn-color-active: var(--tds-btn-color);
597
+ --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
598
+ --tds-btn-border-color-active: var(--tds-btn-bg-active);
599
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
600
+ --tds-btn-bg-disabled: transparent;
601
+ --tds-btn-border-color-disabled: transparent;
602
+ }
603
+
604
+ .tds-btn--primary-page-header {
605
+ --tds-btn-color: var(--t-text-color-default-inverted);
606
+ --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
607
+ --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
608
+ --tds-btn-color-hover: var(--t-text-color-default-inverted);
609
+ --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
610
+ --tds-btn-border-color-hover: var(
611
+ --t-fill-color-button-interaction-solid-hover
612
+ );
613
+ --tds-btn-color-active: var(--t-text-color-default-inverted);
614
+ --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
615
+ --tds-btn-border-color-active: var(
616
+ --t-fill-color-button-interaction-solid-active
617
+ );
618
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
619
+ --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
620
+ --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
621
+ }
622
+
623
+ .tds-btn--secondary-page-header {
624
+ --tds-btn-border-width: 0;
625
+ --tds-btn-color: var(--t-text-color-status-neutral);
626
+ --tds-btn-bg: var(--t-fill-color-button-neutral-responsive-header-default);
627
+ --tds-btn-border-color: var(
628
+ --t-fill-color-button-neutral-responsive-header-default
629
+ );
630
+ --tds-btn-color-hover: var(--t-text-color-status-neutral);
631
+ --tds-btn-bg-hover: var(
632
+ --t-fill-color-button-neutral-responsive-header-hover
633
+ );
634
+ --tds-btn-border-color-hover: var(
635
+ --t-fill-color-button-neutral-responsive-header-hover
636
+ );
637
+ --tds-btn-color-active: var(--t-text-color-status-neutral);
638
+ --tds-btn-bg-active: var(
639
+ --t-fill-color-button-neutral-responsive-header-active
640
+ );
641
+ --tds-btn-border-color-active: var(
642
+ --t-fill-color-button-neutral-responsive-header-active
643
+ );
644
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
645
+ --tds-btn-bg-disabled: var(
646
+ --t-fill-color-button-neutral-responsive-header-disabled
647
+ );
648
+ --tds-btn-border-color-disabled: var(
649
+ --t-fill-color-button-neutral-responsive-header-disabled
650
+ );
651
+ }
652
+
653
+ @media (min-width: 720px) {
654
+
655
+ .tds-btn--secondary-page-header {
656
+ --tds-btn-border-width: 1px;
657
+ --tds-btn-color: var(--t-text-color-status-neutral);
658
+ --tds-btn-bg: transparent;
659
+ --tds-btn-border-color: var(--t-border-color-button-neutral);
660
+ --tds-btn-color-hover: var(--tds-btn-color);
661
+ --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
662
+ --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
663
+ --tds-btn-color-active: var(--tds-btn-color);
664
+ --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
665
+ --tds-btn-border-color-active: var(--t-border-color-button-neutral);
666
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
667
+ --tds-btn-bg-disabled: var(
668
+ --t-fill-color-button-neutral-outline-dim-disabled
669
+ );
670
+ --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
671
+ }
672
+ }
673
+
674
+ .tds-btn--pill {
675
+ --tds-btn-border-radius: 999px;
676
+ --tds-btn-padding-y: 4px;
677
+ --tds-btn-padding-x: 13px;
678
+
679
+ --tds-btn-color: var(--t-text-color-default-primary);
680
+ --tds-btn-bg: var(--t-fill-color-button-pill-default);
681
+ --tds-btn-border-color: var(--tds-btn-bg);
682
+ --tds-btn-color-hover: var(--tds-btn-color);
683
+ --tds-btn-bg-hover: var(--t-fill-color-button-pill-hover);
684
+ --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
685
+
686
+ --tds-btn-color-active: var(--tds-btn-color);
687
+ --tds-btn-bg-active: var(--t-fill-color-button-pill-active);
688
+ --tds-btn-border-color-active: var(--tds-btn-bg-active);
689
+ --tds-btn-color-disabled: var(--t-text-color-default-disabled);
690
+ --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
691
+ --tds-btn-border-color-disabled: var(
692
+ --t-fill-color-button-neutral-solid-disabled
693
+ );
694
+ --tds-btn-icon-color: var(--t-icon-color-default-secondary);
695
+ --tds-btn-min-height: 32px;
696
+ }
697
+
698
+ .tds-btn--pill:is(.tds-btn--sm) {
699
+ --tds-btn-padding-y: 1px;
700
+ --tds-btn-padding-x: 7px;
701
+ --tds-btn-min-height: auto;
702
+ }
703
+
704
+ .tds-btn--pill:is(.tds-btn--xs) {
705
+ --tds-btn-padding-y: 1px;
706
+ --tds-btn-padding-x: 9px;
707
+ --tds-btn-min-height: auto;
708
+ }
709
+
710
+ .tds-btn--pill:disabled,.tds-btn--pill.disabled {
711
+ --tds-btn-icon-color: inherit;
712
+ }
713
+
714
+ .tds-btn--dropdown .suffix {
715
+ transition: transform 0.2s ease-in-out;
716
+ }
717
+
718
+ .tds-btn--dropdown[aria-expanded="true"] .suffix {
719
+ transform: rotate(-180deg);
720
+ }
721
+ @layer t-critical {
722
+ tds-page-header:not(.hydrated) {
723
+ display: none;
724
+ }
725
+ }
726
+
727
+ @layer t-component {
728
+ .tds-page-header {
729
+ --tds-page-header-background-color: var(
730
+ --t-fill-color-product-current-gradient-tint,
731
+ var(--t-surface-color-card)
732
+ );
733
+ --tds-page-header-background-color-inactive: var(
734
+ --t-fill-color-transparency-dark-010
735
+ );
736
+ --tds-page-header-color: var(--t-text-color-default-secondary);
737
+ --tds-page-header-headline-color: var(--t-text-color-default-headline);
738
+ --tds-page-header-padding-x: var(--t-spacing-2);
739
+ --tds-page-header-padding-y: var(--t-spacing-2);
740
+ --tds-page-header-nav-padding-x: var(
741
+ --tds-page-header-padding-x,
742
+ var(--t-spacing-3)
743
+ );
744
+ --tds-page-header-nav-background: linear-gradient(
745
+ 180deg,
746
+ rgba(0, 0, 0, 0) 0%,
747
+ rgba(0, 0, 0, 0.1) 100%
748
+ );
749
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
750
+ --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
751
+ --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
752
+ --tds-page-header-nav-item-background-color: var(
753
+ --t-fill-color-transparency-light-060
754
+ );
755
+ --tds-page-header-nav-item-border-width: 0;
756
+
757
+ --tds-page-header-nav-item-border-color: var(
758
+ --tds-page-header-nav-item-background-color
759
+ );
760
+ --tds-page-header-nav-item-border-bottom-color: var(
761
+ --t-border-color-default-base
762
+ );
763
+
764
+ --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
765
+ --tds-page-header-nav-item-background-color-hover: var(
766
+ --t-fill-color-neutral-080
767
+ );
768
+ --tds-page-header-nav-item-border-color-hover: var(
769
+ --tds-page-header-nav-item-background-color-hover
770
+ );
771
+
772
+ --tds-page-header-nav-item-background-color-active: var(
773
+ --t-fill-color-neutral-060
774
+ );
775
+ --tds-page-header-nav-item-border-color-active: var(
776
+ --tds-page-header-nav-item-background-color-hover
777
+ );
778
+
779
+ --tds-page-header-nav-item-color-disabled: var(
780
+ --t-text-color-default-disabled
781
+ );
782
+ --tds-page-header-nav-item-background-color-disabled: var(
783
+ --t-fill-color-neutral-080
784
+ );
785
+ --tds-page-header-nav-item-border-color-disabled: var(
786
+ --tds-page-header-nav-item-background-color-disabled
787
+ );
788
+
789
+ --tds-page-header-nav-item-color-selected: var(
790
+ --t-text-color-default-primary
791
+ );
792
+ --tds-page-header-nav-item-border-color-selected: var(
793
+ --t-border-color-default-base
794
+ );
795
+ --tds-page-header-nav-item-background-color-selected: var(
796
+ --t-fill-color-neutral-100
797
+ );
798
+ --tds-page-header-nav-item-border-bottom-color-selected: var(
799
+ --tds-page-header-nav-item-background-color-selected
800
+ );
801
+ --tds-page-header-nav-item-indicator-color: var(
802
+ --t-icon-color-status-warning-primary
803
+ );
804
+ }
805
+
806
+ @media (min-width: 720px) {
807
+ .tds-page-header {
808
+ --tds-page-header-background-color: var(--t-surface-color-card);
809
+ --tds-page-header-padding-x: var(--t-spacing-3);
810
+ --tds-page-header-nav-background: transparent;
811
+ --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
812
+ --tds-page-header-nav-item-border-width: 1px;
813
+ --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
814
+ --tds-page-header-nav-item-background-color: var(
815
+ --t-fill-color-neutral-070
816
+ );
817
+ }
818
+ }
819
+ }
820
+
821
+ .tds-page-header {
822
+ display: flex;
823
+ flex-direction: column;
824
+ padding-top: var(--tds-page-header-padding-y);
825
+ color: var(--tds-page-header-color);
826
+ background: var(--tds-page-header-background-color);
827
+ border-bottom: 1px solid var(--t-border-color-default-base);
828
+ }
829
+
830
+ .tds-page-header:not(.has-nav) {
831
+ padding-bottom: var(--tds-page-header-padding-y);
832
+ }
833
+
834
+ .tds-page-header.inactive {
835
+ background-color: var(--tds-page-header-background-color-inactive);
836
+ }
837
+
838
+ .tds-page-header__title-bar {
839
+ display: flex;
840
+ flex-direction: column;
841
+ gap: var(--t-spacing-2) var(--t-spacing-half);
842
+ align-items: flex-start;
843
+ justify-content: space-between;
844
+ padding: 0 var(--tds-page-header-padding-x);
845
+ }
846
+
847
+ .tds-page-header--profile > .tds-page-header__title-bar {
848
+ align-items: center;
849
+ }
850
+
851
+ .tds-page-header__primary {
852
+ flex: 1 1 auto;
853
+ width: 100%;
854
+ }
855
+
856
+ .tds-page-header__primary h1 {
857
+ margin: 0;
858
+ font-size: var(--t-font-size-3xl);
859
+ font-weight: var(--t-font-weight-normal);
860
+ line-height: 40px;
861
+ color: var(--tds-page-header-headline-color);
862
+ }
863
+
864
+ .has-multi-actions.tds-page-header [slot="actions"],
865
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
866
+ display: flex;
867
+ flex-flow: row wrap;
868
+ gap: var(--t-spacing-half) var(--t-spacing-1);
869
+ align-items: flex-start;
870
+ justify-content: flex-start;
871
+ }
872
+
873
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
874
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
875
+ .tds-page-header nav[slot="navigation"] ul,
876
+ .tds-page-header nav.tds-page-header__nav ul {
877
+ display: flex;
878
+ gap: var(--t-spacing-half);
879
+ padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
880
+ margin: 0 0 -1px;
881
+ overflow: auto;
882
+ list-style: none;
883
+ background: var(--tds-page-header-nav-background);
884
+ }
885
+
886
+ .tds-page-header nav[slot="navigation"] a,
887
+ .tds-page-header nav[slot="navigation"] button,
888
+ .tds-page-header nav.tds-page-header__nav a,
889
+ .tds-page-header nav.tds-page-header__nav button {
890
+ position: relative;
891
+ display: inline-flex;
892
+ padding: var(--tds-page-header-nav-item-padding-y)
893
+ var(--tds-page-header-nav-item-padding-x);
894
+ font-size: var(--t-font-size-md);
895
+ color: var(--tds-page-header-nav-item-color);
896
+ white-space: nowrap;
897
+ text-decoration: none;
898
+ -webkit-appearance: none;
899
+ -moz-appearance: none;
900
+ appearance: none;
901
+ cursor: pointer;
902
+ outline-offset: -2px;
903
+ background-color: var(--tds-page-header-nav-item-background-color);
904
+ border: var(--tds-page-header-nav-item-border-width) solid
905
+ var(--tds-page-header-nav-item-border-color);
906
+ border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
907
+ border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
881
908
  }
882
909
 
883
- .tds-btn--ghost-interaction {
884
- --tds-btn-color: var(--t-text-color-status-info);
885
- --tds-btn-border-color: transparent;
886
- --tds-btn-color-hover: var(--tds-btn-color);
887
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
888
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
889
- --tds-btn-color-active: var(--tds-btn-color);
890
- --tds-btn-bg-active: var(
891
- --t-fill-color-button-interaction-outline-dim-active
892
- );
893
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
894
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
895
- --tds-btn-bg-disabled: transparent;
896
- --tds-btn-border-color-disabled: transparent;
910
+ .tds-page-header
911
+ nav:is([slot="navigation"], .tds-page-header__nav)
912
+ li:has(.indicator) {
913
+ position: relative;
897
914
  }
898
915
 
899
- .tds-btn--ghost-delete {
900
- --tds-btn-color: var(--t-text-color-status-error);
901
- --tds-btn-border-color: transparent;
902
- --tds-btn-color-hover: var(--tds-btn-color);
903
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
904
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
905
- --tds-btn-color-active: var(--tds-btn-color);
906
- --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
907
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
908
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
909
- --tds-btn-bg-disabled: transparent;
910
- --tds-btn-border-color-disabled: transparent;
916
+ .tds-page-header
917
+ nav:is([slot="navigation"], .tds-page-header__nav)
918
+ li:has(.indicator)
919
+ :is(a, button) {
920
+ -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
921
+ mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
911
922
  }
912
923
 
913
- .tds-btn--primary-page-header {
914
- --tds-btn-color: var(--t-text-color-default-inverted);
915
- --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
916
- --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
917
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
918
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
919
- --tds-btn-border-color-hover: var(
920
- --t-fill-color-button-interaction-solid-hover
921
- );
922
- --tds-btn-color-active: var(--t-text-color-default-inverted);
923
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
924
- --tds-btn-border-color-active: var(
925
- --t-fill-color-button-interaction-solid-active
926
- );
927
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
928
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
929
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
924
+ .tds-page-header
925
+ nav:is([slot="navigation"], .tds-page-header__nav)
926
+ li:has(.indicator)::before,
927
+ .tds-page-header
928
+ nav:is([slot="navigation"], .tds-page-header__nav)
929
+ li:has(.indicator)::after {
930
+ position: absolute;
931
+ top: -5px;
932
+ right: -2px;
933
+ width: 10px;
934
+ height: 10px;
935
+ content: "";
936
+ background: var(--tds-page-header-nav-item-indicator-color);
937
+ border-radius: 50%;
930
938
  }
931
939
 
932
- .tds-btn--secondary-page-header {
933
- --tds-btn-border-width: 0;
934
- --tds-btn-color: var(--t-text-color-status-neutral);
935
- --tds-btn-bg: var(--t-fill-color-button-neutral-responsive-header-default);
936
- --tds-btn-border-color: var(
937
- --t-fill-color-button-neutral-responsive-header-default
938
- );
939
- --tds-btn-color-hover: var(--t-text-color-status-neutral);
940
- --tds-btn-bg-hover: var(
941
- --t-fill-color-button-neutral-responsive-header-hover
940
+ @media (prefers-reduced-motion: no-preference) {
941
+ .tds-page-header
942
+ nav:is([slot="navigation"], .tds-page-header__nav)
943
+ li:has(.indicator)::after {
944
+ animation: indicator-pulse 1.25s ease infinite;
945
+ }
946
+ }
947
+
948
+ .tds-page-header nav[slot="navigation"] a.selected,
949
+ .tds-page-header nav[slot="navigation"] button.selected,
950
+ .tds-page-header nav.tds-page-header__nav a.selected,
951
+ .tds-page-header nav.tds-page-header__nav button.selected {
952
+ --tds-page-header-nav-item-color: var(
953
+ --tds-page-header-nav-item-color-selected
942
954
  );
943
- --tds-btn-border-color-hover: var(
944
- --t-fill-color-button-neutral-responsive-header-hover
955
+ --tds-page-header-nav-item-border-color: var(
956
+ --tds-page-header-nav-item-border-color-selected
945
957
  );
946
- --tds-btn-color-active: var(--t-text-color-status-neutral);
947
- --tds-btn-bg-active: var(
948
- --t-fill-color-button-neutral-responsive-header-active
958
+ --tds-page-header-nav-item-background-color: var(
959
+ --tds-page-header-nav-item-background-color-selected
949
960
  );
950
- --tds-btn-border-color-active: var(
951
- --t-fill-color-button-neutral-responsive-header-active
961
+ --tds-page-header-nav-item-border-bottom-color: var(
962
+ --tds-page-header-nav-item-background-color-selected
952
963
  );
953
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
954
- --tds-btn-bg-disabled: var(
955
- --t-fill-color-button-neutral-responsive-header-disabled
964
+ }
965
+
966
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
967
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
968
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
969
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
970
+ --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
971
+ --tds-page-header-nav-item-background-color: var(
972
+ --tds-page-header-nav-item-background-color-hover
956
973
  );
957
- --tds-btn-border-color-disabled: var(
958
- --t-fill-color-button-neutral-responsive-header-disabled
974
+ --tds-page-header-nav-item-border-color: var(
975
+ --tds-page-header-nav-item-border-color-hover
959
976
  );
960
977
  }
961
978
 
962
- @media (min-width: 720px) {
963
-
964
- .tds-btn--secondary-page-header {
965
- --tds-btn-border-width: 1px;
966
- --tds-btn-color: var(--t-text-color-status-neutral);
967
- --tds-btn-bg: transparent;
968
- --tds-btn-border-color: var(--t-border-color-button-neutral);
969
- --tds-btn-color-hover: var(--tds-btn-color);
970
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
971
- --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
972
- --tds-btn-color-active: var(--tds-btn-color);
973
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
974
- --tds-btn-border-color-active: var(--t-border-color-button-neutral);
975
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
976
- --tds-btn-bg-disabled: var(
977
- --t-fill-color-button-neutral-outline-dim-disabled
978
- );
979
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
979
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
980
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
981
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
982
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
983
+ background-color: var(--tds-page-header-nav-item-background-color-active);
980
984
  }
981
- }
982
-
983
- .tds-btn--pill {
984
- --tds-btn-border-radius: 999px;
985
- --tds-btn-padding-y: 4px;
986
- --tds-btn-padding-x: 13px;
987
985
 
988
- --tds-btn-color: var(--t-text-color-default-primary);
989
- --tds-btn-bg: var(--t-fill-color-button-pill-default);
990
- --tds-btn-border-color: var(--tds-btn-bg);
991
- --tds-btn-color-hover: var(--tds-btn-color);
992
- --tds-btn-bg-hover: var(--t-fill-color-button-pill-hover);
993
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
994
-
995
- --tds-btn-color-active: var(--tds-btn-color);
996
- --tds-btn-bg-active: var(--t-fill-color-button-pill-active);
997
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
998
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
999
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1000
- --tds-btn-border-color-disabled: var(
1001
- --t-fill-color-button-neutral-solid-disabled
1002
- );
1003
- --tds-btn-icon-color: var(--t-icon-color-default-secondary);
1004
- --tds-btn-min-height: 32px;
986
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
987
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
988
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
989
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
990
+ color: var(--tds-page-header-nav-item-color-disabled);
991
+ cursor: not-allowed;
992
+ background-color: var(--tds-page-header-nav-item-background-color-disabled);
993
+ opacity: 1;
1005
994
  }
1006
995
 
1007
- .tds-btn--pill:is(.tds-btn--sm) {
1008
- --tds-btn-padding-y: 1px;
1009
- --tds-btn-padding-x: 7px;
1010
- --tds-btn-min-height: auto;
996
+ @media (min-width: 720px) {
997
+ .tds-page-header__title-bar,
998
+ .tds-page-header--profile .tds-page-header__title-bar {
999
+ flex-direction: row;
1000
+ align-items: flex-start;
1011
1001
  }
1012
1002
 
1013
- .tds-btn--pill:is(.tds-btn--xs) {
1014
- --tds-btn-padding-y: 1px;
1015
- --tds-btn-padding-x: 9px;
1016
- --tds-btn-min-height: auto;
1003
+ .tds-page-header__primary {
1004
+ width: auto;
1017
1005
  }
1018
1006
 
1019
- .tds-btn--pill:disabled,.tds-btn--pill.disabled {
1020
- --tds-btn-icon-color: inherit;
1007
+ [slot="actions"],
1008
+ .tds-page-header__actions {
1009
+ margin-left: auto;
1021
1010
  }
1022
1011
 
1023
- .tds-btn--dropdown .suffix {
1024
- transition: transform 0.2s ease-in-out;
1012
+ .has-multi-actions.tds-page-header [slot="actions"],
1013
+ .has-multi-actions.tds-page-header .tds-page-header__actions {
1014
+ flex-flow: row wrap;
1015
+ margin-top: var(--t-spacing-half);
1016
+ }
1025
1017
  }
1026
1018
 
1027
- .tds-btn--dropdown[aria-expanded="true"] .suffix {
1028
- transform: rotate(-180deg);
1019
+ @keyframes indicator-pulse {
1020
+ 0% {
1021
+ opacity: 0.3;
1022
+ transform: scale(0.9);
1023
+ }
1024
+ 100% {
1025
+ opacity: 0;
1026
+ transform: scale(1.75);
1027
+ }
1029
1028
  }
1029
+
1030
1030
  /**
1031
1031
  * Do not edit directly, this file was auto-generated.
1032
1032
  */