@planningcenter/topbar 10.20.0-rc.0 → 10.20.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/topbar.css +91 -71
  2. package/dist/topbar.css.map +1 -1
  3. package/dist/topbar.js +33 -0
  4. package/dist/topbar.js.map +1 -1
  5. package/dist/topbar.modern.js +33 -0
  6. package/dist/topbar.modern.js.map +1 -1
  7. package/dist/topbar.module.js +33 -0
  8. package/dist/topbar.module.js.map +1 -1
  9. package/dist/topbar.umd.js +33 -0
  10. package/dist/topbar.umd.js.map +1 -1
  11. package/dist/types/index.d.ts +9 -1
  12. package/package.json +11 -3
package/dist/topbar.css CHANGED
@@ -20,7 +20,7 @@
20
20
  --toolbar-inner-width: 48px;
21
21
  --toolbar-drawer-width: 360px;
22
22
  --toolbar-navbar-height: 56px;
23
- --content-wrap-border-color: hsl(0 0% 0% / 0.08);
23
+ --content-wrap-border-color: hsla(0, 0%, 0%, 0.08);
24
24
  --content-wrap-shadow-dimensions: 0 -1px 0 0;
25
25
  }
26
26
 
@@ -34,7 +34,7 @@
34
34
  --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);
35
35
  --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);
36
36
  --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);
37
- --content-wrap-border-color: hsl(0 0% 100% / 0.04);
37
+ --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);
38
38
  }
39
39
 
40
40
  @media (prefers-color-scheme: dark) {
@@ -42,7 +42,7 @@
42
42
  --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);
43
43
  --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);
44
44
  --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);
45
- --content-wrap-border-color: hsl(0 0% 100% / 0.04);
45
+ --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);
46
46
  }
47
47
  }
48
48
  /*
@@ -64,61 +64,88 @@ Caused by products overriding .topbar-wrap’s z-index.
64
64
  .hide-scrollbar::-webkit-scrollbar {
65
65
  display: none; /* Chrome, Safari, and Opera */
66
66
  }
67
+
68
+ :root[data-app-context=native] {
69
+ --toolbar-navbar-height: 0;
70
+ }
71
+
72
+ :root[data-app-context=native] .topbar-wrap {
73
+ display: none;
74
+ }
75
+
76
+ :root[data-app-context=native] .toolbar-wrap {
77
+ overflow: hidden;
78
+ }
79
+
80
+ @media screen and (min-width: 600px) {
81
+ :root[data-app-context=native] {
82
+ --toolbar-width: 0px;
83
+ --topbar-height: 0px;
84
+ --toolbar-drawer-width: 48vw;
85
+ }
86
+ :root[data-app-context=native] .content-wrap {
87
+ margin: 0 !important;
88
+ border-radius: 0;
89
+ }
90
+ :root[data-app-context=native] .toolbar-wrap {
91
+ overflow: visible;
92
+ }
93
+ }
67
94
  .accessibility-toolbar-jgjUG {
68
- --topbar-accessibility-toolbar-opacity: 0;
69
- --topbar-accessibility-toolbar-translate-y: 4px;
70
- --topbar-accessibility-toolbar-pointer-events: none;
71
- --topbar-accessibility-toolbar-transition: none;
72
- --topbar-accessibility-toolbar-min-width: 100%;
95
+ --topbar-accessibility-toolbar-opacity: 0;
96
+ --topbar-accessibility-toolbar-translate-y: 4px;
97
+ --topbar-accessibility-toolbar-pointer-events: none;
98
+ --topbar-accessibility-toolbar-transition: none;
99
+ --topbar-accessibility-toolbar-min-width: 100%;
73
100
 
74
- position: absolute;
75
- top: var(--t-spacing-4);
76
- left: 50%;
77
- transform: translate(-50%, var(--topbar-accessibility-toolbar-translate-y));
78
- z-index: 1000;
101
+ position: absolute;
102
+ top: var(--t-spacing-4);
103
+ left: 50%;
104
+ transform: translate(-50%, var(--topbar-accessibility-toolbar-translate-y));
105
+ z-index: 1000;
79
106
 
80
- padding: var(--t-spacing-2);
81
- width: max-content;
82
- min-width: var(--topbar-accessibility-toolbar-min-width);
83
- max-width: 100vw;
84
- display: flex;
85
- justify-content: center;
86
- gap: var(--t-spacing-2);
87
- flex-wrap: wrap;
107
+ padding: var(--t-spacing-2);
108
+ width: max-content;
109
+ min-width: var(--topbar-accessibility-toolbar-min-width);
110
+ max-width: 100vw;
111
+ display: flex;
112
+ justify-content: center;
113
+ gap: var(--t-spacing-2);
114
+ flex-wrap: wrap;
88
115
 
89
- border-radius: var(--t-border-radius-md);
90
- background: var(--t-surface-color-card);
91
- box-shadow: 0 4px 18px 0 var(--t-fill-color-transparency-dark-020);
92
- opacity: var(--topbar-accessibility-toolbar-opacity);
116
+ border-radius: var(--t-border-radius-md);
117
+ background: var(--t-surface-color-card);
118
+ box-shadow: 0 4px 18px 0 var(--t-fill-color-transparency-dark-020);
119
+ opacity: var(--topbar-accessibility-toolbar-opacity);
93
120
 
94
- pointer-events: var(--topbar-accessibility-toolbar-pointer-events);
95
- transition: var(--topbar-accessibility-toolbar-transition);
121
+ pointer-events: var(--topbar-accessibility-toolbar-pointer-events);
122
+ transition: var(--topbar-accessibility-toolbar-transition);
96
123
  }
97
124
 
98
125
  .accessibility-toolbar-jgjUG:focus-within {
99
- --topbar-accessibility-toolbar-translate-y: 0;
100
- --topbar-accessibility-toolbar-opacity: 1;
101
- --topbar-accessibility-toolbar-pointer-events: auto;
102
- --topbar-accessibility-toolbar-transition: opacity 160ms ease-out, transform 120ms ease-out;
126
+ --topbar-accessibility-toolbar-translate-y: 0;
127
+ --topbar-accessibility-toolbar-opacity: 1;
128
+ --topbar-accessibility-toolbar-pointer-events: auto;
129
+ --topbar-accessibility-toolbar-transition: opacity 160ms ease-out, transform 120ms ease-out;
103
130
  }
104
-
131
+
105
132
  #main-content:focus-visible {
106
- outline: none;
133
+ outline: none;
107
134
  }
108
135
 
109
136
  @media (min-width: 600px) {
110
- .accessibility-toolbar-jgjUG {
111
- --topbar-accessibility-toolbar-min-width: 0;
112
- }
113
-
114
- .accessibility-toolbar-jgjUG:has(:only-child) {
115
- --topbar-accessibility-toolbar-min-width: 300px;
116
- }
137
+ .accessibility-toolbar-jgjUG {
138
+ --topbar-accessibility-toolbar-min-width: 0;
139
+ }
140
+
141
+ .accessibility-toolbar-jgjUG:has(:only-child) {
142
+ --topbar-accessibility-toolbar-min-width: 300px;
143
+ }
117
144
  }
118
145
  .announcement-pI5tM {
119
146
  font-size: var(--t-font-size-sm);
120
- color: hsl(0 0% 94%); /* TODO: Replace with static tokens when we get them */
121
- background-color: hsl(0 0% 0% / 0.5); /* TODO: Replace with static tokens when we get them */
147
+ color: hsl(0, 0%, 94%); /* TODO: Replace with static tokens when we get them */
148
+ background-color: hsla(0, 0%, 0%, 0.5); /* TODO: Replace with static tokens when we get them */
122
149
  display: flex;
123
150
  align-items: center;
124
151
  padding: var(--t-spacing-2);
@@ -126,7 +153,7 @@ Caused by products overriding .topbar-wrap’s z-index.
126
153
  box-sizing: border-box;
127
154
  }
128
155
  .announcement--platform-EcUn2 {
129
- background-color: hsl(0 0% 0% / 0.6); /* TODO: Replace with static tokens when we get them */
156
+ background-color: hsla(0, 0%, 0%, 0.6); /* TODO: Replace with static tokens when we get them */
130
157
  }
131
158
 
132
159
  .announcement-icon-Ov39- {
@@ -210,7 +237,7 @@ Caused by products overriding .topbar-wrap’s z-index.
210
237
  color: var(--t-text-color-default-primary);
211
238
  font-size: var(--t-font-size-sm);
212
239
  font-weight: var(--t-font-weight-medium);
213
- margin-left: var(--t-spacing-quarter);
240
+ margin-left: var(--t-spacing-fourth);
214
241
  }
215
242
 
216
243
  .chevron-RRg9k {
@@ -247,19 +274,17 @@ Caused by products overriding .topbar-wrap’s z-index.
247
274
 
248
275
  .popup-nQXYW {
249
276
  background: var(--t-surface-color-card);
250
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
251
- 0 4px 12px 2px rgba(0, 0, 0, 0.16);
277
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 12px 2px rgba(0, 0, 0, 0.16);
252
278
  border-radius: var(--t-border-radius-lg);
253
279
  position: absolute;
254
-
255
280
  overflow: auto;
256
281
  scrollbar-color: var(--topbar-scrollbar-color);
257
282
  scrollbar-width: var(--topbar-scrollbar-width);
258
-
259
283
  opacity: 0;
260
284
  visibility: hidden;
261
285
  transition: all 120ms ease-in;
262
286
  }
287
+
263
288
  .popup-nQXYW.is-visible-3DAUP {
264
289
  opacity: 1;
265
290
  transition: none;
@@ -271,7 +296,7 @@ Caused by products overriding .topbar-wrap’s z-index.
271
296
  font-family: inherit;
272
297
  color: var(--topbar-nav-link-font-color) !important; /* Override product-specific :hover/:visited color */
273
298
  height: var(--topbar-nav-link-height);
274
- border: 1px solid var(--topbar-nav-link-border-color);
299
+ border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color);
275
300
  display: inline-flex;
276
301
  align-items: center;
277
302
  text-decoration: none;
@@ -324,7 +349,7 @@ Caused by products overriding .topbar-wrap’s z-index.
324
349
  height: var(--topbar-nav-link-height);
325
350
  background-color: var(--topbar-nav-link-background-color-active);
326
351
  padding: 0 var(--topbar-nav-link-padding-x);
327
- border: 1px solid var(--topbar-nav-link-border-color-active);
352
+ border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color-active);
328
353
  border-radius: var(--topbar-nav-link-border-radius);
329
354
  min-width: var(--t-container-size-md);
330
355
  transition: var(--topbar-nav-link-transition);
@@ -386,9 +411,8 @@ Caused by products overriding .topbar-wrap’s z-index.
386
411
  }
387
412
 
388
413
  .appmenu-layer-0IQpN {
389
- color: black;
414
+ color: var(--t-text-color-default-headline);
390
415
  background-color: var(--t-fill-color-transparency-dark-static-070);
391
-
392
416
  display: none;
393
417
  position: fixed;
394
418
  top: 0;
@@ -396,7 +420,6 @@ Caused by products overriding .topbar-wrap’s z-index.
396
420
  left: 0;
397
421
  right: 0;
398
422
  z-index: 100;
399
-
400
423
  user-select: none;
401
424
  -webkit-tap-highlight-color: transparent;
402
425
  }
@@ -434,11 +457,11 @@ Caused by products overriding .topbar-wrap’s z-index.
434
457
  }
435
458
  .appmenu-list-a--top-RT-2F {
436
459
  min-height: var(--t-container-size-xl);
437
- border-bottom: 1px solid var(--t-border-color-default-base);
460
+ border-bottom: var(--t-border-width-default) solid var(--t-border-color-default-base);
438
461
  }
439
462
  .appmenu-list-a--bottom-YDeBC {
440
463
  min-height: var(--t-container-size-xl);
441
- border-top: 1px solid var(--t-border-color-default-base);
464
+ border-top: var(--t-border-width-default) solid var(--t-border-color-default-base);
442
465
  }
443
466
  .appmenu-list-a--bottom-YDeBC svg {
444
467
  display: block;
@@ -492,9 +515,7 @@ Caused by products overriding .topbar-wrap’s z-index.
492
515
  left: 50%;
493
516
  transform: translateX(-50%);
494
517
  max-height: calc(100% - var(--topbar-height) - 1px);
495
- box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.05),
496
- 0px 4px 12px 2px hsla(0, 0%, 0%, 0.16);
497
-
518
+ box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.05), 0 4px 12px 2px hsla(0, 0%, 0%, 0.16);
498
519
  overflow: auto;
499
520
  scrollbar-color: var(--topbar-scrollbar-color);
500
521
  scrollbar-width: var(--topbar-scrollbar-width);
