@timmo001/groundwork-ui 0.9.26 → 0.9.27

package/custom-elements.json

@@ -1485,7 +1485,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A site or app header pinned to the top of the page, with a brand, nav\nlinks and actions, full width with its content kept to the content width.\nIt's transparent at first, then gets a blurred surface and a bottom border\nonce the page scrolls, or once the element\n`reveal-after` names scrolls out of view, such as a hero. With\n`reveal-after` the brand stays hidden, taking no room, until then, so a\nlarge logo in the hero hands over to the small one in the bar. The nav\nslides over as it opens.\n\n`overlay` lays it over the top of the page rather than taking room, for a\npage that opens with a hero. Below `menu-below`, 600px wide by default,\nthe nav moves into a menu opened from a button, which closes on Esc, a\nclick outside or a link. Raise it when the nav and actions need more room.",
+          "description": "A site or app header pinned to the top of the page, with a brand, nav\nlinks and actions, full width with its content kept to the content width.\nIt's transparent at first, then gets a blurred surface and a bottom border\nonce the page scrolls, or once the element\n`reveal-after` names scrolls out of view, such as a hero. With\n`reveal-after` the brand stays hidden, taking no room, until then, so a\nlarge logo in the hero hands over to the small one in the bar. The nav\nslides over as it opens.\n\n`overlay` lays it over the top of the page rather than taking room, for a\npage that opens with a hero. Below `menu-below`, 600px wide by default,\nthe nav moves into a menu opened from a button, which closes on Esc, a\nclick outside or a link. Raise it when the nav and actions need more room.\nWith no nav links there's no menu button, so a bar of only a brand and\nactions keeps its layout at every width.",
           "name": "GwAppBar",
           "cssParts": [
             {
@@ -1540,7 +1540,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { position: sticky; inset-block-start: 0; z-index: 50; display: block; } :host([overlay]) { position: fixed; inset-inline: 0; } .bar { position: relative; display: flex; gap: var(--gw-space-3); align-items: center; min-height: 3.5rem; padding: var(--gw-space-1) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); border-block-end: max(var(--gw-border-width), 1px) solid transparent; transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing), backdrop-filter var(--gw-motion-normal) var(--gw-motion-easing); } :host([floating]) .bar, :host([menu-open]) .bar { background: color-mix( in oklab, var(--gw-color-surface-default) 82%, transparent ); border-color: var(--gw-color-border-quiet); backdrop-filter: blur(12px) saturate(1.4); } /* A one-column grid, so a hidden brand can fold its width to nothing and the nav slides over as it opens, rather than leaving a gap */ .brand { display: grid; flex: none; grid-template-columns: 1fr; align-items: center; transition: grid-template-columns var(--gw-motion-slow) var(--gw-motion-easing), margin var(--gw-motion-slow) var(--gw-motion-easing), opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing); } .brand > slot { display: flex; align-items: center; min-width: 0; overflow: clip; overflow-clip-margin: calc( var(--gw-focus-width) + var(--gw-focus-offset) ); } :host([reveal-after]:not([floating])) .brand { grid-template-columns: 0fr; margin-inline-end: calc(var(--gw-space-3) * -1); pointer-events: none; visibility: hidden; opacity: 0; translate: 0 -0.25rem; transition: grid-template-columns var(--gw-motion-slow) var(--gw-motion-easing), margin var(--gw-motion-slow) var(--gw-motion-easing), opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-slow) allow-discrete; } /* The nav keeps its room; the actions take the rest, which a theme picker fills or gives up by moving its controls into its popover */ .nav { display: flex; flex: none; gap: var(--gw-space-1); align-items: center; min-width: 0; } .actions { display: flex; flex: 1 1 auto; gap: var(--gw-space-1); align-items: center; justify-content: flex-end; } .menu { display: none; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; color: var(--gw-color-text-strong); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); } .menu:hover { background: var(--gw-color-fill-neutral-hovered); } /* Below menu-below, which sets collapsed, the nav folds into a menu */ :host([collapsed]) .menu { display: inline-grid; } :host([collapsed]) .nav { position: absolute; inset-block-start: 100%; inset-inline: 0; flex-direction: column; gap: var(--gw-space-0-5); align-items: stretch; padding: var(--gw-space-2) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); visibility: hidden; background: var(--gw-color-surface-default); border-block-end: max(var(--gw-border-width), 1px) solid var(--gw-color-border-quiet); box-shadow: var(--gw-shadow-m); opacity: 0; translate: 0 -0.5rem; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-normal) allow-discrete; } :host([collapsed][menu-open]) .nav { visibility: visible; opacity: 1; translate: 0 0; } `, ]",
+              "default": "[ base, css` :host { position: sticky; inset-block-start: 0; z-index: 50; display: block; } :host([overlay]) { position: fixed; inset-inline: 0; } .bar { position: relative; display: flex; gap: var(--gw-space-3); align-items: center; min-height: 3.5rem; padding: var(--gw-space-1) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); border-block-end: max(var(--gw-border-width), 1px) solid transparent; transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), border-color var(--gw-motion-normal) var(--gw-motion-easing), backdrop-filter var(--gw-motion-normal) var(--gw-motion-easing); } :host([floating]) .bar, :host([menu-open]) .bar { background: color-mix( in oklab, var(--gw-color-surface-default) 82%, transparent ); border-color: var(--gw-color-border-quiet); backdrop-filter: blur(12px) saturate(1.4); } /* A one-column grid, so a hidden brand can fold its width to nothing and the nav slides over as it opens, rather than leaving a gap */ .brand { display: grid; flex: none; grid-template-columns: 1fr; align-items: center; transition: grid-template-columns var(--gw-motion-slow) var(--gw-motion-easing), margin var(--gw-motion-slow) var(--gw-motion-easing), opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing); } .brand > slot { display: flex; align-items: center; min-width: 0; overflow: clip; overflow-clip-margin: calc( var(--gw-focus-width) + var(--gw-focus-offset) ); } :host([reveal-after]:not([floating])) .brand { grid-template-columns: 0fr; margin-inline-end: calc(var(--gw-space-3) * -1); pointer-events: none; visibility: hidden; opacity: 0; translate: 0 -0.25rem; transition: grid-template-columns var(--gw-motion-slow) var(--gw-motion-easing), margin var(--gw-motion-slow) var(--gw-motion-easing), opacity var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-slow) allow-discrete; } /* The nav keeps its room; the actions take the rest, which a theme picker fills or gives up by moving its controls into its popover */ .nav { display: flex; flex: none; gap: var(--gw-space-1); align-items: center; min-width: 0; } .actions { display: flex; flex: 1 1 auto; gap: var(--gw-space-1); align-items: center; justify-content: flex-end; } .menu { display: none; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; color: var(--gw-color-text-strong); cursor: pointer; background: none; border: 0; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); } .menu:hover { background: var(--gw-color-fill-neutral-hovered); } /* Below menu-below, which sets collapsed, the nav folds into a menu, unless there's no nav to fold */ :host([collapsed]) .bar:not(.no-nav) .menu { display: inline-grid; } .no-nav .nav { display: none; } :host([collapsed]) .nav { position: absolute; inset-block-start: 100%; inset-inline: 0; flex-direction: column; gap: var(--gw-space-0-5); align-items: stretch; padding: var(--gw-space-2) max(var(--gw-space-3), (100% - var(--gw-content-width)) / 2); visibility: hidden; background: var(--gw-color-surface-default); border-block-end: max(var(--gw-border-width), 1px) solid var(--gw-color-border-quiet); box-shadow: var(--gw-shadow-m); opacity: 0; translate: 0 -0.5rem; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing), visibility var(--gw-motion-normal) allow-discrete; } :host([collapsed][menu-open]) .nav { visibility: visible; opacity: 1; translate: 0 0; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -1630,6 +1630,12 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#navSlot",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#nav",
@@ -1639,6 +1645,12 @@
               },
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#bar",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#observer",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-ui",
-  "version": "0.9.26",
+  "version": "0.9.27",
   "description": "Groundwork's framework-free web components, styled by the --gw-* tokens",
   "license": "Apache-2.0",
   "type": "module",

