@leavepulse/ui 0.77.2 → 0.78.0

package/dist/composables/pointerDrag.js

@@ -0,0 +1,40 @@
+import "vue";
+import { nodeWindow } from "./realm.js";
+function startPointerDrag(event, handlers) {
+  const handle = event.currentTarget;
+  const body = nodeWindow(handle).document.body.style;
+  const { userSelect, cursor } = body;
+  let active = true;
+  const finish = (completed) => {
+    if (!active) return;
+    active = false;
+    handle.removeEventListener("pointermove", onMove);
+    handle.removeEventListener("pointerup", onUp);
+    handle.removeEventListener("pointercancel", onCancel);
+    handle.removeEventListener("lostpointercapture", onCancel);
+    body.userSelect = userSelect;
+    body.cursor = cursor;
+    handlers.end(completed);
+  };
+  function onMove(ev) {
+    if (ev.pointerId === event.pointerId) handlers.move(ev);
+  }
+  function onUp(ev) {
+    if (ev.pointerId === event.pointerId) finish(true);
+  }
+  function onCancel(ev) {
+    if (ev.pointerId === event.pointerId) finish(false);
+  }
+  event.preventDefault();
+  body.userSelect = "none";
+  if (handlers.cursor) body.cursor = handlers.cursor;
+  handle.setPointerCapture(event.pointerId);
+  handle.addEventListener("pointermove", onMove);
+  handle.addEventListener("pointerup", onUp);
+  handle.addEventListener("pointercancel", onCancel);
+  handle.addEventListener("lostpointercapture", onCancel);
+  return () => finish(false);
+}
+export {
+  startPointerDrag
+};

package/dist/composables/propCheck.d.ts

@@ -0,0 +1,10 @@
+import type { Plugin } from "vue";
+export interface PropCheckOptions {
+    /** Attributes that are not a mistake: exact names or patterns. */
+    ignore?: (string | RegExp)[];
+    /** Where a report goes. Defaults to console.warn. */
+    warn?: (message: string) => void;
+}
+/** The attributes no element under this component could take. */
+export declare function unknownAttributes(attributes: string[], elements: Element[], ignore?: PropCheckOptions["ignore"]): string[];
+export declare const lpPropCheck: Plugin<[PropCheckOptions?]>;

package/dist/composables/propCheck.js

@@ -0,0 +1,78 @@
+const KIT_COMPONENT = /^Lp[A-Z]/;
+const ALWAYS_ALLOWED = /^(data-|aria-|on[A-Z])/;
+const GLOBAL_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "accesskey",
+  "class",
+  "contenteditable",
+  "dir",
+  "draggable",
+  "enterkeyhint",
+  "for",
+  "hidden",
+  "id",
+  "inert",
+  "inputmode",
+  "is",
+  "key",
+  "lang",
+  "nonce",
+  "popover",
+  "ref",
+  "role",
+  "slot",
+  "spellcheck",
+  "style",
+  "tabindex",
+  "title",
+  "translate"
+]);
+const FORWARD_TARGETS = "input, textarea, select, button, a, img, form, label";
+const propertiesByTag = /* @__PURE__ */ new Map();
+function propertiesOf(el) {
+  let known = propertiesByTag.get(el.tagName);
+  if (!known) {
+    known = /* @__PURE__ */ new Set();
+    for (const name in el) known.add(name.toLowerCase());
+    propertiesByTag.set(el.tagName, known);
+  }
+  return known;
+}
+const normalized = (name) => name.replaceAll("-", "").toLowerCase();
+function unknownAttributes(attributes, elements, ignore = []) {
+  return attributes.filter((name) => {
+    if (ALWAYS_ALLOWED.test(name) || GLOBAL_ATTRIBUTES.has(name.toLowerCase())) return false;
+    if (ignore.some((rule) => typeof rule === "string" ? rule === name : rule.test(name))) return false;
+    const key = normalized(name);
+    return !elements.some((el) => propertiesOf(el).has(key));
+  });
+}
+function renderedElements(instance) {
+  const root = instance.$el;
+  if (root?.nodeType !== 1) return [];
+  const el = root;
+  return [el, ...el.querySelectorAll(FORWARD_TARGETS)];
+}
+const lpPropCheck = {
+  install(app, options = {}) {
+    const warn = options.warn ?? ((message) => console.warn(message));
+    const reported = /* @__PURE__ */ new Set();
+    app.mixin({
+      mounted() {
+        const name = this.$options.__name;
+        if (!name || !KIT_COMPONENT.test(name)) return;
+        const attributes = Object.keys(this.$attrs);
+        if (!attributes.length) return;
+        for (const attribute of unknownAttributes(attributes, renderedElements(this), options.ignore)) {
+          const id = `${name}:${attribute}`;
+          if (reported.has(id)) continue;
+          reported.add(id);
+          warn(`[@leavepulse/ui] <${name}> has no prop "${attribute}". Props: ${Object.keys(this.$props).join(", ")}`);
+        }
+      }
+    });
+  }
+};
+export {
+  lpPropCheck,
+  unknownAttributes
+};

