@artooi/agents-web-components 0.0.0-stage → 0.1.1

package/src/core/utils.ts

@@ -0,0 +1,230 @@
+// Non-exported-from-index helpers shared by the core modules.
+
+import { randomUUID } from "@ag-ui/client";
+import type { Message } from "@ag-ui/core";
+import type { ClientConversationStore } from "./conversation_store.js";
+
+/**
+ * Overlay a `credentials` mode onto a fetch `init`, or hand the `init` back
+ * untouched when none is configured.
+ *
+ * Absent and `undefined` differ: `exactOptionalPropertyTypes` rejects an
+ * explicit `credentials: undefined`, and writing one anyway would state a mode
+ * where the point is to leave the browser's own default in place.
+ */
+export function withCredentials(
+  init: RequestInit | undefined,
+  credentials: RequestCredentials | undefined,
+): RequestInit | undefined {
+  return credentials === undefined ? init : { ...init, credentials };
+}
+
+/**
+ * Start a new conversation in `store` and return its id.
+ *
+ * `newThread` is optional on the interface, so a store without it is
+ * driven the only other way the interface allows: mint an id here and make it
+ * active. That path loses the store's own note that the thread is new, so a
+ * remote store would go on to ask the server for a conversation that cannot
+ * exist yet — which is why every store in this package implements the method.
+ *
+ * What neither path does is clear the thread being left behind. Starting a
+ * conversation is not a reason to destroy the previous one.
+ */
+export function mintThread(store: ClientConversationStore): string {
+  if (store.newThread !== undefined) {
+    return store.newThread();
+  }
+  const id = randomUUID();
+  store.setActiveThread(id);
+  return id;
+}
+
+/**
+ * Announce host credentials about to leave the document's origin.
+ *
+ * `endpoint` and its six sibling URL attributes are plain HTML, and a page that
+ * interpolates one from a query parameter or from tenant-authored
+ * configuration has handed an attacker the destination. The browser preflights
+ * the custom header, any server willing to answer `Access-Control-Allow-Headers`
+ * receives it, and the token leaves on the element's very first request —
+ * before the user has done anything. Nothing else in this package compares a
+ * configured URL against an expected origin, so without this the delivery is
+ * silent, which is the only part of that sequence worth changing.
+ *
+ * A warning rather than a refusal because a cross-origin agent is a documented
+ * deployment: refusing would break working installations to defend against a
+ * page that is already interpolating untrusted data into its own markup. What
+ * it removes is the silence.
+ *
+ * `warned` is supplied by the caller rather than held here, per this package's
+ * rule against shared mutable state: two elements on one page must each get
+ * their own notice, and the set lives exactly as long as its owner.
+ *
+ * Every configured URL goes through this, not the agent endpoint alone. The
+ * tool catalog, the skills list, the thread and attachment endpoints and the
+ * upload target are all named by the same kind of host attribute and all carry
+ * the same headers, so covering one of them and not the rest would report the
+ * least interesting of the seven.
+ */
+export function warnOnCrossOriginCredentials(
+  url: string | URL,
+  credentialNames: readonly string[],
+  trustedOrigins: readonly string[],
+  warned: Set<string>,
+): void {
+  if (credentialNames.length === 0) {
+    return;
+  }
+  // Resolved against the document, so a relative endpoint — the ordinary case —
+  // lands on this origin and says nothing.
+  const destination = new URL(String(url), location.href).origin;
+  if (
+    destination === location.origin ||
+    trustedOrigins.includes(destination) ||
+    warned.has(destination)
+  ) {
+    return;
+  }
+  warned.add(destination);
+  console.warn(
+    `<ag-ui-chat>: sending host credentials (${credentialNames.join(", ")}) to ` +
+      `${destination}, which is not this page's origin (${location.origin}). Those headers ` +
+      "are the page's own authentication, and whichever server answers the browser's " +
+      "preflight receives them — so a URL attribute built from a query parameter or from " +
+      "tenant-authored configuration is a channel for the token to leave on. If this " +
+      "destination is deliberate, name it in `trustedOrigins` to confirm it and " +
+      "silence this notice. Reported once per origin.",
+  );
+}
+
+/**
+ * The tokens of a comma-separated attribute value, trimmed, with empty ones
+ * dropped -- so `"scroll, drag,"` is `["scroll", "drag"]`.
+ *
+ * Shared by every attribute that names a set of opt-ins, so each one reads a
+ * stray space or a trailing comma the same way.
+ */
+export function commaTokens(value: string): string[] {
+  return value
+    .split(",")
+    .map((token) => token.trim())
+    .filter((token) => token !== "");
+}
+
+/**
+ * `messages` with a result for every tool call that has none, each placed at the
+ * end of the round that made the call.
+ *
+ * **Why every call.** Several model providers reject a request carrying a tool
+ * call with no result, and a conversation that sends one cannot continue. A run
+ * leaves calls unanswered in more ways than any one path can list: Stop while
+ * the stream is still arriving, a round ending on `RUN_ERROR`, a name no tool
+ * here owns, a server that never streamed a result, a page reloaded mid-run.
+ * Answering whatever is unanswered, rather than each of those where it happens,
+ * is what keeps a path nobody listed from sending one.
+ *
+ * **Where each result goes.** At the end of its round: the assistant turns
+ * carrying calls, then the results that follow them. That is the shape the run
+ * loop writes for a round it executed, and a provider reads a result only in the
+ * turn straight after the calls; appended at the end of history, it would sit
+ * behind a user turn or a reply the conversation has moved on to. A call with a
+ * result after a *later* turn is left alone, since it is answered.
+ *
+ * `answer` builds the one message for a call id, so the caller decides what is
+ * true to say and where the label for a reload goes. Calls in `except` are about
+ * to be answered by something else -- a resumed approval, or a navigation
+ * result -- and must not be answered twice.
+ *
+ * Returns `messages` itself when nothing is owed.
+ *
+ * Every condition deciding a round's end is one branch arc, which a coverage
+ * gate reports as covered with any part of it deleted. Each is held by a test in
+ * `ag_ui_chat_unanswered_tool_calls.test.ts`: a result continuing the round by
+ * "answers it after the round's own results"; a turn without calls closing it by
+ * "sends a not-finished result for a call that arrived before it"; a turn with
+ * calls after a result closing it by "answers each round's open call before the
+ * next round starts"; the answered check by "sends the decline Stop gave the
+ * open approval"; and the exclusion by "leaves the call it resumes for the
+ * server to answer".
+ */
+export function answerUnansweredCalls(
+  messages: readonly Message[],
+  answer: (toolCallId: string) => Message,
+  except: ReadonlySet<string> = new Set(),
+): readonly Message[] {
+  const answered = new Set<string>(except);
+  for (const message of messages) {
+    if (message.role === "tool") {
+      answered.add(message.toolCallId);
+    }
+  }
+  const result: Message[] = [];
+  let owed: string[] = [];
+  let afterResult = false;
+  for (const message of messages) {
+    const calls = message.role === "assistant" ? toolCallIds(message.toolCalls) : [];
+    const continuesRound = message.role === "tool" || (calls.length > 0 && !afterResult);
+    if (!continuesRound) {
+      result.push(...owed.map(answer));
+      owed = [];
+    }
+    result.push(message);
+    afterResult = message.role === "tool";
+    for (const id of calls) {
+      if (!answered.has(id)) {
+        // Marked as it is owed, so a store holding the same id twice gets one
+        // answer rather than two, which a provider rejects just the same.
+        answered.add(id);
+        owed.push(id);
+      }
+    }
+  }
+  if (result.length + owed.length === messages.length) {
+    return messages;
+  }
+  result.push(...owed.map(answer));
+  return result;
+}
+
+/**
+ * The ids of the tool calls an assistant turn carries, skipping anything without
+ * one.
+ *
+ * The field is read off the wire or out of a store, and neither is held to its
+ * declared type: a server dumping Python models sends `null` for no calls, and a
+ * stored conversation may be hand-edited or written by an older version. A throw
+ * here would cost the whole request, so a shapeless entry is passed over.
+ */
+function toolCallIds(value: unknown): string[] {
+  // `Object()` boxes a `null` or a primitive entry into something with no `id`,
+  // so one read covers every shape without a branch per shape.
+  return Array.isArray(value)
+    ? value
+        .map((call: unknown) => (Object(call) as { id?: unknown }).id)
+        .filter((id): id is string => typeof id === "string")
+    : [];
+}
+
+/**
+ * A key a message carries in its `metadata`, or the same key at the message's
+ * top level when its metadata has none.
+ *
+ * Two keys are read this way, a tool message's `outcome` and a user message's
+ * `attachments`, and both for the same reason. `@ag-ui/client` 1.0 strips every
+ * key its schemas do not declare, off an inbound event and off the outgoing
+ * input, and `metadata` is the one place it declares open by key, so that is
+ * where this component writes them. A conversation stored by an earlier release
+ * has them at the top level instead, and a reload has to replay it as it
+ * settled.
+ *
+ * Metadata first, so a message carrying both says what the newer writer said.
+ * The result is `unknown` because it comes out of a store, which is not trusted
+ * to hold the shape anything here wrote; the caller narrows it. `Object()` boxes
+ * an absent, `null` or primitive `metadata` into an object with neither key,
+ * which reads as no metadata without a branch per shape.
+ */
+export function metadataOrTopLevel(message: Message, key: "outcome" | "attachments"): unknown {
+  const metadata = Object((message as { metadata?: unknown }).metadata) as Record<string, unknown>;
+  return metadata[key] ?? (message as unknown as Record<string, unknown>)[key];
+}

