@threadlabs/looma 0.4.0 → 0.5.1

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

@@ -0,0 +1,143 @@
+import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
+
+function disabled(item) {
+  return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true";
+}
+
+export default function controller(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const menuSurface = host.refs.menu;
+  const overlayId = `ui-context-menu-${Math.random().toString(36).slice(2, 11)}`;
+  let trigger = null;
+  let contextTarget = null;
+  let surface = null;
+  let point = null;
+  let lastFor = host.state.for;
+  let lastOpenProp = Boolean(host.state.open);
+  host.state.internalOpen = lastOpenProp;
+
+  const items = () => Array.from(element.querySelectorAll('[data-component~="ui-menu-item"]')).filter((item) => !disabled(item));
+  const focusFirst = () => requestAnimationFrame(() => items()[0]?.focus());
+  const detach = () => {
+    trigger?.removeEventListener("click", onTriggerClick);
+    trigger?.removeEventListener("keydown", onTriggerKeydown);
+    contextTarget?.removeEventListener("contextmenu", onContextMenu);
+  };
+  const ids = createIdResolver(document, () => resolveTargets());
+  const resolveTargets = () => {
+    const nextTrigger = ids.get(String(host.state.for ?? ""));
+    const nextContext = nextTrigger;
+    if (nextTrigger === trigger && nextContext === contextTarget) return;
+    detach();
+    trigger = nextTrigger;
+    contextTarget = nextContext;
+    trigger?.addEventListener("click", onTriggerClick);
+    trigger?.addEventListener("keydown", onTriggerKeydown);
+    contextTarget?.addEventListener("contextmenu", onContextMenu);
+    surface?.setAnchor(trigger);
+  };
+  // Light dismiss leaves focus where the user pointed instead of pulling it back to the trigger.
+  const close = (reason, input, returnFocus = reason !== "light-dismiss") => {
+    if (!host.state.internalOpen) return;
+    host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger: input });
+    if (returnFocus) trigger?.focus();
+  };
+  const apply = () => {
+    if (host.state.for !== lastFor) {
+      lastFor = host.state.for;
+      resolveTargets();
+    }
+    const externalOpen = Boolean(host.state.open);
+    if (externalOpen !== lastOpenProp) {
+      lastOpenProp = externalOpen;
+      host.state.internalOpen = externalOpen;
+    }
+    const open = Boolean(host.state.internalOpen);
+    if (trigger) {
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("aria-expanded", String(open));
+    }
+    if (open) {
+      if (point) surface?.showAtPoint(point);
+      else surface?.show();
+      openOverlay({ id: overlayId, modal: false, element, dismissible: true, requestClose: close });
+    } else {
+      surface?.hide();
+      closeOverlay(document, overlayId);
+    }
+  };
+  const openFromTrigger = (input) => {
+    if (!trigger) return;
+    point = null;
+    host.state.internalOpen = true;
+    host.dispatch("open", { open: true, reason: "action", trigger: input });
+    focusFirst();
+  };
+  function onTriggerClick(event) {
+    const input = event.detail === 0 ? "keyboard" : "pointer";
+    if (host.state.internalOpen) close("action", input);
+    else openFromTrigger(input);
+  }
+  function onTriggerKeydown(event) {
+    if (!["Enter", " ", "ArrowDown"].includes(event.key)) return;
+    event.preventDefault();
+    if (!host.state.internalOpen) openFromTrigger("keyboard");
+    else focusFirst();
+  }
+  function onContextMenu(event) {
+    event.preventDefault();
+    point = { x: event.clientX, y: event.clientY };
+    surface?.showAtPoint(point);
+    host.state.internalOpen = true;
+    host.dispatch("open", { open: true, reason: "action", trigger: "pointer" });
+    focusFirst();
+  }
+  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?.('[data-component~="ui-menu-item"]');
+      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?.('[data-component~="ui-menu-item"]'));
+      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();
+    }
+  };
+  const onClick = (event) => {
+    const item = event.target.closest?.('[data-component~="ui-menu-item"]');
+    if (!item || disabled(item)) return;
+    host.dispatch("select", { value: item.getAttribute("data-value") ?? item.getAttribute("value") ?? "", trigger: "pointer" });
+    close("action", "pointer");
+  };
+  resolveTargets();
+  if (menuSurface) surface = createAnchoredSurface(menuSurface, { anchor: trigger, placement: "bottom-start" });
+  element.addEventListener("keydown", onKeydown);
+  element.addEventListener("click", onClick);
+  const observer = new MutationObserver(resolveTargets);
+  observer.observe(element, { childList: true, subtree: true });
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    ids.stop();
+    observer.disconnect();
+    detach();
+    element.removeEventListener("keydown", onKeydown);
+    element.removeEventListener("click", onClick);
+    surface?.destroy();
+    closeOverlay(document, overlayId);
+  };
+}

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

