@antadesign/anta 0.3.31 → 0.3.32

package/dist/components/Box.d.ts

@@ -14,6 +14,13 @@ export interface BoxProps extends BaseProps {
      * 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;
+    /** CSS selector for descendants whose border boxes are included in
+     * `measurement.rects` when Box measures. Coordinates are relative to this
+     * Box's top-left border edge; matches are in document order. Box reads and
+     * compares matching rects for each measurement event. With `observe="scroll"`,
+     * use `throttle` when the selector matches many descendants; it also delays
+     * CSS state updates after the initial read. */
+    includeRectsFor?: string;
     /** Inner spacing, matching CSS `padding`. Numbers are pixels; strings accept
      * CSS shorthand, percentages, and custom properties. Omission adds no style. */
     padding?: number | string;
@@ -31,9 +38,13 @@ export interface BoxProps extends BaseProps {
      * overflow adds content observation; hidden edges and scroll add scroll reads.
      * Without handlers or `fade`, omission stays idle. */
     observe?: BoxObservation | readonly BoxObservation[];
-    /** Minimum interval between measurement events, in milliseconds. The first
-     * report has no added delay; a trailing report delivers the latest values.
-     * Active observers and CSS clipping states are not throttled.
+    /** Keeps measurement events and CSS clipping states current outside the
+     * viewport. Has no effect unless `observe` or `fade` selects measurement. */
+    observeOffscreen?: boolean;
+    /** Minimum interval between measurements, in milliseconds. The initial
+     * measurement runs immediately; a trailing read updates CSS states and
+     * delivers the latest event. Descendant rects are read only for emitted
+     * events. The `measurement` getter always reads fresh values.
      * @defaultValue 0 */
     throttle?: number;
     /** Fades out every edge that currently hides clipped content, and drops the
@@ -43,8 +54,9 @@ export interface BoxProps extends BaseProps {
      * length.
      * @defaultValue 24 */
     fadeSize?: number | string;
-    /** Fired when a selected measurement field changes. `detail` contains all
-     * fields changed since the last event and a full current snapshot. */
+    /** Fired when a selected measurement field changes. `detail.changed` contains
+     * fields changed since the previous event; `detail.current` includes the full
+     * snapshot with matching rects. Rect changes alone do not trigger an event. */
     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. */
@@ -65,4 +77,4 @@ export interface BoxProps extends BaseProps {
  * </Box>
  * ```
  */
-export declare const Box: ({ display, round, gap, padding, margin, observe, throttle, fade, fadeSize, onMeasureChange, onContextChange, className, style, children, ...rest }: BoxProps) => any;
+export declare const Box: ({ display, round, gap, includeRectsFor, padding, margin, observe, observeOffscreen, throttle, fade, fadeSize, onMeasureChange, onContextChange, className, style, children, ...rest }: BoxProps) => any;

package/dist/components/Box.js

@@ -18,9 +18,11 @@ const Box = ({
   display,
   round,
   gap,
+  includeRectsFor,
   padding,
   margin,
   observe,
+  observeOffscreen,
   throttle,
   fade,
   fadeSize,
@@ -42,9 +44,11 @@ const Box = ({
       display: display === "block" ? void 0 : display,
       round: roundAttr(round),
       gap: gap != null ? "" : void 0,
+      "include-rects-for": includeRectsFor,
       padding: padding != null ? "" : void 0,
       margin: margin != null ? "" : void 0,
       observe: observeAttr(observe, onMeasureChange, onContextChange),
+      "observe-offscreen": observeOffscreen ? "" : void 0,
       throttle,
       fade: fade ? "" : void 0,
       "fade-size": fade && fadeSize != null ? cssLength(fadeSize) : void 0,

package/dist/components/Expander.d.ts

@@ -23,16 +23,24 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
      *  bare disclosure).
      *  @defaultValue 'secondary' */
     priority?: "primary" | "secondary" | "tertiary";
-    /** Outdent the chevron into the left gutter so the title and body sit
-     *  flush with surrounding content (the docs-header layout). Only takes
-     *  effect with `priority="tertiary"` — on the filled priorities the
-     *  container edge has to bound the chevron, so it's a no-op there. */
+    /** Align the title and body with surrounding content on a tertiary
+     *  expander. With the default start indicator, the mark hangs in the
+     *  gutter; an end indicator stays inside its edge. */
     outdent?: boolean;
-    /** Header actions (e.g. buttons, tags) rendered at the end of the
-     *  header row, OUTSIDE the toggle trigger — clicking them never
-     *  toggles, they're separately focusable, and screen readers see them
-     *  as separate controls. */
+    /** Header actions rendered outside the toggle trigger. With an end
+     *  indicator, actions sit between the title and indicator. */
     actions?: React.ReactNode;
+    /** Built-in disclosure mark, a decorative node, or separate closed/open
+     *  visuals. Other primitive values leave the indicator empty. Custom nodes
+     *  are passive; use `actions` for controls.
+     *  @defaultValue 'chevron' */
+    indicator?: "chevron" | "triangle" | "plus" | React.ReactNode | {
+        closed: React.ReactNode;
+        open: React.ReactNode;
+    };
+    /** Place the disclosure mark before the title or after the actions.
+     *  @defaultValue 'start' */
+    indicatorPlacement?: "start" | "end";
     /** Disables the header: not clickable or focusable, hover affordance
      *  off, text dimmed. The open state freezes as-is — disabling an open
      *  expander keeps it open. `actions` stay live; disable them
@@ -76,4 +84,4 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
  * giving real controlled semantics (a consumer can reject a toggle). See
  * STATEFUL-COMPONENTS.md.
  */
-export declare const Expander: ({ title, level, tone, priority, outdent, actions, disabled, round, open, defaultOpen, onStateChange, className, style, children, ...rest }: ExpanderProps) => any;
+export declare const Expander: ({ title, level, tone, priority, outdent, actions, indicator, indicatorPlacement, disabled, round, open, defaultOpen, onStateChange, className, style, children, ...rest }: ExpanderProps) => any;

package/dist/components/Expander.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { nativeStateChange, neutralToneAttr, toneStyle, roundStyle, roundAttr } from "../anta_helpers";
 const Expander = ({
   title,
@@ -7,6 +7,8 @@ const Expander = ({
   priority,
   outdent,
   actions,
+  indicator,
+  indicatorPlacement,
   disabled,
   round,
   open,
@@ -18,6 +20,10 @@ const Expander = ({
   ...rest
 }) => {
   const controlled = open !== void 0;
+  const presetIndicator = typeof indicator === "string" && (indicator === "chevron" || indicator === "triangle" || indicator === "plus") ? indicator : void 0;
+  const pairedIndicator = indicator != null && typeof indicator === "object" && "closed" in indicator && "open" in indicator ? indicator : void 0;
+  const useCustomSlot = indicator != null && !presetIndicator && !pairedIndicator;
+  const customIndicator = typeof indicator === "object" ? indicator : null;
   const computedStyle = roundStyle(round, "--expander-round", toneStyle(tone, "--expander-tone-source", style));
   const titleNode = typeof title === "object" && title !== null ? /* @__PURE__ */ jsx("span", { slot: "title", style: { display: "contents" }, children: title }) : /* @__PURE__ */ jsx("a-expander-summary", { slot: "title", children: title });
   return /* @__PURE__ */ jsxs(
@@ -31,6 +37,8 @@ const Expander = ({
       outdent: outdent ? "" : void 0,
       round: roundAttr(round),
       disabled: disabled ? "" : void 0,
+      indicator: presetIndicator,
+      "indicator-placement": indicatorPlacement && indicatorPlacement !== "start" ? indicatorPlacement : void 0,
       onstatechange: onStateChange ? (e) => {
         const { event, detail, isOwn } = nativeStateChange(e);
         if (isOwn && detail)
@@ -45,6 +53,11 @@ const Expander = ({
       children: [
         titleNode,
         actions != null && /* @__PURE__ */ jsx("span", { slot: "actions", children: actions }),
+        pairedIndicator && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { slot: "indicator", "data-when": "closed", "aria-hidden": "true", inert: true, children: pairedIndicator.closed }),
+          /* @__PURE__ */ jsx("span", { slot: "indicator", "data-when": "open", "aria-hidden": "true", inert: true, children: pairedIndicator.open })
+        ] }),
+        useCustomSlot && /* @__PURE__ */ jsx("span", { slot: "indicator", "aria-hidden": "true", inert: true, children: customIndicator }),
         /* @__PURE__ */ jsx("a-expander-details", { children })
       ]
     }

package/dist/elements/a-box.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@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[padding]{padding:var(--box-padding, 0px);@supports (padding: attr(padding type(*))){--box-padding: attr(padding type(*), 0px)}}a-box[margin]{margin:var(--box-margin, 0px);@supports (margin: attr(margin type(*))){--box-margin: attr(margin type(*), 0px)}}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 )}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@property --box-fade-start-x-strength{syntax: "<number>"; inherits: false; initial-value: 0;}@property --box-fade-end-x-strength{syntax: "<number>"; inherits: false; initial-value: 0;}@property --box-fade-start-y-strength{syntax: "<number>"; inherits: false; initial-value: 0;}@property --box-fade-end-y-strength{syntax: "<number>"; inherits: false; initial-value: 0;}@layer anta.components{a-box{display:block;min-width:0;position:relative}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[padding]{padding:var(--box-padding, 0px);@supports (padding: attr(padding type(*))){--box-padding: attr(padding type(*), 0px)}}a-box[margin]{margin:var(--box-margin, 0px);@supports (margin: attr(margin type(*))){--box-margin: attr(margin type(*), 0px)}}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-left-strength: var(--box-fade-start-x-strength);--box-fade-right-strength: var(--box-fade-end-x-strength);transition:--box-fade-start-x-strength .14s ease-out,--box-fade-end-x-strength .14s ease-out,--box-fade-start-y-strength .14s ease-out,--box-fade-end-y-strength .14s ease-out}a-box[fade]:state(fade-mask-active){mask-image:linear-gradient(#000,#000),linear-gradient(to right,rgb(0 0 0 / var(--box-fade-left-strength)),transparent var(--box-fade-size),transparent calc(100% - var(--box-fade-size)),rgb(0 0 0 / var(--box-fade-right-strength))),linear-gradient(to bottom,rgb(0 0 0 / var(--box-fade-start-y-strength)),transparent var(--box-fade-size),transparent calc(100% - var(--box-fade-size)),rgb(0 0 0 / var(--box-fade-end-y-strength)));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-left-strength: var(--box-fade-end-x-strength);--box-fade-right-strength: var(--box-fade-start-x-strength)}a-box[fade]:state(hidden-end-x){--box-fade-end-x-strength: 1}a-box[fade]:state(hidden-start-x){--box-fade-start-x-strength: 1}a-box[fade]:state(hidden-end-y){--box-fade-end-y-strength: 1}a-box[fade]:state(hidden-start-y){--box-fade-start-y-strength: 1}@media(prefers-reduced-motion:reduce){a-box[fade]{transition:none}}}

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

@@ -11,6 +11,8 @@ import './a-box.css';
  * measurement fields or presets, including `context` and `all`. `fade` keeps
  * clipping states current without selecting event fields. A box with neither
  * runs no observers at all, including the shared visibility observer.
+ * `observe-offscreen` opts out of the pause: measurement keeps running while
+ * the box is off screen, and the box skips the visibility observer entirely.
  * The `measurement` / `context` / `isTruncated` getters still read on demand.
  *
  * Attributes rather than "is a listener attached" on purpose. A listener tally

package/dist/elements/a-box.js

@@ -1,8 +1,9 @@
 import { HTMLElementBase } from "../anta_helpers";
-import { throttle } from "es-toolkit";
+import { isEqual, throttle } from "es-toolkit";
 import { boxObservation } from "../box-observation";
 import "./a-box.css";
 const stores = /* @__PURE__ */ new WeakMap();
+const FADE_TRANSITION_MS = 140;
 const MODE_CLASS = /(?:^|\s)(?:dark|light)(?:\s|$)/;
 function hasModeClass(element) {
   return element.classList.contains("dark") || element.classList.contains("light");
@@ -200,21 +201,13 @@ function deviceSnapshot(navigator) {
     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]));
+  return a !== void 0 && Object.keys(b).every((key) => isEqual(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))
+    Object.entries(current).filter(([key, value]) => !isEqual(previous[key], value))
   );
 }
 function px(value) {
@@ -264,7 +257,7 @@ function rounded(value) {
   return Math.round(value * 100) / 100;
 }
 class ABoxElement extends HTMLElementBase {
-  static observedAttributes = ["fade", "observe", "throttle"];
+  static observedAttributes = ["fade", "observe", "observe-offscreen", "throttle"];
   #internals = this.attachInternals?.();
   #store;
   #resizeObserver;
@@ -276,9 +269,10 @@ class ABoxElement extends HTMLElementBase {
   #measurementFields = /* @__PURE__ */ new Set();
   #watchContent = false;
   #watchScroll = false;
-  // Filtering and throttling compare against the last event, not the last read.
+  // Filtering compares against the last event, not the last read.
   #reportedMeasurement;
   #throttledReport;
+  #fadeMaskTimer;
   #context;
   #measuring = false;
   #clips = false;
@@ -298,6 +292,7 @@ class ABoxElement extends HTMLElementBase {
     this.#sync();
   }
   disconnectedCallback() {
+    this.#clearFadeMask();
     this.#stopMeasuring();
     this.#stopReportingContext();
     this.#store?.unobserveVisibility(this);
@@ -311,8 +306,9 @@ class ABoxElement extends HTMLElementBase {
      and the later connect would see the flags already set and skip it. */
   attributeChangedCallback(name, previous, current) {
     if (previous === current) return;
+    if (name === "fade" && current === null) this.#clearFadeMask();
     if (!this.#store) return;
-    if (name === "fade" || name === "observe") this.#sync();
+    if (name === "fade" || name === "observe" || name === "observe-offscreen") this.#sync();
     if (name === "throttle") this.#configureThrottle();
     if (name === "observe" || name === "throttle") this.#queueMeasurement();
   }
@@ -327,7 +323,7 @@ class ABoxElement extends HTMLElementBase {
   }
   /** Allows a nested `Tooltip truncatedOnly` to use Box's clipping decision. */
   get isTruncated() {
-    const measurement = this.#readMeasurement();
+    const measurement = this.#readMeasurement(false);
     return measurement.clippedX || measurement.clippedY;
   }
   /** Called by the per-window context cache. It is intentionally not a JSX prop. */
@@ -355,11 +351,12 @@ class ABoxElement extends HTMLElementBase {
     this.#watchContent = this.hasAttribute("fade") || content;
     this.#watchScroll = this.hasAttribute("fade") || scroll;
     const wantsMeasurement = this.hasAttribute("fade") || fields.size > 0;
-    const measure = this.isConnected && wantsMeasurement && (this.#visible ?? this.hasAttribute("fade"));
+    const offscreen = this.hasAttribute("observe-offscreen");
+    const measure = this.isConnected && wantsMeasurement && (offscreen || (this.#visible ?? this.hasAttribute("fade")));
     if (measure) this.#startMeasuring();
     else this.#stopMeasuring();
     if (this.#measuring) this.#syncMeasurementSources();
-    if (this.isConnected && wantsMeasurement) this.#store?.observeVisibility(this);
+    if (this.isConnected && wantsMeasurement && !offscreen) this.#store?.observeVisibility(this);
     else this.#store?.unobserveVisibility(this);
     if (this.isConnected && wantsContext) this.#startReportingContext();
     else this.#stopReportingContext();
@@ -391,7 +388,7 @@ class ABoxElement extends HTMLElementBase {
     this.#resizeObserver = new this.view.ResizeObserver(this.#queueMeasurement);
     this.#resizeObserver.observe(this);
     this.doc.fonts?.addEventListener("loadingdone", this.#queueMeasurement);
-    this.#measurement = this.#readMeasurement();
+    this.#measurement = this.#readMeasurement(false);
     this.#setMeasurementStates(this.#measurement);
     this.#syncChildObservation();
     this.#initialMeasurement = true;
@@ -488,7 +485,8 @@ class ABoxElement extends HTMLElementBase {
     this.#frame = this.view.requestAnimationFrame(() => {
       this.#frame = void 0;
       if (!this.#measuring) return;
-      this.#reportMeasurement();
+      if (this.#throttledReport) this.#throttledReport();
+      else this.#reportMeasurement();
     });
   };
   #queueContext = () => {
@@ -502,7 +500,30 @@ class ABoxElement extends HTMLElementBase {
       this.#reportContext(initial);
     });
   };
-  #readMeasurement() {
+  #readRects(rect) {
+    let rects = [];
+    const selector = this.getAttribute("include-rects-for");
+    if (selector) {
+      try {
+        const boxRect = rect ?? this.getBoundingClientRect();
+        rects = Array.from(this.querySelectorAll(selector), (element) => {
+          const target = element.getBoundingClientRect();
+          return {
+            top: rounded(target.top - boxRect.top),
+            right: rounded(target.right - boxRect.left),
+            bottom: rounded(target.bottom - boxRect.top),
+            left: rounded(target.left - boxRect.left),
+            width: rounded(target.width),
+            height: rounded(target.height)
+          };
+        });
+      } catch (error) {
+        if (!(error instanceof this.view.DOMException) || error.name !== "SyntaxError") throw error;
+      }
+    }
+    return rects;
+  }
+  #readMeasurement(includeRects = true) {
     const rect = this.getBoundingClientRect();
     const clientWidth = this.clientWidth;
     const clientHeight = this.clientHeight;
@@ -524,6 +545,7 @@ class ABoxElement extends HTMLElementBase {
     return {
       width: rounded(rect.width),
       height: rounded(rect.height),
+      rects: includeRects ? this.#readRects(rect) : [],
       clientWidth,
       clientHeight,
       scrollWidth,
@@ -559,7 +581,7 @@ class ABoxElement extends HTMLElementBase {
     this.#throttledReport = void 0;
     const interval = Number(this.getAttribute("throttle"));
     if (this.#measuring && Number.isFinite(interval) && interval > 0) {
-      this.#throttledReport = throttle(this.#emitMeasurement, Math.min(interval, 2147483647));
+      this.#throttledReport = throttle(() => this.#reportMeasurement(), Math.min(interval, 2147483647));
     }
   }
   #hasMeasurementChange(current) {
@@ -572,27 +594,22 @@ class ABoxElement extends HTMLElementBase {
     return false;
   }
   #reportMeasurement() {
-    const current = this.#readMeasurement();
+    const current = this.#readMeasurement(false);
     this.#measurement = current;
     this.#setMeasurementStates(current);
     this.#syncChildObservation();
     if (!this.#hasMeasurementChange(current)) return;
-    if (this.#throttledReport) this.#throttledReport();
-    else this.#emitMeasurement();
-  }
-  #emitMeasurement = () => {
-    const current = this.#measurement;
-    if (!this.#measuring || !current || !this.#hasMeasurementChange(current)) return;
+    const snapshot = { ...current, rects: this.#readRects() };
     const initial = this.#initialMeasurement;
     const previous = this.#reportedMeasurement;
     this.#initialMeasurement = false;
-    this.#reportedMeasurement = current;
+    this.#reportedMeasurement = snapshot;
     const detail = {
-      changed: initial ? { ...current } : changed(previous, current),
-      current
+      changed: changed(initial ? void 0 : previous, snapshot),
+      current: snapshot
     };
     this.dispatchEvent(new this.view.CustomEvent("measurechange", { detail }));
-  };
+  }
   #reportContext(initial) {
     const current = this.#readContext();
     const previous = this.#context;
@@ -620,6 +637,31 @@ class ABoxElement extends HTMLElementBase {
     this.#setState("hidden-end-x", measurement.hiddenEndX);
     this.#setState("hidden-start-y", measurement.hiddenStartY);
     this.#setState("hidden-end-y", measurement.hiddenEndY);
+    this.#syncFadeMask(measurement);
+  }
+  #syncFadeMask(measurement) {
+    const hidden = measurement.hiddenStartX || measurement.hiddenEndX || measurement.hiddenStartY || measurement.hiddenEndY;
+    if (hidden && this.hasAttribute("fade")) {
+      if (this.#fadeMaskTimer !== void 0) this.view.clearTimeout(this.#fadeMaskTimer);
+      this.#fadeMaskTimer = void 0;
+      this.#setState("fade-mask-active", true);
+      return;
+    }
+    if (!this.hasAttribute("fade")) {
+      this.#clearFadeMask();
+      return;
+    }
+    if (!this.#internals?.states?.has("fade-mask-active") || this.#fadeMaskTimer !== void 0) return;
+    if (this.view.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      this.#clearFadeMask();
+      return;
+    }
+    this.#fadeMaskTimer = this.view.setTimeout(() => this.#clearFadeMask(), FADE_TRANSITION_MS);
+  }
+  #clearFadeMask() {
+    if (this.#fadeMaskTimer !== void 0) this.view.clearTimeout(this.#fadeMaskTimer);
+    this.#fadeMaskTimer = void 0;
+    this.#setState("fade-mask-active", false);
   }
   #setState(name, active) {
     if (active) this.#internals?.states?.add(name);

package/dist/elements/a-dialog.js

@@ -114,6 +114,8 @@ const SHADOW_STYLE = `
     display: none;
     flex: 0 0 auto;
     padding: var(--dialog-header-padding, 18px 20px 8px);
+    overflow: clip;
+    overflow-wrap: anywhere;
     font-size: 17px;
     font-weight: 560;
     line-height: 24px;

package/dist/elements/a-expander.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-expander,details[data-anta]{--_expander-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3e%3c/svg%3e")}a-expander{--expander-text: var(--text-2);--expander-text-hover: var(--text-1);--expander-bg-secondary: var(--bg-2);--expander-border-secondary: var(--border-5);--expander-bg-primary: var(--bg-4);--expander-border-primary: var(--border-4);--expander-bg: var(--expander-bg-secondary);--expander-border: var(--expander-border-secondary);--expander-bg-hover-lift: .01;--expander-bg-hover: oklch(from var(--expander-bg) calc(l + var(--expander-bg-hover-lift)) c h);--expander-gutter: 24px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--expander-border);border-radius:4px;color:var(--expander-text);background:var(--expander-bg);transition:background-color .1s ease}a-expander[round]{border-radius:var(--expander-round, var(--_expander-round-radius, 999px));@supports (border-radius: attr(probe type(<length>),1px)){--expander-round: attr(round type(<length>))}}a-expander>span[slot=actions]{display:contents}a-expander:not(:defined) a-expander-details{display:none}a-expander:not(:defined)[state=open] a-expander-details,a-expander:not(:defined)[default-state=open] a-expander-details{display:block}a-expander:not(:defined) a-expander-summary{position:relative;padding:6px 4px 6px var(--expander-gutter)}a-expander:not(:defined) a-expander-summary:before{content:"";position:absolute;left:calc(var(--expander-gutter) - 16px - 2px);top:50%;width:16px;height:16px;transform:translateY(-50%);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / contain no-repeat;mask:var(--_expander-chevron) center / contain no-repeat;opacity:.6}a-expander:not(:defined){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}a-expander:not(:defined) a-expander-summary{grid-column:1}a-expander:not(:defined)>[slot=actions]{grid-column:2;display:flex;align-items:center;gap:2px;flex-shrink:0;margin-inline-start:8px;margin-inline-end:4px}a-expander:not(:defined) a-expander-details{grid-column:1 / -1}a-expander-summary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:584.62;letter-spacing:0;text-decoration-line:var(--_summary-underline, none);text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease}a-expander[level="1"] a-expander-summary{font-size:28px;line-height:32px}a-expander[level="2"] a-expander-summary{font-size:24px;line-height:28px}a-expander[level="3"] a-expander-summary{font-size:20px;line-height:24px}a-expander[level="4"] a-expander-summary{font-size:17px;line-height:20px}a-expander[level="6"] a-expander-summary{font-size:13px;line-height:16px}a-expander-details{display:block;padding:2px 4px 6px var(--expander-gutter);line-height:20px;overflow:auto}a-expander[priority=tertiary][outdent] a-expander-details{padding-inline-start:4px;margin-inline-start:-4px}a-expander[priority=primary]{--expander-bg: var(--expander-bg-primary);--expander-border: var(--expander-border-primary)}a-expander[priority=tertiary]{--expander-bg: transparent;--expander-border: transparent}a-expander:not([disabled]):not(:state(open)):hover{background:var(--expander-bg-hover)}a-expander:not([disabled]):not(:state(open)):active{background:var(--expander-bg)}a-expander[priority=tertiary][outdent]{--expander-gutter: 0px}a-expander[tone=brand]{--expander-text: var(--text-2-brand);--expander-text-hover: var(--text-1-brand);--expander-bg-secondary: var(--bg-2-brand);--expander-border-secondary: var(--border-5-brand);--expander-bg-primary: var(--bg-4-brand);--expander-border-primary: var(--border-4-brand)}a-expander[tone=info]{--expander-text: var(--text-2-info);--expander-text-hover: var(--text-1-info);--expander-bg-secondary: var(--bg-2-info);--expander-border-secondary: var(--border-5-info);--expander-bg-primary: var(--bg-4-info);--expander-border-primary: var(--border-4-info)}a-expander[tone=success]{--expander-text: var(--text-2-success);--expander-text-hover: var(--text-1-success);--expander-bg-secondary: var(--bg-2-success);--expander-border-secondary: var(--border-5-success);--expander-bg-primary: var(--bg-4-success);--expander-border-primary: var(--border-4-success)}a-expander[tone=warning]{--expander-text: var(--text-2-warning);--expander-text-hover: var(--text-1-warning);--expander-bg-secondary: var(--bg-2-warning);--expander-border-secondary: var(--border-5-warning);--expander-bg-primary: var(--bg-4-warning);--expander-border-primary: var(--border-4-warning)}a-expander[tone=critical]{--expander-text: var(--text-2-critical);--expander-text-hover: var(--text-1-critical);--expander-bg-secondary: var(--bg-2-critical);--expander-border-secondary: var(--border-5-critical);--expander-bg-primary: var(--bg-4-critical);--expander-border-primary: var(--border-4-critical)}a-expander[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--expander-tone-source: currentColor;--expander-text: light-dark(oklch(from var(--expander-tone-source) .5 .125 h), oklch(from var(--expander-tone-source) .77 .11 h));--expander-text-hover: light-dark(oklch(from var(--expander-tone-source) .4 .11 h), oklch(from var(--expander-tone-source) .85 .1 h));--expander-bg-secondary: light-dark(oklch(from var(--expander-tone-source) .99 .004 h), oklch(from var(--expander-tone-source) .13 .02 h));--expander-border-secondary: light-dark(oklch(from var(--expander-tone-source) .935 .028 h), oklch(from var(--expander-tone-source) .21 .045 h));--expander-bg-primary: light-dark(oklch(from var(--expander-tone-source) .955 .02 h), oklch(from var(--expander-tone-source) .185 .05 h));--expander-border-primary: light-dark(oklch(from var(--expander-tone-source) .9 .04 h), oklch(from var(--expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--expander-tone-source: attr(tone type(<color>), currentColor)}}a-expander[disabled],a-expander[disabled][tone]{--expander-text: light-dark(#afa9b1, #635b65)}details[data-anta]{--native-expander-gutter: 24px;--native-expander-summary-padding-block: 6px;--native-expander-summary-font-size: 15px;--native-expander-summary-line-height: 20px;--native-expander-chevron-size: 16px;--native-expander-text: var(--text-2);--native-expander-text-hover: var(--text-1);--native-expander-bg-secondary: var(--bg-2);--native-expander-border-secondary: var(--border-5);--native-expander-bg-primary: var(--bg-4);--native-expander-border-primary: var(--border-4);--native-expander-round-size: 16px;--native-expander-round: 4px;--native-expander-bg: transparent;--native-expander-border: transparent;display:block;inline-size:100%;box-sizing:border-box;border:0 solid var(--native-expander-border);border-radius:var(--native-expander-round);color:var(--native-expander-text);background:var(--native-expander-bg);font-family:var(--sans-serif);font-size:15px;line-height:var(--native-expander-summary-line-height);transition:background-color .1s ease}details[data-anta][priority=secondary]{--native-expander-bg: var(--native-expander-bg-secondary);--native-expander-border: var(--native-expander-border-secondary);border-width:1px}details[data-anta][priority=primary]{--native-expander-bg: var(--native-expander-bg-primary);--native-expander-border: var(--native-expander-border-primary);border-width:1px}details[data-anta][level="1"]{--native-expander-summary-font-size: 28px;--native-expander-summary-line-height: 32px;--native-expander-round-size: 22px}details[data-anta][level="2"]{--native-expander-summary-font-size: 24px;--native-expander-summary-line-height: 28px;--native-expander-round-size: 20px}details[data-anta][level="3"]{--native-expander-summary-font-size: 20px;--native-expander-summary-line-height: 24px;--native-expander-round-size: 18px}details[data-anta][level="4"]{--native-expander-summary-font-size: 17px;--native-expander-summary-line-height: 20px}details[data-anta][level="6"]{--native-expander-summary-font-size: 13px;--native-expander-summary-line-height: 16px;--native-expander-round-size: 14px}details[data-anta][round]{--native-expander-round: var(--native-expander-round-size)}details[data-anta][round]:not([round=""]){--native-expander-round: var(--native-expander-round-size);@supports (border-radius: attr(probe type(<length>),1px)){--native-expander-round: attr(round type(<length>), var(--native-expander-round-size))}}details[data-anta][priority=tertiary][outdent]{--native-expander-gutter: 0px}details[data-anta][tone=brand]{--native-expander-text: var(--text-2-brand);--native-expander-text-hover: var(--text-1-brand);--native-expander-bg-secondary: var(--bg-2-brand);--native-expander-border-secondary: var(--border-5-brand);--native-expander-bg-primary: var(--bg-4-brand);--native-expander-border-primary: var(--border-4-brand)}details[data-anta][tone=info]{--native-expander-text: var(--text-2-info);--native-expander-text-hover: var(--text-1-info);--native-expander-bg-secondary: var(--bg-2-info);--native-expander-border-secondary: var(--border-5-info);--native-expander-bg-primary: var(--bg-4-info);--native-expander-border-primary: var(--border-4-info)}details[data-anta][tone=success]{--native-expander-text: var(--text-2-success);--native-expander-text-hover: var(--text-1-success);--native-expander-bg-secondary: var(--bg-2-success);--native-expander-border-secondary: var(--border-5-success);--native-expander-bg-primary: var(--bg-4-success);--native-expander-border-primary: var(--border-4-success)}details[data-anta][tone=warning]{--native-expander-text: var(--text-2-warning);--native-expander-text-hover: var(--text-1-warning);--native-expander-bg-secondary: var(--bg-2-warning);--native-expander-border-secondary: var(--border-5-warning);--native-expander-bg-primary: var(--bg-4-warning);--native-expander-border-primary: var(--border-4-warning)}details[data-anta][tone=critical]{--native-expander-text: var(--text-2-critical);--native-expander-text-hover: var(--text-1-critical);--native-expander-bg-secondary: var(--bg-2-critical);--native-expander-border-secondary: var(--border-5-critical);--native-expander-bg-primary: var(--bg-4-critical);--native-expander-border-primary: var(--border-4-critical)}details[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-expander-tone-source: currentColor;--native-expander-text: light-dark(oklch(from var(--native-expander-tone-source) .5 .125 h), oklch(from var(--native-expander-tone-source) .77 .11 h));--native-expander-text-hover: light-dark(oklch(from var(--native-expander-tone-source) .4 .11 h), oklch(from var(--native-expander-tone-source) .85 .1 h));--native-expander-bg-secondary: light-dark(oklch(from var(--native-expander-tone-source) .99 .004 h), oklch(from var(--native-expander-tone-source) .13 .02 h));--native-expander-border-secondary: light-dark(oklch(from var(--native-expander-tone-source) .935 .028 h), oklch(from var(--native-expander-tone-source) .21 .045 h));--native-expander-bg-primary: light-dark(oklch(from var(--native-expander-tone-source) .955 .02 h), oklch(from var(--native-expander-tone-source) .185 .05 h));--native-expander-border-primary: light-dark(oklch(from var(--native-expander-tone-source) .9 .04 h), oklch(from var(--native-expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--native-expander-tone-source: attr(tone type(<color>), currentColor)}}details[data-anta]>summary{position:relative;box-sizing:border-box;display:block;min-width:0;padding:var(--native-expander-summary-padding-block) 4px var(--native-expander-summary-padding-block) var(--native-expander-gutter);color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;font-size:var(--native-expander-summary-font-size);line-height:var(--native-expander-summary-line-height);font-weight:584.62;letter-spacing:0;list-style:none;text-decoration-line:none;transition:color .15s ease}details[data-anta]>summary::-webkit-details-marker{display:none}details[data-anta]>summary::marker{content:""}details[data-anta]>summary:before{content:"";position:absolute;left:calc(var(--native-expander-gutter) - var(--native-expander-chevron-size) - 2px);top:var(--native-expander-summary-padding-block);width:var(--native-expander-chevron-size);height:var(--native-expander-summary-line-height);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;opacity:.6;transform:rotate(0);transition:transform .15s ease,opacity .15s ease,background-color .15s ease}details[data-anta][open]>summary:before{opacity:1;transform:rotate(90deg)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):hover{background:oklch(from var(--native-expander-bg) calc(l + .01) c h)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):active{background:var(--native-expander-bg)}details[data-anta]>summary:hover{color:var(--native-expander-text-hover);text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}details[data-anta]>summary:hover:before{opacity:1}details[data-anta]>summary:active{color:var(--native-expander-text)}details[data-anta]>summary:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}details[data-anta]>:not(summary){display:block;padding:2px 4px 6px var(--native-expander-gutter);line-height:20px}@media(forced-colors:active){:is(a-expander,details[data-anta]){border-color:CanvasText}:is(a-expander,details[data-anta]):not([priority=primary],[priority=tertiary]){border-style:dashed}:is(a-expander,details[data-anta])[priority=tertiary]{border-color:Canvas}a-expander::part(summary):before,a-expander:not(:defined) a-expander-summary:before,details[data-anta]>summary:before{forced-color-adjust:none;background-color:CanvasText}a-expander[disabled]::part(summary):before{background-color:GrayText}}}a-expander-details>p:last-child,a-expander-details>:not([slot])>p:last-child,details[data-anta]>p:last-child,details[data-anta]>:not(summary)>p:last-child{margin-block-end:0}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-expander,details[data-anta]{--_expander-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18 6-6-6-6'/%3e%3c/svg%3e")}a-expander{--expander-text: var(--text-2);--expander-text-hover: var(--text-1);--expander-bg-secondary: var(--bg-2);--expander-border-secondary: var(--border-5);--expander-bg-primary: var(--bg-4);--expander-border-primary: var(--border-4);--expander-bg: var(--expander-bg-secondary);--expander-border: var(--expander-border-secondary);--expander-bg-hover-lift: .01;--expander-bg-hover: oklch(from var(--expander-bg) calc(l + var(--expander-bg-hover-lift)) c h);--expander-gutter: 24px;--_expander-indicator-size: 16px;--_expander-indicator-edge: 6px;--_expander-indicator-gap: 2px;--_expander-indicator-stroke: 2px;--_expander-indicator-track: calc(var(--_expander-indicator-edge) + var(--_expander-indicator-size) + var(--_expander-indicator-gap));--_expander-indicator-start: calc(var(--expander-gutter) - var(--_expander-indicator-size) - var(--_expander-indicator-gap));--_expander-indicator-mask: var(--_expander-chevron);--_expander-skeleton-indicator-start: var(--_expander-indicator-start);--_expander-skeleton-indicator-end: auto;--_expander-skeleton-indicator-top: 50%;--_expander-skeleton-indicator-transform: translateY(-50%);--_expander-header-padding-block: 6px;--_expander-header-padding-end: 4px;--_expander-actions-gap: 2px;--_expander-actions-start: 8px;--_expander-actions-end: 4px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--expander-border);border-radius:4px;color:var(--expander-text);background:var(--expander-bg);transition:background-color .1s ease}a-expander[indicator-placement=end]{--expander-gutter: 12px;--_expander-skeleton-indicator-start: auto;--_expander-skeleton-indicator-end: var(--_expander-indicator-edge);--_expander-skeleton-indicator-top: 8px;--_expander-skeleton-indicator-transform: rotate(90deg);--_expander-actions-end: var(--_expander-actions-gap)}a-expander[indicator=triangle]{--_expander-indicator-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 2.5 12 8l-7 5.5z'/%3E%3C/svg%3E")}a-expander[indicator=plus]{--_expander-indicator-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 2h2v12H7zM2 7h12v2H2z'/%3E%3C/svg%3E")}a-expander:not(:defined):has(>[slot=indicator]){--_expander-skeleton-indicator-display: none}a-expander[round]{border-radius:var(--expander-round, var(--_expander-round-radius, 999px));@supports (border-radius: attr(probe type(<length>),1px)){--expander-round: attr(round type(<length>))}}a-expander>span[slot=actions]{display:contents}a-expander:not(:defined) a-expander-details{display:none}a-expander:not(:defined)[state=open] a-expander-details,a-expander:not(:defined)[default-state=open] a-expander-details{display:block}a-expander:not(:defined) a-expander-summary{position:relative;padding:var(--_expander-header-padding-block) var(--_expander-header-padding-end) var(--_expander-header-padding-block) var(--expander-gutter)}a-expander:not(:defined) a-expander-summary:before{content:"";display:var(--_expander-skeleton-indicator-display, block);position:absolute;inset-inline-start:var(--_expander-skeleton-indicator-start);inset-inline-end:var(--_expander-skeleton-indicator-end);top:var(--_expander-skeleton-indicator-top);width:var(--_expander-indicator-size);height:var(--_expander-indicator-size);transform:var(--_expander-skeleton-indicator-transform);background-color:currentColor;-webkit-mask:var(--_expander-indicator-mask) center / contain no-repeat;mask:var(--_expander-indicator-mask) center / contain no-repeat;opacity:.6;pointer-events:none}a-expander:not(:defined)[indicator-placement=end] a-expander-summary{position:static;grid-column:1;padding-inline-start:var(--expander-gutter);padding-inline-end:var(--_expander-header-padding-end)}a-expander:not(:defined)>[slot=indicator]{display:grid;place-items:center;position:absolute;inset-inline-start:var(--_expander-indicator-start);top:8px;width:var(--_expander-indicator-size);height:var(--_expander-indicator-size);pointer-events:none}a-expander:not(:defined)[indicator-placement=end]>[slot=indicator]{inset-inline-start:auto;inset-inline-end:var(--_expander-indicator-edge)}a-expander:not(:defined)>[slot=indicator][data-when=open]{display:none}a-expander:not(:defined):is([state=open],[default-state=open])>[slot=indicator][data-when=open]{display:grid}a-expander:not(:defined):is([state=open],[default-state=open])>[slot=indicator][data-when=closed]{display:none}a-expander:not(:defined):is([state=open],[default-state=open])>[slot=indicator]:not([data-when]){transform:rotate(90deg)}a-expander:not(:defined)[indicator-placement=end]:is([state=open],[default-state=open])>[slot=indicator]:not([data-when]){transform:rotate(180deg)}a-expander:not(:defined)[indicator-placement=end]{grid-template-columns:minmax(0,1fr) auto var(--_expander-indicator-track)}a-expander:not(:defined){display:grid;position:relative;grid-template-columns:minmax(0,1fr) auto;align-items:center}a-expander:not(:defined) a-expander-summary{grid-column:1}a-expander:not(:defined)>[slot=actions]{grid-column:2;display:flex;align-items:center;gap:var(--_expander-actions-gap);flex-shrink:0;margin-inline-start:var(--_expander-actions-start);margin-inline-end:var(--_expander-actions-end)}a-expander:not(:defined) a-expander-details{grid-column:1 / -1}a-expander-summary{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:20px;font-weight:584.62;letter-spacing:0;text-decoration-line:var(--_summary-underline, none);text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s ease}a-expander[level="1"] a-expander-summary{font-size:28px;line-height:32px}a-expander[level="2"] a-expander-summary{font-size:24px;line-height:28px}a-expander[level="3"] a-expander-summary{font-size:20px;line-height:24px}a-expander[level="4"] a-expander-summary{font-size:17px;line-height:20px}a-expander[level="6"] a-expander-summary{font-size:13px;line-height:16px}a-expander-details{display:block;padding:2px 4px 6px var(--expander-gutter);line-height:20px;overflow:auto}a-expander[indicator-placement=end] a-expander-details{padding-inline-start:var(--expander-gutter)}a-expander[priority=tertiary][outdent] a-expander-details{padding-inline-start:4px;margin-inline-start:-4px}a-expander[priority=primary]{--expander-bg: var(--expander-bg-primary);--expander-border: var(--expander-border-primary)}a-expander[priority=tertiary]{--expander-bg: transparent;--expander-border: transparent}a-expander:not([disabled]):not(:state(open)):hover{background:var(--expander-bg-hover)}a-expander:not([disabled]):not(:state(open)):active{background:var(--expander-bg)}a-expander[priority=tertiary][outdent]{--expander-gutter: 0px}a-expander[tone=brand]{--expander-text: var(--text-2-brand);--expander-text-hover: var(--text-1-brand);--expander-bg-secondary: var(--bg-2-brand);--expander-border-secondary: var(--border-5-brand);--expander-bg-primary: var(--bg-4-brand);--expander-border-primary: var(--border-4-brand)}a-expander[tone=info]{--expander-text: var(--text-2-info);--expander-text-hover: var(--text-1-info);--expander-bg-secondary: var(--bg-2-info);--expander-border-secondary: var(--border-5-info);--expander-bg-primary: var(--bg-4-info);--expander-border-primary: var(--border-4-info)}a-expander[tone=success]{--expander-text: var(--text-2-success);--expander-text-hover: var(--text-1-success);--expander-bg-secondary: var(--bg-2-success);--expander-border-secondary: var(--border-5-success);--expander-bg-primary: var(--bg-4-success);--expander-border-primary: var(--border-4-success)}a-expander[tone=warning]{--expander-text: var(--text-2-warning);--expander-text-hover: var(--text-1-warning);--expander-bg-secondary: var(--bg-2-warning);--expander-border-secondary: var(--border-5-warning);--expander-bg-primary: var(--bg-4-warning);--expander-border-primary: var(--border-4-warning)}a-expander[tone=critical]{--expander-text: var(--text-2-critical);--expander-text-hover: var(--text-1-critical);--expander-bg-secondary: var(--bg-2-critical);--expander-border-secondary: var(--border-5-critical);--expander-bg-primary: var(--bg-4-critical);--expander-border-primary: var(--border-4-critical)}a-expander[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--expander-tone-source: currentColor;--expander-text: light-dark(oklch(from var(--expander-tone-source) .5 .125 h), oklch(from var(--expander-tone-source) .77 .11 h));--expander-text-hover: light-dark(oklch(from var(--expander-tone-source) .4 .11 h), oklch(from var(--expander-tone-source) .85 .1 h));--expander-bg-secondary: light-dark(oklch(from var(--expander-tone-source) .99 .004 h), oklch(from var(--expander-tone-source) .13 .02 h));--expander-border-secondary: light-dark(oklch(from var(--expander-tone-source) .935 .028 h), oklch(from var(--expander-tone-source) .21 .045 h));--expander-bg-primary: light-dark(oklch(from var(--expander-tone-source) .955 .02 h), oklch(from var(--expander-tone-source) .185 .05 h));--expander-border-primary: light-dark(oklch(from var(--expander-tone-source) .9 .04 h), oklch(from var(--expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--expander-tone-source: attr(tone type(<color>), currentColor)}}a-expander[disabled],a-expander[disabled][tone]{--expander-text: light-dark(#afa9b1, #635b65)}details[data-anta]{--native-expander-gutter: 24px;--native-expander-summary-padding-block: 6px;--native-expander-summary-font-size: 15px;--native-expander-summary-line-height: 20px;--native-expander-chevron-size: 16px;--native-expander-text: var(--text-2);--native-expander-text-hover: var(--text-1);--native-expander-bg-secondary: var(--bg-2);--native-expander-border-secondary: var(--border-5);--native-expander-bg-primary: var(--bg-4);--native-expander-border-primary: var(--border-4);--native-expander-round-size: 16px;--native-expander-round: 4px;--native-expander-bg: transparent;--native-expander-border: transparent;display:block;inline-size:100%;box-sizing:border-box;border:0 solid var(--native-expander-border);border-radius:var(--native-expander-round);color:var(--native-expander-text);background:var(--native-expander-bg);font-family:var(--sans-serif);font-size:15px;line-height:var(--native-expander-summary-line-height);transition:background-color .1s ease}details[data-anta][priority=secondary]{--native-expander-bg: var(--native-expander-bg-secondary);--native-expander-border: var(--native-expander-border-secondary);border-width:1px}details[data-anta][priority=primary]{--native-expander-bg: var(--native-expander-bg-primary);--native-expander-border: var(--native-expander-border-primary);border-width:1px}details[data-anta][level="1"]{--native-expander-summary-font-size: 28px;--native-expander-summary-line-height: 32px;--native-expander-round-size: 22px}details[data-anta][level="2"]{--native-expander-summary-font-size: 24px;--native-expander-summary-line-height: 28px;--native-expander-round-size: 20px}details[data-anta][level="3"]{--native-expander-summary-font-size: 20px;--native-expander-summary-line-height: 24px;--native-expander-round-size: 18px}details[data-anta][level="4"]{--native-expander-summary-font-size: 17px;--native-expander-summary-line-height: 20px}details[data-anta][level="6"]{--native-expander-summary-font-size: 13px;--native-expander-summary-line-height: 16px;--native-expander-round-size: 14px}details[data-anta][round]{--native-expander-round: var(--native-expander-round-size)}details[data-anta][round]:not([round=""]){--native-expander-round: var(--native-expander-round-size);@supports (border-radius: attr(probe type(<length>),1px)){--native-expander-round: attr(round type(<length>), var(--native-expander-round-size))}}details[data-anta][priority=tertiary][outdent]{--native-expander-gutter: 0px}details[data-anta][tone=brand]{--native-expander-text: var(--text-2-brand);--native-expander-text-hover: var(--text-1-brand);--native-expander-bg-secondary: var(--bg-2-brand);--native-expander-border-secondary: var(--border-5-brand);--native-expander-bg-primary: var(--bg-4-brand);--native-expander-border-primary: var(--border-4-brand)}details[data-anta][tone=info]{--native-expander-text: var(--text-2-info);--native-expander-text-hover: var(--text-1-info);--native-expander-bg-secondary: var(--bg-2-info);--native-expander-border-secondary: var(--border-5-info);--native-expander-bg-primary: var(--bg-4-info);--native-expander-border-primary: var(--border-4-info)}details[data-anta][tone=success]{--native-expander-text: var(--text-2-success);--native-expander-text-hover: var(--text-1-success);--native-expander-bg-secondary: var(--bg-2-success);--native-expander-border-secondary: var(--border-5-success);--native-expander-bg-primary: var(--bg-4-success);--native-expander-border-primary: var(--border-4-success)}details[data-anta][tone=warning]{--native-expander-text: var(--text-2-warning);--native-expander-text-hover: var(--text-1-warning);--native-expander-bg-secondary: var(--bg-2-warning);--native-expander-border-secondary: var(--border-5-warning);--native-expander-bg-primary: var(--bg-4-warning);--native-expander-border-primary: var(--border-4-warning)}details[data-anta][tone=critical]{--native-expander-text: var(--text-2-critical);--native-expander-text-hover: var(--text-1-critical);--native-expander-bg-secondary: var(--bg-2-critical);--native-expander-border-secondary: var(--border-5-critical);--native-expander-bg-primary: var(--bg-4-critical);--native-expander-border-primary: var(--border-4-critical)}details[data-anta][tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-expander-tone-source: currentColor;--native-expander-text: light-dark(oklch(from var(--native-expander-tone-source) .5 .125 h), oklch(from var(--native-expander-tone-source) .77 .11 h));--native-expander-text-hover: light-dark(oklch(from var(--native-expander-tone-source) .4 .11 h), oklch(from var(--native-expander-tone-source) .85 .1 h));--native-expander-bg-secondary: light-dark(oklch(from var(--native-expander-tone-source) .99 .004 h), oklch(from var(--native-expander-tone-source) .13 .02 h));--native-expander-border-secondary: light-dark(oklch(from var(--native-expander-tone-source) .935 .028 h), oklch(from var(--native-expander-tone-source) .21 .045 h));--native-expander-bg-primary: light-dark(oklch(from var(--native-expander-tone-source) .955 .02 h), oklch(from var(--native-expander-tone-source) .185 .05 h));--native-expander-border-primary: light-dark(oklch(from var(--native-expander-tone-source) .9 .04 h), oklch(from var(--native-expander-tone-source) .26 .06 h));@supports (color: attr(probe type(<color>),red)){--native-expander-tone-source: attr(tone type(<color>), currentColor)}}details[data-anta]>summary{position:relative;box-sizing:border-box;display:block;min-width:0;padding:var(--native-expander-summary-padding-block) 4px var(--native-expander-summary-padding-block) var(--native-expander-gutter);color:inherit;cursor:pointer;font:inherit;font-variation-settings:inherit;font-size:var(--native-expander-summary-font-size);line-height:var(--native-expander-summary-line-height);font-weight:584.62;letter-spacing:0;list-style:none;text-decoration-line:none;transition:color .15s ease}details[data-anta]>summary::-webkit-details-marker{display:none}details[data-anta]>summary::marker{content:""}details[data-anta]>summary:before{content:"";position:absolute;left:calc(var(--native-expander-gutter) - var(--native-expander-chevron-size) - 2px);top:var(--native-expander-summary-padding-block);width:var(--native-expander-chevron-size);height:var(--native-expander-summary-line-height);background-color:currentColor;-webkit-mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;mask:var(--_expander-chevron) center / var(--native-expander-chevron-size) no-repeat;opacity:.6;transform:rotate(0);transition:transform .15s ease,opacity .15s ease,background-color .15s ease}details[data-anta][open]>summary:before{opacity:1;transform:rotate(90deg)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):hover{background:oklch(from var(--native-expander-bg) calc(l + .01) c h)}details[data-anta]:is([priority=primary],[priority=secondary]):not([open]):active{background:var(--native-expander-bg)}details[data-anta]>summary:hover{color:var(--native-expander-text-hover);text-decoration-line:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in oklch,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}details[data-anta]>summary:hover:before{opacity:1}details[data-anta]>summary:active{color:var(--native-expander-text)}details[data-anta]>summary:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}details[data-anta]>:not(summary){display:block;padding:2px 4px 6px var(--native-expander-gutter);line-height:20px}@media(forced-colors:active){:is(a-expander,details[data-anta]){border-color:CanvasText}:is(a-expander,details[data-anta]):not([priority=primary],[priority=tertiary]){border-style:dashed}:is(a-expander,details[data-anta])[priority=tertiary]{border-color:Canvas}a-expander::part(indicator){forced-color-adjust:none;color:CanvasText}a-expander[disabled]::part(indicator){color:GrayText}a-expander:not(:defined) a-expander-summary:before,details[data-anta]>summary:before{forced-color-adjust:none;background-color:CanvasText}a-expander:not(:defined)[disabled] a-expander-summary:before{background-color:GrayText}}}a-expander-details>p:last-child,a-expander-details>:not([slot])>p:last-child,details[data-anta]>p:last-child,details[data-anta]>:not(summary)>p:last-child{margin-block-end:0}