@antadesign/anta 0.3.25 → 0.3.27

package/dist/elements/a-box.js

@@ -0,0 +1,584 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-box.css";
+const stores = /* @__PURE__ */ new WeakMap();
+const MODE_CLASS = /(?:^|\s)(?:dark|light)(?:\s|$)/;
+function hasModeClass(element) {
+  return element.classList.contains("dark") || element.classList.contains("light");
+}
+class BoxWindowStore {
+  constructor(view, doc) {
+    this.view = view;
+    this.doc = doc;
+    this.#dark = view.matchMedia("(prefers-color-scheme: dark)");
+    this.#finePointer = view.matchMedia("(pointer: fine)");
+    this.#coarsePointer = view.matchMedia("(pointer: coarse)");
+    this.#hover = view.matchMedia("(hover: hover)");
+    this.#reducedMotion = view.matchMedia("(prefers-reduced-motion: reduce)");
+    this.#queries = [this.#dark, this.#finePointer, this.#coarsePointer, this.#hover, this.#reducedMotion];
+    this.#device = deviceSnapshot(view.navigator);
+  }
+  #contextBoxes = /* @__PURE__ */ new Set();
+  #observedBoxes = /* @__PURE__ */ new Set();
+  #dark;
+  #finePointer;
+  #coarsePointer;
+  #hover;
+  #reducedMotion;
+  #queries;
+  #classObserver;
+  #visibility;
+  #pixelRatio;
+  #lastPixelRatio = 0;
+  #device;
+  /** Only a box with a `contextchange` listener subscribes, so a page that never
+   * reads context pays for no media listeners and no document observer. */
+  subscribeContext(box) {
+    if (this.#contextBoxes.size === 0) this.#startWatching();
+    this.#contextBoxes.add(box);
+  }
+  unsubscribeContext(box) {
+    if (!this.#contextBoxes.delete(box)) return;
+    if (this.#contextBoxes.size === 0) this.#stopWatching();
+    this.#collect();
+  }
+  /** Only a box that measures is tracked, and it measures only while on screen. */
+  observeVisibility(box) {
+    if (this.#observedBoxes.has(box)) return;
+    if (typeof this.view.IntersectionObserver === "undefined") {
+      box.visibilityDidChange(true);
+      return;
+    }
+    this.#visibility ??= new this.view.IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const box2 = entry.target;
+          if (this.#observedBoxes.has(box2)) box2.visibilityDidChange(entry.isIntersecting);
+        }
+      },
+      { root: null, rootMargin: "0px", threshold: 0 }
+    );
+    this.#observedBoxes.add(box);
+    this.#visibility.observe(box);
+  }
+  unobserveVisibility(box) {
+    if (!this.#observedBoxes.delete(box)) return;
+    this.#visibility?.unobserve(box);
+    if (this.#observedBoxes.size === 0) {
+      this.#visibility?.disconnect();
+      this.#visibility = void 0;
+    }
+    this.#collect();
+  }
+  snapshot() {
+    return {
+      globalMode: modeFromElement(this.doc.documentElement),
+      systemAppearance: this.#dark.matches ? "dark" : "light",
+      ...this.#device,
+      pointer: this.#finePointer.matches ? "fine" : this.#coarsePointer.matches ? "coarse" : "none",
+      hover: this.#hover.matches,
+      reducedMotion: this.#reducedMotion.matches,
+      devicePixelRatio: this.view.devicePixelRatio
+    };
+  }
+  /* devicePixelRatio has no change event of its own, so two signals cover it.
+     A resolution query pinned to the current value stops matching the moment
+     the ratio moves; each fire re-arms against the new value. Page zoom also
+     resizes the CSS viewport, and `resize` catches the engines and paths where
+     the query stays quiet. Both funnel through the same guard, so whichever
+     arrives first reports and the other is a no-op. */
+  #watchPixelRatio() {
+    this.#pixelRatio?.removeEventListener("change", this.#pixelRatioDidChange);
+    this.#pixelRatio = this.view.matchMedia(`(resolution: ${this.view.devicePixelRatio}dppx)`);
+    this.#pixelRatio.addEventListener("change", this.#pixelRatioDidChange, { once: true });
+    this.#lastPixelRatio = this.view.devicePixelRatio;
+  }
+  #pixelRatioDidChange = () => {
+    if (this.view.devicePixelRatio === this.#lastPixelRatio) return;
+    this.#watchPixelRatio();
+    this.#notifyAll();
+  };
+  #startWatching() {
+    for (const query of this.#queries) query.addEventListener("change", this.#notifyAll);
+    this.#watchPixelRatio();
+    this.view.addEventListener("resize", this.#pixelRatioDidChange, { passive: true });
+    const root = this.doc.documentElement;
+    if (!root) return;
+    this.#classObserver = new this.view.MutationObserver(this.#handleClassChange);
+    this.#classObserver.observe(root, {
+      subtree: true,
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: ["class"]
+    });
+  }
+  #stopWatching() {
+    for (const query of this.#queries) query.removeEventListener("change", this.#notifyAll);
+    this.#pixelRatio?.removeEventListener("change", this.#pixelRatioDidChange);
+    this.#pixelRatio = void 0;
+    this.view.removeEventListener("resize", this.#pixelRatioDidChange);
+    this.#classObserver?.disconnect();
+    this.#classObserver = void 0;
+  }
+  /* Only the store the map currently points at may remove that entry. A box
+     that was connected while its store went empty keeps a direct reference to
+     it, so an evicted store can be re-subscribed and later empty again — by
+     which time the map holds a live store with its own document observer.
+     Deleting blind would drop that live store and leave its observer running
+     while the next connect built a second one. */
+  #collect() {
+    if (this.#contextBoxes.size > 0 || this.#observedBoxes.size > 0) return;
+    if (stores.get(this.view) === this) stores.delete(this.view);
+  }
+  /* Only `dark` and `light` change what a box reports. Every other class toggle
+     on the page — a route class, a scroll lock, a theme-unrelated modifier —
+     is dropped here, before the ancestor scan runs. */
+  #handleClassChange = (records) => {
+    const affected = /* @__PURE__ */ new Set();
+    for (const record of records) {
+      const target = record.target;
+      if (!(target instanceof this.view.Element)) continue;
+      if (!hasModeClass(target) && !MODE_CLASS.test(record.oldValue ?? "")) continue;
+      for (const box of this.#contextBoxes) {
+        if (target === box || target.contains(box)) affected.add(box);
+      }
+    }
+    for (const box of affected) box.contextStoreDidChange();
+  };
+  #notifyAll = () => {
+    for (const box of this.#contextBoxes) box.contextStoreDidChange();
+  };
+}
+function windowStore(view, doc) {
+  let store = stores.get(view);
+  if (!store) {
+    store = new BoxWindowStore(view, doc);
+    stores.set(view, store);
+  }
+  return store;
+}
+function modeFromElement(element) {
+  return element?.classList.contains("dark") ? "dark" : "light";
+}
+function localMode(element) {
+  for (let current = element; current; current = current.parentElement) {
+    if (current.classList.contains("dark")) return "dark";
+    if (current.classList.contains("light")) return "light";
+  }
+  return modeFromElement(element.ownerDocument.documentElement);
+}
+const BROWSER_VERSION = {
+  edge: /edg[ea]?\/(\d+)/,
+  opera: /opr\/(\d+)/,
+  firefox: /(?:firefox|fxios)\/(\d+)/,
+  chrome: /(?:chrome|crios)\/(\d+)/,
+  safari: /version\/(\d+)/,
+  unknown: /(?!)/
+};
+const OS_VERSION = {
+  windows: /windows nt ([\d.]+)/,
+  macos: /mac os x (\d+[._]\d+(?:[._]\d+)?)/,
+  ios: /os (\d+[._]\d+(?:[._]\d+)?)/,
+  android: /android (\d+(?:\.\d+)*)/
+};
+function deviceSnapshot(navigator) {
+  const uaData = navigator;
+  const ua = (navigator.userAgent ?? "").toLowerCase();
+  const source = `${uaData.userAgentData?.platform ?? ""} ${navigator.platform ?? ""} ${ua}`.toLowerCase();
+  const os = /android/.test(source) ? "android" : /iphone|ipad|ipod|ios/.test(source) ? "ios" : /mac/.test(source) ? "macos" : /win/.test(source) ? "windows" : /linux/.test(source) ? "linux" : "unknown";
+  const browser = /edg[ea]?\//.test(ua) ? "edge" : /opr\/|opera/.test(ua) ? "opera" : /firefox\/|fxios\//.test(ua) ? "firefox" : /chrome\/|crios\//.test(ua) ? "chrome" : /safari\//.test(ua) ? "safari" : "unknown";
+  const brands = uaData.userAgentData?.brands ?? [];
+  const branded = brands.filter((b) => !/not.a.brand/i.test(b.brand)).sort((a, b) => Number(/chromium/i.test(a.brand)) - Number(/chromium/i.test(b.brand)))[0];
+  return {
+    os,
+    osVersion: parseInt(ua.match(OS_VERSION[os] ?? /(?!)/)?.[1] ?? "", 10) || 0,
+    browser,
+    browserVersion: Number(branded?.version ?? ua.match(BROWSER_VERSION[browser])?.[1]) || 0,
+    mobile: uaData.userAgentData?.mobile ?? /android|mobi|iphone|ipad|ipod/.test(source)
+  };
+}
+function equal(a, b) {
+  if (a === b) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+  const left = a;
+  const right = b;
+  const keys = Object.keys(left);
+  return keys.length === Object.keys(right).length && keys.every((key) => left[key] === right[key]);
+}
+function same(a, b) {
+  return a !== void 0 && Object.keys(b).every((key) => equal(a[key], b[key]));
+}
+function changed(previous, current) {
+  if (!previous) return { ...current };
+  return Object.fromEntries(
+    Object.entries(current).filter(([key, value]) => !equal(previous[key], value))
+  );
+}
+function px(value) {
+  return parseFloat(value) || 0;
+}
+function readInset(styles) {
+  return {
+    paddingTop: px(styles.paddingTop),
+    paddingRight: px(styles.paddingRight),
+    paddingBottom: px(styles.paddingBottom),
+    paddingLeft: px(styles.paddingLeft),
+    borderTop: px(styles.borderTopWidth),
+    borderRight: px(styles.borderRightWidth),
+    borderBottom: px(styles.borderBottomWidth),
+    borderLeft: px(styles.borderLeftWidth)
+  };
+}
+function spacing(value) {
+  return value === "normal" ? "0px" : value;
+}
+function readFont(styles) {
+  const lineHeightPx = parseFloat(styles.lineHeight);
+  const lineHeight = Number.isFinite(lineHeightPx) ? lineHeightPx : null;
+  const style = styles.fontStyle && styles.fontStyle !== "normal" ? `${styles.fontStyle} ` : "";
+  const weight = styles.fontWeight && styles.fontWeight !== "400" ? `${styles.fontWeight} ` : "";
+  const height = lineHeight != null ? `/${lineHeight}px` : "";
+  return {
+    shorthand: `${style}${weight}${styles.fontSize}${height} ${styles.fontFamily}`,
+    family: styles.fontFamily,
+    size: parseFloat(styles.fontSize) || 0,
+    weight: parseFloat(styles.fontWeight) || 400,
+    style: styles.fontStyle,
+    stretch: styles.fontStretch,
+    lineHeight,
+    letterSpacing: spacing(styles.letterSpacing),
+    wordSpacing: spacing(styles.wordSpacing),
+    color: styles.color,
+    featureSettings: styles.fontFeatureSettings,
+    variationSettings: styles.fontVariationSettings,
+    kerning: styles.fontKerning,
+    variantCaps: styles.fontVariantCaps,
+    textRendering: styles.textRendering,
+    direction: styles.direction
+  };
+}
+function rounded(value) {
+  return Math.round(value * 100) / 100;
+}
+class ABoxElement extends HTMLElementBase {
+  static observedAttributes = ["fade", "observe"];
+  #internals = this.attachInternals?.();
+  #store;
+  #resizeObserver;
+  #contentObserver;
+  #hostObserver;
+  #frame;
+  #contextQueued = false;
+  #measurement;
+  #context;
+  #measuring = false;
+  #clips = false;
+  #observedChildren = /* @__PURE__ */ new Set();
+  #reportingContext = false;
+  /* Undefined until the visibility observer first reports. `fade` is the one
+     thing that cannot wait for it — the mask is painted from the CSS states, so
+     a box that deferred its first measurement would flash unmasked. Everything
+     else stays idle until it is known to be on screen, which keeps a page of
+     hundreds of boxes from measuring every one of them once at connect only to
+     tear it all down a frame later. */
+  #visible;
+  #initialMeasurement = false;
+  #initialContext = false;
+  connectedCallback() {
+    this.#store = windowStore(this.view, this.doc);
+    this.#sync();
+  }
+  disconnectedCallback() {
+    this.#stopMeasuring();
+    this.#stopReportingContext();
+    this.#store?.unobserveVisibility(this);
+    this.#store = void 0;
+    this.#visible = void 0;
+  }
+  /* Guarded on the store, not on `isConnected`: upgrading an element that is
+     already in the document runs this for every present attribute *before*
+     connectedCallback, when there is no store yet. Syncing then would flip the
+     started flags while `this.#store?.subscribeContext` silently did nothing,
+     and the later connect would see the flags already set and skip it. */
+  attributeChangedCallback(name) {
+    if (!this.#store) return;
+    if (name === "fade" || name === "observe") this.#sync();
+  }
+  /** A fresh measurement snapshot. For notifications, prefer `measurechange`:
+   * it batches browser observers and includes the field-level delta. */
+  get measurement() {
+    return this.#readMeasurement();
+  }
+  /** A fresh context snapshot. For changes, prefer `contextchange`. */
+  get context() {
+    return this.#readContext();
+  }
+  /** Allows a nested `Tooltip truncatedOnly` to use Box's clipping decision. */
+  get isTruncated() {
+    const measurement = this.#readMeasurement();
+    return measurement.clippedX || measurement.clippedY;
+  }
+  /** Called by the per-window context cache. It is intentionally not a JSX prop. */
+  contextStoreDidChange() {
+    this.#queueContext();
+    this.#queueMeasurement();
+  }
+  /** Called by the per-window visibility observer. Also not a JSX prop. */
+  visibilityDidChange(visible) {
+    if (this.#visible === visible) return;
+    this.#visible = visible;
+    this.#sync();
+  }
+  /* Nothing observes until something wants the answer, and a box scrolled off
+     screen wants nothing until it comes back. Context reporting ignores
+     visibility: a mode change has to reach an off-screen box too, and the store
+     it subscribes to is already refcounted down to nothing. */
+  #sync() {
+    const observe = this.getAttribute("observe");
+    const both = observe === "" || observe === "all";
+    const wantsMeasurement = this.hasAttribute("fade") || both || observe === "size";
+    const wantsContext = both || observe === "context";
+    const measure = this.isConnected && wantsMeasurement && (this.#visible ?? this.hasAttribute("fade"));
+    if (measure) this.#startMeasuring();
+    else this.#stopMeasuring();
+    if (this.isConnected && wantsMeasurement) this.#store?.observeVisibility(this);
+    else this.#store?.unobserveVisibility(this);
+    if (this.isConnected && wantsContext) this.#startReportingContext();
+    else this.#stopReportingContext();
+    this.#syncHostObserver();
+  }
+  /* The host's own attributes need their own observer: one observer cannot take
+     `subtree: true` for childList and `subtree: false` for attributes on the
+     same target. A class on this box can flip it to `overflow: auto` without
+     changing its size, and can restyle its text, so both halves want to know. */
+  #syncHostObserver() {
+    const wanted = this.#measuring || this.#reportingContext;
+    if (wanted === Boolean(this.#hostObserver)) return;
+    if (wanted) {
+      this.#hostObserver = new this.view.MutationObserver(this.#hostDidChange);
+      this.#hostObserver.observe(this, { attributes: true });
+    } else {
+      this.#hostObserver?.disconnect();
+      this.#hostObserver = void 0;
+    }
+  }
+  #hostDidChange = () => {
+    this.#queueMeasurement();
+    this.#queueContext();
+  };
+  #startMeasuring() {
+    if (this.#measuring) return;
+    this.#measuring = true;
+    this.#resizeObserver = new this.view.ResizeObserver(this.#queueMeasurement);
+    this.#resizeObserver.observe(this);
+    this.#contentObserver = new this.view.MutationObserver(this.#queueMeasurement);
+    this.#contentObserver.observe(this, {
+      subtree: true,
+      childList: true,
+      characterData: true
+    });
+    this.addEventListener("input", this.#queueMeasurement);
+    this.addEventListener("scroll", this.#queueMeasurement, { passive: true });
+    this.addEventListener("load", this.#queueMeasurement, true);
+    this.doc.fonts?.addEventListener("loadingdone", this.#queueMeasurement);
+    this.#measurement = this.#readMeasurement();
+    this.#setMeasurementStates(this.#measurement);
+    this.#syncChildObservation();
+    this.#initialMeasurement = true;
+    this.#queueMeasurement();
+  }
+  /* A clipping box's scroll size can move because a child's own size moved for
+     a reason nothing else here can see: a late upgrade attaching a shadow root,
+     or a child resizing from its own internal state (an Expander opening).
+     Neither is a light-DOM mutation, and a fixed-size box never resizes, so the
+     direct children go into the same ResizeObserver. A box with visible
+     overflow hides nothing — a growing child just grows the box, which its own
+     entry already reports — so it observes no children at all. */
+  #syncChildObservation() {
+    if (!this.#clips || !this.#measuring) {
+      for (const child of this.#observedChildren) this.#resizeObserver?.unobserve(child);
+      this.#observedChildren.clear();
+      return;
+    }
+    const current = new Set(this.children);
+    for (const child of this.#observedChildren) {
+      if (current.has(child)) continue;
+      this.#resizeObserver?.unobserve(child);
+      this.#observedChildren.delete(child);
+    }
+    for (const child of current) {
+      if (this.#observedChildren.has(child)) continue;
+      this.#resizeObserver?.observe(child);
+      this.#observedChildren.add(child);
+    }
+  }
+  #stopMeasuring() {
+    if (!this.#measuring) return;
+    this.#measuring = false;
+    this.#observedChildren.clear();
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = void 0;
+    this.#contentObserver?.disconnect();
+    this.#contentObserver = void 0;
+    if (this.#frame != null) this.view.cancelAnimationFrame(this.#frame);
+    this.#frame = void 0;
+    this.removeEventListener("input", this.#queueMeasurement);
+    this.removeEventListener("scroll", this.#queueMeasurement);
+    this.removeEventListener("load", this.#queueMeasurement, true);
+    this.doc.fonts?.removeEventListener("loadingdone", this.#queueMeasurement);
+  }
+  #startReportingContext() {
+    if (this.#reportingContext) return;
+    this.#reportingContext = true;
+    this.#store?.subscribeContext(this);
+    this.addEventListener("focusin", this.#queueContext);
+    this.addEventListener("focusout", this.#handleFocusOut);
+    this.doc.fonts?.addEventListener("loadingdone", this.#queueContext);
+    this.#initialContext = true;
+    this.#queueContext();
+  }
+  #stopReportingContext() {
+    if (!this.#reportingContext) return;
+    this.#reportingContext = false;
+    this.#store?.unsubscribeContext(this);
+    this.removeEventListener("focusin", this.#queueContext);
+    this.removeEventListener("focusout", this.#handleFocusOut);
+    this.doc.fonts?.removeEventListener("loadingdone", this.#queueContext);
+  }
+  /* Tabbing between two descendants fires focusout then focusin, and WebKit runs
+     a microtask checkpoint between the two — long enough to report a
+     focusWithin: false that was never true for the reader. `relatedTarget` is
+     where focus is heading (retargeted to the host for a shadow child), so a
+     move that stays inside is not a change at all. */
+  #handleFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (next instanceof this.view.Node && this.contains(next)) return;
+    this.#queueContext();
+  };
+  #queueMeasurement = () => {
+    if (!this.#measuring || this.#frame != null) return;
+    this.#frame = this.view.requestAnimationFrame(() => {
+      this.#frame = void 0;
+      if (!this.#measuring) return;
+      const initial = this.#initialMeasurement;
+      this.#initialMeasurement = false;
+      this.#reportMeasurement(initial);
+    });
+  };
+  #queueContext = () => {
+    if (!this.#reportingContext || this.#contextQueued) return;
+    this.#contextQueued = true;
+    queueMicrotask(() => {
+      this.#contextQueued = false;
+      if (!this.#reportingContext) return;
+      const initial = this.#initialContext;
+      this.#initialContext = false;
+      this.#reportContext(initial);
+    });
+  };
+  #readMeasurement() {
+    const rect = this.getBoundingClientRect();
+    const clientWidth = this.clientWidth;
+    const clientHeight = this.clientHeight;
+    const scrollWidth = this.scrollWidth;
+    const scrollHeight = this.scrollHeight;
+    const hasBox = clientWidth > 0 || clientHeight > 0;
+    const overflowX = hasBox && scrollWidth > clientWidth + 1;
+    const overflowY = hasBox && scrollHeight > clientHeight + 1;
+    const styles = this.view.getComputedStyle(this);
+    this.#clips = styles.overflowX !== "visible" || styles.overflowY !== "visible";
+    const clippedX = overflowX && styles.overflowX !== "visible";
+    const clippedY = overflowY && styles.overflowY !== "visible";
+    const scrollableX = overflowX && (styles.overflowX === "auto" || styles.overflowX === "scroll");
+    const scrollableY = overflowY && (styles.overflowY === "auto" || styles.overflowY === "scroll");
+    const scrollLeft = Math.round(this.scrollLeft);
+    const scrollTop = Math.round(this.scrollTop);
+    const fromStartX = Math.max(0, styles.direction === "rtl" ? -scrollLeft : scrollLeft);
+    const fromStartY = Math.max(0, scrollTop);
+    return {
+      width: rounded(rect.width),
+      height: rounded(rect.height),
+      clientWidth,
+      clientHeight,
+      scrollWidth,
+      scrollHeight,
+      overflowX,
+      overflowY,
+      clippedX,
+      clippedY,
+      scrollableX,
+      scrollableY,
+      scrollLeft,
+      scrollTop,
+      hiddenStartX: clippedX && fromStartX > 1,
+      hiddenEndX: clippedX && fromStartX < scrollWidth - clientWidth - 1,
+      hiddenStartY: clippedY && fromStartY > 1,
+      hiddenEndY: clippedY && fromStartY < scrollHeight - clientHeight - 1
+    };
+  }
+  #readContext() {
+    const shared = (this.#store ?? windowStore(this.view, this.doc)).snapshot();
+    const styles = this.view.getComputedStyle(this);
+    return {
+      ...shared,
+      mode: localMode(this),
+      focusWithin: this.matches(":focus-within"),
+      font: readFont(styles),
+      inset: readInset(styles),
+      backgroundColor: styles.backgroundColor
+    };
+  }
+  #reportMeasurement(initial) {
+    const current = this.#readMeasurement();
+    const previous = this.#measurement;
+    this.#measurement = current;
+    this.#setMeasurementStates(current);
+    this.#syncChildObservation();
+    if (!initial && same(previous, current)) return;
+    const detail = {
+      changed: initial ? { ...current } : changed(previous, current),
+      current
+    };
+    this.dispatchEvent(new this.view.CustomEvent("measurechange", { detail }));
+  }
+  #reportContext(initial) {
+    const current = this.#readContext();
+    const previous = this.#context;
+    this.#context = current;
+    if (!initial && same(previous, current)) return;
+    const detail = {
+      changed: initial ? { ...current } : changed(previous, current),
+      current
+    };
+    this.dispatchEvent(new this.view.CustomEvent("contextchange", { detail }));
+  }
+  /* Only measurement states exist. Everything the context reports has a native
+     CSS equivalent — `:focus-within` for focus, the `.dark` ancestor class for
+     mode, `prefers-color-scheme` / `pointer` / `hover` / `prefers-reduced-motion`
+     media queries for the rest — so `contextchange` is a JS-side event only.
+     Overflow is the one thing CSS cannot ask about, which is what these are for. */
+  #setMeasurementStates(measurement) {
+    this.#setState("overflow-x", measurement.overflowX);
+    this.#setState("overflow-y", measurement.overflowY);
+    this.#setState("clipped-x", measurement.clippedX);
+    this.#setState("clipped-y", measurement.clippedY);
+    this.#setState("scrollable-x", measurement.scrollableX);
+    this.#setState("scrollable-y", measurement.scrollableY);
+    this.#setState("hidden-start-x", measurement.hiddenStartX);
+    this.#setState("hidden-end-x", measurement.hiddenEndX);
+    this.#setState("hidden-start-y", measurement.hiddenStartY);
+    this.#setState("hidden-end-y", measurement.hiddenEndY);
+  }
+  #setState(name, active) {
+    if (active) this.#internals?.states?.add(name);
+    else this.#internals?.states?.delete(name);
+  }
+}
+function register_a_box() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-box")) customElements.define("a-box", ABoxElement);
+}
+register_a_box();
+export {
+  ABoxElement,
+  register_a_box
+};

package/dist/elements/a-button.css

@@ -1 +1 @@
-@layer anta.components{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 5px;--_src: var(--anta-seed-neutral);--_tone-pl-rest: .5;--_tone-pl-hover: .45;--_tone-pl-active: .4;--_tone-pl-c: .02;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .008;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .03;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85;--button-bg-primary-rest: oklch(from var(--_src) var(--_tone-pl-rest) var(--_tone-pl-c) h);--button-bg-primary-hover: oklch(from var(--_src) var(--_tone-pl-hover) var(--_tone-pl-c) h);--button-bg-primary-active: oklch(from var(--_src) var(--_tone-pl-active) var(--_tone-pl-c) h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-secondary-l-shift: var(--_tone-fg-shift);--button-fg-tertiary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-tertiary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-tertiary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-fg-quaternary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h / var(--_tone-quat-rest-a));--button-fg-quaternary-hover: oklch(from var(--_src) var(--_tone-quat-hover-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-secondary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-bg-secondary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-active));--_fs: 15px;--_lh: 20px;--_pb: 1px;--_radius: 4px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: attr(round type(<length>), 999px);--_radius: var(--button-round, 999px)}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .51;--_tone-pl-hover: .46;--_tone-pl-active: .41;--_tone-pl-c: .17;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .17;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}.dark a-button,.dark a[role=button][data-anta],.dark button[data-anta],.dark input[data-anta]:is([type=reset],[type=submit]){--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .015;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .015;--_tone-fg-shift: 0;--_tone-bg-l: .44;--_tone-bg-c: .01;--_tone-a-rest: .24;--_tone-a-hover: .34;--_tone-a-active: .44;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}.dark a-button[tone]:not([tone=""],[tone=neutral]),.dark a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),.dark button[data-anta][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .16;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .13;--_tone-fg-shift: 0;--_tone-bg-l: .58;--_tone-bg-c: .16;--_tone-a-rest: .215;--_tone-a-hover: .29;--_tone-a-active: .34;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:var(--_radius);text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}&[underline][underline-on-hover]{text-decoration-color:transparent;&[selected]{text-decoration-color:transparent}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg)}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;inset:0;pointer-events:none;clip-path:inset(0 round var(--_radius));background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));background-position-x:calc(0px - var(--button-loading-x-period));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:background-position;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{background-position-x:0}}
+@layer anta.components{a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){--button-primary-fg: #ffffff;--bg-primary-disabled: #ece9ec;--bg-secondary-disabled: #f6f4f6;--fg-disabled-primary: #afa9b1;--fg-disabled: #afa9b1;--button-loading-stripe: 14px;--button-loading-stripe-gap: 16px;--button-loading-period: calc( var(--button-loading-stripe) + var(--button-loading-stripe-gap) );--button-loading-angle: 125deg;--button-loading-x-period: calc( var(--button-loading-period) / cos(var(--button-loading-angle) - 90deg) );--button-loading-opacity: .15;--button-loading-blur: 5px;--_src: var(--anta-seed-neutral);--_tone-pl-rest: .5;--_tone-pl-hover: .45;--_tone-pl-active: .4;--_tone-pl-c: .02;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .008;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .03;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85;--button-bg-primary-rest: oklch(from var(--_src) var(--_tone-pl-rest) var(--_tone-pl-c) h);--button-bg-primary-hover: oklch(from var(--_src) var(--_tone-pl-hover) var(--_tone-pl-c) h);--button-bg-primary-active: oklch(from var(--_src) var(--_tone-pl-active) var(--_tone-pl-c) h);--button-fg-primary-rest: var(--button-primary-fg);--button-fg-secondary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-secondary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-fg-secondary-l-shift: var(--_tone-fg-shift);--button-fg-tertiary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h);--button-fg-tertiary-hover: oklch(from var(--_src) var(--_tone-fg-strong-l) var(--_tone-fg-c) h);--button-bg-tertiary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-tertiary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-fg-quaternary-rest: oklch(from var(--_src) var(--_tone-fg-l) var(--_tone-fg-c) h / var(--_tone-quat-rest-a));--button-fg-quaternary-hover: oklch(from var(--_src) var(--_tone-quat-hover-l) var(--_tone-fg-c) h);--button-bg-secondary-rest: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-rest));--button-bg-secondary-hover: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-hover));--button-bg-secondary-active: oklch(from var(--_src) var(--_tone-bg-l) var(--_tone-bg-c) h / var(--_tone-a-active));--_fs: 15px;--_lh: 20px;--_pb: 1px;--_radius: 4px;--button-padding-x: 9px;--button-padding-y: calc((8px - var(--_pb)) / 2);--button-timing-in: 75ms ease-in;--button-timing-active: 50ms linear;--button-timing-out: .15s ease-out;--button-loading-duration: .5s}a-button[round],a[role=button][data-anta][round],button[data-anta][round],input[data-anta]:is([type=reset],[type=submit])[round]{--button-round: 999px;--_radius: var(--button-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--button-round: attr(round type(<length>), 999px)}}a-button[tone]:not([tone=""],[tone=neutral]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),button[data-anta][tone]:not([tone=""],[tone=neutral]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .51;--_tone-pl-hover: .46;--_tone-pl-active: .41;--_tone-pl-c: .17;--_tone-fg-l: .46;--_tone-fg-strong-l: .4;--_tone-fg-c: .17;--_tone-fg-shift: .05;--_tone-bg-l: .54;--_tone-bg-c: .17;--_tone-a-rest: .1;--_tone-a-hover: .15;--_tone-a-active: .2;--_tone-quat-hover-l: .38;--_tone-quat-rest-a: .85}a-button[tone=brand],a[role=button][data-anta][tone=brand],button[data-anta][tone=brand],input[data-anta]:is([type=reset],[type=submit])[tone=brand]{--_src: var(--anta-seed-brand)}a-button[tone=info],a[role=button][data-anta][tone=info],button[data-anta][tone=info],input[data-anta]:is([type=reset],[type=submit])[tone=info]{--_src: var(--anta-seed-info)}a-button[tone=success],a[role=button][data-anta][tone=success],button[data-anta][tone=success],input[data-anta]:is([type=reset],[type=submit])[tone=success]{--_src: var(--anta-seed-success)}a-button[tone=warning],a[role=button][data-anta][tone=warning],button[data-anta][tone=warning],input[data-anta]:is([type=reset],[type=submit])[tone=warning]{--_src: var(--anta-seed-warning)}a-button[tone=critical],a[role=button][data-anta][tone=critical],button[data-anta][tone=critical],input[data-anta]:is([type=reset],[type=submit])[tone=critical]{--_src: var(--anta-seed-critical)}a-button[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a[role=button][data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),button[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_src: var(--button-tone-source, transparent);@supports (color: attr(probe type(<color>),red)){--_src: var(--button-tone-source, attr(tone type(<color>), transparent))}}.dark a-button,.dark a[role=button][data-anta],.dark button[data-anta],.dark input[data-anta]:is([type=reset],[type=submit]){--bg-primary-disabled: #272329;--bg-secondary-disabled: #1d1a1e;--fg-disabled-primary: #776e77;--fg-disabled: #635b65;--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .015;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .015;--_tone-fg-shift: 0;--_tone-bg-l: .44;--_tone-bg-c: .01;--_tone-a-rest: .24;--_tone-a-hover: .34;--_tone-a-active: .44;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}.dark a-button[tone]:not([tone=""],[tone=neutral]),.dark a[role=button][data-anta][tone]:not([tone=""],[tone=neutral]),.dark button[data-anta][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta]:is([type=reset],[type=submit])[tone]:not([tone=""],[tone=neutral]){--_tone-pl-rest: .4;--_tone-pl-hover: .44;--_tone-pl-active: .48;--_tone-pl-c: .16;--_tone-fg-l: .86;--_tone-fg-strong-l: .86;--_tone-fg-c: .13;--_tone-fg-shift: 0;--_tone-bg-l: .58;--_tone-bg-c: .16;--_tone-a-rest: .215;--_tone-a-hover: .29;--_tone-a-active: .34;--_tone-quat-hover-l: .9;--_tone-quat-rest-a: .85}button[data-anta],input[data-anta]:is([type=reset],[type=submit]){box-sizing:border-box;margin:0;appearance:none;-webkit-appearance:none;border:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){user-select:none;display:inline-flex;align-items:center;gap:.5ch;cursor:pointer;&:has(>a-copy):not(:has(>a-icon)){cursor:copy}flex-shrink:0;color:var(--button-fg);background-color:var(--button-bg);border-radius:var(--_radius);text-decoration:none;box-shadow:inset 0 0 1px color-mix(in oklch,currentColor,transparent 90%);font-size:var(--_fs);font-family:var(--sans-serif);font-weight:450;font-variation-settings:"wdth" 88,"slnt" 0,"ital" 0;font-feature-settings:"ss02","ss05","tnum";line-height:var(--_lh);letter-spacing:.05ch;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;max-width:100%;padding-inline:var(--button-padding-x);padding-block:var(--button-padding-y);min-height:28px;>a-button-label{display:inline-block;text-overflow:ellipsis;text-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;line-height:var(--_lh);padding-bottom:var(--_pb);&:has(>*){display:inline-flex;gap:.25ch}}>*{pointer-events:none}& a-icon{transition:color var(--button-timing-out)}transition:color var(--button-timing-out),background-color var(--button-timing-out);&:hover,&:focus-visible{transition:color var(--button-timing-in),background-color var(--button-timing-in);& a-icon{transition:color var(--button-timing-in)}}&:active,&[selected]{transition:color var(--button-timing-active),background-color var(--button-timing-active);& a-icon{transition:color var(--button-timing-active)}}&[disabled]{pointer-events:none;cursor:not-allowed;transition:none;& a-icon{transition:none}}&:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}&[priority=quaternary]{--button-timing-in: 0s;--button-timing-active: 0s;--button-timing-out: 0s}&[size=small]{--button-padding-x: 7px;--_fs: 13px;--_lh: 16px;--_pb: .5px;min-height:24px;& a-icon{--icon-size: 14px}}&[size=large]{--button-padding-x: 13px;--_fs: 17px;--_lh: 24px;--_pb: 1.5px;min-height:32px;& a-icon{--icon-size: 18px}}&[priority=tertiary],&[priority=quaternary]{&[underline=solid]{text-decoration:underline solid}&[underline=dashed]{text-decoration:underline dashed}&[underline=dotted]{text-decoration:underline dotted}&[underline]{text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;&[selected]{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg);text-decoration-thickness:1px}}}&[underline][underline-on-hover]{text-decoration-color:transparent;&[selected]{text-decoration-color:transparent}@media(hover:hover)and (pointer:fine){&:hover{text-decoration-color:var(--button-fg)}}}}&[priority=quaternary][paddingless]{--button-padding-x: 0;--button-padding-y: 0;min-height:0}&:has(>a-icon):not(:has(>a-icon~a-icon)):not(:has(>:not(a-icon):not(a-tooltip):not(a-copy))){--button-padding-y: 5px;--button-padding-x: 5px;min-width:28px;justify-content:center;&[size=small]{--button-padding-y: 3px;--button-padding-x: 3px;min-width:24px}&[size=large]{--button-padding-y: 7px;--button-padding-x: 7px;min-width:32px}}&:is(:has(>a-icon:first-child),:has(>a-tooltip:first-child+a-icon)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-start:max(0px,var(--button-padding-x) - 2px)}&:is(:has(>a-icon:last-child),:has(>a-icon+a-tooltip:last-child)):is(:has(>a-icon~a-icon),:has(>:not(a-icon):not(a-tooltip):not(a-copy))){padding-inline-end:max(0px,var(--button-padding-x) - 2px)}&[loading]{position:relative;pointer-events:none;cursor:wait;&:before{content:"";position:absolute;inset:0;pointer-events:none;clip-path:inset(0 round var(--_radius));background:repeating-linear-gradient(var(--button-loading-angle),transparent 0,transparent var(--button-loading-stripe-gap),currentColor var(--button-loading-stripe-gap),currentColor calc(var(--button-loading-stripe-gap) + var(--button-loading-stripe)));background-position-x:calc(0px - var(--button-loading-x-period));opacity:var(--button-loading-opacity);filter:blur(var(--button-loading-blur));will-change:background-position;animation:btn-loading-slide var(--button-loading-duration) linear infinite;animation-delay:-9999s}}--button-fg: oklch(from var(--button-fg-secondary-rest) calc(l - var(--button-fg-secondary-l-shift)) c h);--button-bg: var(--button-bg-secondary-rest);@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}}&:active{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-active)}&[selected]{--button-fg: var(--button-fg-secondary-hover);--button-bg: var(--button-bg-secondary-hover)}&[priority=primary]{--button-fg: var(--button-fg-primary-rest);--button-bg: var(--button-bg-primary-rest);box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-bg: var(--button-bg-primary-hover)}}&:active{--button-bg: var(--button-bg-primary-active)}&[selected]{--button-bg: var(--button-bg-primary-hover)}}&[priority=tertiary]{--button-fg: var(--button-fg-tertiary-rest);--button-bg: transparent;box-shadow:none;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&:active{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-active)}&[selected]{--button-fg: var(--button-fg-tertiary-hover);--button-bg: var(--button-bg-tertiary-hover)}}&[priority=quaternary]{--button-fg: var(--button-fg-quaternary-rest);--button-bg: transparent;box-shadow:none;font-weight:400;letter-spacing:.06ch;@media(hover:hover)and (pointer:fine){&:hover{--button-fg: var(--button-fg-quaternary-hover)}}&:active{--button-fg: var(--button-fg-quaternary-rest)}&[selected]{--button-fg: var(--button-fg-quaternary-hover)}}&[selected]{box-shadow:inset 0 0 0 .5px currentColor}&[disabled]{background-color:var(--bg-secondary-disabled);color:var(--fg-disabled);&[priority=primary]{background-color:var(--bg-primary-disabled);color:var(--fg-disabled-primary)}&[priority=tertiary],&[priority=quaternary]{background-color:transparent;color:var(--fg-disabled)}}}@media(forced-colors:active){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])){--anta-forced-foreground: ButtonText;color:ButtonText;background-color:ButtonFace;border:1px solid ButtonText;box-shadow:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=primary]{--anta-forced-foreground: ButtonFace;color:ButtonFace;background-color:ButtonText;border-color:ButtonText}a-button:is([priority=primary],[selected]){forced-color-adjust:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]{--anta-forced-foreground: CanvasText;color:CanvasText;background-color:Canvas;border:0}@media(hover:hover)and (pointer:fine){:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=tertiary]:hover:not(:focus-visible){outline:1px solid ButtonText;outline-offset:0}}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[priority=quaternary]{--anta-forced-foreground: LinkText;color:LinkText;background-color:ButtonFace;border:0;text-decoration:none}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[selected]{--anta-forced-foreground: HighlightText;color:HighlightText;background-color:Highlight;border-color:Highlight}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]))[disabled]{--anta-forced-foreground: GrayText;color:GrayText;background-color:Canvas;border-color:GrayText;text-decoration-color:GrayText}}}@keyframes btn-loading-slide{to{background-position-x:0}}

package/dist/elements/a-calendar.js

@@ -46,8 +46,8 @@ class ACalendarElement extends HTMLElementBase {
   applyFormValue(value) {
     this.internals?.setFormValue(value || null);
     try {
-      if (value) this.internals?.states.add("filled");
-      else this.internals?.states.delete("filled");
+      if (value) this.internals?.states?.add("filled");
+      else this.internals?.states?.delete("filled");
     } catch {
     }
   }

package/dist/elements/a-capture.css

@@ -0,0 +1 @@
+@layer anta.components{a-capture{display:block;min-width:0}a-capture[pointer-capture]:not([pointer-capture=none],[pointer-buttons=none]),a-capture[pan]:is([pan=""],[pan=both],[pan=x],[pan=y]):not([pan-pointer-types=none]){user-select:none}a-capture:where(:not([pan-pointer-types]),[pan-pointer-types=""],[pan-pointer-types=all],[pan-pointer-types~=touch]){&[pan=x]{touch-action:pan-y pinch-zoom}&[pan=y]{touch-action:pan-x pinch-zoom}&[pan=""],&[pan=both]{touch-action:none}}a-capture:is([pointer-capture=""],[pointer-capture=all],[pointer-capture~=touch]):not(:where([pointer-buttons=none])){touch-action:none}}

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

@@ -0,0 +1,10 @@
+import './a-capture.css';
+import { HTMLElementBase } from '../anta_helpers';
+/** A light-DOM input surface with no enabled capabilities by default. */
+export declare class ACaptureElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+export declare function register_a_capture(): void;