@threadlabs/looma 0.14.7 → 0.15.0

package/components/ui-grid/ui-grid.html

@@ -6,8 +6,10 @@
     <prop name="min" type="sm | md | lg"
     >The narrowest a column may get before the grid drops to fewer columns: sm is 12rem (also the default), md is 16rem, and lg is 20rem. The grid fits as many
       equal columns as its width allows, and a single column never overflows a narrower container.</prop>
+    <prop name="columns" type="integer"
+    >Maximum columns when there is room. Omit for no cap. The grid still drops columns as its container narrows; it never forces a fixed column count.</prop>
   </defs>
-  <div><slot></slot></div>
+  <div style:--_grid-column-cap="columns"><slot></slot></div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-grid-gap {
@@ -24,7 +26,20 @@
       --_grid-min: 12rem;
       display: grid;
       gap: var(--ui-grid-gap, var(--_grid-gap));
-      grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min, var(--_grid-min)), 100%), 1fr));
+      grid-template-columns:
+        repeat(
+        auto-fit,
+        minmax(
+          min(
+            max(
+              var(--ui-grid-min, var(--_grid-min)),
+              calc((100% - (max(1, var(--_grid-column-cap, 9999)) - 1) * var(--ui-grid-gap, var(--_grid-gap))) / max(1, var(--_grid-column-cap, 9999)))
+            ),
+            100%
+          ),
+          1fr
+        )
+      );
       min-inline-size: 0;
       max-inline-size: 100%;
       margin: 0;

package/components/ui-icon/ui-icon.html

@@ -15,10 +15,12 @@
         'book-user': [{ tag: 'path', d: 'M15 13a3 3 0 1 0-6 0' }, { tag: 'path', d: 'M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20' }, { tag: 'circle', cx: '12', cy: '8', r: '2' }],
         'braces': [{ tag: 'path', d: 'M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1' }, { tag: 'path', d: 'M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1' }],
         'calculator': [{ tag: 'rect', width: '16', height: '20', x: '4', y: '2', rx: '2' }, { tag: 'line', x1: '8', x2: '16', y1: '6', y2: '6' }, { tag: 'line', x1: '16', x2: '16', y1: '14', y2: '18' }, { tag: 'path', d: 'M16 10h.01' }, { tag: 'path', d: 'M12 10h.01' }, { tag: 'path', d: 'M8 10h.01' }, { tag: 'path', d: 'M12 14h.01' }, { tag: 'path', d: 'M8 14h.01' }, { tag: 'path', d: 'M12 18h.01' }, { tag: 'path', d: 'M8 18h.01' }],
+        'check': [{ tag: 'path', d: 'M20 6 9 17l-5-5' }],
         'chevron-down': [{ tag: 'path', d: 'm6 9 6 6 6-6' }],
         'chevron-left': [{ tag: 'path', d: 'm15 18-6-6 6-6' }],
         'chevron-right': [{ tag: 'path', d: 'm9 18 6-6-6-6' }],
         'circle-check': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'path', d: 'm9 12 2 2 4-4' }],
+        'circle-dot': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'circle', cx: '12', cy: '12', r: '1' }],
         'circle-x': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'path', d: 'm15 9-6 6' }, { tag: 'path', d: 'm9 9 6 6' }],
         'code-xml': [{ tag: 'path', d: 'm18 16 4-4-4-4' }, { tag: 'path', d: 'm6 8-4 4 4 4' }, { tag: 'path', d: 'm14.5 4-5 16' }],
         'columns': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M9 3v18' }, { tag: 'path', d: 'M15 3v18' }],
@@ -38,6 +40,7 @@
         'info': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'path', d: 'M12 16v-4' }, { tag: 'path', d: 'M12 8h.01' }],
         'italic': [{ tag: 'line', x1: '19', x2: '10', y1: '4', y2: '4' }, { tag: 'line', x1: '14', x2: '5', y1: '20', y2: '20' }, { tag: 'line', x1: '15', x2: '9', y1: '4', y2: '20' }],
         'layout-dashboard': [{ tag: 'rect', width: '7', height: '9', x: '3', y: '3', rx: '1' }, { tag: 'rect', width: '7', height: '5', x: '14', y: '3', rx: '1' }, { tag: 'rect', width: '7', height: '9', x: '14', y: '12', rx: '1' }, { tag: 'rect', width: '7', height: '5', x: '3', y: '16', rx: '1' }],
