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

package/dist/overlays.js

@@ -0,0 +1,156 @@
+// src/overlays.ts
+import { toasterInternals } from "@ui-sdk/core/renderer";
+import {
+  overlays as sharedOverlays
+} from "@ui-sdk/core/overlays";
+import { claimTag, whenGone } from "./define-element.js";
+import { defineAlertDialogElements } from "./dialog.js";
+import { defineToastElements } from "./toast.js";
+import { createOverlays, overlays } from "@ui-sdk/core/overlays";
+function element(tag, text) {
+  const el = document.createElement(tag);
+  if (text) {
+    el.textContent = text;
+  }
+  return el;
+}
+function toasterRegion(host, toaster) {
+  const region = element("ui-toast-region");
+  region.hosted = true;
+  region.toaster = toaster;
+  for (const [name, value] of Object.entries(host.toast?.attributes ?? {})) {
+    region.setAttribute(name, value);
+  }
+  if (host.toast?.template) {
+    region.append(host.toast.template.cloneNode(true));
+  }
+  const show = () => {
+    const placed = toasterInternals(toaster).hasPlacedRegion();
+    if (placed && region.isConnected) {
+      region.remove();
+    }
+    if (!placed && !region.isConnected) {
+      host.append(region);
+    }
+  };
+  const stop = toaster.subscribe(show);
+  show();
+  return () => {
+    stop();
+    region.remove();
+  };
+}
+function confirmDialog(host, entry) {
+  const question = entry.payload ?? {};
+  const dialog = element("ui-alert-dialog");
+  dialog.controller = entry.controller;
+  const content = element("ui-alert-dialog-content");
+  content.append(element("ui-alert-dialog-title", question.title));
+  if (question.description) {
+    content.append(element("ui-alert-dialog-description", question.description));
+  }
+  const actions = element("div");
+  const cancel = element("ui-alert-dialog-close");
+  cancel.append(element("button", question.cancelLabel ?? "Cancel"));
+  const agree = element("ui-alert-dialog-close");
+  agree.setAttribute("value", "confirm");
+  agree.append(element("button", question.confirmLabel ?? "Continue"));
+  actions.append(cancel, agree);
+  content.append(actions);
+  dialog.append(content);
+  dialog.addEventListener("openchangecomplete", (event) => {
+    if (event.detail.value === false) {
+      entry.done();
+    }
+  });
+  host.append(dialog);
+  let opening = true;
+  const frame = requestAnimationFrame(() => {
+    opening = false;
+    entry.open();
+  });
+  return () => {
+    dialog.remove();
+    if (!opening) {
+      return;
+    }
+    cancelAnimationFrame(frame);
+    entry.done();
+  };
+}
+function defineOverlayHostElements() {
+  defineToastElements();
+  defineAlertDialogElements();
+  if (!claimTag("ui-overlay-host")) {
+    return;
+  }
+  customElements.define(
+    "ui-overlay-host",
+    class extends HTMLElement {
+      #rendered = /* @__PURE__ */ new Map();
+      #stop;
+      #attached;
+      connectedCallback() {
+        const host = this;
+        const overlays2 = host.overlays ?? sharedOverlays;
+        if (this.#stop && overlays2 === this.#attached) {
+          return;
+        }
+        this.#teardown();
+        this.#attached = overlays2;
+        const release = overlays2.attachHost();
+        const sync = () => {
+          const entries = overlays2.entries();
+          for (const [entry, remove] of this.#rendered) {
+            if (!entries.includes(entry)) {
+              remove();
+              this.#rendered.delete(entry);
+            }
+          }
+          for (const entry of entries) {
+            if (this.#rendered.has(entry)) {
+              continue;
+            }
+            if (entry.type === "toaster") {
+              this.#rendered.set(
+                entry,
+                toasterRegion(
+                  host,
+                  entry.data.toaster
+                )
+              );
+            }
+            if (entry.type === "confirm") {
+              this.#rendered.set(
+                entry,
+                confirmDialog(host, entry.data)
+              );
+            }
+          }
+        };
+        const unsubscribe = overlays2.subscribe(sync);
+        sync();
+        this.#stop = () => {
+          unsubscribe();
+          release();
+        };
+      }
+      disconnectedCallback() {
+        whenGone(this, () => this.#teardown());
+      }
+      #teardown() {
+        this.#stop?.();
+        this.#stop = void 0;
+        for (const remove of this.#rendered.values()) {
+          remove();
+        }
+        this.#rendered.clear();
+      }
+    }
+  );
+}
+export {
+  createOverlays,
+  defineOverlayHostElements,
+  overlays
+};