package/src/dom/animations.ts

@@ -0,0 +1,341 @@
+/**
+ * Visible-action animation primitives.
+ *
+ * These run against the **host page** DOM (not the element's shadow root) so a
+ * user watches the agent type, highlight, and click at human-readable speed.
+ * Each is configurable; pass small/zero durations in tests (or use fake timers).
+ */
+
+import { showHighlightOverlay } from "./highlight_overlay.js";
+import { setNativeChecked, setNativeValue } from "./native_setter.js";
+import { ringColor } from "./ring_color.js";
+import { dispatchInputAndChange } from "./utils.js";
+
+function delay(ms: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+
+/**
+ * Whether the user has asked the OS/browser to minimise motion.
+ *
+ * Honoured by every primitive that moves something, except `typeInto` and
+ * `highlightThenClick`, which keep their explicit durations. The flash drops its fade
+ * but still holds the ring: reduced motion asks for no animation, not no feedback.
+ */
+export function prefersReducedMotion(): boolean {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+/** Like {@link delay}, but resolves immediately under reduced motion. */
+function motionDelay(ms: number): Promise<void> {
+  if (ms <= 0 || prefersReducedMotion()) {
+    return Promise.resolve();
+  }
+  return delay(ms);
+}
+
+/**
+ * Which `<ag-ui-chat>` a ring speaks for. The ring is drawn in the host page, which a
+ * token set on the chat never reaches, so the chat is read directly.
+ */
+export interface RingOwnerOptions {
+  /** The chat whose ring colour and accent to use. Default: the latest connected. */
+  chat?: HTMLElement;
+}
+
+/** The soft halo of the press and toggle rings: the ring colour at 40%. */
+function ringShadow(el: HTMLElement, chat: HTMLElement | undefined): string {
+  return `0 0 0 3px color-mix(in srgb, ${ringColor(el, chat)} 40%, transparent)`;
+}
+
+/** Outline `el` in the ring colour and return the function that restores its own outline. */
+function outlineElement(el: HTMLElement, chat: HTMLElement | undefined): () => void {
+  const previousOutline = el.style.outline;
+  const previousOffset = el.style.outlineOffset;
+  el.style.outline = `2px solid ${ringColor(el, chat)}`;
+  el.style.outlineOffset = "2px";
+  return () => {
+    el.style.outline = previousOutline;
+    el.style.outlineOffset = previousOffset;
+  };
+}
+
+/** An element whose `value` can be typed into. */
+export type TextLikeElement = HTMLInputElement | HTMLTextAreaElement;
+
+export interface TypeOptions {
+  /** Milliseconds between characters. Default 35. */
+  charDelayMs?: number;
+}
+
+/**
+ * Clear `el` and type `value` one character at a time, firing an `input` event
+ * per character as a real user would, then a final `change`.
+ */
+export async function typeInto(
+  el: TextLikeElement,
+  value: string,
+  options: TypeOptions = {},
+): Promise<void> {
+  const charDelayMs = options.charDelayMs ?? 35;
+  setNativeValue(el, "");
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  for (const char of value) {
+    setNativeValue(el, el.value + char);
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    if (charDelayMs > 0) {
+      await delay(charDelayMs);
+    }
+  }
+  el.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
+export interface HighlightClickOptions extends RingOwnerOptions {
+  /** Milliseconds to hold the highlight before clicking. Default 280. */
+  highlightMs?: number;
+}
+
+/** Outline `el`, pause so the user sees it, then click and restore. */
+export async function highlightThenClick(
+  el: HTMLElement,
+  options: HighlightClickOptions = {},
+): Promise<void> {
+  const restore = outlineElement(el, options.chat);
+  await delay(options.highlightMs ?? 280);
+  restore();
+  el.click();
+}
+
+export interface ScrollOptions {
+  /**
+   * How long to wait for a moving scroll to settle before giving up.
+   * Default 600.
+   */
+  settleMs?: number;
+}
+
+const SCROLL_SETTLE_MS = 600;
+
+/** How long to give a smooth scroll to start moving before assuming it will not. */
+const SCROLL_START_MS = 100;
+
+/**
+ * Scroll `el` to the vertical centre of the viewport.
+ *
+ * Resolves once the scroll settles, so a ring is not drawn mid-glide. Awaiting is
+ * optional; the scroll is requested synchronously.
+ */
+export function scrollIntoCenterView(el: HTMLElement, options: ScrollOptions = {}): Promise<void> {
+  const reduced = prefersReducedMotion();
+  el.scrollIntoView({
+    block: "center",
+    inline: "nearest",
+    behavior: reduced ? "auto" : "smooth",
+  });
+  if (reduced) {
+    return Promise.resolve();
+  }
+  return new Promise<void>((resolve) => {
+    let timer: ReturnType<typeof setTimeout>;
+    const settle = (): void => {
+      clearTimeout(timer);
+      document.removeEventListener("scroll", started, true);
+      document.removeEventListener("scrollend", settle, true);
+      resolve();
+    };
+    const started = (): void => {
+      document.removeEventListener("scroll", started, true);
+      clearTimeout(timer);
+      timer = setTimeout(settle, options.settleMs ?? SCROLL_SETTLE_MS);
+    };
+    // Neither event bubbles, so listen on the document in the capture phase. Two timeouts:
+    // an element already in view never fires scrollend (the short probe), and once moving,
+    // the longer budget covers browsers without scrollend.
+    timer = setTimeout(settle, SCROLL_START_MS);
+    document.addEventListener("scroll", started, true);
+    document.addEventListener("scrollend", settle, true);
+  });
+}
+
+/** Total on-screen life of the flash ring, hold plus fade. */
+const FLASH_MS = 1200;
+
+/** Share of {@link FLASH_MS} spent fading out rather than holding. */
+const FLASH_FADE_RATIO = 1 / 3;
+
+export interface FlashOptions extends RingOwnerOptions {
+  /** Total milliseconds the ring is on screen, hold plus fade. Default 1200. */
+  flashMs?: number;
+  /**
+   * Ring colour. Defaults to `--ag-ui-highlight-ring-color` (on the target,
+   * then on the chat), then the target's `--ag-ui-accent`, then the chat's
+   * accent.
+   */
+  color?: string;
+  /**
+   * Dim everything except the target. Draws an overlay outside the element instead of an
+   * outline (see {@link showHighlightOverlay}); it takes no pointer event, so the page
+   * stays usable.
+   */
+  scrim?: boolean;
+  /** Draw the ring as a moving gradient. Also an overlay, for the same reason. */
+  gradient?: boolean;
+  /** Gap between the target's box and an overlay ring. Default 4. */
+  ringPadding?: number;
+  /**
+   * Move keyboard focus to the element as well. Defaults to false for
+   * {@link flash} and true for {@link focusWithFlash}.
+   */
+  focus?: boolean;
+}
+
+async function flashRing(
+  el: HTMLElement,
+  options: FlashOptions,
+  focusByDefault: boolean,
+): Promise<void> {
+  if (options.focus ?? focusByDefault) {
+    // preventScroll: focus()'s instant scroll would fight a smooth scroll still in flight.
+    el.focus({ preventScroll: true });
+  }
+  const flashMs = options.flashMs ?? FLASH_MS;
+  if (flashMs <= 0) {
+    return;
+  }
+  // A scrim or gradient cannot be an outline (a colour only, and clipped with the target).
+  if (options.scrim === true || options.gradient === true) {
+    const dismiss = showHighlightOverlay(el, {
+      scrim: options.scrim === true,
+      gradient: options.gradient === true,
+      ...(options.color === undefined ? {} : { color: options.color }),
+      ...(options.ringPadding === undefined ? {} : { padding: options.ringPadding }),
+      ...(options.chat === undefined ? {} : { chat: options.chat }),
+    });
+    await delay(flashMs);
+    dismiss();
+    return;
+  }
+  const previousOutline = el.style.outline;
+  const previousOffset = el.style.outlineOffset;
+  const previousTransition = el.style.transition;
+  const color = options.color ?? ringColor(el, options.chat);
+  // outline, not box-shadow: an overflow:hidden ancestor sharing the target's box clips a shadow away.
+  el.style.outline = `3px solid ${color}`;
+  el.style.outlineOffset = "2px";
+  const fadeMs = prefersReducedMotion() ? 0 : Math.round(flashMs * FLASH_FADE_RATIO);
+  await delay(flashMs - fadeMs);
+  if (fadeMs > 0) {
+    // Setting the transition and the new colour in one task is fine: transitions start from the after-change style.
+    el.style.transition = `outline-color ${fadeMs}ms ease-out`;
+    el.style.outline = "3px solid transparent";
+    await delay(fadeMs);
+  }
+  el.style.outline = previousOutline;
+  el.style.outlineOffset = previousOffset;
+  el.style.transition = previousTransition;
+}
+
+/**
+ * Flash a ring around `el` without touching focus.
+ *
+ * Prefer this over {@link focusWithFlash} when the point is to show the user
+ * something: moving focus steals it from the composer, can fire blur validation
+ * on whatever they were mid-edit in, and can close an open menu.
+ */
+export function flash(el: HTMLElement, options: FlashOptions = {}): Promise<void> {
+  return flashRing(el, options, false);
+}
+
+/**
+ * Focus `el` and flash a ring around it. Focus moves unless `options.focus`
+ * says otherwise; use {@link flash} to leave focus where the user put it.
+ */
+export function focusWithFlash(el: HTMLElement, options: FlashOptions = {}): Promise<void> {
+  return flashRing(el, options, true);
+}
+
+export interface PressOptions extends RingOwnerOptions {
+  /** Milliseconds to hold the pressed state before clicking. Default 140. */
+  pressMs?: number;
+}
+
+/**
+ * Show a brief pressed affordance on a control — a slight scale-down plus
+ * accent ring — then click it and restore. Reads as a press rather than the
+ * plain outline {@link highlightThenClick} draws.
+ */
+export async function pressThenClick(el: HTMLElement, options: PressOptions = {}): Promise<void> {
+  const pressMs = options.pressMs ?? 140;
+  const previousTransform = el.style.transform;
+  const previousTransition = el.style.transition;
+  const previousShadow = el.style.boxShadow;
+  el.style.transition = "transform 80ms ease";
+  el.style.transform = "scale(0.96)";
+  el.style.boxShadow = ringShadow(el, options.chat);
+  await motionDelay(pressMs);
+  el.style.transform = previousTransform;
+  el.style.transition = previousTransition;
+  el.style.boxShadow = previousShadow;
+  el.click();
+}
+
+export interface SelectOptions extends RingOwnerOptions {
+  /** Milliseconds to hold the highlight before committing. Default 220. */
+  highlightMs?: number;
+}
+
+/** Find an option in `el` whose value or visible text equals `value`. */
+function findOption(el: HTMLSelectElement, value: string): HTMLOptionElement | null {
+  for (const option of Array.from(el.options)) {
+    if (option.value === value || option.text === value) {
+      return option;
+    }
+  }
+  return null;
+}
+
+/**
+ * Outline a `<select>`, pause so the user sees the pick, then set it to the
+ * option matching `value` (by value or visible text) and fire `input` +
+ * `change`. Throws when no option matches.
+ */
+export async function selectOption(
+  el: HTMLSelectElement,
+  value: string,
+  options: SelectOptions = {},
+): Promise<void> {
+  const option = findOption(el, value);
+  if (option === null) {
+    throw new Error(`no <option> matching "${value}"`);
+  }
+  const restore = outlineElement(el, options.chat);
+  await motionDelay(options.highlightMs ?? 220);
+  setNativeValue(el, option.value);
+  dispatchInputAndChange(el);
+  restore();
+}
+
+export interface ToggleOptions extends RingOwnerOptions {
+  /** Milliseconds to hold the flash. Default 200. */
+  flashMs?: number;
+}
+
+/**
+ * Flash a ring around a checkbox/radio, set its `checked` state, and fire
+ * `input` + `change` so frameworks observe the flip.
+ */
+export async function toggleControl(
+  el: HTMLInputElement,
+  checked: boolean,
+  options: ToggleOptions = {},
+): Promise<void> {
+  const flashMs = options.flashMs ?? 200;
+  const previousShadow = el.style.boxShadow;
+  el.style.boxShadow = ringShadow(el, options.chat);
+  await motionDelay(flashMs);
+  setNativeChecked(el, checked);
+  dispatchInputAndChange(el);
+  el.style.boxShadow = previousShadow;
+}

package/src/dom/dom_driver.ts

@@ -0,0 +1,91 @@
+import {
+  type FlashOptions,
+  focusWithFlash,
+  type HighlightClickOptions,
+  highlightThenClick,
+  type PressOptions,
+  pressThenClick,
+  type SelectOptions,
+  scrollIntoCenterView,
+  selectOption,
+  type TextLikeElement,
+  type ToggleOptions,
+  type TypeOptions,
+  toggleControl,
+  typeInto,
+} from "./animations.js";
+import { setNativeChecked, setNativeValue } from "./native_setter.js";
+import { dispatchInputAndChange } from "./utils.js";
+
+/**
+ * Every flash option except `focus`, which is not on offer: a field has to hold
+ * focus to be typed into.
+ */
+export interface FillFieldOptions extends TypeOptions, Omit<FlashOptions, "focus"> {}
+
+/**
+ * Scroll to, focus (with a flash), and type `value` into a text field.
+ *
+ * The scroll is awaited — typing into an element still gliding past shows the
+ * user nothing.
+ */
+export async function fillField(
+  el: TextLikeElement,
+  value: string,
+  options: FillFieldOptions = {},
+): Promise<void> {
+  await scrollIntoCenterView(el);
+  await focusWithFlash(el, { ...options, flashMs: options.flashMs ?? 0 });
+  await typeInto(el, value, options);
+}
+
+/** Scroll to, highlight, and click an element. */
+export async function clickElement(
+  el: HTMLElement,
+  options: HighlightClickOptions = {},
+): Promise<void> {
+  await scrollIntoCenterView(el);
+  await highlightThenClick(el, options);
+}
+
+/** Scroll to a button/control and click it with a visible "press" animation. */
+export async function pressButton(el: HTMLElement, options: PressOptions = {}): Promise<void> {
+  await scrollIntoCenterView(el);
+  await pressThenClick(el, options);
+}
+
+/** Scroll to a `<select>`, highlight it, and pick the matching option (animated). */
+export async function selectControl(
+  el: HTMLSelectElement,
+  value: string,
+  options: SelectOptions = {},
+): Promise<void> {
+  await scrollIntoCenterView(el);
+  await selectOption(el, value, options);
+}
+
+/** Scroll to a checkbox/radio, flash it, and set its checked state (animated). */
+export async function toggleCheckbox(
+  el: HTMLInputElement,
+  checked: boolean,
+  options: ToggleOptions = {},
+): Promise<void> {
+  await scrollIntoCenterView(el);
+  await toggleControl(el, checked, options);
+}
+
+/**
+ * Set a `<select>` or checkbox value without animation, dispatching the `input`
+ * and `change` events frameworks listen for.
+ */
+export function setControlValue(
+  el: HTMLInputElement | HTMLSelectElement,
+  value: string | boolean,
+): void {
+  if (el instanceof HTMLInputElement && el.type === "checkbox") {
+    setNativeChecked(el, Boolean(value));
+  } else {
+    setNativeValue(el, String(value));
+  }
+  dispatchInputAndChange(el);
+}