npm - @timmo001/groundwork-ui - Versions diffs - 0.9.16 → 0.9.18 - Mend

@timmo001/groundwork-ui 0.9.16 → 0.9.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/custom-elements.json CHANGED Viewed

@@ -5899,7 +5899,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` dialog { top: 12vh; width: min(36rem, calc(100vw - 2 * var(--gw-space-3))); max-height: 70vh; padding: 0; margin-block: 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-panel); box-shadow: var(--gw-shadow-l); --gw-option-list-height: min(24rem, 56vh); } dialog::backdrop { background: rgb(0 0 0 / 50%); } dialog, dialog::backdrop { opacity: 0; transition: opacity var(--gw-motion-normal) var(--gw-motion-easing), scale var(--gw-motion-normal) 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; } dialog { scale: 0.96; } dialog[open], dialog[open]::backdrop { opacity: 1; } dialog[open] { scale: 1; } @starting-style { dialog[open], dialog[open]::backdrop { opacity: 0; } dialog[open] { scale: 0.96; } } dialog[data-placement=\"sheet\"] { inset: auto 0 0; width: 100%; max-width: none; padding-block-end: env(safe-area-inset-bottom); border-end-start-radius: 0; border-end-end-radius: 0; scale: 1; translate: 0 100%; --gw-option-list-height: 60vh; } dialog[data-placement=\"sheet\"][open] { opacity: 1; translate: 0 0; } @starting-style { dialog[data-placement=\"sheet\"][open] { translate: 0 100%; } } footer { display: flex; gap: var(--gw-space-3); padding: var(--gw-space-2) var(--gw-space-3); font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); border-block-start: var(--gw-border-width) solid var(--gw-color-border-quiet); } kbd { padding: 0 var(--gw-space-1); font: inherit; border: 1px solid var(--gw-color-border-normal); border-radius: var(--gw-radius-control); } dialog[data-placement=\"sheet\"] footer { display: none; } `, ]",
+              "default": "[ base, css` dialog { top: 12vh; width: min(36rem, calc(100vw - 2 * var(--gw-space-3))); max-height: 70vh; padding: 0; margin-block: 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-loud); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-l); --gw-option-list-height: min(24rem, 56vh); } dialog::backdrop { background: rgb(0 0 0 / 60%); } dialog, dialog::backdrop { opacity: 0; transition: opacity var(--gw-motion-normal) var(--gw-motion-easing), scale var(--gw-motion-normal) 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; } dialog { scale: 0.96; } dialog[open], dialog[open]::backdrop { opacity: 1; } dialog[open] { scale: 1; } @starting-style { dialog[open], dialog[open]::backdrop { opacity: 0; } dialog[open] { scale: 0.96; } } dialog[data-placement=\"sheet\"] { inset: auto 0 0; width: 100%; max-width: none; padding-block-end: env(safe-area-inset-bottom); border-end-start-radius: 0; border-end-end-radius: 0; scale: 1; translate: 0 100%; --gw-option-list-height: 60vh; } dialog[data-placement=\"sheet\"][open] { opacity: 1; translate: 0 0; } @starting-style { dialog[data-placement=\"sheet\"][open] { translate: 0 100%; } } footer { display: flex; gap: var(--gw-space-3); padding: var(--gw-space-2) var(--gw-space-3); font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); border-block-start: var(--gw-border-width) solid var(--gw-color-border-quiet); } kbd { padding: var(--gw-space-0-5) calc(var(--gw-space-1) * 1.5); font: inherit; line-height: 1; background: color-mix( in oklab, var(--gw-color-surface-overlay), var(--gw-color-text-primary) 8% ); border: 1px solid var(--gw-color-border-normal); border-radius: var(--gw-radius-control); } dialog[data-placement=\"sheet\"] footer { display: none; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -10402,7 +10402,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\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.",
+          "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.\nItems with `checkbox` toggle instead, firing `check` and keeping the menu\nopen, and `group` lists items under a heading.\n\nItems render inside the component, so a page's own button styles can't\nreach them.",
           "name": "GwMenuButton",
           "cssProperties": [
             {
@@ -10428,7 +10428,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ label: {}, heading: {}, icon: {}, empty: {}, items: { type: \"json\" }, actions: { type: \"json\" }, size: { reflect: true }, appearance: { reflect: true }, active: { type: \"boolean\", reflect: true }, labels: { reflect: true }, }",
+              "default": "{ label: {}, heading: {}, icon: {}, empty: {}, items: { type: \"json\" }, actions: { type: \"json\" }, size: { reflect: true }, appearance: { reflect: true }, active: { type: \"boolean\", reflect: true }, labels: { reflect: true }, loading: { type: \"boolean\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -10441,7 +10441,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); } /* The other appearances draw the trigger as gw-button draws a neutral one, a pill, so it sits in a row of buttons without a seam */ :host([appearance=\"accent\"]) .trigger, :host([appearance=\"outlined\"]) .trigger, :host([appearance=\"plain\"]) .trigger { background: transparent; border: max(var(--gw-border-width), 1px) solid transparent; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing), border-color var(--gw-motion-fast) var(--gw-motion-easing), color var(--gw-motion-fast) var(--gw-motion-easing); } :host([appearance=\"outlined\"]) .trigger { border-color: var(--gw-color-text-secondary); } :host([appearance=\"outlined\"]) .trigger:hover, :host([appearance=\"plain\"]) .trigger:hover { background: color-mix( in oklch, var(--gw-color-text-secondary) 16%, transparent ); } /* A solid fill, with text that flips between black and white by the fill's lightness, as gw-button's accent does */ :host([appearance=\"accent\"]) .trigger { color: oklch( from var(--gw-color-accent) clamp(0, (0.66 - l) * 1000, 1) 0 0 ); background: var(--gw-color-accent); } :host([appearance=\"accent\"]) .trigger:hover { background: oklch( from var(--gw-color-accent) calc(l + (0.6 - l) * 0.2) c h ); } :host([active]:not([appearance=\"accent\"])) .trigger { color: var(--gw-color-accent); border-color: var(--gw-color-accent); } /* Icon only, square like an icon-only gw-button, such as a ⋮ for more actions, with the text kept for assistive technology */ :host([labels=\"hide\"]) .trigger.has-icon { justify-content: center; min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"hide\"]) .has-icon .chevron { display: none; } :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; } /* Below the button down to the window's edge, or above it when there's more room there, growing to its content and scrolling past that */ [popover] { position-anchor: --gw-menu; position-try-fallbacks: flip-inline; /* The area is the room on that side, so 100% is all of it */ position-area: block-end span-inline-end; inset: auto; box-sizing: border-box; min-width: 15rem; max-width: calc(100vw - 2 * var(--gw-space-2)); max-height: min(24rem, calc(100% - 2 * var(--gw-space-2))); padding: 0; margin: var(--gw-space-1) 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); } `, ]",
+              "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); } /* While a chosen action runs, a ring takes the icon's place */ .ring { display: none; flex: none; width: calc(var(--gw-icon-size) * 0.8); height: calc(var(--gw-icon-size) * 0.8); border: calc(2px * var(--gw-scale)) solid color-mix(in oklch, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } :host([loading]) .trigger { cursor: progress; } :host([loading]) .ring { display: block; } :host([loading]) .trigger > .icon { display: none; } /* The other appearances draw the trigger as gw-button draws a neutral one, a pill, so it sits in a row of buttons without a seam */ :host([appearance=\"accent\"]) .trigger, :host([appearance=\"outlined\"]) .trigger, :host([appearance=\"plain\"]) .trigger { background: transparent; border: max(var(--gw-border-width), 1px) solid transparent; border-radius: var(--gw-radius-pill); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing), border-color var(--gw-motion-fast) var(--gw-motion-easing), color var(--gw-motion-fast) var(--gw-motion-easing); } :host([appearance=\"outlined\"]) .trigger { border-color: var(--gw-color-text-secondary); } :host([appearance=\"outlined\"]) .trigger:hover, :host([appearance=\"plain\"]) .trigger:hover { background: color-mix( in oklch, var(--gw-color-text-secondary) 16%, transparent ); } /* A solid fill, with text that flips between black and white by the fill's lightness, as gw-button's accent does */ :host([appearance=\"accent\"]) .trigger { color: oklch( from var(--gw-color-accent) clamp(0, (0.66 - l) * 1000, 1) 0 0 ); background: var(--gw-color-accent); } :host([appearance=\"accent\"]) .trigger:hover { background: oklch( from var(--gw-color-accent) calc(l + (0.6 - l) * 0.2) c h ); } :host([active]:not([appearance=\"accent\"])) .trigger { color: var(--gw-color-accent); border-color: var(--gw-color-accent); } /* Icon only, square like an icon-only gw-button, such as a ⋮ for more actions, with the text kept for assistive technology */ :host([labels=\"hide\"]) .trigger.has-icon { justify-content: center; min-width: calc(2.5rem * var(--gw-scale)); padding: 0; } :host([labels=\"hide\"]) .has-icon .chevron { display: none; } :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; } /* Below the button down to the window's edge, or above it when there's more room there, growing to its content and scrolling past that */ [popover] { position-anchor: --gw-menu; position-try-fallbacks: flip-inline; /* The area is the room on that side, so 100% is all of it */ position-area: block-end span-inline-end; inset: auto; box-sizing: border-box; min-width: 15rem; max-width: calc(100vw - 2 * var(--gw-space-2)); max-height: min(24rem, calc(100% - 2 * var(--gw-space-2))); padding: 0; margin: var(--gw-space-1) 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; } .item[role=\"menuitemcheckbox\"] .box { flex: none; color: var(--gw-color-text-secondary); } .item[role=\"menuitemcheckbox\"][aria-checked=\"true\"] .box { color: var(--gw-color-accent); } .group { display: flex; flex-direction: column; gap: var(--gw-space-0-5); } .group:not(:first-child) { padding-block-start: var(--gw-space-1); margin-block-start: var(--gw-space-0-5); border-block-start: max(var(--gw-border-width), 1px) solid var(--gw-color-border-normal); } .group-heading { padding: var(--gw-space-1) var(--gw-space-3) 0; margin: 0; font-size: var(--gw-font-size-xs); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); } .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"
@@ -10533,6 +10533,15 @@
               "description": "Whether the trigger's text shows beside its icon: always, never, or not on narrow screens.",
               "default": "\"show\""
             },
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Shows a spinning ring in the icon's place and disables the trigger.",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "#trigger",
@@ -10613,6 +10622,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#check",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "MenuItem"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#renderItem",
@@ -10632,11 +10654,38 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#renderItems",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "readonly MenuItem[]"
+                  }
+                }
+              ],
+              "description": "Items in runs that share a group, each run under its heading."
+            },
             {
               "kind": "method",
               "name": "#tick",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "#box",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "checked",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "create",
@@ -10956,6 +11005,13 @@
                 "text": "CustomEvent<{ value: string }>"
               },
               "description": "When an item or action is chosen, with its `value` in `detail`."