package/dist/pagination.d.ts

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

package/dist/pagination.js

@@ -0,0 +1,127 @@
+// src/pagination.ts
+import { pagination } from "@ui-sdk/core/pagination";
+import { createParts, wrappedButton } from "./define-element.js";
+import { element } from "./list.js";
+var owner = "ui-pagination";
+function definePaginationElements() {
+  createParts(pagination, {
+    root: {
+      tag: owner,
+      display: "block",
+      state: {
+        page: {
+          get: (api) => api.getPage(),
+          set: (api, page) => api.setPage(Number(page))
+        }
+      },
+      api: [
+        "getPage",
+        "getPageCount",
+        "setPage",
+        "next",
+        "previous",
+        "first",
+        "last"
+      ],
+      // Lists follow the range.
+      render(el, { api, subscribe }) {
+        const render = () => renderLists(el, api);
+        render();
+        queueMicrotask(render);
+        return subscribe(render);
+      }
+    },
+    list: { tag: "ui-pagination-list", display: "block" },
+    item: { tag: "ui-pagination-item", display: "block" },
+    link: {
+      tag: "ui-pagination-link",
+      display: "contents",
+      target: wrappedButton
+    },
+    previous: {
+      tag: "ui-pagination-previous",
+      display: "contents",
+      target: wrappedButton
+    },
+    next: {
+      tag: "ui-pagination-next",
+      display: "contents",
+      target: wrappedButton
+    },
+    first: {
+      tag: "ui-pagination-first",
+      display: "contents",
+      target: wrappedButton
+    },
+    last: {
+      tag: "ui-pagination-last",
+      display: "contents",
+      target: wrappedButton
+    },
+    ellipsis: { tag: "ui-pagination-ellipsis", display: "block" }
+  });
+}
+var renderedItems = /* @__PURE__ */ new WeakMap();
+var itemOf = /* @__PURE__ */ new WeakMap();
+function createEntry(list, item) {
+  const isPage = typeof item === "number";
+  const template = list.querySelector(
+    isPage ? ":scope > template:not([data-ellipsis])" : ":scope > template[data-ellipsis]"
+  );
+  const copy = template?.content.firstElementChild?.cloneNode(true);
+  if (!isPage) {
+    if (copy) {
+      return copy;
+    }
+    const entry = element("ui-pagination-item");
+    entry.append(element("ui-pagination-ellipsis", {}, "\u2026"));
+    return entry;
+  }
+  if (!copy) {
+    return void 0;
+  }
+  const link = copy.localName === "ui-pagination-link" ? copy : copy.querySelector("ui-pagination-link");
+  link?.setAttribute("page", String(item));
+  const content = link && wrappedButton(link);
+  if (content && !content.textContent?.trim()) {
+    content.textContent = String(item);
+  }
+  return copy;
+}
+function renderLists(el, api) {
+  const items = api.internal.items();
+  for (const list of el.querySelectorAll("ui-pagination-list")) {
+    const templates = list.querySelectorAll(":scope > template");
+    if (list.closest(owner) !== el || !templates.length || renderedItems.get(list) === items) {
+      continue;
+    }
+    renderedItems.set(list, items);
+    const existing = /* @__PURE__ */ new Map();
+    for (const child of [...list.children]) {
+      const item = itemOf.get(child);
+      if (item === void 0) {
+        continue;
+      }
+      if (items.includes(item)) {
+        existing.set(item, child);
+      } else {
+        child.remove();
+      }
+    }
+    let previous = templates[templates.length - 1];
+    for (const item of items) {
+      const entry = existing.get(item) ?? createEntry(list, item);
+      if (!entry) {
+        continue;
+      }
+      itemOf.set(entry, item);
+      if (previous.nextElementSibling !== entry) {
+        previous.after(entry);
+      }
+      previous = entry;
+    }
+  }
+}
+export {
+  definePaginationElements
+};

