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

package/dist/menu.js

@@ -0,0 +1,295 @@
+// src/menu.ts
+import { formatShortcut } from "@ui-sdk/core";
+import { menu } from "@ui-sdk/core/menu";
+import {
+  menuCheckable,
+  menuContextTrigger,
+  menuItemIcons
+} from "@ui-sdk/core/renderer";
+import {
+  autoId,
+  definePart,
+  findOwner,
+  instanceOf,
+  wrappedButton
+} from "./define-element.js";
+import { copy, element, templateOf } from "./list.js";
+import { menubarOf } from "./menubar.js";
+import { popupApi, popupKinds, popupState, sheetPortal } from "./popup.js";
+var owner = "ui-menu, ui-menu-sub";
+var generated = /* @__PURE__ */ new WeakMap();
+function defineMenuElements() {
+  definePart(menu, "root", {
+    tag: "ui-menu",
+    kinds: { ...popupKinds, parent: null, menubar: null },
+    defaults: { loop: true, itemShortcuts: true, dismissible: true },
+    // Read when needed, since the menubar may upgrade after the menu.
+    options: (el) => ({ container: void 0, menubar: () => menubarOf(el) }),
+    // In a menubar, the wrappers sit between its items. Without this, screen
+    // readers count each trigger as its own list of one.
+    host: { role: "none" },
+    state: popupState,
+    api: popupApi,
+    // Checkbox and radio parts fire their own `checkedchange` and `valuechange`,
+    // which a listener on the menu hears with `{ capture: true }`.
+    silent: ["onCheckedChange", "onValueChange"],
+    // container="#id" renders the popup there, and a sheet's viewport with it.
+    portal: sheetPortal("ui-menu-viewport"),
+    // Runs again whenever `items` is set.
+    render(el) {
+      const { items } = el;
+      const content = generated.get(el);
+      if (!items) {
+        content?.remove();
+        generated.delete(el);
+        return;
+      }
+      const template = templateOf(el);
+      if (content) {
+        content.replaceChildren(...renderMenuItems(items, template));
+        return;
+      }
+      if (el.querySelector(":scope > ui-menu-content")) {
+        return;
+      }
+      const created = copy(template, "ui-menu-content", false);
+      created.append(...renderMenuItems(items, template));
+      generated.set(el, created);
+      el.append(created);
+    }
+  });
+  definePart(menu, "root", {
+    tag: "ui-menu-sub",
+    defaults: { loop: true },
+    // The wrapper sits between items. Without this, screen readers count the
+    // submenu trigger as its own list of one.
+    host: { role: "none" },
+    display: "contents",
+    // A submenu opens from its parent, and takes none of the root menu's own options.
+    kinds: {
+      itemShortcuts: null,
+      presentation: null,
+      modal: null,
+      dismissible: null,
+      container: null,
+      items: null,
+      controller: null,
+      parent: null,
+      menubar: null
+    },
+    options: (el) => ({
+      parent: instanceOf(findOwner(el, owner))?.api
+    }),
+    state: popupState,
+    api: popupApi
+  });
+  definePart(menu, "trigger", {
+    tag: "ui-menu-trigger",
+    display: "contents",
+    target: wrappedButton,
+    render: (el) => el.setAttribute("role", "none")
+  });
+  definePart(menu, "context-trigger", {
+    tag: "ui-menu-context-trigger",
+    feature: menuContextTrigger,
+    display: "block"
+  });
+  definePart(menu, "content", { tag: "ui-menu-content", kinds: popupKinds });
+  definePart(menu, "content", {
+    tag: "ui-menu-sub-content",
+    // Moves with its root menu, so it names no container of its own.
+    kinds: { container: null }
+  });
+  definePart(menu, "trigger", { tag: "ui-menu-sub-trigger", display: "block" });
+  definePart(menu, "item", {
+    tag: "ui-menu-item",
+    display: "block",
+    defaults: { closeOnSelect: true },
+    // Items with a shortcut get its glyph, like React and Vue items, and it
+    // follows the attribute.
+    render: renderShortcut,
+    changed: renderShortcut
+  });
+  definePart(menu, "checkbox-item", {
+    tag: "ui-menu-checkbox-item",
+    feature: menuCheckable,
+    display: "block"
+  });
+  definePart(menu, "radio-group", {
+    tag: "ui-menu-radio-group",
+    feature: menuCheckable,
+    display: "block",
+    // A `value` of null, as a property, controls the group with nothing
+    // selected. No attribute can say that.
+    properties: ["value"],
+    // Its `name` attribute keys it, or a generated one.
+    kinds: { name: null },
+    context: (el) => ({ id: groupName(el), name: groupName(el) })
+  });
+  definePart(menu, "radio-item", {
+    tag: "ui-menu-radio-item",
+    feature: menuCheckable,
+    display: "block",
+    context: (el) => ({
+      group: groupName(el.closest("ui-menu-radio-group") ?? el)
+    })
+  });
+  definePart(menu, "item-indicator", {
+    tag: "ui-menu-item-indicator",
+    feature: menuCheckable,
+    // The item and group around it say which they are.
+    kinds: { item: null, itemKey: null, group: null },
+    context: (el) => {
+      const item = el.closest("ui-menu-checkbox-item, ui-menu-radio-item");
+      if (!item) {
+        return {};
+      }
+      const radio = item.localName === "ui-menu-radio-item";
+      const group = item.closest("ui-menu-radio-group");
+      return {
+        item: radio ? "radio-item" : "checkbox-item",
+        itemKey: item.getAttribute("value") ?? "",
+        group: radio && group ? groupName(group) : void 0
+      };
+    }
+  });
+  definePart(menu, "group", { tag: "ui-menu-group", display: "block" });
+  definePart(menu, "group-label", {
+    tag: "ui-menu-group-label",
+    display: "block",
+    kinds: { group: null },
+    context: (el) => {
+      const group = el.closest("ui-menu-group, ui-menu-radio-group") ?? el;
+      return {
+        group: group.localName === "ui-menu-radio-group" ? groupName(group) : autoId(group)
+      };
+    }
+  });
+  definePart(menu, "separator", { tag: "ui-menu-separator", display: "block" });
+  definePart(menu, "shortcut", "ui-menu-shortcut");
+  definePart(menu, "item-icon", {
+    tag: "ui-menu-item-icon",
+    feature: menuItemIcons
+  });
+}
+var generatedShortcuts = /* @__PURE__ */ new WeakSet();
+function renderShortcut(item) {
+  const shortcut = item.getAttribute("shortcut");
+  const glyph = item.querySelector(":scope > ui-menu-shortcut");
+  if (!glyph) {
+    if (!shortcut || item.querySelector("ui-menu-shortcut")) {
+      return;
+    }
+    const added = element("ui-menu-shortcut", {}, formatShortcut(shortcut));
+    generatedShortcuts.add(added);
+    item.append(added);
+    return;
+  }
+  if (!generatedShortcuts.has(glyph)) {
+    return;
+  }
+  if (shortcut) {
+    glyph.textContent = formatShortcut(shortcut);
+  } else {
+    glyph.remove();
+  }
+}
+function groupName(el) {
+  return el.getAttribute("name") ?? autoId(el);
+}
+function renderMenuItems(items, template) {
+  const option = (tagName, attributes, label) => {
+    const el = element(tagName, attributes, label, template);
+    const glyph = el.querySelector(":scope > ui-menu-shortcut");
+    if (glyph) {
+      generatedShortcuts.add(glyph);
+    }
+    return el;
+  };
+  const closeOnSelect = (value) => value === void 0 ? void 0 : String(value);
+  return items.map((entry) => {
+    const item = typeof entry === "string" ? { value: entry, label: entry } : entry;
+    switch (item.type) {
+      case void 0:
+      case "item":
+        return option(
+          "ui-menu-item",
+          {
+            value: item.value,
+            disabled: item.disabled,
+            shortcut: item.shortcut,
+            destructive: item.destructive,
+            "close-on-select": closeOnSelect(item.closeOnSelect)
+          },
+          item.label
+        );
+      case "separator":
+        return element("ui-menu-separator", {}, "", template);
+      case "group": {
+        const el = copy(template, "ui-menu-group", false);
+        if (item.label) {
+          el.append(element("ui-menu-group-label", {}, item.label, template));
+        }
+        el.append(...renderMenuItems(item.items, template));
+        return el;
+      }
+      case "checkbox":
+        return option(
+          "ui-menu-checkbox-item",
+          {
+            value: item.value,
+            disabled: item.disabled,
+            checked: item.checked === void 0 ? void 0 : String(item.checked),
+            "default-checked": item.defaultChecked,
+            "close-on-select": closeOnSelect(item.closeOnSelect)
+          },
+          item.label
+        );
+      case "radio-group": {
+        const el = copy(template, "ui-menu-radio-group", false);
+        if (item.name) {
+          el.setAttribute("name", item.name);
+        }
+        if (item.value != null) {
+          el.setAttribute("value", item.value);
+        }
+        if (item.defaultValue != null) {
+          el.setAttribute("default-value", item.defaultValue);
+        }
+        if (item.value === null) {
+          Object.assign(el, { value: null });
+        }
+        if (item.label) {
+          el.append(element("ui-menu-group-label", {}, item.label, template));
+        }
+        el.append(
+          ...item.items.map(
+            (radio) => option(
+              "ui-menu-radio-item",
+              { value: radio.value, disabled: radio.disabled },
+              radio.label
+            )
+          )
+        );
+        return el;
+      }
+      case "submenu": {
+        const sub = copy(template, "ui-menu-sub", false);
+        const trigger = element(
+          "ui-menu-sub-trigger",
+          { disabled: item.disabled },
+          item.label,
+          template
+        );
+        const content = copy(template, "ui-menu-sub-content", false);
+        content.append(...renderMenuItems(item.items, template));
+        sub.append(trigger, content);
+        return sub;
+      }
+    }
+  });
+}
+export {
+  defineMenuElements,
+  renderMenuItems
+};

