@timmo001/groundwork-ui 0.6.0 → 0.8.0

package/package.json

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

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
@@ -38,6 +38,7 @@ import { base, createIcon, setIconPath } from "./styles.js";
  * @attr {boolean} disabled - Disables the button.
  * @attr {boolean} loading - Shows a spinning ring in the icon's place and ignores clicks.
  * @attr {string} icon - SVG path data for an icon before the text.
+ * @attr {string} swatch - A CSS color, drawn as a small round dot in the icon's place, such as a tag's own color.
  * @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, or an `<a>` holding it, in place of `href`.
@@ -46,6 +47,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.
  */
@@ -60,6 +62,7 @@ export class GwButton extends GwElement {
     disabled: { type: "boolean", reflect: true },
     loading: { type: "boolean", reflect: true },
     icon: {},
+    swatch: {},
     labels: { reflect: true },
   } as const;
 
@@ -71,6 +74,7 @@ export class GwButton extends GwElement {
 
   static override styles = [
     base,
+    controlSizes("button"),
     css`
       :host {
         --gw-button-tone: var(--gw-color-accent);
@@ -78,25 +82,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 +104,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));
@@ -258,10 +244,22 @@ export class GwButton extends GwElement {
         place-items: center;
       }
 
-      .lead > * {
+      /* The icon slot is display: contents, so its slotted icon is a grid
+         item of its own and needs the shared cell too */
+      .lead > *,
+      ::slotted([slot="icon"]) {
         grid-area: 1 / 1;
       }
 
+      /* A color dot in the icon's place */
+      .swatch {
+        width: calc(var(--gw-icon-size) * 0.6);
+        height: calc(var(--gw-icon-size) * 0.6);
+        border: 1px solid
+          color-mix(in oklab, var(--gw-color-text-primary) 20%, transparent);
+        border-radius: 50%;
+      }
+
       .lead > *,
       .text,
       .ring {
@@ -357,6 +355,8 @@ export class GwButton extends GwElement {
   declare loading: boolean;
   /** SVG path data for an icon before the text. */
   declare icon: string;
+  /** A CSS color, drawn as a small round dot in the icon's place. */
+  declare swatch: string;
   /** Whether the text shows beside an icon: always, never, or not on narrow screens. */
   declare labels: "show" | "hide" | "auto";
 
@@ -364,10 +364,13 @@ export class GwButton extends GwElement {
 
   readonly #iconSlot = h("slot", { name: "icon" });
 
+  readonly #swatch = h("span", { class: "swatch", "aria-hidden": "true" });
+
   readonly #lead = h(
     "span",
     { class: "lead" },
     this.#icon,
+    this.#swatch,
     this.#iconSlot,
     h("span", { class: "ring" }),
   );
@@ -392,6 +395,7 @@ export class GwButton extends GwElement {
   constructor() {
     super();
     this.icon = "";
+    this.swatch = "";
     this.labels = "show";
     this.variant = "brand";
     this.appearance = "accent";
@@ -472,7 +476,9 @@ export class GwButton extends GwElement {
     const control = this.#control;
 
     const hasIcon =
-      this.icon !== "" || this.querySelector("[slot='icon']") !== null;
+      this.icon !== "" ||
+      this.swatch !== "" ||
+      this.querySelector("[slot='icon']") !== null;
 
     control.classList.toggle("has-icon", hasIcon);
     control.classList.toggle(
@@ -482,6 +488,8 @@ export class GwButton extends GwElement {
     );
     setIconPath(this.#icon, this.icon);
     this.#icon.style.display = this.icon ? "" : "none";
+    this.#swatch.style.background = this.swatch;
+    this.#swatch.hidden = this.swatch === "" || this.icon !== "";
     setAttribute(
       control,
       "title",

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
@@ -18,7 +24,9 @@ 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 {string} swatch - A CSS color, drawn as a small round dot in the icon's place, such as a tag's own color.
  * @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 +35,48 @@ 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: {},
+    swatch: {},
     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 {
@@ -65,16 +84,31 @@ export class GwChip extends GwElement {
         gap: inherit;
         align-items: center;
       }
+
+      /* A color dot in the icon's place */
+      .swatch {
+        flex: none;
+        width: calc(var(--gw-icon-size) * 0.6);
+        height: calc(var(--gw-icon-size) * 0.6);
+        border: 1px solid
+          color-mix(in oklab, var(--gw-color-text-primary) 20%, transparent);
+        border-radius: 50%;
+      }
     `,
   ];
 
   declare tone: Tone;
   /** SVG path data for an icon before the text, instead of the `icon` slot. */
   declare icon: string;
+  /** A CSS color, drawn as a small round dot in the icon's place. */
+  declare swatch: string;
   declare loading: boolean;
+  declare size: "xs" | "small" | "medium" | "large" | "xl";
 
   readonly #icon = createIcon("");
 
+  readonly #swatch = h("span", { class: "swatch", "aria-hidden": "true" });
+
   readonly #chip = h("span", { class: "chip", part: "chip" });
 
   readonly #skeleton = h("gw-skeleton-text", {
@@ -84,7 +118,7 @@ export class GwChip extends GwElement {
   readonly #content = h(
     "span",
     { class: "content" },
-    h("slot", { name: "icon" }, this.#icon),
+    h("slot", { name: "icon" }, this.#icon, this.#swatch),
     h("slot"),
   );
 
@@ -92,7 +126,9 @@ export class GwChip extends GwElement {
     super();
     this.tone = "neutral";
     this.icon = "";
+    this.swatch = "";
     this.loading = false;
+    this.size = "medium";
   }
 
   protected override create(root: ShadowRoot) {
@@ -105,6 +141,8 @@ export class GwChip extends GwElement {
 
     setIconPath(this.#icon, this.icon);
     this.#icon.toggleAttribute("hidden", !this.icon);
+    this.#swatch.style.background = this.swatch;
+    this.#swatch.hidden = this.swatch === "" || this.icon !== "";
 
     setAttribute(this.#chip, "aria-busy", this.loading ? "true" : null);
     this.#skeleton.hidden = !this.loading;

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