@@ -0,0 +1,178 @@
+<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="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="close"
+      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></event>
+  </defs>
+  <dialog :aria-label="accessibleLabel">
+    <header>
+      <h2 class="title" $if="label" $value="label"></h2>
+      <button class="close" $ref="close" type="button" aria-label="Close"></button>
+    </header>
+    <div class="body"><slot></slot></div>
+    <footer><slot name="actions"></slot></footer>
+  </dialog>
+  <style>
+    :host {
+      position: fixed;
+      inset: 0;
+      box-sizing: border-box;
+      inline-size: min(
+        calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2),
+        var(--ui-dialog-max-width, 440px)
+      );
+      max-inline-size: none;
+      max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2);
+      margin: auto;
+      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));
+      visibility: hidden;
+      pointer-events: none;
+      opacity: 0;
+      transform: scale(0.96);
+      transition:
+        opacity var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+        transform var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+        visibility var(--ui-dialog-duration, var(--ui-motion-base)),
+        display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
+        overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
+    }
+
+    :host[open] {
+      display: flex;
+      visibility: visible;
+      pointer-events: auto;
+      opacity: 1;
+      transform: scale(1);
+      animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+    }
+
+    /* Header and actions stay pinned; only the body scrolls when content is long. */
+    header {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-3);
+      flex: none;
+      padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
+      border-block-end: 1px solid var(--ui-border-default);
+    }
+
+    /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
+    :host .title {
+      flex: 1;
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      color: var(--ui-text-primary);
+      letter-spacing: normal;
+      font-size: var(--ui-font-size-lg, 1.125rem);
+      font-weight: var(--ui-font-semibold, 600);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .close {
+      display: inline-grid;
+      place-items: center;
+      flex: none;
+      margin-inline-start: auto;
+      inline-size: var(--ui-control-size-sm, 2rem);
+      block-size: var(--ui-control-size-sm, 2rem);
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-round, 999px);
+      background: transparent;
+      color: var(--ui-text-secondary);
+      cursor: pointer;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* A CSS-drawn X. */
+    .close::before,
+    .close::after {
+      content: "";
+      grid-area: 1 / 1;
+      inline-size: 0.875rem;
+      block-size: 1.5px;
+      border-radius: 1px;
+      background: currentColor;
+      transform: rotate(45deg);
+    }
+
+    .close::after {
+      transform: rotate(-45deg);
+    }
+
+    .close:hover {
+      background: var(--ui-surface-muted);
+      color: var(--ui-text-primary);
+    }
+
+    .close:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 2px;
+    }
+
+    .body {
+      flex: 1 1 auto;
+      min-block-size: 0;
+      overflow: auto;
+      overscroll-behavior: contain;
+      padding: var(--ui-space-5);
+    }
+
+    footer {
+      display: flex;
+      flex: none;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: var(--ui-space-2);
+      padding: var(--ui-space-3) var(--ui-space-5);
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
+    footer:empty {
+      display: none;
+    }
+
+    @keyframes ui-dialog-enter {
+      from {
+        opacity: 0;
+        transform: scale(0.96);
+      }
+    }
+
+    :host::backdrop {
+      background-color: transparent;
+      transition:
+        background-color var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+        display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
+        overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
+    }
+
+    :host[open]::backdrop {
+      background-color: var(--ui-overlay-backdrop);
+      animation: ui-dialog-backdrop-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+    }
+
+    @keyframes ui-dialog-backdrop-enter {
+      from {
+        background-color: transparent;
+      }
+    }
+  </style>
+</template>

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

@@ -0,0 +1,105 @@
+import { closeOverlay, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
+
+function inferredLabel(element, explicit) {
+  if (String(explicit ?? "").trim()) return String(explicit).trim();
+  return element.querySelector("h1, h2, h3, h4, h5, h6")?.textContent?.trim() || "Dialog";
+}
+
+export default function controller(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const dialog = element.localName === "dialog" ? element : element.querySelector("dialog");
+  const overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
+  let trigger = null;
+  let lastFor = "";
+  let lastExternalOpen = Boolean(host.state.open);
+  host.state.internalOpen = lastExternalOpen;
+
+  const requestClose = (reason, input) => {
+    host.state.internalOpen = 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 = () => {
+    host.state.internalOpen = true;
+  };
+  const ids = createIdResolver(document, () => {
+    lastFor = null;
+    apply();
+  });
+  const syncTrigger = () => {
+    const nextFor = String(host.state.for ?? "");
+    if (nextFor === lastFor) return;
+    lastFor = nextFor;
+    trigger?.removeEventListener("click", onTriggerClick);
+    trigger = ids.get(nextFor);
+    if (dialog && !dialog.id) dialog.id = `${overlayId}-surface`;
+    trigger?.addEventListener("click", onTriggerClick);
+    if (trigger) {
+      trigger.setAttribute("aria-haspopup", "dialog");
+      trigger.setAttribute("aria-controls", dialog?.id || "");
+    }
+  };
+  const apply = () => {
+    const externalOpen = Boolean(host.state.open);
+    if (externalOpen !== lastExternalOpen) {
+      lastExternalOpen = externalOpen;
+      host.state.internalOpen = externalOpen;
+    }
+    host.state.accessibleLabel = inferredLabel(element, host.state.label);
+    dialog?.setAttribute("aria-label", String(host.state.accessibleLabel));
+    syncTrigger();
+    const open = Boolean(host.state.internalOpen);
+    trigger?.setAttribute("aria-expanded", String(open));
+    if (!dialog) return;
+    if (open) {
+      if (!dialog.open) {
+        if (host.state.modal) dialog.showModal();
+        else dialog.show();
+      }
+      openOverlay({ id: overlayId, modal: Boolean(host.state.modal), element, dismissible: Boolean(host.state.dismissible), requestClose });
+    } else {
+      if (dialog.open) dialog.close();
+      closeOverlay(document, overlayId);
+    }
+  };
+  const onClose = () => {
+    if (!host.state.internalOpen) return;
+    host.state.internalOpen = false;
+    closeOverlay(document, overlayId);
+    host.dispatch("close", { open: false, reason: "programmatic", trigger: "programmatic" });
+  };
+  const onKeydown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      requestTopOverlayClose(document, "escape", "keyboard");
+    }
+  };
+  const onCancel = (event) => {
+    event.preventDefault();
+    requestTopOverlayClose(document, "escape", "keyboard");
+  };
+  const observer = new MutationObserver(() => {
+    const label = inferredLabel(element, host.state.label);
+    if (label !== host.state.accessibleLabel) host.state.accessibleLabel = label;
+  });
+  observer.observe(element, { childList: true, subtree: true, characterData: true });
+  dialog?.addEventListener("close", onClose);
+  dialog?.addEventListener("cancel", onCancel);
+  closeButton?.addEventListener("click", onCloseClick);
+  element.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    ids.stop();
+    observer.disconnect();
+    dialog?.removeEventListener("close", onClose);
+    dialog?.removeEventListener("cancel", onCancel);
+    closeButton?.removeEventListener("click", onCloseClick);
+    trigger?.removeEventListener("click", onTriggerClick);
+    element.removeEventListener("keydown", onKeydown);
+    closeOverlay(document, overlayId);
+  };
+}

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

