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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/reactRender.css +817 -817
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +817 -817
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js → p-B8ftfzse.js} +3 -3
  8. package/dist/tapestry-wc/dist/components/p-B8ftfzse.js.map +1 -0
  9. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js → p-CCBOjvhG.js} +3 -3
  10. package/dist/tapestry-wc/dist/components/p-CCBOjvhG.js.map +1 -0
  11. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js → p-D1od_m1m.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/p-D1od_m1m.js.map +1 -0
  13. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js → p-DZ-15cqc.js} +2 -2
  14. package/dist/tapestry-wc/dist/components/p-DZ-15cqc.js.map +1 -0
  15. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js → p-uw_SPrG0.js} +2 -2
  16. package/dist/tapestry-wc/dist/components/p-uw_SPrG0.js.map +1 -0
  17. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  18. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  20. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  28. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  29. package/package.json +3 -3
  30. package/dist/tapestry-wc/dist/components/p-5-Cvrlgk.js.map +0 -1
  31. package/dist/tapestry-wc/dist/components/p-74Cc2nEh.js.map +0 -1
  32. package/dist/tapestry-wc/dist/components/p-D0G2xpOq.js.map +0 -1
  33. package/dist/tapestry-wc/dist/components/p-D1rzJeWl.js.map +0 -1
  34. package/dist/tapestry-wc/dist/components/p-DmP02I4b.js.map +0 -1
package/dist/reactRender.css CHANGED
@@ -223,336 +223,6 @@
223
223
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
224
224
  }
225
225
 
226
- @media (prefers-color-scheme: dark){
227
- :root[data-color-mode="system"]{
228
- color-scheme:dark;
229
- --t-text-color-headline:hsl(0, 0%, 94%);
230
- --t-text-color:hsl(0, 0%, 80%);
231
- --t-text-color-secondary:hsl(0, 0%, 54%);
232
- --t-text-color-disabled:hsl(0, 0%, 25%);
233
- --t-text-color-placeholder:hsl(0, 0%, 38%);
234
- --t-text-color-interaction:hsl(204, 68%, 55%);
235
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
236
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
237
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
238
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
239
- --t-text-color-status-info:hsl(204, 68%, 55%);
240
- --t-text-color-status-success:hsl(97, 57%, 41%);
241
- --t-text-color-status-warning:hsl(42, 84%, 55%);
242
- --t-text-color-status-error:hsl(8, 61%, 61%);
243
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
244
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
245
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
246
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
247
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
248
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
249
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
250
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
251
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
252
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
253
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
254
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
255
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
256
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
257
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
258
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
259
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
260
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
261
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
262
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
263
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
264
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
265
- --t-icon-color:hsl(0, 0%, 80%);
266
- --t-icon-color-secondary:hsl(0, 0%, 54%);
267
- --t-icon-color-dim:hsl(0, 0%, 38%);
268
- --t-icon-color-disabled:hsl(0, 0%, 25%);
269
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
270
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
271
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
272
- --t-icon-color-status-info:hsl(204, 68%, 55%);
273
- --t-icon-color-status-error:hsl(8, 61%, 61%);
274
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
275
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
276
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
277
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
278
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
279
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
280
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
281
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
282
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
283
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
284
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
285
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
286
- --t-fill-color-interaction:hsl(204, 100%, 35%);
287
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
288
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
289
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
290
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
291
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
292
- --t-fill-color-control:hsl(204, 100%, 35%);
293
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
294
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
295
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
296
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
297
- --t-fill-color-status-info:hsl(204, 100%, 35%);
298
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
299
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
300
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
301
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
302
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
303
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
304
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
305
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
306
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
307
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
308
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
309
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
310
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
311
- --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
312
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
313
- --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
314
- --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
315
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
316
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
317
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
318
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
319
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
320
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
321
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
322
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
323
- --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
324
- --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
325
- --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
326
- --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
327
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
328
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
329
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
330
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
331
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
332
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
333
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
334
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
335
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
336
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
337
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
338
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
339
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
340
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
341
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
342
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
343
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
344
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
345
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
346
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
347
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
348
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
349
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
350
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
351
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
352
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
353
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
354
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
355
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
356
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
357
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
358
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
359
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
360
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
361
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
362
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
363
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
364
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
365
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
366
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
367
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
368
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
369
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
370
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
371
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
372
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
373
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
374
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
375
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
376
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
377
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
378
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
379
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
380
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
381
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
382
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
383
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
384
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
385
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
386
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
387
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
388
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
389
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
390
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
391
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
392
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
393
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
394
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
395
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
396
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
397
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
398
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
399
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
400
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
401
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
402
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
403
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
404
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
405
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
406
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
407
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
408
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
409
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
410
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
411
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
412
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
413
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
414
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
415
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
416
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
417
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
418
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
419
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
420
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
421
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
422
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
423
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
424
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
425
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
426
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
427
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
428
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
429
- --t-surface-color-card:hsl(0, 0%, 12%);
430
- --t-surface-color-canvas:hsl(0, 0%, 10%);
431
- --t-border-color:hsl(0, 0%, 21%);
432
- --t-border-color-dark:hsl(0, 0%, 25%);
433
- --t-border-color-darker:hsl(0, 0%, 33%);
434
- --t-border-color-darkest:hsl(0, 0%, 38%);
435
- --t-border-color-disabled:hsl(0, 0%, 21%);
436
- --t-border-color-dim:hsl(0, 0%, 16%);
437
- --t-border-color-white:hsl(0, 0%, 12%);
438
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
439
- --t-border-color-status-info:hsl(204, 100%, 35%);
440
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
441
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
442
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
443
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
444
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
445
- --t-border-color-control-info:hsl(204, 100%, 35%);
446
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
447
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
448
- }
449
- }
450
-
451
- :root{
452
- --t-border-size-default:var(--t-border-width);
453
- --t-border-size-thick:var(--t-border-width-thick);
454
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
455
- --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
456
- --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
457
- --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
458
- --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
459
- --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
460
- --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
461
- --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
462
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
463
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
464
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
465
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
466
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
467
- --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
468
- --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
469
- --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
470
- --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
471
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
472
- --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
473
- --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
474
- --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
475
- --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
476
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
477
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
478
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
479
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
480
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
481
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
482
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
483
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
484
- --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
485
- --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
486
- --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
487
- --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
488
- --t-border-color-default-base:var(--t-border-color);
489
- --t-border-color-default-dark:var(--t-border-color-dark);
490
- --t-border-color-default-darker:var(--t-border-color-darker);
491
- --t-border-color-default-darkest:var(--t-border-color-darkest);
492
- --t-border-color-default-dim:var(--t-border-color-dim);
493
- --t-border-color-default-disabled:var(--t-border-color-disabled);
494
- --t-border-color-default-white:var(--t-border-color-white);
495
- --t-border-radius-default:var(--t-border-radius);
496
- --t-border-width-default:var(--t-border-width);
497
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
498
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
499
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
500
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
501
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
502
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
503
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
504
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
505
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
506
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
507
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
508
- --t-fill-color-control-primary:var(--t-fill-color-control);
509
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
510
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
511
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
512
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
513
- --t-icon-color-default-dim:var(--t-icon-color-dim);
514
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
515
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
516
- --t-icon-color-default-primary:var(--t-icon-color);
517
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
518
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
519
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
520
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
521
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
522
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
523
- --t-text-color-default-disabled:var(--t-text-color-disabled);
524
- --t-text-color-default-headline:var(--t-text-color-headline);
525
- --t-text-color-default-inverted:var(--t-text-color-inverted);
526
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
527
- --t-text-color-default-primary:var(--t-text-color);
528
- --t-text-color-default-secondary:var(--t-text-color-secondary);
529
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
530
- }
531
-
532
- @media (prefers-color-scheme: dark){
533
- :root[data-color-mode="system"]{
534
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
535
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
536
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
537
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
538
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
539
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
540
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
541
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
542
- }
543
- }
544
-
545
- :root[data-color-mode="dark"]{
546
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
547
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
548
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
549
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
550
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
551
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
552
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
553
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
554
- }
555
-
556
226
  :root{
557
227
  --t-border-radius-sm:2px;
558
228
  --t-border-radius-md:4px;
@@ -967,600 +637,930 @@
967
637
  --t-form-placeholder-color:var(--t-text-color-placeholder);
968
638
  }
