@threadlabs/looma 0.23.20 → 0.23.22

package/components/shared/overlay.js

@@ -31,7 +31,7 @@ function requestClose(document, reason, trigger) {
 function ensureListeners(document, state) {
   if (state.listening) return;
   state.onKeydown = (event) => {
-    if (event.key === "Escape") requestClose(document, "escape", "keyboard");
+    if (event.key === "Escape" && !event.defaultPrevented && requestClose(document, "escape", "keyboard")) event.preventDefault();
   };
   state.onPointerdown = (event) => {
     const top = state.records.at(-1);

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

@@ -388,7 +388,7 @@
               from:disabled="disabled or readonly or item.disabled"
               from:aria-label="concat(item.label, ', press Delete or Backspace to remove')"
             >
-              <slot from:name="concat('item-', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
+              <slot from:name="concat('item-', item.id)"><ui-badge>{$item.label}</ui-badge></slot>
             </button>
           </template>
           <input
@@ -467,7 +467,7 @@
     <div class="popup" $ref="popup" from:hidden="not expanded">
       <div role="listbox" $ref="listbox" from:id="concat(uid, '-listbox')" from:aria-label="concat(label, ' suggestions')" from:aria-busy="loading">
         <div $each="group of groups" $key="group.name" from:role="group.role" from:aria-label="group.label">
-          <div $if="group.name" class="group" $value="group.name"></div>
+          <div $if="group.name" class="group">{$group.name}</div>
           <div
             $each="row of group.rows"
             $key="row.id"
@@ -486,15 +486,14 @@
             <slot from:name="concat('option-', row.id)">
               <span $if="row.detail" class="detail">
                 <span class="line">
-                  <span class="primary" from:id="concat(uid, '-option-', row.index, '-label')" $value="row.label"></span>
+                  <span class="primary" from:id="concat(uid, '-option-', row.index, '-label')">{$row.label}</span>
                   <ui-badge $if="row.tag" from:tone="row.tag.tone" style:--ui-badge-color="row.tag.color"><span
                       from:id="concat(uid, '-option-', row.index, '-tag')"
-                      $value="row.tag.label"
-                    ></span></ui-badge>
+                    >{$row.tag.label}</span></ui-badge>
                 </span>
-                <span $if="row.description" class="description" from:id="concat(uid, '-option-', row.index, '-description')" $value="row.description"></span>
+                <span $if="row.description" class="description" from:id="concat(uid, '-option-', row.index, '-description')">{$row.description}</span>
               </span>
-              <span $if="not row.detail" class="primary" $value="row.label"></span>
+              <span $if="not row.detail" class="primary">{$row.label}</span>
             </slot>
           </div>
         </div>
@@ -517,7 +516,7 @@
       <slot name="footer"></slot>
     </div>
     <div class="message" from:id="concat(uid, '-validation')" from:hidden="not validation.issues.length">
-      <div $each="issue of validation.issues" $value="issue.message"></div>
+      <div $each="issue of validation.issues">{$issue.message}</div>
     </div>
     <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{$statusText}</div>
     <div class="authored-options" $ref="options" hidden aria-hidden="true"><slot></slot></div>

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

@@ -36,8 +36,8 @@
         from:data-index="index"
         from: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>
+        <span class="avatar" aria-hidden="true">{$row.initials}</span>
+        <span class="body"><span class="label">{$row.label}</span><span $if="row.detail" class="detail">{$row.detail}</span></span>
       </li>
       <slot></slot>
     </ul>

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

@@ -35,7 +35,7 @@
         from:data-value="item.value"
       >
         <span class="icon" aria-hidden="true"><ui-icon from:name="item.icon"></ui-icon></span>
-        <span class="body"><span class="title" $value="item.title"></span><span class="description" $value="item.description"></span></span>
+        <span class="body"><span class="title">{$item.title}</span><span class="description">{$item.description}</span></span>
       </li>
       <slot></slot>
     </ul>

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

@@ -56,14 +56,14 @@
           from:data-action="swatch.action"
         >
           <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
-          <span class="swatch-label" $value="swatch.label"></span>
+          <span class="swatch-label">{$swatch.label}</span>
         </button>
       </div>
     </div>
     <template $each="section of sections" $key="section.heading">
       <div class="sep"></div>
       <div class="section" role="none">
-        <div class="heading" role="presentation" $value="section.heading"></div>
+        <div class="heading" role="presentation">{$section.heading}</div>
         <button
           $each="item of section.items"
           $key="item.action"
@@ -74,7 +74,7 @@
           from:data-action="item.action"
         >
           <ui-icon from:name="item.icon"></ui-icon>
-          <span $value="item.label"></span>
+          <span>{$item.label}</span>
         </button>
       </div>
     </template>

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -127,7 +127,7 @@
           from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
-          <span class="tooltip" role="tooltip" $value="control.label"></span>
+          <span class="tooltip" role="tooltip">{$control.label}</span>
         </button>
       </div>
     </div>
@@ -151,7 +151,7 @@
           from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
-          <span class="tooltip" role="tooltip" $value="control.label"></span>
+          <span class="tooltip" role="tooltip">{$control.label}</span>
         </button>
       </div>
     </div>

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -71,7 +71,7 @@
     <div $if="structure" class="group" role="group" aria-label="Table structure">
       <button $each="item of structure" $key="item.action" type="button" from:data-action="item.action">
         <ui-icon from:name="item.icon"></ui-icon>
-        <span $value="item.label"></span>
+        <span>{$item.label}</span>
       </button>
     </div>
     <div $if="(alignments or structure) and hasOverflow" class="sep" aria-hidden="true"></div>
@@ -96,12 +96,12 @@
               from:data-action="swatch.action"
             >
               <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
-              <span $value="swatch.label"></span>
+              <span>{$swatch.label}</span>
             </button>
           </div>
         </div>
         <div $each="section of sections" $key="section.heading" class="menu-section divided" role="none">
-          <div class="menu-heading" role="presentation" $value="section.heading"></div>
+          <div class="menu-heading" role="presentation">{$section.heading}</div>
           <button
             $each="item of section.items"
             $key="item.action"
@@ -112,7 +112,7 @@
             from:data-action="item.action"
           >
             <ui-icon from:name="item.icon"></ui-icon>
-            <span $value="item.label"></span>
+            <span>{$item.label}</span>
           </button>
         </div>
       </div>

package/components/ui-image/ui-image.html

@@ -0,0 +1,177 @@
+<template component="ui-image" controller="./ui-image.js">
+  <defs>
+    <prop name="src" type="string" default="">The image source, used by the default media.</prop>
+    <prop name="alt" type="string" default="">A text alternative for the image.</prop>
+    <prop name="width" type="integer" nullable
+    >Image width in CSS pixels; omitted uses intrinsic size in block/center placement or responsive sizing when wrapping.</prop>
+    <prop name="height" type="integer" nullable>Image height in CSS pixels; resizing preserves the intrinsic aspect ratio.</prop>
+    <prop name="placement" type="keyword" values="block, center, wrap-left, wrap-right" default="block"
+    >Block keeps text below; center centers the image; wrap-left and wrap-right let following text flow beside it.</prop>
+    <prop name="selected" type="boolean" default="false">Outlines the media as the current selection.</prop>
+    <prop name="resizable" type="boolean" default="false"
+    >Shows four corner handles while selected. Drag to resize, or focus a handle and use arrow keys; Shift uses a larger increment.</prop>
+    <event name="resize" type="object">
+      <prop name="width" type="integer" required></prop>
+      <prop name="height" type="integer" required></prop>
+      <prop name="phase" type="keyword" values="preview, commit, cancel" required></prop>
+      <prop name="trigger" type="keyword" values="pointer, keyboard" required></prop>
+      Reports resize intent. Preview is transient; the consumer persists a commit. Escape and pointer cancellation restore the original size.
+    </event>
+  </defs>
+  <figure>
+    <div class="frame" $ref="frame">
+      <slot name="media"><img from:src="src" from:alt="alt" from:width="width" from:height="height"></slot>
+      <div class="handles" from:hidden="not (selected and resizable)">
+        <button type="button" class="handle" data-corner="top-left" aria-label="Resize image from top left"></button>
+        <button type="button" class="handle" data-corner="top-right" aria-label="Resize image from top right"></button>
+        <button type="button" class="handle" data-corner="bottom-left" aria-label="Resize image from bottom left"></button>
+        <button type="button" class="handle" data-corner="bottom-right" aria-label="Resize image from bottom right"></button>
+      </div>
+      <slot name="controls"></slot>
+    </div>
+  </figure>
+  <style>
+    :host {
+      display: flex;
+      justify-content: flex-start;
+      box-sizing: border-box;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      margin: 0;
+      padding: var(--ui-space-3) 0;
+    }
+    :host-state([placement="center"]) {
+      justify-content: center;
+    }
+    :host-state([placement="wrap-left"]) {
+      float: left;
+      padding-inline-end: var(--ui-space-4);
+    }
+    :host-state([placement="wrap-right"]) {
+      float: right;
+      padding-inline-start: var(--ui-space-4);
+    }
+    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) {
+      inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
+    }
+    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .frame {
+      inline-size: 100%;
+    }
+    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .frame img,
+    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .frame :slotted(img) {
+      inline-size: 100%;
+    }
+    .frame {
+      position: relative;
+      flex: 0 1 auto;
+      inline-size: var(--_ui-image-width, fit-content);
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      align-self: flex-start;
+      border-radius: var(--ui-radius-md);
+    }
+    .frame img, .frame :slotted(img) {
+      display: block;
+      max-inline-size: 100%;
+      block-size: auto;
+      margin: 0;
+      border-radius: inherit;
+    }
+    :host[data-resizing] .frame img, :host[data-resizing] .frame :slotted(img) {
+      inline-size: 100%;
+    }
+    :host-state([selected]) .frame {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-border-width);
+    }
+    .handle {
+      position: absolute;
+      z-index: 1;
+      inline-size: 24px;
+      block-size: 24px;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      touch-action: none;
+    }
+    .handle::after {
+      content: "";
+      position: absolute;
+      inset: 8px;
+      background: var(--ui-surface);
+      border: var(--ui-border-width) solid var(--ui-focus-ring);
+      border-radius: var(--ui-radius-sm);
+    }
+    .handle:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      border-radius: var(--ui-radius-sm);
+    }
+    .handle[data-corner="top-left"] {
+      top: -12px;
+      left: -12px;
+      cursor: nwse-resize;
+    }
+    .handle[data-corner="top-right"] {
+      top: -12px;
+      right: -12px;
+      cursor: nesw-resize;
+    }
+    .handle[data-corner="bottom-left"] {
+      bottom: -12px;
+      left: -12px;
+      cursor: nesw-resize;
+    }
+    .handle[data-corner="bottom-right"] {
+      bottom: -12px;
+      right: -12px;
+      cursor: nwse-resize;
+    }
+    .handles[hidden], :host[hidden] {
+      display: none;
+    }
+    @media (max-width: 767px) {
+      :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) {
+        float: none;
+        inline-size: 100%;
+        padding-inline: 0;
+      }
+      :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .handles {
+        display: none;
+      }
+    }
+    @media (pointer: coarse) {
+      .handle {
+        inline-size: 44px;
+        block-size: 44px;
+      }
+      .handle::after {
+        inset: 18px;
+      }
+      .handle[data-corner="top-left"] {
+        top: -22px;
+        left: -22px;
+      }
+      .handle[data-corner="top-right"] {
+        top: -22px;
+        right: -22px;
+      }
+      .handle[data-corner="bottom-left"] {
+        bottom: -22px;
+        left: -22px;
+      }
+      .handle[data-corner="bottom-right"] {
+        bottom: -22px;
+        right: -22px;
+      }
+    }
+    @media (forced-colors: active) {
+      :host-state([selected]) .frame, .handle:focus-visible {
+        outline-color: Highlight;
+      }
+      .handle::after {
+        border-color: Highlight;
+        background: Canvas;
+      }
+    }
+  </style>
+</template>