package/dist/password-input.d.ts

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

package/dist/password-input.js

@@ -0,0 +1,57 @@
+// src/password-input.ts
+import {
+  passwordInput
+} from "@ui-sdk/core/password-input";
+import { createParts, wrappedButton } from "./define-element.js";
+var owner = "ui-password-input";
+function definePasswordInputElements() {
+  createParts(passwordInput, {
+    root: {
+      tag: owner,
+      display: "block",
+      options: (el) => {
+        const input = el.querySelector("input");
+        const defaultValue = el.getAttribute("default-value");
+        if (input && defaultValue !== null && !input.hasAttribute("value")) {
+          input.defaultValue = defaultValue;
+        }
+        return {
+          controlId: input?.id || void 0,
+          autoComplete: input?.getAttribute("autocomplete") ?? void 0
+        };
+      },
+      // The input names them.
+      kinds: { controlId: null, autoComplete: null },
+      children: { control: (el) => el.querySelector("input") },
+      // The options above read these from the input, and follow them.
+      childProps: { attributes: ["autocomplete", "id"] },
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value ?? "")
+        },
+        visible: {
+          get: (api) => api.isVisible(),
+          set: (api, visible) => api.setVisible(!!visible)
+        }
+      },
+      api: [
+        "getValue",
+        "setValue",
+        "clear",
+        "isVisible",
+        "setVisible",
+        "toggleVisible",
+        "focus"
+      ]
+    },
+    toggle: {
+      tag: "ui-password-input-toggle",
+      display: "contents",
+      target: wrappedButton
+    }
+  });
+}
+export {
+  definePasswordInputElements
+};

package/dist/popover.d.ts

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

package/dist/popover.js

@@ -0,0 +1,64 @@
+// src/popover.ts
+import { popover } from "@ui-sdk/core/popover";
+import { createParts, wrappedButton } from "./define-element.js";
+import {
+  popupApi,
+  popupKinds,
+  popupState,
+  renderPopupTitle,
+  sheetPortal
+} from "./popup.js";
+var owner = "ui-popover";
+function definePopoverElements() {
+  createParts(popover, {
+    root: {
+      tag: owner,
+      defaults: { dismissible: true },
+      kinds: popupKinds,
+      // `portal` handles the `container` attribute, so core never gets it.
+      options: () => ({ container: void 0 }),
+      state: popupState,
+      api: popupApi,
+      // container="#id" renders the popup there, and a sheet's viewport with it.
+      portal: sheetPortal("ui-popover-viewport")
+    },
+    // With `for="popover-id"`, it opens that popover from anywhere on the page.
+    trigger: {
+      tag: "ui-popover-trigger",
+      display: "contents",
+      target: wrappedButton
+    },
+    close: {
+      tag: "ui-popover-close",
+      display: "contents",
+      target: wrappedButton
+    },
+    // Shows the shortcut of the trigger it's in, or its own `shortcut`, when it has no text of its own.
+    shortcut: {
+      tag: "ui-popover-shortcut",
+      context: (el) => ({
+        shortcut: el.closest("ui-popover-trigger")?.getAttribute("shortcut") ?? void 0
+      })
+    },
+    content: { tag: "ui-popover-content", kinds: popupKinds },
+    title: {
+      tag: "ui-popover-title",
+      display: "block",
+      render: renderPopupTitle
+    },
+    description: {
+      tag: "ui-popover-description",
+      display: "block",
+      // A paragraph, like the p other frameworks render.
+      render(el) {
+        if (!el.hasAttribute("as-child") && !el.hasAttribute("role")) {
+          el.setAttribute("role", "paragraph");
+        }
+      }
+    },
+    arrow: { tag: "ui-popover-arrow", display: "block" }
+  });
+}
+export {
+  definePopoverElements
+};

package/dist/popup.d.ts