969
639
 
640
+ @media (prefers-color-scheme: dark){
641
+ :root[data-color-mode="system"]{
642
+ color-scheme:dark;
643
+ --t-text-color-headline:hsl(0, 0%, 94%);
644
+ --t-text-color:hsl(0, 0%, 80%);
645
+ --t-text-color-secondary:hsl(0, 0%, 54%);
646
+ --t-text-color-disabled:hsl(0, 0%, 25%);
647
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
648
+ --t-text-color-interaction:hsl(204, 68%, 55%);
649
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
650
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
651
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
652
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
653
+ --t-text-color-status-info:hsl(204, 68%, 55%);
654
+ --t-text-color-status-success:hsl(97, 57%, 41%);
655
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
656
+ --t-text-color-status-error:hsl(8, 61%, 61%);
657
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
658
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
659
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
660
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
661
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
662
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
663
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
664
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
665
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
666
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
667
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
668
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
669
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
670
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
671
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
672
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
673
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
674
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
675
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
676
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
677
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
678
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
679
+ --t-icon-color:hsl(0, 0%, 80%);
680
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
681
+ --t-icon-color-dim:hsl(0, 0%, 38%);
682
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
683
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
684
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
685
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
686
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
687
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
688
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
689
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
690
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
691
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
692
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
693
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
694
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
695
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
696
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
697
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
698
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
699
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
700
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
701
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
702
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
703
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
704
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
705
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
706
+ --t-fill-color-control:hsl(204, 100%, 35%);
707
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
708
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
709
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
710
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
711
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
712
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
713
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
714
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
715
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
716
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
717
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
718
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
719
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
720
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
721
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
722
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
723
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
724
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
725
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
726
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
727
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
728
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
729
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
730
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
731
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
732
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
733
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
734
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
735
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
736
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
737
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
738
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
739
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
740
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
741
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
742
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
743
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
744
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
745
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
746
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
747
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
748
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
749
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
750
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
751
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
752
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
753
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
754
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
755
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
756
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
757
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
758
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
759
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
760
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
761
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
762
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
763
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
764
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
765
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
766
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
767
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
768
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
769
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
770
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
771
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
772
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
773
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
774
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
775
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
776
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
777
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
778
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
779
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
780
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
781
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
782
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
783
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
784
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
785
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
786
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
787
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
788
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
789
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
790
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
791
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
792
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
793
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
794
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
795
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
796
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
797
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
798
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
799
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
800
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
801
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
802
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
803
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
804
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
805
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
806
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
807
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
808
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
809
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
810
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
811
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
812
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
813
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
814
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
815
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
816
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
817
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
818
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
819
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
820
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
821
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
822
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
823
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
824
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
825
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
826
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
827
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
828
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
829
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
830
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
831
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
832
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
833
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
834
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
835
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
836
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
837
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
838
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
839
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
840
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
841
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
842
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
843
+ --t-surface-color-card:hsl(0, 0%, 12%);
844
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
845
+ --t-border-color:hsl(0, 0%, 21%);
846
+ --t-border-color-dark:hsl(0, 0%, 25%);
847
+ --t-border-color-darker:hsl(0, 0%, 33%);
848
+ --t-border-color-darkest:hsl(0, 0%, 38%);
849
+ --t-border-color-disabled:hsl(0, 0%, 21%);
850
+ --t-border-color-dim:hsl(0, 0%, 16%);
851
+ --t-border-color-white:hsl(0, 0%, 12%);
852
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
853
+ --t-border-color-status-info:hsl(204, 100%, 35%);
854
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
855
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
856
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
857
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
858
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
859
+ --t-border-color-control-info:hsl(204, 100%, 35%);
860
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
861
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
862
+ }
863
+ }
864
+
865
+ :root{
866
+ --t-border-size-default:var(--t-border-width);
867
+ --t-border-size-thick:var(--t-border-width-thick);
868
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
869
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
870
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
871
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
872
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
873
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
874
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
875
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
876
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
877
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
878
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
879
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
880
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
881
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
882
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
883
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
884
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
885
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
886
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
887
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
888
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
889
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
890
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
891
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
892
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
893
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
894
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
895
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
896
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
897
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
898
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
899
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
900
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
901
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
902
+ --t-border-color-default-base:var(--t-border-color);
903
+ --t-border-color-default-dark:var(--t-border-color-dark);
904
+ --t-border-color-default-darker:var(--t-border-color-darker);
905
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
906
+ --t-border-color-default-dim:var(--t-border-color-dim);
907
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
908
+ --t-border-color-default-white:var(--t-border-color-white);
909
+ --t-border-radius-default:var(--t-border-radius);
910
+ --t-border-width-default:var(--t-border-width);
911
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
912
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
913
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
914
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
915
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
916
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
917
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
918
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
919
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
920
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
921
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
922
+ --t-fill-color-control-primary:var(--t-fill-color-control);
923
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
924
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
925
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
926
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
927
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
928
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
929
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
930
+ --t-icon-color-default-primary:var(--t-icon-color);
931
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
932
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
933
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
934
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
935
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
936
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
937
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
938
+ --t-text-color-default-headline:var(--t-text-color-headline);
939
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
940
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
941
+ --t-text-color-default-primary:var(--t-text-color);
942
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
943
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
944
+ }
945
+
946
+ :root[data-color-mode="dark"]{
947
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
948
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
949
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
950
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
951
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
952
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
953
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
954
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
955
+ }
970
956
 
