@timmo001/groundwork-ui 0.5.0 → 0.7.0

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,11 @@ 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.
@@ -187,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",
@@ -204,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",
       {},
@@ -212,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

@@ -5,7 +5,7 @@
  * @module
  */
 import { GwElement, css, h, setAttribute } from "./element.js";
-import { base, createIcon } from "./styles.js";
+import { base, controlSizes, createIcon } from "./styles.js";
 
 export interface Segment {
   readonly value: string;
@@ -31,9 +31,14 @@ export interface Segment {
  * @attr {string} value - The chosen option's value.
  * @attr {"show"|"hide"|"auto"} labels - Whether option text shows beside icons. Defaults to `show`.
  * @attr {Segment[]} options - The options, as JSON.
+ * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The size, 40px tall at medium. Defaults to `medium`.
  *
+ * @csspart option - Each option.
  * @csspart indicator - The pill that slides to the chosen option.
  *
+ * @cssprop --gw-segmented-scale - Scales the control, around 1 for medium.
+ * @cssprop --gw-control-scale - Scales its height and icons with the theme's density. The theme sets it.
+ *
  * @fires {Event} change - When the chosen option changes.
  */
 export class GwSegmented extends GwElement {
@@ -43,12 +48,17 @@ export class GwSegmented extends GwElement {
     value: { reflect: true },
     labels: { reflect: true },
     options: { type: "json" },
+    size: { reflect: true },
   } as const;
 
   static override styles = [
     base,
+    controlSizes("segmented"),
     css`
       :host {
+        --gw-size: var(--gw-segmented-scale, 1);
+        --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1));
+
         display: inline-block;
       }
 
@@ -77,20 +87,21 @@ export class GwSegmented extends GwElement {
       label {
         position: relative;
         display: inline-flex;
-        gap: var(--gw-space-2);
+        gap: calc(var(--gw-space-2) * var(--gw-size));
         align-items: center;
         box-sizing: border-box;
-        /* 32px options in a 40px track, matching fields and buttons */
-        height: 2rem;
-        padding: 0 var(--gw-space-3);
-        font-size: var(--gw-font-size-s);
+        /* 32px options in a 40px track at medium, matching fields and
+           buttons */
+        height: calc(2rem * var(--gw-scale));
+        padding: 0 calc(var(--gw-space-3) * var(--gw-size));
+        font-size: calc(var(--gw-font-size-s) * var(--gw-size));
         color: var(--gw-color-text-primary);
         cursor: pointer;
         background: transparent;
         border-radius: var(--gw-radius-pill);
         transition: background-color var(--gw-motion-fast)
           var(--gw-motion-easing);
-        --gw-icon-size: 1.125rem;
+        --gw-icon-size: calc(1.125rem * var(--gw-scale));
       }
 
       :host([labels="hide"]) label.has-icon {
@@ -187,6 +198,7 @@ export class GwSegmented extends GwElement {
   declare value: string;
   declare labels: "show" | "hide" | "auto";
   declare options: readonly Segment[];
+  declare size: "xs" | "small" | "medium" | "large" | "xl";
 
   constructor() {
     super();
@@ -195,6 +207,7 @@ export class GwSegmented extends GwElement {
     this.value = "";
     this.labels = "show";
     this.options = [];
+    this.size = "medium";
   }
 
   readonly #legend = h("legend");
@@ -267,7 +280,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-select.ts

@@ -62,6 +62,10 @@ const chevronIcon =
  * @attr {OptionItem[]} options - The options, as JSON.
  * @attr {boolean} label-hidden - Hides the label but keeps it for assistive technology.
  * @attr {boolean} inline-label - Shows the label inside the trigger, before the value, for toolbars and filters.
+ * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The field's size, 40px tall at medium. Defaults to `medium`.
+ *
+ * @cssprop --gw-field-scale - Scales the field, around 1 for medium.
+ * @cssprop --gw-control-scale - Scales its height with the theme's density. The theme sets it.
  *
  * @fires {Event} change - When the value, or `values` with `multiple`, changes.
  */
@@ -81,6 +85,7 @@ export class GwSelect extends LightElement {
     options: { type: "json" },
     labelHidden: { type: "boolean", attribute: "label-hidden" },
     inlineLabel: { type: "boolean", attribute: "inline-label", reflect: true },
+    size: { reflect: true },
   } as const;
 
   declare label: string;
@@ -99,6 +104,7 @@ export class GwSelect extends LightElement {
   declare options: readonly OptionItem[];
   declare labelHidden: boolean;
   declare inlineLabel: boolean;
+  declare size: "xs" | "small" | "medium" | "large" | "xl";
 
   readonly #id = fieldId();
 
@@ -172,6 +178,7 @@ export class GwSelect extends LightElement {
     this.options = [];
     this.labelHidden = false;
     this.inlineLabel = false;
+    this.size = "medium";
   }
 
   /** Opens the list, such as from a keyboard shortcut. */

package/src/gw-setting-row.ts

@@ -7,7 +7,7 @@
 import { GwElement, css, h, setAttribute } from "./element.js";
 import "./gw-skeleton.js";
 import { fadeIn } from "./motion.js";
-import { base } from "./styles.js";
+import { base, controlSizes } from "./styles.js";
 
 /**
  * A setting: its name and description on one side, its control on the
@@ -21,34 +21,42 @@ import { base } from "./styles.js";
  * @attr {string} heading - The setting's name.
  * @attr {string} description - What it does.
  * @attr {boolean} loading - Shows skeletons for the control and any unknown text.
+ * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The text and spacing size. Defaults to `medium`.
  *
  * @slot - The control.
  *
  * @csspart row - The row.
  *
  * @cssprop --gw-row-padding - The padding above and below. Defaults to `--gw-space-2`.
+ * @cssprop --gw-setting-row-scale - Scales the text and spacing, around 1 for medium.
  */
 export class GwSettingRow extends GwElement {
   static override properties = {
     heading: {},
     description: {},
     loading: { type: "boolean", reflect: true },
+    size: { reflect: true },
   } as const;
 
   static override styles = [
     base,
+    controlSizes("setting-row"),
     css`
       :host {
+        --gw-size: var(--gw-setting-row-scale, 1);
+
         display: block;
       }
 
       .row {
         display: flex;
         flex-wrap: wrap;
-        gap: var(--gw-space-1) var(--gw-space-3);
+        gap: calc(var(--gw-space-1) * var(--gw-size))
+          calc(var(--gw-space-3) * var(--gw-size));
         align-items: center;
         justify-content: space-between;
-        padding: var(--gw-row-padding, var(--gw-space-2)) 0;
+        padding: var(--gw-row-padding, calc(var(--gw-space-2) * var(--gw-size)))
+          0;
       }
 
       /* A full line even in themes without borders, since it separates rows */
@@ -63,13 +71,19 @@ export class GwSettingRow extends GwElement {
       }
 
       .heading {
-        font-size: var(--gw-font-size-s);
+        font-size: max(
+          var(--gw-font-size-xs),
+          calc(var(--gw-font-size-s) * var(--gw-size))
+        );
         font-weight: var(--gw-font-weight-strong);
         color: var(--gw-color-text-strong);
       }
 
       .description {
-        font-size: var(--gw-font-size-xs);
+        font-size: max(
+          var(--gw-font-size-2xs),
+          calc(var(--gw-font-size-xs) * var(--gw-size))
+        );
         color: var(--gw-color-text-secondary);
       }
 
@@ -89,6 +103,7 @@ export class GwSettingRow extends GwElement {
   declare heading: string;
   declare description: string;
   declare loading: boolean;
+  declare size: "xs" | "small" | "medium" | "large" | "xl";
 
   readonly #row = h("div", { class: "row", part: "row" });
 
@@ -124,6 +139,7 @@ export class GwSettingRow extends GwElement {
     this.heading = "";
     this.description = "";
     this.loading = false;
+    this.size = "medium";
   }
 
   protected override create(root: ShadowRoot) {

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() {