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

package/dist/toast.js

@@ -0,0 +1,177 @@
+// src/toast.ts
+import {
+  createToaster as createCoreToaster,
+  toast as coreToast,
+  toastRegion
+} from "@ui-sdk/core/toast";
+import { actionOf } from "./action.js";
+import { createParts, wrappedButton } from "./define-element.js";
+var rendered = /* @__PURE__ */ new WeakMap();
+var filled = /* @__PURE__ */ new WeakMap();
+var dataCloses = /* @__PURE__ */ new WeakSet();
+var latest = /* @__PURE__ */ new WeakMap();
+var authorLabels = /* @__PURE__ */ new WeakMap();
+var part = (tag) => document.createElement(tag);
+function button(tag) {
+  const wrapper = part(tag);
+  const el = part("button");
+  el.setAttribute("type", "button");
+  wrapper.append(el);
+  return wrapper;
+}
+function fromData() {
+  const root = part("ui-toast");
+  const content = part("div");
+  content.append(part("ui-toast-title"), part("ui-toast-description"));
+  root.append(content);
+  const close = button("ui-toast-close");
+  dataCloses.add(close);
+  root.append(button("ui-toast-action"), close);
+  return root;
+}
+function fromTemplate(template) {
+  const root = template.content.cloneNode(true).querySelector("ui-toast");
+  for (const close of root.querySelectorAll("ui-toast-close")) {
+    if (!(wrappedButton(close) ?? close).childNodes.length) {
+      dataCloses.add(close);
+    }
+  }
+  return root;
+}
+var cancelOf = (el) => (event, details) => {
+  const root = el.closest("ui-toast");
+  return root ? latest.get(root)?.cancel?.onCancel?.(event, details) : void 0;
+};
+function fill(root, toast2) {
+  latest.set(root, toast2);
+  const contents = [
+    ["ui-toast-title", toast2.title],
+    ["ui-toast-description", toast2.description],
+    ["ui-toast-action", toast2.action?.label],
+    ["ui-toast-close", toast2.cancel?.label]
+  ];
+  for (const [tag, content] of contents) {
+    for (const el of root.querySelectorAll(tag)) {
+      if (tag === "ui-toast-close" && !dataCloses.has(el)) {
+        continue;
+      }
+      const target = tag === "ui-toast-action" || tag === "ui-toast-close" ? wrappedButton(el) ?? el : el;
+      if (filled.has(target) ? filled.get(target) === content : target.childNodes.length) {
+        continue;
+      }
+      el.hidden = content == null;
+      target.replaceChildren(...content == null ? [] : [content]);
+      filled.set(target, content);
+    }
+  }
+}
+function sync(region, instance, refresh = false) {
+  const state = rendered.get(region);
+  if (!state) {
+    return;
+  }
+  const template = region.querySelector(":scope > template");
+  const items = instance.get().items;
+  const ids = new Set(items.map((item) => item.toast.id));
+  for (const [id, el] of state.toasts) {
+    if (!ids.has(id)) {
+      state.toasts.delete(id);
+      el.remove();
+    }
+  }
+  let previous = null;
+  for (const { toast: toast2 } of items) {
+    let el = state.toasts.get(toast2.id);
+    if (!el) {
+      el = template ? fromTemplate(template) : fromData();
+      el.setAttribute("toast", toast2.id);
+      state.toasts.set(toast2.id, el);
+    }
+    if (refresh || latest.get(el) !== toast2) {
+      fill(el, toast2);
+      region.renderToast?.(toast2, el);
+    }
+    instance.api.internal.label(toast2.id);
+    const next = previous ? previous.nextElementSibling : state.list.firstElementChild;
+    if (next !== el) {
+      state.list.insertBefore(el, next);
+    }
+    previous = el;
+  }
+}
+function render(region, instance) {
+  if (!rendered.has(region)) {
+    const list = document.createElement("ol");
+    list.setAttribute("data-slot", "toast-list");
+    region.append(list);
+    rendered.set(region, { list, toasts: /* @__PURE__ */ new Map() });
+  }
+  sync(region, instance, true);
+  return instance.subscribe(() => sync(region, instance));
+}
+function defineToastElements() {
+  createParts(toastRegion, {
+    root: {
+      tag: "ui-toast-region",
+      self: "region",
+      display: "block",
+      // The region sets these itself: whether a host placed it, and its author's name.
+      kinds: { placed: null, label: null },
+      // Described on `UiToastRegionElement`.
+      properties: ["renderToast"],
+      options: (el) => {
+        if (!authorLabels.has(el)) {
+          authorLabels.set(el, el.getAttribute("aria-label") ?? void 0);
+        }
+        return {
+          placed: !el.hosted,
+          label: authorLabels.get(el)
+        };
+      },
+      api: ["focus", "pause", "resume"],
+      render: (el, instance) => render(el, instance)
+    },
+    toast: {
+      tag: "ui-toast",
+      // Each toast fills the root slot, since the region fills `region`.
+      slot: "root",
+      display: "block",
+      context: (el) => ({
+        id: el.getAttribute("toast") ?? void 0
+      }),
+      // In the region's list, each toast is an item of it.
+      render: (el) => el.setAttribute("role", "listitem")
+    },
+    title: { tag: "ui-toast-title", display: "block" },
+    description: { tag: "ui-toast-description", display: "block" },
+    // Runs the toast's action. Without one, an `action` attribute fires a
+    // cancelable `action` event; pass a Promise to `event.detail.waitUntil()` to
+    // keep the toast open, and the button pending, until it settles.
+    action: {
+      tag: "ui-toast-action",
+      defaults: { dismiss: true },
+      display: "contents",
+      target: wrappedButton,
+      // Always present, so the toast's own action runs when there's no attribute.
+      context: (el) => ({
+        onAction: el.hasAttribute("action") ? actionOf(el) : void 0
+      })
+    },
+    // Closes the toast. With an `action` attribute, fires `action` first, like the action part.
+    close: {
+      tag: "ui-toast-close",
+      display: "contents",
+      target: wrappedButton,
+      context: (el) => ({
+        action: dataCloses.has(el) ? cancelOf(el) : el.hasAttribute("action") ? actionOf(el) : void 0
+      })
+    }
+  });
+}
+var toast = coreToast;
+var createToaster = createCoreToaster;
+export {
+  createToaster,
+  defineToastElements,
+  toast
+};