971
- @media (prefers-reduced-motion: no-preference){
972
-
973
- :root{
974
- interpolate-size:allow-keywords;
957
+ @media (prefers-color-scheme: dark){
958
+ :root[data-color-mode="system"]{
959
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
960
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
961
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
962
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
963
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
964
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
965
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
966
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
967
+ }
975
968
  }
976
- }
977
969
 
978
- @layer tds-component{
979
- tds-sidenav, .tds-sidenav{
980
- --tds-sidenav-indent:12px;
981
- --tds-sidenav-item-depth:0;
970
+ @layer t-critical{
971
+ tds-page-header:not(.hydrated){
972
+ display:none;
973
+ }
974
+ }
982
975
 
983
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
976
+ @layer t-component{
977
+ .tds-page-header{
978
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
979
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
980
+ --tds-page-header-color:var(--t-text-color-default-primary);
981
+ --tds-page-header-headline-color:var(--t-text-color-default-headline);
982
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
983
+ --tds-page-header-padding-x:var(--t-spacing-2);
984
+ --tds-page-header-padding-y:var(--t-spacing-2);
985
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
986
+ --tds-page-header-nav-gap:var(--t-spacing-1);
987
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
988
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
989
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
990
+ --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
991
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
992
+ --tds-page-header-nav-item-border-width:1px;
984
993
 
985
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
986
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
987
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
988
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
994
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
995
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
989
996
 
990
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
991
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
992
- --tds-sidenav-item-nested-background-selected:transparent;
997
+ --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
998
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
999
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
993
1000
 
994
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
995
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
996
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1001
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1002
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
997
1003
 
998
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
999
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1000
- }
1004
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1005
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1006
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1001
1007
 
1002
- .tds-sidenav--theme-gray{
1003
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1004
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1005
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1006
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1007
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1008
+ --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1009
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1010
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1011
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1012
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1008
1013
  }
1009
- }
1010
1014
 
1011
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1012
- display:flex;
1015
+ .tds-page-header--profile{
1016
+ --tds-page-header-padding-y:20px;
1013
1017
  }
1014
-
1015
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1016
- flex-direction:column;
1017
- gap:var(--t-spacing-half);
1018
- width:100%;
1018
+ @media (min-width: 600px){
1019
+ .tds-page-header{
1020
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1021
+ --tds-page-header-color:var(--t-text-color-default-secondary);
1022
+ --tds-page-header-padding-x:var(--t-spacing-3);
1023
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1024
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1025
+ --tds-page-header-nav-background:transparent;
1026
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1027
+ --tds-page-header-nav-item-border-width:1px;
1028
+ --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1029
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1030
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1031
+ }
1019
1032
  }
1020
-
1021
- .tds-sidenav-section-list{
1022
- width:100%;
1023
- padding:0;
1024
- margin:0;
1025
- list-style:none;
1026
1033
  }
1027
1034
 
1028
- .tds-sidenav-section-header{
1035
+ .tds-page-header{
1029
1036
  display:flex;
1030
- align-items:baseline;
1031
- justify-content:space-between;
1032
- padding-top:var(--t-spacing-2);
1037
+ flex-direction:column;
1038
+ padding-top:var(--tds-page-header-padding-y);
1039
+ color:var(--tds-page-header-color);
1040
+ background:var(--tds-page-header-background-color);
1041
+ border-bottom:1px solid var(--t-border-color-default-base);
1033
1042
  }
1034
1043
 
1035
- .tds-sidenav-section-header h2{
1036
- margin:0;
1037
- font-size:var(--t-font-size-sm);
1038
- font-weight:var(--t-font-weight-semibold);
1039
- line-height:1.35;
1040
- color:var(--t-text-color-default-secondary);
1041
- text-transform:uppercase;
1042
- }
1043
-
1044
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1045
- padding-top:0;
1046
- }
1047
-
1048
- .tds-sidenav-section-header [slot="label-actions"]{
1049
- display:flex;
1050
- gap:var(--t-spacing-half);
1051
- align-items:center;
1052
- }
1053
-
1054
- .tds-sidenav-section [slot="section-actions"]{
1055
- display:flex;
1056
- gap:12px;
1057
- align-items:center;
1058
- min-height:42px;
1059
- padding:var(--t-spacing-1) 0;
1044
+ .tds-page-header:not(.has-nav){
1045
+ padding-bottom:var(--tds-page-header-padding-y);
1060
1046
  }
1061
1047
 
1062
- .tds-sidenav-section-list,
1063
- .tds-sidenav-item{
1064
- width:100%;
1065
- padding:0;
1066
- margin:0;
1048
+ .tds-page-header.inactive{
1049
+ background:var(--tds-page-header-background-color-inactive);
1067
1050
  }
1068
1051
 
1069
- .tds-sidenav-item :is(a,button){
1070
- position:relative;
1071
- display:flex;
1072
- gap:12px;
1073
- align-items:center;
1074
- width:100%;
1075
- padding:12px;
1076
- overflow:hidden;
1077
- font-size:var(--t-font-size-sm);
1078
- line-height:18px;
1079
- color:var(--t-text-color-default-headline);
1080
- white-space:nowrap;
1081
- text-decoration:none;
1082
- -webkit-appearance:none;
1083
- -moz-appearance:none;
1084
- appearance:none;
1085
- cursor:pointer;
1086
- background-color:var(--tds-sidenav-item-background, transparent);
1087
- border:0;
1088
- border-radius:var(--t-border-radius-default);
1089
- transition:var(--tds-sidenav-item-transition);
1090
- }
1091
-
1092
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1093
- display:block;
1094
- flex:1;
1095
- overflow:hidden;
1096
- text-overflow:ellipsis;
1097
- text-align:left;
1098
- white-space:nowrap;
1099
- }
1100
-
1101
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1102
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1103
- color:var(--t-text-color-default-headline);
1104
- text-decoration:none;
1105
- }
1106
-
1107
- :is(.tds-sidenav-item :is(a,button)):active{
1108
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1109
- }
1110
-
1111
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1112
- overflow:hidden;
1113
- color:var(--tds-sidenav-item-icon-color);
1114
- }
1115
-
1116
- :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{
1117
- display:block;
1118
- width:var(--tds-sidenav-item-icon-size);
1119
- height:var(--tds-sidenav-item-icon-size);
1120
- }
1121
-
1122
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1123
- --tds-sidenav-indent:19px;
1124
- }
1052
+ .tds-page-header__title-bar{
1053
+ display:flex;
1054
+ flex-direction:column;
1055
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1056
+ align-items:flex-start;
1057
+ justify-content:space-between;
1058
+ padding:0 var(--tds-page-header-padding-x);
1059
+ }
1125
1060
 
1126
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1127
- visibility:visible;
1128
- block-size:auto;
1129
- opacity:1;
1130
- }
1061
+ .tds-page-header--profile > .tds-page-header__title-bar{
1062
+ align-items:center;
1063
+ }
1131
1064
 
