@timmo001/groundwork-ui 0.6.0 → 0.8.0

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

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/layout.ts

@@ -36,13 +36,16 @@ export class GwPage extends GwElement {
         display: flex;
         flex-direction: column;
         gap: var(--gw-space-6);
-        width: 100%;
-        max-width: var(--gw-content-width);
+        /* The same box as gw-app-bar's content, so the two line up */
+        width: min(100% - 2 * var(--gw-space-3), var(--gw-content-width));
         margin-inline: auto;
       }
 
       :host([narrow]) .page {
-        max-width: var(--gw-content-width-narrow);
+        width: min(
+          100% - 2 * var(--gw-space-3),
+          var(--gw-content-width-narrow)
+        );
       }
     `,
   ];

package/src/styles.ts

@@ -7,6 +7,31 @@ import { css } from "./element.js";
 
 const svgNamespace = "http://www.w3.org/2000/svg";
 
+/**
+ * The `xs` to `xl` presets on a `size` attribute, as `--gw-<name>-scale`
+ * around 1 for medium, so an app can also set any size between or beyond
+ * them. A control multiplies its height and icon by `--gw-control-scale`
+ * too, which follows the theme's density, and its text only by its own
+ * scale, since spacing and type already follow density on their own.
+ */
+export const controlSizes = (name: string) => css`
+  :host([size="xs"]) {
+    --gw-${name}-scale: 0.6;
+  }
+
+  :host([size="small"]) {
+    --gw-${name}-scale: 0.8;
+  }
+
+  :host([size="large"]) {
+    --gw-${name}-scale: 1.2;
+  }
+
+  :host([size="xl"]) {
+    --gw-${name}-scale: 1.4;
+  }
+`;
+
 /**
  * What every component shares: box sizing, the focus ring, icons and the
  * tones that set `--gw-tone` from a `tone` attribute.
@@ -23,6 +48,7 @@ export const base = css`
     box-sizing: border-box;
   }
 
+  :host([hidden]),
   [hidden] {
     display: none !important;
   }