@timmo001/groundwork-ui 0.9.11 → 0.9.12

package/custom-elements.json

@@ -13353,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": [
             {
@@ -13370,6 +13370,10 @@
             }
           ],
           "slots": [
+            {
+              "description": "Before the icon tile, such as a back button.",
+              "name": "start"
+            },
             {
               "description": "The page's controls.",
               "name": "actions"
@@ -13396,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"
@@ -13432,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-ui",
-  "version": "0.9.11",
+  "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-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-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),
       );
     }