@antadesign/anta 0.3.26 → 0.3.27

package/dist/capture-types.d.ts

@@ -0,0 +1,156 @@
+/** Directions of wheel or scroll deltas. Positive Y is down; positive X is right. */
+export type CaptureInputDirection = 'up' | 'down' | 'left' | 'right';
+/** `true` accepts every direction; omitted object entries decline that direction. */
+export type CaptureInputDirections = boolean | Partial<Record<CaptureInputDirection, boolean>>;
+/** `none` accepts unmodified input; a named modifier must be pressed. */
+export type CaptureInputModifier = 'none' | 'any' | 'alt' | 'ctrl' | 'meta' | 'shift';
+export type CaptureWheelActivation = 'hover' | 'settled' | 'focus' | 'settled-or-focus';
+export type CaptureWheelActivationReason = 'immediate' | 'settled' | 'focus';
+export interface CaptureWheelSettle {
+    /** Pointer dwell time in milliseconds.
+     * @defaultValue 150 */
+    delay?: number;
+    /** Maximum movement from the dwell anchor on either axis, in CSS pixels.
+     * @defaultValue 5 */
+    tolerance?: number;
+    /** Restart dwell after movement beyond tolerance, including after activation.
+     * @defaultValue false */
+    resetOnMove?: boolean;
+}
+export type CapturePointerType = 'mouse' | 'pen' | 'touch';
+export interface CapturePointerCapture {
+    /** Accepted pointer devices. One primary pointer is tracked per Capture.
+     * @defaultValue ['mouse', 'pen', 'touch'] */
+    pointerTypes?: readonly CapturePointerType[];
+    /** Accepted initiating buttons, using PointerEvent.button values.
+     * @defaultValue [0] */
+    buttons?: readonly number[];
+    /** Movement required before activation, in viewport CSS pixels.
+     * @defaultValue 0 */
+    threshold?: number;
+    /** Modifier required to start a capture session.
+     * @defaultValue any */
+    modifier?: CaptureInputModifier;
+    /** Allow capture to start on nested native or ARIA controls, links, or editable regions.
+     * @defaultValue false */
+    includeInteractive?: boolean;
+}
+export interface CapturePanInertia {
+    /** Exponential velocity decay time constant in milliseconds.
+     * @defaultValue 325 */
+    timeConstant?: number;
+    /** Stop when speed on both axes falls below this value, in CSS pixels/ms.
+     * @defaultValue 0.02 */
+    minVelocity?: number;
+}
+export interface CapturePan {
+    /** Accepted pointer devices.
+     * @defaultValue ['touch'] */
+    pointerTypes?: readonly CapturePointerType[];
+    /** Axes handled by custom panning. CSS touch-action leaves the other axis to the browser.
+     * @defaultValue both */
+    axis?: 'x' | 'y' | 'both';
+    /** Movement required before activation, in viewport CSS pixels.
+     * @defaultValue 3 */
+    threshold?: number;
+    /** Allowed scroll directions. Updating these can stop motion at application bounds.
+     * @defaultValue true */
+    directions?: CaptureInputDirections;
+    /** Continue panning after release with browser-side velocity decay.
+     * @defaultValue false */
+    inertia?: boolean | CapturePanInertia;
+}
+/** Plain event data. DOM targets, methods, and browser objects are excluded. */
+export interface SerializedMouseEvent {
+    type: string;
+    timeStamp: number;
+    isTrusted: boolean;
+    cancelable: boolean;
+    defaultPrevented: boolean;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    button: number;
+    buttons: number;
+    clientX: number;
+    clientY: number;
+    pageX: number;
+    pageY: number;
+    screenX: number;
+    screenY: number;
+    /** Coordinates relative to the original event target's padding edge. */
+    offsetX: number;
+    offsetY: number;
+}
+/** Original wheel values, including their original units and signs. */
+export interface SerializedWheelEvent extends SerializedMouseEvent {
+    deltaX: number;
+    deltaY: number;
+    deltaZ: number;
+    deltaMode: number;
+}
+export interface SerializedPointerEvent extends SerializedMouseEvent {
+    pointerId: number;
+    pointerType: string;
+    isPrimary: boolean;
+    width: number;
+    height: number;
+    pressure: number;
+    tangentialPressure: number;
+    tiltX: number;
+    tiltY: number;
+    twist: number;
+}
+/** Geometry measured at delivery. CSS transforms are included in the viewport rectangle. */
+export interface CaptureInputGeometry {
+    /** Pointer position relative to the viewport bounding rectangle's top-left, in CSS pixels. */
+    localX: number;
+    localY: number;
+    /** Dimensions of the same viewport bounding rectangle, in CSS pixels. */
+    boxWidth: number;
+    boxHeight: number;
+    /** Whether the pointer is inside that rectangle. Capture can continue outside it. */
+    inside: boolean;
+    focusWithin: boolean;
+}
+/** An accepted wheel input. Cancellation has already happened on the browser thread. */
+export interface CaptureWheelInput extends CaptureInputGeometry {
+    wheelEvent: SerializedWheelEvent;
+    activationReason: CaptureWheelActivationReason;
+}
+export type CapturePointerActivationReason = 'pointer-down' | 'drag-threshold';
+export type CaptureInputCancelReason = 'pointer-cancel' | 'lost-capture' | 'disabled' | 'disconnected' | 'blur' | 'interrupted';
+export interface CapturePointerStart extends CaptureInputGeometry {
+    pointerEvent: SerializedPointerEvent;
+}
+/** A captured pointer session. Positive movement follows the pointer right/down. */
+export interface CapturePointerInput extends CaptureInputGeometry {
+    phase: 'start' | 'move' | 'end' | 'cancel';
+    /** Null when cancellation comes from lifecycle or configuration changes. */
+    pointerEvent: SerializedPointerEvent | null;
+    start: CapturePointerStart;
+    /** Movement since the previous delivered sample, in viewport CSS pixels. */
+    deltaX: number;
+    deltaY: number;
+    /** Total movement from the initial press, in viewport CSS pixels. */
+    movementX: number;
+    movementY: number;
+    activationReason: CapturePointerActivationReason;
+    cancelReason?: CaptureInputCancelReason;
+}
+/** Custom scroll motion. Deltas have the opposite sign to finger movement. */
+export interface CapturePanInput extends CaptureInputGeometry {
+    phase: 'start' | 'move' | 'release' | 'inertia' | 'end' | 'cancel';
+    /** Null during momentum or cancellation without a pointer event. */
+    pointerEvent: SerializedPointerEvent | null;
+    start: CapturePointerStart;
+    /** Incremental scroll motion in viewport CSS pixels. */
+    deltaX: number;
+    deltaY: number;
+    /** Scroll velocity in viewport CSS pixels/ms. */
+    velocityX: number;
+    velocityY: number;
+    activationReason: CapturePointerActivationReason;
+    cancelReason?: CaptureInputCancelReason;
+}

