@timmo001/groundwork-ui 0.9.10 → 0.9.12

package/custom-elements.json

@@ -6401,7 +6401,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, open: { type: \"boolean\", reflect: true }, }",
+              "default": "{ heading: {}, open: { type: \"boolean\", reflect: true }, closeLabel: { attribute: \"close-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -6436,6 +6436,15 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "closeLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "The close button's name, for an app in another language.",
+              "default": "\"Close\""
+            },
             {
               "kind": "field",
               "name": "returnValue",
@@ -6854,6 +6863,13 @@
               },
               "description": "Whether it shows.",
               "name": "open"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The close button's name, for an app in another language. Defaults to `Close`.",
+              "name": "close-label"
             }
           ],
           "superclass": {
@@ -13337,7 +13353,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A page's title, with an optional icon tile and description, and its\ncontrols at the top right in the `actions` slot.",
+          "description": "A page's title, with an optional icon tile and description, a back button\nor similar in the `start` slot, and its controls at the top right in the\n`actions` slot.",
           "name": "GwPageHeader",
           "cssParts": [
             {
@@ -13354,6 +13370,10 @@
             }
           ],
           "slots": [
+            {
+              "description": "Before the icon tile, such as a back button.",
+              "name": "start"
+            },
             {
               "description": "The page's controls.",
               "name": "actions"
@@ -13380,7 +13400,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: flex; gap: var(--gw-space-3); align-items: flex-start; } .tile { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; color: var(--gw-color-accent); background: var(--gw-color-fill-accent-quiet); border-radius: var(--gw-radius-l); --gw-icon-size: 1.625rem; } .titles { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-0-5); min-width: 0; } h1 { margin: 0; font-size: var(--gw-font-size-2xl); font-weight: var(--gw-font-weight-strong); line-height: 1.2; color: var(--gw-color-text-strong); } p { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } .actions { display: flex; flex: none; gap: var(--gw-space-1); align-items: center; margin-inline-start: auto; } `, ]",
+              "default": "[ base, css` :host { display: flex; gap: var(--gw-space-3); align-items: flex-start; } .start { display: flex; flex: none; align-items: center; min-height: 3rem; } .start[hidden] { display: none; } .tile { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; color: var(--gw-color-accent); background: var(--gw-color-fill-accent-quiet); border-radius: var(--gw-radius-l); --gw-icon-size: 1.625rem; } .titles { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-0-5); min-width: 0; } h1 { margin: 0; font-size: var(--gw-font-size-2xl); font-weight: var(--gw-font-weight-strong); line-height: 1.2; color: var(--gw-color-text-strong); } p { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } .actions { display: flex; flex: none; gap: var(--gw-space-1); align-items: center; margin-inline-start: auto; } /* Centered on the tile when there is one */ .tile:not([hidden]) ~ .actions { min-height: 3rem; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -13416,6 +13436,18 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#startSlot",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#start",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#tile",
@@ -13839,7 +13871,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, confirm: { type: \"boolean\" }, }",
+              "default": "{ heading: {}, confirm: { type: \"boolean\" }, closeLabel: { attribute: \"close-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -13874,6 +13906,15 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "closeLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "The close button's name, for an app in another language.",
+              "default": "\"Close\""
+            },
             {
               "kind": "field",
               "name": "returnValue",
@@ -14324,6 +14365,13 @@
               },
               "description": "Makes it an `alertdialog`, for a question that needs an answer.",
               "name": "confirm"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The close button's name, for an app in another language. Defaults to `Close`.",
+              "name": "close-label"
             }
           ],
           "superclass": {
@@ -16614,7 +16662,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, side: { reflect: true }, }",
+              "default": "{ heading: {}, side: { reflect: true }, closeLabel: { attribute: \"close-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -16627,7 +16675,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` [popover] { position: fixed; box-sizing: border-box; flex-direction: column; padding: 0; margin: 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: 0 solid var(--gw-color-border-normal); box-shadow: var(--gw-shadow-l); transition: translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open { display: flex; translate: 0 0; } [popover]::backdrop { background: rgb(0 0 0 / 40%); } /* Full height from the start or end edge */ [data-side=\"start\"], [data-side=\"end\"] { inset: 0 auto; width: min(var(--gw-sheet-width, 20rem), 100vw); height: 100%; max-height: none; } [data-side=\"start\"] { inset-inline-start: 0; border-inline-end-width: max(var(--gw-border-width), 1px); translate: -100% 0; } [data-side=\"end\"] { inset-inline-end: 0; border-inline-start-width: max(var(--gw-border-width), 1px); translate: 100% 0; } :host(:dir(rtl)) [data-side=\"start\"] { translate: 100% 0; } :host(:dir(rtl)) [data-side=\"end\"] { translate: -100% 0; } /* Up from the bottom, with room for the phone's home bar */ [data-side=\"bottom\"] { inset: auto 0 0; width: 100%; max-width: none; max-height: var(--gw-sheet-height, 85vh); padding-block-end: env(safe-area-inset-bottom); border-block-start-width: max(var(--gw-border-width), 1px); border-start-start-radius: var(--gw-radius-panel); border-start-end-radius: var(--gw-radius-panel); translate: 0 100%; } @starting-style { [data-side=\"start\"]:popover-open { translate: -100% 0; } [data-side=\"end\"]:popover-open { translate: 100% 0; } [data-side=\"bottom\"]:popover-open { translate: 0 100%; } } header { display: flex; flex: none; gap: var(--gw-space-2); align-items: center; padding: var(--gw-space-2) var(--gw-space-3); border-block-end: var(--gw-border-width) solid var(--gw-color-border-quiet); } h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-3); min-height: 0; padding: var(--gw-space-4); /* It scrolls down only, so content reaching into its padding never makes it scroll sideways */ overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; } `, ]",
+              "default": "[ base, css` [popover] { position: fixed; box-sizing: border-box; flex-direction: column; padding: 0; margin: 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: 0 solid var(--gw-color-border-normal); box-shadow: var(--gw-shadow-l); transition: translate var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open { display: flex; translate: 0 0; } /* The page dims as the sheet slides in, and back as it leaves */ [popover]::backdrop { background: rgb(0 0 0 / 0%); transition: background-color var(--gw-motion-normal) var(--gw-motion-easing), display var(--gw-motion-normal) allow-discrete, overlay var(--gw-motion-normal) allow-discrete; } [popover]:popover-open::backdrop { background: rgb(0 0 0 / 40%); } @starting-style { [popover]:popover-open::backdrop { background: rgb(0 0 0 / 0%); } } /* Full height from the start or end edge */ [data-side=\"start\"], [data-side=\"end\"] { inset: 0 auto; width: min(var(--gw-sheet-width, 20rem), 100vw); height: 100%; max-height: none; } [data-side=\"start\"] { inset-inline-start: 0; border-inline-end-width: max(var(--gw-border-width), 1px); translate: -100% 0; } [data-side=\"end\"] { inset-inline-end: 0; border-inline-start-width: max(var(--gw-border-width), 1px); translate: 100% 0; } :host(:dir(rtl)) [data-side=\"start\"] { translate: 100% 0; } :host(:dir(rtl)) [data-side=\"end\"] { translate: -100% 0; } /* Up from the bottom, with room for the phone's home bar */ [data-side=\"bottom\"] { inset: auto 0 0; width: 100%; max-width: none; max-height: var(--gw-sheet-height, 85vh); padding-block-end: env(safe-area-inset-bottom); border-block-start-width: max(var(--gw-border-width), 1px); border-start-start-radius: var(--gw-radius-panel); border-start-end-radius: var(--gw-radius-panel); translate: 0 100%; } @starting-style { [data-side=\"start\"]:popover-open { translate: -100% 0; } [data-side=\"end\"]:popover-open { translate: 100% 0; } [data-side=\"bottom\"]:popover-open { translate: 0 100%; } } header { display: flex; flex: none; gap: var(--gw-space-2); align-items: center; padding: var(--gw-space-2) var(--gw-space-3); border-block-end: var(--gw-border-width) solid var(--gw-color-border-quiet); } h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-3); min-height: 0; padding: var(--gw-space-4); /* It scrolls down only, so content reaching into its padding never makes it scroll sideways */ overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -16649,6 +16697,15 @@
               },
               "default": "\"auto\""
             },
