@threadlabs/looma 0.14.7 → 0.15.0

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

@@ -1,28 +1,75 @@
 import { trackTrigger } from "../shared/trigger.js";
 
 let disclosures = 0;
+const groups = new WeakMap();
+
+function groupFor(document, name) {
+  let byName = groups.get(document);
+  if (!byName) { byName = new Map(); groups.set(document, byName); }
+  let members = byName.get(name);
+  if (!members) { members = new Set(); byName.set(name, members); }
+  return members;
+}
 
 // `open` sets the disclosure initially and whenever it changes; the trigger toggles the state.
 export default function controller(host) {
+  const document = host.element.ownerDocument;
   const [trigger, stopTracking] = trackTrigger(host);
   host.state.contentId = `ui-disclosure-${++disclosures}`;
   let external = host.state.open;
   host.state.internalOpen = Boolean(external);
+  let groupName = "";
+  const member = {
+    close(reason, how) {
+      if (!host.state.internalOpen) return;
+      host.state.internalOpen = false;
+      host.dispatch("close", { open: false, reason, trigger: how });
+    },
+  };
+  const syncGroup = (reason, how) => {
+    const name = String(host.state.name || "");
+    if (name !== groupName) {
+      if (groupName) groupFor(document, groupName).delete(member);
+      groupName = name;
+      if (groupName) groupFor(document, groupName).add(member);
+    }
+    if (name && host.state.internalOpen) {
+      for (const peer of groupFor(document, name)) if (peer !== member) peer.close(reason, how);
+    }
+  };
   const stop = host.effect(() => {
-    if (host.state.open === external) return;
-    external = host.state.open;
-    host.state.internalOpen = Boolean(external);
+    if (host.state.open !== external) {
+      external = host.state.open;
+      host.state.internalOpen = Boolean(external);
+    }
+    const level = Number(host.state.headingLevel);
+    host.state.headingRole = Number.isInteger(level) && level >= 2 && level <= 6 ? "heading" : null;
+    host.state.headingAriaLevel = host.state.headingRole ? level : null;
+    syncGroup("programmatic", "programmatic");
+    if (host.state.internalOpen) host.refs.panel.removeAttribute("hidden");
+    else host.refs.panel.setAttribute("hidden", "until-found");
   });
   const onClick = () => {
     if (host.state.disabled) return;
     const open = !host.state.internalOpen;
+    const how = trigger();
     host.state.internalOpen = open;
-    host.dispatch(open ? "open" : "close", { open, reason: "action", trigger: trigger() });
+    if (open) syncGroup("action", how);
+    host.dispatch(open ? "open" : "close", { open, reason: "action", trigger: how });
   };
+  const onBeforematch = () => queueMicrotask(() => {
+    if (host.state.internalOpen) return;
+    host.state.internalOpen = true;
+    syncGroup("programmatic", "programmatic");
+    host.dispatch("open", { open: true, reason: "programmatic", trigger: "programmatic" });
+  });
   host.refs.trigger.addEventListener("click", onClick);
+  host.refs.panel.addEventListener("beforematch", onBeforematch);
   return () => {
     stop();
     stopTracking();
+    if (groupName) groupFor(document, groupName).delete(member);
     host.refs.trigger.removeEventListener("click", onClick);
+    host.refs.panel.removeEventListener("beforematch", onBeforematch);
   };
 }

package/components/ui-editable/ui-editable.html

@@ -9,6 +9,11 @@
     <prop name="hint" type="string" default="">Optional text shown beside the value to signal it is editable (for example "Edit").</prop>
     <prop name="actions" type="boolean" default="false"
     >Show explicit Save and Cancel buttons while editing. Without them, Enter or leaving the field saves and Escape cancels.</prop>
+    <prop name="saveLabel" type="string" default="Save">Visible text for the Save action.</prop>
+    <prop name="cancelLabel" type="string" default="Cancel">Visible text for the Cancel action.</prop>
+    <prop name="placeholder" type="string" default="">Hint shown in the text input while the draft is empty.</prop>
+    <prop name="required" type="boolean" default="false">Prevent an empty draft from being saved.</prop>
+    <prop name="maxLength" type="number" default="0">Maximum draft length; 0 leaves the length unrestricted.</prop>
     <state name="internalEdit" :value="false"></state>
     <state name="internalValue" :value="''"></state>
     <state name="draft" :value="''"></state>
@@ -25,11 +30,20 @@
         <span class="text" $value="internalValue"></span>
         <span $if="hint" class="hint" aria-hidden="true" $value="hint"></span>
       </button>