+            },
+            {
+              "name": "check",
+              "type": {
+                "text": "CustomEvent<{ value: string, checked: boolean }>"
+              },
+              "description": "When a checkbox item is toggled, with its `value` and the state it should change to in `detail`."
             }
           ],
           "attributes": [
@@ -11028,6 +11084,13 @@
               },
               "description": "Whether the trigger's text shows beside its icon: always, never (a square icon button without the chevron, such as ⋮ for more actions), or not on narrow screens. Defaults to `show`.",
               "name": "labels"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Shows a spinning ring in the icon's place and disables the trigger, while a chosen action runs.",
+              "name": "loading"
             }
           ],
           "superclass": {
@@ -12667,7 +12730,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: flex; flex-direction: column; min-height: 0; } .search { display: flex; gap: var(--gw-space-2); align-items: center; padding: var(--gw-space-1) var(--gw-space-3); color: var(--gw-color-text-secondary); border-block-end: var(--gw-border-width) solid var(--gw-color-border-quiet); } :host(:not([search])) .search { display: none; } input { flex: 1; min-width: 0; height: 2.5rem; padding: 0; font: inherit; font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); background: none; border: 0; outline: none; } /* The search field is always focused while the list is open, so the row's divider marks it rather than a ring */ input:focus-visible { outline: none; } input::placeholder { color: var(--gw-color-text-secondary); } [role=\"listbox\"] { position: relative; max-height: var(--gw-option-list-height, 20rem); overflow-y: auto; overscroll-behavior: contain; outline: none; } .spacer { position: relative; } .row { position: absolute; inset-inline: ${listPadding}px; box-sizing: border-box; display: flex; gap: var(--gw-space-3); align-items: center; padding: 0 var(--gw-space-2); } .group { align-items: flex-end; padding-block-end: var(--gw-space-1); font-size: var(--gw-font-size-xs); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); } [role=\"option\"] { font-size: var(--gw-font-size-s); cursor: pointer; border-radius: var(--gw-radius-control); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); } [role=\"option\"][data-active] { background: var(--gw-color-fill-neutral-hovered); } [role=\"option\"][aria-selected=\"true\"] { color: var(--gw-color-text-strong); } [role=\"option\"] > .icon { flex: none; color: var(--gw-color-text-secondary); } [role=\"option\"] > .check { color: var(--gw-color-accent); } .text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } .swatches { display: flex; flex: none; } .swatches span, .swatch { width: 0.875rem; height: 0.875rem; margin-inline-start: -0.25rem; border: 1px solid color-mix(in oklab, var(--gw-color-text-primary) 20%, transparent); border-radius: 50%; } .swatch { flex: none; width: 0.625rem; height: 0.625rem; margin-inline: 0.125rem; } .none { padding: var(--gw-space-4); font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); text-align: center; } .none[hidden] { display: none; } `, ]",
+              "default": "[ base, css` :host { display: flex; flex-direction: column; min-height: 0; } .search { display: flex; gap: var(--gw-space-2); align-items: center; padding: var(--gw-space-1) var(--gw-space-3); color: var(--gw-color-text-secondary); border-block-end: var(--gw-border-width) solid var(--gw-color-border-quiet); } :host(:not([search])) .search { display: none; } input { flex: 1; min-width: 0; height: 2.5rem; padding: 0; font: inherit; font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); background: none; border: 0; outline: none; } /* The search field is always focused while the list is open, so the row's divider marks it rather than a ring */ input:focus-visible { outline: none; } input::placeholder { color: var(--gw-color-text-secondary); } [role=\"listbox\"] { position: relative; max-height: var(--gw-option-list-height, 20rem); overflow-y: auto; overscroll-behavior: contain; outline: none; } .spacer { position: relative; } .row { position: absolute; inset-inline: ${listPadding}px; box-sizing: border-box; display: flex; gap: var(--gw-space-3); align-items: center; padding: 0 var(--gw-space-2); } .group { align-items: flex-end; padding-block-end: var(--gw-space-1); font-size: var(--gw-font-size-xs); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); } [role=\"option\"] { font-size: var(--gw-font-size-s); color: var(--gw-color-text-strong); cursor: pointer; border-radius: var(--gw-radius-control); transition: background-color var(--gw-motion-fast) var(--gw-motion-easing); } /* Mixed from the text color, so the active row stands out on any surface the list sits on, overlays included */ [role=\"option\"][data-active] { background: color-mix( in oklab, transparent, var(--gw-color-text-primary) 12% ); } [role=\"option\"][aria-selected=\"true\"] { color: var(--gw-color-text-strong); } [role=\"option\"] > .icon { flex: none; color: var(--gw-color-text-primary); } [role=\"option\"] > .check { color: var(--gw-color-accent); } .text { display: flex; flex: 1; flex-direction: column; min-width: 0; } .text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } .swatches { display: flex; flex: none; } .swatches span, .swatch { width: 0.875rem; height: 0.875rem; margin-inline-start: -0.25rem; border: 1px solid color-mix(in oklab, var(--gw-color-text-primary) 20%, transparent); border-radius: 50%; } .swatch { flex: none; width: 0.625rem; height: 0.625rem; margin-inline: 0.125rem; } .none { padding: var(--gw-space-4); font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); text-align: center; } .none[hidden] { display: none; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -19076,7 +19139,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Picks a theme from a grid of cards, each a small picture of an app in that\ntheme's colors: a rail, a panel and the status tones. For a settings page,\nor inside `gw-theme-picker` with `gallery`.\n\nThemes with a `group` sit together under its name, and lone ones under\n\"Other\", so a family's light and dark variants line up. Previews draw in\n`mode`, or the mode of the page or themed container it sits in, from the\ntheme CSS already on the page, including a custom theme `pageTheme`\nimported. Call `refresh()` after that CSS changes.\n\nIt's a `<fieldset>` of native radio buttons, so arrow keys move the choice.\nIt fires `theme`.",
+          "description": "Picks a theme from a grid of cards, each a small picture of an app in that\ntheme's colors: a rail, a panel and the status tones. For a settings page,\nor inside `gw-theme-picker` with `gallery`.\n\nThemes with a `group` sit together under its name, so a family's light and\ndark variants line up. Themes with none gather where the first of them\ncomes: with no heading when that's first, and under \"Other\" after a family. Previews draw in\n`mode`, or the mode of the page or themed container it sits in, from the\ntheme CSS already on the page, including a custom theme `pageTheme`\nimported. Call `refresh()` after that CSS changes.\n\nIt's a `<fieldset>` of native radio buttons, so arrow keys move the choice.\nIt fires `theme`.",
           "name": "GwThemeGallery",
           "cssProperties": [
             {
@@ -19123,7 +19186,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: block; } fieldset { display: flex; flex-direction: column; gap: var(--gw-space-4); min-width: 0; padding: 0; margin: 0; border: 0; } legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .group { display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--gw-theme-gallery-min, 9rem), 1fr) ); gap: var(--gw-space-3); } .group-name { grid-column: 1 / -1; margin: 0; font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); text-transform: var(--gw-label-transform); letter-spacing: var(--gw-label-tracking); } label { position: relative; display: flex; flex-direction: column; gap: var(--gw-space-2); padding: var(--gw-space-2); cursor: pointer; background: var(--gw-color-surface-raised); border: 2px solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); transition: border-color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } label:hover { border-color: var(--gw-color-border-accent); } label:has(input:checked) { background: var(--gw-color-fill-accent-quiet); border-color: var(--gw-color-accent); } label:has(input:focus-visible) { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } input { position: absolute; inset: 0; margin: 0; cursor: pointer; opacity: 0; } /* A small app in the theme's own colors */ .preview { display: grid; grid-template-columns: 22% 1fr; gap: 6px; height: 5.5rem; padding: 6px; background: var(--p-bg); border-radius: calc(var(--gw-radius-panel) - 2px); } .rail { display: flex; flex-direction: column; gap: 4px; padding: 4px; } .rail i { height: 5px; background: var(--p-muted); border-radius: 3px; opacity: 0.5; } .rail i:first-child { background: var(--p-accent); opacity: 1; } .panel { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 6px; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: min(var(--p-radius), 6px); } .line { width: 60%; height: 5px; background: var(--p-text); border-radius: 3px; } .line.short { width: 40%; background: var(--p-muted); } .bars { display: flex; flex: 1; gap: 3px; align-items: flex-end; } .bars i { flex: 1; border-radius: 2px 2px 0 0; } .name { display: flex; flex-direction: column; padding: 0 var(--gw-space-1) var(--gw-space-1); font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .name small { font-size: var(--gw-font-size-xs); font-weight: normal; color: var(--gw-color-text-secondary); } label:has(input:checked) .name { color: var(--gw-color-accent); } .check { position: absolute; inset-block-start: var(--gw-space-3); inset-inline-end: var(--gw-space-3); display: none; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--gw-color-on-accent); background: var(--gw-color-fill-accent-resting); border-radius: 50%; --gw-icon-size: 1rem; } label:has(input:checked) .check { display: grid; } `, ]",
+              "default": "[ base, css` :host { display: block; } fieldset { display: flex; flex-direction: column; gap: var(--gw-space-4); min-width: 0; padding: 0; margin: 0; border: 0; } legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .group { display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--gw-theme-gallery-min, 9rem), 1fr) ); gap: var(--gw-space-3); } .group-name { grid-column: 1 / -1; margin: 0; font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-secondary); text-transform: var(--gw-label-transform); letter-spacing: var(--gw-label-tracking); } label { position: relative; display: flex; flex-direction: column; gap: var(--gw-space-2); padding: var(--gw-space-2); cursor: pointer; background: var(--gw-color-surface-raised); border: 2px solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); transition: border-color var(--gw-motion-fast) var(--gw-motion-easing), background-color var(--gw-motion-fast) var(--gw-motion-easing); } label:hover { border-color: var(--gw-color-border-accent); } label:has(input:checked) { background: var(--gw-color-fill-accent-quiet); border-color: var(--gw-color-accent); } label:has(input:focus-visible) { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } input { position: absolute; inset: 0; margin: 0; cursor: pointer; opacity: 0; } /* A small app in the theme's own colors */ .preview { display: grid; grid-template-columns: 22% 1fr; gap: 6px; height: 5.5rem; padding: 6px; background: var(--p-bg); border-radius: calc(var(--gw-radius-panel) - 2px); } .rail { display: flex; flex-direction: column; gap: 4px; padding: 4px; } .rail i { height: 5px; background: var(--p-muted); border-radius: 3px; opacity: 0.5; } .rail i:first-child { background: var(--p-accent); opacity: 1; } .panel { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 6px; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: min(var(--p-radius), 6px); } .line { width: 60%; height: 5px; background: var(--p-text); border-radius: 3px; } .line.short { width: 40%; background: var(--p-muted); } .bars { display: flex; flex: 1; gap: 3px; align-items: flex-end; } .bars i { flex: 1; border-radius: 2px 2px 0 0; } .name { display: flex; flex-direction: column; padding: 0 var(--gw-space-1) var(--gw-space-1); font-size: var(--gw-font-size-s); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } label:has(input:checked) .name { color: var(--gw-color-accent); } .check { position: absolute; inset-block-start: var(--gw-space-3); inset-inline-end: var(--gw-space-3); display: none; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--gw-color-on-accent); background: var(--gw-color-fill-accent-resting); border-radius: 50%; --gw-icon-size: 1rem; } label:has(input:checked) .check { display: grid; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -19229,12 +19292,6 @@
                   "type": {
                     "text": "OptionItem"
                   }
-                },
-                {
-                  "name": "inOther",
-                  "type": {
-                    "text": "boolean"
-                  }
                 }
               ]
             },
