@threadlabs/looma 0.4.0 → 0.5.1

package/components/ui-checkbox/ui-checkbox.js

@@ -0,0 +1,24 @@
+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;
+    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-cluster/ui-cluster.html

@@ -0,0 +1,49 @@
+<template component="ui-cluster">
+  <defs>
+    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>
+    <prop name="align" type="start | center | end | stretch">align token.</prop>
+  </defs>
+  <div><slot></slot></div>
+  <style>
+    :host {
+      --_layout-gap: var(--ui-space-3, 0.75rem);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-layout-gap, var(--_layout-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :host-state([gap="xs"]) {
+      --_layout-gap: var(--ui-space-2, 0.5rem);
+    }
+    :host-state([gap="s"]) {
+      --_layout-gap: var(--ui-space-3, 0.75rem);
+    }
+    :host-state([gap="m"]) {
+      --_layout-gap: var(--ui-space-4, 1rem);
+    }
+    :host-state([gap="l"]) {
+      --_layout-gap: var(--ui-space-5, 1.5rem);
+    }
+    :host-state([gap="xl"]) {
+      --_layout-gap: var(--ui-space-6, 2rem);
+    }
+    :host-state([align="start"]) {
+      align-items: flex-start;
+    }
+    :host-state([align="end"]) {
+      align-items: flex-end;
+    }
+    :host-state([align="stretch"]) {
+      align-items: stretch;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,377 @@
+<link rel="component" href="../ui-badge/ui-badge.html">
+<link rel="component" href="../ui-tooltip/ui-tooltip.html">
+<template component="ui-combobox" controller="./ui-combobox.js">
+  <defs>
+    <prop name="label" type="string" default="">label token.</prop>
+    <prop name="placeholder" type="string" default="">placeholder token.</prop>
+    <prop name="name" type="string" default="">name token.</prop>
+    <prop name="value" type="string | null">The selected value in single mode.</prop>
+    <prop name="items" type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))"
+    >The selected items in multiple mode, as JSON.</prop>
+    <prop name="multiple" type="boolean" default="false">multiple token.</prop>
+    <prop name="tokenSeparators" type="list(string)">tokenSeparators token.</prop>
+    <prop name="query" type="string">query token.</prop>
+    <prop name="allowFreeText" type="boolean" default="false">Allows values that do not match an authored option.</prop>
+    <prop name="allowCreate" type="boolean" default="false">Offers the current query as a new option.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="readonly" type="boolean" default="false">Whether the current value may be selected but not edited.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+    <prop name="size" type="sm | md" default="md">size token.</prop>
+    <prop name="labelVisibility" type="visible | sr-only" default="visible">labelVisibility token.</prop>
+    <prop name="disclosure" type="boolean" default="false">disclosure token.</prop>
+    <prop name="clearable" type="boolean" default="false">clearable token.</prop>
+    <prop name="help" type="string" default="">help token.</prop>
+    <state name="raw" :value="''"></state>
+    <state name="display" :value="''"></state>
+    <state name="selected" :value="null"></state>
+    <state name="expanded" :value="false"></state>
+    <state name="rows" :value="[]"></state>
+    <state name="active" :value="-1"></state>
+    <state name="loading" :value="false"></state>
+    <state name="helpOpen" :value="false"></state>
+    <state name="lookupError" :value="''"></state>
+    <state name="validation" :value="{ status: 'pristine', touched: false, dirty: false, issues: [] }"></state>
+    <state name="uid" :value="''"></state>
+    <state name="groups" :value="[]"></state>
+    <state name="creatable" :value="false"></state>
+    <state name="createIndex" :value="0"></state>
+    <state name="message" :value="''"></state>
+    <state name="statusText" :value="''"></state>
+    <state name="validationStatus" :value="'pristine'"></state>
+    <event name="query-change" type="object({ query: string, display: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event
+      name="value-change"
+      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))"
+    ></event>
+    <event
+      name="free-entry"
+      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })"
+    ></event>
+    <event
+      name="create-entry"
+      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })"
+    ></event>
+    <event
+      name="validation-change"
+      type="object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string, path?: list(unknown), severity?: error | warning })), output?: unknown })"
+    ></event>
+    <event name="options-change" type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean }))"></event>
+    <event
+      name="add-item"
+      type="object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })"
+    ></event>
+    <event
+      name="remove-item"
+      type="object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean }), index: integer, trigger: keyboard | pointer | programmatic })"
+    ></event>
+    <event name="create-item" type="object({ query: string, trigger: keyboard | pointer | programmatic })"></event>
+    <method name="validate" export="validate" returns="promise(unknown)"></method>
+    <method name="focusInput" export="focusInput" returns="promise(undefined)"></method>
+  </defs>
+  <div>
+    <label :for="format('%s-input', uid)" class:sr-only="labelVisibility = 'sr-only'"><template $value="label"></template><template $if="required">
+        *</template></label>
+    <div class="field" $ref="field">
+      <slot name="start"></slot>
+      <template $if="multiple">
+        <button
+          $each="item, index of items"
+          $key="item.id"
+          class="item"
+          type="button"
+          tabindex="-1"
+          :data-index="index"
+          :disabled="disabled or readonly or item.disabled"
+          :aria-label="format('%s, press Delete or Backspace to remove', item.label)"
+        >
+          <slot :name="format('item-%s', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
+        </button>
+      </template>
+      <input
+        $ref="input"
+        :id="format('%s-input', uid)"
+        role="combobox"
+        aria-autocomplete="list"
+        autocomplete="off"
+        :aria-controls="format('%s-listbox', uid)"
+        :aria-expanded="expanded"
+        :aria-invalid="validationStatus = 'error'"
+        :aria-busy="validationStatus = 'pending'"
+        .value="display"
+        :placeholder="placeholder"
+        :name="name"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+      >
+      <button $if="clearable" type="button" data-combobox-action="clear" aria-label="Clear">
+        <svg class="affordance-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M7 7l10 10M17 7 7 17"></path>
+        </svg>
+      </button>
+      <button $if="help" :id="format('%s-help', uid)" type="button" aria-label="Help" :disabled="disabled"><span aria-hidden="true">?</span></button>
+      <button
+        $if="disclosure"
+        type="button"
+        data-combobox-action="disclosure"
+        tabindex="-1"
+        aria-label="Show suggestions"
+        :aria-controls="format('%s-listbox', uid)"
+      >
+        <svg
+          class="affordance-icon"
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.25"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m6 9 6 6 6-6"></path>
+        </svg>
+      </button>
+    </div>
+    <ui-tooltip $if="help" :id="format('%s-help-text', uid)" :for="format('%s-help', uid)"><template $value="help"></template></ui-tooltip>
+    <div class="popup" $ref="popup" :hidden="not expanded">
+      <div role="listbox" $ref="listbox" :id="format('%s-listbox', uid)" :aria-label="format('%s suggestions', label)" :aria-busy="loading">
+        <div $each="group of groups" $key="group.name" :role="group.role" :aria-label="group.label">
+          <div $if="group.name" class="group" $value="group.name"></div>
+          <div
+            $each="row of group.rows"
+            $key="row.id"
+            class="option"
+            class:active="row.index = active"
+            role="option"
+            :id="format('%s-option-%s', uid, row.index)"
+            :aria-selected="row.value = selected"
+            :aria-disabled="row.disabled"
+            :data-index="row.index"
+          >
+            <slot :name="format('option-%s', row.id)"><span class="primary" $value="row.label"></span></slot>
+          </div>
+        </div>
+        <div
+          $if="creatable"
+          class="option"
+          class:active="createIndex = active"
+          role="option"
+          aria-selected="false"
+          :id="format('%s-option-%s', uid, createIndex)"
+          :data-index="createIndex"
+          $value="format('Create “%s”', raw)"
+        >
+        </div>
+        <div $if="message" class="message" $value="message"></div>
+      </div>
+      <slot name="footer"></slot>
+    </div>
+    <div class="message" :id="format('%s-validation', uid)" :hidden="not validation.issues.length">
+      <div $each="issue of validation.issues" $value="issue.message"></div>
+    </div>
+    <div class="sr-only" role="status" aria-live="polite" aria-atomic="true" $value="statusText"></div>
+    <div class="authored-options" $ref="options" hidden aria-hidden="true"><slot></slot></div>
+  </div>
+  <style>
+    :host {
+      display: grid;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+      font: inherit;
+    }
+    label {
+      color: var(--ui-field-label-color, var(--ui-text-primary));
+      font-size: var(--ui-field-label-size, 0.875rem);
+      font-weight: var(--ui-field-label-weight, 500);
+    }
+    .field {
+      display: flex;
+      min-inline-size: 0;
+      border: 1px solid var(--ui-control-border, var(--ui-border-default));
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-control-surface, var(--ui-surface-default));
+      box-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);
+    }
+    .field:focus-within {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow);
+    }
+    input::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+      color: inherit;
+    }
+    input {
+      appearance: none;
+      width: 100%;
+      min-inline-size: 0;
+      min-block-size: calc(var(--ui-control-size-md, 2.5rem) - 2px);
+      box-sizing: border-box;
+      border: 0;
+      border-radius: inherit;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      margin: 0;
+      outline: none;
+    }
+    :host-state([size="sm"]) input {
+      min-block-size: calc(var(--ui-field-compact-size, var(--ui-control-size-sm, 2rem)) - 2px);
+      padding: var(--ui-space-1) var(--ui-space-2);
+    }
+    button {
+      appearance: none;
+      display: inline-grid;
+      place-items: center;
+      align-self: stretch;
+      border: 0;
+      border-radius: var(--ui-radius-2);
+      background: transparent;
+      color: var(--ui-field-affordance-color, var(--ui-text-secondary));
+      font: inherit;
+      font-weight: var(--ui-field-affordance-weight, 400);
+      min-inline-size: 2rem;
+      padding: 0 var(--ui-space-1);
+      cursor: pointer;
+    }
+    .affordance-icon {
+      display: block;
+      inline-size: var(--ui-icon-size-sm, 1rem);
+      block-size: var(--ui-icon-size-sm, 1rem);
+    }
+    button:hover:enabled {
+      background: var(--ui-surface-muted);
+      color: var(--ui-text-primary);
+    }
+    button:focus-visible {
+      outline: none;
+      background: var(--ui-surface-muted);
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+    }
+    input:disabled, button:disabled {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    .field:has(input:disabled) {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    }
+    :host-state([validationStatus="error"]) .field {
+      border-color: var(--ui-danger-solid, var(--ui-accent-active));
+    }
+    .popup {
+      box-sizing: border-box;
+      min-inline-size: 12rem;
+      max-inline-size: calc(100vw - 1rem);
+      max-block-size: var(--ui-combobox-max-block-size, 18rem);
+      overflow: auto;
+      margin: 0;
+      padding: var(--ui-space-1);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-surface-elevated);
+      color: var(--ui-text-primary);
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+    }
+    [hidden] {
+      display: none;
+    }
+    .option {
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border-radius: var(--ui-radius-1);
+      cursor: pointer;
+      overflow-wrap: anywhere;
+    }
+    .option:hover, .option.active {
+      background: var(--ui-surface-muted);
+      outline: 1px solid var(--ui-focus-ring, currentColor);
+      outline-offset: -1px;
+    }
+    .option[aria-disabled="true"] {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    .primary {
+      display: block;
+      color: var(--ui-option-primary-color, var(--ui-text-primary));
+      font-weight: var(--ui-option-primary-weight, 500);
+    }
+    .message, .group {
+      color: var(--ui-field-message-color, var(--ui-text-secondary));
+      font-weight: var(--ui-field-message-weight, 400);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-md);
+      overflow-wrap: anywhere;
+    }
+    .group, .popup .message {
+      padding: var(--ui-space-2) var(--ui-space-3);
+    }
+    .sr-only {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    @media (pointer: coarse) {
+      button {
+        min-inline-size: 2.75rem;
+        min-block-size: 2.75rem;
+      }
+    }
+    @media (forced-colors: active) {
+      .field, .popup {
+        border-color: CanvasText;
+      }
+      .option.active {
+        outline-color: Highlight;
+      }
+    }
+
+    /* Multiple mode: chips wrap before the cursor on one flexible field line. */
+    :host-state([multiple]) .field {
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-1);
+      min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
+      padding: var(--ui-space-1);
+    }
+    :host-state([multiple]) input {
+      flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
+      width: auto;
+      min-block-size: 1.75rem;
+      padding: var(--ui-space-0-5) var(--ui-space-1);
+    }
+    .item {
+      appearance: none;
+      display: inline-flex;
+      min-inline-size: 0;
+      max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
+      overflow: hidden;
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-1);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      cursor: default;
+    }
+    .item:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 1px;
+    }
+    .item:disabled {
+      opacity: 0.6;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>