package/dist/toggle.d.ts

@@ -0,0 +1,3 @@
+declare function defineToggleElements(): void;
+declare function defineToggleGroupElements(): void;
+export { defineToggleElements, defineToggleGroupElements };

package/dist/toggle.js

@@ -0,0 +1,64 @@
+// src/toggle.ts
+import {
+  toggle,
+  toggleGroup
+} from "@ui-sdk/core/toggle";
+import { createParts, instanceOf, wrappedButton } from "./define-element.js";
+var toolbarOf = (el) => () => instanceOf(
+  el.parentElement?.closest("ui-toolbar")
+)?.api.internal.scopeIn(
+  !!el.parentElement?.closest(
+    'ui-toolbar-group[disabled]:not([disabled="false"])'
+  )
+);
+function defineToggleElements() {
+  createParts(toggle, {
+    root: {
+      tag: "ui-toggle",
+      target: wrappedButton,
+      display: "contents",
+      // Its group and toolbar are the ones around it, never properties.
+      kinds: { group: null, toolbar: null },
+      options: (el) => ({
+        // Read when needed, since the group may upgrade after the toggle.
+        group: () => instanceOf(
+          el.parentElement?.closest("ui-toggle-group")
+        )?.api,
+        toolbar: toolbarOf(el)
+      }),
+      state: {
+        pressed: {
+          get: (api) => api.isPressed(),
+          set: (api, pressed) => api.setPressed(!!pressed)
+        }
+      },
+      api: ["isPressed", "setPressed", "toggle", "focus"]
+    },
+    // An icon inside the toggle's button. Screen readers skip it.
+    icon: "ui-toggle-icon"
+  });
+}
+function defineToggleGroupElements() {
+  createParts(toggleGroup, {
+    root: {
+      tag: "ui-toggle-group",
+      self: "group",
+      display: "block",
+      defaults: { deselectable: true, loop: true },
+      kinds: { toolbar: null },
+      options: (el) => ({ toolbar: toolbarOf(el) }),
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value ?? [])
+        }
+      },
+      api: ["getValue", "setValue", "isPressed", "toggle", "focus"]
+    }
+  });
+  defineToggleElements();
+}
+export {
+  defineToggleElements,
+  defineToggleGroupElements
+};

package/dist/token-input.d.ts

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

package/dist/token-input.js

