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

package/dist/define-element.js

@@ -0,0 +1,1489 @@
+// src/define-element.ts
+import {
+  applyAttrs,
+  attachFormInternals,
+  attrs as partAttrs,
+  bind,
+  bindElementInternals,
+  conditional,
+  connect,
+  elementMoved,
+  formCallback,
+  inDocumentOrder,
+  markAuthored,
+  portalTarget,
+  present as isPresent,
+  releaseAttrs,
+  renderVersion,
+  schemaOf,
+  selectedKeys,
+  subscribe,
+  validityChanged,
+  warn,
+  writeFromScript,
+  writeStyle
+} from "@ui-sdk/core/renderer";
+import { waitList } from "./action.js";
+var autoIds = /* @__PURE__ */ new WeakMap();
+var count = 0;
+var claimed = /* @__PURE__ */ new Set();
+function claimTag(tagName) {
+  if (typeof customElements === "undefined" || claimed.has(tagName)) {
+    return false;
+  }
+  if (customElements.get(tagName)) {
+    warn(
+      `<${tagName}> is already defined by another library or another copy of ui-sdk. This one is skipped.`
+    );
+    return false;
+  }
+  claimed.add(tagName);
+  return true;
+}
+function autoId(el) {
+  if (!autoIds.has(el)) {
+    autoIds.set(el, `auto-${++count}`);
+  }
+  return autoIds.get(el);
+}
+function wrappedButton(el) {
+  return el.querySelector(":scope > button, :scope > a") ?? el.firstElementChild;
+}
+var wrappedChild = (selector) => (el) => el.querySelector(`:scope > ${selector}`) ?? el.firstElementChild;
+function ownButton(fill) {
+  return (el) => {
+    const written = wrappedButton(el);
+    if (written) {
+      return written;
+    }
+    const button = el.ownerDocument.createElement("button");
+    button.append(...el.childNodes);
+    if (!button.textContent?.trim()) {
+      fill?.(button);
+    }
+    el.append(button);
+    return button;
+  };
+}
+function boundElement(el, target) {
+  if (target) {
+    return target(el);
+  }
+  return el.hasAttribute("as-child") ? el.firstElementChild : el;
+}
+var rekeyed = (previous, next) => previous.id !== next.id || previous.value !== next.value;
+var kebab = (name) => name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+var semantics = ["role", "aria-disabled"];
+function parseAttribute(type, value) {
+  if (value === null) {
+    return void 0;
+  }
+  if (typeof type === "function") {
+    return type(value);
+  }
+  if (type === "boolean") {
+    return value !== "false";
+  }
+  if (type === "number") {
+    const number = Number(value);
+    return value.trim() === "" || Number.isNaN(number) ? void 0 : number;
+  }
+  if (type === "list") {
+    return value.split(",").map((item) => item.trim()).filter(Boolean);
+  }
+  return value;
+}
+var presence = /* @__PURE__ */ new Set(["disabled", "required"]);
+function readAttribute(el, name, type) {
+  const value = el.getAttribute(kebab(name));
+  if (type === "boolean" && presence.has(name)) {
+    return value === null ? void 0 : true;
+  }
+  return parseAttribute(type, value);
+}
+function readAttributes(el, schema) {
+  const result = {};
+  for (const [name, type] of Object.entries(schema)) {
+    const value = readAttribute(el, name, type);
+    if (value !== void 0) {
+      result[name] = value;
+    }
+  }
+  return result;
+}
+var defaultOn = (el, value) => typeof value === "function" ? value(el) : value;
+function reflectAttributes(proto, schema, defaults = {}) {
+  for (const [name, type] of Object.entries(schema)) {
+    if (name in proto) {
+      continue;
+    }
+    const attribute = kebab(name);
+    Object.defineProperty(proto, name, {
+      configurable: true,
+      get() {
+        return readAttribute(this, name, type) ?? defaultOn(this, defaults[name]) ?? (type === "boolean" ? false : void 0);
+      },
+      set(value) {
+        const removes = value === false && type === "boolean" && !defaultOn(this, defaults[name]);
+        if (value == null || removes) {
+          this.removeAttribute(attribute);
+        } else {
+          this.setAttribute(
+            attribute,
+            value === true ? "" : Array.isArray(value) ? value.join(",") : String(value)
+          );
+        }
+      }
+    });
+  }
+}
+function upgradeProperties(el, names) {
+  for (const name of names) {
+    if (!Object.prototype.hasOwnProperty.call(el, name)) {
+      continue;
+    }
+    const value = el[name];
+    delete el[name];
+    el[name] = value;
+  }
+}
+var quiet = /* @__PURE__ */ new Set();
+function restoreQuietly(el, state, mode) {
+  quiet.add(el);
+  try {
+    return formCallback(el, "restore", state, mode);
+  } finally {
+    quiet.delete(el);
+  }
+}
+var pendingRestores = /* @__PURE__ */ new Map();
+function wroteFromScript(el) {
+  for (const waiting of pendingRestores.keys()) {
+    if (waiting.contains(el)) {
+      pendingRestores.delete(waiting);
+    }
+  }
+}
+function restoreOnceBound(el, state, mode) {
+  const token = {};
+  pendingRestores.set(el, token);
+  queueMicrotask(() => {
+    if (pendingRestores.get(el) !== token) {
+      return;
+    }
+    pendingRestores.delete(el);
+    restoreQuietly(el, state, mode);
+  });
+}
+function quietNow(el) {
+  const owner = partOwners.get(el);
+  if (quiet.has(el) || !!owner && quiet.has(owner)) {
+    return true;
+  }
+  for (const inside of quiet) {
+    if (el.contains(inside)) {
+      return true;
+    }
+  }
+  return false;
+}
+function detailsOnly(value, details) {
+  return details === void 0 && !!value && typeof value === "object" && "reason" in value && !(typeof Event !== "undefined" && value instanceof Event);
+}
+function withEvents(el, target, silent = [], actions = [], names = {}) {
+  return new Proxy(target, {
+    get(target2, key) {
+      if (key in target2 || typeof key !== "string" || !/^on[A-Z]/.test(key)) {
+        return target2[key];
+      }
+      if (silent.includes(key)) {
+        return void 0;
+      }
+      return (value, details) => {
+        if (quietNow(el)) {
+          return;
+        }
+        const only = detailsOnly(value, details);
+        const { cancel, canceled, ...rest } = (only ? value : details) ?? {};
+        const detail = only ? rest : { ...rest, value };
+        const wait = actions.includes(key) ? waitList() : void 0;
+        if (wait) {
+          detail.waitUntil = wait.waitUntil;
+        }
+        const event = new CustomEvent(
+          names[key] ?? key.slice(2).toLowerCase(),
+          {
+            detail,
+            bubbles: false,
+            // Only a change with details or an event to cancel is cancelable.
+            cancelable: typeof cancel === "function" || typeof value?.preventDefault === "function",
+            composed: true
+          }
+        );
+        const proceed = el.dispatchEvent(event);
+        const waiting = wait?.done() ?? [];
+        if (!proceed) {
+          if (typeof cancel === "function") {
+            cancel();
+          } else if (value && typeof value.preventDefault === "function") {
+            ;
+            value.preventDefault();
+          }
+        }
+        return waiting.length > 1 ? Promise.all(waiting).then((values) => values.at(-1)) : waiting[0];
+      };
+    }
+  });
+}
+var instances = /* @__PURE__ */ new WeakMap();
+function instanceOf(el) {
+  return el ? instances.get(el) : void 0;
+}
+var reads = /^(?:get|is|can)[A-Z]|^focus$/;
+function controllerView(el, api, methods) {
+  const view = {};
+  for (const name of methods) {
+    const method = api[name];
+    if (typeof method === "function") {
+      view[name] = (...args) => {
+        if (!reads.test(name)) {
+          wroteFromScript(el);
+        }
+        return method.apply(api, args);
+      };
+    }
+  }
+  return Object.freeze(view);
+}
+var display = /* @__PURE__ */ new Map();
+var aligned = /* @__PURE__ */ new Set();
+var styleId;
+function documentStyle() {
+  if (styleId) {
+    return styleId;
+  }
+  const copies = globalThis;
+  const key = /* @__PURE__ */ Symbol.for("ui-sdk.web-styles@1");
+  copies[key] = (copies[key] ?? 0) + 1;
+  return styleId = `ui-sdk-web-${copies[key]}`;
+}
+var css = "";
+var rulesVersion = 0;
+var constructed = /* @__PURE__ */ new WeakMap();
+function setDisplay(selector, value, align = false) {
+  if (align) {
+    aligned.add(selector);
+  }
+  if (!value && !align) {
+    return;
+  }
+  if (value) {
+    display.set(selector, value);
+  }
+  css = rules();
+  writeStyle(document, documentStyle(), css);
+  rulesVersion++;
+}
+function rules() {
+  return [
+    "@layer ui-sdk {",
+    // Parts that aren't shown stay hidden whatever display a class gives them.
+    '  :where([data-slot][hidden]:not([hidden="until-found"])) { display: none !important }',
+    // Content hidden until found is only hidden inside a box, so those keep theirs.
+    ...[...display].map(
+      ([selector, value]) => `  :where(${selector}:not([hidden]), ${selector}[hidden="until-found"]) { display: ${value} }`
+    ),
+    ...[...aligned].map(
+      (tag) => `  :where(${tag}[align]) { text-align: inherit }`
+    ),
+    // A part with as-child hands its role to its child, so it has no box of its own.
+    "  :where([as-child]) { display: contents }",
+    "}"
+  ].join("\n");
+}
+function adoptStyles(el) {
+  const root = el.getRootNode();
+  if (!isShadowRoot(root)) {
+    return copyStyles(el.ownerDocument);
+  }
+  const shared = sharedSheet(root.ownerDocument);
+  if (!shared || root.adoptedStyleSheets.includes(shared)) {
+    return;
+  }
+  root.adoptedStyleSheets = [shared, ...root.adoptedStyleSheets];
+}
+var isShadowRoot = (node) => node.nodeType === 11 && "host" in node;
+function sharedSheet(doc) {
+  const view = doc.defaultView;
+  if (!view) {
+    return;
+  }
+  let entry = constructed.get(doc);
+  if (!entry) {
+    constructed.set(
+      doc,
+      entry = { sheet: new view.CSSStyleSheet(), version: -1 }
+    );
+  }
+  if (entry.version !== rulesVersion) {
+    entry.sheet.replaceSync(rules());
+    entry.version = rulesVersion;
+  }
+  return entry.sheet;
+}
+function copyStyles(doc) {
+  if (css) {
+    writeStyle(doc, documentStyle(), css);
+  }
+}
+var dependents = /* @__PURE__ */ new Set();
+function reconfigureInside(el) {
+  for (const dependent of dependents) {
+    if (dependent !== el && el.contains(dependent)) {
+      dependent.reconfigure();
+    }
+  }
+}
+var portals = /* @__PURE__ */ new WeakMap();
+var passedOn = /* @__PURE__ */ new WeakMap();
+function passPortalOn(container, to) {
+  passedOn.set(container, to);
+}
+function inheritedPortal(el) {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const target = portals.get(node);
+    if (target) {
+      return passedOn.has(target) ? passedOn.get(target) : target;
+    }
+  }
+  return null;
+}
+var partOwners = /* @__PURE__ */ new WeakMap();
+var slotParts = /* @__PURE__ */ new WeakMap();
+function innerPart(part, owner) {
+  for (let node = part.el; node && node !== owner; node = node.parentElement) {
+    const other = slotParts.get(node);
+    if (other === part) {
+      return;
+    }
+    if (other?.el === part.el && registered.has(other)) {
+      return other;
+    }
+  }
+}
+function handOver(part) {
+  part.dataSlot = void 0;
+  const sharing = [];
+  for (let node = part.el; node; node = node.parentElement) {
+    const other = slotParts.get(node);
+    if (other && other !== part && other.el === part.el && registered.has(other)) {
+      sharing.push(other);
+    }
+  }
+  if (!sharing.length) {
+    return;
+  }
+  part.el.removeAttribute("data-slot");
+  markAuthored(part.el, "data-slot");
+  for (const other of sharing) {
+    other.sync?.();
+  }
+}
+var registered = /* @__PURE__ */ new WeakSet();
+var findOwnerAgain = /* @__PURE__ */ new WeakMap();
+var hasRichValue = (props) => props.value !== void 0 && typeof props.value !== "string";
+function propsAround(el, slot, owner) {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const part = slotParts.get(node);
+    if (part?.slot !== slot || partOwners.get(node) !== owner) {
+      continue;
+    }
+    return part.keyed && hasRichValue(part.props) ? { ...part.props, value: part.props.id } : part.props;
+  }
+}
+function findOwner(el, selector) {
+  const target = el.getAttribute("for");
+  if (target) {
+    const root = el.getRootNode();
+    const owner = "getElementById" in root ? root.getElementById(target) : null;
+    if (owner?.matches(selector)) {
+      return owner;
+    }
+  }
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.matches(selector)) {
+      return node;
+    }
+    const owner = partOwners.get(node);
+    if (owner?.matches(selector)) {
+      return owner;
+    }
+  }
+}
+var unmatched = /* @__PURE__ */ new WeakMap();
+function findContainer(el, selector) {
+  for (let root = el.getRootNode(); ; root = root.host.getRootNode()) {
+    const container = root.querySelector(selector);
+    if (container) {
+      return container;
+    }
+    if (!isShadowRoot(root)) {
+      break;
+    }
+  }
+  if (unmatched.get(el) !== selector) {
+    warn(
+      `<${el.localName}> container="${selector}" matches no element yet, so it renders in place. A container rendered later is used from its next open.`
+    );
+  }
+  unmatched.set(el, selector);
+  return null;
+}
+function whenGone(el, run) {
+  queueMicrotask(() => {
+    if (!el.isConnected) {
+      run();
+    }
+  });
+}
+var formStates = /* @__PURE__ */ new WeakMap();
+var bindInternals = (el, internals, options) => {
+  formStates.set(el, options.state);
+  return bindElementInternals(el, internals, options);
+};
+function formAssociated(Base) {
+  return class extends Base {
+    static formAssociated = true;
+    #internals;
+    constructor() {
+      super();
+      this.#internals = this.attachInternals();
+      attachFormInternals(this, this.#internals, bindInternals);
+    }
+    get form() {
+      return this.#internals.form;
+    }
+    get labels() {
+      return this.#internals.labels;
+    }
+    get name() {
+      return this.getAttribute("name") ?? "";
+    }
+    set name(value) {
+      this.setAttribute("name", value);
+    }
+    get validity() {
+      return this.#internals.validity;
+    }
+    get validationMessage() {
+      return this.#internals.validationMessage;
+    }
+    get willValidate() {
+      return this.#internals.willValidate;
+    }
+    checkValidity() {
+      return this.#internals.checkValidity();
+    }
+    reportValidity() {
+      return this.#internals.reportValidity();
+    }
+    setCustomValidity(message) {
+      if (!formCallback(this, "customValidity", message)) {
+        this.#internals.setValidity(
+          message ? { customError: true } : {},
+          message
+        );
+      }
+    }
+    formResetCallback() {
+      pendingRestores.delete(this);
+      formCallback(this, "reset");
+    }
+    formDisabledCallback(disabled) {
+      formCallback(this, "disabled", disabled);
+    }
+    formStateRestoreCallback(state, mode) {
+      pendingRestores.delete(this);
+      if (!restoreQuietly(this, state, mode)) {
+        restoreOnceBound(this, state, mode);
+      }
+    }
+  };
+}
+var defaultOf = (name) => `default${name[0].toUpperCase()}${name.slice(1)}`;
+function defineRootElement(tagName, primitive, config) {
+  if (!claimTag(tagName)) {
+    return;
+  }
+  setDisplay(tagName, config.display);
+  const schema = {
+    debug: "boolean",
+    ...config.attributes
+  };
+  const state = config.state ?? {};
+  const optionsOf = (el, properties, rendered) => {
+    const options = readAttributes(el, schema);
+    for (const name of rendered) {
+      delete options[name];
+    }
+    for (const [name, value] of Object.entries(properties)) {
+      if (value !== void 0) {
+        options[name] = value;
+      }
+    }
+    for (const name of Object.keys(state)) {
+      if (!(name in options)) {
+        continue;
+      }
+      const fallback = defaultOf(name);
+      if (!(fallback in options)) {
+        options[fallback] = options[name];
+      }
+      delete options[name];
+    }
+    return { ...options, ...config.options?.(el) };
+  };
+  customElements.define(
+    tagName,
+    class Owner extends (config.formAssociated ? formAssociated(HTMLElement) : HTMLElement) {
+      static observedAttributes = [
+        ...Object.keys(schema).map(kebab),
+        ...semantics
+      ];
+      #view;
+      get #instance() {
+        return instances.get(this);
+      }
+      // The controller's methods. Internals stay out of reach.
+      get api() {
+        if (!this.#instance) {
+          return void 0;
+        }
+        return this.#view ??= controllerView(
+          this,
+          this.#instance.api,
+          config.api ?? []
+        );
+      }
+      #parts = /* @__PURE__ */ new Set();
+      #pending = /* @__PURE__ */ new Set();
+      #connected = false;
+      #rendering = false;
+      #rendered = /* @__PURE__ */ new Set();
+      #applying = /* @__PURE__ */ new Set();
+      #stale = /* @__PURE__ */ new Set();
+      // Left the page and destroyed its instance, which a reconnect replaces.
+      #gone = false;
+      #properties = {};
+      // State properties set while there's no live instance, like before the
+      // element connects, where the next instance starts.
+      #state = {};
+      // What a form-associated element reported to its form when it left,
+      // which it restores when it's back.
+      #saved;
+      static {
+        for (const [name, { get, set }] of Object.entries(state)) {
+          Object.defineProperty(Owner.prototype, name, {
+            get() {
+              if (name in this.#state) {
+                return this.#state[name];
+              }
+              return this.#instance ? get(this.#instance.api) : void 0;
+            },
+            set(value) {
+              wroteFromScript(this);
+              if (this.#instance && !this.#gone) {
+                this.#quietly(() => set(this.#instance.api, value));
+              } else {
+                this.#state[name] = value;
+              }
+            }
+          });
+        }
+        for (const name of config.properties ?? []) {
+          Object.defineProperty(Owner.prototype, name, {
+            get() {
+              return this.#properties[name];
+            },
+            set(value) {
+              if (Object.is(this.#properties[name], value)) {
+                return;
+              }
+              this.#properties[name] = value;
+              if (!this.#connected) {
+                return;
+              }
+              this.#configure();
+              this.#render();
+            }
+          });
+        }
+        reflectAttributes(
+          Owner.prototype,
+          schema,
+          config.defaults
+        );
+      }
+      // Options come from attributes and properties, with `defaults` over them.
+      // Re-read them into the instance.
+      #configure(defaults) {
+        this.#instance?.setOptions(
+          withEvents(
+            this,
+            {
+              ...optionsOf(this, this.#properties, this.#rendered),
+              ...defaults,
+              id: this.#instance.id
+            },
+            config.silent,
+            config.actions,
+            config.events
+          )
+        );
+      }
+      attributeChangedCallback(name, previous, value) {
+        markAuthored(this, name);
+        if (semantics.includes(name)) {
+          return;
+        }
+        const key = name.replace(
+          /-(\w)/g,
+          (_, char) => char.toUpperCase()
+        );
+        if (key in state && value !== previous && !this.#rendering) {
+          wroteFromScript(this);
+        }
+        if (!this.#rendering || value === null) {
+          this.#rendered.delete(key);
+        } else if (previous === null) {
+          this.#rendered.add(key);
+        }
+        if (!this.#connected) {
+          return;
+        }
+        this.#configure();
+        reconfigureInside(this);
+        if (!(key in state) || value === previous) {
+          return;
+        }
+        const type = schema[key];
+        const cleared = type === "boolean" ? false : type === "list" ? [] : null;
+        this.#quietly(
+          () => state[key].set(
+            this.#instance.api,
+            value === null ? cleared : parseAttribute(type, value)
+          )
+        );
+      }
+      // State set from script commits without events, like a native input's
+      // `value`, so a page that renders the state back never hears its own write.
+      #quietly(write) {
+        const nested = quiet.has(this);
+        quiet.add(this);
+        try {
+          writeFromScript(this, write);
+        } finally {
+          if (!nested) {
+            quiet.delete(this);
+            validityChanged(this);
+          }
+        }
+      }
+      connectedCallback() {
+        adoptStyles(this);
+        if (this.#connected) {
+          for (const part of this.#parts) {
+            elementMoved(part.el);
+          }
+          if (config.options) {
+            this.#configure();
+          }
+          return;
+        }
+        upgradeProperties(this, [
+          ...Object.keys(state),
+          ...config.properties ?? [],
+          ...Object.keys(schema)
+        ]);
+        for (const [name, value] of Object.entries(config.host ?? {})) {
+          if (!this.hasAttribute(name)) {
+            this.setAttribute(name, value);
+          }
+        }
+        const restore = this.#gone && !Object.keys(this.#state).length ? this.#saved : void 0;
+        const starts = {};
+        if (this.#gone && restore === void 0) {
+          for (const [name, { get }] of Object.entries(state)) {
+            starts[name] = get(this.#instance.api);
+          }
+        }
+        Object.assign(starts, this.#state);
+        this.#state = {};
+        const last = Object.fromEntries(
+          Object.entries(starts).map(([name, value]) => [
+            defaultOf(name),
+            value
+          ])
+        );
+        if (this.#gone) {
+          instances.delete(this);
+          this.#view = void 0;
+          this.#gone = false;
+          this.#saved = void 0;
+        }
+        let instance = this.#instance;
+        if (instance) {
+          this.#configure();
+        } else {
+          instance = primitive(
+            withEvents(
+              this,
+              {
+                ...optionsOf(this, this.#properties, this.#rendered),
+                ...last,
+                id: this.id || `ui-sdk-${tagName.replace(/^ui-/, "")}-${++count}`
+              },
+              config.silent,
+              config.actions,
+              config.events
+            )
+          );
+          instances.set(this, instance);
+        }
+        if (config.formAssociated && Object.keys(starts).length) {
+          const base = instance.startState(
+            optionsOf(this, this.#properties, this.#rendered)
+          );
+          this.#configure(
+            Object.fromEntries(
+              Object.keys(starts).map((name) => [defaultOf(name), base[name]])
+            )
+          );
+        }
+        this.#connected = true;
+        if (config.options) {
+          dependents.add(this);
+        }
+        if (config.self) {
+          const el = boundElement(this, config.target);
+          if (el) {
+            this.#registerSelf(el);
+          } else {
+            warn(`<${tagName}> needs an element inside it.`);
+          }
+        }
+        for (const [slot, find] of Object.entries(config.children ?? {})) {
+          const child = find(this);
+          if (child) {
+            this.#registerChild(slot, child);
+          } else if (!config.optionalChildren?.includes(slot)) {
+            warn(
+              `<${tagName}> needs its native element inside it for "${slot}".`
+            );
+          }
+        }
+        if (config.children || config.target) {
+          this.#childObserver = new MutationObserver(() => {
+            this.#syncChildren();
+            this.#syncSelf();
+          });
+          this.#childObserver.observe(this, { childList: true });
+        }
+        this.#render();
+        if (this.id) {
+          const root = this.getRootNode();
+          for (const el of root.querySelectorAll(
+            `[for="${CSS.escape(this.id)}"]`
+          )) {
+            findOwnerAgain.get(el)?.();
+          }
+        }
+        if (restore !== void 0) {
+          restoreOnceBound(this, restore, "restore");
+        }
+      }
+      #renderCleanup;
+      // Runs only while connected, when the instance exists.
+      #render() {
+        this.#renderCleanup?.();
+        this.#renderCleanup = config.render?.(this, this.#instance) || void 0;
+      }
+      reconfigure() {
+        if (this.#connected) {
+          this.#configure();
+        }
+      }
+      #childParts = /* @__PURE__ */ new Map();
+      #childObserver;
+      #selfPart;
+      #registerSelf(el) {
+        this.#selfPart = { slot: config.self, el, props: {} };
+        this.register(this.#selfPart);
+      }
+      // The element the own slot binds was replaced: the new one binds instead.
+      #syncSelf() {
+        if (!config.self || !config.target) {
+          return;
+        }
+        const el = boundElement(this, config.target);
+        if (el === this.#selfPart?.el) {
+          return;
+        }
+        if (this.#selfPart) {
+          this.unregister(this.#selfPart);
+        }
+        this.#selfPart = void 0;
+        this.#configure();
+        if (el) {
+          this.#registerSelf(el);
+        }
+      }
+      #registerChild(slot, el) {
+        const part = {
+          slot,
+          el,
+          props: config.childProps?.read?.(el) ?? {}
+        };
+        if (config.childProps) {
+          part.observer = new MutationObserver(() => {
+            part.props = config.childProps.read?.(el) ?? {};
+            this.#configure();
+            this.update(part, false);
+          });
+          part.observer.observe(el, {
+            attributeFilter: config.childProps.attributes
+          });
+        }
+        this.#childParts.set(slot, part);
+        this.register(part);
+      }
+      #syncChildren() {
+        for (const [slot, find] of Object.entries(config.children ?? {})) {
+          const child = find(this);
+          const current = this.#childParts.get(slot);
+          if (current?.el === child) {
+            continue;
+          }
+          if (current) {
+            this.unregister(current);
+            this.#childParts.delete(slot);
+          }
+          if (child) {
+            this.#registerChild(slot, child);
+          }
+        }
+      }
+      disconnectedCallback() {
+        whenGone(this, () => {
+          this.#saved = formStates.get(this)?.();
+          this.#renderCleanup?.();
+          this.#renderCleanup = void 0;
+          this.#childObserver?.disconnect();
+          this.#childObserver = void 0;
+          this.#childParts.clear();
+          this.#selfPart = void 0;
+          this.#connected = false;
+          dependents.delete(this);
+          for (const part of this.#parts) {
+            this.unregister(part);
+          }
+          this.#instance?.destroy();
+          this.#gone = true;
+        });
+      }
+      // Parts register as they upgrade, in no useful order. They sync together a
+      // microtask later in DOM order, so a trigger binds before an open popup.
+      register(part) {
+        this.#parts.add(part);
+        registered.add(part);
+        part.sync = () => this.#pending.has(part) || this.#sync(part);
+        if (!this.#pending.size) {
+          queueMicrotask(() => this.#flush());
+        }
+        this.#pending.add(part);
+      }
+      #flush() {
+        const parts = inDocumentOrder([...this.#pending]);
+        this.#pending.clear();
+        for (const part of parts) {
+          if (!this.#parts.has(part)) {
+            continue;
+          }
+          if (part.reread) {
+            part.props = part.reread();
+          }
+          if (part.feature) {
+            this.#instance.use(part.feature);
+          }
+          this.#watch(part);
+          this.#sync(part);
+        }
+      }
+      // Syncs a part again when a change can affect it, so a highlight change
+      // reaches the two items it moves between, not every part. Live state is
+      // written by the core, so only changes to state that affects rendering
+      // apply attributes again. A part that selects on a live key, like an
+      // item on the highlight, hears that key alone, and has nothing to apply.
+      #watch(part) {
+        const instance = this.#instance;
+        part.unwatch?.();
+        const record = instance.part(part.slot, part.props);
+        part.record = record;
+        part.selected = selectedKeys(record);
+        part.version = renderVersion(instance);
+        part.unwatch = subscribe(record, (liveOnly) => {
+          if (isPresent(record) !== part.shown) {
+            part.version = renderVersion(instance);
+            return this.#sync(part);
+          }
+          if (liveOnly) {
+            return;
+          }
+          const version = renderVersion(instance);
+          if (version === part.version) {
+            return;
+          }
+          part.version = version;
+          this.#sync(part);
+        });
+      }
+      unregister(part) {
+        part.unwatch?.();
+        part.unwatch = void 0;
+        part.observer?.disconnect();
+        part.observer = void 0;
+        this.#unbind(part);
+        releaseAttrs(part.el, this.#channel);
+        part.disconnect?.();
+        part.disconnect = void 0;
+        this.#restore(part);
+        this.#parts.delete(part);
+        registered.delete(part);
+        this.#pending.delete(part);
+        handOver(part);
+      }
+      // Binds every bound part again, in DOM order, for what they found when
+      // they bound, like the menubar a menu joins, which may upgrade later.
+      rebind() {
+        const parts = inDocumentOrder(
+          [...this.#parts].filter((part) => !this.#pending.has(part))
+        );
+        for (const part of parts) {
+          this.#unbind(part);
+        }
+        for (const part of parts) {
+          this.#sync(part);
+        }
+      }
+      // Props changed. A new key needs a new binding. Other parts can depend on
+      // this one's props, like radio items on their group's value, or on its
+      // attributes, like toolbar items on their group's `disabled`, so they
+      // read their props again and sync too.
+      update(part, rebind) {
+        if (this.#pending.has(part)) {
+          return;
+        }
+        this.#rewatch(part, rebind);
+        this.#sync(part);
+        for (const other of this.#parts) {
+          if (other === part || this.#pending.has(other)) {
+            continue;
+          }
+          if (other.reread) {
+            const previous = other.props;
+            other.props = other.reread();
+            this.#rewatch(other, rekeyed(previous, other.props));
+          }
+          this.#sync(other);
+        }
+        reconfigureInside(part.el);
+      }
+      #rewatch(part, rebind) {
+        if (rebind) {
+          this.#unbind(part);
+        }
+        const record = this.#instance.part(part.slot, part.props);
+        if (record !== part.record || selectedKeys(record) !== part.selected) {
+          this.#watch(part);
+        }
+      }
+      #sync(part) {
+        if (this.#applying.has(part)) {
+          return void this.#stale.add(part);
+        }
+        adoptStyles(part.el);
+        const instance = this.#instance;
+        const record = instance.part(part.slot, part.props);
+        part.disconnect ??= connect(record, part.el);
+        part.shown = isPresent(record);
+        if (part.shown) {
+          const target = this.#portalTarget(part);
+          if (target !== void 0 && this.#moves(part, target)) {
+            this.#unbind(part);
+            this.#move(part, target);
+          }
+          const attrs = partAttrs(record);
+          if (attrs.hidden === void 0 && (conditional(record) || "hidden" in attrs)) {
+            part.el.removeAttribute("hidden");
+          }
+          this.#apply(part, attrs);
+          if (!part.unbind) {
+            this.#bind(part, record);
+          }
+        } else {
+          if (part.unbind) {
+            this.#apply(part, partAttrs(record));
+            this.#unbind(part);
+          }
+          if (!part.el.hasAttribute("hidden")) {
+            part.el.setAttribute("hidden", "");
+          }
+          const slot = partAttrs(record)["data-slot"];
+          if (slot && !part.el.hasAttribute("data-slot")) {
+            part.el.setAttribute("data-slot", slot);
+          }
+          this.#restore(part);
+        }
+      }
+      // Binding and unbinding can change state, which syncs parts again. The part
+      // counts as bound from the start, so a nested sync never binds it twice,
+      // and as unbound from the start, so it never unbinds twice.
+      #bind(part, record) {
+        let cleanup;
+        let unbound = false;
+        part.unbind = () => {
+          unbound = true;
+          cleanup?.();
+        };
+        cleanup = bind(record, part.el);
+        if (unbound) {
+          cleanup();
+        }
+      }
+      #unbind(part) {
+        const unbind = part.unbind;
+        part.unbind = void 0;
+        unbind?.();
+      }
+      // Where a portaled slot's part belongs: a container, or null for in
+      // place. Undefined for slots that never move.
+      #portalTarget(part) {
+        if (!config.portal?.slots.includes(part.slot)) {
+          return void 0;
+        }
+        return portalTarget(config.portal.container(this, part));
+      }
+      #moves(part, target) {
+        return target ? part.el.parentNode !== target : !!part.placeholder;
+      }
+      // Moves a part into its container, or back in place for null.
+      #move(part, target) {
+        this.#restore(part);
+        if (!target) {
+          return;
+        }
+        part.placeholder = document.createComment(`${tagName} ${part.slot}`);
+        part.el.replaceWith(part.placeholder);
+        target.appendChild(part.el);
+        portals.set(part.el, target);
+      }
+      // An attribute the owner writes on itself is state, not an option, like a
+      // grouped checkbox's `disabled` from its group, so it never disables it for good.
+      #apply(part, attrs) {
+        const inner = innerPart(part, this);
+        if (inner?.dataSlot) {
+          attrs = { ...attrs, "data-slot": inner.dataSlot };
+        }
+        part.dataSlot = attrs["data-slot"];
+        const rendering = this.#rendering;
+        this.#rendering = part.el === this;
+        this.#applying.add(part);
+        try {
+          applyAttrs(part.el, attrs, this.#channel);
+        } finally {
+          this.#rendering = rendering;
+          this.#applying.delete(part);
+        }
+        if (this.#stale.delete(part)) {
+          this.#sync(part);
+        }
+      }
+      // What the owner writes on its parts' elements. By host, not instance, so
+      // one put back on the page replaces what its last instance wrote, like its parts' ids.
+      get #channel() {
+        return `render:${autoId(this)}`;
+      }
+      #restore(part) {
+        if (!part.placeholder) {
+          return;
+        }
+        part.placeholder.replaceWith(part.el);
+        part.placeholder = void 0;
+        portals.delete(part.el);
+      }
+    }
+  );
+}
+function definePartElement(tagName, config) {
+  if (!claimTag(tagName)) {
+    return;
+  }
+  const schema = config.props ?? {};
+  setDisplay(tagName, config.display, "align" in schema);
+  customElements.define(
+    tagName,
+    class PartElement extends (config.formAssociated ? formAssociated(HTMLElement) : HTMLElement) {
+      static observedAttributes = [
+        ...Object.keys(schema).map(kebab),
+        "for",
+        ...semantics
+      ];
+      #owner;
+      #part;
+      #properties = {};
+      constructor() {
+        super();
+        findOwnerAgain.set(this, () => {
+          if (this.isConnected) {
+            this.connectedCallback();
+          }
+        });
+      }
+      static {
+        for (const name of config.properties ?? []) {
+          Object.defineProperty(PartElement.prototype, name, {
+            get() {
+              return this.#properties[name] ?? (schema[name] && readAttribute(this, name, schema[name]));
+            },
+            set(value) {
+              this.#properties[name] = value;
+              this.attributeChangedCallback("");
+            }
+          });
+        }
+        reflectAttributes(PartElement.prototype, schema, config.defaults);
+      }
+      // What the element says itself, its attributes and properties, wins
+      // over what its surroundings give it.
+      #props() {
+        const props = {
+          ...config.context?.(this),
+          ...readAttributes(this, schema)
+        };
+        for (const name of config.properties ?? []) {
+          if (this.#properties[name] !== void 0) {
+            props[name] = this.#properties[name];
+          }
+        }
+        for (const [name, { slot, prop }] of Object.entries(
+          config.from ?? {}
+        )) {
+          props[name] ??= propsAround(this, slot, this.#owner)?.[prop];
+        }
+        for (const name of config.ids ?? []) {
+          props[name] ??= autoId(this);
+        }
+        if (props.value === void 0 && props.id === void 0) {
+          props.id = autoId(this);
+        }
+        if (config.keyed && hasRichValue(props)) {
+          props.id ??= instanceOf(this.#owner)?.api.internal.keyOf(
+            props.value
+          );
+        }
+        return withEvents(this, props, [], config.actions);
+      }
+      // Watches the children for the element the part binds, which can come
+      // later or be replaced, like a framework's conditional content.
+      #children;
+      connectedCallback() {
+        upgradeProperties(this, [
+          ...config.properties ?? [],
+          ...Object.keys(schema)
+        ]);
+        adoptStyles(this);
+        if ((config.target || this.hasAttribute("as-child")) && !this.#children) {
+          this.#children = new MutationObserver(() => this.#retarget());
+          this.#children.observe(this, { childList: true });
+        }
+        const owner = findOwner(this, config.owner) ?? this.#owner;
+        if (!owner) {
+          return queueMicrotask(() => this.#findOwnerLater());
+        }
+        if (!("register" in owner)) {
+          customElements.whenDefined(owner.localName).then(() => this.isConnected && this.connectedCallback());
+          return;
+        }
+        if (owner === this.#owner && this.#part && registered.has(this.#part)) {
+          return;
+        }
+        if (this.#owner && this.#part) {
+          this.#owner.unregister(this.#part);
+        }
+        const el = boundElement(this, config.target);
+        if (!el) {
+          return queueMicrotask(() => {
+            if (this.isConnected && !this.#part && !boundElement(this, config.target)) {
+              warn(`<${tagName}> needs an element inside it.`);
+            }
+          });
+        }
+        if (!this.#part) {
+          config.render?.(this);
+          if (this.#part) {
+            return;
+          }
+        }
+        this.#owner = owner;
+        this.#part = {
+          slot: config.slot,
+          feature: config.feature,
+          el,
+          props: this.#props(),
+          reread: (config.context || config.from) && (() => this.#props()),
+          keyed: config.keyed
+        };
+        partOwners.set(this, owner);
+        slotParts.set(this, this.#part);
+        owner.register(this.#part);
+      }
+      // Put back on the page, a part can connect before what leads to its owner
+      // does, like an item in a list its owner renders again. Warned only when
+      // the owner is still missing once the task's other elements connected.
+      #findOwnerLater() {
+        if (!this.isConnected || this.#owner) {
+          return;
+        }
+        if (findOwner(this, config.owner)) {
+          this.connectedCallback();
+        } else if (config.alone) {
+          config.alone(boundElement(this, config.target) ?? this, this);
+        } else if (!this.hasAttribute("for")) {
+          warn(`<${tagName}> must be inside ${config.owner}.`);
+        }
+      }
+      // The element the part binds came, left or was replaced: the part lets go
+      // of the old one and registers again with what's there now. One the owner
+      // moved into a portal, like an input a sheet puts in its header, stays bound.
+      #retarget() {
+        const old = this.#part?.el;
+        if (!this.isConnected || old && portals.has(old)) {
+          return;
+        }
+        const el = boundElement(this, config.target);
+        if (el === (old ?? null)) {
+          return;
+        }
+        if (this.#owner && this.#part) {
+          this.#owner.unregister(this.#part);
+        }
+        this.#owner = void 0;
+        this.#part = void 0;
+        if (el) {
+          this.connectedCallback();
+        }
+      }
+      disconnectedCallback() {
+        whenGone(this, () => {
+          this.#children?.disconnect();
+          this.#children = void 0;
+          if (this.#owner && this.#part) {
+            this.#owner.unregister(this.#part);
+          }
+          partOwners.delete(this);
+          slotParts.delete(this);
+          this.#owner = void 0;
+          this.#part = void 0;
+        });
+      }
+      attributeChangedCallback(name) {
+        markAuthored(this, name);
+        if (semantics.includes(name)) {
+          return;
+        }
+        if (name === "for") {
+          if (!this.isConnected) {
+            return;
+          }
+          if (!findOwner(this, config.owner) && this.#owner && this.#part) {
+            this.#owner.unregister(this.#part);
+            this.#owner = void 0;
+            partOwners.delete(this);
+          }
+          this.connectedCallback();
+          return;
+        }
+        if (!this.#owner || !this.#part) {
+          if (config.alone && this.isConnected && !findOwner(this, config.owner)) {
+            config.alone(boundElement(this, config.target) ?? this, this);
+          }
+          return;
+        }
+        const previous = this.#part.props;
+        this.#part.props = this.#props();
+        const next = this.#part.props;
+        const rebind = rekeyed(previous, next) || !!config.rebind?.some((name2) => previous[name2] !== next[name2]);
+        this.#owner.update(this.#part, rebind);
+        config.changed?.(this);
+      }
+    }
+  );
+}
+var rootTags = /* @__PURE__ */ new WeakMap();
+function elementProps(props, schema, kinds = {}) {
+  const attributes = {};
+  const properties = [];
+  const ids = [];
+  const actions = [];
+  let keyed = false;
+  const from = {};
+  for (const [name, spec] of Object.entries({ ...props, ...kinds })) {
+    if (!spec) {
+      continue;
+    }
+    if (typeof spec === "object") {
+      const [slot, prop = name] = spec.from.split(".");
+      if (slot in schema.slots) {
+        from[name] = { slot, prop };
+      }
+      if (!(name in kinds)) {
+        continue;
+      }
+    }
+    const kind = typeof spec === "object" ? spec.kind : spec;
+    if (kind === "value") {
+      properties.push(name);
+    } else if (kind === "action") {
+      actions.push(name);
+    } else if (kind === "id") {
+      ids.push(name);
+    } else if (kind === "key") {
+      keyed = true;
+    }
+    if (kind === "value" || kind === "action" || kind === "callback") {
+      continue;
+    }
+    if (name !== "id" || name in kinds) {
+      attributes[name] = kind === "id" || kind === "key" ? "string" : kind;
+    }
+  }
+  return {
+    attributes,
+    properties,
+    ids,
+    actions,
+    keyed,
+    from: Object.keys(from).length ? from : void 0
+  };
+}
+var tagOf = (tagOrOptions) => typeof tagOrOptions === "string" ? { tag: tagOrOptions } : tagOrOptions;
+function partElement(primitive, key, tagOrOptions, root) {
+  const schema = schemaOf(primitive);
+  if (key === "root") {
+    const {
+      tag: tag2,
+      self,
+      kinds: kinds2,
+      properties: properties2 = [],
+      ...options2
+    } = tagOf(tagOrOptions);
+    rootTags.set(primitive, [
+      .../* @__PURE__ */ new Set([...rootTags.get(primitive) ?? [], tag2])
+    ]);
+    const { debug: _debug, ...optionSchema } = schema.options;
+    const props2 = elementProps(optionSchema, schema, kinds2);
+    const config2 = {
+      ...options2,
+      self: self ?? ("root" in schema.slots && !options2.children?.root ? "root" : void 0),
+      attributes: props2.attributes,
+      // Live state has its own property.
+      properties: [.../* @__PURE__ */ new Set([...props2.properties, ...properties2])].filter(
+        (name) => !options2.state?.[name]
+      ),
+      actions: props2.actions
+    };
+    return { kind: "owner", key, tagName: tag2, config: config2 };
+  }
+  const {
+    tag,
+    slot = key,
+    owners = [],
+    kinds,
+    properties = [],
+    ...options
+  } = tagOf(tagOrOptions);
+  const roots = rootTags.get(primitive);
+  if (!roots) {
+    throw new Error(
+      `<${tag}> is a part of ${primitive.name}: define its root first.`
+    );
+  }
+  const slotSchema = schema.slots[slot] ?? (options.feature?.slots[slot] && (options.feature.slots[slot].props ?? {}));
+  if (!slotSchema) {
+    throw new Error(`<${tag}>: ${primitive.name} has no ${slot} slot.`);
+  }
+  const { attributes, ...props } = elementProps(slotSchema, schema, kinds);
+  const config = {
+    ...options,
+    slot,
+    owner: [.../* @__PURE__ */ new Set([...root ? [root] : [], ...roots, ...owners])].join(
+      ", "
+    ),
+    props: attributes,
+    ...props,
+    properties: [.../* @__PURE__ */ new Set([...props.properties, ...properties])]
+  };
+  return { kind: "part", key, tagName: tag, config };
+}
+function partElements(primitive, tags) {
+  const { root, ...parts } = tags;
+  const owner = partElement(primitive, "root", root);
+  return [
+    owner,
+    ...Object.entries(
+      parts
+    ).flatMap(
+      ([key, tag]) => tag ? [partElement(primitive, key, tag, owner.tagName)] : []
+    )
+  ];
+}
+function defineElement(primitive, element) {
+  if (element.kind === "owner") {
+    defineRootElement(element.tagName, primitive, element.config);
+  } else {
+    definePartElement(element.tagName, element.config);
+  }
+}
+var pascal = (name) => name.replace(/(^|-)(\w)/g, (_, _dash, char) => char.toUpperCase());
+function createParts(primitive, tags) {
+  const parts = {};
+  for (const element of partElements(primitive, tags)) {
+    defineElement(primitive, element);
+    parts[pascal(element.key)] = typeof customElements === "undefined" ? void 0 : customElements.get(element.tagName);
+  }
+  return parts;
+}
+function definePart(primitive, slot, tagOrOptions) {
+  defineElement(primitive, partElement(primitive, slot, tagOrOptions));
+}
+export {
+  autoId,
+  claimTag,
+  createParts,
+  definePart,
+  findContainer,
+  findOwner,
+  inheritedPortal,
+  instanceOf,
+  ownButton,
+  parseAttribute,
+  partElement,
+  partElements,
+  passPortalOn,
+  reconfigureInside,
+  setDisplay,
+  upgradeProperties,
+  whenGone,
+  wrappedButton,
+  wrappedChild
+};