@timmo001/groundwork-ui 0.9.2 → 0.9.4

package/custom-elements.json

@@ -3613,7 +3613,7 @@
               "type": {
                 "text": "\"button\"|\"submit\"|\"reset\""
               },
-              "description": "The native button type. Defaults to `button`.",
+              "description": "What a click does: nothing more, or submit or reset the form the button is in. Defaults to `button`.",
               "name": "type"
             },
             {
@@ -10318,7 +10318,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A button that opens a menu on the Popover API, so it shows in the top\nlayer and closes on Esc or a click outside. Set `items`; arrow keys, Home\nand End move between them, and choosing one fires `select` with its\n`value` and closes the menu.\n\nContextual actions, such as \"Add a schedule\", go in `actions`: they stay\nbelow the items as the list scrolls, so they're found without scrolling to\nthe end, and with no items the menu says `empty` above them.\n\nItems render inside the component, so a page's own button styles can't\nreach them.",
+          "description": "A button that opens a menu on the Popover API, so it shows in the top\nlayer and closes on Esc or a click outside. Set `items`; arrow keys, Home\nand End move between them, and choosing one fires `select` with its\n`value` and closes the menu.\n\nContextual actions, such as \"Add a schedule\", go in `actions`: they stay\nbelow the items as the list scrolls, so they're found without scrolling to\nthe end, and with no items the menu says `empty` above them.\n\nFor a menu of choices, such as sort and order, give each item `checked`:\nthe picked one shows a tick, and `separator` starts the next group.\n\nItems render inside the component, so a page's own button styles can't\nreach them.",
           "name": "GwMenuButton",
           "cssProperties": [
             {
@@ -10344,7 +10344,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ label: {}, icon: {}, empty: {}, items: { type: \"json\" }, actions: { type: \"json\" }, size: { reflect: true }, }",
+              "default": "{ label: {}, heading: {}, icon: {}, empty: {}, items: { type: \"json\" }, actions: { type: \"json\" }, size: { reflect: true }, active: { type: \"boolean\", reflect: true }, labels: { reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -10357,7 +10357,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, controlSizes(\"menu-button\"), css` :host { position: relative; display: inline-block; anchor-scope: --gw-menu; } .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: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; box-sizing: border-box; height: calc(2.5rem * 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-size)); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); cursor: pointer; background: var(--gw-color-fill-neutral-resting); border: var(--gw-border-width) solid var(--gw-border-color); border-radius: var(--gw-radius-control); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); anchor-name: --gw-menu; } .trigger:hover { background: var(--gw-color-fill-neutral-hovered); } .chevron { width: 0.4rem; height: 0.4rem; margin-inline-start: var(--gw-space-1); border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: 45deg; translate: 0 -0.125rem; transition: rotate var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing); } .trigger[aria-expanded=\"true\"] .chevron { rotate: 225deg; translate: 0 0.125rem; } [popover] { position-anchor: --gw-menu; position-try-fallbacks: flip-block, flip-inline; inset: auto; top: anchor(bottom); left: anchor(left); box-sizing: border-box; min-width: 15rem; max-height: min(24rem, 60vh); padding: 0; margin: var(--gw-space-1) 0 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-l); box-shadow: var(--gw-shadow-m); opacity: 0; translate: 0 -0.25rem; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), 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; flex-direction: column; opacity: 1; translate: 0 0; } @starting-style { [popover]:popover-open { opacity: 0; translate: 0 -0.25rem; } } /* The items scroll; the actions stay put below them, so \"Add\" is always in reach rather than at the end of a long list */ .items, .actions { display: flex; flex-direction: column; gap: var(--gw-space-0-5); padding: var(--gw-space-1); } .items { flex: 1; min-height: 0; overflow-y: auto; } .actions { border-block-start: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); } .empty { padding: var(--gw-space-3); margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } .item { display: flex; gap: var(--gw-space-3); align-items: center; box-sizing: border-box; min-height: 2.5rem; padding: var(--gw-space-2) var(--gw-space-3); font: inherit; font-size: var(--gw-font-size-s); color: var(--gw-color-text-primary); text-align: start; cursor: pointer; background: transparent; border: 0; border-radius: var(--gw-radius-m); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); --gw-icon-size: 1.125rem; } .item:hover, .item:focus-visible { background: var(--gw-color-fill-neutral-hovered); outline: none; } .item:focus-visible { box-shadow: inset 0 0 0 var(--gw-focus-width) var(--gw-color-focus); } .item:disabled { color: var(--gw-color-text-disabled); cursor: not-allowed; background: transparent; } .action { font-weight: var(--gw-font-weight-strong); color: var(--gw-color-accent); } .text { display: flex; flex-direction: column; gap: var(--gw-space-0-5); } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } `, ]",
+              "default": "[ base, controlSizes(\"menu-button\"), css` :host { position: relative; display: inline-block; anchor-scope: --gw-menu; } .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: calc(var(--gw-space-2) * var(--gw-size)); align-items: center; box-sizing: border-box; height: calc(2.5rem * 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-size)); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); cursor: pointer; background: var(--gw-color-fill-neutral-resting); border: var(--gw-border-width) solid var(--gw-border-color); border-radius: var(--gw-radius-control); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); anchor-name: --gw-menu; } .trigger:hover { background: var(--gw-color-fill-neutral-hovered); } :host([active]) .trigger { color: var(--gw-color-accent); border-color: var(--gw-color-accent); } /* Icon only, square, with the text kept for assistive technology */ :host([labels=\"hide\"]) .trigger.has-icon { padding: 0 calc(var(--gw-space-2) * var(--gw-size)); } :host([labels=\"hide\"]) .has-icon .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (width < 40rem) { :host([labels=\"auto\"]) .trigger.has-icon { padding: 0 calc(var(--gw-space-2) * var(--gw-size)); } :host([labels=\"auto\"]) .has-icon .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .chevron { width: 0.4rem; height: 0.4rem; margin-inline-start: var(--gw-space-1); border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; rotate: 45deg; translate: 0 -0.125rem; transition: rotate var(--gw-motion-normal) var(--gw-motion-easing), translate var(--gw-motion-normal) var(--gw-motion-easing); } .trigger[aria-expanded=\"true\"] .chevron { rotate: 225deg; translate: 0 0.125rem; } [popover] { position-anchor: --gw-menu; position-try-fallbacks: flip-block, flip-inline; inset: auto; top: anchor(bottom); left: anchor(left); box-sizing: border-box; min-width: 15rem; max-height: min(24rem, 60vh); padding: 0; margin: var(--gw-space-1) 0 0; overflow: hidden; color: var(--gw-color-text-primary); background: var(--gw-color-surface-overlay); border: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-l); box-shadow: var(--gw-shadow-m); opacity: 0; translate: 0 -0.25rem; transition: opacity var(--gw-motion-fast) var(--gw-motion-easing), 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; flex-direction: column; opacity: 1; translate: 0 0; } @starting-style { [popover]:popover-open { opacity: 0; translate: 0 -0.25rem; } } /* The items scroll; the actions stay put below them, so \"Add\" is always in reach rather than at the end of a long list */ .items, .actions { display: flex; flex-direction: column; gap: var(--gw-space-0-5); padding: var(--gw-space-1); } .items { flex: 1; min-height: 0; overflow-y: auto; } .actions { border-block-start: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); } .empty { padding: var(--gw-space-3); margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } .item { display: flex; gap: var(--gw-space-3); align-items: center; box-sizing: border-box; min-height: 2.5rem; padding: var(--gw-space-2) var(--gw-space-3); font: inherit; font-size: var(--gw-font-size-s); color: var(--gw-color-text-primary); text-align: start; cursor: pointer; background: transparent; border: 0; border-radius: var(--gw-radius-m); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); --gw-icon-size: 1.125rem; } .item:hover, .item:focus-visible { background: var(--gw-color-fill-neutral-hovered); outline: none; } .item:focus-visible { box-shadow: inset 0 0 0 var(--gw-focus-width) var(--gw-color-focus); } .item:disabled { color: var(--gw-color-text-disabled); cursor: not-allowed; background: transparent; } .action { font-weight: var(--gw-font-weight-strong); color: var(--gw-color-accent); } /* Holds the tick's place on every choice, so the labels line up */ .tick { flex: none; width: var(--gw-icon-size); height: var(--gw-icon-size); color: var(--gw-color-accent); } .item[aria-checked=\"false\"] .tick { visibility: hidden; } .separator { flex: none; height: 0; margin: var(--gw-space-0-5) calc(-1 * var(--gw-space-1)); border: 0; border-block-start: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); } .text { display: flex; flex-direction: column; gap: var(--gw-space-0-5); } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -10371,6 +10371,15 @@
               },
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string"
+              },
+              "description": "What the menu is for, such as \"Sort by\", when the trigger shows the current choice.",
+              "default": "\"\""
+            },
             {
               "kind": "field",
               "name": "icon",
@@ -10413,6 +10422,24 @@
               },
               "default": "\"medium\""
             },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Marks the trigger as set, such as a grouping that's on.",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "\"show\" | \"hide\" | \"auto\""
