@threadlabs/looma 0.23.21 → 0.23.23

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

@@ -1,9 +1,11 @@
 <link rel="component" href="../ui-spinner/ui-spinner.html">
+<link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-button" controller="./ui-button.js">
   <defs>
-    <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link" default="outline"
+    <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link, card" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is
-      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.</prop>
+      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the
+      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot.</prop>
     <prop name="size" type="keyword" values="xs, sm, md, lg" default="md"
     >Height, padding, and type size. xs is 1.5rem with the smallest text, for a control inside a line of small text; sm is the small control height (2rem by
       default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Under touch, sm
@@ -37,6 +39,34 @@
          table keyed by a boolean's text picks each value, and null leaves the attribute off. -->
   </defs>
   <template $match>
+    <a
+      $when="variant = 'card' and as = 'a'"
+      from:href="{ true: null, false: href }[concat(disabled or loading or pending)]"
+      from:target="target"
+      from:rel="rel"
+      from:aria-disabled="{ true: 'true', false: null }[concat(disabled or loading or pending)]"
+      from:aria-busy="loading or pending"
+      from:tabindex="{ true: '0', false: null }[concat((loading or pending) and not disabled)]"
+    >
+      <span class="card-icon"><ui-spinner $if="loading or pending" size="sm"></ui-spinner><template $if="not (loading or pending)"><slot
+            name="icon"
+          ></slot></template></span>
+      <span class="card-content"><slot></slot></span>
+      <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
+    </a>
+    <button
+      $when="variant = 'card'"
+      from:type="type"
+      from:disabled="disabled"
+      from:aria-disabled="{ true: 'true', false: null }[concat(loading or pending)]"
+      from:aria-busy="loading or pending"
+    >
+      <span class="card-icon"><ui-spinner $if="loading or pending" size="sm"></ui-spinner><template $if="not (loading or pending)"><slot
+            name="icon"
+          ></slot></template></span>
+      <span class="card-content"><slot></slot></span>
+      <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
+    </button>
     <a
       $when="as = 'a'"
       from:href="{ true: null, false: href }[concat(disabled or loading or pending)]"
@@ -233,6 +263,42 @@
       font-size: var(--ui-font-size-md);
     }
 
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+    :host-state([variant="card"]) {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: start;
+      gap: var(--ui-space-3);
+      inline-size: 100%;
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
+      text-align: start;
+      white-space: normal;
+      box-shadow: none;
+      background-image: none;
+    }
+    :host-state([variant="card"][size="lg"]) {
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
+    }
+    :host-state([variant="card"]):has(.card-icon:empty) {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+    .card-icon {
+      display: flex;
+      align-items: flex-start;
+    }
+    .card-icon:empty {
+      display: none;
+    }
+    .card-content {
+      min-inline-size: 0;
+    }
+    .card-action {
+      display: flex;
+      align-items: center;
+      align-self: center;
+    }
+
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
     :host:hover:not(:disabled, [aria-disabled="true"]) {

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-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

@@ -1,7 +1,11 @@
 <template component="ui-separator">
   <defs>
+    <prop name="emphasis" type="keyword" values="normal, strong" default="normal"
+    >Normal uses the decorative divider color; strong uses the stronger enclosing-edge color for clearer separation.</prop>
     <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>
@@ -17,13 +21,33 @@
       align-self: stretch;
       margin: 0;
       border: 0;
-      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
+      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+    }
+
+    :host-state([emphasis="strong"]) {
+      --_separator-color: var(--ui-border-strong);
     }
 
     :host[aria-orientation="vertical"] {
       block-size: auto;
       border-block-start: 0;
-      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
+      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_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>