@ui-sdk/web 0.0.0-stage → 0.1.0-beta.1

package/dist/accordion.d.ts

@@ -0,0 +1,2 @@
+declare function defineAccordionElements(): void;
+export { defineAccordionElements };

package/dist/accordion.js

@@ -0,0 +1,57 @@
+// src/accordion.ts
+import { accordion } from "@ui-sdk/core/accordion";
+import { createParts, wrappedButton } from "./define-element.js";
+var heading = ":scope > :is(h1, h2, h3, h4, h5, h6)";
+function defineAccordionElements() {
+  createParts(accordion, {
+    root: {
+      tag: "ui-accordion",
+      display: "block",
+      defaults: { collapsible: true },
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value ?? [])
+        }
+      },
+      api: [
+        "getValue",
+        "setValue",
+        "isOpen",
+        "open",
+        "close",
+        "toggle",
+        "openAll",
+        "closeAll",
+        "focus"
+      ]
+    },
+    // Fires `openchange` and `openchangecomplete` with the item's open state.
+    item: { tag: "ui-accordion-item", display: "block" },
+    // Binds to the heading inside it. Without one, the element is the heading.
+    header: {
+      tag: "ui-accordion-header",
+      display: "block",
+      target: (el) => el.querySelector(heading) ?? el,
+      render(el) {
+        if (el.querySelector(heading)) {
+          return;
+        }
+        el.setAttribute("role", "heading");
+        if (!el.hasAttribute("aria-level")) {
+          el.setAttribute("aria-level", "3");
+        }
+      }
+    },
+    // A wrapper, so the trigger stays a real button with its built-in behavior.
+    trigger: {
+      tag: "ui-accordion-trigger",
+      display: "contents",
+      target: wrappedButton
+    },
+    panel: { tag: "ui-accordion-panel", display: "block" }
+  });
+}
+export {
+  defineAccordionElements
+};

package/dist/action.d.ts

@@ -0,0 +1,16 @@
+import type { ActionDetails } from "@ui-sdk/core";
+import { canceledAction } from "@ui-sdk/core/renderer";
+/**
+ * The `detail` of an `action` event: how the part was pressed, and `waitUntil()`.
+ * @stable
+ */
+type UiActionDetail = ActionDetails & {
+    /** Keeps the part pending until the Promise settles. A rejection becomes the part's error. */
+    waitUntil: (promise: Promise<unknown>) => void;
+};
+declare function waitList(): {
+    waitUntil: (promise: unknown) => void;
+    done: () => unknown[];
+};
+declare const actionOf: (el: HTMLElement) => (_event: Event | undefined, details: ActionDetails) => typeof canceledAction | Promise<unknown[]> | undefined;
+export { actionOf, type UiActionDetail, waitList };

package/dist/action.js

@@ -0,0 +1,39 @@
+// src/action.ts
+import { canceledAction } from "@ui-sdk/core/renderer";
+function waitList() {
+  const waiting = [];
+  let dispatching = true;
+  const waitUntil = (promise) => {
+    if (!dispatching) {
+      throw new DOMException(
+        "waitUntil() can only be called while the event dispatches.",
+        "InvalidStateError"
+      );
+    }
+    waiting.push(promise);
+  };
+  const done = () => {
+    dispatching = false;
+    return waiting;
+  };
+  return { waitUntil, done };
+}
+var actionOf = (el) => (_event, details) => {
+  const { waitUntil, done } = waitList();
+  const proceed = el.dispatchEvent(
+    new CustomEvent("action", {
+      cancelable: true,
+      composed: true,
+      detail: { ...details, waitUntil }
+    })
+  );
+  const waiting = done();
+  if (!proceed) {
+    return canceledAction;
+  }
+  return waiting.length ? Promise.all(waiting) : void 0;
+};
+export {
+  actionOf,
+  waitList
+};

package/dist/agent.d.ts

@@ -0,0 +1,2 @@
+export { agentTools, createAgent, registerTools } from "@ui-sdk/core/agent";
+export type { AgentAction, AgentChange, AgentComponent, AgentStep, ObservedChange, } from "@ui-sdk/core/agent";