package/components/ui-image/ui-image.js

@@ -0,0 +1,107 @@
+/** Owns transient resize geometry; consumers own persistence and selection.
+ * @lifecycle Pointer capture ends on release, Escape, cancellation, or teardown.
+ * Only release commits a drag, so consumers can make it one undo operation.
+ */
+export default function controller(host) {
+  const root = host.element;
+  const frame = host.refs.frame;
+  const document = root.ownerDocument;
+  let drag = null;
+  const image = () => frame.querySelector("img");
+  const enabled = () => host.props.selected.value && host.props.resizable.value;
+  const measure = () => {
+    const media = image();
+    const rect = media.getBoundingClientRect();
+    return { width: rect.width, height: rect.height, ratio: (media.naturalHeight || rect.height || 1) / (media.naturalWidth || rect.width || 1) };
+  };
+  const dimensions = (width, ratio) => {
+    // The containing document bounds the media even when this figure floats.
+    const container = root.parentElement;
+    const style = document.defaultView.getComputedStyle(container);
+    const available = container.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+    const gap = parseFloat(document.defaultView.getComputedStyle(root).paddingLeft) + parseFloat(document.defaultView.getComputedStyle(root).paddingRight);
+    const maximum = Math.max(1, available - gap);
+    const next = Math.round(Math.min(maximum, Math.max(Math.min(32, maximum), width)));
+    return { width: next, height: Math.max(1, Math.round(next * ratio)) };
+  };
+  const restore = () => {
+    root.removeAttribute("data-resizing");
+    const width = host.props.width.value;
+    if (width > 0) root.style.setProperty("--_ui-image-width", `${width}px`);
+    else root.style.removeProperty("--_ui-image-width");
+  };
+  const dispatch = (size, phase, trigger) => host.dispatch("resize", { ...size, phase, trigger });
+  const finish = (phase) => {
+    if (!drag) return;
+    const current = drag;
+    drag = null;
+    document.removeEventListener("keydown", onEscape, true);
+    if (current.handle.hasPointerCapture(current.pointer)) current.handle.releasePointerCapture(current.pointer);
+    if (phase === "commit" && !current.moved) phase = "cancel";
+    restore();
+    dispatch(phase === "commit" ? current.size : { width: Math.round(current.width), height: Math.round(current.height) }, phase, "pointer");
+  };
+  const onDown = (event) => {
+    const handle = event.target.closest("[data-corner]");
+    if (!enabled() || !handle || !root.contains(handle) || event.button !== 0 || drag) return;
+    event.preventDefault();
+    const measured = measure();
+    drag = { ...measured, x: event.clientX, y: event.clientY, handle, pointer: event.pointerId, size: dimensions(measured.width, measured.ratio) };
+    handle.setPointerCapture(event.pointerId);
+    document.addEventListener("keydown", onEscape, true);
+    root.setAttribute("data-resizing", "");
+  };
+  const onMove = (event) => {
+    if (!drag || drag.pointer !== event.pointerId) return;
+    const corner = drag.handle.dataset.corner;
+    const dx = (event.clientX - drag.x) * (corner.endsWith("left") ? -1 : 1);
+    const dy = (event.clientY - drag.y) * (corner.startsWith("top") ? -1 : 1);
+    // Project onto the aspect-ratio diagonal: either axis can drive a corner.
+    const delta = (dx + drag.ratio * dy) / (1 + drag.ratio * drag.ratio);
+    drag.size = dimensions(drag.width + delta, drag.ratio);
+    drag.moved = drag.size.width !== Math.round(drag.width);
+    root.style.setProperty("--_ui-image-width", `${drag.size.width}px`);
+    dispatch(drag.size, "preview", "pointer");
+  };
+  const onUp = event => { if (drag?.pointer === event.pointerId) finish("commit"); };
+  const onCancel = event => { if (drag?.pointer === event.pointerId) finish("cancel"); };
+  const onEscape = (event) => {
+    if (event.key !== "Escape" || !drag) return;
+    event.preventDefault(); event.stopPropagation(); finish("cancel");
+  };
+  const onKey = (event) => {
+    const handle = event.target.closest?.("[data-corner]");
+    if (!enabled() || !handle || !root.contains(handle) || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    event.preventDefault(); event.stopPropagation();
+    const measured = measure();
+    const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+    const backwards = event.key === "ArrowLeft" || event.key === "ArrowUp";
+    const reverse = horizontal ? handle.dataset.corner.endsWith("left") : handle.dataset.corner.startsWith("top");
+    const amount = (backwards !== reverse ? -1 : 1) * (event.shiftKey ? 32 : 8);
+    dispatch(dimensions(measured.width + amount / (horizontal ? 1 : measured.ratio), measured.ratio), "commit", "keyboard");
+  };
+  const stop = host.effect(() => {
+    // Read all external geometry before deciding whether to abandon a preview.
+    host.props.width.value; host.props.height.value; host.props.placement.value;
+    if (drag) finish("cancel");
+    restore();
+    enabled();
+  });
+  root.addEventListener("pointerdown", onDown);
+  root.addEventListener("pointermove", onMove);
+  root.addEventListener("pointerup", onUp);
+  root.addEventListener("pointercancel", onCancel);
+  root.addEventListener("lostpointercapture", onCancel);
+  root.addEventListener("keydown", onKey);
+  return () => {
+    stop();
+    if (drag) { const active = drag; drag = null; if (active.handle.hasPointerCapture(active.pointer)) active.handle.releasePointerCapture(active.pointer); }
+    root.removeEventListener("pointerdown", onDown);
+    root.removeEventListener("pointermove", onMove);
+    root.removeEventListener("pointerup", onUp);
+    root.removeEventListener("pointercancel", onCancel);
+    root.removeEventListener("lostpointercapture", onCancel);
+    root.removeEventListener("keydown", onKey);
+    document.removeEventListener("keydown", onEscape, true);
+  };
+}

package/components/ui-listbox/ui-listbox.html

@@ -46,7 +46,7 @@
         from:aria-selected="choice.selected"
         from:aria-disabled="choice.disabled"
       >
-        <span $value="choice.label"></span>
+        <span>{$choice.label}</span>
       </div>
     </ui-scroll-area>
     <select

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

@@ -104,7 +104,7 @@ export default function controller(host) {
   const onClick = (event) => select(menuItemFrom(event.target), triggerFor(event));
   const onKeydown = (event) => {
     if (event.key === "Escape") {
-      if (host.props.inline.value) return;
+      if (host.props.inline.value || event.defaultPrevented) return;
       event.preventDefault();
       requestTopOverlayClose(document, "escape", "keyboard");
       return;

package/components/ui-popover/ui-popover.js

@@ -81,7 +81,10 @@ export default function controller(host) {
     lastOpen = open;
   };
   const onKeydown = (event) => {
-    if (event.key === "Escape") requestTopOverlayClose(document, "escape", "keyboard");
+    if (event.key === "Escape" && !event.defaultPrevented) {
+      event.preventDefault();
+      requestTopOverlayClose(document, "escape", "keyboard");
+    }
   };
   element.addEventListener("keydown", onKeydown);
   const stop = host.effect(apply);

package/components/ui-separator/ui-separator.html

@@ -2,6 +2,8 @@
   <defs>
     <prop name="orientation" type="keyword" values="horizontal, vertical" default="horizontal"
     >Whether the separator divides stacked content (horizontal) or inline content (vertical).</prop>
+    <prop name="selectable" type="boolean" default="false">Gives a document divider a pointer-sized hit area. The editor owns selection and deletion.</prop>
+    <prop name="selected" type="boolean" default="false">Shows the selected document divider. Selection does not change separator semantics.</prop>
   </defs>
   <hr from:aria-orientation="orientation">
   <style>
@@ -25,5 +27,21 @@
       border-block-start: 0;
       border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
     }
+
+    :host-state([selectable]) {
+      min-block-size: var(--ui-control-size-sm);
+      border: 0;
+      background: linear-gradient(var(--ui-separator-color, var(--ui-border-divider)), var(--ui-separator-color, var(--ui-border-divider))) center / 100%
+        var(--ui-border-width) no-repeat;
+      cursor: pointer;
+    }
+    :host-state([selectable]):hover {
+      background-color: var(--ui-surface-hover);
+    }
+    :host-state([selected]) {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
+      border-radius: var(--ui-radius-sm);
+    }
   </style>
 </template>

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

@@ -37,7 +37,7 @@
       from:role="toast.role"
       from:data-tone="toast.tone"
     >
-      <span class="message" $value="toast.message"></span>
+      <span class="message">{$toast.message}</span>
       <span class="dismiss" from:data-toast="toast.id">
         <ui-icon-button size="sm" variant="ghost" from:round="true" from:label="concat('Dismiss ', toast.message)">
           <ui-icon name="x"></ui-icon>