package/dist/menubar.d.ts

@@ -0,0 +1,4 @@
+import { type MenubarApi } from "@ui-sdk/core/menubar";
+declare function defineMenubarElements(): void;
+declare function menubarOf(el: HTMLElement): MenubarApi | undefined;
+export { defineMenubarElements, menubarOf };

package/dist/menubar.js

@@ -0,0 +1,30 @@
+// src/menubar.ts
+import { menubar } from "@ui-sdk/core/menubar";
+import { createParts, instanceOf } from "./define-element.js";
+function defineMenubarElements() {
+  createParts(menubar, {
+    root: {
+      tag: "ui-menubar",
+      display: "block",
+      defaults: { loop: true },
+      api: ["focus", "isOpen", "close"],
+      // Menus that upgraded first, like when the menubar loads later, bound as
+      // menus of their own. They join it now.
+      render(el, { api }) {
+        for (const menu of el.querySelectorAll("ui-menu")) {
+          if (instanceOf(menu) && menubarOf(menu) === api) {
+            menu.rebind?.();
+          }
+        }
+      }
+    }
+  });
+}
+function menubarOf(el) {
+  const found = el.parentElement?.closest("ui-menubar, ui-menu");
+  return found?.localName === "ui-menubar" ? instanceOf(found)?.api : void 0;
+}
+export {
+  defineMenubarElements,
+  menubarOf
+};