1132
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1133
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1134
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1065
+ .tds-page-header__primary{
1066
+ width:100%;
1067
+ }
1135
1068
 
1136
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1137
- font-weight:var(--t-font-weight-semibold);
1138
- }
1069
+ .tds-page-header__primary h1{
1070
+ margin:0;
1071
+ font-size:var(--tds-page-header-headline-font-size);
1072
+ font-weight:var(--t-font-weight-normal);
1073
+ line-height:32px;
1074
+ color:var(--tds-page-header-headline-color);
1075
+ overflow-wrap:break-word;
1076
+ }
1139
1077
 
1140
- .tds-sidenav-item:has(.tds-sidenav-section){
1141
- display:flex;
1142
- flex-direction:column;
1143
- gap:var(--t-spacing-half);
1144
- }
1078
+ .tds-page-header [slot="actions"]{
1079
+ width:100%;
1080
+ }
1145
1081
 
1146
- .tds-sidenav-item .tds-sidenav-section-list{
1147
- --tds-sidenav-item-depth:1;
1148
- gap:0;
1149
- }
1082
+ .has-multi-actions.tds-page-header [slot="actions"],
1083
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1084
+ display:flex;
1085
+ flex-flow:row wrap;
1086
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1087
+ align-items:flex-start;
1088
+ justify-content:flex-start;
1089
+ min-width:0;
1090
+ }
1150
1091
 
1151
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1152
- visibility:hidden;
1153
- block-size:0;
1154
- overflow-y:clip;
1155
- opacity:0;
1156
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1157
- }
1092
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1093
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1094
+ .tds-page-header nav[slot="navigation"] ul,
1095
+ .tds-page-header nav.tds-page-header__nav ul{
1096
+ display:flex;
1097
+ gap:var(--tds-page-header-nav-gap);
1098
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1099
+ margin:0 0 -1px;
1100
+ overflow:auto;
1101
+ list-style:none;
1102
+ background:var(--tds-page-header-nav-background);
1103
+ }
1158
1104
 