package/dist/components/Box.d.ts

@@ -34,4 +34,19 @@ export interface BoxProps extends BaseProps {
      * contains the changed fields and a full current snapshot. */
     onContextChange?: (event: CustomEvent<BoxContextChange>, detail: BoxContextChange) => void;
 }
+/**
+ * A light-DOM CSS box with browser-owned observation. `Box` is deliberately a
+ * thin JSX projection: it never holds a DOM ref. The element measures itself,
+ * tracks clipping and focus within, and emits native custom events so this works
+ * with React, Preact, and DOMs reconciled outside the UI thread.
+ *
+ * @example
+ * ```tsx
+ * <Box display="grid" onMeasureChange={(event, { current }) => {
+ *   console.log(current.width, current.clippedX)
+ * }}>
+ *   <Text truncate>Long content</Text>
+ * </Box>
+ * ```
+ */
 export declare const Box: ({ display, round, gap, observe, fade, fadeSize, onMeasureChange, onContextChange, className, style, children, ...rest }: BoxProps) => any;

package/dist/components/Box.js

@@ -1,8 +1,8 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
 import {
   cssLength,
+  customEventHandler,
   lengthStyle,
-  nativeStateChange,
   roundAttr,
   roundStyle
 } from "../anta_helpers";
@@ -28,14 +28,6 @@ const Box = ({
   children,
   ...rest
 }) => {
-  const measureHandler = onMeasureChange ? (input) => {
-    const { event, detail } = nativeStateChange(input);
-    if (detail) onMeasureChange(event, detail);
-  } : void 0;
-  const contextHandler = onContextChange ? (input) => {
-    const { event, detail } = nativeStateChange(input);
-    if (detail) onContextChange(event, detail);
-  } : void 0;
   return /* @__PURE__ */ jsx(
     "a-box",
     {
@@ -45,8 +37,8 @@ const Box = ({
       observe: observeAttr(observe, onMeasureChange, onContextChange),
       fade: fade ? "" : void 0,
       "fade-size": fade && fadeSize != null ? cssLength(fadeSize) : void 0,
-      onmeasurechange: measureHandler,
-      oncontextchange: contextHandler,
+      onmeasurechange: customEventHandler(onMeasureChange),
+      oncontextchange: customEventHandler(onContextChange),
       class: className,
       style: lengthStyle(
         fade ? fadeSize : void 0,

package/dist/components/Capture.d.ts

@@ -0,0 +1,39 @@
+import type { BaseProps } from '../general_types';
+import type { CaptureInputDirections, CaptureInputModifier, CapturePan, CapturePanInput, CapturePointerCapture, CapturePointerInput, CaptureWheelActivation, CaptureWheelInput, CaptureWheelSettle } from '../capture-types';
+/** Opt-in input ownership for the light-DOM capture surface. */
+export interface CaptureProps extends BaseProps {
+    /** Capture wheel input in the enabled directions and emit `onWheelInput`.
+     * `true` accepts all directions. Omit or pass `false` to leave wheel input alone.
+     * Nested native wheel controls and Anta menus are excluded.
+     * All-false direction bounds preserve pointer settling while declining input.
+     * A listener alone never enables capture. */
+    wheelCapture?: CaptureInputDirections;
+    /** Pointer or focus condition required before wheel input can be captured.
+     * Focus applies only to input targeted within this Capture.
+     * @defaultValue settled */
+    wheelActivation?: CaptureWheelActivation;
+    /** Required modifier for wheel capture. `none` preserves browser Ctrl/pinch zoom.
+     * @defaultValue none */
+    wheelModifier?: CaptureInputModifier;
+    /** Dwell delay, movement tolerance, and whether movement resets eligibility.
+     * @defaultValue { delay: 150, tolerance: 5, resetOnMove: false } */
+    wheelSettle?: CaptureWheelSettle;
+    /** Accepted wheel input, with a serialized original event, Capture-relative
+     * geometry, focus state, and activation reason. Cancellation is already complete. */
+    onWheelInput?: (event: CustomEvent<CaptureWheelInput>, detail: CaptureWheelInput) => void;
+    /** Emit raw data for a primary pointer until release or cancellation. An options object
+     * filters devices/buttons and configures activation. Nested interactive controls
+     * are excluded unless explicitly included. A listener alone enables nothing. */
+    pointerCapture?: boolean | CapturePointerCapture;
+    /** Start, movement, end, and cancellation of an opted-in pointer session. */
+    onPointerInput?: (event: CustomEvent<CapturePointerInput>, detail: CapturePointerInput) => void;
+    /** Emit custom pan motion. `true` enables touch panning on both axes without
+     * momentum. Options select devices, axes, bounds directions, and optional inertia.
+     * Captures the pointer internally; `pointerCapture` is not required.
+     * Sets CSS touch-action through attributes before the gesture starts. */
+    pan?: boolean | CapturePan;
+    /** Custom pan motion and its lifecycle. Inertial samples have no native pointer event. */
+    onPanInput?: (event: CustomEvent<CapturePanInput>, detail: CapturePanInput) => void;
+}
+/** A browser-thread input surface. Nothing is captured until a capability is enabled. */
+export declare const Capture: ({ wheelCapture, wheelActivation, wheelModifier, wheelSettle, onWheelInput, pointerCapture, onPointerInput, pan, onPanInput, className, children, ...rest }: CaptureProps) => any;

package/dist/components/Capture.js

@@ -0,0 +1,36 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { customEventHandler } from "../anta_helpers";
+import { directionAttribute, panAttributes, pointerCaptureAttributes, wheelSettleAttributes } from "./capture-props";
+const Capture = ({
+  wheelCapture,
+  wheelActivation,
+  wheelModifier,
+  wheelSettle,
+  onWheelInput,
+  pointerCapture,
+  onPointerInput,
+  pan,
+  onPanInput,
+  className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "a-capture",
+  {
+    "wheel-capture": directionAttribute(wheelCapture),
+    "wheel-activation": wheelCapture ? wheelActivation : void 0,
+    "wheel-modifier": wheelCapture ? wheelModifier : void 0,
+    ...wheelSettleAttributes(wheelCapture ? wheelSettle : void 0),
+    ...pointerCaptureAttributes(pointerCapture),
+    ...panAttributes(pan),
+    onwheelinput: customEventHandler(onWheelInput),
+    onpointerinput: customEventHandler(onPointerInput),
+    onpaninput: customEventHandler(onPanInput),
+    class: className,
+    ...rest,
+    children
+  }
+);
+export {
+  Capture
+};

package/dist/components/capture-props.d.ts

@@ -0,0 +1,30 @@
+import type { CaptureInputDirections, CapturePan, CapturePointerCapture, CaptureWheelSettle } from '../capture-types';
+/** The empty string enables every direction; `none` keeps an explicit empty set. */
+export declare function directionAttribute(value: CaptureInputDirections | undefined): string | undefined;
+export declare function wheelSettleAttributes(value: CaptureWheelSettle | undefined): {
+    'wheel-delay': number | undefined;
+    'wheel-tolerance': number | undefined;
+    'wheel-reset-on-move': "" | undefined;
+} | undefined;
+export declare function pointerCaptureAttributes(value: boolean | CapturePointerCapture | undefined): {
+    'pointer-capture': string;
+    'pointer-buttons'?: undefined;
+    'pointer-threshold'?: undefined;
+    'pointer-modifier'?: undefined;
+    'pointer-include-interactive'?: undefined;
+} | {
+    'pointer-capture': string;
+    'pointer-buttons': string | undefined;
+    'pointer-threshold': number | undefined;
+    'pointer-modifier': import("@antadesign/anta").CaptureInputModifier | undefined;
+    'pointer-include-interactive': "" | undefined;
+} | undefined;
+export declare function panAttributes(value: boolean | CapturePan | undefined): {
+    pan: "both" | "x" | "y";
+    'pan-pointer-types': string | undefined;
+    'pan-threshold': number | undefined;
+    'pan-directions': string | undefined;
+    'pan-inertia': "" | undefined;
+    'pan-time-constant': number | undefined;
+    'pan-min-velocity': number | undefined;
+} | undefined;

package/dist/components/capture-props.js

@@ -0,0 +1,44 @@
+function directionAttribute(value) {
+  if (value === void 0 || value === false) return void 0;
+  if (value === true) return "";
+  return ["up", "down", "left", "right"].filter((direction) => value[direction]).join(" ") || "none";
+}
+function wheelSettleAttributes(value) {
+  if (!value) return void 0;
+  return {
+    "wheel-delay": value.delay,
+    "wheel-tolerance": value.tolerance,
+    "wheel-reset-on-move": value.resetOnMove ? "" : void 0
+  };
+}
+function pointerCaptureAttributes(value) {
+  if (!value) return void 0;
+  if (value === true) return { "pointer-capture": "" };
+  return {
+    "pointer-capture": value.pointerTypes?.join(" ") || (value.pointerTypes ? "none" : ""),
+    "pointer-buttons": value.buttons?.join(" ") || (value.buttons ? "none" : void 0),
+    "pointer-threshold": value.threshold,
+    "pointer-modifier": value.modifier,
+    "pointer-include-interactive": value.includeInteractive ? "" : void 0
+  };
+}
+function panAttributes(value) {
+  if (!value) return void 0;
+  const options = value === true ? {} : value;
+  const inertia = typeof options.inertia === "object" ? options.inertia : void 0;
+  return {
+    pan: options.axis ?? "both",
+    "pan-pointer-types": options.pointerTypes?.join(" ") || (options.pointerTypes ? "none" : void 0),
+    "pan-threshold": options.threshold,
+    "pan-directions": options.directions === false ? "none" : directionAttribute(options.directions),
+    "pan-inertia": options.inertia ? "" : void 0,
+    "pan-time-constant": inertia?.timeConstant,
+    "pan-min-velocity": inertia?.minVelocity
+  };
+}
+export {
+  directionAttribute,
+  panAttributes,
+  pointerCaptureAttributes,
+  wheelSettleAttributes
+};

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

@@ -25,7 +25,7 @@ export declare class ABoxElement extends HTMLElementBase {
     static observedAttributes: string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(): void;
+    attributeChangedCallback(name: string): void;
     /** A fresh measurement snapshot. For notifications, prefer `measurechange`:
      * it batches browser observers and includes the field-level delta. */
     get measurement(): BoxMeasurement;

package/dist/elements/a-box.js

@@ -119,8 +119,15 @@ class BoxWindowStore {
     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) stores.delete(this.view);
+    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 —
@@ -292,8 +299,9 @@ class ABoxElement extends HTMLElementBase {
      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() {
-    if (this.#store) this.#sync();
+  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. */

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;

package/dist/elements/a-capture.js

@@ -0,0 +1,24 @@
+import "./a-capture.css";
+import { HTMLElementBase } from "../anta_helpers";
+import { CAPTURE_INPUT_ATTRIBUTES, disconnectCaptureInput, syncCaptureInput } from "./capture-input";
+class ACaptureElement extends HTMLElementBase {
+  static observedAttributes = CAPTURE_INPUT_ATTRIBUTES;
+  connectedCallback() {
+    syncCaptureInput(this);
+  }
+  disconnectedCallback() {
+    disconnectCaptureInput(this);
+  }
+  attributeChangedCallback(name) {
+    syncCaptureInput(this, name);
+  }
+}
+function register_a_capture() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-capture")) customElements.define("a-capture", ACaptureElement);
+}
+register_a_capture();
+export {
+  ACaptureElement,
+  register_a_capture
+};

package/dist/elements/a-checkbox.js

@@ -94,10 +94,10 @@ class ACheckboxElement extends HTMLElementBase {
   paint() {
     const i = this.internals;
     if (!i) return;
-    i.states.delete("checked");
-    i.states.delete("indeterminate");
-    if (this.currentState === "indeterminate") i.states.add("indeterminate");
-    else if (this.currentState === "checked") i.states.add("checked");
+    i.states?.delete("checked");
+    i.states?.delete("indeterminate");
+    if (this.currentState === "indeterminate") i.states?.add("indeterminate");
+    else if (this.currentState === "checked") i.states?.add("checked");
     i.ariaChecked = this.currentState === "indeterminate" ? "mixed" : this.currentState === "checked" ? "true" : "false";
     i.setFormValue?.(
       this.currentState === "checked" ? this.getAttribute("value") ?? "on" : null,

package/dist/elements/a-slider.js

@@ -1,10 +1,5 @@
-import { HTMLElementBase } from "../anta_helpers";
+import { finiteNumber, HTMLElementBase } from "../anta_helpers";
 import "./a-slider.css";
-const finiteNumber = (value, fallback) => {
-  if (value == null || value === "") return fallback;
-  const number = Number(value);
-  return Number.isFinite(number) ? number : fallback;
-};
 const precisionOf = (value) => {
   const exponent = value.toString().match(/(?:\.(\d+))?(?:e([+-]?\d+))?$/i);
   return Math.max(0, (exponent?.[1]?.length ?? 0) - Number(exponent?.[2] ?? 0));
@@ -281,6 +276,7 @@ class ASliderElement extends HTMLElementBase {
     this.#control.addEventListener("pointermove", (event) => this.#moveDrag(event));
     this.#control.addEventListener("pointerup", (event) => this.#finishDrag(event));
     this.#control.addEventListener("pointercancel", (event) => this.#finishDrag(event));
+    this.#control.addEventListener("lostpointercapture", (event) => this.#finishDrag(event));
     this.addEventListener("keydown", (event) => this.#handleKeydown(event));
     this.addEventListener("blur", () => delete this.#control.dataset.pointerFocus);
     shadow.append(style, this.#header, this.#control, this.#markers, this.#extras);
@@ -423,6 +419,10 @@ class ASliderElement extends HTMLElementBase {
   #moveDrag(event) {
     const drag = this.#drag;
     if (!drag || drag.pointerId !== event.pointerId) return;
+    if (!(event.buttons & 1)) {
+      this.#finishDrag(event);
+      return;
+    }
     const next = this.getAttribute("track-click") === "jump" ? this.#valueAt(event.clientX) : drag.startValue + (event.clientX - drag.startX) / this.#railArea.getBoundingClientRect().width * (this.#max - this.#min);
     this.#setValue(next);
     event.preventDefault();

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

@@ -0,0 +1,5 @@
+import type { CaptureInputCancelReason } from '../capture-types';
+export declare const CAPTURE_INPUT_ATTRIBUTES: string[];
+/** Read declarative attributes, allocating input resources only for enabled capabilities. */
+export declare function syncCaptureInput(surface: HTMLElement, attribute?: string): void;
+export declare function disconnectCaptureInput(surface: HTMLElement, reason?: CaptureInputCancelReason): void;