package/dist/meter.d.ts

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

package/dist/meter.js

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

package/dist/navigation-menu.d.ts

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

package/dist/navigation-menu.js

@@ -0,0 +1,114 @@
+// src/navigation-menu.ts
+import {
+  navigationMenu
+} from "@ui-sdk/core/navigation-menu";
+import {
+  autoId,
+  createParts,
+  findContainer,
+  findOwner,
+  instanceOf
+} from "./define-element.js";
+var owner = "ui-navigation-menu";
+var items = /* @__PURE__ */ new WeakMap();
+function itemOf(el) {
+  const item = el.closest("ui-navigation-menu-item");
+  if (item) {
+    items.set(el, item.getAttribute("value") ?? autoId(item));
+  }
+  return items.get(el);
+}
+function parentOf(el) {
+  const content = el.parentElement?.closest(
+    "ui-navigation-menu-content"
+  );
+  const item = content && itemOf(content);
+  const api = content && instanceOf(findOwner(content, owner))?.api;
+  return api && item ? { api, item } : void 0;
+}
+var portal = {
+  slots: ["content", "viewport"],
+  container(el, part) {
+    const selector = el.getAttribute("container");
+    const container = selector ? findContainer(el, selector) : null;
+    if (part.slot === "viewport") {
+      return container;
+    }
+    const api = instanceOf(el)?.api;
+    const viewport = api?.internal.viewportElement();
+    if (viewport && api?.internal.inViewport(String(part.props.value))) {
+      return viewport;
+    }
+    return viewport ? null : container;
+  }
+};
+function defineNavigationMenuElements() {
+  createParts(navigationMenu, {
+    root: {
+      tag: owner,
+      defaults: { openOnHover: true, closeOnSelect: true },
+      display: "block",
+      // `container="#id"` is a selector, and the menu a nested one sits in is never an attribute or a property.
+      kinds: { container: "string", parent: null },
+      // A nested menu closes with its parent, and the container is the adapter's.
+      options: (el) => ({ parent: parentOf(el), container: void 0 }),
+      // `value` is live: setting the property or the attribute opens that item, like a controller.
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value || null)
+        }
+      },
+      api: ["getValue", "setValue", "isOpen", "close", "focus"],
+      portal,
+      // A landmark, unless it's nested inside another menu's content.
+      render(el, instance) {
+        if (!el.hasAttribute("role") && !instance.get().nested) {
+          el.setAttribute("role", "navigation");
+        }
+      }
+    },
+    list: {
+      tag: "ui-navigation-menu-list",
+      display: "block",
+      render: (el) => el.setAttribute("role", "list")
+    },
+    item: {
+      tag: "ui-navigation-menu-item",
+      display: "block",
+      render: (el) => el.setAttribute("role", "listitem")
+    },
+    // A wrapper, so the trigger stays a real button.
+    trigger: {
+      tag: "ui-navigation-menu-trigger",
+      display: "contents",
+      context: (el) => ({ value: itemOf(el) }),
+      target: (el) => el.querySelector("button") ?? el.firstElementChild
+    },
+    // A block, so a closed content kept findable has a box for
+    // `hidden="until-found"` to hide; an inline one would show its links. Not
+    // shown, it's always `hidden`, which wins over any display.
+    content: {
+      tag: "ui-navigation-menu-content",
+      display: "block",
+      kinds: { container: null },
+      context: (el) => ({ value: itemOf(el) })
+    },
+    // A wrapper, so the link stays a real link, or any element with as-child.
+    link: {
+      tag: "ui-navigation-menu-link",
+      display: "contents",
+      target: (el) => el.querySelector("a") ?? el.firstElementChild
+    },
+    // An icon inside a link. Screen readers skip it.
+    "link-icon": "ui-navigation-menu-link-icon",
+    viewport: {
+      tag: "ui-navigation-menu-viewport",
+      kinds: { container: null }
+    },
+    indicator: { tag: "ui-navigation-menu-indicator", display: "block" }
+  });
+}
+export {
+  defineNavigationMenuElements
+};