package/dist/agent.js

@@ -0,0 +1,7 @@
+// src/agent.ts
+import { agentTools, createAgent, registerTools } from "@ui-sdk/core/agent";
+export {
+  agentTools,
+  createAgent,
+  registerTools
+};

package/dist/autocomplete.d.ts

@@ -0,0 +1,2 @@
+declare function defineAutocompleteElements(): void;
+export { defineAutocompleteElements };

package/dist/autocomplete.js

@@ -0,0 +1,120 @@
+// src/autocomplete.ts
+import {
+  autocomplete
+} from "@ui-sdk/core/autocomplete";
+import { createParts, wrappedChild } from "./define-element.js";
+import { copy, itemText, renderData, stashedEmpty, templateOf } from "./list.js";
+import { popupKinds, popupState, sheetInputPortal } from "./popup.js";
+var owner = "ui-autocomplete";
+var lists = /* @__PURE__ */ new WeakMap();
+function defineAutocompleteElements() {
+  createParts(autocomplete, {
+    root: {
+      tag: owner,
+      defaults: { loop: true, dismissible: true },
+      display: "contents",
+      kinds: popupKinds,
+      // A filter function is a property; the attribute takes the named modes.
+      properties: ["filter"],
+      options: (el) => {
+        const data = el;
+        return {
+          items: data.items,
+          ...(typeof data.filter === "function" || data.filter === false) && {
+            filter: data.filter
+          },
+          container: void 0,
+          onSubmit: (value, { event }) => submitted(el, value, event)
+        };
+      },
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value ?? "")
+        },
+        ...popupState
+      },
+      api: [
+        "isOpen",
+        "setOpen",
+        "open",
+        "close",
+        "toggle",
+        "getValue",
+        "setValue",
+        "clear",
+        "focus"
+      ],
+      // container="#id" renders the suggestions there. As a sheet, they sit in a
+      // viewport there and the field moves into its header.
+      portal: sheetInputPortal("ui-autocomplete-viewport"),
+      // Runs again whenever `items` is set. Data suggestions follow the text.
+      render(el, instance) {
+        const target = el;
+        renderSuggestions(target, instance.api);
+        return instance.subscribe(() => renderSuggestions(target, instance.api));
+      }
+    },
+    label: { tag: "ui-autocomplete-label", display: "block" },
+    // Wrappers, so the field stays a real input and the buttons real buttons.
+    input: {
+      tag: "ui-autocomplete-input",
+      display: "contents",
+      target: wrappedChild("input")
+    },
+    trigger: {
+      tag: "ui-autocomplete-trigger",
+      display: "contents",
+      target: wrappedChild("button")
+    },
+    clear: {
+      tag: "ui-autocomplete-clear",
+      display: "contents",
+      target: wrappedChild("button")
+    },
+    content: { tag: "ui-autocomplete-content", kinds: popupKinds },
+    list: { tag: "ui-autocomplete-list", display: "block" },
+    item: { tag: "ui-autocomplete-item", display: "block" },
+    // Its text, with what the field's text matched in <mark>. It holds text only.
+    "item-text": { tag: "ui-autocomplete-item-text", ...itemText },
+    // An icon inside a suggestion. Screen readers and filtering skip it.
+    "item-icon": "ui-autocomplete-item-icon",
+    group: { tag: "ui-autocomplete-group", display: "block" },
+    "group-label": { tag: "ui-autocomplete-group-label", display: "block" },
+    separator: { tag: "ui-autocomplete-separator", display: "block" },
+    empty: { tag: "ui-autocomplete-empty", ...stashedEmpty },
+    status: { tag: "ui-autocomplete-status", display: "block" },
+    arrow: { tag: "ui-autocomplete-arrow", display: "block" }
+  });
+}
+function submitted(el, value, event) {
+  const submit = new CustomEvent("submit", {
+    cancelable: true,
+    composed: true,
+    detail: { value }
+  });
+  if (!el.dispatchEvent(submit)) {
+    event?.preventDefault();
+  }
+}
+function renderSuggestions(el, api) {
+  if (!el.items) {
+    return;
+  }
+  const template = templateOf(el);
+  let list = lists.get(el) ?? [
+    ...el.querySelectorAll("ui-autocomplete-content ui-autocomplete-list")
+  ].find((found) => found.closest("ui-autocomplete") === el);
+  if (!list) {
+    const created = copy(template, "ui-autocomplete-content", false);
+    list = copy(template, "ui-autocomplete-list", false);
+    created.append(list);
+    el.append(created);
+  }
+  lists.set(el, list);
+  const visible = api.internal.listbox.visibleData()?.list ?? el.items;
+  renderData(list, "ui-autocomplete", visible, template);
+}
+export {
+  defineAutocompleteElements
+};