1159
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1160
- --tds-sidenav-item-depth:2;
1161
- }
1105
+ .tds-page-header nav[slot="navigation"] a,
1106
+ .tds-page-header nav[slot="navigation"] button,
1107
+ .tds-page-header nav.tds-page-header__nav a,
1108
+ .tds-page-header nav.tds-page-header__nav button{
1109
+ position:relative;
1110
+ display:inline-flex;
1111
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1112
+ font-size:var(--t-font-size-sm);
1113
+ line-height:22px;
1114
+ color:var(--tds-page-header-nav-item-color);
1115
+ white-space:nowrap;
1116
+ text-decoration:none;
1117
+ -webkit-appearance:none;
1118
+ -moz-appearance:none;
1119
+ appearance:none;
1120
+ cursor:pointer;
1121
+ outline-offset:-2px;
1122
+ background-color:var(--tds-page-header-nav-item-background-color);
1123
+ background-clip:padding-box;
1124
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1125
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1126
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1127
+ }
1162
1128
 
1163
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1164
- min-height:var(--t-element-size-2xl);
1165
- padding-block:9px;
1166
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1167
- line-height:1;
1168
- background-color:transparent;
1169
- }
1129
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1130
+ position:relative;
1131
+ }
1170
1132
 
1171
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1172
- position:absolute;
1173
- top:0;
1174
- bottom:0;
1175
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1176
- width:2px;
1177
- content:"";
1178
- background-color:var(--tds-sidenav-item-nested-border-color);
1179
- transition:var(--tds-sidenav-item-transition);
1180
- }
1133
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1134
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1135
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1136
+ }
1181
1137
 
1182
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1183
- position:absolute;
1184
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1185
- z-index:-1;
1186
- height:100%;
1187
- content:"";
1188
- background-color:var(--tds-sidenav-item-nested-background);
1189
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1190
- transition:var(--tds-sidenav-item-transition);
1191
- }
1138
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1139
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1140
+ position:absolute;
1141
+ top:-5px;
1142
+ right:-2px;
1143
+ width:10px;
1144
+ height:10px;
1145
+ content:"";
1146
+ background:var(--tds-page-header-nav-item-indicator-color);
1147
+ border-radius:50%;
1148
+ }
1192
1149
 
1193
- :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)){
1194
- display:block;
1195
- text-align:left;
1196
- white-space:normal;
1197
- }
1150
+ @media (prefers-reduced-motion: no-preference){
1151
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1152
+ animation:indicator-pulse 1.25s ease infinite;
1153
+ }
1154
+ }
1198
1155
 
1199
- :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{
1200
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1201
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1202
- }
1156
+ .tds-page-header nav[slot="navigation"] a.selected,
1157
+ .tds-page-header nav[slot="navigation"] button.selected,
1158
+ .tds-page-header nav.tds-page-header__nav a.selected,
1159
+ .tds-page-header nav.tds-page-header__nav button.selected{
1160
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1161
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1162
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1163
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1164
+ }
1203
1165
 
1204
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1205
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1206
- }
1166
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1167
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1168
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1169
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1170
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1171
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1172
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1173
+ }
1207
1174
 
1208
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1209
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1210
- font-weight:var(--t-font-weight-medium);
1211
- }
1175
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1176
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1177
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1178
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1179
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1180
+ }
1212
1181
 
1213
- .tds-sidenav-responsive-header{
1214
- display:flex;
1215
- gap:var(--t-spacing-2);
1216
- align-items:center;
1217
- width:100%;
1182
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1183
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1184
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1185
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1186
+ color:var(--tds-page-header-nav-item-color-disabled);
1187
+ cursor:not-allowed;
1188
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1189
+ opacity:1;
1218
1190
  }
1219
1191
 
