@threadlabs/looma 0.4.0 → 0.5.0

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

@@ -0,0 +1,70 @@
+import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
+
+export default function controller(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
+  let anchor = null;
+  let surface = null;
+  let lastFor;
+  let lastPlacement;
+  let lastOpen;
+  let lastExternalOpen = Boolean(host.state.open);
+  host.state.internalOpen = lastExternalOpen;
+
+  const close = (reason, trigger) => {
+    host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger });
+  };
+  const onAnchorClick = (event) => {
+    host.state.internalOpen = !Boolean(host.state.internalOpen);
+    if (!host.state.internalOpen) close("action", event.detail === 0 ? "keyboard" : "pointer");
+  };
+  const ids = createIdResolver(document, () => apply());
+  const setup = () => {
+    const nextFor = String(host.state.for ?? "");
+    const nextPlacement = String(host.state.placement ?? "bottom-start");
+    if (surface && nextFor === lastFor && nextPlacement === lastPlacement) return;
+    lastFor = nextFor;
+    lastPlacement = nextPlacement;
+    surface?.destroy();
+    anchor?.removeEventListener("click", onAnchorClick);
+    anchor = ids.get(nextFor);
+    anchor?.addEventListener("click", onAnchorClick);
+    surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement }) : null;
+  };
+  const apply = () => {
+    const externalOpen = Boolean(host.state.open);
+    if (externalOpen !== lastExternalOpen) {
+      lastExternalOpen = externalOpen;
+      host.state.internalOpen = externalOpen;
+    }
+    setup();
+    const open = Boolean(host.state.internalOpen);
+    if (open) {
+      surface?.show();
+      openOverlay({ id: overlayId, modal: false, element, relatedElements: anchor ? [anchor] : [], dismissible: true, requestClose: close });
+    } else {
+      surface?.hide();
+      closeOverlay(document, overlayId);
+    }
+    if (lastOpen !== undefined && lastOpen !== open) {
+      host.dispatch(open ? "open" : "close", { open, reason: "programmatic", trigger: "programmatic" });
+    }
+    lastOpen = open;
+  };
+  const onKeydown = (event) => {
+    if (event.key === "Escape") requestTopOverlayClose(document, "escape", "keyboard");
+  };
+  element.addEventListener("keydown", onKeydown);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    ids.stop();
+    element.removeEventListener("keydown", onKeydown);
+    anchor?.removeEventListener("click", onAnchorClick);
+    surface?.destroy();
+    closeOverlay(document, overlayId);
+  };
+}

package/components/ui-radio/ui-radio.html