@@ -0,0 +1,109 @@
+<template component="ui-disclosure" controller="./ui-disclosure.js">
+  <defs>
+    <prop name="summary" type="string" default="Details">summary token.</prop>
+    <prop name="open" type="boolean" default="false">open token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <state name="internalOpen" :value="false"></state>
+    <state name="contentId" :value="''"></state>
+    <event
+      name="open"
+      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></event>
+    <event
+      name="close"
+      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></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>
+  <style>
+    /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+     * select or combobox. Stacked disclosures share their dividers. */
+    :host {
+      display: block;
+      inline-size: 100%;
+      overflow: clip;
+      border-block-end: 1px solid var(--ui-border-default);
+      color: var(--ui-text-primary);
+    }
+
+    .trigger {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: var(--ui-space-3);
+      align-items: center;
+      inline-size: 100%;
+      min-block-size: 2.5rem;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-weight: var(--ui-font-semibold, 600);
+      text-align: start;
+      cursor: pointer;
+      border-radius: var(--ui-radius-1);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .trigger:hover:not(:disabled) {
+      background: var(--ui-surface-muted);
+    }
+    .trigger:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+    }
+    .trigger:disabled {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+
+    .chevron {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-inline-end: 2px solid currentColor;
+      border-block-end: 2px solid currentColor;
+      transform: rotate(45deg) translate(-1px, -1px);
+      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .panel {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--ui-motion-fast) var(--ui-motion-ease-out, var(--ui-motion-ease));
+    }
+
+    .panel-inner {
+      min-block-size: 0;
+      overflow: hidden;
+      padding-inline: var(--ui-space-3);
+    }
+
+    :host-state([internalOpen]) .panel {
+      grid-template-rows: 1fr;
+    }
+    :host-state([internalOpen]) .panel-inner {
+      padding-block: 0 var(--ui-space-3);
+    }
+    :host-state([internalOpen]) .chevron {
+      transform: rotate(225deg) translate(-1px, -1px);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .panel,
+      .chevron {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-disclosure/ui-disclosure.js

@@ -0,0 +1,28 @@
+import { trackTrigger } from "../shared/trigger.js";
+
+let disclosures = 0;
+
+// `open` sets the disclosure initially and whenever it changes; the trigger toggles the state.
+export default function controller(host) {
+  const [trigger, stopTracking] = trackTrigger(host);
+  host.state.contentId = `ui-disclosure-${++disclosures}`;
+  let external = host.state.open;
+  host.state.internalOpen = Boolean(external);
+  const stop = host.effect(() => {
+    if (host.state.open === external) return;
+    external = host.state.open;
+    host.state.internalOpen = Boolean(external);
+  });
+  const onClick = () => {
+    if (host.state.disabled) return;
+    const open = !host.state.internalOpen;
+    host.state.internalOpen = open;
+    host.dispatch(open ? "open" : "close", { open, reason: "action", trigger: trigger() });
+  };
+  host.refs.trigger.addEventListener("click", onClick);
+  return () => {
+    stop();
+    stopTracking();
+    host.refs.trigger.removeEventListener("click", onClick);
+  };
+}