package/dist/number-input.d.ts

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

package/dist/number-input.js

@@ -0,0 +1,73 @@
+// src/number-input.ts
+import { numberInput } from "@ui-sdk/core/number-input";
+import { createParts } from "./define-element.js";
+var owner = "ui-number-input";
+var authoredDisabled = /* @__PURE__ */ new WeakMap();
+function stepButtonProps(el) {
+  const inner = el.querySelector("button");
+  if (!inner) {
+    return {};
+  }
+  if (!authoredDisabled.has(inner)) {
+    authoredDisabled.set(inner, inner.hasAttribute("disabled"));
+  }
+  return authoredDisabled.get(inner) ? { disabled: true } : {};
+}
+function defineNumberInputElements() {
+  createParts(numberInput, {
+    root: {
+      tag: owner,
+      display: "block",
+      formAssociated: true,
+      // The framework adapters pass it, never an attribute or a property.
+      kinds: { controlId: null },
+      // 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
+        }
+      }),
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value)
+        }
+      },
+      api: ["getValue", "setValue", "increment", "decrement", "focus"],
+      // The scrub cursor is fixed to the viewport, so it moves to the body while
+      // shown, where transformed ancestors can't offset it.
+      portal: { slots: ["scrub-area-cursor"], container: () => document.body }
+    },
+    group: { tag: "ui-number-input-group", display: "block" },
+    // These wrap your own <input> and <button>s, so they keep their native
+    // behavior. `disabled` on a step button's element or on its <button> disables it.
+    control: {
+      tag: "ui-number-input-control",
+      display: "contents",
+      target: (el) => el.querySelector("input")
+    },
+    increment: {
+      tag: "ui-number-input-increment",
+      display: "contents",
+      target: (el) => el.querySelector("button"),
+      context: stepButtonProps
+    },
+    decrement: {
+      tag: "ui-number-input-decrement",
+      display: "contents",
+      target: (el) => el.querySelector("button"),
+      context: stepButtonProps
+    },
+    // Any number of scrub areas, anywhere inside, or anywhere on the page with
+    // `for="<number input id>"`, like an icon in a toolbar.
+    "scrub-area": "ui-number-input-scrub-area",
+    "scrub-area-cursor": {
+      tag: "ui-number-input-scrub-area-cursor",
+      display: "block"
+    }
+  });
+}
+export {
+  defineNumberInputElements
+};