@@ -0,0 +1,103 @@
+// src/token-input.ts
+import {
+  tokenInput
+} from "@ui-sdk/core/token-input";
+import { createParts, reconfigureInside } from "./define-element.js";
+var owner = "ui-token-input";
+function tokenOf(el) {
+  const id = el.closest("[data-token-id]")?.getAttribute("data-token-id") ?? "";
+  return { id, token: id };
+}
+function defineTokenInputElements() {
+  createParts(tokenInput, {
+    root: {
+      tag: owner,
+      formAssociated: true,
+      properties: ["renderToken"],
+      // The submit shortcut submits the form the element is in, so a form's own
+      // submit event hears it. A bubbling "submit" event would reach the form too.
+      silent: ["onSubmit"],
+      // A disabled <ui-field> around it disables it, as a disabled Field does
+      // in the other frameworks.
+      options: (el) => ({
+        ...el.closest("ui-field")?.hasAttribute("disabled") && {
+          disabled: true
+        }
+      }),
+      display: "block",
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(
+            typeof value === "string" ? api.internal.codec().parse(value) : value
+          )
+        }
+      },
+      api: [
+        "getValue",
+        "setValue",
+        "getText",
+        "getLabel",
+        "insert",
+        "updateToken",
+        "removeToken",
+        "undo",
+        "redo",
+        "canUndo",
+        "canRedo",
+        "clear",
+        "focus"
+      ],
+      render(el, { api, subscribe }) {
+        const target = el;
+        const mode = contentMode(target);
+        api.internal.setCustom(mode !== "label");
+        reconfigureInside(el);
+        const rendered = /* @__PURE__ */ new WeakMap();
+        const showTokens = () => renderTokens(target, api, rendered);
+        showTokens();
+        const unsubscribe = subscribe(showTokens);
+        return () => {
+          unsubscribe();
+          if (el.isConnected && contentMode(target) === mode) {
+            return;
+          }
+          for (const { host } of api.internal.hosts()) {
+            if (rendered.has(host)) {
+              host.replaceChildren();
+            }
+          }
+        };
+      }
+    },
+    editor: { tag: "ui-token-input-editor", display: "block" },
+    token: { tag: "ui-token-input-token", context: tokenOf },
+    "token-remove": { tag: "ui-token-input-token-remove", context: tokenOf }
+  });
+}
+var contentMode = (el) => el.renderToken ? "renderToken" : el.querySelector(":scope > template") ? "template" : "label";
+function renderTokens(el, api, rendered) {
+  const template = el.querySelector(":scope > template");
+  for (const { token, host } of api.internal.hosts()) {
+    if (rendered.get(host) === token) {
+      continue;
+    }
+    rendered.set(host, token);
+    if (el.renderToken) {
+      el.renderToken(token, host);
+      continue;
+    }
+    if (!template) {
+      continue;
+    }
+    if (!host.firstChild) {
+      host.append(template.content.cloneNode(true));
+    }
+    for (const label of host.querySelectorAll("[data-token-label]")) {
+      label.textContent = token.label;
+    }
+  }
+}
+export {
+  defineTokenInputElements
+};

package/dist/toolbar.d.ts

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

package/dist/toolbar.js

@@ -0,0 +1,36 @@
+// src/toolbar.ts
+import { toolbar } from "@ui-sdk/core/toolbar";
+import { createParts } from "./define-element.js";
+var wrappedControl = (el) => el.querySelector("button, a[href], input, textarea") ?? el.firstElementChild;
+function defineToolbarElements() {
+  createParts(toolbar, {
+    root: {
+      tag: "ui-toolbar",
+      display: "block",
+      defaults: { loop: true },
+      api: ["focus"]
+    },
+    button: {
+      tag: "ui-toolbar-button",
+      display: "contents",
+      target: wrappedControl,
+      defaults: { focusableWhenDisabled: true }
+    },
+    input: {
+      tag: "ui-toolbar-input",
+      display: "contents",
+      target: wrappedControl,
+      defaults: { focusableWhenDisabled: true }
+    },
+    link: {
+      tag: "ui-toolbar-link",
+      display: "contents",
+      target: wrappedControl
+    },
+    group: { tag: "ui-toolbar-group", display: "block" },
+    separator: { tag: "ui-toolbar-separator", display: "block" }
+  });
+}
+export {
+  defineToolbarElements
+};

package/dist/tooltip.d.ts

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

package/dist/tooltip.js

