@threadlabs/looma 0.14.8 → 0.15.1

package/components/ui-checkbox/ui-checkbox.html

@@ -3,6 +3,7 @@
     <prop name="checked" type="boolean" default="false"
     >Whether the checkbox is checked initially or when set externally. A form reset returns it to this.</prop>
     <prop name="disabled" type="boolean" default="false">Disables the native checkbox, so it cannot be toggled or focused.</prop>
+    <prop name="invalid" type="boolean" default="false">Exposes an externally validated error and styles the checkbox with the field danger colour.</prop>
     <prop name="indeterminate" type="boolean" default="false"
     >Shows the mixed state, for a checkbox that summarises a group whose items are partly checked. It sets the native indeterminate property, which is
       independent of checked, so update it as the group changes.</prop>
@@ -28,6 +29,7 @@
       .checked="internalChecked"
       .indeterminate="indeterminate"
       :disabled="disabled"
+      :aria-invalid="invalid"
       :required="required"
       :name="name"
       :value="value"
@@ -43,6 +45,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-checkbox-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-checkbox-size {
       syntax: "*";
       inherits: false;
@@ -51,6 +57,7 @@
     :host {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-checkbox-size: var(--ui-checkbox-size);
+      --_ui-checkbox-invalid-border: var(--ui-checkbox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
 
       display: inline-flex;
       align-items: flex-start;
@@ -148,6 +155,10 @@
       outline-offset: 2px;
     }
 
+    :host-state([invalid]) input {
+      border-color: var(--_ui-checkbox-invalid-border);
+    }
+
     :host-state([disabled]) {
       color: var(--ui-disabled-text);
       cursor: not-allowed;

package/components/ui-cluster/ui-cluster.html

@@ -9,6 +9,10 @@
     <prop name="justify" type="start | center | end | between"
     >Where items sit along each row: start (the default), center, end, or between, which pushes the first and last items to the ends of the row and spreads the
       spare space between them, as for a title with its actions.</prop>
+    <prop name="wrap" type="wrap | nowrap"
+    >Whether items move onto a new row when they run out of space: wrap (the default) or nowrap, which keeps them on one row at their own sizes. Use nowrap for
+      a small group that must read as one unit, such as a meter and its value in a table cell, so the cell grows to fit it; a whole row of actions should keep
+      wrapping so it fits narrow screens.</prop>
   </defs>
   <div><slot></slot></div>
   <style>
@@ -62,6 +66,9 @@
     :host-state([justify="between"]) {
       justify-content: space-between;
     }
+    :host-state([wrap="nowrap"]) {
+      flex-wrap: nowrap;
+    }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {

package/components/ui-combobox/ui-combobox.html

@@ -50,6 +50,11 @@
     <prop name="required" type="boolean" default="false"
     >Requires a value: adds an asterisk to the label, marks the input required for native form validation, and makes validation report "A value is required."
       when the field is left empty. In multiple mode a chosen item satisfies it, whatever is left in the input.</prop>
+    <prop name="invalid" type="boolean" default="false"
+    >Exposes an externally validated error on the input and field. It remains until the consumer clears it, independently of native validation.</prop>
+    <prop name="openOnFocus" type="boolean" default="false">Opens suggestions when the input receives focus, before typing.</prop>
+    <prop name="loading" type="boolean" default="false"
+    >Marks the suggestion list busy while the consumer loads options. It announces loading and suppresses the empty state and create offer until cleared.</prop>
     <prop name="size" type="sm | md | lg" default="md"
     >Field height, padding, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by
       default) with smaller text, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller with roomier padding.
@@ -81,7 +86,6 @@
       :value="[]"
     ></state>
     <state name="active" :value="-1"></state>
-    <state name="loading" :value="false"></state>
     <state name="helpOpen" :value="false"></state>
     <state name="lookupError" :value="''"></state>
     <state
@@ -163,8 +167,8 @@
           autocomplete="off"
           :aria-controls="format('%s-listbox', uid)"
           :aria-expanded="expanded"
-          :aria-invalid="validationStatus = 'error'"
-          :aria-busy="validationStatus = 'pending'"
+          :aria-invalid="invalid or validationStatus = 'error'"
+          :aria-busy="loading or validationStatus = 'pending'"
           .value="display"
           :placeholder="placeholder"
           :disabled="disabled"
@@ -262,6 +266,7 @@
         >
         </div>
         <div $if="message" class="message" $value="message"></div>
+        <div $if="not loading and not rows[0] and not creatable and not lookupError" class="message"><slot name="empty">No suggestions.</slot></div>
       </div>
       <slot name="footer"></slot>
     </div>
@@ -313,6 +318,30 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-combobox-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-popup-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-popup-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-popup-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-combobox-popup-shadow {
+      syntax: "*";
+      inherits: false;
+    }
 
     :host {
       /* Hooks do not inherit, so the parts below read them from the root. */
@@ -326,6 +355,12 @@
       --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
       --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
       --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
+      --_ui-combobox-radius: var(--ui-combobox-radius);
+      --_ui-combobox-invalid-border: var(--ui-combobox-invalid-border);
+      --_ui-combobox-popup-surface: var(--ui-combobox-popup-surface);
+      --_ui-combobox-popup-border: var(--ui-combobox-popup-border);
+      --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
+      --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
       display: grid;
       gap: var(--ui-space-1);
@@ -352,7 +387,7 @@
       display: flex;
       min-inline-size: 0;
       border: 1px solid var(--ui-control-border, var(--ui-border-default));
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
@@ -470,8 +505,9 @@
     .field:has(input:disabled) {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     }
-    :host-state([validationStatus="error"]) .field {
-      border-color: var(--ui-danger-solid, var(--ui-accent-active));
+    :host-state([validationStatus="error"]) .field,
+    :host-state([invalid]) .field {
+      border-color: var(--_ui-combobox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active))));
     }
     .popup {
       box-sizing: border-box;
@@ -481,11 +517,11 @@
       overflow: auto;
       margin: 0;
       padding: var(--ui-space-1);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-md);
-      background: var(--ui-surface-elevated);
+      border: 1px solid var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
+      background: var(--_ui-combobox-popup-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      box-shadow: var(--_ui-combobox-popup-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
     [hidden] {
       display: none;

package/components/ui-combobox/ui-combobox.js

@@ -110,7 +110,6 @@ export default function controller(host) {
   const cancelLookup = () => {
     lookup?.abort();
     lookup = undefined;
-    host.state.loading = false;
   };
   const close = () => {
     host.state.expanded = false;
@@ -167,7 +166,6 @@ export default function controller(host) {
       // the group-name list below. Concatenating a Map iterator produces one
       // iterator row instead of the option objects it contains.
       host.state.rows = Array.from(groups.values()).flat();
-      host.state.loading = false;
       // When nothing matches what was typed, the offer to create it is the only choice, so it is
       // the one Enter makes, and it is highlighted as such.
       if (query && !host.state.rows.some((row) => !row.disabled) && canCreate()) host.state.active = host.state.rows.length;
@@ -385,8 +383,7 @@ export default function controller(host) {
     host.state.createIndex = rows.length;
     // What a named combobox submits in single mode: the value, never the label the field shows.
     host.state.submitted = String(host.state.selected ?? (host.state.allowFreeText ? host.state.raw ?? "" : ""));
-    host.state.message = host.state.loading ? "Loading suggestions…"
-      : host.state.lookupError || (!rows.length && !host.state.creatable ? "No suggestions." : "");
+    host.state.message = host.state.loading ? "Loading suggestions…" : host.state.lookupError || "";
     const validation = host.state.validation ?? { status: "pristine", issues: [] };
     host.state.validationStatus = validation.status;
     const status = host.state.loading ? "Loading suggestions…" : host.state.lookupError || (host.state.expanded ? `${rows.length} suggestions available.` : "");
@@ -455,6 +452,9 @@ export default function controller(host) {
     if (!host.state.multiple && config().allowFreeText && host.state.selected === null) commit(null, host.state.raw, null, "free-entry", "keyboard");
     void validateCurrent();
   };
+  const onFocusin = (event) => {
+    if (event.target === input && host.state.openOnFocus && !host.state.expanded) open();
+  };
   const onCompositionstart = (event) => { if (event.target === input) composing = true; };
   const onCompositionend = (event) => { if (event.target === input) { composing = false; onInput(new InputEvent("input")); } };
   const onTooltipOpen = (event) => { if (event.target.closest?.('[role="tooltip"]')) host.state.helpOpen = true; };
@@ -482,7 +482,7 @@ export default function controller(host) {
 
   const api = { get input() { return input; }, validate: validateCurrent };
   instances.set(element, api);
-  const listeners = { input: onInput, keydown: onKeydown, click: onClick, pointerdown: onPointerdown, focusout: onFocusout, compositionstart: onCompositionstart, compositionend: onCompositionend, open: onTooltipOpen, close: onTooltipClose };
+  const listeners = { input: onInput, keydown: onKeydown, click: onClick, pointerdown: onPointerdown, focusin: onFocusin, focusout: onFocusout, compositionstart: onCompositionstart, compositionend: onCompositionend, open: onTooltipOpen, close: onTooltipClose };
   for (const [name, listener] of Object.entries(listeners)) element.addEventListener(name, listener);
   // Authored options can change after mount (renamed, replaced, or arriving late). A selected value
   // then shows its current label, unless the user is editing the text.

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

@@ -11,11 +11,27 @@
       name="close"
       type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
     ></event>
-    <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>
   </defs>
   <span><div class="menu" $ref="menu" role="menu" aria-orientation="vertical"><slot></slot></div></span>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-context-menu-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-context-menu-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-context-menu-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-context-menu-shadow {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-context-menu-z-index {
       syntax: "*";
       inherits: false;
@@ -23,6 +39,10 @@
 
     :host {
       /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-context-menu-surface: var(--ui-context-menu-surface);
+      --_ui-context-menu-border: var(--ui-context-menu-border);
+      --_ui-context-menu-radius: var(--ui-context-menu-radius);
+      --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
       --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
 
       display: contents;
@@ -36,10 +56,10 @@
       flex-direction: column;
       box-sizing: border-box;
       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-context-menu-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      box-shadow: var(--_ui-context-menu-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
       outline: 0;
       overflow: auto;
       z-index: var(--_ui-context-menu-z-index, 1000);
@@ -53,6 +73,14 @@
         overlay var(--ui-motion-fast) allow-discrete;
     }
 
+    .menu hr {
+      align-self: stretch;
+      block-size: 0;
+      margin: var(--ui-space-1) 0;
+      border: 0;
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
     .menu:popover-open {
       opacity: 1;
       transform: translateY(0) scale(1);

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

@@ -1,4 +1,5 @@
 import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
+import { menuItemFrom, menuItems, navigateMenu } from "../shared/menu-navigation.js";
 
 function disabled(item) {
   return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true";
@@ -17,7 +18,7 @@ export default function controller(host) {
   let lastOpenProp = Boolean(host.state.open);
   host.state.internalOpen = lastOpenProp;
 
-  const items = () => Array.from(element.querySelectorAll('[role="menuitem"]')).filter((item) => !disabled(item));
+  const items = () => menuItems(element);
   const focusFirst = () => requestAnimationFrame(() => items()[0]?.focus());
   const targetEvents = { contextmenu: onContextMenu, keydown: onTargetKeydown, pointerdown: onPointerdown, pointerup: endPress, pointercancel: endPress };
   const detach = () => {
@@ -101,33 +102,41 @@ export default function controller(host) {
     clearTimeout(press?.timer);
     press = null;
   }
+  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 });
+    close("action", trigger);
+  };
   const onKeydown = (event) => {
     if (!host.state.internalOpen) return;
     if (event.key === "Escape") {
       event.preventDefault();
       requestTopOverlayClose(document, "escape", "keyboard");
     } else if (["Enter", " "].includes(event.key)) {
-      const item = event.target.closest?.('[role="menuitem"]');
+      const item = menuItemFrom(event.target);
       if (!item || disabled(item)) return;
-      event.preventDefault();
-      host.dispatch("select", { value: item.getAttribute("data-value") ?? item.getAttribute("value") ?? "", trigger: "keyboard" });
-      close("action", "keyboard");
-    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      const enabled = items();
-      if (!enabled.length) return;
-      event.preventDefault();
-      const index = enabled.indexOf(event.target.closest?.('[role="menuitem"]'));
-      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();
+      if (item.localName === "a") {
+        if (event.key === " ") { event.preventDefault(); item.click(); }
+      } else {
+        event.preventDefault();
+        select(item, "keyboard");
+      }
+    } else {
+      navigateMenu(event, element);
     }
   };
   const onClick = (event) => {
-    const item = event.target.closest?.('[role="menuitem"]');
+    const item = menuItemFrom(event.target);
     if (!item || disabled(item)) return;
-    host.dispatch("select", { value: item.getAttribute("data-value") ?? item.getAttribute("value") ?? "", trigger: "pointer" });
-    close("action", "pointer");
+    const trigger = event.detail === 0 ? "keyboard" : "pointer";
+    select(item, trigger);
   };
   resolveTargets();
   if (menuSurface) surface = createAnchoredSurface(menuSurface, { anchor: target, placement: "bottom-start" });

package/components/ui-dialog/ui-dialog.html

@@ -1,13 +1,19 @@
 <template component="ui-dialog" controller="./ui-dialog.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the dialog is open initially or when set externally.</prop>
-    <prop name="modal" type="boolean" default="false">Open in the top layer with a backdrop and make the rest of the page inert.</prop>
-    <prop name="dismissible" type="boolean" default="false"
-    >Also close on Escape and on a pointer press outside the dialog. The header close button and actions always close it.</prop>
+    <prop name="modeless" type="boolean" default="false">Open without a backdrop or making the rest of the page inert; dialogs are modal by default.</prop>
+    <prop name="closedby" type="any | closerequest | none" default="closerequest"
+    >Which user close requests work: any includes outside presses, closerequest includes Escape, and none requires an action.</prop>
+    <prop name="alert" type="boolean" default="false">Use alert dialog semantics and require an explicit action instead of the header close button.</prop>
+    <prop name="size" type="sm | md | lg | fullscreen" default="md">Choose a compact, standard, wide, or viewport-filling dialog.</prop>
     <prop name="label" type="string">Visible title in the dialog header; also its accessible name.</prop>
     <prop name="for" type="string" default="">ID of the control that opens the dialog.</prop>
     <state name="internalOpen" :value="false"></state>
     <state name="accessibleLabel" :value="'Dialog'"></state>
+    <event
+      name="open"
+      type="object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })"
+    ></event>
     <event
       name="close"
       type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
@@ -27,6 +33,22 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-dialog-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-dialog-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-dialog-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-dialog-shadow {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-dialog-max-width {
       syntax: "*";
       inherits: false;
@@ -45,7 +67,7 @@
       box-sizing: border-box;
       inline-size: min(
         calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
-        var(--ui-dialog-max-width, 440px)
+        var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
       );
       max-inline-size: none;
       max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
@@ -53,10 +75,10 @@
       padding: 0;
       overflow: hidden;
       flex-direction: column;
-      background: var(--ui-surface-elevated);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-dialog);
-      box-shadow: var(--ui-elevation-dialog, var(--ui-shadow-xl));
+      background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
+      box-shadow: var(--ui-dialog-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
       visibility: hidden;
       pointer-events: none;
       opacity: 0;
@@ -78,6 +100,27 @@
       animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }
 
+    :host-state([size="sm"]) {
+      --_ui-dialog-size: 360px;
+    }
+
+    :host-state([size="lg"]) {
+      --_ui-dialog-size: 640px;
+    }
+
+    :host-state([size="fullscreen"]) {
+      inset: 0;
+      inline-size: 100%;
+      block-size: 100dvh;
+      max-block-size: none;
+      margin: 0;
+      border-radius: var(--ui-dialog-radius, 0);
+    }
+
+    :host-state([alert]) .close {
+      display: none;
+    }
+
     /* Header and actions stay pinned; only the body scrolls when content is long. */
     header {
       display: flex;

package/components/ui-dialog/ui-dialog.js

@@ -13,16 +13,21 @@ export default function controller(host) {
   let trigger = null;
   let lastFor = "";
   let lastExternalOpen = Boolean(host.state.open);
+  let lastOpen;
   host.state.internalOpen = lastExternalOpen;
 
   const requestClose = (reason, input) => {
     host.state.internalOpen = false;
+    lastOpen = false;
     host.dispatch("close", { open: false, reason, trigger: input });
   };
   const closeButton = host.refs.close;
   const onCloseClick = (event) => requestClose("action", event.detail === 0 ? "keyboard" : "pointer");
-  const onTriggerClick = () => {
+  const onTriggerClick = (event) => {
+    if (host.state.internalOpen) return;
     host.state.internalOpen = true;
+    lastOpen = true;
+    host.dispatch("open", { open: true, reason: "action", trigger: event.detail === 0 ? "keyboard" : "pointer" });
   };
   const ids = createIdResolver(document, () => {
     lastFor = null;
@@ -49,30 +54,46 @@ export default function controller(host) {
     }
     host.state.accessibleLabel = inferredLabel(element, host.state.label);
     dialog?.setAttribute("aria-label", String(host.state.accessibleLabel));
+    if (host.state.alert) dialog?.setAttribute("role", "alertdialog");
+    else dialog?.removeAttribute("role");
     syncTrigger();
     const open = Boolean(host.state.internalOpen);
+    const modal = !host.state.modeless;
+    const requestedClosedBy = String(host.state.closedby ?? "closerequest");
+    const closedBy = host.state.alert && requestedClosedBy === "any" ? "closerequest" : requestedClosedBy;
     trigger?.setAttribute("aria-expanded", String(open));
     if (!dialog) return;
+    dialog.setAttribute("closedby", closedBy);
     if (open) {
+      if (dialog.open && dialog.matches(":modal") !== modal) dialog.close();
       if (!dialog.open) {
-        if (host.state.modal) dialog.showModal();
+        if (modal) dialog.showModal();
         else dialog.show();
       }
-      openOverlay({ id: overlayId, modal: Boolean(host.state.modal), element, dismissible: Boolean(host.state.dismissible), requestClose });
+      openOverlay({ id: overlayId, modal, element, dismissible: true, canClose: (reason) => reason === "light-dismiss" ? closedBy === "any" : reason !== "escape" || closedBy !== "none", requestClose });
     } else {
       if (dialog.open) dialog.close();
       closeOverlay(document, overlayId);
     }
+    if (lastOpen !== undefined && lastOpen !== open) {
+      host.dispatch(open ? "open" : "close", { open, reason: "programmatic", trigger: "programmatic" });
+    }
+    lastOpen = open;
   };
-  const onClose = () => {
-    if (!host.state.internalOpen) return;
+  const onClose = (event) => {
+    if (event instanceof CustomEvent) return;
+    // Consumers receive one Looma close event with a reason, not an additional native close event.
+    event.stopImmediatePropagation();
+    if (dialog.open || !host.state.internalOpen) return;
     host.state.internalOpen = false;
+    lastOpen = false;
     closeOverlay(document, overlayId);
     host.dispatch("close", { open: false, reason: "programmatic", trigger: "programmatic" });
   };
   const onKeydown = (event) => {
     if (event.key === "Escape") {
       event.preventDefault();
+      event.stopPropagation();
       requestTopOverlayClose(document, "escape", "keyboard");
     }
   };
@@ -85,7 +106,7 @@ export default function controller(host) {
     if (label !== host.state.accessibleLabel) host.state.accessibleLabel = label;
   });
   observer.observe(element, { childList: true, subtree: true, characterData: true });
-  dialog?.addEventListener("close", onClose);
+  dialog?.addEventListener("close", onClose, true);
   dialog?.addEventListener("cancel", onCancel);
   closeButton?.addEventListener("click", onCloseClick);
   element.addEventListener("keydown", onKeydown);
@@ -95,7 +116,7 @@ export default function controller(host) {
     stop();
     ids.stop();
     observer.disconnect();
-    dialog?.removeEventListener("close", onClose);
+    dialog?.removeEventListener("close", onClose, true);
     dialog?.removeEventListener("cancel", onCancel);
     closeButton?.removeEventListener("click", onCloseClick);
     trigger?.removeEventListener("click", onTriggerClick);

package/components/ui-disclosure/ui-disclosure.html

@@ -7,8 +7,15 @@
     >Whether the disclosure is open initially or when set externally. The trigger toggles it from there, reporting each change as an open or close event.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Disables the trigger and mutes its text, so the disclosure keeps its current state and the user cannot toggle it.</prop>
+    <prop name="name" type="string" default=""
+    >Disclosures with the same nonempty name form an exclusive group in one document: opening one closes the others. An empty name allows multiple open
+      items.</prop>
+    <prop name="headingLevel" type="integer" default="0"
+    >Adds heading semantics around the trigger at level 2 through 6. Zero leaves it a plain disclosure; choose a level that matches the page outline.</prop>
     <state name="internalOpen" :value="false"></state>
     <state name="contentId" :value="''"></state>
+    <state name="headingRole" :value="null"></state>
+    <state name="headingAriaLevel" :value="null"></state>
     <event
       name="open"
       type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
@@ -19,11 +26,13 @@
     ></event>
   </defs>
   <div>
-    <button class="trigger" type="button" $ref="trigger" :aria-controls="contentId" :aria-expanded="internalOpen" :disabled="disabled">
-      <span $value="summary"></span>
-      <span class="chevron" aria-hidden="true"></span>
-    </button>
-    <div class="panel" :id="contentId" :inert="not internalOpen"><div class="panel-inner"><slot></slot></div></div>
+    <div class="heading" :role="headingRole" :aria-level="headingAriaLevel">
+      <button class="trigger" type="button" $ref="trigger" :aria-controls="contentId" :aria-expanded="internalOpen" :disabled="disabled">
+        <span class="summary"><slot name="summary"><template $value="summary"></template></slot></span>
+        <span class="chevron" aria-hidden="true"></span>
+      </button>
+    </div>
+    <div class="panel" $ref="panel" :id="contentId"><div class="panel-inner"><slot></slot></div></div>
   </div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */