@timmo001/groundwork-ui 0.5.0 → 0.6.0

package/package.json

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

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

@@ -27,6 +27,10 @@ import { base, createIcon, setIconPath, type Tone } from "./styles.js";
  * @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.
  */
 export class GwBadge extends GwElement {
   static override properties = {
@@ -113,7 +117,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 +142,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-card.ts

@@ -28,6 +28,9 @@ import { base } from "./styles.js";
  * @slot actions - Buttons beside the heading.
  *
  * @csspart card - The card's surface.
+ * @csspart header - The row with the heading and actions.
+ * @csspart heading - The heading.
+ * @csspart body - The content.
  */
 export class GwCard extends GwElement {
   static override properties = {
@@ -107,14 +110,14 @@ export class GwCard extends GwElement {
 
   readonly #header = h(
     "header",
-    {},
-    h("h2", {}, this.#title, this.#titleSkeleton),
+    { part: "header" },
+    h("h2", { part: "heading" }, this.#title, this.#titleSkeleton),
     h("slot", { name: "actions" }),
   );
 
   readonly #skeleton = h("gw-skeleton-lines");
 
-  readonly #body = h("div", { class: "body" }, h("slot"));
+  readonly #body = h("div", { class: "body", part: "body" }, h("slot"));
 
   #card: HTMLElement = h("section", { class: "card", part: "card" });
 

package/src/gw-chip.ts

@@ -24,6 +24,9 @@ import { base, createIcon, setIconPath, type Tone } from "./styles.js";
  * @slot icon - An icon before the text, in place of `icon`.
  *
  * @csspart chip - The chip.
+ *
+ * @cssprop --gw-tone-fill - The tint, for a tone of your own. `tone` sets it.
+ * @cssprop --gw-tone-border - The border. `tone` sets it.
  */
 export class GwChip extends GwElement {
   static override properties = {

package/src/gw-command-menu.ts

@@ -28,6 +28,10 @@ const sheetBelow = 600;
  * @attr {string} shortcut - The key that opens it with Cmd or Ctrl, such as `mod+k`, or `none`. Defaults to `mod+k`.
  * @attr {boolean} open - Whether it shows.
  *
+ * @csspart dialog - The menu's surface.
+ * @csspart list - The `gw-option-list` of commands.
+ * @csspart footer - The row of key hints.
+ *
  * @fires {CustomEvent<{ value: string }>} pick - When a command is picked, with its `value` in `detail`.
  */
 export class GwCommandMenu extends GwElement {
@@ -150,15 +154,15 @@ export class GwCommandMenu extends GwElement {
   declare shortcut: string;
   declare open: boolean;
 
-  readonly #list = h("gw-option-list", { search: true });
+  readonly #list = h("gw-option-list", { search: true, part: "list" });
 
   readonly #dialog = h(
     "dialog",
-    {},
+    { part: "dialog" },
     this.#list,
     h(
       "footer",
-      { "aria-hidden": "true" },
+      { part: "footer", "aria-hidden": "true" },
       h("span", {}, h("kbd", {}, "↑"), " ", h("kbd", {}, "↓"), " to move"),
       h("span", {}, h("kbd", {}, "Enter"), " to pick"),
       h("span", {}, h("kbd", {}, "Esc"), " to close"),

package/src/gw-dialog.ts

@@ -28,6 +28,12 @@ const closeIcon =
  * @slot - The content.
  * @slot actions - Buttons; one with a `value` closes it with that value.
  *
+ * @csspart dialog - The dialog's surface.
+ * @csspart header - The row with the heading and close button.
+ * @csspart heading - The heading.
+ * @csspart body - The content.
+ * @csspart footer - The actions row.
+ *
  * @fires {Event} close - When it closes; `returnValue` holds the button's value.
  */
 export class GwDialog extends GwElement {
@@ -139,9 +145,13 @@ export class GwDialog extends GwElement {
     this.open = false;
   }
 
-  readonly #heading = h("h2", { id: "heading" });
+  readonly #heading = h("h2", { id: "heading", part: "heading" });
 
-  readonly #footer = h("footer", {}, h("slot", { name: "actions" }));
+  readonly #footer = h(
+    "footer",
+    { part: "footer" },
+    h("slot", { name: "actions" }),
+  );
 
   readonly #closeButton = h(
     "gw-button",
@@ -158,9 +168,9 @@ export class GwDialog extends GwElement {
 
   readonly #dialog = h(
     "dialog",
-    { "aria-labelledby": "heading" },
-    h("header", {}, this.#heading, this.#closeButton),
-    h("div", { class: "body" }, h("slot")),
+    { "aria-labelledby": "heading", part: "dialog" },
+    h("header", { part: "header" }, this.#heading, this.#closeButton),
+    h("div", { class: "body", part: "body" }, h("slot")),
     this.#footer,
   );
 

package/src/gw-dot.ts

@@ -17,6 +17,8 @@ import { base, type Tone } from "./styles.js";
  * @attr {"neutral"|"accent"|"info"|"success"|"warning"|"danger"|"important"} tone - The color. Defaults to `neutral`.
  * @attr {string} label - What it means, for assistive technology.
  * @attr {boolean} pulse - Pulses, for something live.
+ *
+ * @cssprop --gw-tone - The color, for a tone of your own. `tone` sets it.
  */
 export class GwDot extends GwElement {
   static override properties = {

package/src/gw-expansion.ts

@@ -25,6 +25,8 @@ import { base } from "./styles.js";
  *
  * @csspart details - The native `<details>`.
  * @csspart summary - The summary row.
+ * @csspart heading - The heading.
+ * @csspart description - The line under the heading.
  * @csspart content - The content's wrapper.
  *
  * @fires {Event} toggle - When it opens or closes.
@@ -169,9 +171,12 @@ export class GwExpansion extends GwElement {
   declare description: string;
   declare open: boolean;
 
-  readonly #heading = h("span", { class: "heading" });
+  readonly #heading = h("span", { class: "heading", part: "heading" });
 
-  readonly #description = h("span", { class: "description" });
+  readonly #description = h("span", {
+    class: "description",
+    part: "description",
+  });
 
   readonly #details = h(
     "details",

package/src/gw-facts.ts

@@ -28,6 +28,10 @@ const skeletonWidths = ["60%", "40%", "75%", "50%", "65%"];
  * @attr {Fact[]} items - The pairs, as JSON.
  * @attr {boolean} loading - Shows skeleton pairs, keeping any labels already known.
  * @attr {number} rows - How many skeleton pairs while loading. Defaults to 4.
+ *
+ * @csspart list - The description list.
+ * @csspart label - Each label.
+ * @csspart value - Each value.
  */
 export class GwFacts extends GwElement {
   static override properties = {
@@ -69,7 +73,7 @@ export class GwFacts extends GwElement {
   declare loading: boolean;
   declare rows: number;
 
-  readonly #list = h("dl");
+  readonly #list = h("dl", { part: "list" });
 
   #rendered = false;
 
@@ -97,13 +101,13 @@ export class GwFacts extends GwElement {
         ...Array.from({ length: count }, (_, index) => [
           h(
             "dt",
-            {},
+            { part: "label" },
             items[index]?.label ??
               h("gw-skeleton-text", { style: "--gw-skeleton-width: 5rem" }),
           ),
           h(
             "dd",
-            {},
+            { part: "value" },
             h("gw-skeleton-text", {
               style: `--gw-skeleton-width: ${skeletonWidths[index % skeletonWidths.length]}`,
             }),
@@ -114,8 +118,12 @@ export class GwFacts extends GwElement {
       this.#list.removeAttribute("aria-busy");
       this.#list.replaceChildren(
         ...items.flatMap((item) => [
-          h("dt", {}, item.label),
-          h("dd", {}, loaded ? h("span", {}, item.value) : item.value),
+          h("dt", { part: "label" }, item.label),
+          h(
+            "dd",
+            { part: "value" },
+            loaded ? h("span", {}, item.value) : item.value,
+          ),
         ]),
       );
     }

package/src/gw-gauge.ts

@@ -76,6 +76,12 @@ const circle = (className: string) => {
  * @attr {boolean} inverted - Lower is worse, such as for a battery.
  * @attr {boolean} loading - Pulses the track and shows a skeleton for the reading.
  *
+ * @csspart dial - The dial, with the arc and the reading.
+ * @csspart value - The reading's number.
+ * @csspart unit - The unit after it.
+ * @csspart label - What it measures.
+ * @csspart caption - The line under the label.
+ *
  * @cssprop --gw-gauge-size - The dial's width. Defaults to `8.5rem`.
  * @cssprop --gw-gauge-color - The arc's color, overriding the thresholds.
  */
@@ -208,11 +214,11 @@ export class GwGauge extends GwElement {
 
   readonly #fill = circle("fill");
 
-  readonly #dial = h("div", { class: "dial", role: "meter" });
+  readonly #dial = h("div", { class: "dial", part: "dial", role: "meter" });
 
-  readonly #value = h("span", { class: "value" });
+  readonly #value = h("span", { class: "value", part: "value" });
 
-  readonly #unit = h("span", { class: "unit" });
+  readonly #unit = h("span", { class: "unit", part: "unit" });
 
   readonly #shown = h("span", { class: "shown" }, this.#value, this.#unit);
 
@@ -220,9 +226,9 @@ export class GwGauge extends GwElement {
     style: "--gw-skeleton-width: 2em",
   });
 
-  readonly #label = h("span", { class: "label" });
+  readonly #label = h("span", { class: "label", part: "label" });
 
-  readonly #caption = h("span", { class: "caption" });
+  readonly #caption = h("span", { class: "caption", part: "caption" });
 
   readonly #captionSkeleton = h("gw-skeleton-text", {
     style: "--gw-skeleton-width: 5rem",

package/src/gw-meter.ts

@@ -26,6 +26,11 @@ import { base, type Tone } from "./styles.js";
  * @attr {string} display - The value as shown, such as `42 GB`. Defaults to a percentage.
  * @attr {"neutral"|"accent"|"info"|"success"|"warning"|"danger"|"important"} tone - A fixed color, overriding `high` and `critical`.
  * @attr {boolean} loading - Pulses the track and shows a skeleton for the value.
+ *
+ * @csspart top - The row with the label and value.
+ * @csspart value - The value as shown.
+ * @csspart track - The bar's track.
+ * @csspart fill - The filled part of the bar.
  */
 export class GwMeter extends GwElement {
   static override properties = {
@@ -93,7 +98,7 @@ export class GwMeter extends GwElement {
   declare tone: Tone | undefined;
   declare loading: boolean;
 
-  readonly #top = h("div", { class: "top" });
+  readonly #top = h("div", { class: "top", part: "top" });
 
   readonly #label = h("span");
 
@@ -101,15 +106,23 @@ export class GwMeter extends GwElement {
     style: "--gw-skeleton-width: 6rem",
   });
 
-  readonly #value = h("span", { class: "value", "aria-hidden": "true" });
+  readonly #value = h("span", {
+    class: "value",
+    part: "value",
+    "aria-hidden": "true",
+  });
 
   readonly #valueSkeleton = h("gw-skeleton-text", {
     style: "--gw-skeleton-width: 2.5rem",
   });
 
-  readonly #fill = h("div", { class: "fill" });
+  readonly #fill = h("div", { class: "fill", part: "fill" });
 
-  readonly #track = h("div", { class: "track", role: "meter" }, this.#fill);
+  readonly #track = h(
+    "div",
+    { class: "track", part: "track", role: "meter" },
+    this.#fill,
+  );
 
   readonly #bar = h("gw-skeleton", { class: "bar" });
 

package/src/gw-notification-center.ts

@@ -29,6 +29,10 @@ const emptyIcon =
  *
  * @slot - The `gw-notification` cards.
  *
+ * @csspart header - The row with the heading and Clear all.
+ * @csspart heading - The heading.
+ * @csspart list - The list of cards.
+ *
  * @fires {Event} clear - When Clear all is pressed.
  */
 export class GwNotificationCenter extends GwElement {
@@ -75,7 +79,7 @@ export class GwNotificationCenter extends GwElement {
 
   declare heading: string;
 
-  readonly #heading = h("h2");
+  readonly #heading = h("h2", { part: "heading" });
 
   readonly #clear = h(
     "gw-button",
@@ -83,7 +87,11 @@ export class GwNotificationCenter extends GwElement {
     "Clear all",
   );
 
-  readonly #list = h("div", { class: "list", role: "list" }, h("slot"));
+  readonly #list = h(
+    "div",
+    { class: "list", part: "list", role: "list" },
+    h("slot"),
+  );
 
   readonly #empty = h(
     "gw-empty-state",
@@ -138,7 +146,10 @@ export class GwNotificationCenter extends GwElement {
     this.#clear.addEventListener("click", () => {
       this.clear();
     });
-    root.append(h("header", {}, this.#heading, this.#clear), this.#body);
+    root.append(
+      h("header", { part: "header" }, this.#heading, this.#clear),
+      this.#body,
+    );
   }
 
   protected override update() {

package/src/gw-notification.ts

@@ -34,6 +34,8 @@ const closeIcon =
  *
  * @csspart card - The card.
  *
+ * @cssprop --gw-tone - The icon's color, for a tone of your own. `tone` sets it.
+ *
  * @fires {Event} dismiss - When the close button is pressed. Cancel it to keep the card.
  */
 export class GwNotification extends GwElement {