@@ -0,0 +1,35 @@
+// src/tooltip.ts
+import { tooltip } from "@ui-sdk/core/tooltip";
+import { createParts } from "./define-element.js";
+import { popupApi, popupKinds, popupPortal, popupState } from "./popup.js";
+var owner = "ui-tooltip";
+function defineTooltipElements() {
+  createParts(tooltip, {
+    root: {
+      tag: owner,
+      defaults: { closeOnPress: 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.
+      portal: popupPortal
+    },
+    // The trigger wraps the user's own button or link, so it stays one. Inside
+    // another component's trigger, like <ui-menu-trigger>, it's the button deepest in.
+    // With `for="tooltip-id"`, it shows that tooltip from anywhere on the page.
+    trigger: {
+      tag: "ui-tooltip-trigger",
+      display: "contents",
+      target: (el) => el.querySelector("button, a[href]") ?? el.firstElementChild
+    },
+    content: { tag: "ui-tooltip-content", kinds: popupKinds },
+    arrow: { tag: "ui-tooltip-arrow", display: "block" },
+    // Shows the tooltip's shortcut, or its own `shortcut`, when it has no text of its own.
+    shortcut: "ui-tooltip-shortcut"
+  });
+}
+export {
+  defineTooltipElements
+};

package/dist/tree.d.ts

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

package/dist/tree.js

@@ -0,0 +1,147 @@
+// src/tree.ts
+import { tree } from "@ui-sdk/core/tree";
+import { createParts } from "./define-element.js";
+import { copy, element, listAttribute, templateOf } from "./list.js";
+var owner = "ui-tree";
+var generated = /* @__PURE__ */ new WeakMap();
+function renderItems(items, checkable, template) {
+  return items.map((item) => {
+    const el = copy(template, "ui-tree-item", false);
+    el.setAttribute("value", item.value);
+    if (item.children !== void 0) {
+      el.setAttribute("branch", "");
+    }
+    if (item.disabled) {
+      el.setAttribute("disabled", "");
+    }
+    if (item.children) {
+      el.append(copy(template, "ui-tree-item-indicator"));
+    }
+    if (checkable) {
+      el.append(copy(template, "ui-tree-item-checkbox"));
+    }
+    const label = copy(template, "ui-tree-item-label");
+    if (item.href) {
+      const link = element(
+        "a",
+        { href: item.href, class: label.getAttribute("class") ?? void 0 },
+        item.label
+      );
+      label.removeAttribute("class");
+      label.setAttribute("as-child", "");
+      label.replaceChildren(link);
+    } else {
+      label.textContent = item.label;
+    }
+    el.append(label);
+    if (item.children) {
+      const group = copy(template, "ui-tree-group", false);
+      group.append(...renderItems(item.children, checkable, template));
+      el.append(group);
+    }
+    return el;
+  });
+}
+function defineTreeElements() {
+  createParts(tree, {
+    root: {
+      tag: owner,
+      defaults: { expandOnPress: true, focusableWhenDisabled: true },
+      display: "block",
+      // `action` listeners call `event.detail.waitUntil(promise)` to mark the item pending.
+      options: (el) => {
+        const data = el;
+        const multiple = el.getAttribute("mode") === "multiple";
+        const start = el.getAttribute("default-value") ?? el.getAttribute("value");
+        return {
+          items: data.items,
+          paths: data.paths,
+          ...start !== null && {
+            defaultValue: multiple ? listAttribute(start) : start
+          }
+        };
+      },
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          // A string lists values separated by commas with multiple selection.
+          set: (api, value) => {
+            const multiple = api.internal.mode() === "multiple";
+            if (typeof value === "string") {
+              return api.setValue(
+                multiple ? listAttribute(value) : value || null
+              );
+            }
+            api.setValue(value ?? (multiple ? [] : null));
+          }
+        },
+        expanded: {
+          get: (api) => api.getExpanded(),
+          set: (api, value) => api.setExpanded(
+            typeof value === "string" ? listAttribute(value) : value ?? []
+          )
+        },
+        checked: {
+          get: (api) => api.getChecked(),
+          set: (api, value) => api.setChecked(
+            typeof value === "string" ? listAttribute(value) : value ?? []
+          )
+        }
+      },
+      api: [
+        "getExpanded",
+        "setExpanded",
+        "isExpanded",
+        "expand",
+        "collapse",
+        "toggle",
+        "expandAll",
+        "collapseAll",
+        "getValue",
+        "setValue",
+        "getChecked",
+        "setChecked",
+        "checkedState",
+        "reveal",
+        "focus"
+      ],
+      // Runs again whenever `items` or `paths` is set.
+      render(el, { api }) {
+        const focused = el.ownerDocument.activeElement?.closest("ui-tree-item");
+        const keep = focused && el.contains(focused) ? focused.getAttribute("value") : null;
+        generated.get(el)?.forEach((child) => child.remove());
+        generated.delete(el);
+        if (el.querySelector(":scope > ui-tree-item")) {
+          return;
+        }
+        const items = api.internal.items();
+        if (!items) {
+          return;
+        }
+        const fresh = renderItems(
+          items,
+          el.hasAttribute("checkable"),
+          templateOf(el)
+        );
+        generated.set(el, fresh);
+        el.append(...fresh);
+        if (keep !== null) {
+          api.focus(keep);
+        }
+      }
+    },
+    // An item's parent is the item around it, and a group inside it makes it a branch.
+    item: {
+      tag: "ui-tree-item",
+      display: "block",
+      context: (el) => el.querySelector(":scope > ui-tree-group") ? { branch: true } : {}
+    },
+    label: "ui-tree-item-label",
+    indicator: "ui-tree-item-indicator",
+    checkbox: "ui-tree-item-checkbox",
+    group: { tag: "ui-tree-group", display: "block" }
+  });
+}
+export {
+  defineTreeElements
+};

package/dist/trigger-menu.d.ts

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