package/dist/composables/realm.d.ts

@@ -0,0 +1,6 @@
+export declare function isNode(value: unknown): value is Node;
+export declare function isElement(value: unknown): value is Element;
+export declare function isInputElement(value: unknown): value is HTMLInputElement;
+export declare function isHTMLElement(value: unknown): value is HTMLElement;
+/** The window a node lives in, with that realm's constructors (`MouseEvent`, `ResizeObserver`). */
+export declare function nodeWindow(node: Node): Window & typeof globalThis;

package/dist/composables/realm.js

@@ -0,0 +1,23 @@
+function isNode(value) {
+  return typeof value?.nodeType === "number";
+}
+function isElement(value) {
+  return value?.nodeType === 1;
+}
+function isInputElement(value) {
+  return isElement(value) && value.tagName === "INPUT";
+}
+function isHTMLElement(value) {
+  return isElement(value) && "style" in value;
+}
+function nodeWindow(node) {
+  const doc = node.nodeType === 9 ? node : node.ownerDocument;
+  return doc?.defaultView ?? globalThis;
+}
+export {
+  isElement,
+  isHTMLElement,
+  isInputElement,
+  isNode,
+  nodeWindow
+};

package/dist/composables/scroll.js

@@ -1,8 +1,10 @@
+import "vue";
+import { nodeWindow } from "./realm.js";
 const SCROLLS = /(auto|scroll|overlay)/;
 function scrollParent(el, { axis = "y", self = false } = {}) {
   for (let node = self ? el : el?.parentElement; node; node = node.parentElement) {
     if (node === node.ownerDocument.body || node === node.ownerDocument.documentElement) return null;
-    const style = getComputedStyle(node);
+    const style = nodeWindow(node).getComputedStyle(node);
     const y = axis !== "x" && SCROLLS.test(style.overflowY) && node.scrollHeight > node.clientHeight;
     const x = axis !== "y" && SCROLLS.test(style.overflowX) && node.scrollWidth > node.clientWidth;
     if (y || x) return node;
@@ -16,7 +18,7 @@ function atScrollEnd(el, slack = 2) {
   return box.scrollTop + box.clientHeight >= box.scrollHeight - slack;
 }
 function scrollMarginTop(el) {
-  return Number.parseFloat(getComputedStyle(el).scrollMarginTop) || 0;
+  return Number.parseFloat(nodeWindow(el).getComputedStyle(el).scrollMarginTop) || 0;
 }
 function scrollToElement(el, { block = "nearest", behavior = "auto", margin = 0 } = {}) {
   if (!el) return;

package/dist/composables/scrollMemory.d.ts

@@ -1 +1,12 @@
-export declare function useScrollMemory(viewport: () => HTMLElement | null | undefined, path: () => string | undefined, hash: () => string | undefined): void;
+/** Records a position, dropping the address visited longest ago past `limit`. */
+export declare function rememberPosition(store: Map<string, number>, key: string, top: number, limit?: number): void;
+export declare function hashTargetId(value: string): string;
+export declare function useScrollMemory(viewport: () => HTMLElement | null | undefined, path: () => string | undefined, hash: () => string | undefined, 
+/** Sets a second region's positions apart from the first's on the same address. */
+scope?: string, 
+/**
+ * What covers the top of the viewport (a sticky header), in px: an anchor
+ * lands below it. Not scroll-padding-top on the document, which also makes
+ * the browser scroll the page whenever a control in that header takes focus.
+ */
+covered?: () => number): void;

package/dist/composables/scrollMemory.js

@@ -1,15 +1,36 @@
+import { nodeWindow } from "./realm.js";
 import { watch, nextTick, onMounted, onBeforeUnmount } from "vue";
 import { scrollMarginTop } from "./scroll.js";
 const SETTLE_MS = 1500;
 const DIALOG_WAIT_MS = 2e3;
 const SETTLE_STOP = ["wheel", "touchstart", "keydown", "pointerdown"];
+const MAX_POSITIONS = 200;
 const positions = /* @__PURE__ */ new Map();
-function addressKey() {
-  return `${location.pathname}${location.search}`;
+function rememberPosition(store, key, top, limit = MAX_POSITIONS) {
+  store.delete(key);
+  store.set(key, top);
+  if (store.size > limit) store.delete(store.keys().next().value);
 }
-function useScrollMemory(viewport, path, hash) {
+function isDocument(view) {
+  return view === view.ownerDocument.scrollingElement;
+}
+function frameTop(view) {
+  return isDocument(view) ? 0 : view.getBoundingClientRect().top;
+}
+function hashTargetId(value) {
+  const id = value.replace(/^#/, "");
+  try {
+    return decodeURIComponent(id);
+  } catch {
+    return id;
+  }
+}
+function addressKey(scope) {
+  return `${scope}${location.pathname}${location.search}`;
+}
+function useScrollMemory(viewport, path, hash, scope = "", covered = () => 0) {
   if (typeof window === "undefined") return;
-  let current = addressKey();
+  let current = addressKey(scope);
   let shown = path();
   let travelled = false;
   let stopHold;
@@ -20,24 +41,23 @@ function useScrollMemory(viewport, path, hash) {
   window.addEventListener("popstate", onPop);
   function anchor(value) {
     if (!value || value === "#") return null;
-    const id = decodeURIComponent(value.replace(/^#/, ""));
-    return document.getElementById(id);
+    return document.getElementById(hashTargetId(value));
   }
   function reach(value, behavior) {
     const view = viewport();
     const target = anchor(value);
     if (!view || !target || !view.contains(target)) return false;
-    const top = target.getBoundingClientRect().top - view.getBoundingClientRect().top + view.scrollTop - scrollMarginTop(target);
+    const top = target.getBoundingClientRect().top - frameTop(view) + view.scrollTop - scrollMarginTop(target) - covered();
     view.scrollTo({ top: Math.max(0, top), behavior });
     return true;
   }
   function hold(land) {
     stopHold?.();
     const view = viewport();
-    const content = view?.firstElementChild;
+    const content = view && (isDocument(view) ? view.ownerDocument.body : view.firstElementChild);
     land();
     if (!content) return;
-    const watcher = new ResizeObserver(land);
+    const watcher = new (nodeWindow(content)).ResizeObserver(land);
     const timer = window.setTimeout(() => stop(), SETTLE_MS);
     const stop = () => {
       watcher.disconnect();
@@ -52,7 +72,7 @@ function useScrollMemory(viewport, path, hash) {
   function arrive() {
     const back = travelled;
     travelled = false;
-    current = addressKey();
+    current = addressKey(scope);
     shown = path();
     const view = viewport();
     if (!view) return;
@@ -75,7 +95,8 @@ function useScrollMemory(viewport, path, hash) {
     const mine = ++pending;
     const tick = () => {
       if (mine !== pending) return;
-      const locked = document.querySelector('[role="dialog"]') || getComputedStyle(document.body).overflow === "hidden";
+      const doc = viewport()?.ownerDocument ?? document;
+      const locked = doc.querySelector('[role="dialog"]') || nodeWindow(doc).getComputedStyle(doc.body).overflow === "hidden";
       if (locked && performance.now() - since < DIALOG_WAIT_MS) requestAnimationFrame(tick);
       else run();
     };
@@ -85,7 +106,7 @@ function useScrollMemory(viewport, path, hash) {
     path,
     () => {
       const view = viewport();
-      if (view) positions.set(current, view.scrollTop);
+      if (view) rememberPosition(positions, current, view.scrollTop);
       void nextTick(() => requestAnimationFrame(arrive));
     },
     { flush: "pre" }
@@ -103,9 +124,12 @@ function useScrollMemory(viewport, path, hash) {
   });
   onBeforeUnmount(() => {
     stopHold?.();
+    pending += 1;
     window.removeEventListener("popstate", onPop);
   });
 }
 export {
+  hashTargetId,
+  rememberPosition,
   useScrollMemory
 };

package/dist/composables/spatialNav.js

@@ -1,3 +1,4 @@
+import { nodeWindow } from "./realm.js";
 const SIDEWAYS_WEIGHT = 2;
 function nextInDirection(from, candidates, direction) {
   let best = -1;
@@ -62,7 +63,7 @@ function focusableIn(root) {
     if (element.getAttribute("tabindex") === "-1" && !element.matches(ROVING_ITEMS)) return false;
     const rect = element.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) return false;
-    const style = getComputedStyle(element);
+    const style = nodeWindow(element).getComputedStyle(element);
     return style.visibility !== "hidden" && style.display !== "none";
   });
 }

package/dist/composables/textEntry.d.ts

@@ -0,0 +1,17 @@
+/** Where text can be typed, for a target that may sit inside one. */
+export declare const TEXT_FIELD_SELECTOR = "input, textarea, [contenteditable]";
+export interface TextEntryOptions {
+    /** Which `<input>` types count. Defaults to the ones that take typed text. */
+    inputType?: (type: string) => boolean;
+    /** A `<select>` counts too: it keeps letters and arrows for itself. */
+    select?: boolean;
+}
+/**
+ * Whether the event lands in something the user is typing into. Checked off the
+ * event target rather than `document.activeElement` so it stays right inside a
+ * dialog's focus trap, and by tag rather than class so a field of an LpFrame
+ * counts too.
+ */
+export declare function isTextEntry(target: EventTarget | null, options?: TextEntryOptions): boolean;
+/** Whether the target is, or sits inside, what the selector names. */
+export declare function inTextField(target: EventTarget | null, selector?: string): boolean;

package/dist/composables/textEntry.js

@@ -0,0 +1,19 @@
+import { isHTMLElement, isElement } from "./realm.js";
+const TYPED_INPUTS = /* @__PURE__ */ new Set(["text", "search", "email", "number", "password", "tel", "url"]);
+const TEXT_FIELD_SELECTOR = "input, textarea, [contenteditable]";
+function isTextEntry(target, options = {}) {
+  if (!isHTMLElement(target)) return false;
+  if (target.isContentEditable || target.tagName === "TEXTAREA") return true;
+  if (options.select && target.tagName === "SELECT") return true;
+  if (target.tagName !== "INPUT") return false;
+  const { type } = target;
+  return options.inputType ? options.inputType(type) : TYPED_INPUTS.has(type);
+}
+function inTextField(target, selector = TEXT_FIELD_SELECTOR) {
+  return isElement(target) && !!target.closest(selector);
+}
+export {
+  TEXT_FIELD_SELECTOR,
+  inTextField,
+  isTextEntry
+};

package/dist/composables/useAsyncTask.d.ts

@@ -6,6 +6,12 @@
  * fresher one, and a response landing after the control moved on. The token
  * guards both — the abort signal only asks the consumer to stop, it cannot
  * promise they did.
+ *
+ * What is guarded is `apply` and `fail`, not the task: whatever it does past
+ * the point it honours the signal (a cache write after the fetch) still runs,
+ * and an error from a superseded run is dropped unseen. It is also one slot:
+ * a new `run` replaces the last, and `pending` speaks for the latest only, so
+ * independent requests each need their own `useAsyncTask`.
  */
 export declare function useAsyncTask<T>(): {
     pending: import("vue").Ref<boolean, boolean>;

package/dist/composables/useChartSync.d.ts

@@ -0,0 +1,5 @@
+import { type MaybeRefOrGetter } from "vue";
+export declare function useChartSync(group: MaybeRefOrGetter<string | undefined>): {
+    peerLabel: import("vue").ComputedRef<string | null>;
+    publish: (label: string | null) => void;
+};

package/dist/composables/useChartSync.js

@@ -0,0 +1,33 @@
+import { computed, toValue, onScopeDispose, shallowRef } from "vue";
+const SYNC_KEY = /* @__PURE__ */ Symbol.for("@leavepulse/ui:chart-sync");
+const groups = globalThis[SYNC_KEY] ??= /* @__PURE__ */ new Map();
+function groupOf(name) {
+  let group = groups.get(name);
+  if (!group) {
+    group = shallowRef(null);
+    groups.set(name, group);
+  }
+  return group;
+}
+function useChartSync(group) {
+  const owner = /* @__PURE__ */ Symbol("chart");
+  const shared = computed(() => {
+    const name = toValue(group);
+    return name ? groupOf(name) : null;
+  });
+  const peerLabel = computed(() => {
+    const hovered = shared.value?.value;
+    return hovered && hovered.owner !== owner ? hovered.label : null;
+  });
+  function publish(label) {
+    const target = shared.value;
+    if (!target) return;
+    if (label != null) target.value = { owner, label };
+    else if (target.value?.owner === owner) target.value = null;
+  }
+  onScopeDispose(() => publish(null));
+  return { peerLabel, publish };
+}
+export {
+  useChartSync
+};

package/dist/composables/useCloseGuard.d.ts

@@ -5,7 +5,9 @@ import { type MaybeRefOrGetter } from "vue";
  * - `true`: there is something unsaved. Closing asks "Discard changes?" through
  *   the kit's confirm, and leaving the page asks the browser's own question.
  * - a function: the app asks its own question (or saves first) and answers
- *   whether the window may close.
+ *   whether the window may close. It covers the window's own ways out only:
+ *   a browser cannot wait for it, so closing the tab or reloading goes
+ *   unguarded. Only `true` raises the browser's question.
  * - `false` / unset: nothing to lose, the window closes as always.
  *
  * Usually bound straight to a form's state: `:guard="form.dirty"`.

package/dist/composables/useCloseGuard.js

@@ -13,21 +13,24 @@ function useCloseGuard(guard, open, labelsOverride) {
     labelsOverride
   );
   let asking = false;
+  let session = 0;
+  watch(() => !!toValue(open), () => session += 1, { flush: "sync" });
   async function allowClose() {
     const current = toValue(guard);
     if (!current) return true;
     if (asking) return false;
     asking = true;
+    const mine = session;
     try {
-      if (typeof current === "function") return await current();
-      return await confirm({
+      const allowed = await (typeof current === "function" ? current() : confirm({
         title: labels.value.title,
         description: labels.value.description,
         danger: true,
         icon: "lucide:triangle-alert",
         confirmLabel: labels.value.discard,
         cancelLabel: labels.value.keep
-      });
+      }));
+      return allowed && mine === session;
     } finally {
       asking = false;
     }

package/dist/composables/useCommands.d.ts

@@ -0,0 +1,50 @@
+import { type MaybeRefOrGetter } from "vue";
+import type { Command } from "../components/LpCommandPalette.vue";
+import type { ContextMenuItemDef } from "../components/LpContextMenu.vue";
+import { type HotkeyBinding, type ShortcutGroup, type UseHotkeysOptions } from "./useHotkeys";
+import { type PaletteScope } from "./usePaletteCommands";
+export interface AppCommand {
+    /** Stable: the palette keeps recents and pins by it. */
+    id: string;
+    label: string;
+    /** Section in the palette and in the key reference. */
+    group?: string;
+    description?: string;
+    icon?: string;
+    keywords?: string[];
+    /**
+     * Written as it reads: "Ctrl+K", "Shift+Alt+N", or spaces for a sequence,
+     * "G I". Binds the key and labels it in the palette, the menu and the reference.
+     */
+    shortcut?: string;
+    /** Listed but not runnable: greyed in the palette and the menu, the key does nothing. */
+    disabled?: boolean;
+    /** Gone everywhere, key included. For what this user or this page cannot do at all. */
+    hidden?: boolean;
+    /** Marked as dangerous in a menu; the palette has no such mark. */
+    danger?: boolean;
+    /** The key also works while a text field has focus. */
+    allowInInput?: boolean;
+    /** The key also works while an overlay owns the keyboard. */
+    overLayers?: boolean;
+    run: () => unknown | Promise<unknown>;
+}
+/** What the palette lists for a command. */
+export declare function commandToPalette(command: AppCommand): Command;
+/** What a menu shows for a command: LpContextMenu and LpDropdownMenu take these. */
+export declare function commandToMenuItem(command: AppCommand): ContextMenuItemDef;
+/** The binding for a command, or null when it has no key. */
+export declare function commandToHotkey(command: AppCommand): HotkeyBinding | null;
+/** The key reference of these commands alone, in LpShortcutsDialog's shape. */
+export declare function commandShortcuts(commands: readonly AppCommand[]): ShortcutGroup[];
+export interface UseCommandsOptions extends Pick<UseHotkeysOptions, "enabled" | "priority" | "scope"> {
+    /** The palette scope to list in. Defaults to the one this component sits in. */
+    palette?: PaletteScope;
+}
+export declare function useCommands(commands: MaybeRefOrGetter<readonly AppCommand[]>, options?: UseCommandsOptions): {
+    commands: import("vue").ComputedRef<AppCommand[]>;
+    menuItems: import("vue").ComputedRef<ContextMenuItemDef[]>;
+    shortcuts: import("vue").ComputedRef<ShortcutGroup[]>;
+    /** Runs a command by id, unless it is disabled or hidden. Returns whether it ran. */
+    run(id: string): boolean;
+};

package/dist/composables/useCommands.js

@@ -0,0 +1,66 @@
+import { computed, toValue } from "vue";
+import { parseCombo, useHotkeys } from "./useHotkeys.js";
+import { usePaletteCommands } from "./usePaletteCommands.js";
+const DEFAULT_GROUP = "Commands";
+const available = (commands) => commands.filter((command) => !command.hidden);
+function commandToPalette(command) {
+  const { id, label, group, description, icon, keywords, shortcut, disabled, run } = command;
+  return { id, label, group, description, icon, keywords, shortcut, disabled, onSelect: run };
+}
+function commandToMenuItem(command) {
+  const { label, icon, shortcut, disabled, danger, run } = command;
+  return { label, icon, shortcut, disabled, danger, onSelect: () => void run() };
+}
+function commandToHotkey(command) {
+  const shortcut = command.shortcut?.trim();
+  if (!shortcut) return null;
+  const steps = shortcut.split(/\s+/).map(parseCombo);
+  const keys = steps.length > 1 ? { sequence: steps } : steps[0];
+  return {
+    ...keys,
+    allowInInput: command.allowInInput,
+    overLayers: command.overLayers,
+    help: { group: command.group ?? DEFAULT_GROUP, label: command.label, combo: shortcut },
+    // A disabled command leaves the key alone, for the page or the browser.
+    handler: () => {
+      if (command.disabled) return false;
+      void command.run();
+    }
+  };
+}
+function commandShortcuts(commands) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const command of available(commands)) {
+    if (!command.shortcut) continue;
+    const title = command.group ?? DEFAULT_GROUP;
+    const entries = groups.get(title) ?? [];
+    entries.push({ combo: command.shortcut, label: command.label });
+    groups.set(title, entries);
+  }
+  return [...groups].map(([title, entries]) => ({ title, entries }));
+}
+function useCommands(commands, options = {}) {
+  const { palette, ...hotkeys } = options;
+  const current = computed(() => available(toValue(commands)));
+  usePaletteCommands(() => current.value.map(commandToPalette), { scope: palette });
+  useHotkeys(() => current.value.flatMap((command) => commandToHotkey(command) ?? []), hotkeys);
+  return {
+    commands: current,
+    menuItems: computed(() => current.value.map(commandToMenuItem)),
+    shortcuts: computed(() => commandShortcuts(current.value)),
+    /** Runs a command by id, unless it is disabled or hidden. Returns whether it ran. */
+    run(id) {
+      const command = current.value.find((candidate) => candidate.id === id);
+      if (!command || command.disabled) return false;
+      void command.run();
+      return true;
+    }
+  };
+}
+export {
+  commandShortcuts,
+  commandToHotkey,
+  commandToMenuItem,
+  commandToPalette,
+  useCommands
+};

package/dist/composables/useField.d.ts

@@ -21,6 +21,15 @@ export declare function provideField(context: ComputedRef<FieldContext>): void;
 /** The nearest LpFormField's context, or null outside one. */
 export declare function useField(): ComputedRef<FieldContext> | null;
 export declare function fieldMessageId(id: string): string;
+/**
+ * The `aria-describedby` of a control: the consumer's own ids, the field's and
+ * whatever the control adds, each once. A template's explicit binding replaces
+ * what `v-bind` passed, undefined included, so every control merges here
+ * instead of dropping the consumer's description.
+ */
+export declare function mergeDescribedBy(...ids: unknown[]): string | undefined;
+/** Is a boolean attribute that arrived through `$attrs` on? The same test Vue renders it by. */
+export declare function isAttrOn(value: unknown): boolean;
 export interface FieldControlState {
     /** The control wraps itself in its own LpFormField (it has a label, hint or error prop). */
     wrapped: boolean;
@@ -53,3 +62,31 @@ export declare function useFieldBlur(blur: (event: FocusEvent) => void): {
     partId: string;
     onFocusOut: (event: FocusEvent) => void;
 };
+/** What a control hands the FieldWrapper around it: its id, its texts, and the classes it takes from the app. */
+export declare function fieldWrapperBinds(wrapped: boolean, field: {
+    id?: string;
+}, props: {
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+}, attrs: Record<string, unknown>): {
+    wrapped: boolean;
+    id: string | undefined;
+    label: string | undefined;
+    hint: string | undefined;
+    error: string | undefined;
+    required: boolean | undefined;
+    class: unknown;
+    style: unknown;
+};
+/** The state of a control that takes its id from the app and draws no wrapper of its own. */
+export declare function useAttrsField(state: () => {
+    invalid?: boolean;
+    disabled?: boolean;
+}): {
+    attrs: import("vue").Attrs;
+    field: ComputedRef<Omit<FieldContext, "id"> & {
+        id?: string;
+    }>;
+};