@timmo001/groundwork-ui 0.6.0 → 0.7.0

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-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,7 +27,7 @@ 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.
@@ -31,6 +37,8 @@ import { base, createIcon, setIconPath, type Tone } from "./styles.js";
  * @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 = {
@@ -43,6 +51,7 @@ export class GwBadge extends GwElement {
 
   static override styles = [
     base,
+    controlSizes("badge"),
     css`
       :host {
         display: inline-flex;
@@ -50,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);
@@ -68,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));
       }
@@ -87,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;
@@ -108,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" });

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));

package/src/gw-card.ts

@@ -15,6 +15,12 @@ import { base } from "./styles.js";
  * stand in for the content, and for the heading until it's known. The card
  * glides to its new height and the content fades in once it's loaded.
  *
+ * For a link the page's HTML has to carry, such as one with a `target` or
+ * `rel`, put an `<a>` in the `heading` slot instead of `href`. A click
+ * anywhere on the card that isn't on another control follows it, the card
+ * shows the link's hover and focus, and the link stays a real one in the
+ * page, so the rest of the card's content stays plain text.
+ *
  * @element gw-card
  * @summary A surface for one group of content, or a link to more.
  *
@@ -25,6 +31,7 @@ import { base } from "./styles.js";
  * @attr {number} lines - How many skeleton lines while loading. Defaults to 3.
  *
  * @slot - The content.
+ * @slot heading - The heading, in place of `heading`. An `<a>` here makes the whole card follow it.
  * @slot actions - Buttons beside the heading.
  *
  * @csspart card - The card's surface.
@@ -71,10 +78,32 @@ export class GwCard extends GwElement {
         transition: border-color var(--gw-motion-fast) var(--gw-motion-easing);
       }
 
-      a.card:hover {
+      a.card:hover,
+      .card.linked:hover {
         border-color: var(--gw-color-border-accent);
       }
 
+      /* A card following a link in its heading slot */
+      .card.linked {
+        cursor: pointer;
+        transition: border-color var(--gw-motion-fast) var(--gw-motion-easing);
+      }
+
+      .card.focused {
+        outline: var(--gw-focus-width) solid var(--gw-color-focus);
+        outline-offset: var(--gw-focus-offset);
+      }
+
+      ::slotted([slot="heading"]) {
+        font: inherit;
+        color: inherit;
+      }
+
+      ::slotted(a[slot="heading"]) {
+        text-decoration: none;
+        outline: none;
+      }
+
       header {
         display: flex;
         gap: var(--gw-space-2);
@@ -108,10 +137,18 @@ export class GwCard extends GwElement {
 
   readonly #titleSkeleton = h("gw-skeleton-text");
 
+  readonly #headingSlot = h("slot", { name: "heading" });
+
   readonly #header = h(
     "header",
     { part: "header" },
-    h("h2", { part: "heading" }, this.#title, this.#titleSkeleton),
+    h(
+      "h2",
+      { part: "heading" },
+      this.#title,
+      this.#headingSlot,
+      this.#titleSkeleton,
+    ),
     h("slot", { name: "actions" }),
   );
 
@@ -132,6 +169,57 @@ export class GwCard extends GwElement {
     this.flush = false;
     this.loading = false;
     this.lines = 3;
+
+    // A click on the card, but not on another control in it, follows the
+    // link in the heading slot
+    this.addEventListener("click", (event) => {
+      const link = this.#link();
+
+      if (link === null || this.loading) return;
+
+      const path = event.composedPath();
+      const own = path.slice(0, path.indexOf(this));
+
+      if (
+        own.some(
+          (node) =>
+            node instanceof HTMLElement &&
+            node.matches(
+              "a, button, input, select, textarea, label, [tabindex], gw-button",
+            ),
+        )
+      ) {
+        return;
+      }
+
+      // Selecting text in the card shouldn't open the link
+      if (getSelection()?.toString()) return;
+
+      link.click();
+    });
+
+    const focus = () => {
+      this.#card.classList.toggle(
+        "focused",
+        this.#link()?.matches(":focus-visible") === true,
+      );
+    };
+
+    this.addEventListener("focusin", focus);
+    this.addEventListener("focusout", focus);
+
+    this.#headingSlot.addEventListener("slotchange", () => {
+      this.requestUpdate("heading");
+    });
+  }
+
+  /** The `<a>` in the heading slot, or holding it, when there is one. */
+  #link(): HTMLAnchorElement | null {
+    const heading = this.querySelector(":scope > [slot='heading']");
+
+    if (heading instanceof HTMLAnchorElement) return heading;
+
+    return heading?.querySelector("a") ?? null;
   }
 
   protected override create(root: ShadowRoot) {
@@ -163,9 +251,14 @@ export class GwCard extends GwElement {
     if (this.#card instanceof HTMLAnchorElement) this.#card.href = this.href;
 
     setAttribute(this.#card, "aria-busy", this.loading ? "true" : null);
+
+    const slotted = this.querySelector(":scope > [slot='heading']") !== null;
+
+    this.#card.classList.toggle("linked", this.#link() !== null && !this.href);
     this.#title.textContent = this.heading;
-    this.#titleSkeleton.hidden = this.heading !== "" || !this.loading;
-    this.#header.hidden = !this.heading && !this.loading;
+    this.#titleSkeleton.hidden =
+      this.heading !== "" || slotted || !this.loading;
+    this.#header.hidden = !this.heading && !slotted && !this.loading;
     this.#skeleton.lines = this.lines;
     this.#skeleton.hidden = !this.loading;
     this.#body.hidden = this.loading;

package/src/gw-chip.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 short status or category, tinted by its `tone`. While `loading`, a
@@ -19,6 +25,7 @@ import { base, createIcon, setIconPath, type Tone } from "./styles.js";
  * @attr {"neutral"|"accent"|"info"|"success"|"warning"|"danger"|"important"} tone - The tint. Defaults to `neutral`.
  * @attr {string} icon - SVG path data for an icon before the text.
  * @attr {boolean} loading - Shows a skeleton for the text.
+ * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The size, around 32px tall at medium. Defaults to `medium`.
  *
  * @slot - The text.
  * @slot icon - An icon before the text, in place of `icon`.
@@ -27,37 +34,47 @@ import { base, createIcon, setIconPath, type Tone } from "./styles.js";
  *
  * @cssprop --gw-tone-fill - The tint, for a tone of your own. `tone` sets it.
  * @cssprop --gw-tone-border - The border. `tone` sets it.
+ * @cssprop --gw-chip-scale - Scales the chip, around 1 for medium.
+ * @cssprop --gw-control-scale - Scales its height and icon with the theme's density. The theme sets it.
  */
 export class GwChip extends GwElement {
   static override properties = {
     tone: { reflect: true },
     icon: {},
     loading: { type: "boolean", reflect: true },
+    size: { reflect: true },
   } as const;
 
   static override styles = [
     base,
+    controlSizes("chip"),
     css`
       :host {
         display: inline-flex;
       }
 
-      /* 32px, with 12px padding */
+      /* 32px at medium, with 12px padding */
       .chip {
+        --gw-size: var(--gw-chip-scale, 1);
+        --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1));
+        --gw-icon-size: calc(1rem * 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;
-        height: 2rem;
-        padding: 0 var(--gw-space-3);
-        font-size: var(--gw-font-size-xs);
+        height: calc(2rem * var(--gw-scale));
+        padding: 0 calc(var(--gw-space-3) * var(--gw-size));
+        font-size: max(
+          var(--gw-font-size-2xs),
+          calc(var(--gw-font-size-xs) * var(--gw-size))
+        );
         font-weight: var(--gw-font-weight-strong);
         color: var(--gw-color-text-strong);
         background: var(--gw-tone-fill, var(--gw-color-fill-neutral-resting));
         border: var(--gw-border-width) solid
           var(--gw-tone-border, var(--gw-color-border-quiet));
         border-radius: var(--gw-radius-chip);
-        --gw-icon-size: 1rem;
       }
 
       .content {
@@ -72,6 +89,7 @@ export class GwChip extends GwElement {
   /** SVG path data for an icon before the text, instead of the `icon` slot. */
   declare icon: string;
   declare loading: boolean;
+  declare size: "xs" | "small" | "medium" | "large" | "xl";
 
   readonly #icon = createIcon("");
 
@@ -93,6 +111,7 @@ export class GwChip extends GwElement {
     this.tone = "neutral";
     this.icon = "";
     this.loading = false;
+    this.size = "medium";
   }
 
   protected override create(root: ShadowRoot) {

package/src/gw-input.ts

@@ -25,6 +25,10 @@ import { LightElement, fieldId } from "./fields.js";
  * @attr {string} error - An error under the field, which marks it invalid.
  * @attr {boolean} required - Requires a value.
  * @attr {boolean} disabled - Disables the field.
+ * @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.
  */
 export class GwInput extends LightElement {
   static override properties = {
@@ -39,6 +43,7 @@ export class GwInput extends LightElement {
     error: {},
     required: { type: "boolean" },
     disabled: { type: "boolean" },
+    size: { reflect: true },
   } as const;
 
   declare label: string;
@@ -53,6 +58,7 @@ export class GwInput extends LightElement {
   declare error: string;
   declare required: boolean;
   declare disabled: boolean;
+  declare size: "xs" | "small" | "medium" | "large" | "xl";
 
   readonly #id = fieldId();
 
@@ -79,6 +85,7 @@ export class GwInput extends LightElement {
     this.error = "";
     this.required = false;
     this.disabled = false;
+    this.size = "medium";
   }
 
   protected override create(root: HTMLElement) {

package/src/gw-menu-button.ts

@@ -5,7 +5,7 @@
  * @module
  */
 import { GwElement, css, h } from "./element.js";
-import { base, createIcon, setIconPath } from "./styles.js";
+import { base, controlSizes, createIcon, setIconPath } from "./styles.js";
 
 export interface MenuItem {
   readonly value: string;
@@ -38,9 +38,13 @@ export interface MenuItem {
  * @attr {string} empty - What the menu says with no items. Defaults to `Nothing here yet`.
  * @attr {MenuItem[]} items - The items, as JSON.
  * @attr {MenuItem[]} actions - Actions pinned under the items, as JSON.
+ * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The trigger's size, 24 to 56px tall. Defaults to `medium`.
  *
  * @csspart trigger - The button that opens the menu.
  *
+ * @cssprop --gw-menu-button-scale - Scales the trigger, around 1 for medium.
+ * @cssprop --gw-control-scale - Scales its height and icon with the theme's density. The theme sets it.
+ *
  * @fires {CustomEvent<{ value: string }>} select - When an item or action is chosen, with its `value` in `detail`.
  */
 export class GwMenuButton extends GwElement {
@@ -50,10 +54,12 @@ export class GwMenuButton extends GwElement {
     empty: {},
     items: { type: "json" },
     actions: { type: "json" },
+    size: { reflect: true },
   } as const;
 
   static override styles = [
     base,
+    controlSizes("menu-button"),
     css`
       :host {
         position: relative;
@@ -62,14 +68,18 @@ export class GwMenuButton extends GwElement {
       }
 
       .trigger {
+        --gw-size: var(--gw-menu-button-scale, 1);
+        --gw-scale: calc(var(--gw-size) * var(--gw-control-scale, 1));
+        --gw-icon-size: calc(1.25rem * 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;
-        height: 2.5rem;
-        padding: 0 var(--gw-space-4);
+        height: calc(2.5rem * var(--gw-scale));
+        padding: 0 calc(var(--gw-space-4) * var(--gw-size));
         font: inherit;
-        font-size: var(--gw-font-size-s);
+        font-size: calc(var(--gw-font-size-s) * var(--gw-size));
         font-weight: var(--gw-font-weight-strong);
         color: var(--gw-color-text-strong);
         cursor: pointer;
@@ -233,6 +243,7 @@ export class GwMenuButton extends GwElement {
   declare empty: string;
   declare items: readonly MenuItem[];
   declare actions: readonly MenuItem[];
+  declare size: "xs" | "small" | "medium" | "large" | "xl";
 
   readonly #trigger = h("button", {
     class: "trigger",
@@ -264,6 +275,7 @@ export class GwMenuButton extends GwElement {
     this.empty = "Nothing here yet";
     this.items = [];
     this.actions = [];
+    this.size = "medium";
   }
 
   /** The enabled items then actions, in the order arrow keys move through them. */

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,10 +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 {
@@ -44,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;
       }
 
@@ -78,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 {
@@ -188,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();
@@ -196,6 +207,7 @@ export class GwSegmented extends GwElement {
     this.value = "";
     this.labels = "show";
     this.options = [];
+    this.size = "medium";
   }
 
   readonly #legend = h("legend");