@antadesign/anta 0.3.3 → 0.3.4

package/dist/components/TabPanel.d.ts

@@ -1,22 +1,30 @@
-import type { TabsMounting } from "./Tabs";
-/** A panel paired to the `<Tab>` of the same `value`. A **config component**: `Tabs`
- *  reads these props and renders the underlying `<a-tabpanel>` (id wiring, show/hide,
- *  `inert`, and the mounting strategy are all `Tabs`' job). */
+/**
+ * A tab panel inside `<Tabs>`. Renders a self-managing `<a-tabpanel>` — the element
+ * finds its `<a-tabs>` (its flat sibling under the same parent — `Tabs` renders the
+ * strip and panels with no wrapper), matches by `value`, and shows/hides itself
+ * off-DOM. This wrapper is a pure projection: it sets the static ARIA (`role`,
+ * `tabindex`, `value`) and passes `children` straight through; `Tabs` never reads
+ * or toggles it.
+ *
+ * Use it as a direct child of `<Tabs>`, paired to an `options` entry by `value`.
+ * For a strip and panels in different layout regions (no shared parent), or to
+ * unmount an inactive panel (the old `mounting="active" | "lazy"`), drive selection
+ * with a controlled `value` and render the content yourself — see the Tabs docs.
+ */
 export interface TabPanelProps {
-    /** Pairs this panel with the `<Tab value="…">` of the same value. */
+    /** Pairs this panel with the tab (`options` entry) of the same `value`. */
     value: string;
     /** Panel content — arbitrary React/Preact. */
     children?: React.ReactNode;
-    /** Override the `<Tabs mounting>` strategy for just this panel. See `TabsMounting`. */
-    mounting?: TabsMounting;
+    /** How this panel hides while inactive: `display` (default — removed from layout
+     *  and the a11y tree) or `visibility` (keeps its layout box, to measure it or
+     *  avoid reflow). Both stay mounted; to *not render* an inactive panel, render it
+     *  conditionally off a controlled `value` (see the Tabs docs).
+     *  @defaultValue display */
+    hideMode?: "display" | "visibility";
     /** CSS class on the rendered `<a-tabpanel>`. */
     className?: string;
     /** Inline style on the rendered `<a-tabpanel>`. */
     style?: React.CSSProperties;
 }
-/**
- * A tab panel inside `<Tabs>`. Configuration only — `Tabs` reads its props and renders
- * the real `<a-tabpanel>`, so this component itself produces no DOM. Use it as a direct
- * child of `<Tabs>`; rendering it elsewhere does nothing.
- */
-export declare const TabPanel: (_props: TabPanelProps) => null;
+export declare const TabPanel: ({ value, children, hideMode, className, style }: TabPanelProps) => any;

package/dist/components/TabPanel.js

@@ -1,5 +1,16 @@
-import { markTabsKind } from "../anta_helpers";
-const TabPanel = markTabsKind((_props) => null, "panel");
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const TabPanel = ({ value, children, hideMode, className, style }) => /* @__PURE__ */ jsx(
+  "a-tabpanel",
+  {
+    value,
+    role: "tabpanel",
+    tabIndex: 0,
+    "hide-mode": hideMode === "visibility" ? "visibility" : void 0,
+    class: className,
+    style,
+    children
+  }
+);
 export {
   TabPanel
 };