+        'link': [{ tag: 'path', d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' }, { tag: 'path', d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' }],
         'list': [{ tag: 'path', d: 'M3 5h.01' }, { tag: 'path', d: 'M3 12h.01' }, { tag: 'path', d: 'M3 19h.01' }, { tag: 'path', d: 'M8 5h13' }, { tag: 'path', d: 'M8 12h13' }, { tag: 'path', d: 'M8 19h13' }],
         'list-ordered': [{ tag: 'path', d: 'M11 5h10' }, { tag: 'path', d: 'M11 12h10' }, { tag: 'path', d: 'M11 19h10' }, { tag: 'path', d: 'M4 4h1v5' }, { tag: 'path', d: 'M4 9h2' }, { tag: 'path', d: 'M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02' }],
         'list-todo': [{ tag: 'path', d: 'M13 5h8' }, { tag: 'path', d: 'M13 12h8' }, { tag: 'path', d: 'M13 19h8' }, { tag: 'path', d: 'm3 17 2 2 4-4' }, { tag: 'rect', x: '3', y: '4', width: '6', height: '6', rx: '1' }],
@@ -65,7 +68,9 @@
         'truck': [{ tag: 'path', d: 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' }, { tag: 'path', d: 'M15 18H9' }, { tag: 'path', d: 'M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14' }, { tag: 'circle', cx: '17', cy: '18', r: '2' }, { tag: 'circle', cx: '7', cy: '18', r: '2' }],
         'underline': [{ tag: 'path', d: 'M6 4v6a6 6 0 0 0 12 0V4' }, { tag: 'line', x1: '4', x2: '20', y1: '20', y2: '20' }],
         'undo': [{ tag: 'path', d: 'M9 14 4 9l5-5' }, { tag: 'path', d: 'M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11' }],
+        'user-round': [{ tag: 'circle', cx: '12', cy: '8', r: '5' }, { tag: 'path', d: 'M20 21a8 8 0 0 0-16 0' }],
         'users': [{ tag: 'path', d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' }, { tag: 'path', d: 'M16 3.128a4 4 0 0 1 0 7.744' }, { tag: 'path', d: 'M22 21v-2a4 4 0 0 0-3-3.87' }, { tag: 'circle', cx: '9', cy: '7', r: '4' }],
+        'x': [{ tag: 'path', d: 'M18 6 6 18' }, { tag: 'path', d: 'm6 6 12 12' }],
       }[name]"
     ></computed>
   </defs>

package/components/ui-icon-button/ui-icon-button.html

@@ -1,7 +1,11 @@
+<link rel="component" href="../ui-spinner/ui-spinner.html">
 <template component="ui-icon-button" controller="./ui-icon-button.js">
   <defs>
     <prop name="disabled" type="boolean" default="false"
     >Disables the button, so it cannot be pressed or focused, and washes it out: the same shape, with less colour and contrast (--ui-disabled-filter).</prop>
+    <prop name="pending" type="boolean" default="false"
+    >Keeps the button focusable and named while work is in progress. It shows a spinner, states aria-disabled and aria-busy, and prevents activation until
+      cleared.</prop>
     <prop name="label" type="string">Accessible name for the icon.</prop>
     <prop name="size" type="sm | md | lg" default="md"
     >Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit
@@ -14,7 +18,10 @@
       the pointer comes near inside a ui-affordance-scope. Touch devices and the solid variant always show it.</prop>
     <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
   </defs>
-  <button :disabled="disabled" type="button" :aria-label="label"><slot></slot></button>
+  <button :disabled="disabled" type="button" :aria-label="label" :aria-disabled="{ true: 'true', false: null }[format('%s', pending)]" :aria-busy="pending">
+    <ui-spinner $if="pending" size="sm"></ui-spinner>
+    <span class="content"><slot></slot></span>
+  </button>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-icon-button-active-scale {
@@ -145,7 +152,7 @@
       padding: 0;
       margin: 0;
       border: 1px solid transparent;
-      border-radius: var(--ui-icon-button-radius, var(--ui-radius-md));
+      border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
       background: var(--ui-icon-button-surface, transparent);
       color: inherit;
       display: inline-flex;
@@ -231,24 +238,36 @@
       );
     }
 
-    :host:hover:enabled {
+    :host:hover:enabled:not([aria-disabled="true"]) {
       /* Derived from the text colour so the ghost hover shows on any background. */
       background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
       color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
     }
 
-    :host-state([variant="outline"]):hover:enabled {
+    :host-state([variant="outline"]):hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
     }
 
-    :host-state([variant="solid"]):hover:enabled {
+    :host-state([variant="solid"]):hover:enabled:not([aria-disabled="true"]) {
       background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
     }
 
-    :host:active:enabled {
+    :host:active:enabled:not([aria-disabled="true"]) {
       transform: scale(var(--ui-icon-button-active-scale, 0.96));
     }
 
+    :host-state([pending]) {
+      cursor: progress;
+    }
+
+    .content {
+      display: contents;
+    }
+
+    :host-state([pending]) .content {
+      display: none;
+    }
+
     :host:focus-visible {
       outline: none;
       box-shadow: var(--ui-focus-halo);

package/components/ui-icon-button/ui-icon-button.js

@@ -1,7 +1,17 @@
 // Marks an anticipatory button for the enclosing ui-affordance-scope, which reveals it on proximity.
 export default function controller(host) {
-  return host.effect(() => {
+  const stop = host.effect(() => {
     if (host.state.anticipatory) host.element.setAttribute("data-ui-affordance", "button");
     else host.element.removeAttribute("data-ui-affordance");
   });
+  const onClick = (event) => {
+    if (!host.state.pending) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  host.element.addEventListener("click", onClick, true);
+  return () => {
+    stop();
+    host.element.removeEventListener("click", onClick, true);
+  };
 }

package/components/ui-input/ui-input.html

@@ -77,7 +77,7 @@
       appearance: none;
       border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) solid
         var(--ui-input-border, var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong))));
-      border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-radius-md)));
+      border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md))));
       background: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
       color: var(--ui-text-primary);
       font: inherit;
