@threadlabs/looma 0.5.0 → 0.5.2

package/README.md

@@ -42,7 +42,7 @@ The editor components' event and geometry types, without Tiptap, are in
 ```
 
 Importing the package registers every component with the
-[HTML Next runtime](https://www.npmjs.com/package/@nextwebwg/declarative-components), which turns
+[HTML Next runtime](https://www.npmjs.com/package/@nextwebwg/html-next), which turns
 each `<ui-*>` element into its native root. Each component's styles are scoped to it; the token
 stylesheet is the only stylesheet to include. Without a build, link components one by one from
 `@threadlabs/looma/components/<tag>/<tag>.html`.

package/components/shared/input-modality.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Marks the document `data-ui-input-modality="touch"` once the user actually touches it, rather than
+ * guessing from capability media queries: hybrid devices keep compact pointer affordances until then.
+ * Idempotent per document; touch is sticky once observed.
+ *
+ * @param {Document} document
+ */
+export function trackInputModality(document: Document): void;

package/components/shared/input-modality.js

@@ -4,6 +4,8 @@ const initialized = new WeakSet();
  * Marks the document `data-ui-input-modality="touch"` once the user actually touches it, rather than
  * guessing from capability media queries: hybrid devices keep compact pointer affordances until then.
  * Idempotent per document; touch is sticky once observed.
+ *
+ * @param {Document} document
  */
 export function trackInputModality(document) {
   if (initialized.has(document)) return;

package/components/ui-button/ui-button.html

@@ -4,6 +4,9 @@
     >Visual emphasis and semantic intent. link is an inline text action that reads as a link.</prop>
     <prop name="size" type="sm | md | lg" default="md">Control size.</prop>
     <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="align" type="center | start" default="center"
+    >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>
+    <prop name="stretch" type="boolean" default="false">Fills the inline size of its container.</prop>
   </defs>
   <button type="button" :disabled="disabled"><slot></slot></button>
   <style>
@@ -19,6 +22,16 @@
       color: var(--ui-action-primary-text, var(--ui-text-on-accent));
     }
 
+    :host-state([align="start"]) {
+      justify-content: flex-start;
+      text-align: start;
+    }
+
+    :host-state([stretch]) {
+      display: flex;
+      inline-size: 100%;
+    }
+
     :host {
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md, 2.5rem));
@@ -114,6 +127,7 @@
       border-color: transparent;
       background: transparent;
       box-shadow: none;
+      color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
@@ -141,9 +155,31 @@
         var(--ui-focus-halo);
     }
 
+    /* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
     :host:disabled {
-      opacity: 0.6;
+      opacity: var(--ui-button-disabled-opacity, 0.6);
       cursor: not-allowed;
+      border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
+      background-color: var(--ui-button-disabled-surface, var(--ui-button-surface, var(--ui-surface-elevated)));
+      color: var(--ui-button-disabled-text, var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
+    }
+
+    :host-state([variant="solid"]):disabled {
+      border-color: var(--ui-button-disabled-border, var(--ui-action-primary-surface, var(--ui-accent-solid)));
+      background-color: var(--ui-button-disabled-surface, var(--ui-action-primary-surface, var(--ui-accent-solid)));
+      color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
+    }
+
+    :host-state([variant="danger"]):disabled {
+      border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
+      background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
+      color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
+    }
+
+    :host-state([variant="ghost"]):disabled {
+      border-color: transparent;
+      background-color: transparent;
+      color: var(--ui-button-disabled-text, var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
     }
 
     @media (pointer: coarse) {
@@ -183,6 +219,11 @@
       transform: none;
     }
 
+    :host-state([variant="link"]):disabled {
+      background: none;
+      color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
+    }
+
     :host-state([variant="link"]):focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */

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

@@ -23,16 +23,24 @@
     <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="selected" type="string | null" :value="null"></state>
     <state name="expanded" :value="false"></state>
-    <state name="rows" :value="[]"></state>
+    <state name="rows" type="list(object({ id: string, value: string, label: string, group?: string, disabled: boolean }))" :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="validation"
+      type="object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string })), ... })"
+      :value="{ status: 'pristine', touched: false, dirty: false, issues: [] }"
+    ></state>
     <state name="uid" :value="''"></state>
-    <state name="groups" :value="[]"></state>
+    <state
+      name="groups"
+      type="list(object({ name: string, role: group | presentation, label: string | null, rows: list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, index: integer })) }))"
+      :value="[]"
+    ></state>
     <state name="creatable" :value="false"></state>
     <state name="createIndex" :value="0"></state>
     <state name="message" :value="''"></state>

package/components/ui-dialog/ui-dialog.html

@@ -127,6 +127,19 @@
       outline-offset: 2px;
     }
 
+    /* A touch target, like Button on coarse pointers. */
+    @media (pointer: coarse) {
+      .close {
+        inline-size: var(--ui-control-min-block-size, 2.75rem);
+        block-size: var(--ui-control-min-block-size, 2.75rem);
+      }
+    }
+
+    html[data-ui-input-modality="touch"] :host .close {
+      inline-size: var(--ui-control-min-block-size, 2.75rem);
+      block-size: var(--ui-control-min-block-size, 2.75rem);
+    }
+
     .body {
       flex: 1 1 auto;
       min-block-size: 0;

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -4,7 +4,7 @@
     <prop name="maxRows" type="integer" default="8">The most rows the grid offers (at most 10).</prop>
     <prop name="maxCols" type="integer" default="8">The most columns the grid offers (at most 10).</prop>
     <prop name="headerRow" type="boolean" default="false">Whether table insertion initially includes a header row.</prop>
-    <state name="cells" :value="[]"></state>
+    <state name="cells" type="list(object({ key: string, row: integer, col: integer, label: string, selected: boolean }))" :value="[]"></state>
     <state name="rows" :value="8"></state>
     <state name="cols" :value="8"></state>
     <state name="hint" :value="''"></state>

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

@@ -10,7 +10,7 @@
       type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null"
     >Where the @ was typed, in viewport coordinates.</prop>
     <state name="visible" :value="false"></state>
-    <state name="rows" :value="[]"></state>
+    <state name="rows" type="list(object({ id: string, label: string, detail?: string, initials: string }))" :value="[]"></state>
     <state name="searching" :value="false"></state>
     <state name="active" :value="0"></state>
     <state name="prefix" :value="'ui-editor-mention-menu'"></state>

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

@@ -7,8 +7,12 @@
       name="actions"
       type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
     >The complete set of commands the current selection permits.</prop>
-    <state name="swatches" :value="[]"></state>
-    <state name="sections" :value="[]"></state>
+    <state name="swatches" type="list(object({ action: string, label: string, color: string, selected: boolean })) | null" :value="[]"></state>
+    <state
+      name="sections"
+      type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))"
+      :value="[]"
+    ></state>
     <event
       name="action"
       type="object({ action: align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })"

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

@@ -6,10 +6,26 @@
       name="geometry"
       type="object({ rowBoundaries: list(number), columnBoundaries: list(number), activeCell: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null, hoveredCell?: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null }) | null"
     >The authoritative editor-measured table boundaries and active or hovered cell rectangles.</prop>
-    <state name="rows" :value="[]"></state>
-    <state name="cols" :value="[]"></state>
-    <state name="hovered" :value="null"></state>
-    <state name="active" :value="null"></state>
+    <state
+      name="rows"
+      type="list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))"
+      :value="[]"
+    ></state>
+    <state
+      name="cols"
+      type="list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))"
+      :value="[]"
+    ></state>
+    <state
+      name="hovered"
+      type="object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, rowOffset: string, columnOffset: string }) | null"
+      :value="null"
+    ></state>
+    <state
+      name="active"
+      type="object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, menuLeft: string, menuTop: string }) | null"
+      :value="null"
+    ></state>
     <state name="activeKey" :value="''"></state>
     <event
       name="action"

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

@@ -8,10 +8,14 @@
       name="actions"
       type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
     >The complete set of commands the current selection permits.</prop>
-    <state name="alignments" :value="[]"></state>
-    <state name="structure" :value="[]"></state>
-    <state name="swatches" :value="[]"></state>
-    <state name="sections" :value="[]"></state>
+    <state name="alignments" type="list(object({ action: align-left | align-center | align-right, label: string, active: boolean }))" :value="[]"></state>
+    <state name="structure" type="list(object({ action: add-row-after | add-column-after, label: string, icon: string }))" :value="[]"></state>
+    <state name="swatches" type="list(object({ action: string, label: string, color: string, selected: boolean }))" :value="[]"></state>
+    <state
+      name="sections"
+      type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean })) }))"
+      :value="[]"
+    ></state>
     <state name="hasOverflow" :value="false"></state>
     <state name="overflowOpen" :value="false"></state>
     <event

package/components/ui-form-field/ui-form-field.html

@@ -5,10 +5,10 @@
     <prop name="required" type="boolean" default="false">required token.</prop>
   </defs>
   <div>
-    <slot name="label"></slot>
+    <div class="label"><slot name="label"></slot></div>
     <slot></slot>
-    <slot name="help"></slot>
-    <slot name="error"></slot>
+    <div class="help"><slot name="help"></slot></div>
+    <div class="error"><slot name="error"></slot></div>
   </div>
   <style>
     :host {
@@ -19,19 +19,30 @@
       color: var(--ui-text-primary);
     }
 
-    :slotted([slot="label"]) {
+    /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+       in Vue), and generates no box of its own, so an empty region adds no gap. */
+    .label,
+    .help,
+    .error {
+      display: contents;
+    }
+
+    .label {
       color: var(--ui-text-secondary);
       font-size: 0.95rem;
     }
 
-    :slotted([slot="help"]) {
-      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+    .help {
       color: var(--ui-text-muted);
       font-size: 0.875rem;
       line-height: var(--ui-line-height-md);
     }
 
-    :slotted([slot="error"]),
+    .help > :slotted(*) {
+      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+    }
+
+    .error,
     :slotted([role="alert"]) {
       color: var(--ui-accent-active);
       font-size: 0.875rem;

package/components/ui-icon/ui-icon.html

@@ -1,7 +1,11 @@
 <template component="ui-icon" controller="./ui-icon.js">
   <defs>
     <prop name="name" type="string" default="">The icon's name.</prop>
-    <state name="shapes" :value="[]"></state>
+    <state
+      name="shapes"
+      type="list(object({ tag: path | circle | rect, d?: string, cx?: string, cy?: string, r?: string, x?: string, y?: string, width?: string, height?: string, rx?: string }))"
+      :value="[]"
+    ></state>
   </defs>
   <span aria-hidden="true">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">

package/components/ui-icon-button/ui-icon-button.html

@@ -79,6 +79,36 @@
       }
     }
 
+    /* A touch target without a bigger button: an invisible hit area, at least the control
+       minimum, centred on the button (::before is the anticipatory guide). */
+    @media (pointer: coarse) {
+      :host {
+        position: relative;
+      }
+
+      :host::after {
+        content: "";
+        position: absolute;
+        inset: 50% auto auto 50%;
+        inline-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+        block-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    html[data-ui-input-modality="touch"] :host {
+      position: relative;
+    }
+
+    html[data-ui-input-modality="touch"] :host::after {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+      block-size: max(100%, var(--ui-control-min-block-size, 2.75rem));
+      transform: translate(-50%, -50%);
+    }
+
     :host-state([size="sm"]) {
       inline-size: var(--ui-icon-button-size-sm, 1.75rem);
       block-size: var(--ui-icon-button-size-sm, 1.75rem);
@@ -135,11 +165,24 @@
       box-shadow: var(--ui-focus-halo);
     }
 
+    /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
     :host:disabled {
-      opacity: 0.6;
+      opacity: var(--ui-icon-button-disabled-opacity, 0.6);
+      color: var(--ui-icon-button-disabled-color, inherit);
       cursor: not-allowed;
     }
 
+    :host-state([variant="outline"]):disabled {
+      border-color: var(--ui-icon-button-disabled-border, var(--ui-icon-button-border, var(--ui-border-default)));
+      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-outline-bg, var(--ui-surface-default)));
+      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-outline-color, var(--ui-text-primary)));
+    }
+
+    :host-state([variant="solid"]):disabled {
+      background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-solid-bg, var(--ui-accent-solid)));
+      color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-solid-color, var(--ui-text-on-accent)));
+    }
+
     :host {
       --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
     }

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

@@ -14,11 +14,19 @@ export default function controller(host) {
 
   const close = (reason, trigger) => {
     host.state.internalOpen = false;
+    lastOpen = 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 trigger = event.detail === 0 ? "keyboard" : "pointer";
+    if (host.state.internalOpen) {
+      close("action", trigger);
+      return;
+    }
+    host.state.internalOpen = true;
+    // Announce the anchor's toggle once, with its real trigger; apply() only announces changes it made.
+    lastOpen = true;
+    host.dispatch("open", { open: true, reason: "action", trigger });
   };
   const ids = createIdResolver(document, () => apply());
   const setup = () => {

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

@@ -64,6 +64,13 @@
     .search {
       padding: var(--ui-space-3);
       border-block-end: 1px solid var(--ui-border-default);
+      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* The search region shows where typing goes, whatever the author put in it. */
+    .search:focus-within {
+      border-block-end-color: var(--ui-search-shell-focus-color, var(--ui-control-focus));
+      box-shadow: inset 0 -1px 0 var(--ui-search-shell-focus-color, var(--ui-control-focus));
     }
 
     :slotted(input[slot="search"]) {

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

@@ -40,6 +40,13 @@ export default function controller(host) {
     event.preventDefault();
     if (host.state.dismissible) dispatchClose("escape", "keyboard");
   };
+  // A search field spends the first Escape clearing itself and the dialog never sees a cancel,
+  // so a dismissible shell closes on Escape from anywhere inside it.
+  const onKeydown = (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented || !host.state.dismissible) return;
+    event.preventDefault();
+    dispatchClose("escape", "keyboard");
+  };
   const onClick = (event) => {
     if (host.state.dismissible && event.target === dialog) dispatchClose("light-dismiss", trigger());
   };
@@ -47,12 +54,14 @@ export default function controller(host) {
     if (!suppressNativeClose && host.state.internalOpen) dispatchClose("action", trigger());
   };
   dialog.addEventListener("cancel", onCancel);
+  dialog.addEventListener("keydown", onKeydown);
   dialog.addEventListener("click", onClick);
   dialog.addEventListener("close", onClose);
   return () => {
     stop();
     stopTracking();
     dialog.removeEventListener("cancel", onCancel);
+    dialog.removeEventListener("keydown", onKeydown);
     dialog.removeEventListener("click", onClick);
     dialog.removeEventListener("close", onClose);
     closeNative();

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

@@ -5,7 +5,7 @@
     <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>
+    <state name="tabs" type="list(object({ id: string, label: string }))" :value="[]"></state>
     <event name="select" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
   </defs>
   <div>

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

@@ -7,7 +7,7 @@
     >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>
+    <state name="toasts" type="list(object({ id: string, message: string, role: alert | status, closing: boolean }))" :value="[]"></state>
     <event
       name="close"
       type="object({ open: boolean, reason: action | timeout | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"

package/components/ui-tree-item/ui-tree-item.html

@@ -209,11 +209,16 @@
       flex: none;
     }
 
+    /* The label spans the row's height and centres its content, so slotted content (a link) can
+       stretch to fill the row as its own hit area; the padding tokens remove the inset. */
     .label {
       grid-column: 3;
       grid-row: 1;
+      align-self: stretch;
+      display: flex;
+      align-items: center;
       min-inline-size: 0;
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-tree-label-padding-block, var(--ui-space-1)) var(--ui-tree-label-padding-inline, var(--ui-space-2));
     }
 
     .actions {

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentDefinition } from "@nextwebwg/declarative-components";
+import type { ComponentDefinition } from "@nextwebwg/html-next";
 export declare const definitions: readonly ComponentDefinition[];
 export declare function register(root?: Document): () => void;
 export declare const stop: undefined | (() => void);