-      <input class="input" $ref="input" type="text" .value="draft" :aria-label="label" :disabled="disabled or not internalEdit">
+      <input
+        class="input"
+        $ref="input"
+        type="text"
+        .value="draft"
+        :aria-label="label"
+        :placeholder="placeholder"
+        :required="required"
+        :disabled="disabled or not internalEdit"
+      >
     </div>
     <div $if="actions" class="actions">
-      <button class="save" type="button">Save</button>
-      <button class="cancel" type="button">Cancel</button>
+      <button class="save" type="button" $value="saveLabel"></button>
+      <button class="cancel" type="button" $value="cancelLabel"></button>
     </div>
   </div>
   <style>

package/components/ui-editable/ui-editable.js

@@ -29,6 +29,9 @@ export default function controller(host) {
     }
     // The inactive input stays in layout (it shares the value's cell) but out of the tab order.
     input.tabIndex = host.state.internalEdit ? 0 : -1;
+    const maxLength = Number(host.state.maxLength);
+    if (Number.isFinite(maxLength) && maxLength > 0) input.maxLength = Math.floor(maxLength);
+    else input.removeAttribute("maxlength");
   };
 
   const setEditing = (next, reason, trigger, returnFocus = true) => {
@@ -55,6 +58,10 @@ export default function controller(host) {
   const commit = (trigger, returnFocus) => {
     const previousValue = String(host.state.internalValue ?? "");
     const value = String(host.state.draft ?? "");
+    if (!input.checkValidity() || (input.maxLength >= 0 && value.length > input.maxLength)) {
+      input.reportValidity();
+      return;
+    }
     host.state.internalValue = value;
     setEditing(false, "commit", trigger, returnFocus);
     if (value !== previousValue) host.dispatch("change", { value, previousValue, trigger });

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -4,7 +4,11 @@
     <prop name="maxRows" type="integer" default="8">The most rows the grid offers (at most 10).</prop>
     <prop name="maxCols" type="integer" default="8">The most columns the grid offers (at most 10).</prop>
     <prop name="headerRow" type="boolean" default="false">Whether table insertion initially includes a header row.</prop>
-    <state name="cells" type="list(object({ key: string, row: integer, col: integer, label: string, selected: boolean }))" :value="[]"></state>
+    <state
+      name="cells"
+      type="list(object({ key: string, row: integer, col: integer, label: string, selected: boolean, tabIndex: integer }))"
+      :value="[]"
+    ></state>
     <state name="rows" :value="8"></state>
     <state name="cols" :value="8"></state>
     <state name="hint" :value="''"></state>
@@ -13,7 +17,7 @@
   </defs>
   <div :hidden="not open">
     <p class="hint" $value="hint"></p>
-    <div class="grid" role="group" aria-label="Table dimensions" style:--_rows="rows" style:--_cols="cols">
+    <div class="grid" $ref="grid" role="group" aria-label="Table dimensions" style:--_rows="rows" style:--_cols="cols">
       <button
         $each="cell of cells"
         $key="cell.key"
@@ -24,11 +28,11 @@
         :data-col="cell.col"
         :aria-label="cell.label"
         :aria-pressed="cell.selected"
+        :tabindex="cell.tabIndex"
       >
       </button>
     </div>
     <label class="header"><input type="checkbox" $ref="header" .checked="withHeaderRow"> Header row</label>
-    <button type="button" class="insert" $ref="insert">Insert table</button>
   </div>
   <style>
     :host {
@@ -51,6 +55,28 @@
       grid-template-rows: repeat(var(--_rows, 8), 1.25rem);
       gap: 2px;
       margin-bottom: var(--ui-space-2);
+      max-inline-size: 100%;
+      overflow: auto;
+      --_ui-scroll-fade-direction: to right;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self inline);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    :host:dir(rtl) .grid {
+      --_ui-scroll-fade-direction: to left;
     }
 
     .cell {
@@ -68,6 +94,11 @@
       border-color: var(--ui-accent-solid, var(--ui-accent));
     }
 
+    .cell:focus-visible {
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: -2px;
+    }
+
     .header {
       display: block;
       margin-bottom: var(--ui-space-2);
@@ -75,19 +106,22 @@
       cursor: pointer;
     }
 
-    :host .insert {
-      width: 100%;
-      padding: var(--ui-space-2) var(--ui-space-3);
-      border: 1px solid var(--ui-border);
-      border-radius: var(--ui-radius-sm);
-      background: var(--ui-accent-solid, var(--ui-accent));
-      color: var(--ui-accent-contrast);
-      font-size: var(--ui-font-size-sm);
-      cursor: pointer;
+    @media (pointer: coarse) {
+      .grid {
+        grid-template-columns: repeat(var(--_cols, 8), 44px);
+        grid-template-rows: repeat(var(--_rows, 8), 44px);
+      }
+
+      .cell {
+        width: 44px;
+        height: 44px;
+      }
     }
 
-    :host .insert:hover {
-      filter: brightness(1.05);
+    @media (forced-colors: active) {
+      .cell:focus-visible {
+        outline-color: Highlight;
+      }
     }
 
     :host[hidden] {

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js

@@ -3,26 +3,26 @@ function bounded(value, fallback) {
   return Math.min(10, Math.max(1, Number.isFinite(parsed) ? parsed : fallback));
 }
 
-// Lays out the grid cells, previews the size under the pointer, and inserts the chosen size.
+// Lays out the grid cells and inserts the chosen size by pointer or keyboard.
 export default function controller(host) {
   const element = host.element;
   let selected = { rows: 3, cols: 3 };
   let preview = null;
-  let committed = false;
   let lastHeaderRow = Boolean(host.state.headerRow);
   host.state.withHeaderRow = lastHeaderRow;
 
   const update = () => {
     const rows = bounded(host.state.maxRows, 8);
     const cols = bounded(host.state.maxCols, 8);
+    selected = { rows: Math.min(selected.rows, rows), cols: Math.min(selected.cols, cols) };
     const active = preview ?? selected;
     host.state.rows = rows;
     host.state.cols = cols;
-    host.state.hint = preview ? `${preview.rows} × ${preview.cols}` : `${selected.rows} × ${selected.cols}${committed ? " selected" : ""}`;
+    host.state.hint = `${active.rows} × ${active.cols}`;
     host.state.cells = Array.from({ length: rows * cols }, (_, index) => {
       const row = Math.floor(index / cols) + 1;
       const col = (index % cols) + 1;
-      return { key: `${row}:${col}`, row, col, label: `${row} rows by ${col} columns`, selected: row <= active.rows && col <= active.cols };
+      return { key: `${row}:${col}`, row, col, label: `${row} rows by ${col} columns`, selected: row <= active.rows && col <= active.cols, tabIndex: row === active.rows && col === active.cols ? 0 : -1 };
     });
   };
   const stop = host.effect(() => {
@@ -42,9 +42,7 @@ export default function controller(host) {
     if (cell) {
       selected = cell;
       preview = null;
-      committed = true;
       update();
-    } else if (host.refs.insert.contains(event.target)) {
       host.dispatch("insert", { ...selected, withHeaderRow: host.state.withHeaderRow });
     }
   };
@@ -54,18 +52,54 @@ export default function controller(host) {
     update();
   };
   const onMouseleave = () => {
+    if (host.refs.grid.contains(element.ownerDocument.activeElement)) return;
     preview = null;
     update();
   };
+  const onFocusin = (event) => {
+    const cell = cellOf(event);
+    if (!cell) return;
+    preview = cell;
+    update();
+  };
+  const onFocusout = () => queueMicrotask(() => {
+    if (host.refs.grid.contains(element.ownerDocument.activeElement)) return;
+    preview = null;
+    update();
+  });
+  const onKeydown = (event) => {
+    const current = cellOf(event);
+    if (!current) return;
+    const rows = host.state.rows;
+    const cols = host.state.cols;
+    let next = current;
+    if (event.key === "ArrowRight") next = { ...current, cols: Math.min(cols, current.cols + 1) };
+    else if (event.key === "ArrowLeft") next = { ...current, cols: Math.max(1, current.cols - 1) };
+    else if (event.key === "ArrowDown") next = { ...current, rows: Math.min(rows, current.rows + 1) };
+    else if (event.key === "ArrowUp") next = { ...current, rows: Math.max(1, current.rows - 1) };
+    else if (event.key === "Home") next = { ...current, cols: 1 };
+    else if (event.key === "End") next = { ...current, cols };
+    else return;
+    event.preventDefault();
+    const cell = Array.from(host.refs.grid.querySelectorAll("[data-row][data-col]")).find((candidate) =>
+      Number(candidate.dataset.row) === next.rows && Number(candidate.dataset.col) === next.cols);
+    cell?.focus();
+  };
   element.addEventListener("click", onClick);
   element.addEventListener("mouseover", onMouseover);
   element.addEventListener("mouseleave", onMouseleave);
+  element.addEventListener("focusin", onFocusin);
+  element.addEventListener("focusout", onFocusout);
+  element.addEventListener("keydown", onKeydown);
   host.refs.header.addEventListener("change", onChange);
   return () => {
     stop();
     element.removeEventListener("click", onClick);
     element.removeEventListener("mouseover", onMouseover);
     element.removeEventListener("mouseleave", onMouseleave);
+    element.removeEventListener("focusin", onFocusin);
+    element.removeEventListener("focusout", onFocusout);
+    element.removeEventListener("keydown", onKeydown);
     host.refs.header.removeEventListener("change", onChange);
   };
 }

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

@@ -1,3 +1,4 @@
+<link rel="component" href="../ui-editor-mention-menu-item/ui-editor-mention-menu-item.html">
 <template component="ui-editor-mention-menu" controller="./ui-editor-mention-menu.js">
   <defs>
     <prop name="open" type="boolean" default="false">Whether the menu is open.</prop>
@@ -7,6 +8,8 @@
     >The zero-based index of the highlighted person, capped at the last one shown, and announced through aria-activedescendant. The menu does not handle arrow
       keys itself: the editor sets this as the user moves, while hovering a person highlights them and reports a highlight event.</prop>
     <prop name="loading" type="boolean" default="false">Whether a search is in progress.</prop>
+    <prop name="label" type="string" default="Mentions">Accessible name of the suggestion list.</prop>
+    <prop name="loadingLabel" type="string" default="Searching…">Status text shown while loading an empty result list.</prop>
     <prop
       name="anchorRect"
       type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null"
@@ -16,15 +19,12 @@
     <state name="searching" :value="false"></state>
     <state name="active" :value="0"></state>
     <state name="prefix" :value="'ui-editor-mention-menu'"></state>
-    <event name="highlight" type="object({ index: integer })"></event>
-    <event name="select" type="object({ index: integer })"></event>
+    <event name="highlight" type="object({ index: integer, value: string })"></event>
+    <event name="select" type="object({ index: integer, value: string })"></event>
   </defs>
-  <div role="listbox" aria-label="Mention a person" :aria-busy="loading" :hidden="not visible">
-    <div class="header">
-      <span>People</span>
-      <span class="hint">Type after @ to search</span>
-    </div>
-    <div $if="searching" class="loading" role="status">Searching…</div>
+  <div role="listbox" :aria-busy="loading" :hidden="not visible">
+    <div class="header"><slot name="header"></slot></div>
+    <div $if="searching" class="loading" role="status" $value="loadingLabel"></div>
     <ul $if="not searching" class="list" role="presentation">
       <li
         $each="row, index of rows"
@@ -34,11 +34,14 @@
         role="option"
         :aria-selected="index = active"
         :data-index="index"
+        :data-value="row.id"
       >
         <span class="avatar" aria-hidden="true" $value="row.initials"></span>
         <span class="body"><span class="label" $value="row.label"></span><span $if="row.detail" class="detail" $value="row.detail"></span></span>
       </li>
+      <slot></slot>
     </ul>
+    <div class="empty" $ref="empty"><slot name="empty"></slot></div>
   </div>
   <style>
     :host {
@@ -67,6 +70,16 @@
       font-weight: var(--ui-font-semibold);
     }
 
+    .header:not(:has(> *)), .empty:not(:has(> *)) {
+      display: none;
+    }
+
+    .empty {
+      padding: var(--ui-space-3);
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
     .hint {
       overflow: hidden;
       color: var(--ui-text-muted);
@@ -123,7 +136,7 @@
       flex: 0 0 auto;
       color: var(--ui-accent-active, var(--ui-accent-solid));
       background: var(--ui-accent-soft, var(--ui-accent-subtle));
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
     }

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

@@ -3,33 +3,54 @@ import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 // Places the menu at the @ and derives its rows; the template renders them.
 export default function controller(host) {
   const element = host.element;
+  const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
     if (host.state.visible) positionMenu(element, normalizeAnchor(host.state.anchorRect), 320);
   };
+  const options = () => Array.from(element.querySelectorAll('[role="option"]'));
+  const syncOptions = () => {
+    const rows = options();
+    const active = Math.min(Math.max(0, host.state.active), Math.max(0, rows.length - 1));
+    rows.forEach((row, index) => {
+      row.dataset.index = String(index);
+      row.id = `${host.state.prefix}-option-${index}`;
+      row.setAttribute("aria-selected", String(index === active));
+    });
+    if (rows.length) element.setAttribute("aria-activedescendant", rows[active].id);
+    else element.removeAttribute("aria-activedescendant");
+    const empty = Boolean(host.refs.empty.children.length);
+    host.refs.empty.hidden = rows.length > 0 || host.state.loading;
+    const visible = Boolean(host.state.open && normalizeAnchor(host.state.anchorRect)
+      && (host.state.loading || rows.length > 0 || empty));
+    if (host.state.visible !== visible) host.state.visible = visible;
+    place();
+  };
   const stop = host.effect(() => {
+    if (!authoredLabel) element.setAttribute("aria-label", String(host.state.label || "Mentions"));
     const items = (Array.isArray(host.state.items) ? host.state.items : []).slice(0, 20);
     host.state.rows = items.map((item) => ({ ...item, initials: item.initials ?? String(item.label).slice(0, 2).toUpperCase() }));
     host.state.searching = Boolean(host.state.loading && !items.length);
     host.state.active = Math.min(Number(host.state.selectedIndex ?? 0), Math.max(0, items.length - 1));
     host.state.prefix = element.id || "ui-editor-mention-menu";
-    host.state.visible = Boolean(host.state.open && (host.state.loading || items.length > 0) && normalizeAnchor(host.state.anchorRect));
-    if (items.length) element.setAttribute("aria-activedescendant", `${host.state.prefix}-option-${host.state.active}`);
-    else element.removeAttribute("aria-activedescendant");
-    place();
+    queueMicrotask(syncOptions);
   });
-  const indexOf = (event) => Number(event.target.closest?.("[data-index]")?.dataset.index);
+  const rowOf = (event) => event.target.closest?.('[role="option"]');
   const onMousedown = (event) => event.preventDefault();
   const onClick = (event) => {
-    const index = indexOf(event);
-    if (Number.isFinite(index)) host.dispatch("select", { index });
+    const row = rowOf(event);
+    if (row) host.dispatch("select", { index: Number(row.dataset.index), value: row.dataset.value ?? "" });
   };
   const onMouseover = (event) => {
-    const index = indexOf(event);
-    if (!Number.isFinite(index) || index === host.state.active) return;
+    const row = rowOf(event);
+    if (!row) return;
+    const index = Number(row.dataset.index);
+    if (index === host.state.active) return;
     host.state.active = index;
-    element.setAttribute("aria-activedescendant", `${host.state.prefix}-option-${index}`);
-    host.dispatch("highlight", { index });
+    syncOptions();
+    host.dispatch("highlight", { index, value: row.dataset.value ?? "" });
   };
+  const observer = new MutationObserver(syncOptions);
+  observer.observe(element, { childList: true, subtree: true });
   element.addEventListener("mousedown", onMousedown);
   element.addEventListener("click", onClick);
   element.addEventListener("mouseover", onMouseover);
@@ -39,6 +60,7 @@ export default function controller(host) {
   window.visualViewport?.addEventListener("scroll", place);
   return () => {
     stop();
+    observer.disconnect();
     element.removeEventListener("mousedown", onMousedown);
     element.removeEventListener("click", onClick);
     element.removeEventListener("mouseover", onMouseover);

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

@@ -0,0 +1,67 @@
+<template component="ui-editor-mention-menu-item">
+  <defs>
+    <prop name="value" type="string" default="">Stable identifier reported by the containing Mention Menu when this person is chosen.</prop>
+    <prop name="detail" type="string" default="">Secondary text, such as a team or role.</prop>
+    <prop name="initials" type="string" default="">Text fallback for the start slot when no avatar is supplied.</prop>
+  </defs>
+  <li role="option" tabindex="-1" :data-value="value">
+    <span class="avatar" aria-hidden="true"><slot name="start"><template $value="initials"></template></slot></span>
+    <span class="body"><span class="label"><slot></slot></span><span $if="detail" class="detail" $value="detail"></span></span>
+  </li>
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      min-block-size: 44px;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      gap: var(--ui-space-3);
+      cursor: pointer;
+      list-style: none;
+    }
+
+    :host[aria-selected="true"] {
+      background: var(--ui-accent-subtle);
+    }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 32px;
+      block-size: 32px;
+      flex: 0 0 auto;
+      color: var(--ui-accent-active);
+      background: var(--ui-accent-soft);
+      border-radius: var(--ui-radius-round);
+      font-size: var(--ui-font-size-xs);
+      font-weight: var(--ui-font-semibold);
+    }
+
+    .body {
+      display: flex;
+      min-inline-size: 0;
+      flex-direction: column;
+    }
+
+    .label, .detail {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .label {
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium);
+    }
+
+    .detail {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-xs);
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>