1220
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1221
- order:0;
1192
+ @media (min-width: 960px){
1193
+ .tds-page-header__primary{
1194
+ flex:1 1 max-content;
1195
+ width:auto;
1196
+ min-width:0;
1197
+ max-width:100%;
1222
1198
  }
1223
1199
 
1224
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1225
- flex:1;
1226
- order:1;
1227
- margin:0;
1228
- font-size:var(--t-font-size-lg);
1229
- font-weight:var(--t-font-weight-medium);
1230
- color:var(--t-text-color-default-headline);
1200
+ .tds-page-header__title-bar,
1201
+ .tds-page-header--profile .tds-page-header__title-bar{
1202
+ flex-flow:row nowrap;
1203
+ row-gap:12px;
1204
+ align-items:flex-start;
1231
1205
  }
1232
1206
 
1233
- @media (max-width: 719px){
1234
- .tds-sidenav-collapse{
1235
- z-index:10001;
1236
- display:none;
1237
- max-width:min(448px, calc(100vw - 48px));
1238
- padding:0;
1239
- margin:12px 0;
1240
- overflow:hidden;
1241
- outline:0;
1242
- background:var(--t-surface-color-card);
1243
- border:0;
1244
- border-radius:6px;
1245
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1246
- will-change:transform;
1247
- position-area:bottom span-right;
1207
+ .tds-page-header [slot="actions"]{
1208
+ width:auto;
1248
1209
  }
1249
1210
 
1250
- .tds-sidenav-scroll-container{
1251
- --webkit-overflow-scrolling:touch;
1252
- display:block;
1253
- width:100%;
1254
- height:-moz-fit-content;
1255
- height:fit-content;
1256
- padding:var(--t-spacing-2);
1257
- overflow-y:auto;
1211
+ .has-multi-actions.tds-page-header [slot="actions"],
1212
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1213
+ justify-content:flex-end;
1258
1214
  }
1215
+ }
1259
1216
 
1260
- .tds-sidenav-item :is(a, button) :is(.prefix){
1261
- display:none;
1262
- }
1263
- @supports selector(:popover-open){
1264
- .tds-sidenav-collapse:popover-open{
1265
- display:flex;
1266
- }
1267
- }
1268
- @supports not selector(:popover-open){
1269
- .tds-sidenav-collapse.\:popover-open{
1270
- display:flex;
1271
- }
1272
- }
1217
+ .tds-page-header-phone,
1218
+ .tds-page-header-email{
1219
+ color:var(--tds-page-header-color);
1220
+ white-space:nowrap;
1221
+ }
1222
+
1223
+ .tds-page-header-email{
1224
+ max-width:100%;
1225
+ overflow:hidden;
1226
+ text-overflow:ellipsis;
1273
1227
  }
1274
1228
 
1275
- @media (min-width: 720px){
1276
- .tds-sidenav-responsive-header{
1277
- display:none;
1229
+ @keyframes indicator-pulse{
1230
+ 0%{
1231
+ opacity:.3;
1232
+ transform:scale(.9);
1278
1233
  }
1279
- }
1280
1234
 
1281
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1282
- display:none;
1283
- }
1235
+ 100%{
1236
+ opacity:0;
1237
+ transform:scale(1.75);
1238
+ }
1239
+ }
1284
1240
 
1285
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1286
- display:block;
1287
- }
1288
1241
 
1289
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1290
- display:flex;
1291
- flex-direction:column;
1292
- }
1242
+ @media (prefers-reduced-motion: no-preference){
1293
1243
 
1294
- @layer t-critical{
1295
- tds-page-header:not(.hydrated){
1296
- display:none;
1297
- }
1244
+ :root{
1245
+ interpolate-size:allow-keywords;
1298
1246
  }
1247
+ }
1299
1248
 
1300
- @layer t-component{
1301
- .tds-page-header{
1302
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1303
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1304
- --tds-page-header-color:var(--t-text-color-default-primary);
1305
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
1306
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1307
- --tds-page-header-padding-x:var(--t-spacing-2);
1308
- --tds-page-header-padding-y:var(--t-spacing-2);
1309
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1310
- --tds-page-header-nav-gap:var(--t-spacing-1);
1311
- --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1312
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1313
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1314
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
1315
- --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1316
- --tds-page-header-nav-item-border-width:1px;
1249
+ @layer tds-component{
1250
+ tds-sidenav, .tds-sidenav{
1251
+ --tds-sidenav-indent:12px;
1252
+ --tds-sidenav-item-depth:0;
1317
1253
 
1318
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1319
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1254
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
1320
1255
 
1321
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1322
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1323
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1256
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1257
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1258
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1259
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1324
1260
 
1325
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1326
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1261
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1262
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1263
+ --tds-sidenav-item-nested-background-selected:transparent;
1327
1264
 
1328
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1329
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1330
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1265
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1266
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1267
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1331
1268
 
1332
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1333
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1334
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1335
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1336
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1269
+ --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1270
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1337
1271
  }
1338
1272
 
1339
- .tds-page-header--profile{
1340
- --tds-page-header-padding-y:20px;
1341
- }
1342
- @media (min-width: 600px){
1343
- .tds-page-header{
1344
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1345
- --tds-page-header-color:var(--t-text-color-default-secondary);
1346
- --tds-page-header-padding-x:var(--t-spacing-3);
1347
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1348
- --tds-page-header-nav-gap:var(--t-spacing-half);
1349
- --tds-page-header-nav-background:transparent;
1350
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1351
- --tds-page-header-nav-item-border-width:1px;
1352
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1353
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1354
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1355
- }
1273
+ .tds-sidenav--theme-gray{
1274
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1275
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1276
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1277
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1278
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1356
1279
  }
1357
1280
  }
1358
1281
 
1359
- .tds-page-header{
1360
- display:flex;
1361
- flex-direction:column;
1362
- padding-top:var(--tds-page-header-padding-y);
1363
- color:var(--tds-page-header-color);
1364
- background:var(--tds-page-header-background-color);
1365
- border-bottom:1px solid var(--t-border-color-default-base);
1366
- }
1282
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1283
+ display:flex;
1284
+ }
1367
1285
 
1368
- .tds-page-header:not(.has-nav){
1369
- padding-bottom:var(--tds-page-header-padding-y);
1370
- }
1286
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1287
+ flex-direction:column;
1288
+ gap:var(--t-spacing-half);
1289
+ width:100%;
1290
+ }
1371
1291
 
1372
- .tds-page-header.inactive{
1373
- background:var(--tds-page-header-background-color-inactive);
1292
+ .tds-sidenav-section-list{
1293
+ width:100%;
1294
+ padding:0;
1295
+ margin:0;
1296
+ list-style:none;
1374
1297
  }
1375
1298
 
1376
- .tds-page-header__title-bar{
1299
+ .tds-sidenav-section-header{
1377
1300
  display:flex;
1378
- flex-direction:column;
1379
- gap:var(--t-spacing-2) var(--t-spacing-1);
1380
- align-items:flex-start;
1301
+ align-items:baseline;
1381
1302
  justify-content:space-between;
1382
- padding:0 var(--tds-page-header-padding-x);
1303
+ padding-top:var(--t-spacing-2);
1383
1304
  }
1384
1305
 
1385
- .tds-page-header--profile > .tds-page-header__title-bar{
1306
+ .tds-sidenav-section-header h2{
1307
+ margin:0;
1308
+ font-size:var(--t-font-size-sm);
1309
+ font-weight:var(--t-font-weight-semibold);
1310
+ line-height:1.35;
1311
+ color:var(--t-text-color-default-secondary);
1312
+ text-transform:uppercase;
1313
+ }
1314
+
1315
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1316
+ padding-top:0;
1317
+ }
1318
+
1319
+ .tds-sidenav-section-header [slot="label-actions"]{
1320
+ display:flex;
1321
+ gap:var(--t-spacing-half);
1322
+ align-items:center;
1323
+ }
1324
+
1325
+ .tds-sidenav-section [slot="section-actions"]{
1326
+ display:flex;
1327
+ gap:12px;
1386
1328
  align-items:center;
1329
+ min-height:42px;
1330
+ padding:var(--t-spacing-1) 0;
1387
1331
  }
1388
1332
 
1389
- .tds-page-header__primary{
1333
+ .tds-sidenav-section-list,
1334
+ .tds-sidenav-item{
1390
1335
  width:100%;
1391
- }
1392
-
1393
- .tds-page-header__primary h1{
1336
+ padding:0;
1394
1337
  margin:0;
1395
- font-size:var(--tds-page-header-headline-font-size);
1396
- font-weight:var(--t-font-weight-normal);
1397
- line-height:32px;
1398
- color:var(--tds-page-header-headline-color);
1399
- overflow-wrap:break-word;
1400
1338
  }
1401
1339
 
1402
- .tds-page-header [slot="actions"]{
1403
- width:100%;
1404
- }
1340
+ .tds-sidenav-item :is(a,button){
1341
+ position:relative;
1342
+ display:flex;
1343
+ gap:12px;
1344
+ align-items:center;
1345
+ width:100%;
1346
+ padding:12px;
1347
+ overflow:hidden;
1348
+ font-size:var(--t-font-size-sm);
1349
+ line-height:18px;
1350
+ color:var(--t-text-color-default-headline);
1351
+ white-space:nowrap;
1352
+ text-decoration:none;
1353
+ -webkit-appearance:none;
1354
+ -moz-appearance:none;
1355
+ appearance:none;
1356
+ cursor:pointer;
1357
+ background-color:var(--tds-sidenav-item-background, transparent);
1358
+ border:0;
1359
+ border-radius:var(--t-border-radius-default);
1360
+ transition:var(--tds-sidenav-item-transition);
1361
+ }
1362
+
1363
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1364
+ display:block;
1365
+ flex:1;
1366
+ overflow:hidden;
1367
+ text-overflow:ellipsis;
1368
+ text-align:left;
1369
+ white-space:nowrap;
1370
+ }
1371
+
1372
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1373
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1374
+ color:var(--t-text-color-default-headline);
1375
+ text-decoration:none;
1376
+ }
1377
+
1378
+ :is(.tds-sidenav-item :is(a,button)):active{
1379
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1380
+ }
1381
+
1382
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1383
+ overflow:hidden;
1384
+ color:var(--tds-sidenav-item-icon-color);
1385
+ }
1386
+
1387
+ :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{
1388
+ display:block;
1389
+ width:var(--tds-sidenav-item-icon-size);
1390
+ height:var(--tds-sidenav-item-icon-size);
1391
+ }
1392
+
1393
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1394
+ --tds-sidenav-indent:19px;
1395
+ }
1396
+
1397
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1398
+ visibility:visible;
1399
+ block-size:auto;
1400
+ opacity:1;
1401
+ }
1402
+
1403
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1404
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1405
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1406
+
1407
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1408
+ font-weight:var(--t-font-weight-semibold);
1409
+ }
1410
+
1411
+ .tds-sidenav-item:has(.tds-sidenav-section){
1412
+ display:flex;
1413
+ flex-direction:column;
1414
+ gap:var(--t-spacing-half);
1415
+ }
1405
1416
 
