@threadlabs/looma 0.3.1 → 0.5.0

package/components/ui-switcher/ui-switcher.html

@@ -0,0 +1,65 @@
+<template component="ui-switcher">
+  <defs>
+    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>
+    <prop name="threshold" type="xs | sm | md | lg">threshold token.</prop>
+    <prop name="align" type="start | center | end | stretch">align token.</prop>
+  </defs>
+  <div><slot></slot></div>
+  <style>
+    :host {
+      --_switcher-gap: var(--ui-space-4, 1rem);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ui-switcher-gap, var(--_switcher-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :host > :slotted(*) {
+      min-inline-size: 0;
+      flex-grow: 1;
+      /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
+      flex-basis: calc((var(--ui-switcher-threshold, 30rem) - 100%) * 999);
+    }
+
+    :host-state([gap="xs"]) {
+      --_switcher-gap: var(--ui-space-2, 0.5rem);
+    }
+    :host-state([gap="s"]) {
+      --_switcher-gap: var(--ui-space-3, 0.75rem);
+    }
+    :host-state([gap="m"]) {
+      --_switcher-gap: var(--ui-space-4, 1rem);
+    }
+    :host-state([gap="l"]) {
+      --_switcher-gap: var(--ui-space-5, 1.5rem);
+    }
+    :host-state([gap="xl"]) {
+      --_switcher-gap: var(--ui-space-6, 2rem);
+    }
+    :host-state([threshold="xs"]) > :slotted(*) {
+      flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);
+    }
+    :host-state([threshold="md"]) > :slotted(*) {
+      flex-basis: calc((var(--ui-switcher-threshold, 45rem) - 100%) * 999);
+    }
+    :host-state([threshold="lg"]) > :slotted(*) {
+      flex-basis: calc((var(--ui-switcher-threshold, 60rem) - 100%) * 999);
+    }
+    :host-state([align="start"]) {
+      align-items: flex-start;
+    }
+    :host-state([align="center"]) {
+      align-items: center;
+    }
+    :host-state([align="end"]) {
+      align-items: flex-end;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-tabs/ui-tabs.html

@@ -0,0 +1,134 @@
+<template component="ui-tabs" controller="./ui-tabs.js">
+  <defs>
+    <prop name="label" type="string" default="Tabs">label token.</prop>
+    <prop name="value" type="string" default="">value token.</prop>
+    <prop name="orientation" type="horizontal | vertical" default="horizontal">orientation token.</prop>
+    <prop name="stretch" type="boolean" default="false">Share the full width of the tab list equally between tabs instead of sizing each to its label.</prop>
+    <state name="internalValue" :value="''"></state>
+    <state name="tabs" :value="[]"></state>
+    <event name="select" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <div>
+    <div class="list" $ref="list" role="tablist" :aria-label="label" :aria-orientation="orientation">
+      <button
+        $each="tab of tabs"
+        $key="tab.id"
+        type="button"
+        role="tab"
+        :id="format('%s-tab', tab.id)"
+        :value="tab.id"
+        :aria-controls="tab.id"
+        :aria-selected="tab.id = internalValue"
+        $value="tab.label"
+      >
+      </button>
+    </div>
+    <div class="panels" $ref="panels"><slot></slot></div>
+  </div>
+  <style>
+    :host {
+      display: grid;
+      inline-size: 100%;
+      min-inline-size: 0;
+    }
+
+    .list {
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: max-content;
+      justify-content: start;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
+      overflow-x: auto;
+      /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
+         strip or the page vertically. */
+      overflow-y: hidden;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
+      border-block-end: 1px solid var(--ui-border-default);
+    }
+
+    .list button {
+      min-block-size: 2.5rem;
+      margin: 0 0 -1px;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border: 0;
+      border-block-end: 2px solid transparent;
+      background: transparent;
+      color: var(--ui-text-secondary);
+      font: inherit;
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium, 500);
+      cursor: pointer;
+      transition:
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :host-state([stretch]) .list {
+      grid-auto-columns: minmax(max-content, 1fr);
+    }
+
+    .list button {
+      white-space: nowrap;
+    }
+
+    .list button:hover {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-muted);
+    }
+    .list button[aria-selected="true"] {
+      color: var(--ui-accent-solid);
+      border-block-end-color: var(--ui-accent-solid);
+    }
+    .list button:focus-visible {
+      position: relative;
+      outline: none;
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+      border-radius: var(--ui-radius-1);
+    }
+
+    .panels {
+      min-inline-size: 0;
+    }
+    :slotted(*) {
+      padding: var(--ui-space-4);
+    }
+
+    :host-state([orientation="vertical"]) {
+      grid-template-columns: max-content minmax(0, 1fr);
+      align-items: start;
+    }
+
+    :host-state([orientation="vertical"]) .list {
+      grid-auto-flow: row;
+      grid-auto-columns: auto;
+      border-block-end: 0;
+      border-inline-end: 1px solid var(--ui-border-default);
+    }
+
+    :host-state([orientation="vertical"]) .list button {
+      margin: 0 -1px 0 0;
+      border-block-end: 0;
+      border-inline-end: 2px solid transparent;
+      text-align: start;
+    }
+
+    :host-state([orientation="vertical"]) .list button[aria-selected="true"] {
+      border-inline-end-color: var(--ui-accent-solid);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .list button {
+        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-tabs/ui-tabs.js

@@ -0,0 +1,81 @@
+import { trackTrigger } from "../shared/trigger.js";
+
+let panelIds = 0;
+
+/** Lists the authored panels (each labelled by its aria-label) as tabs and shows the selected one. */
+export default function controller(host) {
+  const { list, panels: container } = host.refs;
+  const [trigger, stopTracking] = trackTrigger(host);
+  const panels = () => Array.from(container.children).filter((child) => child instanceof HTMLElement);
+  let external = String(host.state.value || "");
+  host.state.internalValue = external;
+
+  const readPanels = () => {
+    const items = panels();
+    host.state.tabs = items.map((panel, index) => {
+      if (!panel.id) panel.id = `ui-tab-panel-${++panelIds}`;
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", `${panel.id}-tab`);
+      return { id: panel.id, label: panel.getAttribute("aria-label") || `Tab ${index + 1}` };
+    });
+    if (!items.some((panel) => panel.id === host.state.internalValue)) {
+      host.state.internalValue = external || items[0]?.id || "";
+    }
+  };
+  const stop = host.effect(() => {
+    const value = String(host.state.value || "");
+    if (value !== external) {
+      external = value;
+      host.state.internalValue = value;
+    }
+    const selected = host.state.internalValue;
+    for (const panel of panels()) panel.hidden = panel.id !== selected;
+    // Roving focus: only the selected tab is in the tab order.
+    for (const button of list.querySelectorAll('[role="tab"]')) button.tabIndex = button.value === selected ? 0 : -1;
+  });
+
+  const select = (button, how) => {
+    const previousValue = host.state.internalValue || undefined;
+    host.state.internalValue = button.value;
+    host.dispatch("select", { value: button.value, previousValue, trigger: how });
+  };
+  const onClick = (event) => {
+    const button = event.target.closest?.('[role="tab"]');
+    if (button && list.contains(button)) select(button, trigger());
+  };
+  const onKeydown = (event) => {
+    const button = event.target.closest?.('[role="tab"]');
+    if (!button || !list.contains(button)) return;
+    const buttons = Array.from(list.querySelectorAll('[role="tab"]'));
+    const vertical = host.state.orientation === "vertical";
+    const previousKey = vertical ? "ArrowUp" : "ArrowLeft";
+    const nextKey = vertical ? "ArrowDown" : "ArrowRight";
+    if (event.key !== previousKey && event.key !== nextKey) return;
+    event.preventDefault();
+    const index = buttons.indexOf(button);
+    const next = buttons[(index + (event.key === nextKey ? 1 : buttons.length - 1)) % buttons.length];
+    select(next, "keyboard");
+    next.focus();
+  };
+  // A vertical mouse wheel over an overflowing strip scrolls it sideways instead of the page.
+  // Trackpad gestures already carry a horizontal delta and are left to the browser.
+  const onWheel = (event) => {
+    if (list.scrollWidth <= list.clientWidth || event.deltaX !== 0 || event.ctrlKey) return;
+    event.preventDefault();
+    list.scrollLeft += event.deltaY;
+  };
+  list.addEventListener("click", onClick);
+  list.addEventListener("keydown", onKeydown);
+  list.addEventListener("wheel", onWheel, { passive: false });
+  const observer = new MutationObserver(readPanels);
+  observer.observe(container, { childList: true });
+  readPanels();
+  return () => {
+    stop();
+    stopTracking();
+    observer.disconnect();
+    list.removeEventListener("click", onClick);
+    list.removeEventListener("keydown", onKeydown);
+    list.removeEventListener("wheel", onWheel);
+  };
+}

package/components/ui-textarea/ui-textarea.html

@@ -0,0 +1,80 @@
+<template component="ui-textarea" controller="./ui-textarea.js">
+  <defs>
+    <prop name="value" type="string">Current text value.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents editing and form submission.</prop>
+    <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
+    <prop name="readonly" type="boolean" default="false">Allows selection without allowing edits.</prop>
+    <prop name="required" type="boolean" default="false">Marks the control as required for form validation.</prop>
+    <prop name="rows" type="integer" default="4">Initial number of visible text rows.</prop>
+  </defs>
+  <textarea :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid" :rows="rows"></textarea>
+  <style>
+    :host {
+      box-sizing: border-box;
+      display: inline-block;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: calc(var(--ui-space-12, 3rem) * 2);
+      margin: 0;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      appearance: none;
+      resize: vertical;
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--ui-textarea-radius, var(--ui-radius-2));
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      color: var(--ui-text-primary);
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      box-shadow: var(--ui-textarea-shadow, var(--ui-control-inset));
+      transition:
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+    :host::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+      color: inherit;
+    }
+
+    :host::placeholder {
+      color: var(--ui-control-placeholder, var(--ui-text-secondary));
+      opacity: 1;
+    }
+
+    :host:hover:not(:focus):not(:disabled) {
+      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+    }
+
+    :host:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      outline: none;
+      box-shadow: var(--ui-textarea-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+    }
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+    :host[aria-invalid="true"],
+    :host:user-invalid {
+      border-color: var(--ui-danger-solid);
+    }
+
+    :host:is([aria-invalid="true"], :user-invalid):focus-visible {
+      box-shadow:
+        var(--ui-control-inset),
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    }
+
+    :host:disabled {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      color: var(--ui-text-muted);
+      box-shadow: none;
+      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-textarea/ui-textarea.js

@@ -0,0 +1,7 @@
+// The value attribute only sets the default; a controlled value is applied to the live textarea.
+export default function controller(host) {
+  return host.effect(() => {
+    const value = host.state.value;
+    if (value !== undefined && value !== null && host.element.value !== String(value)) host.element.value = String(value);
+  });
+}

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

@@ -0,0 +1,127 @@
+<link rel="component" href="../ui-icon-button/ui-icon-button.html">
+<template component="ui-toast-region" controller="./ui-toast-region.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Whether the messages authored inside the region are visible.</prop>
+    <prop name="message" type="string" default="Notification">Fallback message used by the declarative show command.</prop>
+    <prop name="auto" type="boolean" default="false"
+    >Dismiss each message automatically after its duration. Timers pause while the pointer or focus is on a message.</prop>
+    <prop name="duration" type="number" default="5000">Milliseconds an automatically dismissed message stays visible.</prop>
+    <state name="internalOpen" :value="false"></state>
+    <state name="toasts" :value="[]"></state>
+    <event
+      name="close"
+      type="object({ open: boolean, reason: action | timeout | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></event>
+    <event name="dismiss" type="object({ id: string, reason: action | timeout, trigger: keyboard | pointer | programmatic })"></event>
+    <method name="show" export="show" returns="promise(string)"></method>
+  </defs>
+  <div role="region" aria-label="Notifications" aria-live="polite" popover="manual">
+    <slot></slot>
+    <div $each="toast of toasts" $key="toast.id" class="toast" class:closing="toast.closing" :id="toast.id" :role="toast.role">
+      <span class="message" $value="toast.message"></span>
+      <span class="dismiss" :data-toast="toast.id">
+        <ui-icon-button size="sm" variant="ghost" :round="true" :label="format('Dismiss %s', toast.message)">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+            <path d="M18 6 6 18M6 6l12 12"></path>
+          </svg>
+        </ui-icon-button>
+      </span>
+    </div>
+  </div>
+  <style>
+    :host {
+      position: fixed;
+      top: calc(var(--ui-space-4) + env(safe-area-inset-top));
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 9999;
+      display: grid;
+      gap: var(--ui-space-2);
+      inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
+      max-inline-size: 100%;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      overflow: visible;
+      border: 0;
+      outline: 0;
+      background: transparent;
+      box-shadow: none;
+      pointer-events: none;
+    }
+
+    :host:not(:popover-open) {
+      display: none;
+    }
+
+    :host > .toast,
+    :host > :slotted(*) {
+      pointer-events: auto;
+    }
+
+    .toast {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: var(--ui-space-2);
+      align-items: start;
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-3);
+      padding: var(--ui-space-3) var(--ui-space-4);
+      background: var(--ui-surface-elevated);
+      color: var(--ui-text-primary);
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      animation: ui-toast-enter var(--ui-toast-enter-duration, 0.32s) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+    }
+
+    /* Leaving slides on down and fades; the controller removes the toast when this ends. */
+    .toast.closing {
+      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease, ease) both;
+      pointer-events: none;
+    }
+
+    @keyframes ui-toast-enter {
+      from {
+        opacity: 0;
+        transform: translateY(-1rem);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes ui-toast-exit {
+      from {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(0.75rem);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .toast, .toast.closing {
+        animation: none;
+      }
+    }
+
+    .message {
+      min-inline-size: 0;
+      align-self: center;
+    }
+
+    .dismiss {
+      align-self: center;
+      margin-inline-end: calc(var(--ui-space-2) * -1);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,119 @@
+import { trackTrigger } from "../shared/trigger.js";
+
+const instances = new WeakMap();
+let toastIds = 0;
+
+export async function show(host, message, options = {}) {
+  return instances.get(host.element)?.show(message, options);
+}
+
+/**
+ * Shows the region while `open` is set and it has authored messages, or while any message added
+ * with show() or the --show-toast command remains. Added messages dismiss by action or timeout.
+ */
+export default function controller(host) {
+  const element = host.element;
+  const [trigger, stopTracking] = trackTrigger(host);
+  let external = host.state.open;
+  host.state.internalOpen = Boolean(external);
+
+  const toasts = () => host.state.toasts ?? [];
+  const authored = () => Array.from(element.children).some((child) => !child.classList.contains("toast"));
+  const sync = () => {
+    const visible = (host.state.internalOpen && authored()) || toasts().length > 0;
+    if (visible && !element.matches(":popover-open")) element.showPopover();
+    else if (!visible && element.matches(":popover-open")) element.hidePopover();
+  };
+
+  // Auto-dismiss timers: each message keeps its remaining time so hover and focus pause and resume it.
+  const timers = new Map();
+  let paused = false;
+  const startTimer = (id) => {
+    const timer = timers.get(id);
+    if (!timer || paused) return;
+    timer.started = Date.now();
+    timer.handle = setTimeout(() => dismiss(id, "timeout", "programmatic"), timer.remaining);
+  };
+  const pauseTimers = () => {
+    if (paused) return;
+    paused = true;
+    for (const timer of timers.values()) {
+      clearTimeout(timer.handle);
+      timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.started));
+    }
+  };
+  // Deferred: during focusout the region still matches :focus-within.
+  const resumeTimers = () => setTimeout(() => {
+    if (!paused || element.matches(":hover, :focus-within")) return;
+    paused = false;
+    for (const id of timers.keys()) startTimer(id);
+  }, 0);
+
+  const remove = (id) => {
+    host.state.toasts = toasts().filter((toast) => toast.id !== id);
+  };
+  const dismiss = (id, reason, how) => {
+    clearTimeout(timers.get(id)?.handle);
+    timers.delete(id);
+    const toast = toasts().find((candidate) => candidate.id === id);
+    if (!toast || toast.closing) return;
+    host.state.toasts = toasts().map((candidate) => candidate.id === id ? { ...candidate, closing: true } : candidate);
+    host.dispatch("dismiss", { id, reason, trigger: how });
+    if (toasts().every((candidate) => candidate.closing)) host.dispatch("close", { open: false, reason, trigger: how });
+    // Removed once the exit animation ends; reduced motion has none, and the timeout guards a missed end.
+    const node = element.ownerDocument.getElementById(id);
+    if (!node || getComputedStyle(node).animationName === "none") remove(id);
+    else {
+      node.addEventListener("animationend", () => remove(id), { once: true });
+      setTimeout(() => remove(id), 500);
+    }
+  };
+  const add = (message, options = {}) => {
+    const id = String(options.id || `ui-toast-${++toastIds}`);
+    host.state.toasts = [...toasts(), { id, message: String(message), role: options.tone === "danger" ? "alert" : "status", closing: false }];
+    if (options.auto ?? host.state.auto) {
+      timers.set(id, { remaining: Math.max(0, Number(options.duration ?? host.state.duration ?? 5000)), started: 0, handle: 0 });
+      startTimer(id);
+    }
+    return id;
+  };
+
+  const onClick = (event) => {
+    const id = event.target.closest?.("[data-toast]")?.dataset.toast;
+    if (id) dismiss(id, "action", trigger());
+  };
+  const onCommand = (event) => {
+    if (event.command === "--show-toast") add(event.source?.value || host.state.message || "Notification");
+  };
+  const stop = host.effect(() => {
+    if (host.state.open !== external) {
+      external = host.state.open;
+      host.state.internalOpen = Boolean(external);
+    }
+    sync();
+  });
+  const observer = new MutationObserver(sync);
+  observer.observe(element, { childList: true });
+  element.addEventListener("click", onClick);
+  element.addEventListener("command", onCommand);
+  element.addEventListener("pointerenter", pauseTimers);
+  element.addEventListener("pointerleave", resumeTimers);
+  element.addEventListener("focusin", pauseTimers);
+  element.addEventListener("focusout", resumeTimers);
+  instances.set(element, { show: add });
+  return () => {
+    stop();
+    stopTracking();
+    observer.disconnect();
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("command", onCommand);
+    element.removeEventListener("pointerenter", pauseTimers);
+    element.removeEventListener("pointerleave", resumeTimers);
+    element.removeEventListener("focusin", pauseTimers);
+    element.removeEventListener("focusout", resumeTimers);
+    for (const timer of timers.values()) clearTimeout(timer.handle);
+    timers.clear();
+    if (element.matches(":popover-open")) element.hidePopover();
+    instances.delete(element);
+  };
+}