@timmo001/groundwork-ui 0.6.0 → 0.7.0

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