1406
- .has-multi-actions.tds-page-header [slot="actions"],
1407
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1408
- display:flex;
1409
- flex-flow:row wrap;
1410
- gap:var(--t-spacing-half) var(--t-spacing-1);
1411
- align-items:flex-start;
1412
- justify-content:flex-start;
1413
- min-width:0;
1414
- }
1417
+ .tds-sidenav-item .tds-sidenav-section-list{
1418
+ --tds-sidenav-item-depth:1;
1419
+ gap:0;
1420
+ }
1415
1421
 
1416
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1417
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1418
- .tds-page-header nav[slot="navigation"] ul,
1419
- .tds-page-header nav.tds-page-header__nav ul{
1420
- display:flex;
1421
- gap:var(--tds-page-header-nav-gap);
1422
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1423
- margin:0 0 -1px;
1424
- overflow:auto;
1425
- list-style:none;
1426
- background:var(--tds-page-header-nav-background);
1427
- }
1422
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1423
+ visibility:hidden;
1424
+ block-size:0;
1425
+ overflow-y:clip;
1426
+ opacity:0;
1427
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1428
+ }
1428
1429
 
1429
- .tds-page-header nav[slot="navigation"] a,
1430
- .tds-page-header nav[slot="navigation"] button,
1431
- .tds-page-header nav.tds-page-header__nav a,
1432
- .tds-page-header nav.tds-page-header__nav button{
1433
- position:relative;
1434
- display:inline-flex;
1435
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1436
- font-size:var(--t-font-size-sm);
1437
- line-height:22px;
1438
- color:var(--tds-page-header-nav-item-color);
1439
- white-space:nowrap;
1440
- text-decoration:none;
1441
- -webkit-appearance:none;
1442
- -moz-appearance:none;
1443
- appearance:none;
1444
- cursor:pointer;
1445
- outline-offset:-2px;
1446
- background-color:var(--tds-page-header-nav-item-background-color);
1447
- background-clip:padding-box;
1448
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1449
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1450
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1451
- }
1430
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1431
+ --tds-sidenav-item-depth:2;
1432
+ }
1452
1433
 
1453
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1454
- position:relative;
1455
- }
1434
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1435
+ min-height:var(--t-element-size-2xl);
1436
+ padding-block:9px;
1437
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1438
+ line-height:1;
1439
+ background-color:transparent;
1440
+ }
1456
1441
 
1457
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1458
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1459
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1460
- }
1442
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1443
+ position:absolute;
1444
+ top:0;
1445
+ bottom:0;
1446
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1447
+ width:2px;
1448
+ content:"";
1449
+ background-color:var(--tds-sidenav-item-nested-border-color);
1450
+ transition:var(--tds-sidenav-item-transition);
1451
+ }
1461
1452
 
