@antadesign/anta 0.3.25 → 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

@@ -0,0 +1,52 @@
+import type { BoxContextChange, BoxDisplay, BoxMeasurementChange } from '../box-types';
+import type { BaseProps } from '../general_types';
+/** JSX props for the observing light-DOM `<a-box>` container. */
+export interface BoxProps extends BaseProps {
+    /** Layout model for the host. All other layout, sizing, mask, and shadow
+     * properties stay ordinary `className` / `style` CSS on the Box itself.
+     * @defaultValue block */
+    display?: BoxDisplay;
+    /** Fully-round corners (`border-radius: 999px`, clamped to the box). Pass a
+     * `number` (px) or a CSS length string (`'1rem'`) for a custom radius. Omit
+     * for square corners. */
+    round?: boolean | number | string;
+    /** Gap between children, matching the CSS `gap` property. A `number` is
+     * pixels; a string is any CSS length or two-value gap (`'1rem'`,
+     * `'8px 16px'`). Applies while the Box is a flex or grid container. */
+    gap?: number | string;
+    /** What the Box watches, when a handler is not what turns it on. `'size'`
+     * keeps the overflow CSS states (`:state(clipped-x)`, `:state(scrollable-y)`,
+     * …) current — reach for it when your own CSS is the only reader. `'context'`
+     * and `'all'` are there for symmetry; passing `onMeasureChange` or
+     * `onContextChange` already turns the matching half on. */
+    observe?: 'size' | 'context' | 'all';
+    /** Fades out every edge that currently hides clipped content, and drops the
+     * fade from an edge once the reader scrolls to it. */
+    fade?: boolean;
+    /** Depth of the `fade` gradient. A `number` is pixels; a string is any CSS
+     * length.
+     * @defaultValue 24 */
+    fadeSize?: number | string;
+    /** Fired after Box geometry or its content-overflow state changes. `detail`
+     * contains the changed fields and a full current snapshot. */
+    onMeasureChange?: (event: CustomEvent<BoxMeasurementChange>, detail: BoxMeasurementChange) => void;
+    /** Fired after Box's browser and local rendering context changes. `detail`
+     * 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

@@ -0,0 +1,55 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import {
+  cssLength,
+  customEventHandler,
+  lengthStyle,
+  roundAttr,
+  roundStyle
+} from "../anta_helpers";
+function observeAttr(observe, onMeasureChange, onContextChange) {
+  const size = observe === "size" || observe === "all" || onMeasureChange != null;
+  const context = observe === "context" || observe === "all" || onContextChange != null;
+  if (size && context) return "all";
+  if (size) return "size";
+  if (context) return "context";
+  return void 0;
+}
+const Box = ({
+  display,
+  round,
+  gap,
+  observe,
+  fade,
+  fadeSize,
+  onMeasureChange,
+  onContextChange,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "a-box",
+    {
+      display: display === "block" ? void 0 : display,
+      round: roundAttr(round),
+      gap: gap != null ? "" : void 0,
+      observe: observeAttr(observe, onMeasureChange, onContextChange),
+      fade: fade ? "" : void 0,
+      "fade-size": fade && fadeSize != null ? cssLength(fadeSize) : void 0,
+      onmeasurechange: customEventHandler(onMeasureChange),
+      oncontextchange: customEventHandler(onContextChange),
+      class: className,
+      style: lengthStyle(
+        fade ? fadeSize : void 0,
+        "--box-fade-size",
+        lengthStyle(gap, "--box-gap", roundStyle(round, "--box-round", style))
+      ),
+      ...rest,
+      children
+    }
+  );
+};
+export {
+  Box
+};

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-avatar.css

@@ -1 +1 @@
-@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h);display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar[round]{--avatar-round: attr(round type(<length>));--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03)}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}.dark a-avatar{--avatar-badge-color: oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h)}.dark a-avatar[badge=neutral]{--avatar-badge-chroma: .008}}
+@layer anta.components{a-avatar{--avatar-size: 44px;--avatar-radius: 22%;--avatar-placeholder-bg: var(--bg-3);--avatar-badge-ratio: .24;--avatar-badge-size: calc(var(--avatar-size) * var(--avatar-badge-ratio));--avatar-badge-inset: 0px;--avatar-badge-gap: 2px;--avatar-badge-mask: none;--avatar-badge-tone-source: var(--anta-seed-neutral);--avatar-badge-chroma: .17;--avatar-badge-color: oklch(from var(--avatar-badge-tone-source) .62 var(--avatar-badge-chroma) h);display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);vertical-align:middle}a-avatar[round]{--avatar-radius: var(--avatar-round, 50%);--avatar-badge-inset: calc(var(--avatar-size) * .03);@supports (border-radius: attr(probe type(<length>),1px)){--avatar-round: attr(round type(<length>))}}a-avatar[size=small]{--avatar-size: 32px;--avatar-badge-gap: 1.5px}a-avatar[size=large]{--avatar-size: 64px;--avatar-badge-gap: 2.5px}a-avatar[badge]:not([badge=""],[badge=none]){--avatar-badge-mask: radial-gradient( circle calc(var(--avatar-badge-size) / 2 + var(--avatar-badge-gap)) at calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2) calc(100% - var(--avatar-badge-inset) - var(--avatar-badge-size) / 2), transparent 99%, #000 100% )}a-avatar:not(:defined){display:inline-block;inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-radius);background:var(--avatar-placeholder-bg);vertical-align:middle}a-avatar[badge=neutral]{--avatar-badge-chroma: .005}a-avatar[badge=brand]{--avatar-badge-tone-source: var(--anta-seed-brand)}a-avatar[badge=info]{--avatar-badge-tone-source: var(--anta-seed-info)}a-avatar[badge=success]{--avatar-badge-tone-source: var(--anta-seed-success)}a-avatar[badge=warning]{--avatar-badge-tone-source: var(--anta-seed-warning)}a-avatar[badge=critical]{--avatar-badge-tone-source: var(--anta-seed-critical)}@supports (color: attr(badge type(<color>),transparent)){a-avatar[badge]:not([badge=""],[badge=neutral],[badge=brand],[badge=info],[badge=success],[badge=warning],[badge=critical]){--avatar-badge-tone-source: attr(badge type(<color>), transparent)}}.dark a-avatar{--avatar-badge-color: oklch(from var(--avatar-badge-tone-source) .68 var(--avatar-badge-chroma) h)}.dark a-avatar[badge=neutral]{--avatar-badge-chroma: .008}}

package/dist/elements/a-banner.css

@@ -1 +1 @@
-@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{--banner-round: attr(round type(<length>));border-radius:var(--banner-round, 999px)}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: attr(tone type(<color>), currentColor);--banner-text: oklch(from var(--banner-tone-source) .5 .125 h);--banner-bg: oklch(from var(--banner-tone-source) .955 .02 h);--banner-border: oklch(from var(--banner-tone-source) .9 .04 h);.dark &{--banner-text: oklch(from var(--banner-tone-source) .77 .11 h);--banner-bg: oklch(from var(--banner-tone-source) .185 .05 h);--banner-border: oklch(from var(--banner-tone-source) .26 .06 h)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}
+@layer anta.components{a-banner{--banner-bg: var(--bg-4);--banner-border: var(--border-4);--banner-text: var(--text-2);display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:4px 1ch;position:relative;box-sizing:border-box;width:100%;min-height:40px;padding-block:6px;padding-inline:16px 48px;color:var(--banner-text);background:var(--banner-bg);border:0 solid var(--banner-border);border-radius:0;overflow:clip;overflow-clip-margin:3px;interpolate-size:allow-keywords;transition:opacity .16s ease,block-size .2s ease,padding-block .2s ease,border-block-width .2s ease,display .2s allow-discrete}a-banner[align=center]{justify-content:center;padding-inline:48px}a-banner[round]{border-radius:var(--banner-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--banner-round: attr(round type(<length>))}}a-banner [slot=close] a-button,a-banner a-button[slot=close]{height:100%;width:40px}a-banner-message{font-size:14px;line-height:20px;font-weight:475;text-align:start}a-banner[align=center] a-banner-message{text-align:center}a-banner[tone=brand]{--banner-bg: var(--bg-4-brand);--banner-border: var(--border-4-brand);--banner-text: var(--text-2-brand)}a-banner[tone=info]{--banner-bg: var(--bg-4-info);--banner-border: var(--border-4-info);--banner-text: var(--text-2-info)}a-banner[tone=success]{--banner-bg: var(--bg-4-success);--banner-border: var(--border-4-success);--banner-text: var(--text-2-success)}a-banner[tone=warning]{--banner-bg: var(--bg-4-warning);--banner-border: var(--border-4-warning);--banner-text: var(--text-2-warning)}a-banner[tone=critical]{--banner-bg: var(--bg-4-critical);--banner-border: var(--border-4-critical);--banner-text: var(--text-2-critical)}a-banner[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--banner-tone-source: currentColor;--banner-text: oklch(from var(--banner-tone-source) .5 .125 h);--banner-bg: oklch(from var(--banner-tone-source) .955 .02 h);--banner-border: oklch(from var(--banner-tone-source) .9 .04 h);.dark &{--banner-text: oklch(from var(--banner-tone-source) .77 .11 h);--banner-bg: oklch(from var(--banner-tone-source) .185 .05 h);--banner-border: oklch(from var(--banner-tone-source) .26 .06 h)}@supports (color: attr(probe type(<color>),red)){--banner-tone-source: attr(tone type(<color>), currentColor)}}a-banner:not(:defined){opacity:0}a-banner[state=closed],a-banner[default-state=closed],a-banner:state(closed){display:none;block-size:0;min-block-size:0;padding-block:0;border-block-width:0;opacity:0}@media(forced-colors:active){a-banner{border-width:1px;border-color:CanvasText}}@media(prefers-reduced-motion:reduce){a-banner{transition:none}}}

package/dist/elements/a-banner.js

@@ -114,11 +114,11 @@ class ABannerElement extends HTMLElementBase {
     if (!this.#internals) return;
     try {
       if (state === "closed") {
-        this.#internals.states.add("closed");
-        this.#internals.states.delete("open");
+        this.#internals?.states?.add("closed");
+        this.#internals?.states?.delete("open");
       } else {
-        this.#internals.states.add("open");
-        this.#internals.states.delete("closed");
+        this.#internals?.states?.add("open");
+        this.#internals?.states?.delete("closed");
       }
     } catch {
     }

package/dist/elements/a-box.css

@@ -0,0 +1 @@
+@layer anta.components{a-box{display:block;min-width:0}a-box[display=inline-block]{display:inline-block}a-box[display=flex]{display:flex}a-box[display=inline-flex]{display:inline-flex}a-box[display=grid]{display:grid}a-box[display=inline-grid]{display:inline-grid}a-box[gap]{gap:var(--box-gap, normal);@supports (border-radius: attr(probe type(<length>),1px)){--box-gap: attr(gap type(<length>))}}a-box[round]{border-radius:var(--box-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--box-round: attr(round type(<length>))}}a-box[fade]{--box-fade-size: 24px;--box-fade-x: linear-gradient(transparent, transparent);--box-fade-y: linear-gradient(transparent, transparent);--box-fade-to-start: to left;--box-fade-to-end: to right}a-box[fade]:is(:state(hidden-start-x),:state(hidden-end-x),:state(hidden-start-y),:state(hidden-end-y)){mask-image:linear-gradient(#000,#000),var(--box-fade-x),var(--box-fade-y);mask-clip:border-box,padding-box,padding-box;mask-origin:border-box,padding-box,padding-box;mask-composite:exclude,add,add;mask-repeat:no-repeat;mask-size:100% 100%}a-box[fade][fade-size]{--box-fade-size: 24px;@supports (border-radius: attr(probe type(<length>),1px)){--box-fade-size: attr(fade-size type(<length>), 24px)}}a-box[fade]:dir(rtl){--box-fade-to-start: to right;--box-fade-to-end: to left}a-box[fade]:state(hidden-end-x){--box-fade-x: linear-gradient(var(--box-fade-to-end), transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-x){--box-fade-x: linear-gradient(var(--box-fade-to-start), transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-x):state(hidden-end-x){--box-fade-x: linear-gradient( to right, black, transparent var(--box-fade-size), transparent calc(100% - var(--box-fade-size)), black )}a-box[fade]:state(hidden-end-y){--box-fade-y: linear-gradient(to bottom, transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-y){--box-fade-y: linear-gradient(to top, transparent calc(100% - var(--box-fade-size)), black)}a-box[fade]:state(hidden-start-y):state(hidden-end-y){--box-fade-y: linear-gradient( to bottom, black, transparent var(--box-fade-size), transparent calc(100% - var(--box-fade-size)), black )}}

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

@@ -0,0 +1,41 @@
+import { HTMLElementBase } from '../anta_helpers';
+import type { BoxContext, BoxMeasurement } from '../box-types';
+import './a-box.css';
+/**
+ * `<a-box>` is a light-DOM container that observes itself. It leaves the host
+ * and its children entirely to the renderer: all output is read-only getters,
+ * `measurechange` / `contextchange` events, and private `ElementInternals`
+ * states. This keeps measurement usable when JSX itself cannot access the DOM.
+ *
+ * Observation is opt-in by attribute and pauses off screen. `fade` or
+ * `observe="size"` turns measurement on, `observe="context"` turns
+ * `contextchange` on, `observe="all"` (or a bare `observe`) turns on both, and a box
+ * with neither runs no observers at all — not even the shared visibility one.
+ * The `measurement` / `context` / `isTruncated` getters still read on demand.
+ *
+ * Attributes rather than "is a listener attached" on purpose. A listener tally
+ * cannot see listeners added before the element upgrades (the SSR pattern in
+ * AGENTS.md), cannot see `once` or `AbortSignal` removals, and churns on every
+ * React 19 render, because React removes and re-adds an `on*` prop whenever its
+ * identity changes. The JSX wrapper stamps both attributes from its handler
+ * props, so this is invisible to anyone using `Box`.
+ */
+export declare class ABoxElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): 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;
+    /** A fresh context snapshot. For changes, prefer `contextchange`. */
+    get context(): BoxContext;
+    /** Allows a nested `Tooltip truncatedOnly` to use Box's clipping decision. */
+    get isTruncated(): boolean;
+    /** Called by the per-window context cache. It is intentionally not a JSX prop. */
+    contextStoreDidChange(): void;
+    /** Called by the per-window visibility observer. Also not a JSX prop. */
+    visibilityDidChange(visible: boolean): void;
+}
+export declare function register_a_box(): void;