package/dist/components/Tabs.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from "../general_types";
-import type { TabProps } from "./Tab";
+import type { IconShape } from "../elements/a-icon.shapes";
 /** The element's `statechange` payload — `next`/`prev` are tab values (`null` = none). */
 type StateDetail = {
     next: string | null;
@@ -10,44 +10,58 @@ type StateChangeEvent = CustomEvent<StateDetail>;
 export interface TabsChangeAttrs {
     value: string | null;
 }
-/** One tab as a plain data object for the `options` prop — the array-driven
- *  alternative to `<Tab>` children (mirrors `RadioGroup`'s `options`). Same
- *  fields as `<Tab>` minus `children` (use `label`); `icon` / `iconTrailing`
- *  are icon-shape strings. */
-export type TabOption = Omit<TabProps, "children">;
-/**
- * How `<TabPanel>`s that aren't the active one are handled.
- * - `'display'` *(default)* — all panels mounted; inactive ones hidden via
- *   `display:none`. Preserves panel DOM/form state; correct a11y for free.
- * - `'visibility'` — all mounted; inactive hidden via `visibility:hidden`, so each
- *   panel keeps its layout box (useful to avoid reflow / for measuring).
- * - `'active'` — only the active panel is rendered; React unmounts the rest (state
- *   resets on switch; defers expensive subtrees).
- * - `'lazy'` — a panel mounts on first activation, then stays mounted+hidden.
- */
-export type TabsMounting = "display" | "visibility" | "active" | "lazy";
+/** One tab as a plain data object for the `options` array — the single source `Tabs`
+ *  renders its strip from (like `RadioGroup`'s `options`). `Tabs` reads these fields to
+ *  render the underlying `<a-tab>` (`tabindex`, `role`, and selection are all `Tabs`'
+ *  job, published off-DOM by the element). */
+export interface TabOption {
+    /** This tab's identity — pairs it with the `<TabPanel value="…">` of the same
+     *  value, and the value reported by `onStateChange` / `onChange`. Unique per strip. */
+    value: string;
+    /** Visible label. The string shorthand for the tab's content; for richer content
+     *  pass `children` instead (`label` wins when both are set). */
+    label?: React.ReactNode;
+    /** Tab content when you need more than a string — used if `label` is omitted. */
+    children?: React.ReactNode;
+    /** Leading icon shape, rendered before the label. */
+    icon?: IconShape;
+    /** Trailing icon shape, rendered after the label. */
+    iconTrailing?: IconShape;
+    /** Fully-round just this tab's box. `<Tabs round>` rounds the whole strip
+     *  (tabs + sliding indicator) instead. */
+    round?: boolean;
+    /** Per-tab tone override, same vocabulary as `<Tabs tone>` — colours this one tab's
+     *  label + icons (all priorities/modes, named or custom colour) and, when it's the
+     *  active tab, its indicator. For a **custom literal colour** the sliding indicator can't
+     *  adopt it (the shared moving element can't read a descendant's colour), so a custom tone
+     *  colours the label everywhere and the indicator only in `noslide`; the six **named**
+     *  tones colour both in every mode. Overrides the strip's `tone` for this tab.
+     *  @defaultValue inherits the strip's `tone` */
+    tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Disable just this tab — skipped by keyboard nav and dropped from the tab order
+     *  (a disabled-but-selected tab stays reachable, per the ARIA pattern). */
+    disabled?: boolean;
+}
 /** Public props for `<Tabs>`. */
 export interface TabsProps extends Omit<BaseProps, "onChange"> {
-    /** The strip's contents, as config-only elements `Tabs` reads (they render
-     *  nothing themselves): one `<Tab value="…" label="…">` per tab, and optionally a
-     *  `<TabPanel value="…">` whose `value` matches a tab — `Tabs` then shows that
-     *  panel's body when its tab is active. Omit the panels to use `Tabs` as a bare
-     *  selectable strip. Order is free; tabs and panels can interleave. */
+    /** Optional `<TabPanel value="…">` panels, one per tab value. Each is a
+     *  self-managing `<a-tabpanel>` that shows itself when its `value` is the active
+     *  tab. Omit them to use `Tabs` as a bare selectable strip. To place panels in a
+     *  different layout region, or to unmount an inactive panel, drive selection with
+     *  a controlled `value` and render the content yourself (see the docs). */
     children?: React.ReactNode;
-    /** Tabs as a data array instead of `<Tab>` children (like `RadioGroup`'s
-     *  `options`). When set, the strip renders from these and `<Tab>` children are
-     *  ignored; `<TabPanel>` children still supply panel bodies (matched by `value`).
-     *  Each entry is a `TabOption` (`value`, `label`, `icon`, `iconTrailing`,
-     *  `tone`, `disabled`, `round`). */
+    /** The tabs, as a data array (the strip's single source). Each entry is a
+     *  `TabOption` (`value`, `label` or `children`, `icon`, `iconTrailing`, `tone`,
+     *  `disabled`, `round`). */
     options?: TabOption[];
-    /** Controlled active value — the `value` of the `<Tab>` to mark selected (and, when a
-     *  `<TabPanel value="…">` shares it, the panel to reveal). When set, you own selection:
-     *  the strip renders exactly what this says, and a user pick only *requests* a change
-     *  via `onStateChange` — apply it by updating this prop, reject it by leaving it
-     *  unchanged. Leave undefined (and use `defaultValue`) for uncontrolled. */
+    /** Controlled active value — the tab `value` to mark selected (and, when a
+     *  `<TabPanel value="…">` shares it, the panel to reveal). When set, you own
+     *  selection: the strip renders exactly what this says, and a user pick only
+     *  *requests* a change via `onStateChange` — apply it by updating this prop.
+     *  Leave undefined (and use `defaultValue`) for uncontrolled. */
     value?: string;
-    /** Initial active value for the uncontrolled case — the `value` of the `<Tab>` selected
-     *  on first render. After that `Tabs` owns selection itself. */
+    /** Initial active value for the uncontrolled case. After first render `Tabs`
+     *  owns selection itself. */
     defaultValue?: string;
     /** Fired whenever the active tab changes — event-first. `detail` is
      *  `{ next, prev }` (values; `null` = none). Cancelable: `event.preventDefault()`
@@ -83,16 +97,13 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
      *  is opt-in via CSS); vertical stacks them.
      *  @defaultValue 'horizontal' */
     orientation?: "horizontal" | "vertical";
-    /** How inactive panels are mounted/hidden. Per-panel `<TabPanel mounting>` overrides.
-     *  @defaultValue 'display' */
-    mounting?: TabsMounting;
     /** Disable the sliding indicator. By default the selected-tab indicator animates
      *  between tabs (a single rectangle, via CSS anchor positioning); `noslide` paints it
      *  per tab so it snaps with no movement. (Browsers without anchor positioning get that
      *  per-tab paint automatically — `noslide` is the explicit opt-out.) */
     noslide?: boolean;
     /** Fully-round the tabs and the sliding indicator (and the primary track
-     *  well). Applies strip-wide; a single `<Tab round>` rounds just that tab. A
+     *  well). Applies strip-wide; a single tab's `round` rounds just that tab. A
      *  `number` (px) or CSS length string sets a custom radius on the top-level
      *  track well only — the tab pills + indicator stay fully round. */
     round?: boolean | number | string;
@@ -100,30 +111,37 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
     disabled?: boolean;
 }
 /**
- * `<Tabs>` — a tablist with optional panels, rendered from `<Tab>` / `<TabPanel>`
- * children.
+ * `<Tabs>` — a tablist with optional panels. The strip renders from the `options`
+ * array; panels are `<TabPanel>` children that manage their own visibility.
  *
- * Like `RadioGroup`, this wrapper owns the **declarative** DOM concerns the elements
- * deliberately don't touch — each tab's **`tabindex`** (every enabled tab is its own
- * tab stop), `role`, the `aria-controls`/`aria-labelledby` wiring, and which panel
- * shows (per `mounting`). Selection itself lives in `<a-tabs>` off-DOM (it sets each
- * tab's `selected` property), so the elements never mutate the DOM; this wrapper
- * reflects the current value into panel visibility on re-render.
+ * The strip (`<a-tabs>`) and the panels render as flat siblings — there is no wrapper
+ * element, so `className` / `id` / `style` / `...rest` land on the strip. Laying the
+ * strip out relative to its panels is the consumer's job: a horizontal strip stacks
+ * above the panels in normal flow; for a vertical strip beside them, wrap `<Tabs>` in
+ * your own flex container. Any non-`TabPanel` children render verbatim as siblings too.
  *
- * Controlled (`value` + `onStateChange`) or uncontrolled (`defaultValue`). Drop the
- * `<TabPanel>`s and it's just a selectable strip emitting `statechange` / `change`.
+ * `<a-tabs>` owns selection off-DOM (it sets each tab's `selected` property and the
+ * roving `aria-activedescendant` via `ElementInternals`, writing no attribute to any
+ * tab); this wrapper mirrors the value only to render the strip's roving `tabindex`,
+ * and the panels read it straight from `<a-tabs>`. Controlled (`value` + `onStateChange`)
+ * or uncontrolled (`defaultValue`).
  *
  * Requires `@antadesign/anta/elements` (client-side only).
  *
  * @example
  * ```tsx
- * <Tabs defaultValue="account" label="Settings">
- *   <Tab value="account" label="Account" icon="user" />
- *   <Tab value="security" label="Security" />
+ * <Tabs
+ *   defaultValue="account"
+ *   label="Settings"
+ *   options={[
+ *     { value: "account", label: "Account", icon: "user" },
+ *     { value: "security", label: "Security" },
+ *   ]}
+ * >
  *   <TabPanel value="account"><AccountForm /></TabPanel>
  *   <TabPanel value="security"><SecurityForm /></TabPanel>
  * </Tabs>
  * ```
  */
-export declare const Tabs: ({ children, options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, mounting, noslide, round, disabled, className, style, id, ...rest }: TabsProps) => any;
+export declare const Tabs: ({ children, options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, noslide, round, disabled, className, style, id, ...rest }: TabsProps) => any;
 export {};

package/dist/components/Tabs.js

@@ -1,24 +1,6 @@
-import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { useId, useState, Fragment } from "../jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, wrapLabel, TABS_KIND } from "../anta_helpers";
-import styles from "./Tabs.module.css";
-const flattenChildren = (nodes) => {
-  const out = [];
-  const visit = (n) => {
-    if (n == null || typeof n === "boolean") return;
-    if (Array.isArray(n)) {
-      n.forEach(visit);
-      return;
-    }
-    if (n && n.type === Fragment) {
-      visit(n.props?.children);
-      return;
-    }
-    out.push(n);
-  };
-  visit(nodes);
-  return out;
-};
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useState } from "../jsx-runtime";
+import { nativeStateChange, toneStyle, roundStyle, wrapLabel } from "../anta_helpers";
 const Tabs = ({
   children,
   options,
@@ -34,7 +16,6 @@ const Tabs = ({
   tone,
   size,
   orientation,
-  mounting = "display",
   noslide,
   round,
   disabled,
@@ -46,24 +27,12 @@ const Tabs = ({
   const controlled = value !== void 0;
   const [internalValue, setInternalValue] = useState(defaultValue);
   const currentValue = controlled ? value : internalValue;
-  const [mounted, setMounted] = useState(
-    () => new Set(currentValue != null ? [currentValue] : [])
-  );
-  if (currentValue != null && !mounted.has(currentValue)) {
-    setMounted((m) => m.has(currentValue) ? m : new Set(m).add(currentValue));
-  }
-  const baseId = useId();
-  const tabId = (v) => `${baseId}-tab-${v}`;
-  const panelId = (v) => `${baseId}-panel-${v}`;
-  const items = flattenChildren(children);
-  const tabs = options ? options.map((o) => ({ props: o })) : items.filter((c) => c?.type?.[TABS_KIND] === "tab");
-  const panels = items.filter((c) => c?.type?.[TABS_KIND] === "panel");
-  const panelValues = new Set(panels.map((pan) => pan.props.value));
+  const tabs = options ?? [];
   const seen = /* @__PURE__ */ new Set();
   for (const t of tabs) {
-    if (seen.has(t.props.value))
-      console.warn(`[anta] <Tabs> duplicate <Tab value=${JSON.stringify(t.props.value)}> \u2014 values must be unique.`);
-    seen.add(t.props.value);
+    if (seen.has(t.value))
+      console.warn(`[anta] <Tabs> duplicate option value=${JSON.stringify(t.value)} \u2014 values must be unique.`);
+    seen.add(t.value);
   }
   const onstatechange = (e) => {
     const { event, detail } = nativeStateChange(e);
@@ -78,7 +47,6 @@ const Tabs = ({
     onValueChange?.(e, { value: e.currentTarget?.value ?? null });
   } : void 0;
   const vertical = orientation === "vertical";
-  const needsContainer = panels.length > 0 || vertical;
   const strip = /* @__PURE__ */ jsx(
     "a-tabs",
     {
@@ -99,24 +67,20 @@ const Tabs = ({
       onchange,
       onfocusin: onFocus,
       onfocusout: onBlur,
-      class: needsContainer ? void 0 : className,
-      id: needsContainer ? void 0 : id,
+      class: className,
+      id,
       style: roundStyle(round, "--tabs-round", toneStyle(tone, "--tabs-tone-source", style)),
-      ...needsContainer ? {} : rest,
-      children: tabs.map((t) => {
-        const p = t.props;
+      ...rest,
+      children: tabs.map((p) => {
         const tabDisabled = disabled || p.disabled;
         const isSelected = p.value === currentValue;
-        const hasPanel = panelValues.has(p.value);
         return /* @__PURE__ */ jsxs(
           "a-tab",
           {
             role: "tab",
             value: p.value,
-            id: tabId(p.value),
             tone: p.tone && p.tone !== "neutral" ? p.tone : void 0,
             style: toneStyle(p.tone, "--tabs-tone-source", void 0),
-            "aria-controls": hasPanel ? panelId(p.value) : void 0,
             "aria-disabled": tabDisabled ? "true" : void 0,
             tabIndex: tabDisabled && !isSelected ? -1 : 0,
             disabled: tabDisabled ? "" : void 0,
@@ -132,44 +96,10 @@ const Tabs = ({
       })
     }
   );
-  if (!needsContainer) return strip;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: className ? `${styles.container} ${className}` : styles.container,
-      "data-orientation": vertical ? "vertical" : void 0,
-      id,
-      ...rest,
-      children: [
-        strip,
-        panels.map((pan) => {
-          const p = pan.props;
-          const active = p.value === currentValue;
-          const mode = p.mounting ?? mounting;
-          if (mode === "active" && !active) return null;
-          if (mode === "lazy" && !active && !mounted.has(p.value)) return null;
-          const hidden = !active;
-          const hideByVisibility = hidden && mode === "visibility";
-          return /* @__PURE__ */ jsx(
-            "a-tabpanel",
-            {
-              role: "tabpanel",
-              id: panelId(p.value),
-              "aria-labelledby": tabId(p.value),
-              tabIndex: active ? 0 : void 0,
-              hidden: hidden && !hideByVisibility ? true : void 0,
-              "data-hide": hideByVisibility ? "visibility" : void 0,
-              inert: hidden ? true : void 0,
-              class: p.className,
-              style: p.style,
-              children: p.children
-            },
-            p.value
-          );
-        })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    strip,
+    children
+  ] });
 };
 export {
   Tabs

package/dist/elements/a-checkbox.css

@@ -1 +1 @@
-@layer anta{a-checkbox{--checkbox-gap: 8px;--checkbox-bg: var(--bg-1);--checkbox-fill: #635b65;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #49424c;--checkbox-border-neutral: #d4ced4;--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: #c1b9c1;--checkbox-border-active: #9f99a1;--checkbox-icon: #ffffff;--checkbox-icon-disabled: #c1b9c1;--checkbox-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #44374b 15%, transparent);--checkbox-mask-size: 12px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");--checkbox-label-color: var(--text-2);--checkbox-label-color-disabled: var(--text-4);--checkbox-hint-color: var(--text-4);--checkbox-label-fs: 15px;--checkbox-label-lh: 20px;--checkbox-hint-fs: 13px;--checkbox-hint-lh: 16px;display:inline-grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--checkbox-gap);vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--checkbox-label-color);font-family:var(--sans-serif);font-size:var(--checkbox-label-fs);line-height:var(--checkbox-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:center;box-sizing:border-box;inline-size:16px;block-size:16px;border-radius:4px;background:var(--checkbox-bg);border:1.5px solid var(--checkbox-border);transition:background-color .15s ease-out,border-color .15s ease-out}&[round]{--checkbox-round: attr(round type(<length>), 999px)}&[round]:before{border-radius:var(--checkbox-round, 999px)}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:center;inline-size:16px;block-size:16px;background-color:transparent;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:var(--checkbox-mask-size);mask-size:var(--checkbox-mask-size)}@media(hover:hover)and (pointer:fine){&:not(:disabled):hover:before{border-color:var(--checkbox-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not(:disabled):hover:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-fill-hover);border-color:var(--checkbox-fill-hover)}}&:not(:disabled):active:before{border-color:var(--checkbox-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not(:disabled):active:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-fill-active);border-color:var(--checkbox-fill-active)}&:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-fill);border-color:var(--checkbox-fill)}&:after{background-color:var(--checkbox-icon)}}&:state(checked):after{-webkit-mask-image:var(--checkbox-mask-check);mask-image:var(--checkbox-mask-check)}&:state(indeterminate):after{-webkit-mask-image:var(--checkbox-mask-indeterminate);mask-image:var(--checkbox-mask-indeterminate)}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--checkbox-label-color-disabled);&:before{background:var(--checkbox-bg-disabled);border-color:var(--checkbox-border-disabled);transition:none}&:is(:state(checked),:state(indeterminate)):after{background-color:var(--checkbox-icon-disabled)}a-checkbox-hint{color:var(--checkbox-label-color-disabled)}}&[size=small]{--checkbox-gap: 6px;--checkbox-label-fs: 13px;--checkbox-label-lh: 16px;--checkbox-hint-fs: 12px;--checkbox-hint-lh: 14px;--checkbox-mask-size: 10px;&:before,&:after{inline-size:14px;block-size:14px}}&[size=large]{--checkbox-label-fs: 17px;--checkbox-label-lh: 24px;--checkbox-hint-fs: 15px;--checkbox-hint-lh: 19px;--checkbox-mask-size: 14px;&:before,&:after{inline-size:18px;block-size:18px}}}.dark a-checkbox{--checkbox-mask-size: 13px}.dark a-checkbox[size=small]{--checkbox-mask-size: 11px}.dark a-checkbox[size=large]{--checkbox-mask-size: 15px}a-checkbox-label,a-checkbox-hint{display:block;grid-column:2;min-width:0}a-checkbox-hint{color:var(--checkbox-hint-color);font-size:var(--checkbox-hint-fs);line-height:var(--checkbox-hint-lh);margin-block-start:2px}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-fill: #5f4bc3;--checkbox-fill-hover: #503cb4;--checkbox-fill-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-fill: #635b65;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #49424c}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-fill: #1f6eb2;--checkbox-fill-hover: #1a5b93;--checkbox-fill-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-fill: #2a7e43;--checkbox-fill-hover: #226737;--checkbox-fill-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-fill: #c37416;--checkbox-fill-hover: #ae6613;--checkbox-fill-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-fill: #c9302c;--checkbox-fill-hover: #b02120;--checkbox-fill-active: #a01c1c}a-checkbox[tone]:not([tone=""],[tone=neutral]){--_checkbox-border-base: color-mix(in oklch, var(--checkbox-fill) 70%, var(--checkbox-border-neutral));--checkbox-border: oklch(from var(--_checkbox-border-base) calc(l + .17) c h);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: var(--_checkbox-border-base);.dark &{--checkbox-border: var(--_checkbox-border-base);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: oklch(from var(--_checkbox-border-base) calc(l + .17) c h)}}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: attr(tone type(<color>), transparent)}a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--checkbox-tone-source: attr(tone-selected type(<color>), transparent)}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--checkbox-fill: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-fill-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-fill-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.dark a-checkbox{--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-fill: #534c57;--checkbox-fill-hover: #635b65;--checkbox-fill-active: #938d96;--checkbox-icon-disabled: #635b65;--checkbox-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 15%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-fill: #503cb4;--checkbox-fill-hover: #5f4bc3;--checkbox-fill-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-fill: #534c57;--checkbox-fill-hover: #635b65;--checkbox-fill-active: #938d96}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-fill: #1a5b93;--checkbox-fill-hover: #1f6eb2;--checkbox-fill-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-fill: #226737;--checkbox-fill-hover: #2a7e43;--checkbox-fill-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-fill: #7f410b;--checkbox-fill-hover: #995200;--checkbox-fill-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-fill: #b02120;--checkbox-fill-hover: #c9302c;--checkbox-fill-active: #de4545}}
+@layer anta{a-checkbox{--checkbox-gap: 8px;--checkbox-box-size: 16px;--checkbox-bg: var(--bg-1);--checkbox-fill: #878089;--checkbox-fill-hover: #776e77;--checkbox-fill-active: #635b65;--checkbox-border-neutral: #d4ced4;--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: #c1b9c1;--checkbox-border-active: #9f99a1;--checkbox-icon: #f1eff1;--checkbox-icon-disabled: #c1b9c1;--checkbox-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--checkbox-mask-size: 12px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");--checkbox-label-color: var(--text-2);--checkbox-label-color-disabled: var(--text-4);--checkbox-hint-color: var(--text-3);--checkbox-label-fs: 15px;--checkbox-label-lh: 20px;--checkbox-hint-fs: 13px;--checkbox-hint-lh: 16px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--checkbox-gap);vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--checkbox-label-color);font-family:var(--sans-serif);font-size:var(--checkbox-label-fs);line-height:var(--checkbox-label-lh);font-feature-settings:"ss02","ss05","tnum";&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);box-sizing:border-box;inline-size:16px;block-size:16px;border-radius:4px;background:var(--checkbox-bg);border:1.5px solid var(--checkbox-border);transition:background-color .15s ease-out,border-color .15s ease-out}&[round]{--checkbox-round: attr(round type(<length>), 999px)}&[round]:before{border-radius:var(--checkbox-round, 999px)}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);inline-size:16px;block-size:16px;background-color:transparent;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:var(--checkbox-mask-size);mask-size:var(--checkbox-mask-size)}@media(hover:hover)and (pointer:fine){&:not(:disabled):hover:before{border-color:var(--checkbox-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not(:disabled):hover:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-fill-hover);border-color:var(--checkbox-fill-hover)}}&:not(:disabled):active:before{border-color:var(--checkbox-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not(:disabled):active:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-fill-active);border-color:var(--checkbox-fill-active)}&:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-fill);border-color:var(--checkbox-fill)}&:after{background-color:var(--checkbox-icon)}}&:state(checked):after{-webkit-mask-image:var(--checkbox-mask-check);mask-image:var(--checkbox-mask-check)}&:state(indeterminate):after{-webkit-mask-image:var(--checkbox-mask-indeterminate);mask-image:var(--checkbox-mask-indeterminate)}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--checkbox-label-color-disabled);&:before{background:var(--checkbox-bg-disabled);border-color:var(--checkbox-border-disabled);transition:none}&:is(:state(checked),:state(indeterminate)):after{background-color:var(--checkbox-icon-disabled)}a-checkbox-hint{color:var(--checkbox-label-color-disabled)}}&[size=small]{--checkbox-gap: 6px;--checkbox-box-size: 14px;--checkbox-label-fs: 13px;--checkbox-label-lh: 16px;--checkbox-hint-fs: 12px;--checkbox-hint-lh: 14px;--checkbox-mask-size: 10px;&:before,&:after{inline-size:14px;block-size:14px}}&[size=large]{--checkbox-box-size: 18px;--checkbox-label-fs: 17px;--checkbox-label-lh: 22px;--checkbox-hint-fs: 15px;--checkbox-hint-lh: 19px;--checkbox-mask-size: 14px;&:before,&:after{inline-size:18px;block-size:18px}}}.dark a-checkbox{--checkbox-mask-size: 13px}.dark a-checkbox[size=small]{--checkbox-mask-size: 11px}.dark a-checkbox[size=large]{--checkbox-mask-size: 15px}a-checkbox-label,a-checkbox-hint{display:block;grid-column:2;min-width:0}a-checkbox-hint{color:var(--checkbox-hint-color);font-size:var(--checkbox-hint-fs);line-height:var(--checkbox-hint-lh);margin-block-start:2px}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-fill: #5f4bc3;--checkbox-fill-hover: #503cb4;--checkbox-fill-active: #483493}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-fill: #878089;--checkbox-fill-hover: #776e77;--checkbox-fill-active: #635b65}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-fill: #1f6eb2;--checkbox-fill-hover: #1a5b93;--checkbox-fill-active: #175082}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-fill: #2a7e43;--checkbox-fill-hover: #226737;--checkbox-fill-active: #1f5c31}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-fill: #c37416;--checkbox-fill-hover: #ae6613;--checkbox-fill-active: #995200}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-fill: #c9302c;--checkbox-fill-hover: #b02120;--checkbox-fill-active: #a01c1c}a-checkbox[tone=brand]{--checkbox-bg: #fcfcfe;--checkbox-border: #bcb1f1;--checkbox-border-hover: #9e8eeb;--checkbox-border-active: #9081df}a-checkbox[tone=info]{--checkbox-bg: #fbfcfe;--checkbox-border: #93c5ec;--checkbox-border-hover: #69ace5;--checkbox-border-active: #56a1e1}a-checkbox[tone=success]{--checkbox-bg: #f7fcf9;--checkbox-border: #88d7a0;--checkbox-border-hover: #5bc87b;--checkbox-border-active: #44c169}a-checkbox[tone=warning]{--checkbox-bg: #fefbf6;--checkbox-border: #edb25a;--checkbox-border-hover: #e09127;--checkbox-border-active: #d88118}a-checkbox[tone=critical]{--checkbox-bg: #fefbfb;--checkbox-border: #efa4a4;--checkbox-border-hover: #e87f7f;--checkbox-border-active: #e56c6c}a-checkbox[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-bg: oklch(from var(--checkbox-tone-source) .99 calc(c*.03) h);--_checkbox-border-base: color-mix(in oklch, var(--checkbox-fill) 70%, var(--checkbox-border-neutral));--checkbox-border: oklch(from var(--_checkbox-border-base) calc(l + .17) c h);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: var(--_checkbox-border-base);.dark &{--checkbox-bg: oklch(from var(--checkbox-tone-source) .15 calc(c*.18) h);--checkbox-border: var(--_checkbox-border-base);--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: oklch(from var(--_checkbox-border-base) calc(l + .17) c h)}}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: attr(tone type(<color>), transparent)}a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--checkbox-tone-source: attr(tone-selected type(<color>), transparent)}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--checkbox-fill: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-fill-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-fill-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.dark a-checkbox{--checkbox-border-neutral: #49424c;--checkbox-border-hover: #635b65;--checkbox-border-active: #776e77;--checkbox-fill: #49424c;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #635b65;--checkbox-icon: #d4ced4;--checkbox-icon-disabled: #534c57;--checkbox-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--checkbox-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-checkbox[tone=brand],.dark a-checkbox[tone-selected=brand]{--checkbox-fill: #503cb4;--checkbox-fill-hover: #5f4bc3;--checkbox-fill-active: #7460d7}.dark a-checkbox[tone=neutral],.dark a-checkbox[tone-selected=neutral]{--checkbox-fill: #49424c;--checkbox-fill-hover: #534c57;--checkbox-fill-active: #635b65}.dark a-checkbox[tone=info],.dark a-checkbox[tone-selected=info]{--checkbox-fill: #1a5b93;--checkbox-fill-hover: #1f6eb2;--checkbox-fill-active: #2686d9}.dark a-checkbox[tone=success],.dark a-checkbox[tone-selected=success]{--checkbox-fill: #226737;--checkbox-fill-hover: #2a7e43;--checkbox-fill-active: #329550}.dark a-checkbox[tone=warning],.dark a-checkbox[tone-selected=warning]{--checkbox-fill: #7f410b;--checkbox-fill-hover: #995200;--checkbox-fill-active: #ae6613}.dark a-checkbox[tone=critical],.dark a-checkbox[tone-selected=critical]{--checkbox-fill: #b02120;--checkbox-fill-hover: #c9302c;--checkbox-fill-active: #de4545}.dark a-checkbox[tone=brand]{--checkbox-bg: #0b0916;--checkbox-border: #483493;--checkbox-border-hover: #5f4bc3;--checkbox-border-active: #7460d7}.dark a-checkbox[tone=info]{--checkbox-bg: #040d18;--checkbox-border: #175082;--checkbox-border-hover: #1f6eb2;--checkbox-border-active: #2686d9}.dark a-checkbox[tone=success]{--checkbox-bg: #041008;--checkbox-border: #1f5c31;--checkbox-border-hover: #2a7e43;--checkbox-border-active: #329550}.dark a-checkbox[tone=warning]{--checkbox-bg: #120a03;--checkbox-border: #6a3b0c;--checkbox-border-hover: #995200;--checkbox-border-active: #ae6613}.dark a-checkbox[tone=critical]{--checkbox-bg: #190405;--checkbox-border: #a01c1c;--checkbox-border-hover: #c9302c;--checkbox-border-active: #de4545}}

package/dist/elements/a-input.css

@@ -1 +1 @@
-@layer anta{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined):after{content:"";min-height:28px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border)}a-input[size=small]:not(:defined):after{min-height:24px}a-input[size=large]:not(:defined):after{min-height:32px}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-border-hover: var(--border-1);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-4);--input-hint: var(--text-3);width:100%}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);--input-border-hover: oklch(from var(--input-tone-source) .6 c h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h);--input-border-hover: oklch(from var(--input-tone-source) .6 c h)}}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-border-hover: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-border-hover: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-border-hover: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-border-hover: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-border-hover: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-border-hover: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-border-hover: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-border-hover: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-border-hover: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-border-hover: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-border-hover: #44374b26;--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-border-hover: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-border-hover: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-border-hover: #e4d1ef1f;--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}.dark a-input:not([status]){--input-border: #49424c;--input-border-hover: #635b65}.dark a-input[status=success]{--input-border: var(--border-1-success);--input-border-hover: var(--border-1-success)}}
+@layer anta{a-input:not(:defined){display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px}a-input:not(:defined)>[slot=leading],a-input:not(:defined)>[slot=trailing],a-input:not(:defined)>[slot=clear],a-input:not(:defined)>[slot=hint]{display:none!important}a-input:not(:defined)>[slot=label]{display:block;color:var(--input-label);font-family:var(--sans-serif);font-size:15px;line-height:20px;font-weight:500}a-input[size=small]:not(:defined)>[slot=label]{font-size:13px;line-height:16px}a-input[size=large]:not(:defined)>[slot=label]{font-size:17px;line-height:22px}a-input:not(:defined):after{content:attr(placeholder);display:block;min-height:28px;line-height:28px;padding-inline:7px;border-radius:4px;box-shadow:inset 0 0 0 .5px var(--input-border);color:var(--input-placeholder);font-family:var(--sans-serif);font-size:15px;font-weight:400;font-feature-settings:"ss02","ss05","tnum";font-variation-settings:"wdth" 100,"slnt" 0,"ital" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a-input[value]:not([value=""]):not([type=password]):not(:defined):after{content:attr(value);color:var(--input-text)}a-input[size=small]:not(:defined):after{min-height:24px;line-height:24px;font-size:13px}a-input[size=large]:not(:defined):after{min-height:32px;line-height:32px;font-size:17px}a-input[round]:not(:defined):after{border-radius:var(--input-round, 999px)}a-input{transition:opacity .28s ease-out 40ms}a-input:not(:defined){opacity:.5}@media(prefers-reduced-motion:reduce){a-input{transition:none}}a-input{--input-bg: var(--bg-1);--input-border: var(--border-2);--input-border-hover: var(--border-1);--input-text: var(--text-1);--input-label: var(--text-3);--input-placeholder: var(--text-4);--input-adornment: var(--text-4);--input-hint: var(--text-3);width:100%}a-input[round]{--input-round: attr(round type(<length>), 999px)}a-input[tone]:not([tone=""]){--input-tone-source: attr(tone type(<color>), var(--border-2));--input-border: oklch(from var(--input-tone-source) .7 calc(c*.8) h);--input-border-hover: oklch(from var(--input-tone-source) .6 c h);.dark &{--input-border: oklch(from var(--input-tone-source) .5 calc(c*.8) h);--input-border-hover: oklch(from var(--input-tone-source) .6 c h)}}a-input[status=critical]{--input-bg: #fefbfb;--input-border: #de4545;--input-border-hover: #de4545;--input-hint: #c9302c}a-input[status=warning]{--input-bg: #fefbf6;--input-border: #ae6613;--input-border-hover: #ae6613;--input-hint: #995200}a-input[status=success]{--input-bg: #f7fcf9;--input-border: #329550;--input-border-hover: #329550;--input-hint: #2a7e43}a-input[status=info]{--input-bg: #fbfcfe;--input-border: #2686d9;--input-border-hover: #2686d9;--input-hint: #175082}a-input[status=brand]{--input-bg: #fcfcfe;--input-border: #7460d7;--input-border-hover: #7460d7;--input-hint: #5f4bc3}.dark a-input[status=critical]{--input-bg: #1f0506;--input-border: #c9302c;--input-border-hover: #c9302c;--input-hint: #e25858}.dark a-input[status=warning]{--input-bg: #120a03;--input-border: #995200;--input-border-hover: #995200;--input-hint: #c37416}.dark a-input[status=success]{--input-bg: #041008;--input-border: #2a7e43;--input-border-hover: #2a7e43;--input-hint: #3aab5c}.dark a-input[status=info]{--input-bg: #040d18;--input-border: #1f6eb2;--input-border-hover: #1f6eb2;--input-hint: #3e93dd}.dark a-input[status=brand]{--input-bg: #0b0916;--input-border: #5f4bc3;--input-border-hover: #5f4bc3;--input-hint: #8270db}a-input:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-border-hover: #44374b26;--input-text: var(--text-4);--input-label: var(--text-4);--input-hint: var(--text-5);cursor:not-allowed}a-input[status]:disabled{--input-bg: #44374b12;--input-border: #44374b26;--input-border-hover: #44374b26;--input-hint: var(--text-5)}.dark a-input:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-border-hover: #e4d1ef1f}.dark a-input[status]:disabled{--input-bg: #e4d1ef0d;--input-border: #e4d1ef1f;--input-border-hover: #e4d1ef1f;--input-hint: var(--text-5)}a-input[size=small] a-icon{--icon-size: 14px}a-input[size=large] a-icon{--icon-size: 18px}a-input [slot=hint]>a-icon{margin-block-start:1px}a-input[size=small] [slot=hint]>a-icon{margin-block-start:.5px}a-input[size=large] [slot=hint]>a-icon{margin-block-start:1.5px}.dark a-input:not([status]){--input-border: #49424c;--input-border-hover: #635b65}.dark a-input[status=success]{--input-border: var(--border-1-success);--input-border-hover: var(--border-1-success)}}

package/dist/elements/a-input.js

@@ -92,6 +92,7 @@ const SHADOW_STYLE = `
     color: var(--input-text);
     font-family: var(--sans-serif);
     font-feature-settings: 'ss02', 'ss05', 'tnum';
+    font-variation-settings: 'wdth' 100, 'slnt' 0, 'ital' 0;
     font-size: var(--_fs);
     line-height: var(--_lh);
     font-weight: 400;

package/dist/elements/a-menu-item.css

@@ -1 +1 @@
-@layer anta{a-menu-item:not(:defined){display:none}a-menu-item{--menu-item-color: var(--text-2);--menu-item-icon-color: var(--text-3);--menu-item-hint-color: var(--text-3);--menu-item-hover: 5%;--menu-item-active: 8%;--menu-item-selected: 8%;--menu-item-timing-in: 60ms ease-in-out;--menu-item-timing-out: .28s ease-out;--menu-item-padding-x: 8px;--menu-item-padding-y: 6px;display:flex;flex-shrink:0;align-items:center;gap:.6ch;box-sizing:border-box;width:100%;min-height:28px;padding-block:var(--menu-item-padding-y);padding-inline:var(--menu-item-padding-x);border-radius:var(--radius-sm, 4px);color:var(--menu-item-color);background:transparent;transition:background-color var(--menu-item-timing-out);font:inherit;font-size:14px;line-height:16px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;outline:none}a-menu[round] a-menu-item{border-radius:999px}a-menu-item:hover,a-menu-item:focus-visible,a-menu-item:state(active){background:color-mix(in oklch,currentColor var(--menu-item-hover),transparent);transition:background-color var(--menu-item-timing-in)}a-menu-item:active{background:color-mix(in oklch,currentColor var(--menu-item-active),transparent);transition:none}a-menu-item[selected]{background:color-mix(in oklch,currentColor var(--menu-item-selected),transparent)}a-menu-item:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}a-menu-item>a-menu-item-label,a-menu-item>a-menu-item-text{flex:1 1 auto;min-width:0}a-menu-item>a-menu-item-text{display:flex;flex-direction:column}a-menu-item:has(>a-menu-item-text){align-items:flex-start}a-menu-item-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}a-menu-item-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-block-start:1px;color:var(--menu-item-hint-color);font-size:12px;line-height:15px}a-menu-item>a-icon{flex:none;--icon-size: 16px;color:var(--menu-item-icon-color)}a-menu-item>a-checkbox,a-menu-item>a-radio{flex:none;--checkbox-gap: 0;--radio-gap: 0;pointer-events:none}a-menu-item:has(>:is(a-icon,a-checkbox,a-radio,[data-indicator]):first-child:not(:only-child)){padding-inline-start:var(--menu-item-padding-y)}a-menu-item:not([submenu]):has(>a-icon:last-child:not(:only-child)){padding-inline-end:max(0px,var(--menu-item-padding-x) - 2px)}a-menu-item>kbd{flex:none;margin-left:auto;padding-left:12px;color:var(--text-5);font:inherit;font-size:1em;letter-spacing:.1ch;white-space:nowrap}a-menu-item[submenu]>a-icon:last-of-type{margin-left:auto}a-menu-item[submenu]>a-icon:last-of-type,a-menu-item>a-icon:last-child:not(:only-child){position:relative;inset-inline-end:-2px}a-menu-item[tone=brand],a-menu-item[tone=info],a-menu-item[tone=success],a-menu-item[tone=warning],a-menu-item[tone=critical]{--menu-item-icon-color: var(--menu-item-color)}a-menu-item[tone=brand]{--menu-item-color: var(--text-2-brand);--menu-item-hint-color: var(--text-3-brand)}a-menu-item[tone=info]{--menu-item-color: var(--text-2-info);--menu-item-hint-color: var(--text-3-info)}a-menu-item[tone=success]{--menu-item-color: var(--text-2-success);--menu-item-hint-color: var(--text-3-success)}a-menu-item[tone=warning]{--menu-item-color: var(--text-2-warning);--menu-item-hint-color: var(--text-3-warning)}a-menu-item[tone=critical]{--menu-item-color: var(--text-2-critical);--menu-item-hint-color: var(--text-3-critical)}a-menu-item[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--menu-item-tone-source: attr(tone type(<color>), var(--text-2));--menu-item-color: oklch(from var(--menu-item-tone-source) .45 c h);--menu-item-icon-color: var(--menu-item-color);--menu-item-hint-color: oklch(from var(--menu-item-tone-source) .55 calc(c*.85) h);.dark &{--menu-item-color: oklch(from var(--menu-item-tone-source) .78 c h);--menu-item-hint-color: oklch(from var(--menu-item-tone-source) .68 calc(c*.85) h)}}a-menu-item[disabled]{--menu-item-color: var(--text-5);--menu-item-icon-color: var(--text-5);--menu-item-hint-color: var(--text-5);cursor:default;pointer-events:none}.dark a-menu-item{--menu-item-hover: 10%;--menu-item-active: 14%;--menu-item-selected: 14%}}
+@layer anta{a-menu-item:not(:defined){display:none}a-menu-item{--menu-item-color: var(--text-2);--menu-item-icon-color: var(--text-3);--menu-item-hint-color: var(--text-3);--menu-item-hover: 5%;--menu-item-active: 8%;--menu-item-selected: 8%;--menu-item-timing-in: 60ms ease-in-out;--menu-item-timing-out: .28s ease-out;--menu-item-padding-x: 8px;--menu-item-padding-y: 6px;display:flex;flex-shrink:0;align-items:center;gap:.6ch;box-sizing:border-box;width:100%;min-height:28px;padding-block:var(--menu-item-padding-y);padding-inline:var(--menu-item-padding-x);border-radius:var(--radius-sm, 4px);color:var(--menu-item-color);background:transparent;transition:background-color var(--menu-item-timing-out);font:inherit;font-size:14px;line-height:16px;text-align:left;white-space:nowrap;cursor:pointer;user-select:none;outline:none}a-menu[round] a-menu-item{border-radius:999px}a-menu-item:hover,a-menu-item:focus-visible,a-menu-item:has(>a-menu:state(open)),a-menu-item:state(active){background:color-mix(in oklch,currentColor var(--menu-item-hover),transparent);transition:background-color var(--menu-item-timing-in)}a-menu-item:active{background:color-mix(in oklch,currentColor var(--menu-item-active),transparent);transition:none}a-menu-item[selected]{background:color-mix(in oklch,currentColor var(--menu-item-selected),transparent)}a-menu-item:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}a-menu-item>a-menu-item-label,a-menu-item>a-menu-item-text{flex:1 1 auto;min-width:0}a-menu-item>a-menu-item-text{display:flex;flex-direction:column}a-menu-item:has(>a-menu-item-text){align-items:flex-start}a-menu-item-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}a-menu-item-hint{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;margin-block-start:1px;color:var(--menu-item-hint-color);font-size:12px;line-height:15px}a-menu-item>a-icon{flex:none;--icon-size: 16px;color:var(--menu-item-icon-color)}a-menu-item>a-checkbox,a-menu-item>a-radio{flex:none;--checkbox-gap: 0;--radio-gap: 0;pointer-events:none}a-menu-item:has(>:is(a-icon,a-checkbox,a-radio,[data-indicator]):first-child:not(:only-child)){padding-inline-start:var(--menu-item-padding-y)}a-menu-item:not([submenu]):has(>a-icon:last-child:not(:only-child)){padding-inline-end:max(0px,var(--menu-item-padding-x) - 2px)}a-menu-item>kbd{flex:none;margin-left:auto;padding-left:12px;color:var(--text-5);font:inherit;font-size:1em;letter-spacing:.1ch;white-space:nowrap}a-menu-item[submenu]>a-icon:last-of-type{margin-left:auto}a-menu-item[submenu]>a-icon:last-of-type,a-menu-item>a-icon:last-child:not(:only-child){position:relative;inset-inline-end:-2px}a-menu-item[tone=brand],a-menu-item[tone=info],a-menu-item[tone=success],a-menu-item[tone=warning],a-menu-item[tone=critical]{--menu-item-icon-color: var(--menu-item-color)}a-menu-item[tone=brand]{--menu-item-color: var(--text-2-brand);--menu-item-hint-color: var(--text-3-brand)}a-menu-item[tone=info]{--menu-item-color: var(--text-2-info);--menu-item-hint-color: var(--text-3-info)}a-menu-item[tone=success]{--menu-item-color: var(--text-2-success);--menu-item-hint-color: var(--text-3-success)}a-menu-item[tone=warning]{--menu-item-color: var(--text-2-warning);--menu-item-hint-color: var(--text-3-warning)}a-menu-item[tone=critical]{--menu-item-color: var(--text-2-critical);--menu-item-hint-color: var(--text-3-critical)}a-menu-item[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--menu-item-tone-source: attr(tone type(<color>), var(--text-2));--menu-item-color: oklch(from var(--menu-item-tone-source) .45 c h);--menu-item-icon-color: var(--menu-item-color);--menu-item-hint-color: oklch(from var(--menu-item-tone-source) .55 calc(c*.85) h);.dark &{--menu-item-color: oklch(from var(--menu-item-tone-source) .78 c h);--menu-item-hint-color: oklch(from var(--menu-item-tone-source) .68 calc(c*.85) h)}}a-menu-item[disabled]{--menu-item-color: var(--text-5);--menu-item-icon-color: var(--text-5);--menu-item-hint-color: var(--text-5);cursor:default;pointer-events:none}.dark a-menu-item{--menu-item-hover: 10%;--menu-item-active: 14%;--menu-item-selected: 14%}}

package/dist/elements/a-menu-item.d.ts

@@ -16,12 +16,14 @@ declare global {
  * Enter / Space on a focused item synthesizes a click (the single
  * activation path that flows through the menu's click delegation).
  *
- * Static ARIA (`role="menuitem"`, `tabindex`, `aria-haspopup` and the
- * `aria-expanded="false"` baseline on submenu parents) is added by the
- * `MenuItem` JSX wrapper, never here — the element must stay re-renderable
- * from any reactive engine without churning host attributes. The one dynamic
- * bit, live `aria-expanded` on a submenu parent, is reflected by the nested
- * `a-menu` element, which owns that state (see `reflectExpanded` there).
+ * ARIA (`role="menuitem"`, `tabindex`, `aria-haspopup` on submenu parents) is
+ * added by the `MenuItem` JSX wrapper, never here — the element must stay
+ * re-renderable from any reactive engine, and a web component must not mutate
+ * light DOM (it would desync the worker-thread reactive model that owns the
+ * light tree). So submenu open state is NOT written to the parent's attributes
+ * (no `aria-expanded`): the nested `a-menu` carries its own off-DOM
+ * `:state(open)`, and the parent styles its open branch purely in CSS
+ * (`a-menu-item:has(> a-menu:state(open))`, see `reflectOpen` there).
  *
  * Styling notes (`a-menu-item.css` ships comment-free):
  * - `a-menu-item:not(:defined)` is hidden against the pre-upgrade flash

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

@@ -35,6 +35,7 @@ export declare class AMenuElement extends HTMLElementBase {
      *  but stays visible until the consumer flips `state`. The flag lets the
      *  `closeAll` backstop skip a duplicate emit. Cleared on every show. */
     _dismissNotified: boolean;
+    private internals?;
     private openTimer?;
     private closeTimer?;
     private typeBuffer;
@@ -98,9 +99,9 @@ export declare class AMenuElement extends HTMLElementBase {
      *  Shadow-internal only. */
     private updateScrollFade;
     /** Move the combobox cursor. Sets the item's `active` **property** (off-DOM
-     *  `:state(active)`, no attribute churn) and reflects `aria-activedescendant`
-     *  onto the search field — the same ARIA-state-reflection latitude as
-     *  `aria-expanded` on the anchor. `null` clears the cursor. */
+     *  `:state(active)`, no attribute churn) for the highlight, and REPORTS the
+     *  active id via the `activedescendant` event so the reactive layer can set
+     *  `aria-activedescendant` on the light-DOM field. `null` clears the cursor. */
     private setActive;
     /** Re-seat the cursor on the first option — but only once the filter has input.
      *  An empty filter (e.g. right after opening) shows NO active row, so the first
@@ -175,18 +176,15 @@ export declare class AMenuElement extends HTMLElementBase {
     private hideAnchorTooltip;
     /** Shadow-only hide. */
     _doHide(): void;
-    /** Mirror the open state onto a SUBMENU parent's `aria-expanded`. This is the
-     *  one sanctioned light-DOM ARIA mutation (like `el.focus()`): the anchor is
-     *  an `<a-menu-item>` the `MenuItem` wrapper renders WITH a resting
-     *  `aria-expanded="false"` baseline, so a reactive re-render resets it to a
-     *  valid value and the next open/close re-syncs.
-     *
-     *  A ROOT menu's trigger is a consumer-owned sibling we don't render and have
-     *  no baseline for — writing to it would mutate foreign DOM (and couldn't
-     *  self-heal), so we leave its `aria-expanded` to the consumer. The menu is
-     *  still announced and Esc-dismissable; consumers add `aria-haspopup="menu"`
-     *  to their trigger themselves. (`context` menus aren't triggers either.) */
-    private reflectExpanded;
+    /** Expose the menu's OWN open state as an off-DOM custom state (`:state(open)`),
+     *  never a light-DOM attribute. A web component must not mutate light DOM — it
+     *  desyncs the worker-thread reactive model, which owns the light tree. A
+     *  submenu parent lights its open branch purely in CSS via
+     *  `a-menu-item:has(> a-menu:state(open))`; the state is element-owned (like
+     *  `a-menu-item`'s `:state(active)`) and, being off-DOM, survives a reactive
+     *  re-render without the element ever writing an attribute. Set on every menu
+     *  (harmless on roots — no `a-menu-item` parent matches the selector). */
+    private reflectOpen;
     private position;
     /**
      * Fully declarative close contract — decided synchronously from the DOM, so