@threadlabs/looma 0.22.10 → 0.22.11

package/components/shared/overlay.js

@@ -14,6 +14,13 @@ function syncScrollLock(document, state) {
   else document.documentElement.style.removeProperty("overflow");
 }
 
+function syncModalBackdrops(state) {
+  const topModal = state.records.findLast((record) => record.modal);
+  for (const record of state.records) {
+    (record.modalElement ?? record.element).toggleAttribute("data-ui-backdrop-hidden", Boolean(record.modal && record !== topModal));
+  }
+}
+
 function requestClose(document, reason, trigger) {
   const record = stateFor(document).records.at(-1);
   if (!record || (record.dismissible === false && (reason === "escape" || reason === "light-dismiss")) || record.canClose?.(reason) === false) return false;
@@ -55,13 +62,36 @@ function removeListeners(document, state) {
 export function openOverlay(record) {
   const document = record.element.ownerDocument;
   const state = stateFor(document);
-  closeOverlay(document, record.id);
+  const index = state.records.findIndex((entry) => entry.id === record.id);
+  if (index >= 0) {
+    const previous = state.records[index];
+    state.records[index] = record;
+    if (previous.modal !== record.modal) {
+      state.modalCount += record.modal ? 1 : -1;
+      syncScrollLock(document, state);
+    }
+    if (previous.modalElement && previous.modalElement !== record.modalElement) previous.modalElement.removeAttribute("data-ui-backdrop-hidden");
+    syncModalBackdrops(state);
+    return;
+  }
   state.records.push(record);
   if (record.modal) {
     state.modalCount += 1;
     syncScrollLock(document, state);
   }
+  syncModalBackdrops(state);
   ensureListeners(document, state);
+  announceOverlayOpen(document, record.id);
+}
+
+export function onOverlayOpen(document, listener) {
+  const onOpen = (event) => listener(event.detail.id);
+  document.addEventListener("ui-overlay-open", onOpen);
+  return () => document.removeEventListener("ui-overlay-open", onOpen);
+}
+
+export function announceOverlayOpen(document, id) {
+  document.dispatchEvent(new CustomEvent("ui-overlay-open", { detail: { id } }));
 }
 
 export function closeOverlay(document, id) {
@@ -69,10 +99,12 @@ export function closeOverlay(document, id) {
   const index = state.records.findIndex((record) => record.id === id);
   if (index >= 0) {
     const [record] = state.records.splice(index, 1);
+    (record.modalElement ?? record.element).removeAttribute("data-ui-backdrop-hidden");
     if (record?.modal) {
       state.modalCount = Math.max(0, state.modalCount - 1);
       syncScrollLock(document, state);
     }
+    syncModalBackdrops(state);
   }
   removeListeners(document, state);
 }

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

@@ -254,6 +254,12 @@
       animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }
 
+    :host[open][data-ui-backdrop-hidden]::backdrop {
+      background-color: transparent;
+      animation: none;
+      transition: none;
+    }
+
     @keyframes ui-dialog-backdrop-enter {
       from {
         background-color: transparent;

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

@@ -72,7 +72,7 @@ export default function controller(host) {
         if (modal) dialog.showModal();
         else dialog.show();
       }
-      openOverlay({ id: overlayId, modal, element, dismissible: true, canClose: (reason) => reason === "light-dismiss" ? closedBy === "any" : reason !== "escape" || closedBy !== "none", requestClose });
+      openOverlay({ id: overlayId, modal, element, modalElement: dialog, dismissible: true, canClose: (reason) => reason === "light-dismiss" ? closedBy === "any" : reason !== "escape" || closedBy !== "none", requestClose });
     } else {
       if (dialog.open) dialog.close();
       closeOverlay(document, overlayId);
@@ -83,7 +83,7 @@ export default function controller(host) {
     lastOpen = open;
   };
   const onClose = (event) => {
-    if (event instanceof CustomEvent) return;
+    if (event instanceof CustomEvent || event.target !== dialog) 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;

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

@@ -134,6 +134,20 @@
       white-space: nowrap;
     }
 
+    /* Fixed text is part of the value, but should not look editable. */
+    .affix:has([slot="prefix"]),
+    .affix:has([slot="suffix"]) {
+      background: var(--ui-surface-muted);
+    }
+
+    .affix:has([slot="prefix"]) {
+      border-inline-end: 1px solid var(--ui-border-divider);
+    }
+
+    .affix:has([slot="suffix"]) {
+      border-inline-start: 1px solid var(--ui-border-divider);
+    }
+
     /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
        small button sits inside it with the difference split evenly, and the field keeps its height. */
     .action {

package/components/ui-search-shell/ui-search-shell.html

@@ -105,6 +105,14 @@
       background: var(--ui-overlay-backdrop);
     }
 
+    dialog:modal {
+      background: transparent;
+    }
+
+    dialog[data-ui-backdrop-hidden]::backdrop {
+      background: transparent;
+    }
+
     .panel {
       position: relative;
       display: flex;

package/components/ui-search-shell/ui-search-shell.js

@@ -1,8 +1,11 @@
+import { closeOverlay, openOverlay } from "../shared/overlay.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 /** Owns native dialog state while leaving query and result state to the application. */
 export default function controller(host) {
   const dialog = host.refs.dialog;
+  const document = dialog.ownerDocument;
+  const overlayId = `ui-search-shell-${Math.random().toString(36).slice(2, 11)}`;
   const [trigger, stopTracking] = trackTrigger(host);
   let external = host.props.open.value;
   let activeModal = Boolean(host.props.modal.value);
@@ -31,8 +34,12 @@ export default function controller(host) {
     if (host.state.internalOpen && !dialog.open) {
       if (modal) dialog.showModal();
       else dialog.show();
-    } else if (!host.state.internalOpen) {
+    }
+    if (host.state.internalOpen) {
+      openOverlay({ id: overlayId, modal, element: dialog, modalElement: dialog, dismissible: false, requestClose: () => {} });
+    } else {
       closeNative();
+      closeOverlay(document, overlayId);
     }
   });
 
@@ -69,6 +76,8 @@ export default function controller(host) {
   // Only the dialog's own close: a tooltip, menu, or popover inside it reports "close" too, and it bubbles.
   const onClose = (event) => {
     if (event.target !== dialog) return;
+    if (dialog.open) return;
+    closeOverlay(document, overlayId);
     if (!suppressNativeClose && host.state.internalOpen) dispatchClose("action", trigger());
   };
   dialog.addEventListener("cancel", onCancel);
@@ -83,5 +92,6 @@ export default function controller(host) {
     dialog.removeEventListener("click", onClick);
     dialog.removeEventListener("close", onClose);
     closeNative();
+    closeOverlay(document, overlayId);
   };
 }

package/components/ui-sidebar/ui-sidebar.js

@@ -1,3 +1,5 @@
+import { announceOverlayOpen } from "../shared/overlay.js";
+
 const BREAKPOINTS = { sm: "40rem", md: "48rem", lg: "64rem" };
 
 function positive(value, fallback) {
@@ -134,6 +136,7 @@ export default function controller(host) {
   // report it again, forever. Only the drawer's own popover ToggleEvent, which has a newState, counts.
   const onPopoverToggle = (event) => {
     if (!host.state.drawer || event.target !== element || typeof event.newState !== "string") return;
+    if (event.newState === "open") announceOverlayOpen(document, element);
     host.dispatch("toggle", { open: event.newState === "open", mode: "drawer", trigger: "programmatic" });
   };
 

package/components/ui-toast-region/ui-toast-region.js

@@ -1,3 +1,4 @@
+import { announceOverlayOpen } from "../shared/overlay.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 const instances = new WeakMap();
@@ -16,8 +17,11 @@ export default function controller(host) {
   const [trigger, stopTracking] = trackTrigger(host);
   const toasts = () => host.state.toasts ?? [];
   const authored = () => Array.from(element.children).some((child) => !child.classList.contains("toast"));
+  let announcedVisible = false;
   const sync = () => {
     const visible = authored() || toasts().length > 0;
+    if (visible && !announcedVisible) announceOverlayOpen(element.ownerDocument, element);
+    announcedVisible = visible;
     if (visible && !element.matches(":popover-open")) element.showPopover();
     else if (!visible && element.matches(":popover-open")) element.hidePopover();
   };

package/components/ui-tooltip/ui-tooltip.js

@@ -1,4 +1,4 @@
-import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay } from "../shared/overlay.js";
+import { closeOverlay, createAnchoredSurface, createIdResolver, onOverlayOpen, openOverlay } from "../shared/overlay.js";
 
 const warmTooltips = new WeakMap();
 
@@ -138,12 +138,22 @@ export default function controller(host) {
     surface = createAnchoredSurface(element, { anchor: trigger, placement: nextPlacement, gap: offset });
   };
   const close = (reason, input) => {
-    if (reason !== "escape" && reason !== "light-dismiss") return;
+    if (reason !== "escape" && reason !== "light-dismiss" && reason !== "programmatic") return;
     clearTimers();
+    if (!host.state.internalOpen) return;
     host.state.internalOpen = false;
     trackVisible(false);
+    surface?.hide();
+    closeOverlay(document, overlayId);
+    if (trigger && host.props.trigger.value === "click") trigger.setAttribute("aria-expanded", "false");
     host.dispatch("close", { open: false, reason, trigger: input });
   };
+  const stopOverlayOpen = onOverlayOpen(document, (id) => {
+    if (id === overlayId) return;
+    clearTimers();
+    focused = false;
+    close("programmatic", "programmatic");
+  });
   const apply = () => {
     const externalOpen = Boolean(host.props.open.value);
     if (externalOpen !== lastExternalOpen) {
@@ -169,6 +179,7 @@ export default function controller(host) {
   apply();
   return () => {
     stop();
+    stopOverlayOpen();
     ids.stop();
     clearTimers();
     trackVisible(false);