@campminder/components 0.6.1 → 0.7.1

package/dist/side-nav/SideNav.d.ts

@@ -85,14 +85,12 @@ export declare class SideNav extends LitElement {
      * `MenuTree` (`../menu-tree`, generic — see that file's move note) instead. Icon binding is the only
      * piece of that pipeline still intrinsic to rendering; see `icon-map.ts`.
      *
-     * Not sorted here. core-js's `sortCategoriesData` sorted by `sort_order` then
-     * name at every level because the base64 fixture arrived unsorted; verified
-     * 2026-09-02 that the committed `campminder.json` categories are already in
-     * `sortOrder` order on disk, and `drift.test.ts` pins that order — so imposing a
-     * second sort here would just be a no-op that could silently start doing
-     * something the day the JSON stops being pre-sorted. If that's ever untrue, the
-     * fix belongs where the JSON is authored, not in a render-time sort this
-     * component would then always pay for.
+     * Not sorted here: the tree arrives in display order. System sorts by `sortOrder`
+     * then name, at every level, on the label the camp actually sees, so the order
+     * depends on each camp's terminology and cannot be fixed in the committed JSON.
+     * The server does it in `getFilteredMenu`, after terms resolve (AB#29742). The
+     * raw tree exported for client use (`CAMPMINDER_TREE`, `loadCampminderTree`) is
+     * neither resolved nor sorted; a host rendering it directly gets on-disk order.
      */
     tree: MenuTree;
     /**

package/dist/side-nav/mega-menu-mobile-design.test.d.ts

@@ -0,0 +1 @@
+

package/dist/side-nav.js

@@ -1,11 +1,11 @@
-import { A, b as n, S as C, i as b, n as h, a as w, t as y } from "./shell-tokens-BjECzZvL.js";
+import { A as R, b as n, S as b, i as C, n as h, a as w, t as y } from "./shell-tokens-BjECzZvL.js";
 import { r as m } from "./state-BvQoY71J.js";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const v = (e) => e ?? A, R = n` <svg
+const v = (e) => e ?? R, D = n` <svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -16,7 +16,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M15 1.6665H5.00001C4.08334 1.6665 3.33334 2.4165 3.33334 3.33317V16.6665C3.33334 17.5832 4.08334 18.3332 5.00001 18.3332H15C15.9167 18.3332 16.6667 17.5832 16.6667 16.6665V3.33317C16.6667 2.4165 15.9167 1.6665 15 1.6665ZM5.00001 3.33317H9.16668V9.99984L7.08334 8.74984L5.00001 9.99984V3.33317Z"
     fill="white"
   />
-</svg>`, D = n`<svg
+</svg>`, _ = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -27,7 +27,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M15.95 10.7833C15.9833 10.5333 16 10.275 16 10C16 9.73333 15.9833 9.46667 15.9417 9.21667L17.6333 7.9C17.7833 7.78333 17.825 7.55833 17.7333 7.39167L16.1333 4.625C16.0333 4.44167 15.825 4.38333 15.6417 4.44167L13.65 5.24167C13.2333 4.925 12.7917 4.65833 12.3 4.45833L12 2.34167C11.9667 2.14167 11.8 2 11.6 2H8.39999C8.19999 2 8.04166 2.14167 8.00832 2.34167L7.70832 4.45833C7.21666 4.65833 6.76666 4.93333 6.35832 5.24167L4.36666 4.44167C4.18332 4.375 3.97499 4.44167 3.87499 4.625L2.28332 7.39167C2.18332 7.56667 2.21666 7.78333 2.38332 7.9L4.07499 9.21667C4.03332 9.46667 3.99999 9.74167 3.99999 10C3.99999 10.2583 4.01666 10.5333 4.05832 10.7833L2.36666 12.1C2.21666 12.2167 2.17499 12.4417 2.26666 12.6083L3.86666 15.375C3.96666 15.5583 4.17499 15.6167 4.35832 15.5583L6.34999 14.7583C6.76666 15.075 7.20832 15.3417 7.69999 15.5417L7.99999 17.6583C8.04166 17.8583 8.19999 18 8.39999 18H11.6C11.8 18 11.9667 17.8583 11.9917 17.6583L12.2917 15.5417C12.7833 15.3417 13.2333 15.075 13.6417 14.7583L15.6333 15.5583C15.8167 15.625 16.025 15.5583 16.125 15.375L17.725 12.6083C17.825 12.425 17.7833 12.2167 17.625 12.1L15.95 10.7833ZM9.99999 13C8.34999 13 6.99999 11.65 6.99999 10C6.99999 8.35 8.34999 7 9.99999 7C11.65 7 13 8.35 13 10C13 11.65 11.65 13 9.99999 13Z"
     fill="white"
   />
-</svg> `, _ = n`<svg
+</svg> `, F = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -38,7 +38,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M4.16668 10.9833V14.3167L10 17.5L15.8333 14.3167V10.9833L10 14.1667L4.16668 10.9833ZM10 2.5L0.833344 7.5L10 12.5L17.5 8.40833V14.1667H19.1667V7.5L10 2.5Z"
     fill="white"
   />
-</svg> `, F = n`<svg
+</svg> `, P = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -49,7 +49,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M9.99999 1.6665C5.39999 1.6665 1.66666 5.39984 1.66666 9.99984C1.66666 14.5998 5.39999 18.3332 9.99999 18.3332C14.6 18.3332 18.3333 14.5998 18.3333 9.99984C18.3333 5.39984 14.6 1.6665 9.99999 1.6665ZM9.99999 4.1665C11.3833 4.1665 12.5 5.28317 12.5 6.6665C12.5 8.04984 11.3833 9.1665 9.99999 9.1665C8.61666 9.1665 7.49999 8.04984 7.49999 6.6665C7.49999 5.28317 8.61666 4.1665 9.99999 4.1665ZM9.99999 15.9998C7.91666 15.9998 6.07499 14.9332 4.99999 13.3165C5.02499 11.6582 8.33332 10.7498 9.99999 10.7498C11.6583 10.7498 14.975 11.6582 15 13.3165C13.925 14.9332 12.0833 15.9998 9.99999 15.9998Z"
     fill="white"
   />
-</svg>`, P = n`<svg
+</svg>`, z = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -71,7 +71,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M1.70687 0L0.296875 1.41L4.87687 6L0.296875 10.59L1.70687 12L7.70687 6L1.70687 0Z"
     fill="white"
   />
-</svg>`, z = (e = "#505050") => n`<svg
+</svg>`, Z = (e = "#505050") => n`<svg
     width="14"
     height="14"
     viewBox="0 0 14 14"
@@ -104,7 +104,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M15.95 10.7833C15.9833 10.5333 16 10.275 16 10C16 9.73333 15.9833 9.46667 15.9417 9.21667L17.6333 7.9C17.7833 7.78333 17.825 7.55833 17.7333 7.39167L16.1333 4.625C16.0333 4.44167 15.825 4.38333 15.6417 4.44167L13.65 5.24167C13.2333 4.925 12.7917 4.65833 12.3 4.45833L12 2.34167C11.9667 2.14167 11.8 2 11.6 2H8.39999C8.19999 2 8.04166 2.14167 8.00832 2.34167L7.70832 4.45833C7.21666 4.65833 6.76666 4.93333 6.35832 5.24167L4.36666 4.44167C4.18332 4.375 3.97499 4.44167 3.87499 4.625L2.28332 7.39167C2.18332 7.56667 2.21666 7.78333 2.38332 7.9L4.07499 9.21667C4.03332 9.46667 3.99999 9.74167 3.99999 10C3.99999 10.2583 4.01666 10.5333 4.05832 10.7833L2.36666 12.1C2.21666 12.2167 2.17499 12.4417 2.26666 12.6083L3.86666 15.375C3.96666 15.5583 4.17499 15.6167 4.35832 15.5583L6.34999 14.7583C6.76666 15.075 7.20832 15.3417 7.69999 15.5417L7.99999 17.6583C8.04166 17.8583 8.19999 18 8.39999 18H11.6C11.8 18 11.9667 17.8583 11.9917 17.6583L12.2917 15.5417C12.7833 15.3417 13.2333 15.075 13.6417 14.7583L15.6333 15.5583C15.8167 15.625 16.025 15.5583 16.125 15.375L17.725 12.6083C17.825 12.425 17.7833 12.2167 17.625 12.1L15.95 10.7833ZM9.99999 13C8.34999 13 6.99999 11.65 6.99999 10C6.99999 8.35 8.34999 7 9.99999 7C11.65 7 13 8.35 13 10C13 11.65 11.65 13 9.99999 13Z"
     fill="white"
   />
-</svg> `, U = n`<svg
+</svg> `, j = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -115,7 +115,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M9.99999 1.6665C5.39999 1.6665 1.66666 5.39984 1.66666 9.99984C1.66666 14.5998 5.39999 18.3332 9.99999 18.3332C14.6 18.3332 18.3333 14.5998 18.3333 9.99984C18.3333 5.39984 14.6 1.6665 9.99999 1.6665ZM10.7333 14.7998V15.8332H9.27499V14.7582C8.65832 14.6082 7.28332 14.1165 6.75832 12.2915L8.13332 11.7332C8.18332 11.9165 8.61666 13.4748 10.1333 13.4748C10.9083 13.4748 11.7833 13.0748 11.7833 12.1332C11.7833 11.3332 11.2 10.9165 9.88332 10.4415C8.96666 10.1165 7.09166 9.58317 7.09166 7.68317C7.09166 7.59984 7.09999 5.68317 9.27499 5.2165V4.1665H10.7333V5.19984C12.2667 5.4665 12.825 6.6915 12.95 7.05817L11.6333 7.6165C11.5417 7.32484 11.1417 6.49984 10.05 6.49984C9.46666 6.49984 8.54166 6.80817 8.54166 7.65817C8.54166 8.44984 9.25832 8.74984 10.7417 9.2415C12.7417 9.93317 13.25 10.9498 13.25 12.1165C13.25 14.3082 11.1667 14.7248 10.7333 14.7998Z"
     fill="white"
   />
-</svg>`, Z = n`<svg
+</svg>`, E = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -126,7 +126,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M8.33332 17.0832V12.0832H11.6667V17.0832H15.8333V10.4165H18.3333L9.99999 2.9165L1.66666 10.4165H4.16666V17.0832H8.33332Z"
     fill="white"
   />
-</svg>`, K = n`<svg
+</svg>`, U = n`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -137,7 +137,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M16.6667 4.99984H13.3333V3.33317C13.3333 2.4165 12.5833 1.6665 11.6667 1.6665H8.33332C7.41666 1.6665 6.66666 2.4165 6.66666 3.33317V4.99984H3.33332C2.41666 4.99984 1.66666 5.74984 1.66666 6.6665V16.6665C1.66666 17.5832 2.41666 18.3332 3.33332 18.3332H16.6667C17.5833 18.3332 18.3333 17.5832 18.3333 16.6665V6.6665C18.3333 5.74984 17.5833 4.99984 16.6667 4.99984ZM8.33332 3.33317H11.6667V4.99984H8.33332V3.33317ZM13.3333 12.4998H10.8333V14.9998H9.16666V12.4998H6.66666V10.8332H9.16666V8.33317H10.8333V10.8332H13.3333V12.4998Z"
     fill="white"
   />
-</svg> `, j = n` <svg
+</svg> `, K = n` <svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -200,7 +200,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M10 2.0835C6.66668 2.0835 3.33334 2.50016 3.33334 5.41683V13.3335C3.33334 14.1252 3.65001 14.8418 4.16668 15.3668V17.0835C4.16668 17.5418 4.54168 17.9168 5.00001 17.9168H5.83334C6.29168 17.9168 6.66668 17.5418 6.66668 17.0835V16.2502H13.3333V17.0835C13.3333 17.5418 13.7083 17.9168 14.1667 17.9168H15C15.4583 17.9168 15.8333 17.5418 15.8333 17.0835V15.3668C16.35 14.8418 16.6667 14.1252 16.6667 13.3335V5.41683C16.6667 2.50016 13.6833 2.0835 10 2.0835ZM7.08334 13.7502C6.39168 13.7502 5.83334 13.1918 5.83334 12.5002C5.83334 11.8085 6.39168 11.2502 7.08334 11.2502C7.77501 11.2502 8.33334 11.8085 8.33334 12.5002C8.33334 13.1918 7.77501 13.7502 7.08334 13.7502ZM12.9167 13.7502C12.225 13.7502 11.6667 13.1918 11.6667 12.5002C11.6667 11.8085 12.225 11.2502 12.9167 11.2502C13.6083 11.2502 14.1667 11.8085 14.1667 12.5002C14.1667 13.1918 13.6083 13.7502 12.9167 13.7502ZM15 8.75016H5.00001V6.25016H15V8.75016Z"
     fill="white"
   />
-</svg> `, E = 248, T = 16, f = 530, X = b`
+</svg> `, T = 248, O = 16, f = 530, X = C`
   /* ===== HOST-LEVEL CUSTOM PROPERTIES ===== */
   :host {
     /* '--cm-side-nav-width' is set on 'campminder-app-shell''s ':host'
@@ -227,7 +227,7 @@ const v = (e) => e ?? A, R = n` <svg
      * nav's value because both resolve the one 'SHELL_FONT_FAMILY' constant;
      * an inherited-only version would quietly start differing the moment either
      * file stopped doing that. Rationale for the chain: '../shell-tokens.ts'. */
-    --font-family: ${C};
+    --font-family: ${b};
   }
 
   /* ===== CSS RESET ===== */
@@ -326,8 +326,8 @@ const v = (e) => e ?? A, R = n` <svg
 
   /* ===== MENU ITEM ===== */
   .menu-item {
-    width: ${E}px;
-    margin-left: ${T}px;
+    width: ${T}px;
+    margin-left: ${O}px;
     margin-bottom: 12px;
     font-family: var(--font-family);
     font-size: 14px;
@@ -530,7 +530,7 @@ const v = (e) => e ?? A, R = n` <svg
     d="M12 2.5C8 2.5 4 3 4 6.5V16C4 16.95 4.38 17.81 5 18.44V20.5C5 21.05 5.45 21.5 6 21.5H7C7.55 21.5 8 21.05 8 20.5V19.5H16V20.5C16 21.05 16.45 21.5 17 21.5H18C18.55 21.5 19 21.05 19 20.5V18.44C19.62 17.81 20 16.95 20 16V6.5C20 3 16.42 2.5 12 2.5ZM8.5 16.5C7.67 16.5 7 15.83 7 15C7 14.17 7.67 13.5 8.5 13.5C9.33 13.5 10 14.17 10 15C10 15.83 9.33 16.5 8.5 16.5ZM15.5 16.5C14.67 16.5 14 15.83 14 15C14 14.17 14.67 13.5 15.5 13.5C16.33 13.5 17 14.17 17 15C17 15.83 16.33 16.5 15.5 16.5ZM18 10.5H6V7.5H18V10.5Z"
     fill="#505050"
   />
-</svg>`, O = {
+</svg>`, B = {
   AccountsSvgIcon: J,
   AdminSvgIcon: ee,
   AlumniSvgIcon: te,
@@ -545,10 +545,10 @@ const v = (e) => e ?? A, R = n` <svg
   TravelSvgIcon: he
 };
 function de(e) {
-  return e ? e.id === "home" ? Z : O[`${e.label}SvgIcon`] ?? V : V;
+  return e ? e.id === "home" ? E : B[`${e.label}SvgIcon`] ?? V : V;
 }
 function Le(e) {
-  return e ? e.id === "home" ? !0 : `${e.label}SvgIcon` in O : !1;
+  return e ? e.id === "home" ? !0 : `${e.label}SvgIcon` in B : !1;
 }
 function p(e) {
   return e.startsWith("http") ? new URL(e).pathname + new URL(e).search : e;
@@ -575,7 +575,7 @@ function S(e, t) {
 function pe(e, t) {
   return t === "/" ? "home" : ge(e, t) ?? "";
 }
-function B(e) {
+function A(e) {
   return e.popup ? n`
       <a
         class="menu-url"
@@ -668,7 +668,7 @@ let g = class extends w {
     for (const s of e.children)
       o + s.getBoundingClientRect().height + 12 > // 12 for bottom margin on item
       t && (i += 1, o = 0), o += s.getBoundingClientRect().height + 12;
-    e.style.width = `${i * E + (i + 1) * T}px`;
+    e.style.width = `${i * T + (i + 1) * O}px`;
   }
   updated(e) {
     super.updated(e), this.setMenuItemsContainerWidth();
@@ -683,7 +683,7 @@ let g = class extends w {
             <p class="header-title title-text">${e.label}</p>
           </div>
           <p class="close-button" @click=${() => this.handleCloseMegaMenu(!0)}>
-            ${z()}
+            ${Z()}
           </p>
         </div>
         <div class="menu-items">
@@ -700,7 +700,7 @@ let g = class extends w {
       // produce one: an `href`-bearing sub-category whose every leaf is
       // gated off for the viewer.
       i.href ? n`<a class="title-text menu-title" href="${i.href}">${i.label}</a>` : n`<p class="title-text menu-title">${i.label}</p>`}
-                ${i.items.map((o) => B(o))}
+                ${i.items.map((o) => A(o))}
               </div>
             `
     )}
@@ -719,14 +719,14 @@ x([
 g = x([
   y("cm-mega-menu")
 ], g);
-const fe = b`
+const fe = C`
   :host {
     /* The mobile drill-down is rendered inside '<cm-side-nav>'s shadow root, so
      * it would inherit this anyway. Declaring it keeps the panel's typeface a
      * property of the panel — it survives being reparented or slotted later —
      * and cannot drift from the side nav's value, because both resolve the one
      * 'SHELL_FONT_FAMILY' constant. Rationale: '../shell-tokens.ts'. */
-    --font-family: ${C};
+    --font-family: ${b};
   }
 
   * {
@@ -739,15 +739,16 @@ const fe = b`
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: #fff;
+    /* AB#29739: sits on '<cm-side-nav>''s overlay gradient, like the first level. */
+    background: transparent;
   }
 
   .header {
     display: flex;
     align-items: center;
     gap: 8px;
-    color: #505050;
-    border-bottom: 1px solid rgba(160, 160, 160, 1);
+    color: var(--color-text);
+    border-bottom: 1px solid var(--color-border);
     padding: 0 16px;
     height: 56px;
     flex-shrink: 0;
@@ -761,6 +762,7 @@ const fe = b`
     align-items: center;
     border: none;
     background: transparent;
+    color: var(--color-text);
     border-radius: 4px;
     cursor: pointer;
     transition: background 0.2s ease;
@@ -782,7 +784,7 @@ const fe = b`
   }
 
   .title-text {
-    color: #505050;
+    color: var(--color-text);
     font-family: var(--font-family);
     font-size: 16px;
     font-weight: 600;
@@ -824,13 +826,13 @@ const fe = b`
     padding: 6px 12px;
     border-radius: 4px;
     text-decoration: none;
-    color: #380f8c;
+    color: var(--color-text);
     transition: background 0.2s ease;
   }
 
   .menu-url:hover,
   .menu-url:focus {
-    background: rgba(119, 61, 189, 0.12);
+    background: var(--color-hover);
     outline: none;
     cursor: pointer;
   }
@@ -840,11 +842,16 @@ const fe = b`
     display: grid;
     place-content: center;
   }
+
+  /* The shared OpenInNewIcon is filled dark for the desktop flyout's white panel. */
+  .new-tab-icon path {
+    fill: currentColor;
+  }
 `;
-var Ce = Object.defineProperty, be = Object.getOwnPropertyDescriptor, M = (e, t, i, o) => {
-  for (var a = o > 1 ? void 0 : o ? be(t, i) : t, s = e.length - 1, r; s >= 0; s--)
+var be = Object.defineProperty, Ce = Object.getOwnPropertyDescriptor, M = (e, t, i, o) => {
+  for (var a = o > 1 ? void 0 : o ? Ce(t, i) : t, s = e.length - 1, r; s >= 0; s--)
     (r = e[s]) && (a = (o ? r(t, i, a) : r(a)) || a);
-  return o && a && Ce(t, i, a), a;
+  return o && a && be(t, i, a), a;
 };
 let u = class extends w {
   constructor() {
@@ -906,7 +913,7 @@ let u = class extends w {
       (i) => n`
               <div class="menu-item">
                 ${i.href ? n`<a class="title-text menu-title" href="${i.href}">${i.label}</a>` : n`<p class="title-text menu-title">${i.label}</p>`}
-                ${i.items.map((o) => B(o))}
+                ${i.items.map((o) => A(o))}
               </div>
             `
     )}
@@ -925,7 +932,7 @@ M([
 u = M([
   y("cm-mega-menu-mobile")
 ], u);
-const we = b`
+const we = C`
   /* ===== CSS CUSTOM PROPERTIES (DESIGN TOKENS) ===== */
   :host {
     display: block;
@@ -964,7 +971,7 @@ const we = b`
      * silently rendered in the browser's default sans-serif next to a host
      * showing General Sans. The fallback chain and why it must stay a read-only
      * var() live on 'SHELL_FONT_FAMILY' in '../shell-tokens.ts'. */
-    --font-family: ${C};
+    --font-family: ${b};
     --font-size-base: 14px;
     --font-size-medium: 15px;
     --font-size-large: 16px;
@@ -1042,6 +1049,20 @@ const we = b`
     overflow: auto;
   }
 
+  /* AB#29739: the first level's top bar, after core-js 18c4e250's '.menu-close'. */
+  .menu-close {
+    width: 100%;
+    height: var(--sidebar-header-height);
+    display: none;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 var(--spacing-lg);
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--color-border-light);
+    cursor: pointer;
+  }
+
   .mobile-categories-container,
   .mobile-categories-list {
     list-style: none;
@@ -1053,26 +1074,37 @@ const we = b`
     display: contents;
   }
 
+  /* Row spacing matches core-js 18c4e250's open mobile menu (AB#29739). */
   .mobile-category {
     width: 100%;
-    height: var(--category-height);
+    height: var(--sidebar-header-height);
     display: flex;
     align-items: center;
     border: none;
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-light);
     background: transparent;
     text-decoration: none;
-    padding: var(--spacing-md);
+    padding: var(--spacing-md) var(--spacing-lg);
     color: var(--color-text);
     cursor: pointer;
     font-family: var(--font-family);
-    font-size: var(--font-size-base);
+    font-size: var(--font-size-large);
     font-weight: 400;
     line-height: var(--line-height-base);
     letter-spacing: -0.001em;
     text-align: left;
   }
 
+  .mobile-category .category-icon {
+    margin-right: var(--spacing-md);
+    min-width: var(--spacing-2xl);
+    flex-shrink: 0;
+  }
+
+  .mobile-category .category-name {
+    font-weight: 500;
+  }
+
   .mobile-category.selected {
     background: var(--color-selected);
   }
@@ -1319,17 +1351,21 @@ const we = b`
     .menu-toggle {
       display: flex;
     }
+
+    .menu-close {
+      display: flex;
+    }
   }
 `, N = {
-  AccountsSvgIcon: R,
-  AdminSvgIcon: D,
-  AlumniSvgIcon: _,
-  CamperSvgIcon: F,
+  AccountsSvgIcon: D,
+  AdminSvgIcon: _,
+  AlumniSvgIcon: F,
+  CamperSvgIcon: P,
   CommunicationSvgIcon: G,
-  CampInTouchSvgIcon: P,
-  FinancialSvgIcon: U,
-  HomeSvgIcon: Z,
-  MedicalSvgIcon: K,
+  CampInTouchSvgIcon: z,
+  FinancialSvgIcon: j,
+  HomeSvgIcon: E,
+  MedicalSvgIcon: U,
   ReportingSvgIcon: q,
   SchedulingSvgIcon: Y,
   StaffSvgIcon: Q,
@@ -1456,7 +1492,7 @@ let l = class extends w {
   }
   // Utility Methods
   get hamburgerIcon() {
-    return this.collapsed ? L : j;
+    return this.collapsed ? L : K;
   }
   /**
    * The category the mega-menu flyout is open for, or `undefined` when none
@@ -1560,6 +1596,13 @@ let l = class extends w {
   }
   renderMobileMainMenu() {
     return n`
+      <button
+        class="menu-close"
+        @click=${() => this.dismissMobileMenu(!0)}
+        aria-label="Close menu"
+      >
+        ${Z("white")}
+      </button>
       <nav class="mobile-categories-container" role="navigation" aria-label="Main categories">
         <ul class="mobile-categories-list" role="list">
           ${this.tree.map(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campminder/components",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "type": "module",
   "publishConfig": {
     "access": "public"