@timmo001/groundwork-ui 0.9.3 → 0.9.5

package/custom-elements.json

@@ -1628,6 +1628,9 @@
               "kind": "field",
               "name": "#nav",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {
@@ -2228,6 +2231,9 @@
               "kind": "field",
               "name": "#value",
               "privacy": "private",
+              "type": {
+                "text": "HTMLSpanElement"
+              },
               "readonly": true
             },
             {
@@ -2696,6 +2702,9 @@
               "kind": "field",
               "name": "#bar",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {
@@ -3816,6 +3825,9 @@
               "kind": "field",
               "name": "#header",
               "privacy": "private",
+              "type": {
+                "text": "HTMLElement"
+              },
               "readonly": true
             },
             {
@@ -3828,6 +3840,9 @@
               "kind": "field",
               "name": "#body",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {
@@ -5461,6 +5476,9 @@
               "kind": "field",
               "name": "#content",
               "privacy": "private",
+              "type": {
+                "text": "HTMLSpanElement"
+              },
               "readonly": true
             },
             {
@@ -5932,6 +5950,9 @@
               "kind": "field",
               "name": "#dialog",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDialogElement"
+              },
               "readonly": true
             },
             {
@@ -7809,6 +7830,9 @@
               "kind": "field",
               "name": "#details",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDetailsElement"
+              },
               "readonly": true
             },
             {
@@ -10318,7 +10342,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 +10368,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 +10381,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 +10395,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 +10446,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 +10474,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 +10563,11 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#tick",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "create",
@@ -10829,6 +10897,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 +10938,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": {
@@ -14260,6 +14349,9 @@
               "kind": "field",
               "name": "#heading",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {
@@ -16014,6 +16106,9 @@
               "kind": "field",
               "name": "#descriptionSkeleton",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-ui",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "description": "Groundwork's framework-free web components, styled by the --gw-* tokens",
   "license": "Apache-2.0",
   "type": "module",
@@ -28,7 +28,7 @@
   "scripts": {
     "check": "bun run --parallel --no-exit-on-error lint typecheck format:check",
     "lint": "oxlint .",
-    "typecheck": "tsc",
+    "typecheck": "tsc && bun run scripts/typecheck-alone.ts",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "gen": "bun run scripts/manifest.ts",

package/src/gw-app-bar.ts

@@ -237,7 +237,11 @@ export class GwAppBar extends GwElement {
     this.#menuIcon,
   );
 
-  readonly #nav = h("div", { class: "nav", part: "nav" }, h("slot"));
+  readonly #nav: HTMLDivElement = h(
+    "div",
+    { class: "nav", part: "nav" },
+    h("slot"),
+  );
 
   #observer: IntersectionObserver | undefined;
 

package/src/gw-badge.ts

@@ -134,7 +134,7 @@ export class GwBadge extends GwElement {
     style: "--gw-skeleton-width: 3rem",
   });
 
-  readonly #value = h("span", { class: "value" }, h("slot"));
+  readonly #value: HTMLSpanElement = h("span", { class: "value" }, h("slot"));
 
   constructor() {
     super();

package/src/gw-banner.ts

@@ -90,7 +90,7 @@ export class GwBanner extends GwElement {
   declare open: boolean;
   declare urgent: boolean;
 
-  readonly #bar = h(
+  readonly #bar: HTMLDivElement = h(
     "div",
     { class: "bar", part: "bar" },
     h("slot", { name: "icon" }),

package/src/gw-card.ts

@@ -139,7 +139,7 @@ export class GwCard extends GwElement {
 
   readonly #headingSlot = h("slot", { name: "heading" });
 
-  readonly #header = h(
+  readonly #header: HTMLElement = h(
     "header",
     { part: "header" },
     h(
@@ -154,7 +154,11 @@ export class GwCard extends GwElement {
 
   readonly #skeleton = h("gw-skeleton-lines");
 
-  readonly #body = h("div", { class: "body", part: "body" }, h("slot"));
+  readonly #body: HTMLDivElement = h(
+    "div",
+    { class: "body", part: "body" },
+    h("slot"),
+  );
 
   #card: HTMLElement = h("section", { class: "card", part: "card" });
 

package/src/gw-chip.ts

@@ -115,7 +115,7 @@ export class GwChip extends GwElement {
     style: "--gw-skeleton-width: 3.5rem",
   });
 
-  readonly #content = h(
+  readonly #content: HTMLSpanElement = h(
     "span",
     { class: "content" },
     h("slot", { name: "icon" }, this.#icon, this.#swatch),

package/src/gw-command-menu.ts

@@ -156,7 +156,7 @@ export class GwCommandMenu extends GwElement {
 
   readonly #list = h("gw-option-list", { search: true, part: "list" });
 
-  readonly #dialog = h(
+  readonly #dialog: HTMLDialogElement = h(
     "dialog",
     { part: "dialog" },
     this.#list,

package/src/gw-expansion.ts

@@ -178,7 +178,7 @@ export class GwExpansion extends GwElement {
     part: "description",
   });
 
-  readonly #details = h(
+  readonly #details: HTMLDetailsElement = h(
     "details",
     { part: "details" },
     h(

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;
     }

package/src/gw-section-title.ts

@@ -48,7 +48,11 @@ export class GwSectionTitle extends GwElement {
 
   declare level: number;
 
-  readonly #heading = h("div", { role: "heading", part: "heading" }, h("slot"));
+  readonly #heading: HTMLDivElement = h(
+    "div",
+    { role: "heading", part: "heading" },
+    h("slot"),
+  );
 
   constructor() {
     super();

package/src/gw-setting-row.ts

@@ -115,7 +115,7 @@ export class GwSettingRow extends GwElement {
 
   readonly #description = h("div", { class: "description" });
 
-  readonly #descriptionSkeleton = h(
+  readonly #descriptionSkeleton: HTMLDivElement = h(
     "div",
     { class: "description" },
     h("gw-skeleton-text", { style: "--gw-skeleton-width: 12rem" }),