@@ -558,9 +579,9 @@ Caused by products overriding .topbar-wrap’s z-index.
558
579
  @media (min-width: 600px) {
559
580
  .drawer-wrap-J0rSL {
560
581
  width: var(--toolbar-drawer-width);
561
- border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent or inset associated with to --t-border-radius-lg */
562
- box-shadow: 0 0 0 1px var(--content-wrap-border-color),
563
- 0 4px 12px 2px rgba(0, 0, 0, 0.16);
582
+ border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent
583
+ or inset associated with to --t-border-radius-lg */
584
+ box-shadow: 0 0 0 1px var(--content-wrap-border-color), 0 4px 12px 2px rgba(0, 0, 0, 0.16);
564
585
 
565
586
  display: block;
566
587
  position: absolute;
@@ -588,18 +609,19 @@ Caused by products overriding .topbar-wrap’s z-index.
588
609
  .indicator-dot-MdX3N {
589
610
  width: 12px;
590
611
  height: 12px;
591
- background-color: #33adff;
592
612
  background: radial-gradient(#33adff 50%, transparent 50%);
593
- box-shadow: inset 0px 0px 0px 2px #b1bfda;
613
+ background-color: #33adff;
614
+ box-shadow: inset 0 0 0 2px #b1bfda;
594
615
  border-radius: 50%;
595
616
  position: absolute;
596
617
  z-index: 6;
597
618
  pointer-events: none;
598
619
  }
620
+
599
621
  .indicator-dot-MdX3N.is-active-mlX23 {
600
622
  width: 10px;
601
623
  height: 10px;
602
- box-shadow: inset 0px 0px 0px 2px var(--t-fill-color-neutral-100);
624
+ box-shadow: inset 0 0 0 2px var(--t-fill-color-neutral-100);
603
625
  transform: translateX(-1.5px) translateY(1.5px);
604
626
  }
605
627
 
@@ -618,7 +640,7 @@ Caused by products overriding .topbar-wrap’s z-index.
618
640
  .color-mode-switcher-label-beta-pwv5t {
619
641
  font-size: var(--t-font-size-xs);
620
642
  font-weight: var(--t-font-weight-semibold);
621
- color: var(--t-text-color-status-secondary);
643
+ color: var(--t-text-color-status-neutral);
622
644
  background-color: var(--t-fill-color-status-neutral-ghost);
623
645
  border-radius: var(--t-border-radius-sm);
624
646
  padding: 0 var(--t-spacing-1);
@@ -629,7 +651,7 @@ Caused by products overriding .topbar-wrap’s z-index.
629
651
 
630
652
  .color-mode-switcher-modes-u-bic {
631
653
  padding: var(--t-spacing-half);
632
- border: 1px solid var(--t-border-color-default-base);
654
+ border: var(--t-border-width-default) solid var(--t-border-color-default-base);
633
655
  border-radius: var(--t-border-radius-md);
634
656
  display: flex;
635
657
  gap: var(--t-spacing-half);
@@ -659,15 +681,13 @@ Caused by products overriding .topbar-wrap’s z-index.
659
681
  }
660
682
  .color-mode-switcher-modes-u-bic svg {
661
683
  display: none;
684
+ margin-right: var(--t-spacing-half);
662
685
  }
663
686
  @container (width >= 256px) {
664
687
  .color-mode-switcher-modes-u-bic svg {
665
688
  display: block;
666
689
  }
667
690
  }
668
- .color-mode-switcher-modes-u-bic svg {
669
- margin-right: var(--t-spacing-half);
670
- }
671
691
  .color-mode-switcher-modes-u-bic svg path {
672
692
  stroke: var(--t-icon-color-default-dim);
673
693
  }
@@ -697,7 +717,7 @@ Caused by products overriding .topbar-wrap’s z-index.
697
717
  font: inherit;
698
718
  color: var(--t-fill-color-transparency-dark-060);
699
719
  background-color: transparent;
700
- border: 1px solid transparent;
720
+ border: var(--t-border-width-default) solid transparent;
701
721
  border-radius: var(--t-border-radius-lg);
702
722
  flex-grow: 1;
703
723
  transition: var(--topbar-slight-transition-background);
@@ -727,7 +747,7 @@ Caused by products overriding .topbar-wrap’s z-index.
727
747
  }
728
748
 
729
749
  .toolbar-button--home-Pthd0 {
730
- color: hsl(221 93% 55%);
750
+ color: hsl(221, 93%, 55%);
731
751
  }
732
752
 
733
753
  @media (min-width: 600px) {
package/dist/topbar.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["topbar.scss","styles.module.css","unbutton.module.css","apps_button.module.scss","apps_menu.module.css","popup.module.css","user_menu.module.css","avatar.module.css","drawer.module.css","indicator_dot.module.css","color_mode_switcher.module.scss"],"names":[],"mappings":"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","file":"topbar.css","sourcesContent":["@charset \"UTF-8\";\n:root {\n --topbar-height: 56px;\n --topbar-slight-transition: 120ms ease-in;\n --topbar-slight-transition-background: background-color var(--topbar-slight-transition);\n --topbar-scrollbar-color: var(--t-fill-color-transparency-dark-030) transparent;\n --topbar-scrollbar-width: thin;\n --topbar-nav-link-font-size: var(--t-font-size-sm);\n --topbar-nav-link-font-color: var(--t-text-color-default-headline);\n --topbar-nav-link-height: var(--t-container-size-md);\n --topbar-nav-link-background-color: transparent;\n --topbar-nav-link-padding-x: 12px;\n --topbar-nav-link-border-color: transparent;\n --topbar-nav-link-border-radius: 999px;\n --topbar-nav-link-transition: var(--topbar-slight-transition-background);\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-040);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-060);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-030);\n --toolbar-width: 64px;\n --toolbar-inner-width: 48px;\n --toolbar-drawer-width: 360px;\n --toolbar-navbar-height: 56px;\n --content-wrap-border-color: hsl(0 0% 0% / 0.08);\n --content-wrap-shadow-dimensions: 0 -1px 0 0;\n}\n\n@media (min-width: 600px) {\n :root {\n --topbar-height: 64px;\n --content-wrap-shadow-dimensions: 0 0 0 1px;\n }\n}\n:root[data-color-mode=dark] {\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);\n --content-wrap-border-color: hsl(0 0% 100% / 0.04);\n}\n\n@media (prefers-color-scheme: dark) {\n :root[data-color-mode=system] {\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);\n --content-wrap-border-color: hsl(0 0% 100% / 0.04);\n }\n}\n/*\nFix for Safari bug:\nOn mobile breakpoints, when the app switcher or user profile menu are open,\nprevent .top-wrap from covering them.\n\nCaused by products overriding .topbar-wrap’s z-index.\n*/\n.page-wrap:has(div[class^=appmenu-layer][style*=\"display: block\"]) .topbar-wrap {\n z-index: initial !important;\n}\n\n.hide-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}\n\n.hide-scrollbar::-webkit-scrollbar {\n display: none; /* Chrome, Safari, and Opera */\n}",".toolbar {\n display: flex;\n width: 100vw;\n height: var(--toolbar-navbar-height);\n padding: var(--t-spacing-1);\n padding-top: calc(var(--t-spacing-1) - 1px);\n gap: var(--t-spacing-1);\n}\n\n.toolbar-button {\n font: inherit;\n color: var(--t-fill-color-transparency-dark-060);\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--t-border-radius-lg);\n flex-grow: 1;\n transition: var(--topbar-slight-transition-background);\n cursor: pointer;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.toolbar-button:hover {\n background-color: var(--t-fill-color-button-interaction-ghost-hover);\n}\n.toolbar-button:active,\n.toolbar-button.is-current {\n color: var(--t-fill-color-transparency-dark-080);\n background-color: var(--t-fill-color-button-interaction-ghost-active);\n}\n\n.toolbar-button--avatar {\n display: none;\n}\n.toolbar-button--avatar > div {\n margin-left: 0;\n width: var(--t-container-size-md);\n height: auto;\n aspect-ratio: 1 / 1;\n}\n\n.toolbar-button--home {\n color: hsl(221 93% 55%);\n}\n\n@media (min-width: 600px) {\n .toolbar {\n width: var(--toolbar-width);\n height: auto;\n padding-top: var(--t-spacing-1);\n flex-direction: column;\n }\n\n .toolbar-button {\n aspect-ratio: 1 / 1;\n }\n .toolbar-button:hover {\n background-color: var(--t-fill-color-transparency-light-040);\n }\n .toolbar-button:active,\n .toolbar-button.is-current {\n color: var(--t-fill-color-transparency-dark-080);\n background-color: var(--t-fill-color-transparency-light-060);\n border-color: var(--t-fill-color-transparency-light-030);\n }\n\n .toolbar-button--avatar {\n display: inline-flex;\n }\n\n .toolbar-button--home {\n display: none;\n }\n}\n",".unbutton {\n font-family: inherit;\n appearance: none;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: inline-block;\n outline: 0;\n padding: 0;\n}\n",".button {\n color: var(--t-text-color-default-primary);\n padding-left: var(--t-spacing-1);\n padding-right: var(--t-spacing-1);\n height: 100%;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: var(--t-spacing-1);\n transition: var(--topbar-slight-transition-background);\n --_svg-display: none;\n}\n.button svg[data-logo=mono-app-text],\n.button svg[class^=chevron] {\n display: var(--_svg-display);\n}\n@media (min-width: 720px) {\n .button {\n --_svg-display: block;\n padding-left: var(--t-spacing-2);\n padding-right: var(--t-spacing-2);\n }\n .button svg[data-logo=color-app-icon] {\n width: 24px;\n height: 24px;\n }\n}\n\n.button-accounts {\n color: var(--t-text-color-default-primary);\n font-size: var(--t-font-size-sm);\n font-weight: var(--t-font-weight-medium);\n margin-left: var(--t-spacing-quarter);\n}\n\n.chevron {\n border-radius: 100%;\n padding: var(--t-spacing-fourth);\n display: block;\n transition: var(--topbar-slight-transition-background);\n transition-property: background-color, transform;\n}\n\n.chevron polygon {\n transform: translateY(0.5px);\n}\n\n.button:hover .chevron,\n.button.is-expanded .chevron {\n background-color: var(--t-fill-color-transparency-light-050);\n}\n\n.button.is-expanded .chevron {\n transform: rotate(180deg);\n}",".popup {\n top: calc(var(--topbar-height) - var(--t-spacing-1));\n left: var(--t-spacing-2);\n min-width: 180px;\n max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));\n}\n",".popup-root {\n display: flex;\n align-self: flex-end;\n}\n\n.popup {\n background: var(--t-surface-color-card);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),\n 0 4px 12px 2px rgba(0, 0, 0, 0.16);\n border-radius: var(--t-border-radius-lg);\n position: absolute;\n\n overflow: auto;\n scrollbar-color: var(--topbar-scrollbar-color);\n scrollbar-width: var(--topbar-scrollbar-width);\n\n opacity: 0;\n visibility: hidden;\n transition: all 120ms ease-in;\n}\n.popup.is-visible {\n opacity: 1;\n transition: none;\n visibility: visible;\n}\n",".popup {\n color: var(--t-text-color-default-primary);\n min-width: 242px;\n max-width: 320px;\n margin-top: calc(var(--t-spacing-1) * -1);\n right: calc(var(--t-spacing-1) + 1px); /* 1px is to account for .product-wrap { padding-right: 1px } */\n max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));\n}\n\n.trigger-wrap {\n margin-left: var(--t-spacing-1);\n position: relative;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.trigger {\n font-size: var(--topbar-nav-link-font-size);\n color: var(--topbar-nav-link-font-color);\n height: var(--topbar-nav-link-height);\n background-color: var(--topbar-nav-link-background-color-active);\n padding: 0 var(--topbar-nav-link-padding-x);\n border: 1px solid var(--topbar-nav-link-border-color-active);\n border-radius: var(--topbar-nav-link-border-radius);\n min-width: var(--t-container-size-md);\n transition: var(--topbar-nav-link-transition);\n display: flex;\n align-items: center;\n justify-content: center;\n outline: 0;\n appearance: none;\n cursor: pointer;\n}\n\n.trigger svg {\n transition: transform var(--topbar-slight-transition);\n /* Negative margin ensures button is a circle when orgname isn’t visible */\n margin-left: calc(var(--t-spacing-1) * -1);\n margin-right: calc(var(--t-spacing-1) * -1);\n}\n\n.trigger.is-visible svg {\n transform: rotate(180deg);\n}\n\n.trigger-orgname {\n max-width: 240px;\n margin-right: var(--t-spacing-fourth);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.trigger-orgname + svg {\n color: var(--t-fill-color-transparency-dark-050);\n /* Correct margin for when orgname is visible */\n margin-left: 0;\n margin-right: calc(var(--t-spacing-fourth) * -1);\n}\n",".avatar {\n background-color: var(--t-fill-color-transparency-light-020);\n background-position: center;\n background-size: cover;\n border-radius: 50%;\n height: var(--t-element-size-2xl);\n width: var(--t-element-size-2xl);\n margin-left: var(--t-spacing-half);\n}\n",".drawer-wrap {\n width: 100%;\n background-color: var(--t-surface-color-card);\n\n display: none;\n position: fixed;\n top: 0;\n bottom: var(--toolbar-navbar-height);\n\n overflow: hidden;\n}\n.drawer-wrap.is-visible {\n display: block;\n}\n\n.drawer {\n display: flex;\n flex-direction: column;\n height: 100%;\n\n overflow: auto;\n scrollbar-color: var(--t-fill-color-transparency-dark-030);\n scrollbar-width: var(--topbar-scrollbar-width);\n}\n\n@media (min-width: 600px) {\n .drawer-wrap {\n width: var(--toolbar-drawer-width);\n border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent or inset associated with to --t-border-radius-lg */\n box-shadow: 0 0 0 1px var(--content-wrap-border-color),\n 0 4px 12px 2px rgba(0, 0, 0, 0.16);\n\n display: block;\n position: absolute;\n bottom: var(--t-spacing-2);\n right: calc(var(--toolbar-drawer-width) * -1);\n top: calc(var(--topbar-height) + var(--t-spacing-1));\n\n opacity: 0;\n transform: translateX(var(--t-spacing-1));\n transition-property: opacity, transform, right;\n transition-duration: 100ms;\n transition-delay: 0s, 0s, 100ms;\n transition-timing-function: ease-in-out;\n }\n .drawer-wrap.is-visible {\n right: calc(var(--toolbar-width) + var(--t-spacing-1) + 1px);\n opacity: 1;\n transform: translateX(0);\n\n transition-property: opacity, transform;\n transition-delay: 0s;\n }\n}\n",".indicator-dot {\n width: 12px;\n height: 12px;\n background-color: #33adff;\n background: radial-gradient(#33adff 50%, transparent 50%);\n box-shadow: inset 0px 0px 0px 2px #b1bfda;\n border-radius: 50%;\n position: absolute;\n z-index: 6;\n pointer-events: none;\n}\n.indicator-dot.is-active {\n width: 10px;\n height: 10px;\n box-shadow: inset 0px 0px 0px 2px var(--t-fill-color-neutral-100);\n transform: translateX(-1.5px) translateY(1.5px);\n}\n",".color-mode-switcher {\n color: var(--t-text-color-default-primary); /* Needed to override .tapestry-react-reset. This is the dumbest thing to have to do */\n border: 0;\n padding: 0;\n}\n\n.color-mode-switcher-label {\n font-weight: var(--t-font-weight-semibold);\n display: inline-block;\n margin-bottom: var(--t-spacing-1);\n}\n\n.color-mode-switcher-label-beta {\n font-size: var(--t-font-size-xs);\n font-weight: var(--t-font-weight-semibold);\n color: var(--t-text-color-status-secondary);\n background-color: var(--t-fill-color-status-neutral-ghost);\n border-radius: var(--t-border-radius-sm);\n padding: 0 var(--t-spacing-1);\n line-height: var(--t-element-size-sm);\n vertical-align: middle;\n text-transform: uppercase;\n}\n\n.color-mode-switcher-modes {\n padding: var(--t-spacing-half);\n border: 1px solid var(--t-border-color-default-base);\n border-radius: var(--t-border-radius-md);\n display: flex;\n gap: var(--t-spacing-half);\n container-type: inline-size;\n}\n.color-mode-switcher-modes input[type=radio] {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n.color-mode-switcher-modes label {\n border-radius: var(--t-border-radius-sm);\n min-height: var(--t-element-size-xl);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n user-select: none;\n margin: 0;\n position: relative;\n}\n.color-mode-switcher-modes label:hover {\n background: var(--t-fill-color-button-neutral-ghost-hover);\n}\n.color-mode-switcher-modes label:has(input:focus-visible) {\n outline: auto;\n}\n.color-mode-switcher-modes svg {\n display: none;\n}\n@container (width >= 256px) {\n .color-mode-switcher-modes svg {\n display: block;\n }\n}\n.color-mode-switcher-modes svg {\n margin-right: var(--t-spacing-half);\n}\n.color-mode-switcher-modes svg path {\n stroke: var(--t-icon-color-default-dim);\n}\n.color-mode-switcher-modes label,\n.color-mode-switcher-modes svg path {\n transition-property: color, background-color, stroke;\n transition-duration: 0.1s;\n transition-timing-function: linear;\n}\n.color-mode-switcher-modes label:has(input:checked) {\n color: var(--t-text-color-status-info);\n background-color: var(--t-fill-color-status-info-ghost);\n}\n.color-mode-switcher-modes label:has(input:checked) svg path {\n stroke: var(--t-icon-color-status-info-primary);\n}"]}
1
+ {"version":3,"sources":["topbar.scss","styles.module.css","unbutton.module.css","apps_button.module.scss","apps_menu.module.css","popup.module.css","user_menu.module.css","avatar.module.css","drawer.module.css","indicator_dot.module.css","color_mode_switcher.module.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB;EACE,qBAAqB;EACrB,yCAAyC;EACzC,uFAAuF;EACvF,+EAA+E;EAC/E,8BAA8B;EAC9B,kDAAkD;EAClD,kEAAkE;EAClE,oDAAoD;EACpD,+CAA+C;EAC/C,iCAAiC;EACjC,2CAA2C;EAC3C,sCAAsC;EACtC,wEAAwE;EACxE,oFAAoF;EACpF,qFAAqF;EACrF,iFAAiF;EACjF,qBAAqB;EACrB,2BAA2B;EAC3B,6BAA6B;EAC7B,6BAA6B;EAC7B,kDAAkD;EAClD,4CAA4C;AAC9C;;AAEA;EACE;IACE,qBAAqB;IACrB,2CAA2C;EAC7C;AACF;AACA;EACE,oFAAoF;EACpF,qFAAqF;EACrF,iFAAiF;EACjF,oDAAoD;AACtD;;AAEA;EACE;IACE,oFAAoF;IACpF,qFAAqF;IACrF,iFAAiF;IACjF,oDAAoD;EACtD;AACF;AACA;;;;;;CAMC;AACD;EACE,2BAA2B;AAC7B;;AAEA;EACE,wBAAwB,EAAE,gBAAgB;EAC1C,qBAAqB,EAAE,YAAY;AACrC;;AAEA;EACE,aAAa,EAAE,8BAA8B;AAC/C;;AAEA;EACE,0BAA0B;AAC5B;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE;IACE,oBAAoB;IACpB,oBAAoB;IACpB,4BAA4B;EAC9B;EACA;IACE,oBAAoB;IACpB,gBAAgB;EAClB;EACA;IACE,iBAAiB;EACnB;AACF;AC5FA;EACE,yCAAyC;EACzC,+CAA+C;EAC/C,mDAAmD;EACnD,+CAA+C;EAC/C,8CAA8C;;EAE9C,kBAAkB;EAClB,uBAAuB;EACvB,SAAS;EACT,2EAA2E;EAC3E,aAAa;;EAEb,2BAA2B;EAC3B,kBAAkB;EAClB,wDAAwD;EACxD,gBAAgB;EAChB,aAAa;EACb,uBAAuB;EACvB,uBAAuB;EACvB,eAAe;;EAEf,wCAAwC;EACxC,uCAAuC;EACvC,kEAAkE;EAClE,oDAAoD;;EAEpD,kEAAkE;EAClE,0DAA0D;AAC5D;;AAEA;EACE,6CAA6C;EAC7C,yCAAyC;EACzC,mDAAmD;EACnD,2FAA2F;AAC7F;;AAEA;EACE,aAAa;AACf;;AAEA;EACE;IACE,2CAA2C;EAC7C;;EAEA;IACE,+CAA+C;EACjD;AACF;AAlDA;EACE,gCAAgC;EAChC,sBAAsB,EAAE,sDAAsD;EAC9E,sCAAsC,EAAE,sDAAsD;EAC9F,aAAa;EACb,mBAAmB;EACnB,2BAA2B;EAC3B,8BAA8B;EAC9B,sBAAsB;AACxB;AACA;EACE,sCAAsC,EAAE,sDAAsD;AAChG;;AAEA;EACE,cAAc;EACd,YAAY;AACd;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,8BAA8B;AAChC;;AAEA;EACE,mBAAmB;EACnB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,qBAAqB;AACvB;;AAEA;EACE;IACE,gCAAgC;IAChC,iCAAiC;EACnC;AACF;;AAEA;EACE,6BAA6B;EAC7B,eAAe;EACf,eAAe;EACf,2BAA2B;EAC3B,qCAAqC;EACrC,gBAAgB;AAClB;;AClDA;EACE,oBAAoB;EACpB,gBAAgB;EAChB,6BAA6B;EAC7B,YAAY;EACZ,eAAe;EACf,qBAAqB;EACrB,UAAU;EACV,UAAU;AACZ;;ACTA;EACE,0CAA0C;EAC1C,gCAAgC;EAChC,iCAAiC;EACjC,YAAY;EACZ,mBAAmB;EACnB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,sDAAsD;EACtD,oBAAoB;AACtB;AACA;;EAEE,4BAA4B;AAC9B;AACA;EACE;IACE,qBAAqB;IACrB,gCAAgC;IAChC,iCAAiC;EACnC;EACA;IACE,WAAW;IACX,YAAY;EACd;AACF;;AAEA;EACE,0CAA0C;EAC1C,gCAAgC;EAChC,wCAAwC;EACxC,oCAAoC;AACtC;;AAEA;EACE,mBAAmB;EACnB,gCAAgC;EAChC,cAAc;EACd,sDAAsD;EACtD,gDAAgD;AAClD;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;;EAEE,4DAA4D;AAC9D;;AAEA;EACE,yBAAyB;AAC3B;ACtDA;EACE,oDAAoD;EACpD,wBAAwB;EACxB,gBAAgB;EAChB,kEAAkE;AACpE;;ACLA;EACE,aAAa;EACb,oBAAoB;AACtB;;AAEA;EACE,uCAAuC;EACvC,6EAA6E;EAC7E,wCAAwC;EACxC,kBAAkB;EAClB,cAAc;EACd,8CAA8C;EAC9C,8CAA8C;EAC9C,UAAU;EACV,kBAAkB;EAClB,6BAA6B;AAC/B;;AAEA;EACE,UAAU;EACV,gBAAgB;EAChB,mBAAmB;AACrB;;AJtBA;EACE,2CAA2C;EAC3C,oBAAoB;EACpB,mDAAmD,EAAE,oDAAoD;EACzG,qCAAqC;EACrC,+EAA+E;EAC/E,oBAAoB;EACpB,mBAAmB;EACnB,qBAAqB;EACrB,0BAA0B;EAC1B,sBAAsB;EACtB,mBAAmB;EACnB,mCAAmC,EAAE,aAAa;EAClD,8CAA8C;EAC9C,+CAA+C;EAC/C,mDAAmD;EACnD,6CAA6C;AAC/C;AACA;EACE,+DAA+D;AACjE;AACA;;EAEE,gEAAgE;EAChE,wDAAwD;AAC1D;;AAEA;EACE,gCAAgC;AAClC;AACA;EACE;IACE,gCAAgC;EAClC;AACF;;AKlCA;EACE,0CAA0C;EAC1C,gBAAgB;EAChB,gBAAgB;EAChB,yCAAyC;EACzC,qCAAqC,EAAE,gEAAgE;EACvG,kEAAkE;AACpE;;AAEA;EACE,+BAA+B;EAC/B,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;AACjB;;AAEA;EACE,2CAA2C;EAC3C,wCAAwC;EACxC,qCAAqC;EACrC,gEAAgE;EAChE,2CAA2C;EAC3C,sFAAsF;EACtF,mDAAmD;EACnD,qCAAqC;EACrC,6CAA6C;EAC7C,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,UAAU;EACV,gBAAgB;EAChB,eAAe;AACjB;;AAEA;EACE,qDAAqD;EACrD,0EAA0E;EAC1E,0CAA0C;EAC1C,2CAA2C;AAC7C;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,gBAAgB;EAChB,qCAAqC;EACrC,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;AACrB;;AAEA;EACE,gDAAgD;EAChD,+CAA+C;EAC/C,cAAc;EACd,gDAAgD;AAClD;;AC1DA;EACE,4DAA4D;EAC5D,2BAA2B;EAC3B,sBAAsB;EACtB,kBAAkB;EAClB,iCAAiC;EACjC,gCAAgC;EAChC,kCAAkC;AACpC;;ANRA;EACE,eAAe;EACf,6BAA6B;EAC7B,YAAY;EACZ,gCAAgC;EAChC,iCAAiC;EACjC,gBAAgB;;EAEhB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,2CAA2C;EAC3C,kEAAkE;EAClE,aAAa;EACb,eAAe;EACf,MAAM;EACN,oCAAoC;EACpC,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,iBAAiB;EACjB,wCAAwC;AAC1C;;AAEA;EACE,6CAA6C;EAC7C,gDAAgD;EAChD,sCAAsC;EACtC,aAAa;EACb,sBAAsB;EACtB,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,cAAc;EACd,8CAA8C;EAC9C,8CAA8C;AAChD;;AAEA;EACE,gBAAgB;EAChB,UAAU;EACV,SAAS;AACX;;AAEA;EACE,gCAAgC;EAChC,0CAA0C;EAC1C,qBAAqB;EACrB,sCAAsC;EACtC,iDAAiD;EACjD,aAAa;EACb,mBAAmB;AACrB;AACA;EACE,sCAAsC;EACtC,qFAAqF;AACvF;AACA;EACE,sCAAsC;EACtC,kFAAkF;AACpF;AACA;EACE,cAAc;EACd,mCAAmC;EACnC,+CAA+C;AACjD;;AAEA;EACE,6BAA6B;EAC7B,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,kBAAkB;EAClB,yBAAyB;EACzB,qDAAqD;AACvD;;AAEA;EACE,aAAa;EACb,2CAA2C;EAC3C,iCAAiC;EACjC,kBAAkB;EAClB,6BAA6B;EAC7B,eAAe;EACf,aAAa;EACb,YAAY;EACZ,mBAAmB;EACnB,uBAAuB;EACvB,iCAAiC;EACjC,gBAAgB;AAClB;AACA;EACE,sBAAsB;EACtB,qDAAqD;AACvD;AACA;EACE,yBAAyB;AAC3B;;AAEA;EACE,6CAA6C;EAC7C,wCAAwC;EACxC,2BAA2B;EAC3B,aAAa;EACb,sBAAsB;EACtB,8BAA8B;EAC9B,kBAAkB;EAClB,sCAAsC;EACtC,gBAAgB;EAChB,uDAAuD;EACvD,SAAS;EACT,2BAA2B;EAC3B,mDAAmD;EACnD,iFAAiF;EACjF,cAAc;EACd,8CAA8C;EAC9C,8CAA8C;AAChD;;AAEA;EACE,oBAAoB;EACpB,gCAAgC;EAChC,iBAAiB;EACjB,oBAAoB;EACpB,kBAAkB;EAClB,qBAAqB;EACrB,0BAA0B;EAC1B,mBAAmB;EACnB,0CAA0C;EAC1C,cAAc;EACd,kBAAkB;EAClB,wCAAwC;AAC1C;AACA;EACE,0EAA0E;AAC5E;AACA;EACE,0CAA0C;EAC1C,2CAA2C;EAC3C,2EAA2E;AAC7E;;AAEA;EACE,6BAA6B;EAC7B,eAAe;EACf,2BAA2B;EAC3B,gBAAgB;AAClB;;AOxJA;EACE,WAAW;EACX,6CAA6C;;EAE7C,aAAa;EACb,eAAe;EACf,MAAM;EACN,oCAAoC;;EAEpC,gBAAgB;AAClB;AACA;EACE,cAAc;AAChB;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,YAAY;;EAEZ,cAAc;EACd,0DAA0D;EAC1D,8CAA8C;AAChD;;AAEA;EACE;IACE,kCAAkC;IAClC,kBAAkB,EAAE;sDAC8B;IAClD,0FAA0F;;IAE1F,cAAc;IACd,kBAAkB;IAClB,0BAA0B;IAC1B,6CAA6C;IAC7C,oDAAoD;;IAEpD,UAAU;IACV,yCAAyC;IACzC,8CAA8C;IAC9C,0BAA0B;IAC1B,+BAA+B;IAC/B,uCAAuC;EACzC;EACA;IACE,4DAA4D;IAC5D,UAAU;IACV,wBAAwB;;IAExB,uCAAuC;IACvC,oBAAoB;EACtB;AACF;;ACrDA;EACE,WAAW;EACX,YAAY;EACZ,yDAAyD;EACzD,yBAAyB;EACzB,mCAAmC;EACnC,kBAAkB;EAClB,kBAAkB;EAClB,UAAU;EACV,oBAAoB;AACtB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,2DAA2D;EAC3D,+CAA+C;AACjD;;ACjBA;EACE,0CAA0C,EAAE,sFAAsF;EAClI,SAAS;EACT,UAAU;AACZ;;AAEA;EACE,0CAA0C;EAC1C,qBAAqB;EACrB,iCAAiC;AACnC;;AAEA;EACE,gCAAgC;EAChC,0CAA0C;EAC1C,yCAAyC;EACzC,0DAA0D;EAC1D,wCAAwC;EACxC,6BAA6B;EAC7B,qCAAqC;EACrC,sBAAsB;EACtB,yBAAyB;AAC3B;;AAEA;EACE,8BAA8B;EAC9B,8EAA8E;EAC9E,wCAAwC;EACxC,aAAa;EACb,0BAA0B;EAC1B,2BAA2B;AAC7B;AACA;EACE,UAAU;EACV,kBAAkB;EAClB,oBAAoB;AACtB;AACA;EACE,wCAAwC;EACxC,oCAAoC;EACpC,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;EACvB,YAAY;EACZ,iBAAiB;EACjB,SAAS;EACT,kBAAkB;AACpB;AACA;EACE,0DAA0D;AAC5D;AACA;EACE,aAAa;AACf;AACA;EACE,aAAa;EACb,mCAAmC;AACrC;AACA;EACE;IACE,cAAc;EAChB;AACF;AACA;EACE,uCAAuC;AACzC;AACA;;EAEE,oDAAoD;EACpD,yBAAyB;EACzB,kCAAkC;AACpC;AACA;EACE,sCAAsC;EACtC,uDAAuD;AACzD;AACA;EACE,+CAA+C;AACjD;AT9EA;EACE,aAAa;EACb,YAAY;EACZ,oCAAoC;EACpC,2BAA2B;EAC3B,2CAA2C;EAC3C,uBAAuB;AACzB;;AAEA;EACE,aAAa;EACb,gDAAgD;EAChD,6BAA6B;EAC7B,uDAAuD;EACvD,wCAAwC;EACxC,YAAY;EACZ,sDAAsD;EACtD,eAAe;EACf,gBAAgB;EAChB,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,oEAAoE;AACtE;AACA;;EAEE,gDAAgD;EAChD,qEAAqE;AACvE;;AAEA;EACE,aAAa;AACf;AACA;EACE,cAAc;EACd,iCAAiC;EACjC,YAAY;EACZ,mBAAmB;AACrB;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE;IACE,2BAA2B;IAC3B,YAAY;IACZ,+BAA+B;IAC/B,sBAAsB;EACxB;;EAEA;IACE,mBAAmB;EACrB;EACA;IACE,4DAA4D;EAC9D;EACA;;IAEE,gDAAgD;IAChD,4DAA4D;IAC5D,wDAAwD;EAC1D;;EAEA;IACE,oBAAoB;EACtB;;EAEA;IACE,aAAa;EACf;AACF","file":"topbar.css","sourcesContent":["@charset \"UTF-8\";\n:root {\n --topbar-height: 56px;\n --topbar-slight-transition: 120ms ease-in;\n --topbar-slight-transition-background: background-color var(--topbar-slight-transition);\n --topbar-scrollbar-color: var(--t-fill-color-transparency-dark-030) transparent;\n --topbar-scrollbar-width: thin;\n --topbar-nav-link-font-size: var(--t-font-size-sm);\n --topbar-nav-link-font-color: var(--t-text-color-default-headline);\n --topbar-nav-link-height: var(--t-container-size-md);\n --topbar-nav-link-background-color: transparent;\n --topbar-nav-link-padding-x: 12px;\n --topbar-nav-link-border-color: transparent;\n --topbar-nav-link-border-radius: 999px;\n --topbar-nav-link-transition: var(--topbar-slight-transition-background);\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-040);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-060);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-030);\n --toolbar-width: 64px;\n --toolbar-inner-width: 48px;\n --toolbar-drawer-width: 360px;\n --toolbar-navbar-height: 56px;\n --content-wrap-border-color: hsla(0, 0%, 0%, 0.08);\n --content-wrap-shadow-dimensions: 0 -1px 0 0;\n}\n\n@media (min-width: 600px) {\n :root {\n --topbar-height: 64px;\n --content-wrap-shadow-dimensions: 0 0 0 1px;\n }\n}\n:root[data-color-mode=dark] {\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);\n --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);\n}\n\n@media (prefers-color-scheme: dark) {\n :root[data-color-mode=system] {\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);\n --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);\n }\n}\n/*\nFix for Safari bug:\nOn mobile breakpoints, when the app switcher or user profile menu are open,\nprevent .top-wrap from covering them.\n\nCaused by products overriding .topbar-wrap’s z-index.\n*/\n.page-wrap:has(div[class^=appmenu-layer][style*=\"display: block\"]) .topbar-wrap {\n z-index: initial !important;\n}\n\n.hide-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}\n\n.hide-scrollbar::-webkit-scrollbar {\n display: none; /* Chrome, Safari, and Opera */\n}\n\n:root[data-app-context=native] {\n --toolbar-navbar-height: 0;\n}\n\n:root[data-app-context=native] .topbar-wrap {\n display: none;\n}\n\n:root[data-app-context=native] .toolbar-wrap {\n overflow: hidden;\n}\n\n@media screen and (min-width: 600px) {\n :root[data-app-context=native] {\n --toolbar-width: 0px;\n --topbar-height: 0px;\n --toolbar-drawer-width: 48vw;\n }\n :root[data-app-context=native] .content-wrap {\n margin: 0 !important;\n border-radius: 0;\n }\n :root[data-app-context=native] .toolbar-wrap {\n overflow: visible;\n }\n}",".toolbar {\n display: flex;\n width: 100vw;\n height: var(--toolbar-navbar-height);\n padding: var(--t-spacing-1);\n padding-top: calc(var(--t-spacing-1) - 1px);\n gap: var(--t-spacing-1);\n}\n\n.toolbar-button {\n font: inherit;\n color: var(--t-fill-color-transparency-dark-060);\n background-color: transparent;\n border: var(--t-border-width-default) solid transparent;\n border-radius: var(--t-border-radius-lg);\n flex-grow: 1;\n transition: var(--topbar-slight-transition-background);\n cursor: pointer;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.toolbar-button:hover {\n background-color: var(--t-fill-color-button-interaction-ghost-hover);\n}\n.toolbar-button:active,\n.toolbar-button.is-current {\n color: var(--t-fill-color-transparency-dark-080);\n background-color: var(--t-fill-color-button-interaction-ghost-active);\n}\n\n.toolbar-button--avatar {\n display: none;\n}\n.toolbar-button--avatar > div {\n margin-left: 0;\n width: var(--t-container-size-md);\n height: auto;\n aspect-ratio: 1 / 1;\n}\n\n.toolbar-button--home {\n color: hsl(221, 93%, 55%);\n}\n\n@media (min-width: 600px) {\n .toolbar {\n width: var(--toolbar-width);\n height: auto;\n padding-top: var(--t-spacing-1);\n flex-direction: column;\n }\n\n .toolbar-button {\n aspect-ratio: 1 / 1;\n }\n .toolbar-button:hover {\n background-color: var(--t-fill-color-transparency-light-040);\n }\n .toolbar-button:active,\n .toolbar-button.is-current {\n color: var(--t-fill-color-transparency-dark-080);\n background-color: var(--t-fill-color-transparency-light-060);\n border-color: var(--t-fill-color-transparency-light-030);\n }\n\n .toolbar-button--avatar {\n display: inline-flex;\n }\n\n .toolbar-button--home {\n display: none;\n }\n}\n",".unbutton {\n font-family: inherit;\n appearance: none;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: inline-block;\n outline: 0;\n padding: 0;\n}\n",".button {\n color: var(--t-text-color-default-primary);\n padding-left: var(--t-spacing-1);\n padding-right: var(--t-spacing-1);\n height: 100%;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: var(--t-spacing-1);\n transition: var(--topbar-slight-transition-background);\n --_svg-display: none;\n}\n.button svg[data-logo=mono-app-text],\n.button svg[class^=chevron] {\n display: var(--_svg-display);\n}\n@media (min-width: 720px) {\n .button {\n --_svg-display: block;\n padding-left: var(--t-spacing-2);\n padding-right: var(--t-spacing-2);\n }\n .button svg[data-logo=color-app-icon] {\n width: 24px;\n height: 24px;\n }\n}\n\n.button-accounts {\n color: var(--t-text-color-default-primary);\n font-size: var(--t-font-size-sm);\n font-weight: var(--t-font-weight-medium);\n margin-left: var(--t-spacing-fourth);\n}\n\n.chevron {\n border-radius: 100%;\n padding: var(--t-spacing-fourth);\n display: block;\n transition: var(--topbar-slight-transition-background);\n transition-property: background-color, transform;\n}\n\n.chevron polygon {\n transform: translateY(0.5px);\n}\n\n.button:hover .chevron,\n.button.is-expanded .chevron {\n background-color: var(--t-fill-color-transparency-light-050);\n}\n\n.button.is-expanded .chevron {\n transform: rotate(180deg);\n}",".popup {\n top: calc(var(--topbar-height) - var(--t-spacing-1));\n left: var(--t-spacing-2);\n min-width: 180px;\n max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));\n}\n",".popup-root {\n display: flex;\n align-self: flex-end;\n}\n\n.popup {\n background: var(--t-surface-color-card);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 12px 2px rgba(0, 0, 0, 0.16);\n border-radius: var(--t-border-radius-lg);\n position: absolute;\n overflow: auto;\n scrollbar-color: var(--topbar-scrollbar-color);\n scrollbar-width: var(--topbar-scrollbar-width);\n opacity: 0;\n visibility: hidden;\n transition: all 120ms ease-in;\n}\n\n.popup.is-visible {\n opacity: 1;\n transition: none;\n visibility: visible;\n}\n",".popup {\n color: var(--t-text-color-default-primary);\n min-width: 242px;\n max-width: 320px;\n margin-top: calc(var(--t-spacing-1) * -1);\n right: calc(var(--t-spacing-1) + 1px); /* 1px is to account for .product-wrap { padding-right: 1px } */\n max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));\n}\n\n.trigger-wrap {\n margin-left: var(--t-spacing-1);\n position: relative;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.trigger {\n font-size: var(--topbar-nav-link-font-size);\n color: var(--topbar-nav-link-font-color);\n height: var(--topbar-nav-link-height);\n background-color: var(--topbar-nav-link-background-color-active);\n padding: 0 var(--topbar-nav-link-padding-x);\n border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color-active);\n border-radius: var(--topbar-nav-link-border-radius);\n min-width: var(--t-container-size-md);\n transition: var(--topbar-nav-link-transition);\n display: flex;\n align-items: center;\n justify-content: center;\n outline: 0;\n appearance: none;\n cursor: pointer;\n}\n\n.trigger svg {\n transition: transform var(--topbar-slight-transition);\n /* Negative margin ensures button is a circle when orgname isn’t visible */\n margin-left: calc(var(--t-spacing-1) * -1);\n margin-right: calc(var(--t-spacing-1) * -1);\n}\n\n.trigger.is-visible svg {\n transform: rotate(180deg);\n}\n\n.trigger-orgname {\n max-width: 240px;\n margin-right: var(--t-spacing-fourth);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.trigger-orgname + svg {\n color: var(--t-fill-color-transparency-dark-050);\n /* Correct margin for when orgname is visible */\n margin-left: 0;\n margin-right: calc(var(--t-spacing-fourth) * -1);\n}\n",".avatar {\n background-color: var(--t-fill-color-transparency-light-020);\n background-position: center;\n background-size: cover;\n border-radius: 50%;\n height: var(--t-element-size-2xl);\n width: var(--t-element-size-2xl);\n margin-left: var(--t-spacing-half);\n}\n",".drawer-wrap {\n width: 100%;\n background-color: var(--t-surface-color-card);\n\n display: none;\n position: fixed;\n top: 0;\n bottom: var(--toolbar-navbar-height);\n\n overflow: hidden;\n}\n.drawer-wrap.is-visible {\n display: block;\n}\n\n.drawer {\n display: flex;\n flex-direction: column;\n height: 100%;\n\n overflow: auto;\n scrollbar-color: var(--t-fill-color-transparency-dark-030);\n scrollbar-width: var(--topbar-scrollbar-width);\n}\n\n@media (min-width: 600px) {\n .drawer-wrap {\n width: var(--toolbar-drawer-width);\n border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent \n or inset associated with to --t-border-radius-lg */\n box-shadow: 0 0 0 1px var(--content-wrap-border-color), 0 4px 12px 2px rgba(0, 0, 0, 0.16);\n\n display: block;\n position: absolute;\n bottom: var(--t-spacing-2);\n right: calc(var(--toolbar-drawer-width) * -1);\n top: calc(var(--topbar-height) + var(--t-spacing-1));\n\n opacity: 0;\n transform: translateX(var(--t-spacing-1));\n transition-property: opacity, transform, right;\n transition-duration: 100ms;\n transition-delay: 0s, 0s, 100ms;\n transition-timing-function: ease-in-out;\n }\n .drawer-wrap.is-visible {\n right: calc(var(--toolbar-width) + var(--t-spacing-1) + 1px);\n opacity: 1;\n transform: translateX(0);\n\n transition-property: opacity, transform;\n transition-delay: 0s;\n }\n}\n",".indicator-dot {\n width: 12px;\n height: 12px;\n background: radial-gradient(#33adff 50%, transparent 50%);\n background-color: #33adff;\n box-shadow: inset 0 0 0 2px #b1bfda;\n border-radius: 50%;\n position: absolute;\n z-index: 6;\n pointer-events: none;\n}\n\n.indicator-dot.is-active {\n width: 10px;\n height: 10px;\n box-shadow: inset 0 0 0 2px var(--t-fill-color-neutral-100);\n transform: translateX(-1.5px) translateY(1.5px);\n}\n",".color-mode-switcher {\n color: var(--t-text-color-default-primary); /* Needed to override .tapestry-react-reset. This is the dumbest thing to have to do */\n border: 0;\n padding: 0;\n}\n\n.color-mode-switcher-label {\n font-weight: var(--t-font-weight-semibold);\n display: inline-block;\n margin-bottom: var(--t-spacing-1);\n}\n\n.color-mode-switcher-label-beta {\n font-size: var(--t-font-size-xs);\n font-weight: var(--t-font-weight-semibold);\n color: var(--t-text-color-status-neutral);\n background-color: var(--t-fill-color-status-neutral-ghost);\n border-radius: var(--t-border-radius-sm);\n padding: 0 var(--t-spacing-1);\n line-height: var(--t-element-size-sm);\n vertical-align: middle;\n text-transform: uppercase;\n}\n\n.color-mode-switcher-modes {\n padding: var(--t-spacing-half);\n border: var(--t-border-width-default) solid var(--t-border-color-default-base);\n border-radius: var(--t-border-radius-md);\n display: flex;\n gap: var(--t-spacing-half);\n container-type: inline-size;\n}\n.color-mode-switcher-modes input[type=radio] {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n.color-mode-switcher-modes label {\n border-radius: var(--t-border-radius-sm);\n min-height: var(--t-element-size-xl);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n user-select: none;\n margin: 0;\n position: relative;\n}\n.color-mode-switcher-modes label:hover {\n background: var(--t-fill-color-button-neutral-ghost-hover);\n}\n.color-mode-switcher-modes label:has(input:focus-visible) {\n outline: auto;\n}\n.color-mode-switcher-modes svg {\n display: none;\n margin-right: var(--t-spacing-half);\n}\n@container (width >= 256px) {\n .color-mode-switcher-modes svg {\n display: block;\n }\n}\n.color-mode-switcher-modes svg path {\n stroke: var(--t-icon-color-default-dim);\n}\n.color-mode-switcher-modes label,\n.color-mode-switcher-modes svg path {\n transition-property: color, background-color, stroke;\n transition-duration: 0.1s;\n transition-timing-function: linear;\n}\n.color-mode-switcher-modes label:has(input:checked) {\n color: var(--t-text-color-status-info);\n background-color: var(--t-fill-color-status-info-ghost);\n}\n.color-mode-switcher-modes label:has(input:checked) svg path {\n stroke: var(--t-icon-color-status-info-primary);\n}"]}
package/dist/topbar.js CHANGED
@@ -2007,6 +2007,31 @@ const sortByAttribute = attr => arr => arr.slice().sort((a, b) => a[attr].locale
2007
2007
  const appsMenuFormatter = apps => sortByAttribute("name")(apps).reduce((acc, item) => (item.name || "") === "Church Center" || (item.name || "") === "API" ? acc : item.name === "Home" ? [item, ...acc] : [...acc, item], []);
2008
2008
  const connectedPeopleMenuFormatter = connectedPeople => connectedPeople.slice().sort((a, b) => a.attributes["organization_name"].localeCompare(b.attributes["organization_name"]));
2009
2009
 
2010
+ const useSetCurrentRouteInfo = ({
2011
+ routes,
2012
+ app
2013
+ }) => {
2014
+ React.useEffect(() => {
2015
+ if (window.topbar) {
2016
+ window.topbar.routeInfo = {
2017
+ currentApp: app,
2018
+ currentRoutes: routes.map(({
2019
+ key,
2020
+ props: {
2021
+ to,
2022
+ href,
2023
+ active
2024
+ }
2025
+ }) => ({
2026
+ active,
2027
+ name: key,
2028
+ url: to ?? href
2029
+ }))
2030
+ };
2031
+ }
2032
+ }, [routes, app]);
2033
+ };
2034
+
2010
2035
  const useStore = (selector = state => state) => shim.useSyncExternalStore(store$1.subscribe, () => selector(store$1.getState()));
2011
2036
 
2012
2037
  const useUpdateStore = () => React.useCallback(updates => {
@@ -2253,6 +2278,10 @@ const NotSmallTopbar = ({
2253
2278
  document.removeEventListener("click", handleToolbarClick, true);
2254
2279
  };
2255
2280
  }, [userMenuVisible]);
2281
+ useSetCurrentRouteInfo({
2282
+ app: props.appName,
2283
+ routes: props.routes
2284
+ });
2256
2285
  return /*#__PURE__*/React.createElement(StyledRoot, {
2257
2286
  style: {
2258
2287
  paddingLeft: "16px",
@@ -2423,6 +2452,10 @@ const SmallTopbar = ({
2423
2452
  }) => active) || [];
2424
2453
  const CurrentRouteComponent = currentRouteComponent;
2425
2454
  const currentRouteText = activeRoute && activeRoute[0] && activeRoute[0].props && activeRoute[0].props.children || props.appName;
2455
+ useSetCurrentRouteInfo({
2456
+ app: props.appName,
2457
+ routes: props.routes
2458
+ });
2426
2459
  const accountsProduct = props.apps.find(({
2427
2460
  name
2428
2461
  }) => name === "Accounts");