package/src/gw-app-bar.ts

@@ -27,6 +27,8 @@ const closeIcon =
  * page that opens with a hero. Below `menu-below`, 600px wide by default,
  * the nav moves into a menu opened from a button, which closes on Esc, a
  * click outside or a link. Raise it when the nav and actions need more room.
+ * With no nav links there's no menu button, so a bar of only a brand and
+ * actions keeps its layout at every width.
  *
  * @element gw-app-bar
  * @summary A header pinned to the top, floating once the page scrolls.
@@ -178,11 +180,16 @@ export class GwAppBar extends GwElement {
         background: var(--gw-color-fill-neutral-hovered);
       }
 
-      /* Below menu-below, which sets collapsed, the nav folds into a menu */
-      :host([collapsed]) .menu {
+      /* Below menu-below, which sets collapsed, the nav folds into a menu,
+         unless there's no nav to fold */
+      :host([collapsed]) .bar:not(.no-nav) .menu {
         display: inline-grid;
       }
 
+      .no-nav .nav {
+        display: none;
+      }
+
       :host([collapsed]) .nav {
         position: absolute;
         inset-block-start: 100%;
@@ -239,12 +246,16 @@ export class GwAppBar extends GwElement {
     this.#menuIcon,
   );
 
+  readonly #navSlot = h("slot");
+
   readonly #nav: HTMLDivElement = h(
     "div",
     { class: "nav", part: "nav" },
-    h("slot"),
+    this.#navSlot,
   );
 
+  readonly #bar = h("div", { class: "bar no-nav", part: "bar" });
+
   #observer: IntersectionObserver | undefined;
 
   #frame = 0;
@@ -263,8 +274,10 @@ export class GwAppBar extends GwElement {
   /** Follows the viewport across `menuBelow`, setting `collapsed`. */
   #watchWidth() {
     this.#narrow?.removeEventListener("change", this.#onNarrow);
+    const below = Number(this.menuBelow);
+
     this.#narrow = window.matchMedia(
-      `(max-width: ${(Number(this.menuBelow) || 600) - 0.02}px)`,
+      `(max-width: ${(Number.isFinite(below) ? below : 600) - 0.02}px)`,
     );
     this.#narrow.addEventListener("change", this.#onNarrow);
     this.#onNarrow();
@@ -370,25 +383,32 @@ export class GwAppBar extends GwElement {
       }
     });
 
-    root.append(
+    // Without nav links there's nothing to fold, so no menu button
+    this.#navSlot.addEventListener("slotchange", () => {
+      this.#bar.classList.toggle(
+        "no-nav",
+        this.#navSlot
+          .assignedNodes()
+          .every(
+            (node) =>
+              node.nodeType === Node.TEXT_NODE &&
+              node.textContent?.trim() === "",
+          ),
+      );
+    });
+
+    this.#bar.append(
+      // The menu button leads, so a revealed brand opens beside it
+      this.#menu,
+      h("div", { class: "brand", part: "brand" }, h("slot", { name: "brand" })),
+      this.#nav,
       h(
         "div",
-        { class: "bar", part: "bar" },
-        // The menu button leads, so a revealed brand opens beside it
-        this.#menu,
-        h(
-          "div",
-          { class: "brand", part: "brand" },
-          h("slot", { name: "brand" }),
-        ),
-        this.#nav,
-        h(
-          "div",
-          { class: "actions", part: "actions" },
-          h("slot", { name: "actions" }),
-        ),
+        { class: "actions", part: "actions" },
+        h("slot", { name: "actions" }),
       ),
     );
+    root.append(this.#bar);
   }
 
   protected override update(changed: ReadonlySet<string>) {