@@ -135,7 +135,7 @@
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :host[aria-invalid="true"],
     :host:user-invalid {
-      border-color: var(--ui-input-invalid-border, var(--_ui-default-input-invalid-border, var(--ui-danger-solid)));
+      border-color: var(--ui-input-invalid-border, var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))));
     }
 
     :host:is([aria-invalid="true"], :user-invalid):focus-visible {
@@ -144,7 +144,7 @@
         var(
           --_ui-default-input-invalid-focus-shadow,
           var(--ui-control-inset),
-          0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+          0 0 0 3px color-mix(in srgb, var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
         )
       );
     }

package/components/ui-input-group/ui-input-group.html

@@ -9,6 +9,18 @@
     <span class="action"><slot name="action"></slot></span>
   </div>
   <style>
+    @property --ui-input-group-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-group-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-input-group-invalid-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
     /* An input with fixed text before or after it, such as a domain after a site's name
        ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
        focus ring around the input and its affixes together; the input inside drops its own through
@@ -41,7 +53,7 @@
       min-block-size: var(--ui-control-size-md);
       /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       box-shadow: var(--ui-control-inset);
       overflow: hidden;
@@ -79,13 +91,15 @@
     }
 
     :host:has([aria-invalid="true"], :user-invalid) {
-      border-color: var(--ui-danger-solid);
+      border-color: var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
     }
 
     :host:has(input:is([aria-invalid="true"], :user-invalid):focus-visible) {
-      box-shadow:
+      box-shadow: var(
+        --ui-input-group-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+        0 0 0 3px color-mix(in srgb, var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+      );
     }
 
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */

package/components/ui-listbox/ui-listbox.html