+            {
+              "kind": "field",
+              "name": "closeLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "The close button's name, for an app in another language.",
+              "default": "\"Close\""
+            },
             {
               "kind": "field",
               "name": "#heading",
@@ -17061,6 +17118,13 @@
               },
               "description": "The edge it slides in from. `auto` is the start edge, or the bottom on narrow screens. Defaults to `auto`.",
               "name": "side"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The close button's name, for an app in another language. Defaults to `Close`.",
+              "name": "close-label"
             }
           ],
           "superclass": {

package/package.json

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

package/src/gw-dialog.ts

@@ -24,6 +24,7 @@ const closeIcon =
  *
  * @attr {string} heading - The heading beside the close button.
  * @attr {boolean} open - Whether it shows.
+ * @attr {string} close-label - The close button's name, for an app in another language. Defaults to `Close`.
  *
  * @slot - The content.
  * @slot actions - Buttons; one with a `value` closes it with that value.
@@ -40,6 +41,7 @@ export class GwDialog extends GwElement {
   static override properties = {
     heading: {},
     open: { type: "boolean", reflect: true },
+    closeLabel: { attribute: "close-label" },
   } as const;
 
   static override styles = [
@@ -135,6 +137,8 @@ export class GwDialog extends GwElement {
 
   declare heading: string;
   declare open: boolean;
+  /** The close button's name, for an app in another language. */
+  declare closeLabel: string;
 
   /** The value of the action that closed the dialog, or "" for Esc. */
   returnValue = "";
@@ -143,6 +147,7 @@ export class GwDialog extends GwElement {
     super();
     this.heading = "";
     this.open = false;
+    this.closeLabel = "Close";
   }
 
   readonly #heading = h("h2", { id: "heading", part: "heading" });
@@ -236,6 +241,7 @@ export class GwDialog extends GwElement {
     const dialog = this.#dialog;
 
     this.#heading.textContent = this.heading;
+    this.#closeButton.textContent = this.closeLabel;
 
     if (this.open && !dialog.open) {
       dialog.showModal();

package/src/gw-page-header.ts

@@ -8,8 +8,9 @@ import { GwElement, css, h } from "./element.js";
 import { base, createIcon, setIconPath } from "./styles.js";
 
 /**
- * A page's title, with an optional icon tile and description, and its
- * controls at the top right in the `actions` slot.
+ * A page's title, with an optional icon tile and description, a back button
+ * or similar in the `start` slot, and its controls at the top right in the
+ * `actions` slot.
  *
  * @element gw-page-header
  * @summary A page's title, icon, description and actions.
@@ -18,6 +19,7 @@ import { base, createIcon, setIconPath } from "./styles.js";
  * @attr {string} description - A line under the title.
  * @attr {string} icon - SVG path data for the icon tile.
  *
+ * @slot start - Before the icon tile, such as a back button.
  * @slot actions - The page's controls.
  *
  * @csspart tile - The icon tile.
@@ -40,6 +42,17 @@ export class GwPageHeader extends GwElement {
         align-items: flex-start;
       }
 
+      .start {
+        display: flex;
+        flex: none;
+        align-items: center;
+        min-height: 3rem;
+      }
+
+      .start[hidden] {
+        display: none;
+      }
+
       .tile {
         display: grid;
         flex: none;
@@ -81,6 +94,11 @@ export class GwPageHeader extends GwElement {
         align-items: center;
         margin-inline-start: auto;
       }
+
+      /* Centered on the tile when there is one */
+      .tile:not([hidden]) ~ .actions {
+        min-height: 3rem;
+      }
     `,
   ];
 
@@ -90,6 +108,11 @@ export class GwPageHeader extends GwElement {
 
   readonly #icon = createIcon("");
 
+  readonly #startSlot = h("slot", { name: "start" });
+
+  // Centered on the tile's height, and out of the row while it's empty
+  readonly #start = h("div", { class: "start", hidden: true }, this.#startSlot);
+
   readonly #tile = h("span", { class: "tile", part: "tile" }, this.#icon);
 
   readonly #heading = h("h1", { part: "heading" });
@@ -104,7 +127,11 @@ export class GwPageHeader extends GwElement {
   }
 
   protected override create(root: ShadowRoot) {
+    this.#startSlot.addEventListener("slotchange", () => {
+      this.#start.hidden = this.#startSlot.assignedElements().length === 0;
+    });
     root.append(
+      this.#start,
       this.#tile,
       h("div", { class: "titles" }, this.#heading, this.#description),
       h("div", { class: "actions" }, h("slot", { name: "actions" })),

package/src/gw-popover.ts

@@ -34,6 +34,7 @@ const sheetBelow = 600;
  *
  * @attr {string} heading - The heading beside the close button.
  * @attr {boolean} confirm - Makes it an `alertdialog`, for a question that needs an answer.
+ * @attr {string} close-label - The close button's name, for an app in another language. Defaults to `Close`.
  *
  * @slot - The content.
  * @slot actions - Buttons; one with a `value` closes it with that value.
@@ -51,6 +52,7 @@ export class GwPopover extends GwElement {
   static override properties = {
     heading: {},
     confirm: { type: "boolean" },
+    closeLabel: { attribute: "close-label" },
   } as const;
 
   static override styles = [
@@ -188,6 +190,8 @@ export class GwPopover extends GwElement {
 
   declare heading: string;
   declare confirm: boolean;
+  /** The close button's name, for an app in another language. */
+  declare closeLabel: string;
 
   /** The value of the action that closed it, or "" for Esc or a click outside. */
   returnValue = "";
@@ -242,6 +246,7 @@ export class GwPopover extends GwElement {
     super();
     this.heading = "";
     this.confirm = false;
+    this.closeLabel = "Close";
   }
 
   /** Whether its content has changed since it opened, so closing it asks first. */
@@ -382,6 +387,7 @@ export class GwPopover extends GwElement {
     setAttribute(popover, "aria-describedby", this.heading ? "body" : null);
     this.#heading.textContent = this.heading;
     this.#heading.hidden = !this.heading;
+    this.#closeButton.textContent = this.closeLabel;
   }
 }
 

package/src/gw-segmented.ts

@@ -12,6 +12,8 @@ export interface Segment {
   readonly label: string;
   /** SVG path data for an icon beside, or instead of, the label. */
   readonly icon?: string;
+  /** A longer description, shown as the option's tooltip. */
+  readonly hint?: string;
 }
 
 /**
@@ -297,7 +299,8 @@ export class GwSegmented extends GwElement {
       setAttribute(
         label,
         "title",
-        option.icon && this.labels !== "show" ? option.label : null,
+        option.hint ??
+          (option.icon && this.labels !== "show" ? option.label : null),
       );
     }
 

package/src/gw-sheet.ts

@@ -37,6 +37,7 @@ const narrow = "(width < 40rem)";
  *
  * @attr {string} heading - The heading beside the close button.
  * @attr {"auto"|"start"|"end"|"bottom"} side - The edge it slides in from. `auto` is the start edge, or the bottom on narrow screens. Defaults to `auto`.
+ * @attr {string} close-label - The close button's name, for an app in another language. Defaults to `Close`.
  *
  * @slot - The content, which scrolls.
  * @slot actions - Buttons in the header, after the heading.
@@ -55,6 +56,7 @@ export class GwSheet extends GwElement {
   static override properties = {
     heading: {},
     side: { reflect: true },
+    closeLabel: { attribute: "close-label" },
   } as const;
 
   static override styles = [
@@ -82,10 +84,25 @@ export class GwSheet extends GwElement {
         translate: 0 0;
       }
 
+      /* The page dims as the sheet slides in, and back as it leaves */
       [popover]::backdrop {
+        background: rgb(0 0 0 / 0%);
+        transition:
+          background-color var(--gw-motion-normal) var(--gw-motion-easing),
+          display var(--gw-motion-normal) allow-discrete,
+          overlay var(--gw-motion-normal) allow-discrete;
+      }
+
+      [popover]:popover-open::backdrop {
         background: rgb(0 0 0 / 40%);
       }
 
+      @starting-style {
+        [popover]:popover-open::backdrop {
+          background: rgb(0 0 0 / 0%);
+        }
+      }
+
       /* Full height from the start or end edge */
       [data-side="start"],
       [data-side="end"] {
@@ -179,6 +196,8 @@ export class GwSheet extends GwElement {
 
   declare heading: string;
   declare side: "auto" | Side;
+  /** The close button's name, for an app in another language. */
+  declare closeLabel: string;
 
   readonly #heading = h("h2", { id: "heading", part: "heading" });
 
@@ -220,6 +239,7 @@ export class GwSheet extends GwElement {
     super();
     this.heading = "";
     this.side = "auto";
+    this.closeLabel = "Close";
   }
 
   /** Whether it's open. */
@@ -294,6 +314,7 @@ export class GwSheet extends GwElement {
       this.heading ? "heading" : null,
     );
     this.#heading.hidden = !this.heading;
+    this.#closeButton.textContent = this.closeLabel;
     this.#place();
   }
 }