@@ -0,0 +1,57 @@
+<template component="ui-radio" controller="./ui-radio.js">
+  <defs>
+    <prop name="checked" type="boolean" default="false">Whether the radio is checked initially or when set externally.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="name" type="string" default="">name token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <prop name="value" type="string" default="on">value token.</prop>
+    <state name="internalChecked" :value="false"></state>
+    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <label>
+    <input type="radio" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :value="value" :name="name">
+    <span class="label"><slot></slot></span>
+  </label>
+  <style>
+    :host {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--ui-radio-gap, var(--ui-space-2));
+      max-inline-size: 100%;
+      color: var(--ui-text-primary);
+      cursor: pointer;
+    }
+
+    .label {
+      min-inline-size: 0;
+      line-height: var(--ui-line-height-md);
+    }
+
+    input {
+      flex: 0 0 auto;
+      inline-size: var(--ui-radio-size, 1.125rem);
+      block-size: var(--ui-radio-size, 1.125rem);
+      margin: 0.125em 0 0;
+      accent-color: var(--ui-accent-solid);
+      cursor: pointer;
+    }
+
+    input:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: 2px;
+    }
+
+    :host-state([disabled]) {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    :host-state([disabled]) input {
+      cursor: not-allowed;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-radio/ui-radio.js

@@ -0,0 +1,25 @@
+import { trackTrigger } from "../shared/trigger.js";
+
+// `checked` sets the control initially and whenever it changes; the user's changes update the state.
+export default function controller(host) {
+  const input = host.refs.input;
+  const [trigger, stopTracking] = trackTrigger(host);
+  let external = host.state.checked;
+  host.state.internalChecked = Boolean(external);
+  const stop = host.effect(() => {
+    if (host.state.checked === external) return;
+    external = host.state.checked;
+    host.state.internalChecked = Boolean(external);
+  });
+  const onChange = () => {
+    host.state.internalChecked = input.checked;
+    if (!input.checked) return;
+    host.dispatch("change", { checked: input.checked, value: String(host.state.value ?? "on"), trigger: trigger() });
+  };
+  input.addEventListener("change", onChange);
+  return () => {
+    stop();
+    stopTracking();
+    input.removeEventListener("change", onChange);
+  };
+}

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

@@ -0,0 +1,51 @@
+<template component="ui-radio-group" controller="./ui-radio-group.js">
+  <defs>
+    <prop name="value" type="string" default="">value token.</prop>
+    <prop name="name" type="string" default="">name token.</prop>
+    <prop name="label" type="string" default="Options">label token.</prop>
+    <prop name="orientation" type="horizontal | vertical" default="horizontal">orientation token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <state name="internalValue" :value="''"></state>
+    <event name="select" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <fieldset role="radiogroup">
+    <legend><template $value="label"></template></legend>
+    <slot></slot>
+  </fieldset>
+  <style>
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+
+    legend {
+      float: inline-start;
+      inline-size: 100%;
+      margin: 0 0 var(--ui-space-2);
+      padding: 0;
+      color: var(--ui-text-primary);
+      font-weight: var(--ui-font-medium);
+    }
+
+    legend + * {
+      clear: both;
+    }
+
+    :host-state([orientation="vertical"]) {
+      display: inline-grid;
+      justify-items: start;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-radio-group/ui-radio-group.js

@@ -0,0 +1,42 @@
+import { trackTrigger } from "../shared/trigger.js";
+
+let groups = 0;
+
+// Native radios that share a name already move and check with the arrow keys. The group gives its
+// radios that name, applies a controlled value, and reports the user's choice.
+export default function controller(host) {
+  const element = host.element;
+  const name = String(host.state.name || `ui-radio-group-${++groups}`);
+  const [trigger, stopTracking] = trackTrigger(host);
+  const inputs = () => Array.from(element.querySelectorAll('[data-component~="ui-radio"] input[type="radio"]'));
+  let external = host.state.value;
+  host.state.internalValue = String(external ?? "");
+  const stop = host.effect(() => {
+    if (host.state.value !== external) {
+      external = host.state.value;
+      host.state.internalValue = String(external ?? "");
+    }
+    const value = host.state.internalValue;
+    const disabled = Boolean(host.state.disabled);
+    for (const input of inputs()) {
+      input.name = name;
+      input.checked = input.value === value;
+      input.disabled = disabled;
+    }
+  });
+  const onChange = (event) => {
+    const input = event.target;
+    if (input?.type !== "radio" || !input.checked || input.value === host.state.internalValue) return;
+    const previousValue = host.state.internalValue;
+    host.state.internalValue = input.value;
+    const how = trigger();
+    host.dispatch("select", { value: input.value, previousValue, trigger: how });
+    host.dispatch("change", { checked: true, value: input.value, trigger: how });
+  };
+  element.addEventListener("change", onChange);
+  return () => {
+    stop();
+    stopTracking();
+    element.removeEventListener("change", onChange);
+  };
+}

package/components/ui-reel/ui-reel.html

@@ -0,0 +1,67 @@
+<template component="ui-reel">
+  <defs>
+    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>
+    <prop name="itemWidth" type="sm | md | lg">itemWidth token.</prop>
+    <prop name="snap" type="start | center">snap token.</prop>
+  </defs>
+  <div role="region" tabindex="0"><slot></slot></div>
+  <style>
+    :host {
+      --_reel-gap: var(--ui-space-4, 1rem);
+      --_reel-item-width: auto;
+      display: flex;
+      inline-size: 100%;
+      gap: var(--ui-reel-gap, var(--_reel-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      overscroll-behavior-inline: contain;
+    }
+
+    :host > :slotted(*) {
+      min-inline-size: 0;
+      flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));
+    }
+
+    :host-state([gap="xs"]) {
+      --_reel-gap: var(--ui-space-2, 0.5rem);
+    }
+    :host-state([gap="s"]) {
+      --_reel-gap: var(--ui-space-3, 0.75rem);
+    }
+    :host-state([gap="m"]) {
+      --_reel-gap: var(--ui-space-4, 1rem);
+    }
+    :host-state([gap="l"]) {
+      --_reel-gap: var(--ui-space-5, 1.5rem);
+    }
+    :host-state([gap="xl"]) {
+      --_reel-gap: var(--ui-space-6, 2rem);
+    }
+    :host-state([itemWidth="sm"]) {
+      --_reel-item-width: 12rem;
+    }
+    :host-state([itemWidth="md"]) {
+      --_reel-item-width: 16rem;
+    }
+    :host-state([itemWidth="lg"]) {
+      --_reel-item-width: 20rem;
+    }
+    :host-state([snap]) {
+      scroll-snap-type: inline mandatory;
+    }
+    :host-state([snap="start"]) > :slotted(*) {
+      scroll-snap-align: start;
+    }
+    :host-state([snap="center"]) > :slotted(*) {
+      scroll-snap-align: center;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-search-result-row/ui-search-result-row.html

@@ -0,0 +1,101 @@
+<template component="ui-search-result-row">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="selected" type="boolean" default="false">selected token.</prop>
+  </defs>
+  <button type="button" :disabled="disabled">
+    <span class="leading"><slot name="leading"></slot></span>
+    <span class="content">
+      <span class="title"><slot name="title"></slot></span>
+      <span class="meta"><slot name="meta"></slot></span>
+      <span class="excerpt"><slot name="excerpt"></slot></span>
+    </span>
+    <span class="trailing"><slot name="trailing"></slot></span>
+  </button>
+  <style>
+    :host {
+      appearance: none;
+      inline-size: 100%;
+      min-block-size: var(--ui-search-result-row-min-height, 56px);
+      margin: 0;
+      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));
+      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));
+      display: flex;
+      align-items: flex-start;
+      gap: var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));
+      background: var(--ui-search-result-row-bg, transparent);
+      border: none;
+      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));
+      color: inherit;
+      cursor: pointer;
+      text-align: left;
+      transition: background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+    }
+
+    :host:last-child {
+      border-block-end: none;
+    }
+
+    :host:hover:enabled {
+      background: var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%));
+    }
+
+    :host-state([selected]) {
+      background: var(
+        --ui-search-result-row-selected-bg,
+        var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))
+      );
+    }
+
+    :host:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, #2563eb);
+      outline-offset: -2px;
+    }
+
+    :host:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .leading,
+    .trailing {
+      display: inline-flex;
+      align-items: flex-start;
+      flex-shrink: 0;
+    }
+
+    .content {
+      min-inline-size: 0;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .title,
+    .meta,
+    .excerpt {
+      display: block;
+      min-inline-size: 0;
+    }
+
+    /* An unused region takes no space. */
+    .leading:empty,
+    .meta:empty,
+    .excerpt:empty,
+    .trailing:empty {
+      display: none;
+    }
+
+    :slotted([slot="title"]),
+    :slotted([slot="meta"]),
+    :slotted([slot="excerpt"]) {
+      display: block;
+      margin: 0;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,142 @@
+<template component="ui-search-shell" controller="./ui-search-shell.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Shows the search surface.</prop>
+    <prop name="modal" type="boolean" default="false">Makes the rest of the page inert while the search surface is open.</prop>
+    <prop name="dismissible" type="boolean" default="false">Allows Escape and backdrop activation to close the search surface.</prop>
+    <prop name="label" type="string" default="Search">Provides the native dialog's accessible name.</prop>
+    <state name="internalOpen" :value="false"></state>
+    <event
+      name="close"
+      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></event>
+  </defs>
+  <div>
+    <dialog $ref="dialog" :aria-label="label">
+      <div class="panel">
+        <div class="search"><slot name="search"></slot></div>
+        <div class="status"><slot name="status"></slot></div>
+        <div class="body"><slot name="body"></slot></div>
+        <div class="footer"><slot name="footer"></slot></div>
+      </div>
+    </dialog>
+  </div>
+  <style>
+    :host {
+      display: contents;
+    }
+
+    dialog {
+      position: fixed;
+      inset: 0;
+      z-index: var(--ui-search-shell-z-index, 400);
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: none;
+      block-size: 100%;
+      max-block-size: none;
+      margin: 0;
+      padding: var(--ui-search-shell-padding-top, 10vh) var(--ui-search-shell-viewport-gap, var(--ui-space-4))
+        var(--ui-search-shell-viewport-gap, var(--ui-space-4));
+      overflow: auto;
+      border: 0;
+      background: var(--ui-overlay-backdrop);
+      color: var(--ui-text-primary);
+    }
+
+    dialog::backdrop {
+      background: var(--ui-overlay-backdrop);
+    }
+
+    .panel {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      inline-size: min(100%, var(--ui-search-shell-max-width, 40rem));
+      max-block-size: var(--ui-search-shell-max-height, 80vh);
+      margin-inline: auto;
+      overflow: hidden;
+      background: var(--ui-search-shell-bg, var(--ui-surface-elevated));
+      border: 1px solid var(--ui-search-shell-border, var(--ui-border-default));
+      border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
+      box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
+    }
+
+    .search {
+      padding: var(--ui-space-3);
+      border-block-end: 1px solid var(--ui-border-default);
+    }
+
+    :slotted(input[slot="search"]) {
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-block-size: var(--ui-control-min-block-size);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 1px solid var(--ui-control-border);
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-control-surface);
+      color: var(--ui-text-primary);
+      font: inherit;
+      box-shadow: var(--ui-shadow-xs);
+    }
+
+    :slotted(input[slot="search"]:focus-visible) {
+      border-color: var(--ui-control-focus);
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 2px;
+    }
+
+    .status,
+    .footer {
+      flex-shrink: 0;
+      padding: var(--ui-space-2) var(--ui-space-4);
+      color: var(--ui-text-secondary);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    .status {
+      border-block-end: 1px solid var(--ui-border-default);
+    }
+
+    /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
+    .footer {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--ui-space-2);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
+    .status:empty,
+    .footer:empty {
+      display: none;
+    }
+
+    .body {
+      flex: 1;
+      min-block-size: 0;
+      overflow: auto;
+      padding: var(--ui-space-2);
+    }
+
+    @media (max-width: 47.9375rem) {
+      dialog {
+        padding: 0;
+      }
+
+      .panel {
+        inline-size: 100%;
+        min-block-size: 100dvh;
+        max-block-size: none;
+        border: 0;
+        border-radius: 0;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,60 @@
+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 [trigger, stopTracking] = trackTrigger(host);
+  let external = host.state.open;
+  let activeModal = Boolean(host.state.modal);
+  let suppressNativeClose = false;
+  host.state.internalOpen = Boolean(external);
+
+  const dispatchClose = (reason, how) => {
+    if (!host.state.internalOpen) return;
+    host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger: how });
+  };
+  const closeNative = () => {
+    if (!dialog.open) return;
+    suppressNativeClose = true;
+    dialog.close();
+    suppressNativeClose = false;
+  };
+  const stop = host.effect(() => {
+    if (host.state.open !== external) {
+      external = host.state.open;
+      host.state.internalOpen = Boolean(external);
+    }
+    const modal = Boolean(host.state.modal);
+    if (dialog.open && modal !== activeModal) closeNative();
+    activeModal = modal;
+    if (host.state.internalOpen && !dialog.open) {
+      if (modal) dialog.showModal();
+      else dialog.show();
+    } else if (!host.state.internalOpen) {
+      closeNative();
+    }
+  });
+
+  const onCancel = (event) => {
+    event.preventDefault();
+    if (host.state.dismissible) dispatchClose("escape", "keyboard");
+  };
+  const onClick = (event) => {
+    if (host.state.dismissible && event.target === dialog) dispatchClose("light-dismiss", trigger());
+  };
+  const onClose = () => {
+    if (!suppressNativeClose && host.state.internalOpen) dispatchClose("action", trigger());
+  };
+  dialog.addEventListener("cancel", onCancel);
+  dialog.addEventListener("click", onClick);
+  dialog.addEventListener("close", onClose);
+  return () => {
+    stop();
+    stopTracking();
+    dialog.removeEventListener("cancel", onCancel);
+    dialog.removeEventListener("click", onClick);
+    dialog.removeEventListener("close", onClose);
+    closeNative();
+  };
+}