@@ -0,0 +1,81 @@
+<template component="ui-listbox" controller="./ui-listbox.js">
+  <defs>
+    <prop name="rows" type="number" default="5">The number of option rows visible at once. Use at least two.</prop>
+    <prop name="multiple" type="boolean" default="false">Allows several options to be selected with native keyboard and pointer behavior.</prop>
+    <prop name="value" type="string">The initial or externally set single selection. Authored selected options work when it is omitted.</prop>
+    <prop name="values" type="list(string)">The initial or externally set selections in multiple mode. Authored selected options work when it is omitted.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents selection and form submission.</prop>
+    <prop name="required" type="boolean" default="false">Requires at least one selection for form validation.</prop>
+    <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
+  </defs>
+  <select :size="rows" :multiple="multiple" :disabled="disabled" :required="required" :aria-invalid="invalid"><slot></slot></select>
+  <style>
+    @property --ui-listbox-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-listbox-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-listbox-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-listbox-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-listbox-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :host {
+      box-sizing: border-box;
+      display: block;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-min-block-size);
+      margin: 0;
+      padding: var(--ui-space-1);
+      border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
+      border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+      background: var(--ui-listbox-surface, var(--ui-control-surface));
+      color: var(--ui-text-primary);
+      color-scheme: light dark;
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      box-shadow: var(--ui-control-inset);
+    }
+
+    :host option,
+    :host optgroup {
+      padding: var(--ui-space-2);
+      font: inherit;
+    }
+
+    :host:focus-visible {
+      border-color: var(--ui-control-focus);
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: 2px;
+      box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
+    }
+
+    :host[aria-invalid="true"],
+    :host:user-invalid {
+      border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
+    }
+
+    :host:disabled {
+      background: var(--ui-control-surface-disabled);
+      color: var(--ui-disabled-text);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-listbox/ui-listbox.js

@@ -0,0 +1,27 @@
+// Keep externally supplied selections in sync when options arrive after the listbox upgrades.
+// Without value or values, the native select owns selection, keyboard behavior, and form reset.
+export default function controller(host) {
+  const select = host.element;
+  const apply = () => {
+    if (host.state.multiple) {
+      if (host.state.values === undefined || host.state.values === null) return;
+      const values = new Set(host.state.values.map(String));
+      for (const option of select.options) {
+        option.defaultSelected = values.has(option.value);
+        option.selected = values.has(option.value);
+      }
+      return;
+    }
+    if (host.state.value === undefined || host.state.value === null) return;
+    const value = String(host.state.value);
+    for (const option of select.options) option.defaultSelected = option.value === value;
+    if (select.value !== value) select.value = value;
+  };
+  const observer = new MutationObserver(apply);
+  observer.observe(select, { childList: true, subtree: true });
+  const stop = host.effect(apply);
+  return () => {
+    stop();
+    observer.disconnect();
+  };
+}

package/components/ui-menu/ui-menu.html

@@ -5,7 +5,7 @@
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the menu.</prop>
     <prop name="placement" type="string" default="bottom-start">Positions an associated menu relative to its trigger.</prop>
     <state name="internalOpen" :value="false"></state>
-    <event name="select" type="object({ value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="select" type="object({ value: string, checked?: boolean, trigger: keyboard | pointer | programmatic })"></event>
     <event name="open" type="object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })"></event>
     <event
       name="close"
@@ -15,6 +15,22 @@
   <div role="menu" aria-orientation="vertical"><div class="surface"><slot></slot></div></div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-menu-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-menu-shadow {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-menu-viewport-gap {
       syntax: "*";
       inherits: false;
@@ -32,6 +48,10 @@
     }
 
     :host {
+      --_ui-menu-surface: var(--ui-menu-surface);
+      --_ui-menu-border: var(--ui-menu-border);
+      --_ui-menu-radius: var(--ui-menu-radius);
+      --_ui-menu-shadow: var(--ui-menu-shadow);
       /* A menu nested in a compact one starts again from its own density. */
       --_ui-default-menu-item-padding-block: initial;
       --_ui-default-menu-item-padding-inline: initial;
@@ -58,14 +78,22 @@
       box-sizing: border-box;
       max-inline-size: inherit;
       padding: var(--ui-space-1);
-      background: var(--ui-surface-elevated);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-lg);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      background: var(--_ui-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--_ui-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      box-shadow: var(--_ui-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       max-block-size: inherit;
       overflow: auto;
     }
 
+    .surface hr {
+      align-self: stretch;
+      block-size: 0;
+      margin: var(--ui-space-1) 0;
+      border: 0;
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
     :host:not(:host-state([internalOpen])) {
       display: none;
     }

package/components/ui-menu/ui-menu.js

@@ -1,8 +1,9 @@
 import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
+import { menuItemFrom, menuItems, navigateMenu } from "../shared/menu-navigation.js";
 
 function triggerFor(event) {
   if (event instanceof KeyboardEvent) return "keyboard";
-  if (event instanceof MouseEvent || event instanceof PointerEvent) return "pointer";
+  if (event instanceof MouseEvent || event instanceof PointerEvent) return event.detail === 0 ? "keyboard" : "pointer";
   return "programmatic";
 }
 
@@ -14,7 +15,7 @@ export default function controller(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
-  const items = () => Array.from(element.querySelectorAll('[role="menuitem"]'));
+  const items = () => menuItems(element);
   let anchor = null;
   let surface = null;
   let lastFor;
@@ -28,7 +29,7 @@ export default function controller(host) {
     else {
       host.state.internalOpen = true;
       host.dispatch("open", { open: true, reason: "action", trigger });
-      requestAnimationFrame(() => items().find((item) => !disabled(item))?.focus());
+      requestAnimationFrame(() => items()[0]?.focus());
     }
   };
   const close = (reason, trigger) => {
@@ -73,29 +74,34 @@ export default function controller(host) {
   const select = (item, trigger) => {
     if (!item || disabled(item)) return;
     const value = item.getAttribute("data-value") ?? item.getAttribute("value") ?? "";
+    if (item.getAttribute("role") !== "menuitem") {
+      const detail = { trigger, checked: undefined };
+      item.dispatchEvent(new CustomEvent("ui-menu-item-activate", { detail }));
+      host.dispatch("select", { value, checked: detail.checked, trigger });
+      return;
+    }
     host.dispatch("select", { value, trigger });
     host.dispatch("close", { open: false, reason: "action", trigger });
     host.state.internalOpen = false;
   };
-  const onClick = (event) => select(event.target.closest?.('[role="menuitem"]'), triggerFor(event));
+  const onClick = (event) => select(menuItemFrom(event.target), triggerFor(event));
   const onKeydown = (event) => {
     if (event.key === "Escape") {
       event.preventDefault();
       requestTopOverlayClose(document, "escape", "keyboard");
       return;
     }
-    const enabled = items().filter((item) => !disabled(item));
-    const target = event.target.closest?.('[role="menuitem"]');
-    const index = target ? enabled.indexOf(target) : -1;
+    const target = menuItemFrom(event.target);
     if (["Enter", " "].includes(event.key)) {
-      if (index >= 0) {
+      if (!target || disabled(target)) return;
+      if (target.localName === "a") {
+        if (event.key === " ") { event.preventDefault(); target.click(); }
+      } else {
         event.preventDefault();
         select(target, "keyboard");
       }
-    } else if (["ArrowDown", "ArrowUp"].includes(event.key) && enabled.length) {
-      event.preventDefault();
-      const next = event.key === "ArrowDown" ? (index < 0 ? 0 : Math.min(index + 1, enabled.length - 1)) : (index <= 0 ? enabled.length - 1 : index - 1);
-      enabled[next]?.focus();
+    } else {
+      navigateMenu(event, element);
     }
   };
   element.addEventListener("click", onClick);

package/components/ui-menu-group/ui-menu-group.html

@@ -0,0 +1,27 @@
+<template component="ui-menu-group">
+  <defs>
+    <prop name="label" type="string" default="">Visible heading and accessible name for this group of menu items.</prop>
+  </defs>
+  <div role="group" :aria-label="label">
+    <div class="heading" $if="label" $value="label"></div>
+    <slot></slot>
+  </div>
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-inline-size: 0;
+    }
+
+    .heading {
+      padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-semibold);
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-menu-item/ui-menu-item.html

@@ -1,12 +1,46 @@
-<template component="ui-menu-item">
+<link rel="component" href="../ui-icon/ui-icon.html">
+<template component="ui-menu-item" controller="./ui-menu-item.js">
   <defs>
     <prop name="disabled" type="boolean" default="false"
     >Makes the item unavailable: it is faded, skipped by the arrow keys, and choosing it does nothing. It stays visible and is announced as disabled.</prop>
     <prop name="value" type="string" default=""
     >The value the enclosing menu reports in its select event when this item is chosen. Give each item a distinct value so one handler can tell them
       apart.</prop>
+    <prop name="href" type="string" default="">A destination makes an action item a real link, with native navigation and link context actions.</prop>
+    <prop name="type" type="action | checkbox | radio" default="action"
+    >An action closes its menu; a checkbox toggles, and a radio chooses one item within its nearest Menu Group. Checkable items keep the menu open.</prop>
+    <prop name="checked" type="boolean" default="false">Initial or externally controlled checked state of a checkbox or radio item.</prop>
+    <state name="internalChecked" :value="false"></state>
+    <event name="change" type="object({ checked: boolean, value: string, type: checkbox | radio, trigger: keyboard | pointer | programmatic })"></event>
   </defs>
-  <div role="menuitem" tabindex="-1" :aria-disabled="disabled" :data-value="value"><slot></slot></div>
+  <template $match>
+    <a
+      $when="href and type = 'action'"
+      role="menuitem"
+      tabindex="-1"
+      :aria-disabled="disabled"
+      :data-value="value"
+      :href="{ true: null, false: href }[format('%s', disabled)]"
+    >
+      <span class="label"><slot></slot></span>
+      <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
+    </a>
+    <div
+      $else
+      :role="{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]"
+      :aria-checked="{ action: null, checkbox: internalChecked, radio: internalChecked }[type]"
+      tabindex="-1"
+      :aria-disabled="disabled"
+      :data-value="value"
+    >
+      <span class="indicator" aria-hidden="true">
+        <ui-icon $if="type = 'checkbox' and internalChecked" name="check"></ui-icon>
+        <ui-icon $if="type = 'radio' and internalChecked" name="circle-dot"></ui-icon>
+      </span>
+      <span class="label"><slot></slot></span>
+      <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
+    </div>
+  </template>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-menu-item-font-size {
@@ -35,7 +69,9 @@
     }
 
     :host {
-      display: block;
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-5);
       box-sizing: border-box;
       width: 100%;
       padding: var(--ui-menu-item-padding-block, var(--_ui-default-menu-item-padding-block, var(--ui-space-2)))
@@ -45,19 +81,44 @@
       color: var(--ui-text-primary);
       font-size: var(--ui-menu-item-font-size, var(--_ui-default-menu-item-font-size, var(--ui-font-size-md)));
       font-weight: var(--ui-font-medium);
+      text-decoration: none;
       cursor: pointer;
       outline: none;
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
-    /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
-     * Trimming applies to block containers, so the box is a block with centred content. */
+    .label {
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .indicator {
+      display: inline-flex;
+      place-items: center;
+      flex: none;
+      inline-size: var(--ui-icon-size-md);
+      color: var(--ui-accent-solid);
+    }
+
+    :host-state([type="action"]) .indicator {
+      display: none;
+    }
+
+    .shortcut {
+      margin-inline-start: auto;
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-normal);
+    }
+
+    .shortcut:empty {
+      display: none;
+    }
+
+    /* Keep the text row at the shared control height where cap trimming is available. */
     @supports (text-box-trim: trim-both) {
       :host {
-        display: block;
         min-block-size: var(--ui-menu-item-min-block-size, var(--ui-control-size-md, 2.5rem));
-        align-content: center;
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
@@ -67,11 +128,22 @@
       background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
     }
 
+    :host:focus-visible {
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: -2px;
+    }
+
     :host[aria-disabled="true"] {
       opacity: 0.6;
       cursor: not-allowed;
     }
 
+    @media (forced-colors: active) {
+      :host:focus-visible {
+        outline-color: Highlight;
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;