@antadesign/anta 0.3.33 → 0.3.35

package/dist/elements/a-copy.js

@@ -4,104 +4,65 @@ import "./a-copy.css";
 const BUTTON_HOST = "a-button, button, [role=button]";
 const MENU_HOST = "a-menu-item, [role=menuitem]";
 const ANY_HOST = `${BUTTON_HOST}, ${MENU_HOST}`;
-const pointerOrigins = /* @__PURE__ */ new WeakMap();
+const COPY_DELEGATION = /* @__PURE__ */ Symbol.for("anta.copy-delegation");
 function copyChild(host) {
   return host?.querySelector(":scope > a-copy") ?? null;
 }
 function hostBlocked(host) {
   return host.hasAttribute("disabled") || host.hasAttribute("loading") || host.getAttribute("aria-disabled") === "true";
 }
-function installCopyDelegation(doc) {
-  if (!doc || doc.hasCopyDelegation) return;
-  const preRequest = (target, origin) => {
-    const host = target?.closest?.(ANY_HOST);
+function copyDelegation(doc) {
+  if (doc[COPY_DELEGATION]) return doc[COPY_DELEGATION];
+  const origins = /* @__PURE__ */ new WeakMap();
+  const hostFor = (event) => event.target?.closest?.(ANY_HOST);
+  const preRequest = (event, origin) => {
+    const host = hostFor(event);
     if (!host || hostBlocked(host)) return;
     const el = copyChild(host);
     if (!el) return;
-    if (origin) pointerOrigins.set(el, origin);
-    else pointerOrigins.delete(el);
+    if (origin) origins.set(el, origin);
+    else origins.delete(el);
     emitCopyRequest(el);
   };
-  doc.addEventListener(
-    "pointerdown",
-    (e) => preRequest(e.target, { x: e.clientX, y: e.clientY }),
-    true
-  );
-  doc.addEventListener(
-    "keydown",
-    (e) => {
-      if (e.key === "Enter" || e.key === " ")
-        preRequest(e.target);
-    },
-    true
-  );
-  doc.addEventListener(
-    "click",
-    (e) => {
-      const host = e.target?.closest?.(BUTTON_HOST);
-      if (!host || hostBlocked(host)) return;
-      const el = copyChild(host);
-      if (!el) return;
-      if (e.detail)
-        pointerOrigins.set(el, { x: e.clientX, y: e.clientY });
-      else pointerOrigins.delete(el);
-      el.activate();
-    },
-    true
-  );
-  doc.addEventListener(
-    "menuselect",
-    (e) => {
-      const host = e.target?.closest?.(MENU_HOST);
-      if (!host || hostBlocked(host)) return;
-      copyChild(host)?.activate();
-    },
-    true
-  );
-  doc.hasCopyDelegation = true;
+  const pointerdown = (e) => preRequest(e, { x: e.clientX, y: e.clientY });
+  const keydown = (e) => {
+    if (e.key === "Enter" || e.key === " ") preRequest(e);
+  };
+  const click = (e) => {
+    const host = hostFor(e);
+    if (!host?.matches(BUTTON_HOST) || hostBlocked(host)) return;
+    const el = copyChild(host);
+    if (!el) return;
+    if (e.detail) origins.set(el, { x: e.clientX, y: e.clientY });
+    else origins.delete(el);
+    el.activate();
+  };
+  const menuselect = (e) => {
+    const host = hostFor(e);
+    if (!host?.matches(MENU_HOST) || hostBlocked(host)) return;
+    copyChild(host)?.activate();
+  };
+  doc.addEventListener("pointerdown", pointerdown, true);
+  doc.addEventListener("keydown", keydown, true);
+  doc.addEventListener("click", click, true);
+  doc.addEventListener("menuselect", menuselect, true);
+  const delegation = {
+    readers: /* @__PURE__ */ new Set(),
+    origins,
+    dispose: () => {
+      doc.removeEventListener("pointerdown", pointerdown, true);
+      doc.removeEventListener("keydown", keydown, true);
+      doc.removeEventListener("click", click, true);
+      doc.removeEventListener("menuselect", menuselect, true);
+      delete doc[COPY_DELEGATION];
+    }
+  };
+  doc[COPY_DELEGATION] = delegation;
+  return delegation;
 }
 const FEEDBACK_MS = 900;
 const COPY_FEEDBACK_TEMPLATE = typeof document === "undefined" ? void 0 : (() => {
   const template = document.createElement("template");
-  const style = document.createElement("style");
-  style.textContent = `
-    .feedback {
-      position: fixed;
-      margin: 0;
-      padding: 0;
-      border: 0;
-      inset: auto;
-      background: none;
-      overflow: visible;
-      pointer-events: none;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      box-sizing: border-box;
-      color: var(--text-2-success);
-      font-family: var(--sans-serif);
-      font-size: 13px;
-      line-height: 16px;
-      font-weight: 500;
-      white-space: nowrap;
-      --_feedback-y-from: calc(-100% - 10px);
-      --_feedback-y-to: calc(-100% - 1.5em);
-      transform: translate(var(--_feedback-x), var(--_feedback-y-from));
-    }
-    .feedback[data-placement="below"] {
-      --_feedback-y-from: 10px;
-      --_feedback-y-to: 1.5em;
-    }
-    .feedback[data-measure-end] {
-      transform: translate(var(--_feedback-x), var(--_feedback-y-to));
-    }
-    .feedback:not(:popover-open) { display: none; }
-    .feedback[data-show] { animation: a-copy-feedback-rise ${FEEDBACK_MS}ms ease-out forwards; }
-    @keyframes a-copy-feedback-rise {
-      from { opacity: 1; transform: translate(var(--_feedback-x), var(--_feedback-y-from)); }
-      to { opacity: 0; transform: translate(var(--_feedback-x), var(--_feedback-y-to)); }
-    }
-  `;
   const feedback = document.createElement("div");
   feedback.className = "feedback";
   feedback.part.add("feedback");
@@ -113,25 +74,50 @@ const COPY_FEEDBACK_TEMPLATE = typeof document === "undefined" ? void 0 : (() =>
   const label = document.createElement("span");
   label.className = "label";
   feedback.append(icon, label);
-  template.content.append(style, feedback);
+  template.content.append(feedback);
   return template;
 })();
 class ACopyElement extends HTMLElementBase {
   #feedback;
   #feedbackLabel;
   #feedbackTimer;
+  #timerView;
+  #delegation;
+  #connectedDocument;
+  #generation = 0;
+  #completion;
+  #animation;
+  #motion;
+  #reconnectOrigin;
   connectedCallback() {
-    installCopyDelegation(this.doc);
+    this.#delegation = copyDelegation(this.doc);
+    this.#connectedDocument = this.doc;
+    this.#delegation.readers.add(this);
+    if (this.#reconnectOrigin?.doc === this.doc && this.#reconnectOrigin.origin) {
+      this.#delegation.origins.set(this, this.#reconnectOrigin.origin);
+    }
+    this.#reconnectOrigin = void 0;
     this.addEventListener("copydone", this.#onCopyDone);
   }
   /** Run the copy for the activated host. Called from the delegated click /
    * menuselect handlers; the confirmation follows a successful `copydone`. */
   activate() {
-    runCopy(this);
+    const generation = this.#generation;
+    const origin = this.#delegation?.origins.get(this);
+    this.#delegation?.origins.delete(this);
+    runCopy(this, (ok) => {
+      this.#completion = { current: this.isConnected && generation === this.#generation, origin };
+      try {
+        this.dispatchEvent(new this.view.CustomEvent("copydone", { detail: { ok } }));
+      } finally {
+        this.#completion = void 0;
+      }
+    });
   }
   #onCopyDone = (e) => {
-    const origin = pointerOrigins.get(this);
-    pointerOrigins.delete(this);
+    if (e.target !== this || this.#completion?.current === false || !this.isConnected) return;
+    const origin = this.#completion ? this.#completion.origin : this.#delegation?.origins.get(this);
+    if (!this.#completion) this.#delegation?.origins.delete(this);
     if (!this.hasAttribute("toast")) return;
     if (!e.detail?.ok) return;
     const host = this.closest(ANY_HOST);
@@ -154,38 +140,73 @@ class ACopyElement extends HTMLElementBase {
     if (origin) {
       feedback.style.left = `${origin.x}px`;
       feedback.style.top = `${origin.y}px`;
-      feedback.style.setProperty("--_feedback-x", "8px");
+      feedback.style.translate = "8px 0";
       belowTop = origin.y;
     } else {
       const rect = host.getBoundingClientRect();
       const rtl = this.view.getComputedStyle(host).direction === "rtl";
       feedback.style.left = `${rtl ? rect.right - 12 : rect.left + 12}px`;
       feedback.style.top = `${rect.top}px`;
-      feedback.style.setProperty("--_feedback-x", rtl ? "-100%" : "0");
+      feedback.style.translate = rtl ? "-100% 0" : "0 0";
       belowTop = rect.bottom;
     }
-    clearTimeout(this.#feedbackTimer);
-    feedback.removeAttribute("data-show");
-    feedback.removeAttribute("data-placement");
-    if (feedback.matches(":popover-open")) feedback.hidePopover();
+    if (!this.#motion) {
+      const styles = this.view.getComputedStyle(feedback);
+      const motion = {
+        opacity: [styles.getPropertyValue("--_copy-opacity-from").trim(), styles.getPropertyValue("--_copy-opacity-to").trim()],
+        easing: styles.getPropertyValue("--_copy-easing").trim(),
+        above: [styles.getPropertyValue("--_copy-above-from").trim(), styles.getPropertyValue("--_copy-above-to").trim()],
+        below: [styles.getPropertyValue("--_copy-below-from").trim(), styles.getPropertyValue("--_copy-below-to").trim()]
+      };
+      if (![...motion.opacity, ...motion.above, ...motion.below, motion.easing].every(Boolean)) return;
+      this.#motion = motion;
+    }
+    this.#clearFeedback();
     feedback.showPopover();
-    feedback.setAttribute("data-measure-end", "");
-    const crossesTopEdge = feedback.getBoundingClientRect().top < 0;
-    feedback.removeAttribute("data-measure-end");
-    if (crossesTopEdge) {
-      feedback.setAttribute("data-placement", "below");
-      feedback.style.top = `${belowTop}px`;
+    feedback.style.transform = this.#motion.above[1];
+    const below = feedback.getBoundingClientRect().top < 0;
+    if (below) feedback.style.top = `${belowTop}px`;
+    const transforms = below ? this.#motion.below : this.#motion.above;
+    feedback.style.transform = transforms[0];
+    if (!this.#animation) {
+      this.#animation = feedback.animate({ opacity: this.#motion.opacity, transform: transforms }, {
+        duration: FEEDBACK_MS,
+        easing: this.#motion.easing,
+        fill: "forwards"
+      });
+    } else {
+      this.#animation.effect.setKeyframes({ opacity: this.#motion.opacity, transform: transforms });
+      this.#animation.play();
     }
-    void feedback.offsetWidth;
-    feedback.setAttribute("data-show", "");
-    this.#feedbackTimer = setTimeout(() => {
-      feedback.removeAttribute("data-show");
-      if (feedback.matches(":popover-open")) feedback.hidePopover();
-    }, FEEDBACK_MS);
+    this.#animation.currentTime = 0;
+    this.#timerView = this.view;
+    this.#feedbackTimer = this.#timerView.setTimeout(() => this.#clearFeedback(), FEEDBACK_MS);
+  }
+  #clearFeedback() {
+    if (this.#feedbackTimer != null) this.#timerView?.clearTimeout(this.#feedbackTimer);
+    this.#feedbackTimer = void 0;
+    this.#timerView = void 0;
+    this.#animation?.cancel();
+    if (this.#feedback?.matches(":popover-open")) this.#feedback.hidePopover();
+  }
+  adoptedCallback() {
+    this.#animation?.cancel();
+    this.#animation = void 0;
+    this.#motion = void 0;
+    this.#reconnectOrigin = void 0;
+    this.#connectedDocument = void 0;
   }
   disconnectedCallback() {
-    clearTimeout(this.#feedbackTimer);
-    pointerOrigins.delete(this);
+    this.#generation++;
+    this.#clearFeedback();
+    const pending = this.#reconnectOrigin = { doc: this.#connectedDocument, origin: this.#delegation?.origins.get(this) };
+    queueMicrotask(() => {
+      if (this.#reconnectOrigin === pending) this.#reconnectOrigin = void 0;
+    });
+    this.#delegation?.origins.delete(this);
+    this.#delegation?.readers.delete(this);
+    if (this.#delegation?.readers.size === 0) this.#delegation.dispose();
+    this.#delegation = void 0;
     this.removeEventListener("copydone", this.#onCopyDone);
   }
 }

package/dist/elements/a-dialog.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: light-dark( color-mix(in oklch, black 9%, transparent), color-mix(in oklch, white 14%, transparent) );--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: light-dark( color-mix(in oklch, black 42%, transparent), color-mix(in oklch, black 62%, transparent) );display:contents}a-dialog[round]{--dialog-round: var(--dialog-radius, 10px);@supports (border-radius: attr(probe type(<length>),1px)){--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent)}@media(forced-colors:active){a-dialog{--dialog-outline: 1px solid CanvasText;--dialog-shadow: none}}}a-dialog>p:last-child,a-dialog>:not([slot])>p:last-child{margin-block-end:0}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-dialog{--dialog-bg: var(--bg-1);--dialog-text: var(--text-2);--dialog-border: light-dark( color-mix(in oklch, black 9%, transparent), color-mix(in oklch, white 14%, transparent) );--dialog-radius: 10px;--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 10%, transparent), 0 12px 32px color-mix(in oklch, black 22%, transparent), 0 28px 64px color-mix(in oklch, black 14%, transparent);--dialog-overlay: light-dark( color-mix(in oklch, black 42%, transparent), color-mix(in oklch, black 62%, transparent) );display:contents}a-dialog::part(dialog){--_dur: .2s;--_r: var(--dialog-round, var(--dialog-radius, 10px));position:fixed;box-sizing:border-box;padding:0;border:var(--dialog-outline, none);max-width:calc(100vw - 2 * var(--dialog-margin, 32px));max-height:calc(100dvh - 2 * var(--dialog-margin, 32px));width:var(--dialog-width, 480px);height:var(--dialog-height, fit-content);overflow:visible;color:var(--dialog-text, inherit);background:var(--dialog-bg, #fff);border-radius:var(--_r);box-shadow:var(--dialog-shadow, inset 0 0 0 1px color-mix(in oklch, black 8%, transparent), 0 10px 38px color-mix(in oklch, black 28%, transparent));flex-direction:column}a-dialog::part(dialog):modal{display:flex}a-dialog::part(dialog):open{display:flex}a-dialog::part(dialog):focus,a-dialog::part(dialog):focus-visible{outline:none}a-dialog::part(dialog)::backdrop{--_overlay: var(--dialog-overlay, color-mix(in oklch, black 40%, transparent));background:var(--_overlay)}a-dialog{--_enter-from: scale(.97)}a-dialog[position=left]{--_enter-from: translateX(-100%)}a-dialog[position=right]{--_enter-from: translateX(100%)}a-dialog[position=top]{--_enter-from: translateY(-100%)}a-dialog[position=bottom]{--_enter-from: translateY(100%)}@media(prefers-reduced-motion:no-preference){@supports selector(a-dialog::part(dialog):open){a-dialog::part(dialog){opacity:0;transform:var(--_enter-from);transition:opacity var(--_dur) ease,transform var(--_dur) ease,overlay var(--_dur) ease allow-discrete,display var(--_dur) ease allow-discrete}a-dialog::part(dialog):open{opacity:1;transform:none}@starting-style{a-dialog::part(dialog):open{opacity:0;transform:var(--_enter-from)}}}@supports selector(a-dialog::part(dialog):modal::backdrop){a-dialog::part(dialog)::backdrop{background:transparent;transition:background var(--_dur) ease,overlay var(--_dur) ease allow-discrete,display var(--_dur) ease allow-discrete}a-dialog::part(dialog):modal::backdrop{background:var(--_overlay)}@starting-style{a-dialog::part(dialog):modal::backdrop{background:transparent}}}}a-dialog[position=left]::part(dialog),a-dialog[position=right]::part(dialog){width:var(--dialog-width, 380px);max-width:calc(100vw - var(--dialog-margin, 32px));height:100dvh;max-height:100dvh;border-radius:0}a-dialog[position=left]::part(dialog){margin:0 auto 0 0}a-dialog[position=right]::part(dialog){margin:0 0 0 auto}a-dialog[position=top]::part(dialog),a-dialog[position=bottom]::part(dialog){width:100vw;max-width:100vw;height:var(--dialog-height, fit-content);max-height:calc(100dvh - var(--dialog-margin, 32px));border-radius:0}a-dialog[position=top]::part(dialog){margin:0 auto auto}a-dialog[position=bottom]::part(dialog){margin:auto auto 0}a-dialog[position=fullscreen]::part(dialog){width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}a-dialog[round]::part(dialog){border-radius:var(--_r)}a-dialog[round=top]::part(dialog){border-radius:var(--_r) var(--_r) 0 0}a-dialog[round=bottom]::part(dialog){border-radius:0 0 var(--_r) var(--_r)}a-dialog[round=left]::part(dialog){border-radius:var(--_r) 0 0 var(--_r)}a-dialog[round=right]::part(dialog){border-radius:0 var(--_r) var(--_r) 0}a-dialog::part(header){display:none;flex:0 0 auto;padding:var(--dialog-header-padding, 18px 20px 8px);overflow:clip;overflow-wrap:anywhere;font-size:17px;font-weight:560;line-height:24px}a-dialog:state(has-header)::part(header){display:block}a-dialog:has(>[slot=close])::part(header){padding-inline-end:52px}a-dialog::part(body){display:block;flex:1 1 auto;min-height:0;overflow:auto;padding:var(--dialog-body-padding, 8px 20px 12px)}a-dialog:has(>[slot=close]):not(:state(has-header))::part(body){padding-inline-end:52px}a-dialog::part(footer){display:none;flex:0 0 auto;padding:var(--dialog-footer-padding, 8px 20px 18px)}a-dialog:state(has-footer)::part(footer){display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}a-dialog::part(close){display:block;position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:1}a-dialog>a-dialog-close[slot=close],a-dialog>a-dialog-footer[slot=footer]{display:contents}a-dialog[round]{--dialog-round: var(--dialog-radius, 10px);@supports (border-radius: attr(probe type(<length>),1px)){--dialog-round: attr(round type(<length>), var(--dialog-radius, 10px))}}a-dialog:not(:defined){display:none}.dark a-dialog{--dialog-shadow: inset 0 0 0 1px var(--dialog-border), 0 1px 3px color-mix(in oklch, black 40%, transparent), 0 12px 32px color-mix(in oklch, black 55%, transparent), 0 28px 64px color-mix(in oklch, black 40%, transparent)}@media(forced-colors:active){a-dialog{--dialog-outline: 1px solid CanvasText;--dialog-shadow: none}}}a-dialog>p:last-child,a-dialog>:not([slot])>p:last-child{margin-block-end:0}

package/dist/elements/a-dialog.d.ts

@@ -5,8 +5,8 @@ export declare class ADialogElement extends HTMLElementBase {
     static observedAttributes: string[];
     private dialog;
     private headerSlot;
+    private bodySlot;
     private footerSlot;
-    private closeSlot;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;