@timmo001/groundwork-ui 0.5.0 → 0.7.0

package/package.json

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

package/src/fields.ts

@@ -70,12 +70,37 @@ export const fieldStyles = css`
     fill: currentColor;
   }
 
+  /* Sizes run xs to xl through --gw-field-scale, around 1 for medium, and
+     the control's height follows the theme's density too */
+  :where(gw-input, gw-select)[size="xs"] {
+    --gw-field-scale: 0.6;
+  }
+
+  :where(gw-input, gw-select)[size="small"] {
+    --gw-field-scale: 0.8;
+  }
+
+  :where(gw-input, gw-select)[size="large"] {
+    --gw-field-scale: 1.2;
+  }
+
+  :where(gw-input, gw-select)[size="xl"] {
+    --gw-field-scale: 1.4;
+  }
+
   :where(gw-input, gw-select) :where(input, .gw-select-trigger) {
+    --gw-field-size: var(--gw-field-scale, 1);
+    --gw-icon-size: calc(
+      1.25rem * var(--gw-field-size) * var(--gw-control-scale, 1)
+    );
+
     width: 100%;
-    min-height: 2.5rem;
-    padding: 0 var(--gw-space-3);
+    min-height: calc(
+      2.5rem * var(--gw-field-size) * var(--gw-control-scale, 1)
+    );
+    padding: 0 calc(var(--gw-space-3) * var(--gw-field-size));
     font: inherit;
-    font-size: var(--gw-font-size-s);
+    font-size: calc(var(--gw-font-size-s) * var(--gw-field-size));
     color: var(--gw-color-text-strong);
     background: var(--gw-color-surface-lower);
     border: var(--gw-border-width) solid var(--gw-color-border-normal);
@@ -87,9 +112,9 @@ export const fieldStyles = css`
      room around it that turns over while the list is open */
   gw-select .gw-select-trigger {
     display: flex;
-    gap: var(--gw-space-2);
+    gap: calc(var(--gw-space-2) * var(--gw-field-size));
     align-items: center;
-    padding-inline-end: var(--gw-space-3);
+    padding-inline-end: calc(var(--gw-space-3) * var(--gw-field-size));
     text-align: start;
     cursor: pointer;
   }
@@ -110,7 +135,8 @@ export const fieldStyles = css`
 
   gw-select[inline-label] .gw-select-trigger {
     width: auto;
-    padding-inline: var(--gw-space-4) var(--gw-space-3);
+    padding-inline: calc(var(--gw-space-4) * var(--gw-field-size))
+      calc(var(--gw-space-3) * var(--gw-field-size));
     border-radius: var(--gw-radius-pill);
   }
 

package/src/gw-alert.ts

@@ -23,6 +23,10 @@ import { base, type Tone } from "./styles.js";
  * @slot actions - Buttons beside the message.
  *
  * @csspart alert - The alert.
+ *
+ * @cssprop --gw-tone - The icon color, for a tone of your own. `tone` sets it.
+ * @cssprop --gw-tone-fill - The background. `tone` sets it.
+ * @cssprop --gw-tone-border - The border. `tone` sets it.
  */
 export class GwAlert extends GwElement {
   static override properties = {

package/src/gw-app-bar.ts

@@ -13,21 +13,20 @@ const menuIcon = "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z";
 const closeIcon =
   "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
 
-/** Below this width the nav moves into a menu. */
-const menuBelow = 600;
-
 /**
  * A site or app header pinned to the top of the page, with a brand, nav
  * links and actions, full width with its content kept to the content width.
  * It's transparent at first, then gets a blurred surface and a bottom border
  * once the page scrolls, or once the element
  * `reveal-after` names scrolls out of view, such as a hero. With
- * `reveal-after` the brand stays hidden until then, so a large logo in the
- * hero hands over to the small one in the bar.
+ * `reveal-after` the brand stays hidden, taking no room, until then, so a
+ * large logo in the hero hands over to the small one in the bar. The nav
+ * slides over as it opens.
  *
  * `overlay` lays it over the top of the page rather than taking room, for a
- * page that opens with a hero. Below 600px wide the nav moves into a menu
- * opened from a button, which closes on Esc, a click outside or a link.
+ * 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.
  *
  * @element gw-app-bar
  * @summary A header pinned to the top, floating once the page scrolls.
@@ -35,6 +34,8 @@ const menuBelow = 600;
  * @attr {string} reveal-after - A CSS selector for the element, such as a hero, to scroll past before the bar floats and the brand shows.
  * @attr {boolean} overlay - Lays the bar over the top of the page instead of taking room.
  * @attr {boolean} floating - Whether it floats. Set by the bar as the page scrolls.
+ * @attr {number} menu-below - The viewport width in pixels below which the nav moves into a menu. Defaults to `600`.
+ * @attr {boolean} collapsed - Whether the nav is in the menu. Set by the bar from `menu-below`.
  * @attr {boolean} menu-open - Whether the nav menu is open on narrow screens.
  * @attr {string} menu-label - The menu button's accessible name. Defaults to `Menu`.
  *
@@ -43,7 +44,9 @@ const menuBelow = 600;
  * @slot actions - Icon links and buttons at the end.
  *
  * @csspart bar - The bar.
+ * @csspart brand - The brand's container.
  * @csspart nav - The nav links' container, the menu panel on narrow screens.
+ * @csspart actions - The actions' container.
  *
  * @fires {Event} toggle - When the nav menu opens or closes.
  */
@@ -54,6 +57,8 @@ export class GwAppBar extends GwElement {
     floating: { type: "boolean", reflect: true },
     menuOpen: { type: "boolean", attribute: "menu-open", reflect: true },
     menuLabel: { attribute: "menu-label" },
+    menuBelow: { type: "number", attribute: "menu-below" },
+    collapsed: { type: "boolean", reflect: true },
   } as const;
 
   static override styles = [
@@ -97,24 +102,43 @@ export class GwAppBar extends GwElement {
         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: flex;
+        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-normal) allow-discrete;
+          visibility var(--gw-motion-slow) allow-discrete;
       }
 
       .nav {
@@ -152,37 +176,37 @@ export class GwAppBar extends GwElement {
         background: var(--gw-color-fill-neutral-hovered);
       }
 
-      @media (max-width: ${menuBelow - 0.02}px) {
-        .menu {
-          display: inline-grid;
-        }
-
-        .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) var(--gw-space-3);
-          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([menu-open]) .nav {
-          visibility: visible;
-          opacity: 1;
-          translate: 0 0;
-        }
+      /* 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;
       }
     `,
   ];