package/dist/autoload.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The entry that defines `tag`: the longest entry named like it, as
+ * `tabs` for <ui-tabs-tab> or `overlays` for <ui-overlay-host>.
+ */
+declare function entryOf(tag: string, entries: readonly string[]): string | undefined;
+/**
+ * The folder a loader at `scriptUrl` loads components from: `web@1.2.0/`
+ * beside `web@1.2.0.js`. A query or hash on the script, like `?v=2`, isn't
+ * part of the folder's name.
+ */
+declare function componentsBase(scriptUrl: string): URL;
+/**
+ * Imports the entry of every undefined `ui-` element in `root` from `base`,
+ * like `web/tabs.js`, then of every one added later, inside open shadow roots
+ * too.
+ */
+declare function autoload(base: URL, entries: readonly string[], root?: Document): () => void;
+export { autoload, componentsBase, entryOf };

package/dist/autoload.js

@@ -0,0 +1,63 @@
+// src/autoload.ts
+function entryOf(tag, entries) {
+  let match;
+  for (const entry of entries) {
+    const named = [entry, entry.replace(/s$/, "")].some(
+      (stem) => tag === `ui-${stem}` || tag.startsWith(`ui-${stem}-`)
+    );
+    if (named && entry.length > (match?.length ?? 0)) {
+      match = entry;
+    }
+  }
+  return match;
+}
+function componentsBase(scriptUrl) {
+  return new URL(new URL(scriptUrl).pathname.replace(/\.js$/, "/"), scriptUrl);
+}
+function autoload(base, entries, root = document) {
+  const requested = /* @__PURE__ */ new Set();
+  const shadowRoots = /* @__PURE__ */ new WeakSet();
+  const observer = new MutationObserver((records) => {
+    for (const record of records) {
+      for (const node of record.addedNodes) {
+        load(node);
+      }
+    }
+  });
+  const load = (node) => {
+    if (!(node instanceof Element)) {
+      return;
+    }
+    for (const element of [node, ...node.querySelectorAll("*")]) {
+      const shadowRoot = element.shadowRoot;
+      if (shadowRoot && !shadowRoots.has(shadowRoot)) {
+        shadowRoots.add(shadowRoot);
+        observer.observe(shadowRoot, { childList: true, subtree: true });
+        for (const child of shadowRoot.children) {
+          load(child);
+        }
+      }
+      const tag = element.localName;
+      if (!tag.startsWith("ui-") || customElements.get(tag)) {
+        continue;
+      }
+      const entry = entryOf(tag, entries);
+      if (!entry || requested.has(entry)) {
+        continue;
+      }
+      requested.add(entry);
+      void import(
+        /* @vite-ignore */
+        new URL(`${entry}.js`, base).href
+      );
+    }
+  };
+  load(root.documentElement);
+  observer.observe(root.documentElement, { childList: true, subtree: true });
+  return () => observer.disconnect();
+}
+export {
+  autoload,
+  componentsBase,
+  entryOf
+};

package/dist/avatar.d.ts

@@ -0,0 +1,2 @@
+declare function defineAvatarElements(): void;
+export { defineAvatarElements };

package/dist/avatar.js

