@antadesign/anta 0.3.16 → 0.3.17

package/dist/elements/a-copy.js

@@ -4,6 +4,7 @@ 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();
 function copyChild(host) {
   return host?.querySelector(":scope > a-copy") ?? null;
 }
@@ -12,13 +13,20 @@ function hostBlocked(host) {
 }
 function installCopyDelegation(doc) {
   if (!doc || doc.hasCopyDelegation) return;
-  const preRequest = (target) => {
+  const preRequest = (target, origin) => {
     const host = target?.closest?.(ANY_HOST);
     if (!host || hostBlocked(host)) return;
     const el = copyChild(host);
-    if (el) emitCopyRequest(el);
+    if (!el) return;
+    if (origin) pointerOrigins.set(el, origin);
+    else pointerOrigins.delete(el);
+    emitCopyRequest(el);
   };
-  doc.addEventListener("pointerdown", (e) => preRequest(e.target), true);
+  doc.addEventListener(
+    "pointerdown",
+    (e) => preRequest(e.target, { x: e.clientX, y: e.clientY }),
+    true
+  );
   doc.addEventListener(
     "keydown",
     (e) => {
@@ -32,7 +40,12 @@ function installCopyDelegation(doc) {
     (e) => {
       const host = e.target?.closest?.(BUTTON_HOST);
       if (!host || hostBlocked(host)) return;
-      copyChild(host)?.activate();
+      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
   );
@@ -47,131 +60,112 @@ function installCopyDelegation(doc) {
   );
   doc.hasCopyDelegation = true;
 }
-const GHOST_MS = 650;
-const GHOST_TEXT_PROPERTIES = [
-  "padding",
-  "font-family",
-  "font-size",
-  "font-style",
-  "font-weight",
-  "font-stretch",
-  "font-variation-settings",
-  "font-feature-settings",
-  "line-height",
-  "letter-spacing",
-  "word-spacing",
-  "white-space",
-  "text-wrap",
-  "overflow-wrap",
-  "word-break",
-  "line-break",
-  "hyphens",
-  "text-align",
-  "text-indent",
-  "text-transform",
-  "text-decoration",
-  "text-decoration-color",
-  "text-decoration-style",
-  "text-decoration-thickness",
-  "text-underline-offset",
-  "direction",
-  "writing-mode"
-];
-function ghostSource(host) {
-  const labels = host.querySelectorAll(":scope > a-button-label");
-  return labels.length === 1 ? labels[0] : host;
-}
+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;
+      transform: translate(var(--_feedback-x), calc(-100% - 10px));
+    }
+    .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), calc(-100% - 10px)); }
+      to { opacity: 0; transform: translate(var(--_feedback-x), calc(-100% - 1.5em)); }
+    }
+  `;
+  const feedback = document.createElement("div");
+  feedback.className = "feedback";
+  feedback.part.add("feedback");
+  feedback.setAttribute("popover", "manual");
+  feedback.setAttribute("role", "status");
+  const icon = document.createElement("span");
+  icon.setAttribute("aria-hidden", "true");
+  icon.textContent = "\u2713";
+  const label = document.createElement("span");
+  label.className = "label";
+  feedback.append(icon, label);
+  template.content.append(style, feedback);
+  return template;
+})();
 class ACopyElement extends HTMLElementBase {
-  #ghost;
-  #ghostTimer;
+  #feedback;
+  #feedbackLabel;
+  #feedbackTimer;
   connectedCallback() {
     installCopyDelegation(this.doc);
     this.addEventListener("copydone", this.#onCopyDone);
   }
   /** Run the copy for the activated host. Called from the delegated click /
-   *  menuselect handlers; the ghost (if any) follows on `copydone`. */
+   * menuselect handlers; the confirmation follows a successful `copydone`. */
   activate() {
     runCopy(this);
   }
   #onCopyDone = (e) => {
+    const origin = pointerOrigins.get(this);
+    pointerOrigins.delete(this);
     if (!this.hasAttribute("toast")) return;
     if (!e.detail?.ok) return;
     const host = this.closest(ANY_HOST);
-    if (host) this.#showGhost(host);
+    if (host) this.#showFeedback(host, origin);
   };
   #buildShadow() {
+    if (!COPY_FEEDBACK_TEMPLATE) return;
     const root = this.attachShadow({ mode: "open" });
-    root.innerHTML = `<style>
-  .ghost {
-    position: fixed;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    inset: auto;
-    background: none;
-    overflow: visible;
-    pointer-events: none;
-    display: block;
-    box-sizing: border-box;
-    font: inherit;
-    color: inherit;
-    white-space: normal;
-  }
-  .ghost:not(:popover-open) { display: none; }
-  .ghost[data-show] { animation: a-copy-rise ${GHOST_MS - 50}ms ease-out forwards; }
-  @keyframes a-copy-rise {
-    from { opacity: 1; transform: translateY(0); }
-    to { opacity: 0; transform: translateY(-1.5em); }
-  }
-</style><div class="ghost" part="ghost" popover="manual"></div>`;
-    this.#ghost = root.querySelector(".ghost");
+    root.append(COPY_FEEDBACK_TEMPLATE.content.cloneNode(true));
+    this.#feedback = root.querySelector(".feedback");
+    this.#feedbackLabel = root.querySelector(".label");
   }
-  #showGhost(host) {
-    if (!this.#ghost) this.#buildShadow();
-    const ghost = this.#ghost;
-    if (!ghost || typeof ghost.showPopover !== "function") return;
-    const source = ghostSource(host);
-    const text = (source.textContent ?? "").trim();
-    if (!text) return;
-    const r = source.getBoundingClientRect();
-    const style = source.ownerDocument.defaultView?.getComputedStyle(source);
-    ghost.textContent = text;
-    if (style) {
-      for (const property of GHOST_TEXT_PROPERTIES) {
-        ghost.style.setProperty(property, style.getPropertyValue(property));
-      }
-    }
-    ghost.style.left = `${r.left}px`;
-    ghost.style.top = `${r.top}px`;
-    ghost.style.width = `${r.width}px`;
-    ghost.style.height = `${r.height}px`;
-    clearTimeout(this.#ghostTimer);
-    ghost.removeAttribute("data-show");
-    if (ghost.matches(":popover-open")) {
-      try {
-        ghost.hidePopover();
-      } catch {
-      }
-    }
-    try {
-      ghost.showPopover();
-    } catch {
-      return;
+  #showFeedback(host, origin) {
+    if (!this.#feedback) this.#buildShadow();
+    const feedback = this.#feedback;
+    const label = this.#feedbackLabel;
+    if (!feedback || !label) return;
+    label.textContent = this.getAttribute("copied-label") ?? "Copied";
+    if (origin) {
+      feedback.style.left = `${origin.x}px`;
+      feedback.style.top = `${origin.y}px`;
+      feedback.style.setProperty("--_feedback-x", "8px");
+    } 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");
     }
-    void ghost.offsetWidth;
-    ghost.setAttribute("data-show", "");
-    this.#ghostTimer = setTimeout(() => {
-      ghost.removeAttribute("data-show");
-      if (ghost.matches(":popover-open")) {
-        try {
-          ghost.hidePopover();
-        } catch {
-        }
-      }
-    }, GHOST_MS);
+    clearTimeout(this.#feedbackTimer);
+    feedback.removeAttribute("data-show");
+    if (feedback.matches(":popover-open")) feedback.hidePopover();
+    feedback.showPopover();
+    void feedback.offsetWidth;
+    feedback.setAttribute("data-show", "");
+    this.#feedbackTimer = setTimeout(() => {
+      feedback.removeAttribute("data-show");
+      if (feedback.matches(":popover-open")) feedback.hidePopover();
+    }, FEEDBACK_MS);
   }
   disconnectedCallback() {
-    clearTimeout(this.#ghostTimer);
+    clearTimeout(this.#feedbackTimer);
+    pointerOrigins.delete(this);
     this.removeEventListener("copydone", this.#onCopyDone);
   }
 }

package/dist/elements/a-input-time.css

@@ -1 +1 @@
-@layer anta{a-input-time:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input-time:not(:defined)>[slot=leading],a-input-time:not(:defined)>[slot=trailing],a-input-time:not(:defined)>[slot=clear],a-input-time:not(:defined)>[slot=hint]{display:none!important}a-input-time:not(:defined)>[slot=label]{display:block;color:var(--input-time-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input-time[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input-time[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input-time:not(:defined):after{content:"\2013\2013:\2013\2013";display:block;min-height:28px;line-height:28px;padding-inline:8px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-time-border);color:var(--input-time-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap}a-input-time[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input-time[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}@media(forced-colors:active){a-input-time:not(:defined):after{border:1px solid ButtonBorder}}a-input-time[round]:not(:defined):after{border-radius:var(--input-time-round, 999px)}a-input-time{transition:opacity .28s ease-out 40ms}a-input-time:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time{transition:none}}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-text: var(--text-1);--input-time-label: var(--text-3);--input-time-placeholder: var(--text-3);--input-time-adornment: var(--text-3);--input-time-hint: var(--text-3);--input-time-seg-focus-bg: color-mix(in oklch, var(--focus-ring) 20%, transparent);--input-time-seg-focus-text: var(--text-1);width:fit-content;max-width:100%}a-input-time[round]{--input-time-round: attr(round type(<length>), 999px)}a-input-time[size=small] a-icon{--icon-size: 14px}a-input-time[size=large] a-icon{--icon-size: 18px}a-input-time[tone]:not([tone=""]){--input-time-tone-source: attr(tone type(<color>), var(--border-2));--input-time-border: oklch(from var(--input-time-tone-source) .7 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h);.dark &{--input-time-border: oklch(from var(--input-time-tone-source) .5 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h)}}a-input-time[status=critical]{--input-time-tone-source: var(--anta-seed-critical);--input-time-bg: var(--bg-2-critical);--input-time-hint: var(--text-2-critical)}a-input-time[status=warning]{--input-time-tone-source: var(--anta-seed-warning);--input-time-bg: var(--bg-2-warning);--input-time-hint: var(--text-2-warning)}a-input-time[status=success]{--input-time-tone-source: var(--anta-seed-success);--input-time-bg: var(--bg-2-success);--input-time-hint: var(--text-2-success)}a-input-time[status=info]{--input-time-tone-source: var(--anta-seed-info);--input-time-bg: var(--bg-2-info);--input-time-hint: var(--text-2-info)}a-input-time[status=brand]{--input-time-tone-source: var(--anta-seed-brand);--input-time-bg: var(--bg-2-brand);--input-time-hint: var(--text-2-brand)}a-input-time[status]{--input-time-border: oklch(from var(--input-time-tone-source) .58 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .58 c h)}.dark a-input-time[status]{--input-time-border: oklch(from var(--input-time-tone-source) .52 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .52 c h)}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}.dark a-input-time{--input-time-seg-focus-bg: color-mix(in oklch, var(--focus-ring) 30%, transparent)}}
+@layer anta{a-input-time:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input-time:not(:defined)>[slot=leading],a-input-time:not(:defined)>[slot=trailing],a-input-time:not(:defined)>[slot=clear],a-input-time:not(:defined)>[slot=hint]{display:none!important}a-input-time:not(:defined)>[slot=label]{display:block;color:var(--input-time-label);font-family:var(--sans-serif);font-size:var(--input-time-font-size);line-height:var(--input-time-line-height);font-weight:500}a-input-time:not(:defined):after{content:"\2013\2013:\2013\2013";display:block;min-height:var(--input-time-field-height);line-height:var(--input-time-field-height);padding-inline:8px;border-radius:var(--input-time-field-radius);box-shadow:inset 0 0 0 .5px var(--input-time-border);color:var(--input-time-placeholder);font-family:var(--sans-serif);font-size:var(--input-time-font-size);font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap}@media(forced-colors:active){a-input-time:not(:defined):after{border:1px solid ButtonBorder}}a-input-time{transition:opacity .28s ease-out 40ms}a-input-time:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input-time{transition:none}}a-input-time{--input-time-bg: var(--bg-1);--input-time-border: var(--border-2);--input-time-border-hover: var(--border-1);--input-time-text: var(--text-1);--input-time-label: var(--text-3);--input-time-placeholder: var(--text-3);--input-time-adornment: var(--text-3);--input-time-hint: var(--text-3);--input-time-period-color: var(--text-3);--input-time-font-size: 15px;--input-time-line-height: 20px;--input-time-field-height: 28px;--input-time-field-radius: 4px;width:fit-content;max-width:100%}a-input-time:has(>[slot=label])::part(label){display:block}a-input-time:has(>[slot=leading])::part(leading){display:flex;align-items:center;flex-shrink:0;margin-inline-start:7px}a-input-time:has(>[slot=leading])::part(segments){padding-inline-start:4px}a-input-time:has(>[slot=trailing])::part(trailing){display:flex;align-items:center;gap:2px;flex-shrink:0;color:var(--input-time-adornment);font-size:var(--input-time-font-size)}a-input-time:has(>[slot=hint])::part(hint){display:flex}a-input-time[size=small]{--input-time-font-size: 13px;--input-time-line-height: 16px;--input-time-field-height: 24px}a-input-time[size=large]{--input-time-font-size: 17px;--input-time-line-height: 22px;--input-time-field-height: 32px}a-input-time[round]{--input-time-round: attr(round type(<length>), 999px);--input-time-field-radius: var(--input-time-round, 999px)}a-input-time[size=small] a-icon{--icon-size: 14px}a-input-time[size=large] a-icon{--icon-size: 18px}a-input-time[tone]:not([tone=""]){--input-time-tone-source: attr(tone type(<color>), var(--border-2));--input-time-border: oklch(from var(--input-time-tone-source) .7 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h);.dark &{--input-time-border: oklch(from var(--input-time-tone-source) .5 calc(c*.8) h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .6 c h)}}a-input-time[status=critical]{--input-time-tone-source: var(--anta-seed-critical);--input-time-bg: var(--bg-2-critical);--input-time-hint: var(--text-2-critical)}a-input-time[status=warning]{--input-time-tone-source: var(--anta-seed-warning);--input-time-bg: var(--bg-2-warning);--input-time-hint: var(--text-2-warning)}a-input-time[status=success]{--input-time-tone-source: var(--anta-seed-success);--input-time-bg: var(--bg-2-success);--input-time-hint: var(--text-2-success)}a-input-time[status=info]{--input-time-tone-source: var(--anta-seed-info);--input-time-bg: var(--bg-2-info);--input-time-hint: var(--text-2-info)}a-input-time[status=brand]{--input-time-tone-source: var(--anta-seed-brand);--input-time-bg: var(--bg-2-brand);--input-time-hint: var(--text-2-brand)}a-input-time[status]{--input-time-border: oklch(from var(--input-time-tone-source) .58 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .58 c h)}.dark a-input-time[status]{--input-time-border: oklch(from var(--input-time-tone-source) .52 c h);--input-time-border-hover: oklch(from var(--input-time-tone-source) .52 c h)}a-input-time:disabled{--input-time-bg: #44374b12;--input-time-border: #44374b26;--input-time-border-hover: #44374b26;--input-time-text: var(--text-4);--input-time-label: var(--text-4);--input-time-hint: var(--text-5);cursor:not-allowed}.dark a-input-time:disabled{--input-time-bg: #e4d1ef0d;--input-time-border: #e4d1ef1f;--input-time-border-hover: #e4d1ef1f}}