@timmo001/groundwork-ui 0.4.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-ui",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "Groundwork's framework-free web components, styled by the --gw-* tokens",
   "license": "Apache-2.0",
   "type": "module",
@@ -14,7 +14,7 @@
     "README.md",
     "LICENSE"
   ],
-  "customElements": ".manifest-check/custom-elements.json",
+  "customElements": "custom-elements.json",
   "sideEffects": true,
   "publishConfig": {
     "access": "public",

package/src/events.ts

@@ -35,6 +35,9 @@ export interface GwEventMap {
   "gw-select": {
     change: Event;
   };
+  "gw-theme-gallery": {
+    theme: CustomEvent<{ id: string }>;
+  };
   "gw-theme-picker": {
     reset: Event;
     mode: CustomEvent<{ mode: string }>;

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-button.ts

@@ -12,6 +12,11 @@ import { base, createIcon, setIconPath } from "./styles.js";
  * theme and mode around it. With `href` it renders a link that looks the
  * same. Put an icon in the `icon` slot.
  *
+ * For a link the page's HTML has to carry, such as one with `rel="me"`, a
+ * `target` or `aria-current="page"`, put a plain `<a>` inside instead of
+ * `href`. The button styles it, a click anywhere on the pill follows it, and
+ * `aria-current` on it gets a current style.
+ *
  * `variant` picks the color and `appearance` how it's applied, from most to
  * least important: `accent` (a solid fill), `filled` (a soft tint),
  * `outlined` (a stroke) or `plain` (text only). Every button is a pill.
@@ -35,10 +40,10 @@ import { base, createIcon, setIconPath } from "./styles.js";
  * @attr {string} icon - SVG path data for an icon before the text.
  * @attr {"show"|"hide"|"auto"} labels - Whether the text shows beside an icon: always, never, or not on narrow screens. Defaults to `show`.
  *
- * @slot - The text.
+ * @slot - The text, or an `<a>` holding it, in place of `href`.
  * @slot icon - An icon before the text, in place of `icon`.
  *
- * @csspart button - The native button or link.
+ * @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-button-tone - The color, set by `variant`.
@@ -204,6 +209,27 @@ export class GwButton extends GwElement {
         border-color: var(--gw-button-tone);
       }
 
+      /* A slotted link carries the text; the pill draws its focus ring */
+      ::slotted(a) {
+        color: inherit;
+        text-decoration: none;
+        outline: none;
+      }
+
+      .button.focused {
+        outline: var(--gw-focus-width) solid var(--gw-color-focus);
+        outline-offset: var(--gw-focus-offset);
+      }
+
+      :host([appearance="plain"]) .button.current,
+      :host([appearance="outlined"]) .button.current {
+        background: color-mix(in oklch, var(--gw-button-tone) 16%, transparent);
+      }
+
+      :host([appearance="filled"]) .button.current {
+        background: color-mix(in oklch, var(--gw-button-tone) 32%, transparent);
+      }
+
       .button:disabled,
       .button[aria-disabled="true"] {
         color: var(--gw-color-text-disabled);
@@ -350,10 +376,18 @@ export class GwButton extends GwElement {
 
   readonly #over = h("span", { class: "ring over" });
 
-  #control: HTMLButtonElement | HTMLAnchorElement = h("button", {
-    class: "button",
-    part: "button",
-  });
+  #control: HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement = h(
+    "button",
+    {
+      class: "button",
+      part: "button",
+    },
+  );
+
+  /** A plain `<a>` the page put inside, which the button wraps instead of `href`. */
+  #link(): HTMLAnchorElement | null {
+    return this.querySelector(":scope > a:not([slot])");
+  }
 
   constructor() {
     super();
@@ -373,12 +407,43 @@ export class GwButton extends GwElement {
       if (this.loading) {
         event.preventDefault();
         event.stopImmediatePropagation();
+
+        return;
+      }
+
+      // A click on the pill around a slotted link follows the link
+      const link = this.#link();
+
+      if (link !== null && !event.composedPath().includes(link)) {
+        link.click();
       }
     });
 
+    const focus = () => {
+      this.#control.classList.toggle(
+        "focused",
+        this.#link()?.matches(":focus-visible") === true,
+      );
+    };
+
+    this.addEventListener("focusin", focus);
+    this.addEventListener("focusout", focus);
+
     this.#iconSlot.addEventListener("slotchange", () => {
       this.requestUpdate("icon");
     });
+
+    this.#text.addEventListener("slotchange", () => {
+      this.requestUpdate("href");
+    });
+
+    new MutationObserver(() => {
+      this.requestUpdate("href");
+    }).observe(this, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-current"],
+    });
   }
 
   protected override create(root: ShadowRoot) {
@@ -387,13 +452,16 @@ export class GwButton extends GwElement {
   }
 
   protected override update(changed: ReadonlySet<string>) {
+    const link = this.#link();
+
     if (changed.has("href")) {
-      const wanted = this.href ? "A" : "BUTTON";
+      const wanted = link ? "SPAN" : this.href ? "A" : "BUTTON";
 
       if (this.#control.tagName !== wanted) {
-        const next = this.href
-          ? h("a", { class: "button", part: "button" })
-          : h("button", { class: "button", part: "button" });
+        const next = h(link ? "span" : this.href ? "a" : "button", {
+          class: "button",
+          part: "button",
+        });
 
         next.append(...this.#control.childNodes);
         this.#control.replaceWith(next);
@@ -407,6 +475,11 @@ export class GwButton extends GwElement {
       this.icon !== "" || this.querySelector("[slot='icon']") !== null;
 
     control.classList.toggle("has-icon", hasIcon);
+    control.classList.toggle(
+      "current",
+      link !== null &&
+        (link.getAttribute("aria-current") ?? "false") !== "false",
+    );
     setIconPath(this.#icon, this.icon);
     this.#icon.style.display = this.icon ? "" : "none";
     setAttribute(
@@ -416,13 +489,19 @@ export class GwButton extends GwElement {
         ? this.textContent.trim() || null
         : null,
     );
-    setAttribute(control, "aria-label", this.label || null);
     setAttribute(control, "aria-busy", this.loading ? "true" : null);
 
+    if (control instanceof HTMLSpanElement) {
+      // The slotted link is the control, so it carries the name
+      setAttribute(control, "aria-label", null);
+    } else {
+      setAttribute(control, "aria-label", this.label || null);
+    }
+
     if (control instanceof HTMLAnchorElement) {
       setAttribute(control, "href", this.disabled ? null : this.href);
       setAttribute(control, "aria-disabled", this.disabled ? "true" : null);
-    } else {
+    } else if (control instanceof HTMLButtonElement) {
       control.type = this.type;
       control.disabled = this.disabled;
     }

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",