@@ -0,0 +1,27 @@
+// src/avatar.ts
+import { avatar } from "@ui-sdk/core/avatar";
+import { createParts } from "./define-element.js";
+function defineAvatarElements() {
+  createParts(avatar, {
+    root: {
+      tag: "ui-avatar",
+      children: { image: (el) => el.querySelector(":scope > img") },
+      // The fallback may upgrade after the avatar binds, so its delay comes from markup.
+      options: (el) => ({
+        fallbackDelay: Number(
+          el.querySelector(":scope > ui-avatar-fallback")?.getAttribute("delay")
+        ) || 0
+      }),
+      optionalChildren: ["image"],
+      kinds: { fallbackDelay: null }
+    },
+    fallback: {
+      tag: "ui-avatar-fallback",
+      // Also brings in the rule that keeps a hidden part hidden whatever display a class gives it.
+      display: "block"
+    }
+  });
+}
+export {
+  defineAvatarElements
+};

package/dist/browser-core.d.ts

@@ -0,0 +1,2 @@
+export * from "@ui-sdk/core";
+export { createParts, wrappedButton, wrappedChild } from "./define-element.js";

package/dist/browser-core.js

@@ -0,0 +1,8 @@
+// src/browser-core.ts
+export * from "@ui-sdk/core";
+import { createParts, wrappedButton, wrappedChild } from "./define-element.js";
+export {
+  createParts,
+  wrappedButton,
+  wrappedChild
+};

package/dist/button.d.ts

@@ -0,0 +1,2 @@
+declare function defineButtonElements(): void;
+export { defineButtonElements };

package/dist/button.js

@@ -0,0 +1,35 @@
+// src/button.ts
+import { button } from "@ui-sdk/core/button";
+import { actionOf } from "./action.js";
+import { createParts, wrappedButton } from "./define-element.js";
+var authoredTypes = /* @__PURE__ */ new WeakMap();
+var isButtonType = (type) => type === "button" || type === "submit" || type === "reset";
+function authoredType(el) {
+  const inner = wrappedButton(el);
+  if (!inner) {
+    return void 0;
+  }
+  const current = inner.getAttribute("type");
+  const authored = authoredTypes.get(inner);
+  const written = isButtonType(authored) ? authored : "button";
+  if (!authoredTypes.has(inner) || current !== written) {
+    authoredTypes.set(inner, current);
+  }
+  const type = authoredTypes.get(inner);
+  return isButtonType(type) ? type : void 0;
+}
+function defineButtonElements() {
+  createParts(button, {
+    root: {
+      tag: "ui-button",
+      target: wrappedButton,
+      display: "contents",
+      // The button's own type, as written, so <button type="submit"> stays a submit button.
+      kinds: { type: null },
+      options: (el) => ({ type: authoredType(el), action: actionOf(el) })
+    }
+  });
+}
+export {
+  defineButtonElements
+};

package/dist/calendar.d.ts

@@ -0,0 +1,23 @@
+import type { PrimitiveInstance } from "@ui-sdk/core";
+import { calendar } from "@ui-sdk/core/calendar";
+import type { datePicker } from "@ui-sdk/core/date-picker";
+declare function defineCalendarElements(): void;
+/**
+ * Defines the calendar's parts, which work inside <ui-calendar> and inside
+ * <ui-date-picker-content>: with the calendar's primitive and the date
+ * picker as `also`, or the other way around, since both have these slots.
+ * Whichever runs first defines them.
+ */
+declare function defineCalendarParts(primitive: typeof calendar | typeof datePicker, also: string): void;
+/**
+ * Fills `container` with Previous, the heading and Next, and keeps a grid in
+ * it for each month `calendar` shows, like a calendar or a date picker's
+ * content left empty.
+ */
+declare function renderDefaultCalendar(container: HTMLElement, calendar: HTMLElement): void;
+/**
+ * Renders the parts of a calendar or a date picker from its state, now and on
+ * every change. Returns the unsubscribe, for the owner's `render` to return.
+ */
+declare function renderCalendarParts(calendar: HTMLElement, instance: PrimitiveInstance): () => void;
+export { defineCalendarElements, defineCalendarParts, renderCalendarParts, renderDefaultCalendar, };