+              },
+              "description": "Whether the trigger's text shows beside its icon: always, never, or not on narrow screens.",
+              "default": "\"show\""
+            },
             {
               "kind": "field",
               "name": "#trigger",
@@ -10423,6 +10450,18 @@
               "kind": "field",
               "name": "#triggerText",
               "privacy": "private",
+              "type": {
+                "text": "HTMLSpanElement"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#heading",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLSpanElement"
+              },
               "readonly": true
             },
             {
@@ -10500,6 +10539,11 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#tick",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "create",
@@ -10829,6 +10873,13 @@
               "description": "The trigger's text.",
               "name": "label"
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "What the menu is for, such as \"Sort by\", when the trigger shows the current choice: it names the menu, starts the trigger's accessible name and is its tooltip.",
+              "name": "heading"
+            },
             {
               "type": {
                 "text": "string"
@@ -10863,6 +10914,20 @@
               },
               "description": "The trigger's size, 24 to 56px tall. Defaults to `medium`.",
               "name": "size"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Marks the trigger as set, such as a grouping that's on, with an accent border and text.",
+              "name": "active"
+            },
+            {
+              "type": {
+                "text": "\"show\"|\"hide\"|\"auto\""
+              },
+              "description": "Whether the trigger's text shows beside its icon: always, never, or not on narrow screens. Defaults to `show`.",
+              "name": "labels"
             }
           ],
           "superclass": {

package/package.json

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

package/src/gw-button.ts

@@ -32,7 +32,7 @@ import { base, controlSizes, createIcon, setIconPath } from "./styles.js";
  * @attr {"brand"|"neutral"|"info"|"success"|"warning"|"danger"} variant - The color. Defaults to `brand`.
  * @attr {"accent"|"filled"|"outlined"|"plain"} appearance - How the color is applied. Defaults to `accent`.
  * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The size, 24 to 56px tall. Defaults to `medium`.
- * @attr {"button"|"submit"|"reset"} type - The native button type. Defaults to `button`.
+ * @attr {"button"|"submit"|"reset"} type - What a click does: nothing more, or submit or reset the form the button is in. Defaults to `button`.
  * @attr {string} href - Renders a link to this address instead of a button.
  * @attr {string} label - The accessible name, when the text alone isn't enough.
  * @attr {boolean} disabled - Disables the button.
@@ -423,6 +423,25 @@ export class GwButton extends GwElement {
       if (link !== null && !event.composedPath().includes(link)) {
         link.click();
       }
+
+      // The native button is in the shadow root, so it has no form of its
+      // own; submit and reset act on the form around the element instead
+      const form = this.closest("form");
+
+      if (
+        form === null ||
+        this.disabled ||
+        event.defaultPrevented ||
+        !(this.#control instanceof HTMLButtonElement)
+      ) {
+        return;
+      }
+
+      if (this.type === "submit") {
+        form.requestSubmit();
+      } else if (this.type === "reset") {
+        form.reset();
+      }
     });
 
     const focus = () => {

package/src/gw-menu-button.ts

@@ -4,7 +4,7 @@
  *
  * @module
  */
-import { GwElement, css, h } from "./element.js";
+import { GwElement, css, h, setAttribute } from "./element.js";
 import { base, controlSizes, createIcon, setIconPath } from "./styles.js";
 
 export interface MenuItem {
@@ -15,8 +15,18 @@ export interface MenuItem {
   /** SVG path data for an icon before the label. */
   readonly icon?: string;
   readonly disabled?: boolean;
+  /**
+   * Whether the item is the one picked, for a menu of choices such as a sort
+   * order. Give it on every item in the group: the picked one shows a tick.
+   */
+  readonly checked?: boolean;
+  /** Draws a line above the item, starting a new group. */
+  readonly separator?: boolean;
 }
 
+// mdi's check, for the picked item in a menu of choices
+const tick = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";
+
 /**
  * A button that opens a menu on the Popover API, so it shows in the top
  * layer and closes on Esc or a click outside. Set `items`; arrow keys, Home
@@ -27,6 +37,9 @@ export interface MenuItem {
  * below the items as the list scrolls, so they're found without scrolling to
  * the end, and with no items the menu says `empty` above them.
  *
+ * For a menu of choices, such as sort and order, give each item `checked`:
+ * the picked one shows a tick, and `separator` starts the next group.
+ *
  * Items render inside the component, so a page's own button styles can't
  * reach them.
  *
@@ -34,11 +47,14 @@ export interface MenuItem {
  * @summary A button that opens a menu of items and actions.
  *
  * @attr {string} label - The trigger's text.
+ * @attr {string} heading - What the menu is for, such as "Sort by", when the trigger shows the current choice: it names the menu, starts the trigger's accessible name and is its tooltip.
  * @attr {string} icon - SVG path data for an icon before the trigger's text.
  * @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`.
+ * @attr {boolean} active - Marks the trigger as set, such as a grouping that's on, with an accent border and text.
+ * @attr {"show"|"hide"|"auto"} labels - Whether the trigger's text shows beside its icon: always, never, or not on narrow screens. Defaults to `show`.
  *
  * @csspart trigger - The button that opens the menu.
  *
@@ -50,11 +66,14 @@ export interface MenuItem {
 export class GwMenuButton extends GwElement {
   static override properties = {
     label: {},
+    heading: {},
     icon: {},
     empty: {},
     items: { type: "json" },
     actions: { type: "json" },
     size: { reflect: true },
+    active: { type: "boolean", reflect: true },
+    labels: { reflect: true },
   } as const;
 
   static override styles = [
@@ -95,6 +114,40 @@ export class GwMenuButton extends GwElement {
         background: var(--gw-color-fill-neutral-hovered);
       }
 
+      :host([active]) .trigger {
+        color: var(--gw-color-accent);
+        border-color: var(--gw-color-accent);
+      }
+
+      /* Icon only, square, with the text kept for assistive technology */
+      :host([labels="hide"]) .trigger.has-icon {
+        padding: 0 calc(var(--gw-space-2) * var(--gw-size));
+      }
+
+      :host([labels="hide"]) .has-icon .label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+
+      @media (width < 40rem) {
+        :host([labels="auto"]) .trigger.has-icon {
+          padding: 0 calc(var(--gw-space-2) * var(--gw-size));
+        }
+
+        :host([labels="auto"]) .has-icon .label {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+          white-space: nowrap;
+        }
+      }
+
       .chevron {
         width: 0.4rem;
         height: 0.4rem;
@@ -223,6 +276,27 @@ export class GwMenuButton extends GwElement {
         color: var(--gw-color-accent);
       }
 
+      /* Holds the tick's place on every choice, so the labels line up */
+      .tick {
+        flex: none;
+        width: var(--gw-icon-size);
+        height: var(--gw-icon-size);
+        color: var(--gw-color-accent);
+      }
+
+      .item[aria-checked="false"] .tick {
+        visibility: hidden;
+      }
+
+      .separator {
+        flex: none;
+        height: 0;
+        margin: var(--gw-space-0-5) calc(-1 * var(--gw-space-1));
+        border: 0;
+        border-block-start: max(var(--gw-border-width), 1px) solid
+          var(--gw-color-border-normal);
+      }
+
       .text {
         display: flex;
         flex-direction: column;
@@ -237,6 +311,8 @@ export class GwMenuButton extends GwElement {
   ];
 
   declare label: string;
+  /** What the menu is for, such as "Sort by", when the trigger shows the current choice. */
+  declare heading: string;
   /** SVG path data for an icon before the trigger's label. */
   declare icon: string;
   /** What the menu says when it has no items, such as "No backups yet". */
@@ -244,6 +320,10 @@ export class GwMenuButton extends GwElement {
   declare items: readonly MenuItem[];
   declare actions: readonly MenuItem[];
   declare size: "xs" | "small" | "medium" | "large" | "xl";
+  /** Marks the trigger as set, such as a grouping that's on. */
+  declare active: boolean;
+  /** Whether the trigger's text shows beside its icon: always, never, or not on narrow screens. */
+  declare labels: "show" | "hide" | "auto";
 
   readonly #trigger = h("button", {
     class: "trigger",
@@ -253,7 +333,16 @@ export class GwMenuButton extends GwElement {
     "aria-expanded": "false",
   });
 
-  readonly #triggerText = document.createTextNode("");
+  readonly #triggerText: HTMLSpanElement = h("span", {
+    class: "label",
+    id: "label",
+  });
+
+  // Read before the label, for a trigger that shows the current choice
+  readonly #heading: HTMLSpanElement = h("span", {
+    id: "heading",
+    hidden: true,
+  });
 
   readonly #triggerIcon = createIcon("");
 
@@ -271,11 +360,14 @@ export class GwMenuButton extends GwElement {
   constructor() {
     super();
     this.label = "";
+    this.heading = "";
     this.icon = "";
     this.empty = "Nothing here yet";
     this.items = [];
     this.actions = [];
     this.size = "medium";
+    this.active = false;
+    this.labels = "show";
   }
 
   /** The enabled items then actions, in the order arrow keys move through them. */
@@ -327,14 +419,18 @@ export class GwMenuButton extends GwElement {
   }
 
   #renderItem(item: MenuItem, kind: "item" | "action") {
+    const choice = item.checked !== undefined;
+
     const button = h(
       "button",
       {
         class: kind === "action" ? "item action" : "item",
-        role: "menuitem",
+        role: choice ? "menuitemradio" : "menuitem",
+        "aria-checked": choice ? String(item.checked) : null,
         value: item.value,
         disabled: item.disabled === true,
       },
+      choice ? this.#tick() : null,
       item.icon ? createIcon(item.icon) : null,
       h(
         "span",
@@ -348,7 +444,17 @@ export class GwMenuButton extends GwElement {
 
     button.addEventListener("click", () => this.#choose(item.value));
 
-    return button;
+    return item.separator === true
+      ? [h("hr", { class: "separator", role: "separator" }), button]
+      : [button];
+  }
+
+  #tick() {
+    const icon = createIcon(tick);
+
+    icon.classList.add("tick");
+
+    return icon;
   }
 
   protected override create(root: ShadowRoot) {
@@ -359,14 +465,30 @@ export class GwMenuButton extends GwElement {
     );
     this.#popover.addEventListener("toggle", this.#onToggle);
     this.#popover.addEventListener("keydown", this.#onKeydown);
-    root.append(this.#trigger, this.#popover);
+    root.append(this.#heading, this.#trigger, this.#popover);
   }
 
   protected override update(changed: ReadonlySet<string>) {
-    this.#triggerText.data = this.label;
+    this.#triggerText.textContent = this.label;
     setIconPath(this.#triggerIcon, this.icon);
     this.#triggerIcon.toggleAttribute("hidden", !this.icon);
-    this.#popover.setAttribute("aria-label", this.label);
+    this.#trigger.classList.toggle("has-icon", this.icon !== "");
+    this.#heading.textContent = this.heading;
+    setAttribute(
+      this.#trigger,
+      "aria-labelledby",
+      this.heading ? "heading label" : null,
+    );
+    // A tooltip saying what the menu is for, or the text when it's hidden
+    setAttribute(
+      this.#trigger,
+      "title",
+      this.heading ||
+        (this.icon !== "" && this.labels !== "show"
+          ? this.label || null
+          : null),
+    );
+    this.#popover.setAttribute("aria-label", this.heading || this.label);
 
     if (changed.has("items") || changed.has("empty")) {
       const items = Array.isArray(this.items) ? this.items : [];
@@ -374,7 +496,7 @@ export class GwMenuButton extends GwElement {
       this.#items.replaceChildren(
         ...(items.length === 0
           ? [h("p", { class: "empty", role: "none" }, this.empty)]
-          : items.map((item) => this.#renderItem(item, "item"))),
+          : items.flatMap((item) => this.#renderItem(item, "item"))),
       );
     }
 
@@ -382,7 +504,7 @@ export class GwMenuButton extends GwElement {
       const actions = Array.isArray(this.actions) ? this.actions : [];
 
       this.#actions.replaceChildren(
-        ...actions.map((item) => this.#renderItem(item, "action")),
+        ...actions.flatMap((item) => this.#renderItem(item, "action")),
       );
       this.#actions.hidden = actions.length === 0;
     }