@antadesign/anta 0.3.25 → 0.3.26

package/dist/components/Box.d.ts

@@ -0,0 +1,37 @@
+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;
+}
+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,63 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import {
+  cssLength,
+  lengthStyle,
+  nativeStateChange,
+  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
+}) => {
+  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",
+    {
+      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: measureHandler,
+      oncontextchange: contextHandler,
+      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/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(): 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;