@threadlabs/looma 0.14.7 → 0.15.0

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-combobox/ui-combobox.html

@@ -33,6 +33,10 @@
     <prop name="query" type="string"
     >The input's text, when the consumer controls it. Once set, the consumer owns the text: typing reports query-change, and the input returns to query unless
       query is updated to match. Leave it unset to let the combobox manage its own text, showing the chosen option's label.</prop>
+    <prop name="filter" type="label | none" default="label"
+    >How the list narrows as the user types. label lists the options whose label contains the typed text, ignoring case. none lists every authored option, for
+      options already narrowed elsewhere, such as a server search, so a result that matched on data other than its label still shows. Leaving the field still
+      commits an option whose label matches the text, or the only one listed.</prop>
     <prop name="allowFreeText" type="boolean" default="false">Allows values that do not match an authored option.</prop>
     <prop name="allowCreate" type="boolean" default="false"
     >Offers the current query as a new option, reported as create-item. When nothing else matches, the offer is highlighted, so Enter creates it; with nothing
@@ -46,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.
@@ -77,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
@@ -159,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"
@@ -258,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>
@@ -309,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. */
@@ -322,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);
@@ -348,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);
@@ -466,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;
@@ -477,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

@@ -55,6 +55,8 @@ export default function controller(host) {
     options: authoredOptions(authored),
     allowFreeText: Boolean(host.state.allowFreeText),
     allowCreate: Boolean(host.state.allowCreate),
+    // "none": the consumer already narrowed the options (a server search), so every one is listed.
+    filterByLabel: host.state.filter !== "none",
   });
   // Selected items work uncontrolled: the component keeps them and reports every change. A consumer
   // that owns `items` stays in charge, because the prop resyncs whatever it sets. A consumer that sets
@@ -108,7 +110,6 @@ export default function controller(host) {
   const cancelLookup = () => {
     lookup?.abort();
     lookup = undefined;
-    host.state.loading = false;
   };
   const close = () => {
     host.state.expanded = false;
@@ -149,7 +150,7 @@ export default function controller(host) {
       const filtered = options.filter((option) => {
         if (ids.has(option.id)) return false;
         ids.add(option.id);
-        if (fullSet) return true;
+        if (fullSet || !current.filterByLabel) return true;
         return option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase());
       }).map((option) => ({
         ...option,
@@ -165,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;
@@ -267,7 +267,8 @@ export default function controller(host) {
   };
   // A strict combobox (single, no free text, no create) behaves like a select: leaving it resolves the
   // typed text to a valid option (the highlighted one, an exact label, the first label it begins, or the
-  // only remaining option); with no match it reverts to the previous selection, or clears.
+  // only remaining option); with no match it reverts to the previous selection, or clears. With filter
+  // "none" the remaining options are all of them, whatever their labels, so the only one listed counts.
   const resolveTyped = (trigger) => {
     const current = config();
     if (host.state.multiple || current.allowFreeText || current.allowCreate) return;
@@ -285,7 +286,7 @@ export default function controller(host) {
         ?? enabled.find((row) => row.label.toLocaleLowerCase() === query)
         ?? enabled.find((row) => row.label.toLocaleLowerCase().startsWith(query))
         ?? (() => {
-          const containing = enabled.filter((option) => option.label.toLocaleLowerCase().includes(query));
+          const containing = current.filterByLabel ? enabled.filter((option) => option.label.toLocaleLowerCase().includes(query)) : enabled;
           return containing.length === 1 ? containing[0] : undefined;
         })();
     if (match) commit(match.value, match.label, match, "selection", trigger);
@@ -382,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.` : "");
@@ -452,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; };
@@ -479,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. */