@timmo001/groundwork-ui 0.4.1 → 0.6.0

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 {

package/src/gw-option-list.ts

@@ -81,6 +81,13 @@ let lastList = 0;
  * @attr {boolean} search - Shows a search field above the list.
  * @attr {string} placeholder - The search placeholder. Defaults to `Search`.
  *
+ * @csspart search - The search field's row.
+ * @csspart listbox - The scrolling list.
+ * @csspart option - Each option.
+ * @csspart group - Each group heading.
+ * @csspart description - An option's second line.
+ * @csspart none - The no matches line.
+ *
  * @cssprop --gw-option-list-height - The list's maximum height. Defaults to `20rem`.
  *
  * @fires {CustomEvent<{ value: string }>} pick - When an option is picked, with its `value` in `detail`.
@@ -273,11 +280,15 @@ export class GwOptionList extends GwElement {
 
   readonly #listbox = h(
     "div",
-    { role: "listbox", tabindex: "-1" },
+    { role: "listbox", part: "listbox", tabindex: "-1" },
     this.#spacer,
   );
 
-  readonly #none = h("div", { class: "none", hidden: true }, "No matches");
+  readonly #none = h(
+    "div",
+    { class: "none", part: "none", hidden: true },
+    "No matches",
+  );
 
   #query = "";
 
@@ -433,7 +444,12 @@ export class GwOptionList extends GwElement {
     });
 
     root.append(
-      h("div", { class: "search" }, createIcon(searchIcon), this.#input),
+      h(
+        "div",
+        { class: "search", part: "search" },
+        createIcon(searchIcon),
+        this.#input,
+      ),
       this.#listbox,
       this.#none,
     );
@@ -585,7 +601,7 @@ export class GwOptionList extends GwElement {
     if (row.kind === "group") {
       const element = h(
         "div",
-        { class: "row group", role: "presentation" },
+        { class: "row group", part: "group", role: "presentation" },
         row.label,
       );
 
@@ -602,6 +618,7 @@ export class GwOptionList extends GwElement {
       "div",
       {
         class: "row",
+        part: "option",
         role: "option",
         id: `${this.#id}-${index}`,
         "data-index": index,
@@ -618,7 +635,11 @@ export class GwOptionList extends GwElement {
         h("span", {}, option.label),
         option.description === undefined
           ? null
-          : h("span", { class: "description" }, option.description),
+          : h(
+              "span",
+              { class: "description", part: "description" },
+              option.description,
+            ),
       ),
       option.swatches === undefined
         ? null

package/src/gw-page-header.ts

@@ -19,6 +19,10 @@ import { base, createIcon, setIconPath } from "./styles.js";
  * @attr {string} icon - SVG path data for the icon tile.
  *
  * @slot actions - The page's controls.
+ *
+ * @csspart tile - The icon tile.
+ * @csspart heading - The title.
+ * @csspart description - The line under the title.
  */
 export class GwPageHeader extends GwElement {
   static override properties = {
@@ -86,11 +90,11 @@ export class GwPageHeader extends GwElement {
 
   readonly #icon = createIcon("");
 
-  readonly #tile = h("span", { class: "tile" }, this.#icon);
+  readonly #tile = h("span", { class: "tile", part: "tile" }, this.#icon);
 
-  readonly #heading = h("h1");
+  readonly #heading = h("h1", { part: "heading" });
 
-  readonly #description = h("p");
+  readonly #description = h("p", { part: "description" });
 
   constructor() {
     super();

package/src/gw-popover.ts

@@ -38,6 +38,13 @@ const sheetBelow = 600;
  * @slot - The content.
  * @slot actions - Buttons; one with a `value` closes it with that value.
  *
+ * @csspart surface - The popover's surface.
+ * @csspart heading - The heading.
+ * @csspart body - The content.
+ * @csspart footer - The actions row.
+ *
+ * @cssprop --gw-popover-width - Its width beside a button. Defaults to `20rem`.
+ *
  * @fires {Event} close - When it closes; `returnValue` holds the button's value.
  */
 export class GwPopover extends GwElement {
@@ -54,7 +61,7 @@ export class GwPopover extends GwElement {
         position: fixed;
         inset: unset;
         box-sizing: border-box;
-        width: min(20rem, calc(100vw - 2 * ${gap}px));
+        width: min(var(--gw-popover-width, 20rem), calc(100vw - 2 * ${gap}px));
         padding: var(--gw-space-4);
         margin: 0;
         color: var(--gw-color-text-primary);
@@ -185,7 +192,7 @@ export class GwPopover extends GwElement {
   /** The value of the action that closed it, or "" for Esc or a click outside. */
   returnValue = "";
 
-  readonly #heading = h("h2", { id: "heading" });
+  readonly #heading = h("h2", { id: "heading", part: "heading" });
 
   readonly #closeButton = h(
     "gw-button",
@@ -202,7 +209,12 @@ export class GwPopover extends GwElement {
 
   readonly #popover = h(
     "div",
-    { popover: "manual", tabindex: "-1", "data-placement": "center" },
+    {
+      popover: "manual",
+      tabindex: "-1",
+      "data-placement": "center",
+      part: "surface",
+    },
     h(
       "header",
       {},
@@ -210,11 +222,11 @@ export class GwPopover extends GwElement {
         "div",
         { class: "content" },
         this.#heading,
-        h("div", { class: "body", id: "body" }, h("slot")),
+        h("div", { class: "body", id: "body", part: "body" }, h("slot")),
       ),
       this.#closeButton,
     ),
-    h("footer", {}, h("slot", { name: "actions" })),
+    h("footer", { part: "footer" }, h("slot", { name: "actions" })),
   );
 
   readonly #dismissal = new Dismissal(

package/src/gw-section-title.ts

@@ -17,6 +17,8 @@ import { base } from "./styles.js";
  *
  * @slot - The heading text.
  * @slot actions - Buttons at the end of the row.
+ *
+ * @csspart heading - The heading.
  */
 export class GwSectionTitle extends GwElement {
   static override properties = {
@@ -46,7 +48,7 @@ export class GwSectionTitle extends GwElement {
 
   declare level: number;
 
-  readonly #heading = h("div", { role: "heading" }, h("slot"));
+  readonly #heading = h("div", { role: "heading", part: "heading" }, h("slot"));
 
   constructor() {
     super();

package/src/gw-segmented.ts

@@ -32,6 +32,7 @@ export interface Segment {
  * @attr {"show"|"hide"|"auto"} labels - Whether option text shows beside icons. Defaults to `show`.
  * @attr {Segment[]} options - The options, as JSON.
  *
+ * @csspart option - Each option.
  * @csspart indicator - The pill that slides to the chosen option.
  *
  * @fires {Event} change - When the chosen option changes.
@@ -267,7 +268,7 @@ export class GwSegmented extends GwElement {
 
         const label = h(
           "label",
-          { class: option.icon ? "has-icon" : null },
+          { class: option.icon ? "has-icon" : null, part: "option" },
           input,
           option.icon ? createIcon(option.icon) : null,
           h("span", { class: "text" }, option.label),

package/src/gw-skeleton.ts

@@ -89,6 +89,8 @@ export class GwSkeletonText extends GwSkeleton {
  * @summary A placeholder for a paragraph.
  *
  * @attr {number} lines - How many lines. Defaults to 3.
+ *
+ * @csspart line - Each line.
  */
 export class GwSkeletonLines extends GwElement {
   static override properties = {
@@ -129,7 +131,7 @@ export class GwSkeletonLines extends GwElement {
   protected override update() {
     this.renderRoot.replaceChildren(
       ...Array.from({ length: Math.max(1, this.lines || 1) }, () =>
-        h("gw-skeleton-text"),
+        h("gw-skeleton-text", { part: "line" }),
       ),
     );
   }

package/src/gw-spinner.ts

@@ -15,6 +15,8 @@ import { base } from "./styles.js";
  *
  * @attr {string} label - What's loading, for assistive technology. Defaults to `Loading`.
  *
+ * @csspart ring - The spinning ring.
+ *
  * @cssprop --gw-spinner-size - The ring's size. Defaults to `1.25rem`.
  */
 export class GwSpinner extends GwElement {
@@ -67,7 +69,9 @@ export class GwSpinner extends GwElement {
   }
 
   protected override create(root: ShadowRoot) {
-    root.append(h("span", { class: "ring", role: "status" }, this.#label));
+    root.append(
+      h("span", { class: "ring", part: "ring", role: "status" }, this.#label),
+    );
   }
 
   protected override update() {