@antadesign/anta 0.3.28 → 0.3.30

package/dist/elements/panel-focus.js

@@ -0,0 +1,86 @@
+import { activeFocus, canFocus, containsFocus, cycleFocus, tabStops } from "./focus";
+import { activeFocus as activeFocus2 } from "./focus";
+const scopes = /* @__PURE__ */ new WeakMap();
+class PanelFocusScope {
+  #stack;
+  #doc;
+  #surface;
+  #previous = null;
+  #lastInside = null;
+  #active = false;
+  #redirecting = false;
+  constructor(surface) {
+    this.#surface = surface;
+    this.#doc = surface.ownerDocument;
+    this.#stack = scopes.get(this.#doc) ?? [];
+    scopes.set(this.#doc, this.#stack);
+  }
+  get #ownsFocus() {
+    return this.#stack.at(-1) === this && this.#surface.matches(":popover-open");
+  }
+  activate(previous) {
+    if (this.#active) return;
+    this.#active = true;
+    this.#previous = previous;
+    this.#lastInside = containsFocus(this.#surface, previous) ? previous : null;
+    this.#stack.push(this);
+    this.#doc.addEventListener("focusin", this.#onFocus, true);
+    this.#doc.addEventListener("keydown", this.#onKeyDown);
+  }
+  focusInside(preferred = this.#lastInside) {
+    if (!this.#ownsFocus) return;
+    const target = containsFocus(this.#surface, preferred) && canFocus(preferred) ? preferred : tabStops(this.#surface)[0] ?? this.#surface;
+    target.focus({ preventScroll: true });
+  }
+  /** Remove listeners before hiding the popover, then restore focus after layout. */
+  deactivate() {
+    if (!this.#active) return () => {
+    };
+    const current = activeFocus(this.#doc);
+    const restore = this.#stack.at(-1) === this && containsFocus(this.#surface, current);
+    const previous = this.#previous;
+    const target = previous && !containsFocus(this.#surface, previous) ? previous : current;
+    this.#active = false;
+    const index = this.#stack.indexOf(this);
+    if (index >= 0) this.#stack.splice(index, 1);
+    this.#doc.removeEventListener("focusin", this.#onFocus, true);
+    this.#doc.removeEventListener("keydown", this.#onKeyDown);
+    this.#previous = this.#lastInside = null;
+    return () => {
+      if (!restore) return;
+      if (canFocus(target)) target.focus({ preventScroll: true });
+      else if (canFocus(current)) current.focus({ preventScroll: true });
+      else if (canFocus(previous)) previous.focus({ preventScroll: true });
+      else this.#stack.at(-1)?.focusInside();
+    };
+  }
+  #inModal(path) {
+    for (const node of path) {
+      if (node === this.#surface) return false;
+      if (node instanceof Element && node.matches(":modal")) return true;
+    }
+    return false;
+  }
+  #onFocus = (event) => {
+    if (!this.#ownsFocus || this.#redirecting) return;
+    const path = event.composedPath();
+    if (this.#inModal(path)) return;
+    if (path.includes(this.#surface)) {
+      this.#lastInside = activeFocus(this.#doc);
+      return;
+    }
+    this.#redirecting = true;
+    this.focusInside();
+    this.#redirecting = false;
+  };
+  #onKeyDown = (event) => {
+    if (!this.#ownsFocus || event.defaultPrevented || event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+    if (this.#inModal(event.composedPath())) return;
+    event.preventDefault();
+    cycleFocus(tabStops(this.#surface), activeFocus(this.#doc), event.shiftKey, this.#surface);
+  };
+}
+export {
+  PanelFocusScope,
+  activeFocus2 as activeFocus
+};

package/dist/elements/shadow-aria.d.ts

@@ -0,0 +1,10 @@
+/** Standard semantic attributes that a shadow-hosted control may consume from
+ * its custom-element host. Keeping the public spelling standard lets raw HTML,
+ * React, Preact, and custom JSX runtimes use the same API. */
+export declare const SHADOW_ARIA_ATTRIBUTES: readonly ['role', 'aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-braillelabel', 'aria-brailleroledescription', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex', 'aria-colspan', 'aria-controls', 'aria-current', 'aria-description', 'aria-describedby', 'aria-details', 'aria-disabled', 'aria-dropeffect', 'aria-errormessage', 'aria-expanded', 'aria-flowto', 'aria-grabbed', 'aria-haspopup', 'aria-hidden', 'aria-invalid', 'aria-keyshortcuts', 'aria-label', 'aria-labelledby', 'aria-level', 'aria-live', 'aria-modal', 'aria-multiline', 'aria-multiselectable', 'aria-orientation', 'aria-owns', 'aria-placeholder', 'aria-posinset', 'aria-pressed', 'aria-readonly', 'aria-relevant', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria-valuetext'];
+export type ShadowAriaAttribute = (typeof SHADOW_ARIA_ATTRIBUTES)[number];
+export declare const SHADOW_ARIA_ATTRIBUTE_SET: Set<string>;
+export declare function ariaAttributeProperty(name: ShadowAriaAttribute): string;
+/** Apply one consumed host attribute to a shadow control. ID-reference ARIA
+ * uses element reflection so a shadow control can reference the host's tree. */
+export declare function applyShadowAria(host: Element, target: Element, name: ShadowAriaAttribute, value: string | null): void;

package/dist/elements/shadow-aria.js

@@ -0,0 +1,155 @@
+const SHADOW_ARIA_ATTRIBUTES = [
+  "role",
+  "aria-activedescendant",
+  "aria-atomic",
+  "aria-autocomplete",
+  "aria-braillelabel",
+  "aria-brailleroledescription",
+  "aria-busy",
+  "aria-checked",
+  "aria-colcount",
+  "aria-colindex",
+  "aria-colspan",
+  "aria-controls",
+  "aria-current",
+  "aria-description",
+  "aria-describedby",
+  "aria-details",
+  "aria-disabled",
+  "aria-dropeffect",
+  "aria-errormessage",
+  "aria-expanded",
+  "aria-flowto",
+  "aria-grabbed",
+  "aria-haspopup",
+  "aria-hidden",
+  "aria-invalid",
+  "aria-keyshortcuts",
+  "aria-label",
+  "aria-labelledby",
+  "aria-level",
+  "aria-live",
+  "aria-modal",
+  "aria-multiline",
+  "aria-multiselectable",
+  "aria-orientation",
+  "aria-owns",
+  "aria-placeholder",
+  "aria-posinset",
+  "aria-pressed",
+  "aria-readonly",
+  "aria-relevant",
+  "aria-required",
+  "aria-roledescription",
+  "aria-rowcount",
+  "aria-rowindex",
+  "aria-rowspan",
+  "aria-selected",
+  "aria-setsize",
+  "aria-sort",
+  "aria-valuemax",
+  "aria-valuemin",
+  "aria-valuenow",
+  "aria-valuetext"
+];
+const SHADOW_ARIA_ATTRIBUTE_SET = new Set(SHADOW_ARIA_ATTRIBUTES);
+const SHADOW_ARIA_PROPERTIES = {
+  role: "role",
+  "aria-activedescendant": "ariaActiveDescendant",
+  "aria-atomic": "ariaAtomic",
+  "aria-autocomplete": "ariaAutoComplete",
+  "aria-braillelabel": "ariaBrailleLabel",
+  "aria-brailleroledescription": "ariaBrailleRoleDescription",
+  "aria-busy": "ariaBusy",
+  "aria-checked": "ariaChecked",
+  "aria-colcount": "ariaColCount",
+  "aria-colindex": "ariaColIndex",
+  "aria-colspan": "ariaColSpan",
+  "aria-controls": "ariaControls",
+  "aria-current": "ariaCurrent",
+  "aria-description": "ariaDescription",
+  "aria-describedby": "ariaDescribedBy",
+  "aria-details": "ariaDetails",
+  "aria-disabled": "ariaDisabled",
+  "aria-dropeffect": "ariaDropEffect",
+  "aria-errormessage": "ariaErrorMessage",
+  "aria-expanded": "ariaExpanded",
+  "aria-flowto": "ariaFlowTo",
+  "aria-grabbed": "ariaGrabbed",
+  "aria-haspopup": "ariaHasPopup",
+  "aria-hidden": "ariaHidden",
+  "aria-invalid": "ariaInvalid",
+  "aria-keyshortcuts": "ariaKeyShortcuts",
+  "aria-label": "ariaLabel",
+  "aria-labelledby": "ariaLabelledBy",
+  "aria-level": "ariaLevel",
+  "aria-live": "ariaLive",
+  "aria-modal": "ariaModal",
+  "aria-multiline": "ariaMultiLine",
+  "aria-multiselectable": "ariaMultiSelectable",
+  "aria-orientation": "ariaOrientation",
+  "aria-owns": "ariaOwns",
+  "aria-placeholder": "ariaPlaceholder",
+  "aria-posinset": "ariaPosInSet",
+  "aria-pressed": "ariaPressed",
+  "aria-readonly": "ariaReadOnly",
+  "aria-relevant": "ariaRelevant",
+  "aria-required": "ariaRequired",
+  "aria-roledescription": "ariaRoleDescription",
+  "aria-rowcount": "ariaRowCount",
+  "aria-rowindex": "ariaRowIndex",
+  "aria-rowspan": "ariaRowSpan",
+  "aria-selected": "ariaSelected",
+  "aria-setsize": "ariaSetSize",
+  "aria-sort": "ariaSort",
+  "aria-valuemax": "ariaValueMax",
+  "aria-valuemin": "ariaValueMin",
+  "aria-valuenow": "ariaValueNow",
+  "aria-valuetext": "ariaValueText"
+};
+function ariaAttributeProperty(name) {
+  return SHADOW_ARIA_PROPERTIES[name];
+}
+const ELEMENT_REFERENCE_PROPERTIES = {
+  "aria-activedescendant": "ariaActiveDescendantElement",
+  "aria-controls": "ariaControlsElements",
+  "aria-describedby": "ariaDescribedByElements",
+  "aria-details": "ariaDetailsElements",
+  "aria-errormessage": "ariaErrorMessageElements",
+  "aria-flowto": "ariaFlowToElements",
+  "aria-labelledby": "ariaLabelledByElements",
+  "aria-owns": "ariaOwnsElements"
+};
+function referencedElements(host, value) {
+  const root = host.getRootNode();
+  if (!("getElementById" in root)) return [];
+  return value.trim().split(/\s+/).filter(Boolean).map((id) => root.getElementById(id)).filter((element) => element != null);
+}
+function applyShadowAria(host, target, name, value) {
+  const property = ELEMENT_REFERENCE_PROPERTIES[name];
+  if (!property) {
+    if (value == null) target.removeAttribute(name);
+    else target.setAttribute(name, value);
+    return;
+  }
+  const reflected = target;
+  const elements = value == null ? [] : referencedElements(host, value);
+  try {
+    if (!(property in reflected)) throw new Error("ARIA element reflection is unavailable");
+    if (name === "aria-activedescendant") {
+      reflected.ariaActiveDescendantElement = elements[0] ?? null;
+    } else {
+      ;
+      reflected[property] = elements;
+    }
+  } catch {
+    if (value == null) target.removeAttribute(name);
+    else target.setAttribute(name, value);
+  }
+}
+export {
+  SHADOW_ARIA_ATTRIBUTES,
+  SHADOW_ARIA_ATTRIBUTE_SET,
+  applyShadowAria,
+  ariaAttributeProperty
+};

package/dist/general_types.d.ts

@@ -272,6 +272,22 @@ export interface ATextAttributes extends BaseAttributes {
     /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
     'aria-expanded'?: boolean | 'true' | 'false';
 }
+/** Panel presentation state. Normal panels remain visible in their parent layout. */
+export type PanelState = 'normal' | 'maximized';
+/** Attributes for the persistent viewport-capable container. */
+export interface APanelAttributes extends BaseAttributes {
+    state?: PanelState;
+    'default-state'?: PanelState;
+    onstatechange?: (event: CustomEvent<{
+        next: PanelState;
+        prev: PanelState;
+    }> | {
+        nativeEvent: CustomEvent<{
+            next: PanelState;
+            prev: PanelState;
+        }>;
+    }) => void;
+}
 /** Attributes for the opt-in light-DOM capture surface. */
 export interface ACaptureAttributes extends BaseAttributes {
     /** Space-separated accepted wheel directions. Bare means all; `none` preserves settling while declining input. */
@@ -318,20 +334,28 @@ export interface ABoxAttributes extends BaseAttributes {
      *  typed `attr()` read it from `--box-gap` in the host's inline style
      *  instead, which is what the JSX wrapper always sets. */
     gap?: boolean | '' | number | string;
+    /** CSS padding shorthand (`padding="8px 16px"`). Without typed `attr()`
+     * support, set `--box-padding` as well. The JSX wrapper supplies it. */
+    padding?: boolean | '' | number | string;
+    /** CSS margin shorthand (`margin="0 auto"`). Without typed `attr()`
+     * support, set `--box-margin` as well. The JSX wrapper supplies it. */
+    margin?: boolean | '' | number | string;
     /** Masks every edge that currently hides clipped content. */
     fade?: boolean | '';
-    /** What the box watches. `size` reports geometry and overflow through
-     *  `measurechange` and the CSS states; `context` reports the rendering
-     *  environment through `contextchange`; `all`, or a bare `observe`, does both.
-     *  A box without it (and without `fade`) runs no observers, so a listener
-     *  alone reports nothing. The JSX wrapper sets it from `observe` and from the
-     *  handlers you pass. */
-    observe?: 'size' | 'context' | 'all' | '';
+    /** Space-separated selections: `width`, `height`, `size`, `context`,
+     * `overflow`, `edges`, `scroll`, or `all`, in any order. `size` selects
+     * width and height; `edges` selects edge transitions. A bare
+     * attribute means `all`. Omission runs no observers unless `fade` is set;
+     * a native event listener alone does not enable observation. */
+    observe?: string;
+    /** Minimum interval between measurement events in milliseconds. Omit or
+     * pass `0` for frame-based reporting. Invalid or negative values use `0`. */
+    throttle?: number | string;
     /** Depth of that mask, as a length value (`fade-size="2rem"`). Engines
      *  without typed `attr()` read it from `--box-fade-size` in the host's
      *  inline style instead, which is what the JSX wrapper always sets. */
     'fade-size'?: number | string;
-    /** Native event fired when geometry or overflow changes. */
+    /** Native event fired when a selected measurement field changes. */
     onmeasurechange?: (event: CustomEvent<BoxMeasurementChange> | {
         nativeEvent: CustomEvent<BoxMeasurementChange>;
     }) => void;
@@ -520,7 +544,7 @@ export interface ATooltipAttributes extends BaseAttributes {
     /** Show delay in milliseconds. Never use `0` — use ~`50`. Defaults to 300. */
     delay?: number | string;
     /** Preferred side; auto-flips when there's no room. Defaults to `'bottom'`. */
-    placement?: 'top' | 'bottom';
+    placement?: 'top' | 'bottom' | 'left';
     /** Follow the cursor instead of pinning under the anchor (pinned is the
      *  default). Presence-based (`''` on, omit off). */
     follow?: boolean | '';
@@ -647,6 +671,9 @@ export interface ASwitchAttributes extends BaseAttributes {
  * for styling, and `:state(filled)` / `:state(invalid)` as CSS hooks.
  */
 export interface AInputAttributes extends BaseAttributes {
+    /** Standard ARIA attributes describe the native input/textarea in the shadow
+     * tree and are delegated there when the element upgrades. */
+    [key: `aria-${string}`]: unknown;
     /** Controlled value (string). Reflected to the shadow control only when it
      *  differs, so the caret survives re-renders. */
     value?: string;
@@ -669,6 +696,8 @@ export interface AInputAttributes extends BaseAttributes {
     disabled?: boolean | '';
     /** Read-only state. Presence-based. */
     readonly?: boolean | '';
+    /** Render a native button inside the field surface. Presence-based. */
+    button?: boolean | '';
     /** Required — drives native validity. Presence-based. */
     required?: boolean | '';
     /** Dim the leading/trailing adornments at rest (0.6); they brighten to full
@@ -767,6 +796,9 @@ export interface ASliderAttributes extends BaseAttributes {
 /** Attributes for the `<a-input-time>` custom element — a segmented wall-clock
  *  time field (hour / minute / AM-PM native text-input sections in one box). */
 export interface AInputTimeAttributes extends BaseAttributes {
+    /** Standard naming/description ARIA describes the complete segmented field;
+     * invalid/error state is delegated to its focusable segments. */
+    [key: `aria-${string}`]: unknown;
     /** Controlled value — 24-hour `"HH:mm"`, `''` when incomplete. */
     value?: string;
     /** Focus this field when its containing `a-dialog` opens. Presence-based. */
@@ -912,11 +944,9 @@ export interface AMenuAttributes extends BaseAttributes {
         next: 'open' | 'closed';
         prev: 'open' | 'closed';
     }>) => void;
-    /** Combobox-mode cursor report — fired when the active option changes (arrow
-     *  keys, or the list re-filtering), with `detail.id` the active option's `id`
-     *  (`null` when none). The element owns the keyboard cursor but must NOT write
-     *  `aria-activedescendant` on the (light-DOM) filter field itself; the reactive
-     *  layer that owns the field (e.g. `Select`) listens here and reflects it.
+    /** Combobox-mode cursor report for custom fields and observers. Fires when
+     *  the active option changes, with `detail.id` containing an authored option
+     *  ID or `null`. Built-in Anta Inputs receive a direct ARIA element relation.
      *  All-lowercase so React/Preact bind it to the CustomEvent. */
     onactivedescendant?: (e: CustomEvent<{
         id: string | null;
@@ -1265,11 +1295,10 @@ export interface ATabsAttributes extends BaseAttributes {
 /**
  * Attributes for the `<a-tabpanel>` styled tag.
  *
- * `<a-tabpanel>` has no JS — it's a CSS-only styled element. The `Tabs` wrapper renders
- * it, pairs it to its tab via id, and toggles visibility declaratively: `hidden`
- * (display:none) or `data-hide="visibility"` (keeps the layout box), plus `inert` while
- * hidden. Low-level attributes; for the typed JSX wrapper use `TabPanel` (inside `Tabs`)
- * from `@antadesign/anta`.
+ * `<a-tabpanel>` finds its sibling `<a-tabs>`, exposes its active state through
+ * `ElementInternals`, and points its accessible label at the matching tab. Low-level
+ * attributes; for the typed JSX wrapper use `TabPanel` (inside `Tabs`) from
+ * `@antadesign/anta`.
  */
 export interface ATabpanelAttributes extends BaseAttributes {
     /** Pairs the panel with the tab of the same value. The element reads its

package/dist/generate-icons.mjs

@@ -65,6 +65,9 @@ export async function generate({ input, output = '.', name = 'a-icon.shapes', in
   const cssLines = [
     '/* Auto-generated by @antadesign/anta. Do not edit by hand. */',
     '',
+    '@layer base, anta, components, utilities;',
+    '@layer anta.reset, anta.components, anta.theme;',
+    '',
     '@layer anta.components {',
     '',
   ]

package/dist/index.d.ts

@@ -30,8 +30,11 @@ export { Box } from './components/Box';
 export type { BoxProps } from './components/Box';
 export { Capture } from './components/Capture';
 export type { CaptureProps } from './components/Capture';
+export { Panel } from './components/Panel';
+export type { PanelProps } from './components/Panel';
+export type { PanelState } from './general_types';
 export type { CaptureInputCancelReason, CaptureInputDirection, CaptureInputDirections, CaptureInputGeometry, CaptureInputModifier, CapturePan, CapturePanInertia, CapturePanInput, CapturePointerActivationReason, CapturePointerCapture, CapturePointerInput, CapturePointerStart, CapturePointerType, CaptureWheelActivation, CaptureWheelActivationReason, CaptureWheelInput, CaptureWheelSettle, SerializedMouseEvent, SerializedPointerEvent, SerializedWheelEvent, } from './capture-types';
-export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
+export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxObservation, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
 export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { Tag } from './components/Tag';

package/dist/index.js

@@ -17,6 +17,7 @@ import { Loader } from "./components/Loader";
 import { Text } from "./components/Text";
 import { Box } from "./components/Box";
 import { Capture } from "./components/Capture";
+import { Panel } from "./components/Panel";
 import { Title } from "./components/Title";
 import { Tag } from "./components/Tag";
 import { Icon } from "./components/Icon";
@@ -93,6 +94,7 @@ export {
   MenuItem,
   MenuItemCopy,
   MenuSeparator,
+  Panel,
   Progress,
   RadioGroup,
   Select,

package/dist/jsx-runtime.d.ts

@@ -8,6 +8,10 @@ type JsxFunction = {
 type UseState = <S>(initial: S | (() => S)) => [S, (next: S | ((prev: S) => S)) => void];
 type UseId = () => string;
 type UseMemo = <T>(factory: () => T, deps: unknown[]) => T;
+type UseRef = <T>(initial: T) => {
+    current: T;
+};
+type UseLayoutEffect = (effect: () => void | (() => void), deps?: unknown[]) => void;
 type UseSyncExternalStore = <T>(subscribe: (onChange: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T) => T;
 declare let _Fragment: ComponentType;
 /**
@@ -33,6 +37,8 @@ export declare function configure(jsx: JsxFunction, Fragment?: ComponentType, ho
     useState?: UseState;
     useId?: UseId;
     useMemo?: UseMemo;
+    useRef?: UseRef;
+    useLayoutEffect?: UseLayoutEffect;
     useSyncExternalStore?: UseSyncExternalStore;
 }): void;
 /** Hooks indirection so wrappers depend on the configured renderer, not a hard
@@ -40,11 +46,15 @@ export declare function configure(jsx: JsxFunction, Fragment?: ComponentType, ho
 export declare function useState<S>(initial: S | (() => S)): [S, (next: S | ((prev: S) => S)) => void];
 export declare function useId(): string;
 export declare function useMemo<T>(factory: () => T, deps: unknown[]): T;
+export declare function useRef<T>(initial: T): {
+    current: T;
+};
+export declare function useLayoutEffect(effect: () => void | (() => void), deps?: unknown[]): void;
 export declare function useSyncExternalStore<T>(subscribe: (onChange: () => void) => () => void, getSnapshot: () => T, getServerSnapshot?: () => T): T;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ABoxAttributes, ACaptureAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
+import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ABoxAttributes, ACaptureAttributes, APanelAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -62,6 +72,7 @@ export interface AntaIntrinsicElements {
     'a-text': ATextAttributes;
     'a-box': ABoxAttributes;
     'a-capture': ACaptureAttributes;
+    'a-panel': APanelAttributes;
     'a-title': ATitleAttributes;
     'a-tag': ATagAttributes;
     'a-tag-label': BaseAttributes;
@@ -101,6 +112,14 @@ export interface AntaIntrinsicElements {
     'a-menu-separator': BaseAttributes;
     'a-menu-header': BaseAttributes;
     'a-menu-footer': BaseAttributes;
+    'a-select-field': BaseAttributes & {
+        size?: string;
+        status?: string;
+        disabled?: boolean | '';
+    };
+    'a-select-label': BaseAttributes;
+    'a-select-hint': BaseAttributes;
+    'a-select-leading': BaseAttributes;
     'a-select-header': BaseAttributes;
     'a-select-footer': BaseAttributes;
     'a-select-chevron': BaseAttributes & {

package/dist/jsx-runtime.js

@@ -4,6 +4,8 @@ let _Fragment = React.Fragment;
 let _useState = React.useState;
 let _useId = React.useId;
 let _useMemo = React.useMemo;
+let _useRef = React.useRef;
+let _useLayoutEffect = React.useLayoutEffect;
 let _useSyncExternalStore = React.useSyncExternalStore;
 function configure(jsx2, Fragment, hooks) {
   _jsx = jsx2;
@@ -11,6 +13,8 @@ function configure(jsx2, Fragment, hooks) {
   if (hooks?.useState) _useState = hooks.useState;
   if (hooks?.useId) _useId = hooks.useId;
   if (hooks?.useMemo) _useMemo = hooks.useMemo;
+  if (hooks?.useRef) _useRef = hooks.useRef;
+  if (hooks?.useLayoutEffect) _useLayoutEffect = hooks.useLayoutEffect;
   if (hooks?.useSyncExternalStore) _useSyncExternalStore = hooks.useSyncExternalStore;
 }
 function useState(initial) {
@@ -22,6 +26,12 @@ function useId() {
 function useMemo(factory, deps) {
   return _useMemo(factory, deps);
 }
+function useRef(initial) {
+  return _useRef(initial);
+}
+function useLayoutEffect(effect, deps) {
+  return _useLayoutEffect(effect, deps);
+}
 function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
   return _useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
@@ -47,7 +57,9 @@ export {
   jsx,
   jsxs,
   useId,
+  useLayoutEffect,
   useMemo,
+  useRef,
   useState,
   useSyncExternalStore
 };

package/dist/reset.css

@@ -1 +1 @@
-@layer anta.reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;font-variation-settings:inherit}:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}html{color:var(--text-2);font-family:var(--sans-serif);line-height:calc(22 / 15);-webkit-tap-highlight-color:transparent}body{background:var(--bg-2)}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}b,strong{font-weight:600}dfn{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 50%,transparent)}mark{color:color-mix(in oklch,black 90%,transparent);background-color:light-dark(hsl(55 100% 61.85%),hsl(55 100% 35%));border-radius:2px}del{color:var(--text-2-critical);text-decoration:line-through}ins{color:var(--text-2-success);text-decoration:none}var,dt{font-style:italic;font-weight:600}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}small,figcaption{font-size:calc(13em / 15)}figcaption{color:var(--text-3)}hr{border:0;border-block-start:1px solid var(--border-4)}code{font-family:var(--monospace);font-size:.933em;line-height:1em;color:inherit;background:light-dark(color-mix(in oklch,currentColor 6%,transparent),color-mix(in oklch,currentColor 10%,transparent));border:none;padding:.25em .4ch .2em;border-radius:3px}pre{padding:10px 1rem 6px;border:1px solid var(--border-5);border-radius:6px;background:var(--bg-3);color:var(--text-1);font-family:var(--monospace);font-size:13px;font-weight:440;line-height:20px;overflow-x:auto}pre code{background:none;padding:0;font:inherit;font-variation-settings:inherit}code,samp,pre{letter-spacing:0}p,ul,ol,blockquote,dl,pre,figure{margin-block-end:1rem}:is(p,ul,ol,blockquote,dl,pre,figure):last-child{margin-block-end:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}blockquote{border-left:3px solid var(--text-5);padding-left:calc(2ch - 3px)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:light-dark(color-mix(in oklch,var(--focus-ring) 20%,transparent),color-mix(in oklch,var(--focus-ring) 30%,transparent))}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.reset{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;font-variation-settings:inherit}:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}html{color:var(--text-2);font-family:var(--sans-serif);line-height:calc(22 / 15);-webkit-tap-highlight-color:transparent}body{background:var(--bg-2)}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}b,strong{font-weight:600}dfn{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 50%,transparent)}mark{color:color-mix(in oklch,black 90%,transparent);background-color:light-dark(hsl(55 100% 61.85%),hsl(55 100% 35%));border-radius:2px}del{color:var(--text-2-critical);text-decoration:line-through}ins{color:var(--text-2-success);text-decoration:none}var,dt{font-style:italic;font-weight:600}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}small,figcaption{font-size:calc(13em / 15)}figcaption{color:var(--text-3)}hr{border:0;border-block-start:1px solid var(--border-4)}code{font-family:var(--monospace);font-size:.933em;line-height:1em;color:inherit;background:light-dark(color-mix(in oklch,currentColor 6%,transparent),color-mix(in oklch,currentColor 10%,transparent));border:none;padding:.25em .4ch .2em;border-radius:3px}pre{padding:10px 1rem 6px;border:1px solid var(--border-5);border-radius:6px;background:var(--bg-3);color:var(--text-1);font-family:var(--monospace);font-size:13px;font-weight:440;line-height:20px;overflow-x:auto}pre code{background:none;padding:0;font:inherit;font-variation-settings:inherit}code,samp,pre{letter-spacing:0}p,ul,ol,blockquote,dl,pre,figure{margin-block-end:1rem}:is(p,ul,ol,blockquote,dl,pre,figure):last-child{margin-block-end:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}blockquote{border-left:3px solid var(--text-5);padding-left:calc(2ch - 3px)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:light-dark(color-mix(in oklch,var(--focus-ring) 20%,transparent),color-mix(in oklch,var(--focus-ring) 30%,transparent))}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}

package/dist/theme-antithesis.css

@@ -1 +1 @@
-@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 0;font-display:swap}@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:italic;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 11;font-display:swap}@font-face{font-family:Stringer;src:url(https://assets.anta.design/fonts/Stringer-Regular-Web.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Upright.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Italic.woff2) format("woff2");font-style:italic;font-weight:400 700;font-display:swap}@layer anta.reset,anta.components,anta.theme;:root,.light{--sans-serif: "TT Interphases Pro Variable", sans-serif;--serif: "Stringer", serif;--monospace: "Antithesis Mono", ui-monospace, monospace;font-variation-settings:"slnt" 0}:root,.light{--anta-seed-brand: #cc4636;--anta-seed-neutral: #65605b}@layer anta.theme{:is(address,cite,dfn,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){letter-spacing:.05ch}a-input{--_input-adornment-font-stretch: 88%}a-tag{font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt";letter-spacing:.02ch}a-tag[allcaps]{font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt";letter-spacing:.08ch}:is(h1,h2,h3,a-title[level="1"],a-title[level="2"],a-title[level="3"]){font-family:var(--serif)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):not([round]){--_radius: 999px}a-input:not([round])::part(field),a-input:not([round]):not(:defined):after{border-radius:0}:is(input[data-anta]:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=reset],[type=submit],[type=image],[type=hidden]),textarea[data-anta],select[data-anta]):not([round]){--native-field-round: 0px}a-tag{border-radius:1px}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:normal;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 0;font-display:swap}@font-face{font-family:TT Interphases Pro Variable;src:url(https://assets.anta.design/fonts/TT_Interphases_Pro_Variable.woff2) format("woff2");font-style:italic;font-weight:100 900;font-stretch:75% 100%;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"slnt" 11;font-display:swap}@font-face{font-family:Stringer;src:url(https://assets.anta.design/fonts/Stringer-Regular-Web.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Upright.woff2) format("woff2");font-style:normal;font-weight:400 700;font-display:swap}@font-face{font-family:Antithesis Mono;src:url(https://assets.anta.design/fonts/Antithesis_mono_VF_Italic.woff2) format("woff2");font-style:italic;font-weight:400 700;font-display:swap}:root,.light{--sans-serif: "TT Interphases Pro Variable", sans-serif;--serif: "Stringer", serif;--monospace: "Antithesis Mono", ui-monospace, monospace;font-variation-settings:"slnt" 0}:root,.light{--anta-seed-brand: #cc4636;--anta-seed-neutral: #65605b}@layer anta.theme{:is(address,cite,em,i,var,dt){font-variation-settings:"slnt" 11;font-synthesis:none}dfn{font-variation-settings:"slnt" 0}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]),a-tab{font-stretch:88%}a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit]){letter-spacing:.05ch}a-input{--_input-adornment-font-stretch: 88%}a-tag{font-feature-settings:"tnum" 1,"ss05" 1,"lnum","ss01","ss04","case","calt";letter-spacing:.02ch}a-tag[allcaps]{font-feature-settings:"tnum" 1,"ss05" 1,"ss01","case","calt";letter-spacing:.08ch}:is(h1,h2,h3,a-title[level="1"],a-title[level="2"],a-title[level="3"]){font-family:var(--serif)}:is(a-button,a[role=button][data-anta],button[data-anta],input[data-anta]:is([type=reset],[type=submit])):not([round]){--_radius: 999px}a-input:not([round])::part(field),a-input:not([round]):not(:defined):after{border-radius:0}:is(input[data-anta]:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=reset],[type=submit],[type=image],[type=hidden]),textarea[data-anta],select[data-anta]):not([round]){--native-field-round: 0px}a-tag{border-radius:1px}}