@@ -19615,7 +19672,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The page's mode, theme and import, in place where there's room and in a\npopover where there isn't. Offers the mode (auto, light, dark or Darker),\nthe theme, and buttons to import a theme file (a Groundwork theme's `.json`\nor an Omarchy `colors.toml`) or reset.\n\nIt only asks: it fires `mode`, `theme`, `import` and `reset`, and the page\napplies them and sets `mode`, `theme` and `themes` back. `pageTheme` from\n`@timmo001/groundwork-tokens/page` does all of that. Show an import's\nresult, such as contrast misses, in `status`.\n\n`gallery` swaps the theme select for `gw-theme-gallery`'s cards, which\npreview each theme in the chosen mode.\n\n`layout` sets how it shows. `auto`, the default, lays the mode out as icons\nand the theme as a select in place while they fit the room it's given,\nthen moves them into the popover, the theme first, as the room runs out.\nReset, Import, the gallery and `status` stay in the popover, opened from a\npalette button. Once the mode and theme are in place and only Reset and\nImport are left, they're a ⋮ menu instead.\nIn a flex row, such as `gw-page-header`'s actions, it gives up room before\nthe title does. `popover` keeps everything behind the palette button. `cycle` is one button\nshowing the mode in use, which steps to the next mode on each press, for an\napp bar. `inline` lays every control out in place, in one wrapping row with\nReset and Import, for a footer or a settings page; set `justify-content` on\nit to align the row. `modes` picks which modes it offers, such as\n`light dark` without Auto.",
+          "description": "The page's mode, theme and import, in place where there's room and in a\npopover where there isn't. Offers the mode (auto, light, dark or Darker),\nthe theme, and buttons to import a theme file (a Groundwork theme's `.json`\nor an Omarchy `colors.toml`) or reset.\n\nIt only asks: it fires `mode`, `theme`, `import` and `reset`, and the page\napplies them and sets `mode`, `theme` and `themes` back. `pageTheme` from\n`@timmo001/groundwork-tokens/page` does all of that. Show an import's\nresult, such as contrast misses, in `status`.\n\n`gallery` swaps the theme select for `gw-theme-gallery`'s cards, which\npreview each theme in the chosen mode.\n\n`layout` sets how it shows. `auto`, the default, lays the mode out as icons\nand the theme as a select in place while they fit the room it's given,\nthen moves them into the popover, the theme first, as the room runs out.\nReset, Import, the gallery and `status` stay in the popover, opened from a\npalette button. Once the mode and theme are in place and only Reset and\nImport are left, they're a ⋮ menu instead.\nIn a flex row, such as `gw-page-header`'s actions, it gives up room before\nthe title does. `popover` keeps everything behind the palette button. `cycle` is one button\nshowing the mode in use, which steps to the next mode on each press, for an\napp bar. `inline` lays every control out in place, in one wrapping row with\nReset and Import, for a footer or a settings page; set `justify-content` on\nit to align the row. With `gallery`, the cards take a row of their own\nunder it. `modes` picks which modes it offers, such as\n`light dark` without Auto.",
           "name": "GwThemePicker",
           "cssParts": [
             {
@@ -19652,7 +19709,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: inline-block; } :host([gallery]) gw-popover { --gw-popover-width: 34rem; } .gallery { max-height: min(24rem, 50vh); overflow: auto; /* Room for the cards' focus rings */ padding: var(--gw-space-1); margin: calc(var(--gw-space-1) * -1); } .controls { display: flex; flex-direction: column; gap: var(--gw-space-4); margin-block-start: var(--gw-space-2); } .status { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } /* One wrapping row: the controls, then Reset and Import. The host is the flex container, so a page can set its justify-content */ :host([layout=\"inline\"]) { display: flex; flex-wrap: wrap; gap: var(--gw-space-4); align-items: center; } :host([layout=\"inline\"]) .controls { flex-flow: row wrap; align-items: center; margin-block-start: 0; } .actions { display: flex; flex-wrap: wrap; gap: var(--gw-space-2); align-items: center; } /* Asks for the room to have all of it in place, but gives it up down to the button before a flex row's other items shrink */ :host([layout=\"auto\"]) { display: flex; flex: 0 1000 var(--gw-theme-picker-fit, auto); gap: var(--gw-space-1); align-items: center; min-width: 2.5rem; contain: inline-size; } :host([layout=\"auto\"]) > * { flex: none; } `, ]",
+              "default": "[ base, css` :host { display: inline-block; } :host([gallery]) gw-popover { --gw-popover-width: 34rem; } .gallery { max-height: min(24rem, 50vh); overflow: auto; /* Room for the cards' focus rings */ padding: var(--gw-space-1); margin: calc(var(--gw-space-1) * -1); } .controls { display: flex; flex-direction: column; gap: var(--gw-space-4); margin-block-start: var(--gw-space-2); } .status { margin: 0; font-size: var(--gw-font-size-s); color: var(--gw-color-text-secondary); } /* One wrapping row: the controls, then Reset and Import. The host is the flex container, so a page can set its justify-content */ :host([layout=\"inline\"]) { display: flex; flex-wrap: wrap; gap: var(--gw-space-4); align-items: center; } :host([layout=\"inline\"]) .controls { flex-flow: row wrap; align-items: center; margin-block-start: 0; } /* The cards get a row of their own under the mode, Reset and Import */ :host([layout=\"inline\"][gallery]) .controls { display: contents; } :host([layout=\"inline\"]) .gallery { flex: 1 0 100%; order: 1; max-height: none; overflow: visible; } :host([layout=\"inline\"][gallery]) .status { flex: 1 0 100%; order: 2; } .actions { display: flex; flex-wrap: wrap; gap: var(--gw-space-2); align-items: center; } /* Asks for the room to have all of it in place, but gives it up down to the button before a flex row's other items shrink */ :host([layout=\"auto\"]) { display: flex; flex: 0 1000 var(--gw-theme-picker-fit, auto); gap: var(--gw-space-1); align-items: center; min-width: 2.5rem; contain: inline-size; } :host([layout=\"auto\"]) > * { flex: none; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"

package/package.json CHANGED Viewed

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

package/src/events.ts CHANGED Viewed

@@ -16,6 +16,7 @@ export interface GwEventMap {
   };
   "gw-menu-button": {
     select: CustomEvent<{ value: string }>;
+    check: CustomEvent<{ value: string, checked: boolean }>;
   };
   "gw-notification": {
     dismiss: Event;

package/src/gw-command-menu.ts CHANGED Viewed

@@ -56,14 +56,14 @@ export class GwCommandMenu extends GwElement {
         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);
+          var(--gw-color-border-loud);
         border-radius: var(--gw-radius-panel);
         box-shadow: var(--gw-shadow-l);
         --gw-option-list-height: min(24rem, 56vh);
       }
       dialog::backdrop {
-        background: rgb(0 0 0 / 50%);
+        background: rgb(0 0 0 / 60%);
       }
       dialog,
@@ -135,8 +135,14 @@ export class GwCommandMenu extends GwElement {
       }
       kbd {
-        padding: 0 var(--gw-space-1);
+        padding: var(--gw-space-0-5) calc(var(--gw-space-1) * 1.5);
         font: inherit;
+        line-height: 1;
+        background: color-mix(
+          in oklab,
+          var(--gw-color-surface-overlay),
+          var(--gw-color-text-primary) 8%
+        );
         border: 1px solid var(--gw-color-border-normal);
         border-radius: var(--gw-radius-control);
       }

package/src/gw-menu-button.ts CHANGED Viewed

@@ -20,13 +20,31 @@ export interface MenuItem {
    * order. Give it on every item in the group: the picked one shows a tick.
    */
   readonly checked?: boolean;
+  /**
+   * Makes the item a checkbox, such as a column to show: choosing it fires
+   * `check` with the state it should change to and keeps the menu open, so
+   * several can be changed in a row. `checked` is its current state.
+   */
+  readonly checkbox?: boolean;
   /** Draws a line above the item, starting a new group. */
   readonly separator?: boolean;
+  /**
+   * Names the group the item is in. Items in a row with the same group are
+   * listed together under it as a heading, after a line.
+   */
+  readonly group?: string;
 }
 // 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";
+// mdi's checkbox-marked and checkbox-blank-outline, for checkbox items
+const boxChecked =
+  "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+const boxEmpty =
+  "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z";
 /**
  * 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
@@ -39,6 +57,8 @@ const tick = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";
  *
  * 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 with `checkbox` toggle instead, firing `check` and keeping the menu
+ * open, and `group` lists items under a heading.
  *
  * Items render inside the component, so a page's own button styles can't
  * reach them.
@@ -56,6 +76,7 @@ const tick = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";
  * @attr {"accent"|"filled"|"outlined"|"plain"} appearance - How the trigger is drawn: `filled` is a neutral fill with a border, and the others match a neutral `gw-button` of that appearance, so it sits in a row of them. Defaults to `filled`.
  * @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 (a square icon button without the chevron, such as ⋮ for more actions), or not on narrow screens. Defaults to `show`.
+ * @attr {boolean} loading - Shows a spinning ring in the icon's place and disables the trigger, while a chosen action runs.
  *
  * @csspart trigger - The button that opens the menu.
  *
@@ -63,6 +84,7 @@ const tick = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";
  * @cssprop --gw-control-scale - Scales its height and icon with the theme's density. The theme sets it.
  *
  * @fires {CustomEvent<{ value: string }>} select - When an item or action is chosen, with its `value` in `detail`.
+ * @fires {CustomEvent<{ value: string, checked: boolean }>} check - When a checkbox item is toggled, with its `value` and the state it should change to in `detail`.
  */
 export class GwMenuButton extends GwElement {
   static override properties = {
@@ -76,6 +98,7 @@ export class GwMenuButton extends GwElement {
     appearance: { reflect: true },
     active: { type: "boolean", reflect: true },
     labels: { reflect: true },
+    loading: { type: "boolean", reflect: true },
   } as const;
   static override styles = [
@@ -116,6 +139,37 @@ export class GwMenuButton extends GwElement {
         background: var(--gw-color-fill-neutral-hovered);
       }
+      /* While a chosen action runs, a ring takes the icon's place */
+      .ring {
+        display: none;
+        flex: none;
+        width: calc(var(--gw-icon-size) * 0.8);
+        height: calc(var(--gw-icon-size) * 0.8);
+        border: calc(2px * var(--gw-scale)) solid
+          color-mix(in oklch, currentColor 25%, transparent);
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: spin 0.9s linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      :host([loading]) .trigger {
+        cursor: progress;
+      }
+      :host([loading]) .ring {
+        display: block;
+      }
+      :host([loading]) .trigger > .icon {
+        display: none;
+      }
       /* The other appearances draw the trigger as gw-button draws a neutral
          one, a pill, so it sits in a row of buttons without a seam */
       :host([appearance="accent"]) .trigger,
@@ -342,6 +396,36 @@ export class GwMenuButton extends GwElement {
         visibility: hidden;
       }
+      .item[role="menuitemcheckbox"] .box {
+        flex: none;
+        color: var(--gw-color-text-secondary);
+      }
+      .item[role="menuitemcheckbox"][aria-checked="true"] .box {
+        color: var(--gw-color-accent);
+      }
+      .group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gw-space-0-5);
+      }
+      .group:not(:first-child) {
+        padding-block-start: var(--gw-space-1);
+        margin-block-start: var(--gw-space-0-5);
+        border-block-start: max(var(--gw-border-width), 1px) solid
+          var(--gw-color-border-normal);
+      }
+      .group-heading {
+        padding: var(--gw-space-1) var(--gw-space-3) 0;
+        margin: 0;
+        font-size: var(--gw-font-size-xs);
+        font-weight: var(--gw-font-weight-strong);
+        color: var(--gw-color-text-secondary);
+      }
       .separator {
         flex: none;
         height: 0;
@@ -380,6 +464,8 @@ export class GwMenuButton extends GwElement {
   declare active: boolean;
   /** Whether the trigger's text shows beside its icon: always, never, or not on narrow screens. */
   declare labels: "show" | "hide" | "auto";
+  /** Shows a spinning ring in the icon's place and disables the trigger. */
+  declare loading: boolean;
   readonly #trigger = h("button", {
     class: "trigger",
@@ -425,6 +511,7 @@ export class GwMenuButton extends GwElement {
     this.appearance = "filled";
     this.active = false;
     this.labels = "show";
+    this.loading = false;
   }
   /** The enabled items then actions, in the order arrow keys move through them. */
@@ -493,18 +580,36 @@ export class GwMenuButton extends GwElement {
     this.#trigger.focus();
   }
+  // A checkbox keeps the menu open, so several can be changed in a row
+  #check(item: MenuItem) {
+    this.dispatchEvent(
+      new CustomEvent("check", {
+        detail: { value: item.value, checked: item.checked !== true },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
   #renderItem(item: MenuItem, kind: "item" | "action") {
-    const choice = item.checked !== undefined;
+    const checkbox = item.checkbox === true;
+    const choice = !checkbox && item.checked !== undefined;
     const button = h(
       "button",
       {
         class: kind === "action" ? "item action" : "item",
-        role: choice ? "menuitemradio" : "menuitem",
-        "aria-checked": choice ? String(item.checked) : null,
+        role: checkbox
+          ? "menuitemcheckbox"
+          : choice
+            ? "menuitemradio"
+            : "menuitem",
+        "aria-checked":
+          checkbox || choice ? String(item.checked === true) : null,
         value: item.value,
         disabled: item.disabled === true,
       },
+      checkbox ? this.#box(item.checked === true) : null,
       choice ? this.#tick() : null,
       item.icon ? createIcon(item.icon) : null,
       h(
@@ -517,13 +622,55 @@ export class GwMenuButton extends GwElement {
       ),
     );
-    button.addEventListener("click", () => this.#choose(item.value));
+    button.addEventListener("click", () => {
+      if (checkbox) {
+        this.#check(item);
+      } else {
+        this.#choose(item.value);
+      }
+    });
     return item.separator === true
       ? [h("hr", { class: "separator", role: "separator" }), button]
       : [button];
   }
+  /** Items in runs that share a group, each run under its heading. */
+  #renderItems(items: readonly MenuItem[]) {
+    if (!items.some((item) => item.group !== undefined)) {
+      return items.flatMap((item) => this.#renderItem(item, "item"));
+    }
+    const runs: { group: string | undefined; items: MenuItem[] }[] = [];
+    for (const item of items) {
+      const run = runs.at(-1);
+      if (run !== undefined && run.group === item.group) {
+        run.items.push(item);
+      } else {
+        runs.push({ group: item.group, items: [item] });
+      }
+    }
+    return runs.map(({ group, items: grouped }, index) => {
+      const id = `group-${index}`;
+      return h(
+        "div",
+        {
+          class: "group",
+          role: "group",
+          "aria-labelledby": group === undefined ? null : id,
+        },
+        group === undefined
+          ? null
+          : h("p", { class: "group-heading", id, role: "none" }, group),
+        ...grouped.flatMap((item) => this.#renderItem(item, "item")),
+      );
+    });
+  }
   #tick() {
     const icon = createIcon(tick);
@@ -532,9 +679,18 @@ export class GwMenuButton extends GwElement {
     return icon;
   }
+  #box(checked: boolean) {
+    const icon = createIcon(checked ? boxChecked : boxEmpty);
+    icon.classList.add("box");
+    return icon;
+  }
   protected override create(root: ShadowRoot) {
     this.#trigger.append(
       this.#triggerIcon,
+      h("span", { class: "ring", "aria-hidden": "true" }),
       this.#triggerText,
       h("span", { class: "chevron", "aria-hidden": "true" }),
     );
@@ -564,15 +720,30 @@ export class GwMenuButton extends GwElement {
           : null),
     );
     this.#popover.setAttribute("aria-label", this.heading || this.label);
+    this.#trigger.disabled = this.loading;
+    setAttribute(this.#trigger, "aria-busy", this.loading ? "true" : null);
     if (changed.has("items") || changed.has("empty")) {
       const items = Array.isArray(this.items) ? this.items : [];
+      // A checkbox's change re-renders the list with the menu open, so focus
+      // goes back to the item that had it
+      const focused = this.shadowRoot?.activeElement;
+      const value =
+        focused instanceof HTMLButtonElement && this.#items.contains(focused)
+          ? focused.value
+          : undefined;
       this.#items.replaceChildren(
         ...(items.length === 0
           ? [h("p", { class: "empty", role: "none" }, this.empty)]
-          : items.flatMap((item) => this.#renderItem(item, "item"))),
+          : this.#renderItems(items)),
       );
+      if (value !== undefined) {
+        this.#buttons.find((button) => button.value === value)?.focus();
+      }
     }
     if (changed.has("actions")) {

package/src/gw-option-list.ts CHANGED Viewed

@@ -181,14 +181,21 @@ export class GwOptionList extends GwElement {
       [role="option"] {
         font-size: var(--gw-font-size-s);
+        color: var(--gw-color-text-strong);
         cursor: pointer;
         border-radius: var(--gw-radius-control);
         transition: background-color var(--gw-motion-fast)
           var(--gw-motion-easing);
       }
+      /* Mixed from the text color, so the active row stands out on any
+         surface the list sits on, overlays included */
       [role="option"][data-active] {
-        background: var(--gw-color-fill-neutral-hovered);
+        background: color-mix(
+          in oklab,
+          transparent,
+          var(--gw-color-text-primary) 12%
+        );
       }
       [role="option"][aria-selected="true"] {
@@ -197,7 +204,7 @@ export class GwOptionList extends GwElement {
       [role="option"] > .icon {
         flex: none;
-        color: var(--gw-color-text-secondary);
+        color: var(--gw-color-text-primary);
       }
       [role="option"] > .check {

package/src/gw-theme-gallery.ts CHANGED Viewed

@@ -72,29 +72,23 @@ const closestWith = (start: Element, attribute: string) => {
 };
 /**
- * Themes in groups, in the order they come. A group with one theme joins the
- * others like it under "Other", last. With no groups, one unnamed group.
+ * Themes in groups, in the order they come. Themes with no group gather where
+ * the first of them came: with no heading when that's first, and under
+ * "Other" after a named group.
  */
 const grouped = (themes: readonly OptionItem[]) => {
-  if (!themes.some((theme) => theme.group)) return [["", themes] as const];
   const groups = new Map<string, OptionItem[]>();
   for (const theme of themes) {
-    const name = theme.group ?? other;
+    const name = theme.group ?? "";
     groups.set(name, [...(groups.get(name) ?? []), theme]);
   }
-  const own = [...groups].filter(
-    ([name, members]) => name !== other && members.length > 1,
-  );
-  const rest = themes.filter(
-    (theme) => !own.some(([name]) => name === theme.group),
+  return [...groups].map(
+    ([name, members], index) =>
+      [name === "" && index > 0 ? other : name, members] as const,
   );
-  return rest.length === 0 ? own : [...own, [other, rest] as const];
 };
 /**
@@ -102,8 +96,9 @@ const grouped = (themes: readonly OptionItem[]) => {
  * theme's colors: a rail, a panel and the status tones. For a settings page,
  * or inside `gw-theme-picker` with `gallery`.
  *
- * Themes with a `group` sit together under its name, and lone ones under
- * "Other", so a family's light and dark variants line up. Previews draw in
+ * Themes with a `group` sit together under its name, so a family's light and
+ * dark variants line up. Themes with none gather where the first of them
+ * comes: with no heading when that's first, and under "Other" after a family. Previews draw in
  * `mode`, or the mode of the page or themed container it sits in, from the
  * theme CSS already on the page, including a custom theme `pageTheme`
  * imported. Call `refresh()` after that CSS changes.
@@ -292,12 +287,6 @@ export class GwThemeGallery extends GwElement {
         color: var(--gw-color-text-strong);
       }
-      .name small {
-        font-size: var(--gw-font-size-xs);
-        font-weight: normal;
-        color: var(--gw-color-text-secondary);
-      }
       label:has(input:checked) .name {
         color: var(--gw-color-accent);
       }
@@ -393,7 +382,7 @@ export class GwThemeGallery extends GwElement {
     this.#modeRoot.disconnect();
   }
-  #card(theme: OptionItem, inOther: boolean) {
+  #card(theme: OptionItem) {
     const input = h("input", {
       type: "radio",
       name: this.#name,
@@ -440,12 +429,7 @@ export class GwThemeGallery extends GwElement {
       { part: "card" },
       input,
       preview,
-      h(
-        "span",
-        { class: "name", part: "name" },
-        theme.label,
-        inOther && theme.group ? h("small", {}, theme.group) : null,
-      ),
+      h("span", { class: "name", part: "name" }, theme.label),
       h("span", { class: "check" }, createIcon(checkIcon)),
     );
@@ -472,7 +456,7 @@ export class GwThemeGallery extends GwElement {
             "div",
             { class: "group" },
             name ? h("h3", { class: "group-name", part: "group" }, name) : null,
-            ...members.map((theme) => this.#card(theme, name === other)),
+            ...members.map((theme) => this.#card(theme)),
           ),
         ),
       );

package/src/gw-theme-picker.ts CHANGED Viewed

@@ -65,7 +65,8 @@ const moreIcon =
  * showing the mode in use, which steps to the next mode on each press, for an
  * app bar. `inline` lays every control out in place, in one wrapping row with
  * Reset and Import, for a footer or a settings page; set `justify-content` on
- * it to align the row. `modes` picks which modes it offers, such as
+ * it to align the row. With `gallery`, the cards take a row of their own
+ * under it. `modes` picks which modes it offers, such as
  * `light dark` without Auto.
  *
  * @element gw-theme-picker
@@ -148,6 +149,23 @@ export class GwThemePicker extends GwElement {
         margin-block-start: 0;
       }
+      /* The cards get a row of their own under the mode, Reset and Import */
+      :host([layout="inline"][gallery]) .controls {
+        display: contents;
+      }
+      :host([layout="inline"]) .gallery {
+        flex: 1 0 100%;
+        order: 1;
+        max-height: none;
+        overflow: visible;
+      }
+      :host([layout="inline"][gallery]) .status {
+        flex: 1 0 100%;
+        order: 2;
+      }
       .actions {
         display: flex;
         flex-wrap: wrap;