@@ -0,0 +1,40 @@
+declare const popupPortal: {
+    slots: string[];
+    container: (el: HTMLElement, part?: {
+        slot: string;
+        el?: HTMLElement;
+    }) => Element | DocumentFragment | null;
+};
+declare function sheetPortal(viewportTag: string, slots?: string[]): {
+    slots: string[];
+    container(el: HTMLElement, part: {
+        slot: string;
+        el?: HTMLElement;
+        props: Record<string, unknown>;
+    }): Element | DocumentFragment | null;
+};
+declare function sheetInputPortal(viewportTag: string): {
+    slots: string[];
+    container(el: HTMLElement, part: {
+        slot: string;
+        el?: HTMLElement;
+        props: Record<string, unknown>;
+    }): Element | DocumentFragment | null;
+};
+declare const popupKinds: {
+    readonly container: "string";
+};
+declare const popupApi: ("isOpen" | "setOpen" | "open" | "close" | "toggle" | "getPayload" | "focus")[];
+declare const popupState: {
+    open: {
+        get: (api: {
+            isOpen: () => boolean;
+        }) => boolean;
+        set: (api: {
+            setOpen: (open: boolean) => void;
+        }, open: boolean) => void;
+    };
+};
+declare const closesOnOutsidePress: (el: HTMLElement) => boolean;
+declare function renderPopupTitle(el: HTMLElement): void;
+export { closesOnOutsidePress, popupApi, popupKinds, popupPortal, popupState, renderPopupTitle, sheetInputPortal, sheetPortal, };

package/dist/popup.js

@@ -0,0 +1,112 @@
+// src/popup.ts
+import { attrs, portalTarget, present } from "@ui-sdk/core/renderer";
+import {
+  findContainer,
+  inheritedPortal,
+  instanceOf,
+  passPortalOn
+} from "./define-element.js";
+var popupPortal = {
+  slots: ["content"],
+  container: (el, part) => {
+    const own = part?.slot === "content" ? part.el?.getAttribute("container") ?? null : null;
+    const selector = own ?? el.getAttribute("container");
+    return selector ? findContainer(el, selector) : inheritedPortal(el);
+  }
+};
+var viewports = /* @__PURE__ */ new WeakMap();
+function sheetPortal(viewportTag, slots = popupPortal.slots) {
+  return {
+    slots,
+    container(el, part) {
+      const target = popupPortal.container(el, part);
+      const instance = instanceOf(el);
+      if (!instance || attrs(instance.part(part.slot, part.props))["data-presentation"] !== "sheet") {
+        return target;
+      }
+      let viewport = viewports.get(el);
+      if (!viewport) {
+        const created = el.ownerDocument.createElement(viewportTag);
+        created.setAttribute(
+          "data-slot",
+          attrs(instance.part("viewport", {}))["data-slot"] ?? ""
+        );
+        new MutationObserver(
+          () => created.hasChildNodes() || created.remove()
+        ).observe(created, {
+          childList: true
+        });
+        viewports.set(el, created);
+        viewport = created;
+      }
+      const container = portalTarget(target);
+      const parent = container ?? el;
+      if (viewport.parentNode !== parent) {
+        parent.append(viewport);
+      }
+      passPortalOn(viewport, container);
+      return viewport;
+    }
+  };
+}
+var headers = /* @__PURE__ */ new WeakMap();
+function sheetInputPortal(viewportTag) {
+  const sheet = sheetPortal(viewportTag);
+  return {
+    slots: [...sheet.slots, "input"],
+    container(el, part) {
+      if (part.slot !== "input") {
+        return sheet.container(el, part);
+      }
+      const instance = instanceOf(el);
+      const header = headers.get(el);
+      const parent = part.el?.parentElement ?? null;
+      const content = instance && present(instance.part("header", {})) && instance.api.internal.contentElement?.();
+      if (!instance || !content) {
+        header?.remove();
+        return parent === header ? null : parent;
+      }
+      const target = header ?? el.ownerDocument.createElement("div");
+      if (!header) {
+        target.setAttribute(
+          "data-slot",
+          attrs(instance.part("header", {}))["data-slot"] ?? ""
+        );
+        headers.set(el, target);
+      }
+      if (target.parentElement !== content) {
+        content.prepend(target);
+      }
+      return target;
+    }
+  };
+}
+var popupKinds = { container: "string" };
+var popupApi = ["isOpen", "setOpen", "open", "close", "toggle", "getPayload", "focus"];
+var popupState = {
+  open: {
+    get: (api) => api.isOpen(),
+    set: (api, open) => api.setOpen(!!open)
+  }
+};
+var closesOnOutsidePress = (el) => el.getAttribute("modal") !== "false";
+function renderPopupTitle(el) {
+  if (el.hasAttribute("as-child") || el.hasAttribute("role")) {
+    return;
+  }
+  if (el.querySelector("h1, h2, h3, h4, h5, h6, [role=heading]")) {
+    return;
+  }
+  el.setAttribute("role", "heading");
+  el.setAttribute("aria-level", "2");
+}
+export {
+  closesOnOutsidePress,
+  popupApi,
+  popupKinds,
+  popupPortal,
+  popupState,
+  renderPopupTitle,
+  sheetInputPortal,
+  sheetPortal
+};