@@ -192,6 +216,18 @@ export class GwAppBar extends GwElement {
   declare floating: boolean;
   declare menuOpen: boolean;
   declare menuLabel: string;
+  /** The viewport width in pixels below which the nav moves into a menu. */
+  declare menuBelow: number;
+  /** Whether the nav is in the menu. Set by the bar from `menuBelow`. */
+  declare collapsed: boolean;
+
+  #narrow: MediaQueryList | undefined;
+
+  readonly #onNarrow = () => {
+    this.collapsed = this.#narrow?.matches === true;
+
+    if (!this.collapsed) this.toggleMenu(false);
+  };
 
   readonly #menuIcon = createIcon(menuIcon);
 
@@ -214,10 +250,23 @@ export class GwAppBar extends GwElement {
     this.floating = false;
     this.menuOpen = false;
     this.menuLabel = "Menu";
+    this.menuBelow = 600;
+    this.collapsed = false;
+  }
+
+  /** Follows the viewport across `menuBelow`, setting `collapsed`. */
+  #watchWidth() {
+    this.#narrow?.removeEventListener("change", this.#onNarrow);
+    this.#narrow = window.matchMedia(
+      `(max-width: ${(Number(this.menuBelow) || 600) - 0.02}px)`,
+    );
+    this.#narrow.addEventListener("change", this.#onNarrow);
+    this.#onNarrow();
   }
 
   override connectedCallback() {
     super.connectedCallback();
+    this.#watchWidth();
     document.addEventListener("keydown", this.#onKeydown);
     document.addEventListener("pointerdown", this.#onOutside, true);
 
@@ -232,6 +281,8 @@ export class GwAppBar extends GwElement {
 
   override disconnectedCallback() {
     this.#unwatch();
+    this.#narrow?.removeEventListener("change", this.#onNarrow);
+    this.#narrow = undefined;
     document.removeEventListener("keydown", this.#onKeydown);
     document.removeEventListener("pointerdown", this.#onOutside, true);
     super.disconnectedCallback();
@@ -317,10 +368,19 @@ export class GwAppBar extends GwElement {
       h(
         "div",
         { class: "bar", part: "bar" },
-        h("div", { class: "brand" }, h("slot", { name: "brand" })),
+        // 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" }, h("slot", { name: "actions" })),
+        h(
+          "div",
+          { class: "actions", part: "actions" },
+          h("slot", { name: "actions" }),
+        ),
       ),
     );
   }
@@ -331,6 +391,10 @@ export class GwAppBar extends GwElement {
     setIconPath(this.#menuIcon, this.menuOpen ? closeIcon : menuIcon);
 
     if (changed.has("revealAfter") && this.isConnected) this.#watch();
+
+    if (changed.has("menuBelow") && this.#narrow !== undefined) {
+      this.#watchWidth();
+    }
   }
 }
 

package/src/gw-badge.ts

@@ -7,7 +7,13 @@
 import { GwElement, css, h, setAttribute } from "./element.js";
 import "./gw-skeleton.js";
 import { fadeIn } from "./motion.js";
-import { base, createIcon, setIconPath, type Tone } from "./styles.js";
+import {
+  base,
+  controlSizes,
+  createIcon,
+  setIconPath,
+  type Tone,
+} from "./styles.js";
 
 /**
  * A pill with an icon, a value and an optional small label above it. The
@@ -21,12 +27,18 @@ import { base, createIcon, setIconPath, type Tone } from "./styles.js";
  * @attr {string} icon - SVG path data for the icon.
  * @attr {string} label - A small label above the value.
  * @attr {"neutral"|"accent"|"info"|"success"|"warning"|"danger"|"important"} tone - The icon's color. Defaults to `accent`.
- * @attr {"small"|"medium"} size - The size. Defaults to `medium`.
+ * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The size, around 36px tall at medium. Defaults to `medium`.
  * @attr {boolean} loading - Shows a skeleton for the value, and the icon if it has none.
  *
  * @slot - The value.
  *
  * @csspart badge - The badge.
+ * @csspart label - The label above the value.
+ * @csspart value - The value.
+ *
+ * @cssprop --gw-tone - The icon's color, for a tone of your own. `tone` sets it.
+ * @cssprop --gw-badge-scale - Scales the badge, around 1 for medium.
+ * @cssprop --gw-control-scale - Scales its height and icon with the theme's density. The theme sets it.
  */
 export class GwBadge extends GwElement {
   static override properties = {
@@ -39,6 +51,7 @@ export class GwBadge extends GwElement {
 
   static override styles = [
     base,
+    controlSizes("badge"),
     css`
       :host {
         display: inline-flex;
@@ -46,17 +59,21 @@ export class GwBadge extends GwElement {
         vertical-align: middle;
       }
 
-      /* 36px tall, 12px padding, 8px between the 18px icon and the text */
+      /* 36px tall at medium, 12px padding, 8px between the 18px icon and
+         the text */
       .badge {
-        --gw-icon-size: 1.125rem;
+        --gw-size: var(--gw-badge-scale, 1);
+        --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1));
+        --gw-icon-size: calc(1.125rem * var(--gw-scale));
 
         display: inline-flex;
-        gap: var(--gw-space-2);
+        gap: calc(var(--gw-space-2) * var(--gw-size));
         align-items: center;
         box-sizing: border-box;
         max-width: 100%;
-        height: 2.25rem;
-        padding: 0 var(--gw-space-4) 0 var(--gw-space-3);
+        height: calc(2.25rem * var(--gw-scale));
+        padding: 0 calc(var(--gw-space-4) * var(--gw-size)) 0
+          calc(var(--gw-space-3) * var(--gw-size));
         vertical-align: middle;
         color: var(--gw-color-text-strong);
         background: var(--gw-color-surface-raised);
@@ -64,14 +81,6 @@ export class GwBadge extends GwElement {
         border-radius: var(--gw-radius-pill);
       }
 
-      :host([size="small"]) .badge {
-        --gw-icon-size: 1rem;
-
-        gap: var(--gw-space-1);
-        height: 1.75rem;
-        padding: 0 var(--gw-space-3) 0 var(--gw-space-2);
-      }
-
       .icon {
         color: var(--gw-tone, var(--gw-color-accent));
       }
@@ -83,13 +92,19 @@ export class GwBadge extends GwElement {
       }
 
       .label {
-        font-size: var(--gw-font-size-2xs);
+        font-size: max(
+          var(--gw-font-size-2xs),
+          calc(var(--gw-font-size-2xs) * var(--gw-size))
+        );
         line-height: 1.1;
         color: var(--gw-color-text-secondary);
       }
 
       .content {
-        font-size: var(--gw-font-size-xs);
+        font-size: max(
+          var(--gw-font-size-2xs),
+          calc(var(--gw-font-size-xs) * var(--gw-size))
+        );
         font-weight: var(--gw-font-weight-strong);
         line-height: 1.2;
         white-space: nowrap;
@@ -104,7 +119,7 @@ export class GwBadge extends GwElement {
   declare icon: string;
   declare label: string;
   declare tone: Tone;
-  declare size: "small" | "medium";
+  declare size: "xs" | "small" | "medium" | "large" | "xl";
   declare loading: boolean;
 
   readonly #badge = h("span", { class: "badge", part: "badge" });
@@ -113,7 +128,7 @@ export class GwBadge extends GwElement {
 
   readonly #iconSkeleton = h("gw-skeleton-icon");
 
-  readonly #label = h("span", { class: "label" });
+  readonly #label = h("span", { class: "label", part: "label" });
 
   readonly #skeleton = h("gw-skeleton-text", {
     style: "--gw-skeleton-width: 3rem",
@@ -138,7 +153,12 @@ export class GwBadge extends GwElement {
         "span",
         { class: "info" },
         this.#label,
-        h("span", { class: "content" }, this.#skeleton, this.#value),
+        h(
+          "span",
+          { class: "content", part: "value" },
+          this.#skeleton,
+          this.#value,
+        ),
       ),
     );
     root.append(this.#badge);

package/src/gw-banner.ts

@@ -27,6 +27,10 @@ import { base, type Tone } from "./styles.js";
  * @slot actions - One button, opening what it's about.
  *
  * @csspart bar - The bar.
+ *
+ * @cssprop --gw-tone - The text and icon color, for a tone of your own. `tone` sets it.
+ * @cssprop --gw-tone-fill - The background. `tone` sets it.
+ * @cssprop --gw-tone-border - The border. `tone` sets it.
  */
 export class GwBanner extends GwElement {
   static override properties = {

package/src/gw-button.ts

@@ -5,7 +5,7 @@
  * @module
  */
 import { GwElement, css, h, setAttribute } from "./element.js";
-import { base, createIcon, setIconPath } from "./styles.js";
+import { base, controlSizes, createIcon, setIconPath } from "./styles.js";
 
 /**
  * A native button styled through `--gw-*` variables, so it follows the
@@ -46,6 +46,7 @@ import { base, createIcon, setIconPath } from "./styles.js";
  * @csspart button - The native button or link, or the pill around a slotted link.
  *
  * @cssprop --gw-button-scale - Scales every dimension, around 1 for medium.
+ * @cssprop --gw-control-scale - Scales its height and icon with the theme's density. The theme sets it.
  * @cssprop --gw-button-tone - The color, set by `variant`.
  * @cssprop --gw-button-ink - The text color, when it differs from the tone.
  */
@@ -71,6 +72,7 @@ export class GwButton extends GwElement {
 
   static override styles = [
     base,
+    controlSizes("button"),
     css`
       :host {
         --gw-button-tone: var(--gw-color-accent);
@@ -78,25 +80,6 @@ export class GwButton extends GwElement {
         display: inline-block;
       }
 
-      /* Everything scales from --gw-button-scale, around a 40px medium
-         button: the presets give 24, 32, 48 and 56px, and an app can set any
-         value for a size between or beyond them */
-      :host([size="xs"]) {
-        --gw-button-scale: 0.6;
-      }
-
-      :host([size="small"]) {
-        --gw-button-scale: 0.8;
-      }
-
-      :host([size="large"]) {
-        --gw-button-scale: 1.2;
-      }
-
-      :host([size="xl"]) {
-        --gw-button-scale: 1.4;
-      }
-
       :host([variant="neutral"]) {
         --gw-button-tone: var(--gw-color-text-secondary);
         --gw-button-ink: var(--gw-color-text-strong);
@@ -119,18 +102,19 @@ export class GwButton extends GwElement {
       }
 
       .button {
-        --gw-scale: var(--gw-button-scale, 1);
+        --gw-size: var(--gw-button-scale, 1);
+        --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1));
         --gw-icon-size: calc(1.125rem * var(--gw-scale));
 
         position: relative;
         display: inline-flex;
-        gap: calc(var(--gw-space-2) * var(--gw-scale));
+        gap: calc(var(--gw-space-2) * var(--gw-size));
         align-items: center;
         justify-content: center;
         min-height: calc(2.5rem * var(--gw-scale));
-        padding: 0 calc(var(--gw-space-4) * var(--gw-scale));
+        padding: 0 calc(var(--gw-space-4) * var(--gw-size));
         font: inherit;
-        font-size: calc(var(--gw-font-size-s) * var(--gw-scale));
+        font-size: calc(var(--gw-font-size-s) * var(--gw-size));
         font-weight: var(--gw-font-weight-strong);
         line-height: 1;
         color: var(--gw-button-ink, var(--gw-button-tone));