1462
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1463
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1464
- position:absolute;
1465
- top:-5px;
1466
- right:-2px;
1467
- width:10px;
1468
- height:10px;
1469
- content:"";
1470
- background:var(--tds-page-header-nav-item-indicator-color);
1471
- border-radius:50%;
1472
- }
1453
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1454
+ position:absolute;
1455
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1456
+ z-index:-1;
1457
+ height:100%;
1458
+ content:"";
1459
+ background-color:var(--tds-sidenav-item-nested-background);
1460
+ border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1461
+ transition:var(--tds-sidenav-item-transition);
1462
+ }
1473
1463
 
1474
- @media (prefers-reduced-motion: no-preference){
1475
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1476
- animation:indicator-pulse 1.25s ease infinite;
1477
- }
1478
- }
1464
+ :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)){
1465
+ display:block;
1466
+ text-align:left;
1467
+ white-space:normal;
1468
+ }
1479
1469
 
1480
- .tds-page-header nav[slot="navigation"] a.selected,
1481
- .tds-page-header nav[slot="navigation"] button.selected,
1482
- .tds-page-header nav.tds-page-header__nav a.selected,
1483
- .tds-page-header nav.tds-page-header__nav button.selected{
1484
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1485
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1486
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1487
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1488
- }
1470
+ :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{
1471
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1472
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1473
+ }
1489
1474
 
1490
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1491
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1492
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1493
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1494
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1495
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1496
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1497
- }
1475
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1476
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1477
+ }
1498
1478
 
1499
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1500
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1501
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1502
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1503
- background-color:var(--tds-page-header-nav-item-background-color-active);
1504
- }
1479
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1480
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1481
+ font-weight:var(--t-font-weight-medium);
1482
+ }
1505
1483
 
1506
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1507
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1508
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1509
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1510
- color:var(--tds-page-header-nav-item-color-disabled);
1511
- cursor:not-allowed;
1512
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1513
- opacity:1;
1484
+ .tds-sidenav-responsive-header{
1485
+ display:flex;
1486
+ gap:var(--t-spacing-2);
1487
+ align-items:center;
1488
+ width:100%;
1514
1489
  }
1515
1490
 
1516
- @media (min-width: 960px){
1517
- .tds-page-header__primary{
1518
- flex:1 1 max-content;
1519
- width:auto;
1520
- min-width:0;
1521
- max-width:100%;
1491
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1492
+ order:0;
1522
1493
  }
1523
1494
 
1524
- .tds-page-header__title-bar,
1525
- .tds-page-header--profile .tds-page-header__title-bar{
1526
- flex-flow:row nowrap;
1527
- row-gap:12px;
1528
- align-items:flex-start;
1495
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1496
+ flex:1;
1497
+ order:1;
1498
+ margin:0;
1499
+ font-size:var(--t-font-size-lg);
1500
+ font-weight:var(--t-font-weight-medium);
1501
+ color:var(--t-text-color-default-headline);
1529
1502
  }
1530
1503
 
1531
- .tds-page-header [slot="actions"]{
1532
- width:auto;
1504
+ @media (max-width: 719px){
1505
+ .tds-sidenav-collapse{
1506
+ z-index:10001;
1507
+ display:none;
1508
+ max-width:min(448px, calc(100vw - 48px));
1509
+ padding:0;
1510
+ margin:12px 0;
1511
+ overflow:hidden;
1512
+ outline:0;
1513
+ background:var(--t-surface-color-card);
1514
+ border:0;
1515
+ border-radius:6px;
1516
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1517
+ will-change:transform;
1518
+ position-area:bottom span-right;
1533
1519
  }
1534
1520
 
1535
- .has-multi-actions.tds-page-header [slot="actions"],
1536
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1537
- justify-content:flex-end;
1521
+ .tds-sidenav-scroll-container{
1522
+ --webkit-overflow-scrolling:touch;
1523
+ display:block;
1524
+ width:100%;
1525
+ height:-moz-fit-content;
1526
+ height:fit-content;
1527
+ padding:var(--t-spacing-2);
1528
+ overflow-y:auto;
1538
1529
  }
1539
- }
1540
1530
 
1541
- .tds-page-header-phone,
1542
- .tds-page-header-email{
1543
- color:var(--tds-page-header-color);
1544
- white-space:nowrap;
1531
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1532
+ display:none;
1533
+ }
1534
+ @supports selector(:popover-open){
1535
+ .tds-sidenav-collapse:popover-open{
1536
+ display:flex;
1537
+ }
1538
+ }
1539
+ @supports not selector(:popover-open){
1540
+ .tds-sidenav-collapse.\:popover-open{
1541
+ display:flex;
1542
+ }
1543
+ }
1545
1544
  }
1546
1545
 
1547
- .tds-page-header-email{
1548
- max-width:100%;
1549
- overflow:hidden;
1550
- text-overflow:ellipsis;
1546
+ @media (min-width: 720px){
1547
+ .tds-sidenav-responsive-header{
1548
+ display:none;
1549
+ }
1551
1550
  }
1552
1551
 
1553
- @keyframes indicator-pulse{
1554
- 0%{
1555
- opacity:.3;
1556
- transform:scale(.9);
1557
- }
1552
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1553
+ display:none;
1554
+ }
1558
1555
 
1559
- 100%{
1560
- opacity:0;
1561
- transform:scale(1.75);
1562
- }
1563
- }
1556
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1557
+ display:block;
1558
+ }
1559
+
1560
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1561
+ display:flex;
1562
+ flex-direction:column;
1563
+ }
1564
1564
 
1565
1565
  .tds-loading-spinner{
1566
1566
  --tds-loading-spinner-size:1.25em;