package/dist/preferences.d.ts

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

package/dist/preferences.js

@@ -0,0 +1,56 @@
+// src/preferences.ts
+import { claimTag, upgradeProperties, whenGone } from "./define-element.js";
+function definePreferencesElements() {
+  if (!claimTag("ui-preferences")) {
+    return;
+  }
+  customElements.define(
+    "ui-preferences",
+    class extends HTMLElement {
+      #preferences = [];
+      #stop;
+      get preferences() {
+        return this.#preferences;
+      }
+      set preferences(list) {
+        this.#preferences = list;
+        if (this.isConnected) {
+          this.#start();
+        }
+      }
+      connectedCallback() {
+        upgradeProperties(this, ["preferences"]);
+        this.style.display ||= "contents";
+        if (!this.#stop) {
+          this.#start();
+        }
+      }
+      disconnectedCallback() {
+        whenGone(this, () => this.#teardown());
+      }
+      #start() {
+        this.#teardown();
+        const list = this.#preferences;
+        const write = () => {
+          for (const preference of list) {
+            ;
+            (preference.global ? document.documentElement : this).setAttribute(
+              preference.attribute,
+              preference.get().value
+            );
+          }
+        };
+        const stops = list.map((preference) => preference.subscribe(write));
+        write();
+        this.#stop = () => stops.forEach((stop) => stop());
+      }
+      #teardown() {
+        this.#stop?.();
+        this.#stop = void 0;
+      }
+    }
+  );
+}
+export {
+  definePreferencesElements
+};

package/dist/progress.d.ts

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

package/dist/progress.js

@@ -0,0 +1,22 @@
+// src/progress.ts
+import { partState } from "@ui-sdk/core/renderer";
+import { progress } from "@ui-sdk/core/progress";
+import { showDefaultText } from "./default-text.js";
+import { createParts } from "./define-element.js";
+var valueText = (_, instance) => partState(instance.part("value")).text;
+function defineProgressElements() {
+  createParts(progress, {
+    root: {
+      tag: "ui-progress",
+      display: "block",
+      render: (el, instance) => showDefaultText(el, instance, "ui-progress-value", valueText)
+    },
+    track: { tag: "ui-progress-track", display: "block" },
+    indicator: { tag: "ui-progress-indicator", display: "block" },
+    label: "ui-progress-label",
+    value: "ui-progress-value"
+  });
+}
+export {
+  defineProgressElements
+};

package/dist/radio.d.ts

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

package/dist/radio.js

@@ -0,0 +1,33 @@
+// src/radio.ts
+import { radioGroup } from "@ui-sdk/core/radio";
+import { createParts } from "./define-element.js";
+var owner = "ui-radio-group";
+function defineRadioGroupElements() {
+  createParts(radioGroup, {
+    root: {
+      tag: owner,
+      defaults: { loop: true },
+      self: "group",
+      display: "block",
+      formAssociated: true,
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value)
+        }
+      },
+      api: ["getValue", "setValue", "focus"]
+    },
+    // Form-associated, so a <label> around or pointing at an item checks it.
+    radio: {
+      tag: "ui-radio",
+      // Each radio fills the root slot, since the element that owns the group fills `group`.
+      slot: "root",
+      formAssociated: true
+    },
+    indicator: "ui-radio-indicator"
+  });
+}
+export {
+  defineRadioGroupElements
+};