package/dist/observe.d.ts

@@ -0,0 +1,2 @@
+export { elementOf, observe, withSource } from "@ui-sdk/core/observe";
+export type { ObservedChange } from "@ui-sdk/core/observe";

package/dist/observe.js

@@ -0,0 +1,7 @@
+// src/observe.ts
+import { elementOf, observe, withSource } from "@ui-sdk/core/observe";
+export {
+  elementOf,
+  observe,
+  withSource
+};

package/dist/otp-input.d.ts

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

package/dist/otp-input.js

@@ -0,0 +1,72 @@
+// src/otp-input.ts
+import { otpInput } from "@ui-sdk/core/otp-input";
+import { showDefaultText } from "./default-text.js";
+import { createParts } from "./define-element.js";
+import { forwardAttributes } from "./forward-attributes.js";
+import { partState } from "@ui-sdk/core/renderer";
+var owner = "ui-otp-input";
+function slotIndex(el) {
+  const explicit = el.getAttribute("index");
+  if (explicit !== null) {
+    return { index: Number(explicit), id: explicit };
+  }
+  const root = el.closest(owner);
+  const slots = root ? Array.from(root.querySelectorAll("ui-otp-input-slot")) : [el];
+  const index = Math.max(0, slots.indexOf(el));
+  return { index, id: String(index) };
+}
+var inputAttributes = [
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-invalid",
+  "autofocus"
+];
+var withInput = /* @__PURE__ */ new WeakSet();
+function defineOTPInputElements() {
+  createParts(otpInput, {
+    root: {
+      tag: owner,
+      display: "block",
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value ?? "")
+        }
+      },
+      api: ["getValue", "setValue", "clear", "focus"],
+      render(el, instance) {
+        if (!withInput.has(el)) {
+          withInput.add(el);
+          const written = el.querySelector(
+            ":scope > ui-otp-input-control input"
+          );
+          const input = written ?? document.createElement("input");
+          forwardAttributes(el, input, inputAttributes);
+          if (!written) {
+            const wrapper = document.createElement("ui-otp-input-control");
+            wrapper.append(input);
+            el.append(wrapper);
+          }
+        }
+        return showDefaultText(el, instance, "ui-otp-input-slot", (slot) => {
+          const { char } = partState(
+            instance.part("slot", slotIndex(slot))
+          );
+          return char ?? "";
+        });
+      }
+    },
+    control: {
+      tag: "ui-otp-input-control",
+      display: "contents",
+      target: (el) => el.querySelector("input")
+    },
+    group: { tag: "ui-otp-input-group", display: "block" },
+    slot: { tag: "ui-otp-input-slot", display: "block", context: slotIndex },
+    separator: { tag: "ui-otp-input-separator", display: "block" }
+  });
+}
+export {
+  defineOTPInputElements
+};

package/dist/overlays.d.ts

@@ -0,0 +1,13 @@
+/**
+ * What `<ui-overlay-host>`'s `toast` property sets on the toast regions it renders.
+ * @stable
+ */
+type OverlayHostToastOptions = {
+    /** Attributes for the region, like `side`, `align`, `max` and `class`. */
+    attributes?: Record<string, string>;
+    /** What each toast renders, like a `<template>` inside `<ui-toast-region>`. */
+    template?: HTMLTemplateElement;
+};
+declare function defineOverlayHostElements(): void;
+export { createOverlays, overlays } from "@ui-sdk/core/overlays";
+export { defineOverlayHostElements, type OverlayHostToastOptions };