@antadesign/anta 0.3.6 → 0.3.7

package/dist/components/Card.d.ts

@@ -0,0 +1,86 @@
+import type { BaseProps } from "../general_types";
+export interface CardProps extends BaseProps {
+    /** Header content, rendered in the top zone with the default title
+     *  typography. A string is respected as-is; pass a `<Title>` (or `<h2>`–`<h6>`)
+     *  for real heading semantics in the document outline. Omit for no header. */
+    header?: React.ReactNode;
+    /** Footer content, usually action buttons. Rendered as a **left-aligned** row
+     *  (wraps under pressure) — the opposite of `Dialog`'s right-aligned footer. */
+    footer?: React.ReactNode;
+    /** Controls rendered at the top-right of the header row, OUTSIDE the header
+     *  (e.g. a "more" button, a tag) — the same slot as `Expander`'s `actions`. */
+    actions?: React.ReactNode;
+    /** Media (image, illustration) rendered full-bleed to the card edge, clipped to
+     *  its corners. Position it with `mediaPosition`. */
+    media?: React.ReactNode;
+    /** Which edge the `media` bleeds to.
+     *  @defaultValue 'top' */
+    mediaPosition?: "top" | "bottom" | "left" | "right";
+    /** The card body. A string renders with the default `<Text>`-like typography;
+     *  scopes the color hierarchy for any nested content. */
+    children?: React.ReactNode;
+    /** Semantic tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for
+     *  a one-off custom tone. Named tones re-point the surface + text; a custom
+     *  color keeps its hue while lightness/chroma are pinned. `'neutral'` (the
+     *  default) is the same as omitting it.
+     *  @defaultValue 'neutral' */
+    tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Surface emphasis. `primary` (the default) is a clean sheet; `secondary` is a
+     *  subtle fill; `tertiary` is a frosted, semi-transparent panel with a backdrop
+     *  blur.
+     *  @defaultValue 'primary' */
+    priority?: "primary" | "secondary" | "tertiary";
+    /** Size variant — scales the padding.
+     *  @defaultValue 'medium' */
+    size?: "small" | "medium" | "large";
+    /** Selected / chosen state — draws an inset ring in the tone color, for
+     *  choice-card / plan-picker patterns. */
+    selected?: boolean;
+    /** Loading state — dims the card with a skeleton pulse, sets `aria-busy`, and (in
+     *  link mode) blocks navigation. */
+    loading?: boolean;
+    /** Fully-round corners (`border-radius: 999px`, clamped to the box). Pass a
+     *  `number` (px) or a CSS length string (`'1rem'`) for a custom radius. Omit for
+     *  the default `--card-radius`. */
+    round?: boolean | number | string;
+    /** Turn the whole card into a link. The card renders a focusable anchor and its
+     *  accessible name comes from `header` → body → this URL (override with
+     *  `aria-label`). A link card is display content — don't nest interactive
+     *  controls inside it. */
+    href?: string;
+    /** Anchor target (only with `href`). */
+    target?: string;
+    /** Anchor rel (only with `href`). */
+    rel?: string;
+    /** Space-separated URLs the browser pings on navigation (only with `href`). */
+    ping?: string;
+}
+/**
+ * A surface container: a bordered, toned box laying out an optional `media`
+ * region plus a `header` / body / `footer` stack. Pass `href` to turn the whole
+ * card into a link.
+ *
+ * Renders an `<a-card>` web component. A pure, stateless pass-through — the
+ * element owns layout, the link, and the accessible name — so the wrapper only
+ * maps props to attributes and projects content into the `media` / `header` /
+ * `actions` / body / `footer` slots. Header / body / footer are respected as
+ * passed; the element supplies their default typography.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only) to
+ * register the underlying custom element.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Card header="Deployment ready" footer={<Button priority="primary" label="Deploy" />}>
+ *   Your build passed all checks and is ready to ship.
+ * </Card>
+ * ```
+ *
+ * @example Link card
+ * ```tsx
+ * <Card href="/docs/ci" header="CI integration guide">
+ *   Wire Antithesis into your pipeline in a few minutes.
+ * </Card>
+ * ```
+ */
+export declare const Card: ({ header, footer, actions, media, mediaPosition, tone, priority, size, selected, loading, round, href, target, rel, ping, className, style, children, ...rest }: CardProps) => any;

package/dist/components/Card.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { toneStyle, roundStyle } from "../anta_helpers";
+const Card = ({
+  header,
+  footer,
+  actions,
+  media,
+  mediaPosition,
+  tone,
+  priority,
+  size,
+  selected,
+  loading,
+  round,
+  href,
+  target,
+  rel,
+  ping,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const toneAttr = tone || void 0;
+  const computedStyle = roundStyle(
+    round,
+    "--card-round",
+    toneStyle(toneAttr, "--card-tone-source", style)
+  );
+  return /* @__PURE__ */ jsxs(
+    "a-card",
+    {
+      tone: toneAttr,
+      priority: priority && priority !== "primary" ? priority : void 0,
+      size: size && size !== "medium" ? size : void 0,
+      "media-position": mediaPosition && mediaPosition !== "top" ? mediaPosition : void 0,
+      selected: selected ? "" : void 0,
+      loading: loading ? "" : void 0,
+      round: round ? "" : void 0,
+      href,
+      target: href ? target : void 0,
+      rel: href ? rel : void 0,
+      ping: href ? ping : void 0,
+      class: className,
+      style: computedStyle,
+      ...rest,
+      children: [
+        media != null && /* @__PURE__ */ jsx("div", { slot: "media", children: media }),
+        header != null && // A plain-string (or number) header imitates a `<Title>`: the element's
+        // header slot supplies the level-4 type scale, and this div adds the
+        // matching 8px bottom padding (inside the box — no margin-collapse). A
+        // *node* header brings its own margin (a slotted `<Title>` keeps its
+        // bottom margin; the element zeroes only the top), so it gets no wrapper
+        // padding — otherwise the gap would double.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            slot: "header",
+            style: typeof header === "string" || typeof header === "number" ? { paddingBlockEnd: "8px" } : void 0,
+            children: header
+          }
+        ),
+        actions != null && /* @__PURE__ */ jsx("span", { slot: "actions", style: { display: "contents" }, children: actions }),
+        children,
+        footer != null && /* @__PURE__ */ jsx("span", { slot: "footer", style: { display: "contents" }, children: footer })
+      ]
+    }
+  );
+};
+export {
+  Card
+};

package/dist/components/InputDate.js

@@ -136,9 +136,8 @@ const InputDate = ({
         },
         onChange: (e) => resolve(e.currentTarget.value),
         onKeyDown: (e) => {
-          if (e.key === "ArrowDown" && !disabled) {
+          if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !disabled) {
             e.preventDefault();
-            if (!open) e.currentTarget.click();
             setFocusNonce((n) => n + 1);
           }
           if (e.key === "Enter" && !disabled) {

package/dist/components/Select.js

@@ -254,12 +254,6 @@ const Select = (props) => {
         round,
         "aria-haspopup": "menu",
         "aria-expanded": open ? "true" : "false",
-        onKeyDown: (e) => {
-          if (!open && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
-            e.preventDefault();
-            e.currentTarget.click();
-          }
-        },
         trailing: (
           // Chevron rotates down → up when open (spacing + rotation in the CSS
           // module, matching the Input "Select dropdown" example).

package/dist/elements/a-card.css

@@ -0,0 +1,211 @@
+@layer anta {
+  /* Host + token definitions for <a-card>. The visible box lives here (not in the
+     shadow) so plain consumer CSS overrides it and it paints before the element
+     upgrades; the shadow <style> owns layout + region typography and only
+     REFERENCES these --card-* tokens with literal fallbacks. Named tones use
+     Anta's theme-aware role tokens, so dark mode is mostly free (same as
+     <a-expander> / <a-tag>); only the custom-tone branch needs a .dark re-tune. */
+
+  a-card {
+    /* Text roles: title = the strong foreground, text = the body (a step softer). */
+    --card-title: var(--text-1);
+    --card-text: var(--text-2);
+
+    /* Surface pairs per priority. `primary` (the default) is a clean sheet —
+       bg-1 in light, bg-4 in dark (see the `.dark` neutral rule), and
+       bg-4-{tone} for a toned card; `secondary` is a subtle fill (bg-2);
+       `tertiary` is a frosted panel (the primary surface, semi-transparent, +
+       a backdrop blur — see below). */
+    --card-bg-secondary: var(--bg-2);
+    --card-bg-primary: var(--bg-1);
+
+    /* `primary` is the default surface. */
+    --card-bg: var(--card-bg-primary);
+    /* Neutral edge hairline: text-2 at 10% (via --card-text). Toned cards override
+       this with their border-4-{tone} in the tone rules below. Flat across
+       priorities. */
+    --card-border: color-mix(in oklch, var(--card-text) 10%, transparent);
+
+    /* Selected ring (a 2px inset stroke) — the tone's strongest border. */
+    --card-selected-ring: var(--border-1);
+
+    /* Closed-surface hover lift for link cards: an oklch lightness bump that keeps
+       hue + chroma, so it works for every priority and tone in light and dark
+       (a transparent tertiary surface keeps zero alpha). Tune the amount here. */
+    --card-bg-hover-lift: 0.01;
+
+    --card-radius: 8px;
+    --card-padding: 16px;
+
+    display: block;
+    box-sizing: border-box;
+    /* Fill the container (grid cell / flex item / block) so width is always
+       definite. This is also what keeps `container-type` below from collapsing
+       the card to zero width in a shrink-to-fit context (a query container can't
+       size to its own content). Same as <a-expander>. */
+    width: 100%;
+    /* Establish the card as a query container so both the shadow layout and
+       consumer slotted content can `@container card (…)` on its width. */
+    container-type: inline-size;
+    container-name: card;
+
+    color: var(--card-text);
+    background: var(--card-bg);
+    /* The edge is a 1px OUTSET shadow ring (spread 1px, no blur), not a border:
+       it sits outside the box so full-bleed media reaches the very edge (no 1px
+       border inset) and it never adds to layout. `overflow: clip` doesn't clip an
+       element's own outset shadow, so the ring shows while the media still clips
+       to the rounded corners. */
+    box-shadow: 0 0 0 1px var(--card-border);
+    border-radius: var(--card-radius);
+    /* Clip full-bleed media to the rounded corners. */
+    overflow: clip;
+  }
+
+  a-card[priority="secondary"] {
+    --card-bg: var(--card-bg-secondary);
+  }
+
+  /* `round` re-points --card-radius, so both the host clip-radius and the shadow
+     container's ring follow. Bare `round` → 999px (fully round, clamped to the
+     box); a length (`round="16px"`, or the wrapper's `round={16}` → inline
+     --card-round) sets a custom radius. The typed attr() covers raw-HTML authors. */
+  a-card[round] {
+    --card-round: attr(round type(<length>));
+    --card-radius: var(--card-round, 999px);
+  }
+  a-card[priority="tertiary"] {
+    /* Frosted glass: the primary surface at 1% over a backdrop blur, so the card
+       reads over busy / colored / image backgrounds. It keeps the same hairline
+       ring as the other priorities (no --card-border override). The blur only
+       shows where there's detail behind it; the translucency reads everywhere. */
+    --card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  /* Neutral dark: bg-1 (primary's light surface) is pure black in dark mode, so
+     step neutral primary up to bg-4. Secondary stays bg-2 via its token, and a
+     toned card's --bg-*-{tone} tokens self-flip, so this is scoped to neutral. */
+  .dark a-card:not([tone]),
+  .dark a-card[tone="neutral"] {
+    --card-bg-primary: var(--bg-4);
+  }
+
+  /* Hover lift, link cards only — gated so it doesn't stick after a tap. */
+  @media (hover: hover) and (pointer: fine) {
+    a-card[href]:not([loading]):hover {
+      background: oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h);
+    }
+  }
+
+  /* Pre-upgrade skeleton: the host border / background / radius already paint
+     (they're defined here, not in the shadow), so only the content inset is
+     missing before the shadow's .content exists — supply it here, then the
+     shadow owns padding once :defined. */
+  a-card:not(:defined) {
+    padding: var(--card-padding);
+  }
+
+  /* A slotted heading node — <a-title> (any level) or a raw <h1>–<h6> — carries a
+     document TOP margin (Title level 4 is 20px) that would add a leading gap in the
+     header; zero it. The BOTTOM margin stays, so a heading header keeps its gap to
+     the body. (A plain-STRING header has no margin of its own, so the `<Card>`
+     wrapper wraps it in a div with the matching 8px bottom margin — CSS can't tell
+     a string from a styled node, so that split lives in the wrapper.) Specificity
+     is bumped past `a-title[level="N"]` (0,1,1) and the reset's `hN` (0,0,1);
+     `@layer anta` keeps it overridable by un-layered CSS. */
+  a-card :is(h1, h2, h3, h4, h5, h6),
+  a-card a-title[level] {
+    margin-block-start: 0;
+  }
+
+  /* Named tones — re-point the text roles + the per-priority surface pairs to the
+     matching theme tokens (which self-flip for dark mode). */
+  a-card[tone="brand"] {
+    --card-title: var(--text-1-brand);
+    --card-text: var(--text-2-brand);
+    --card-bg-secondary: var(--bg-2-brand);
+    --card-bg-primary: var(--bg-4-brand);
+    --card-border: var(--border-4-brand);
+    --card-selected-ring: var(--border-1-brand);
+  }
+  a-card[tone="info"] {
+    --card-title: var(--text-1-info);
+    --card-text: var(--text-2-info);
+    --card-bg-secondary: var(--bg-2-info);
+    --card-bg-primary: var(--bg-4-info);
+    --card-border: var(--border-4-info);
+    --card-selected-ring: var(--border-1-info);
+  }
+  a-card[tone="success"] {
+    --card-title: var(--text-1-success);
+    --card-text: var(--text-2-success);
+    --card-bg-secondary: var(--bg-2-success);
+    --card-bg-primary: var(--bg-4-success);
+    --card-border: var(--border-4-success);
+    --card-selected-ring: var(--border-1-success);
+  }
+  a-card[tone="warning"] {
+    --card-title: var(--text-1-warning);
+    --card-text: var(--text-2-warning);
+    --card-bg-secondary: var(--bg-2-warning);
+    --card-bg-primary: var(--bg-4-warning);
+    --card-border: var(--border-4-warning);
+    --card-selected-ring: var(--border-1-warning);
+  }
+  a-card[tone="critical"] {
+    --card-title: var(--text-1-critical);
+    --card-text: var(--text-2-critical);
+    --card-bg-secondary: var(--bg-2-critical);
+    --card-bg-primary: var(--bg-4-critical);
+    --card-border: var(--border-4-critical);
+    --card-selected-ring: var(--border-1-critical);
+  }
+
+  /* Custom tone — any non-named `tone` value keeps the source hue while
+     lightness/chroma are pinned per token in oklch, the <a-expander> mechanism.
+     The JSX wrapper writes --card-tone-source inline; the typed attr() fallback
+     picks up raw <a-card tone="…"> on engines that support it. */
+  a-card[tone]:not(
+      [tone="neutral"],
+      [tone="brand"],
+      [tone="info"],
+      [tone="success"],
+      [tone="warning"],
+      [tone="critical"]
+    ) {
+    --card-tone-source: attr(tone type(<color>), currentColor);
+
+    --card-text:               oklch(from var(--card-tone-source) 0.41 0.15 h);
+    --card-title:              oklch(from var(--card-tone-source) 0.33 0.15 h);
+    --card-bg-secondary:       oklch(from var(--card-tone-source) 0.99 0.006 h);
+    --card-bg-primary:         oklch(from var(--card-tone-source) 0.955 0.02 h);
+    --card-border:             oklch(from var(--card-tone-source) 0.895 0.045 h);
+    --card-selected-ring:      oklch(from var(--card-tone-source) 0.6 0.15 h);
+  }
+
+  .dark a-card[tone]:not(
+      [tone="neutral"],
+      [tone="brand"],
+      [tone="info"],
+      [tone="success"],
+      [tone="warning"],
+      [tone="critical"]
+    ) {
+    --card-text:               oklch(from var(--card-tone-source) 0.75 0.11 h);
+    --card-title:              oklch(from var(--card-tone-source) 0.82 0.10 h);
+    --card-bg-secondary:       oklch(from var(--card-tone-source) 0.13 0.02 h);
+    --card-bg-primary:         oklch(from var(--card-tone-source) 0.19 0.04 h);
+    --card-border:             oklch(from var(--card-tone-source) 0.26 0.07 h);
+    --card-selected-ring:      oklch(from var(--card-tone-source) 0.7 0.13 h);
+  }
+
+  /* Size — padding scale (medium is the default, set on the base rule). */
+  a-card[size="small"] {
+    --card-padding: 12px;
+  }
+  a-card[size="large"] {
+    --card-padding: 20px;
+  }
+}

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

@@ -0,0 +1,10 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-card.css';
+export declare class ACardElement extends HTMLElementBase {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+export declare function register_a_card(): void;

package/dist/elements/a-card.js

@@ -0,0 +1,213 @@
+import { HTMLElementBase } from "../anta_helpers";
+import "./a-card.css";
+const SHADOW_STYLE = `
+  .container {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
+    cursor: default;
+    border-radius: var(--card-radius, 8px);
+    -webkit-user-drag: none;
+  }
+  :host([media-position="bottom"]) .container { flex-direction: column-reverse; }
+  :host([media-position="left"]) .container { flex-direction: row; }
+  :host([media-position="right"]) .container { flex-direction: row-reverse; }
+
+  :host([href]) .container { user-select: none; }
+  :host([href]:not([loading])) .container { cursor: pointer; }
+
+  .container:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px var(--focus-ring);
+  }
+
+  [part="media"] { display: none; }
+  [part="media"].has-content { display: block; }
+  :host([media-position="left"]) [part="media"].has-content,
+  :host([media-position="right"]) [part="media"].has-content { flex: none; }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    padding: var(--card-padding, 16px);
+  }
+
+  .header-row { display: none; }
+  .header-row.has-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  slot[name="header"] { display: none; }
+  slot[name="header"].has-content {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 17px;
+    line-height: 20px;
+    font-weight: 584.62;
+    letter-spacing: 0;
+    font-feature-settings: 'ss02', 'ss05', 'tnum';
+    color: var(--card-title, var(--text-1));
+  }
+
+  slot[name="actions"] { display: none; }
+  slot[name="actions"].has-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: none;
+  }
+
+  slot[part="body"] {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    font-size: 15px;
+    line-height: 20px;
+    color: var(--card-text, var(--text-2));
+  }
+
+  slot[name="footer"] { display: none; }
+  slot[name="footer"].has-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding-block-start: var(--card-padding, 16px);
+  }
+
+  :host([selected]) .container { box-shadow: inset 0 0 0 2px var(--card-selected-ring, var(--focus-ring)); }
+  :host([selected]) .container:focus-visible { box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px var(--focus-ring); }
+
+  :host([loading]) .container { pointer-events: none; }
+  @media (prefers-reduced-motion: no-preference) {
+    :host([loading]) [part="content"] { animation: card-pulse 1.4s ease-in-out infinite; }
+  }
+  @keyframes card-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+`;
+class ACardElement extends HTMLElementBase {
+  static observedAttributes = ["href", "target", "rel", "ping", "loading", "aria-label"];
+  #container;
+  #mediaSlot;
+  #headerRow;
+  #headerSlot;
+  #actionsSlot;
+  #bodySlot;
+  #footerSlot;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#container = document.createElement("a");
+    this.#container.className = "container";
+    this.#container.setAttribute("part", "container");
+    this.#mediaSlot = document.createElement("slot");
+    this.#mediaSlot.name = "media";
+    this.#mediaSlot.setAttribute("part", "media");
+    const content = document.createElement("div");
+    content.className = "content";
+    content.setAttribute("part", "content");
+    this.#headerRow = document.createElement("div");
+    this.#headerRow.className = "header-row";
+    this.#headerSlot = document.createElement("slot");
+    this.#headerSlot.name = "header";
+    this.#headerSlot.setAttribute("part", "header");
+    this.#actionsSlot = document.createElement("slot");
+    this.#actionsSlot.name = "actions";
+    this.#actionsSlot.setAttribute("part", "actions");
+    this.#bodySlot = document.createElement("slot");
+    this.#bodySlot.setAttribute("part", "body");
+    this.#footerSlot = document.createElement("slot");
+    this.#footerSlot.name = "footer";
+    this.#footerSlot.setAttribute("part", "footer");
+    this.#headerRow.append(this.#headerSlot, this.#actionsSlot);
+    content.append(this.#headerRow, this.#bodySlot, this.#footerSlot);
+    this.#container.append(this.#mediaSlot, content);
+    shadow.append(style, this.#container);
+    this.#mediaSlot.addEventListener("slotchange", () => this.#syncHasContent());
+    this.#footerSlot.addEventListener("slotchange", () => this.#syncHasContent());
+    this.#actionsSlot.addEventListener("slotchange", () => this.#syncHasContent());
+    this.#headerSlot.addEventListener("slotchange", () => {
+      this.#syncHasContent();
+      this.#syncName();
+    });
+    this.#bodySlot.addEventListener("slotchange", () => this.#syncName());
+  }
+  connectedCallback() {
+    this.#syncHasContent();
+    this.#syncLink();
+  }
+  attributeChangedCallback() {
+    this.#syncLink();
+  }
+  /** Toggle the per-zone `has-content` classes (empty zones reserve no box). */
+  #syncHasContent() {
+    const set = (el, has) => el.classList.toggle("has-content", has);
+    set(this.#mediaSlot, this.#mediaSlot.assignedNodes().length > 0);
+    set(this.#footerSlot, this.#footerSlot.assignedNodes().length > 0);
+    const header = this.#headerSlot.assignedNodes().length > 0;
+    const actions = this.#actionsSlot.assignedNodes().length > 0;
+    set(this.#headerSlot, header);
+    set(this.#actionsSlot, actions);
+    set(this.#headerRow, header || actions);
+  }
+  /** Mirror the link attributes onto the shadow anchor — but drop `href` while
+   *  `loading` so a loading card can't navigate. Also reflects `aria-busy`. */
+  #syncLink() {
+    const href = this.getAttribute("href");
+    const loading = this.hasAttribute("loading");
+    if (href != null && !loading) {
+      this.#container.setAttribute("href", href);
+      for (const name of ["target", "rel", "ping"]) {
+        const v = this.getAttribute(name);
+        if (v != null) this.#container.setAttribute(name, v);
+        else this.#container.removeAttribute(name);
+      }
+    } else {
+      for (const name of ["href", "target", "rel", "ping"]) {
+        this.#container.removeAttribute(name);
+      }
+    }
+    if (loading) this.#container.setAttribute("aria-busy", "true");
+    else this.#container.removeAttribute("aria-busy");
+    this.#syncName();
+  }
+  /** Name the anchor (link mode only): explicit aria-label → header → body → href. */
+  #syncName() {
+    if (!this.#container.hasAttribute("href")) {
+      this.#container.removeAttribute("aria-label");
+      return;
+    }
+    const explicit = this.getAttribute("aria-label")?.trim();
+    const name = explicit || this.#slotText(this.#headerSlot) || this.#slotText(this.#bodySlot) || this.getAttribute("href") || "";
+    if (name) this.#container.setAttribute("aria-label", name);
+    else this.#container.removeAttribute("aria-label");
+  }
+  #slotText(slot) {
+    return slot.assignedNodes().map((n) => n.textContent ?? "").join(" ").replace(/\s+/g, " ").trim();
+  }
+}
+function register_a_card() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-card")) {
+    customElements.define("a-card", ACardElement);
+  }
+}
+register_a_card();
+export {
+  ACardElement,
+  register_a_card
+};

package/dist/elements/a-checkbox.css

@@ -1 +1 @@
-@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}}
+@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: #f6f4f6;--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: #ece9ec;--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.d.ts

@@ -45,6 +45,8 @@ export declare class AInputElement extends HTMLElementBase {
     private syncStatus;
     private onInput;
     private onChange;
+    private onFocus;
+    private onBlur;
     private onLabelSlotChange;
     private applyLabelAria;
     private onHintSlotChange;

package/dist/elements/a-input.js

@@ -22,6 +22,18 @@ const FORWARDED = [
   "aria-label"
 ];
 const BOOL_FORWARDED = /* @__PURE__ */ new Set(["readonly", "required"]);
+let focusFromKeyboard = false;
+const modalityDocs = /* @__PURE__ */ new WeakSet();
+function trackFocusModality(doc) {
+  if (modalityDocs.has(doc)) return;
+  modalityDocs.add(doc);
+  doc.addEventListener("keydown", () => {
+    focusFromKeyboard = true;
+  }, true);
+  doc.addEventListener("pointerdown", () => {
+    focusFromKeyboard = false;
+  }, true);
+}
 const CLEAR_TRIGGER = "clearrequest";
 const CLEAR_CLICK_EVENT = "clearclick";
 const CLEAR_INPUT_EVENT = "clearinput";
@@ -72,7 +84,8 @@ const SHADOW_STYLE = `
   @media (hover: hover) and (pointer: fine) {
     :host(:not(:disabled)) .field:hover { --_bc: var(--input-border-hover); }
   }
-  .field:has(input:focus, textarea:focus) {
+  :host(:not([readonly])) .field:has(input:focus, textarea:focus),
+  :host([readonly]:state(kb-focus)) .field {
     --_bc: var(--input-border-hover);
     outline: 1px solid var(--focus-ring);
     outline-offset: 1px;
@@ -269,6 +282,7 @@ class AInputElement extends HTMLElementBase {
     return this.field.getBoundingClientRect();
   }
   connectedCallback() {
+    trackFocusModality(this.doc);
     if (Object.prototype.hasOwnProperty.call(this, "value")) {
       const v = this.value;
       delete this.value;
@@ -336,6 +350,8 @@ class AInputElement extends HTMLElementBase {
     next.value = value;
     next.addEventListener("input", this.onInput);
     next.addEventListener("change", this.onChange);
+    next.addEventListener("focus", this.onFocus);
+    next.addEventListener("blur", this.onBlur);
     if (refocus) {
       next.focus();
       if (selStart != null) try {
@@ -415,6 +431,23 @@ class AInputElement extends HTMLElementBase {
   onChange = () => {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   };
+  // Stamp the off-DOM `:state(kb-focus)` when this focus arrived via the keyboard
+  // (see `trackFocusModality`), so the read-only field's ring can draw for keyboard
+  // focus but not a mouse click — the one distinction Chromium's `:focus-visible`
+  // won't make for an <input>. Editable fields ignore the state (ring on `:focus`).
+  onFocus = () => {
+    try {
+      if (focusFromKeyboard) this.internals?.states.add("kb-focus");
+      else this.internals?.states.delete("kb-focus");
+    } catch {
+    }
+  };
+  onBlur = () => {
+    try {
+      this.internals?.states.delete("kb-focus");
+    } catch {
+    }
+  };
   onLabelSlotChange = () => {
     this.labelBox.classList.toggle("has-label", this.labelSlot.assignedNodes().length > 0);
     this.applyLabelAria();

package/dist/elements/a-menu.js

@@ -7,6 +7,8 @@ const SUBMENU_OPEN_DELAY = 130;
 const SUBMENU_CLOSE_DELAY = 130;
 const TYPEAHEAD_RESET = 500;
 const ANCHOR_VISIBLE_RATIO = 0.5;
+const SELF_ACTIVATING = 'a-button, button, a[href], input[type="button"], input[type="submit"], input[type="reset"], [role="button"]';
+const EDITABLE_FIELD = "input:not([readonly]), textarea:not([readonly]), a-input:not([readonly]), a-input-time:not([readonly])";
 const openStack = [];
 let docBound = false;
 let boundDoc = null;
@@ -947,6 +949,12 @@ class AMenuElement extends HTMLElementBase {
     return ((label ?? it).textContent ?? "").trim().toLowerCase();
   }
   /* ====================== trigger listener wiring ====================== */
+  /** Pointer coord for a keyboard-opened `coord` menu: the trigger's own rect
+   *  (a DOM read, not a mutation) instead of the 0,0 a keyboard event reports. */
+  #anchorCoord(anchor) {
+    const r = anchorRect(anchor);
+    return [r.left, r.bottom];
+  }
   setupListeners() {
     if (this.listening) return;
     const anchor = this.triggerAnchor;
@@ -997,21 +1005,25 @@ class AMenuElement extends HTMLElementBase {
     } else {
       const onClick = (e) => {
         const viaKeyboard = e.detail === 0;
-        let coord;
-        if (this.#isCoord) {
-          if (viaKeyboard) {
-            const r = anchorRect(anchor);
-            coord = [r.left, r.bottom];
-          } else {
-            coord = [e.clientX, e.clientY];
-          }
-        }
+        const coord = this.#isCoord ? viaKeyboard ? this.#anchorCoord(anchor) : [e.clientX, e.clientY] : void 0;
         if (this._shown) this.requestClose(e);
         else this.requestOpen({ coord, viaKeyboard, originEvent: e });
       };
+      const onKey = (e) => {
+        if (this._shown) return;
+        if (anchor.matches(SELF_ACTIVATING) || anchor.hasAttribute("disabled")) return;
+        const editable = anchor.matches(EDITABLE_FIELD);
+        const opens = e.key === "ArrowDown" || e.key === "ArrowUp" || !editable && (e.key === "Enter" || e.key === " ");
+        if (!opens) return;
+        e.preventDefault();
+        const coord = this.#isCoord ? this.#anchorCoord(anchor) : void 0;
+        this.requestOpen({ coord, viaKeyboard: true, originEvent: e });
+      };
       anchor.addEventListener("click", onClick);
+      anchor.addEventListener("keydown", onKey);
       this.teardown = () => {
         anchor.removeEventListener("click", onClick);
+        anchor.removeEventListener("keydown", onKey);
         this.listening = false;
       };
     }

package/dist/elements/a-radio.css

@@ -1 +1 @@
-@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-dot: #f1eff1;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-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(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-fill-hover);border-color:var(--radio-fill-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-fill-active);border-color:var(--radio-fill-active)}&:state(selected){&:before{background:var(--radio-fill);border-color:var(--radio-fill)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #5f4bc3;--radio-fill-hover: #503cb4;--radio-fill-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1f6eb2;--radio-fill-hover: #1a5b93;--radio-fill-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #2a7e43;--radio-fill-hover: #226737;--radio-fill-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #c37416;--radio-fill-hover: #ae6613;--radio-fill-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #c9302c;--radio-fill-hover: #b02120;--radio-fill-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}a-radio[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--radio-fill) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base);.dark &{--radio-bg: oklch(from var(--radio-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-fill: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-fill-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-fill-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: #49424c;--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65;--radio-dot: #d4ced4;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #503cb4;--radio-fill-hover: #5f4bc3;--radio-fill-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1a5b93;--radio-fill-hover: #1f6eb2;--radio-fill-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #226737;--radio-fill-hover: #2a7e43;--radio-fill-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #7f410b;--radio-fill-hover: #995200;--radio-fill-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #b02120;--radio-fill-hover: #c9302c;--radio-fill-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}}
+@layer anta{a-radio{--radio-control-size: 16px;--radio-border-width: 1.5px;--radio-dot-size: 6px;--_radio-dot-adjust: 0px;--radio-gap: 8px;--radio-bg: var(--bg-1);--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65;--radio-border-neutral: #d4ced4;--radio-border: var(--radio-border-neutral);--radio-border-hover: #c1b9c1;--radio-border-active: #9f99a1;--radio-dot: #f6f4f6;--radio-dot-disabled: #c1b9c1;--radio-bg-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-border-disabled: color-mix(in oklch, #44374b 10%, transparent);--radio-label-color: var(--text-2);--radio-label-color-disabled: var(--text-4);--radio-hint-color: var(--text-3);--radio-label-fs: 15px;--radio-label-lh: 20px;--radio-hint-fs: 14px;--radio-hint-lh: 17px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--radio-gap);cursor:pointer;user-select:none;-webkit-user-drag:none;vertical-align:middle;outline:none;color:var(--radio-label-color);font-family:var(--sans-serif);font-size:var(--radio-label-fs);line-height:var(--radio-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(--radio-label-lh) - var(--radio-control-size)) / 2);box-sizing:border-box;inline-size:var(--radio-control-size);block-size:var(--radio-control-size);border-radius:50%;background:var(--radio-bg);border:var(--radio-border-width) solid var(--radio-border);transition:background-color .15s ease-out,border-color .15s ease-out}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-block-start:calc((var(--radio-label-lh) - (var(--radio-dot-size) - var(--_radio-dot-adjust))) / 2);inline-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));block-size:calc(var(--radio-dot-size) - var(--_radio-dot-adjust));border-radius:50%;background:var(--radio-dot);transform:scale(0);transition:transform .12s ease-out;pointer-events:none}@media(hover:hover)and (pointer:fine){&:not([disabled]):hover:before{border-color:var(--radio-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not([disabled]):hover:state(selected):before{background:var(--radio-fill-hover);border-color:var(--radio-fill-hover)}}&:not([disabled]):active:before{border-color:var(--radio-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not([disabled]):active:state(selected):before{background:var(--radio-fill-active);border-color:var(--radio-fill-active)}&:state(selected){&:before{background:var(--radio-fill);border-color:var(--radio-fill)}&:after{transform:scale(1)}}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&[disabled]{cursor:not-allowed;color:var(--radio-label-color-disabled);&:before{background:var(--radio-bg-disabled);border-color:var(--radio-border-disabled);transition:none}&:state(selected):after{background:var(--radio-dot-disabled)}a-radio-hint{color:var(--radio-label-color-disabled)}}&[size=small]{--radio-control-size: 14px;--radio-dot-size: 5px;--radio-gap: 6px;--radio-label-fs: 13px;--radio-label-lh: 16px;--radio-hint-fs: 12px;--radio-hint-lh: 14px}&[size=large]{--radio-control-size: 18px;--radio-dot-size: 7px;--radio-label-fs: 17px;--radio-label-lh: 22px;--radio-hint-fs: 16px;--radio-hint-lh: 21px}}a-radio-label,a-radio-hint{display:block;grid-column:2;min-width:0}a-radio-hint{color:var(--radio-hint-color);font-size:var(--radio-hint-fs);line-height:var(--radio-hint-lh);margin-block-start:2px}a-radio-group:focus-visible a-radio:state(selected):before{outline:1px solid var(--focus-ring);outline-offset:1px}a-radio[tone=brand],a-radio[tone-selected=brand],a-radio-group[tone=brand] a-radio:not([tone]),a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #5f4bc3;--radio-fill-hover: #503cb4;--radio-fill-active: #483493}a-radio[tone=neutral],a-radio[tone-selected=neutral],a-radio-group[tone=neutral] a-radio:not([tone]),a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #878089;--radio-fill-hover: #776e77;--radio-fill-active: #635b65}a-radio[tone=info],a-radio[tone-selected=info],a-radio-group[tone=info] a-radio:not([tone]),a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1f6eb2;--radio-fill-hover: #1a5b93;--radio-fill-active: #175082}a-radio[tone=success],a-radio[tone-selected=success],a-radio-group[tone=success] a-radio:not([tone]),a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #2a7e43;--radio-fill-hover: #226737;--radio-fill-active: #1f5c31}a-radio[tone=warning],a-radio[tone-selected=warning],a-radio-group[tone=warning] a-radio:not([tone]),a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #c37416;--radio-fill-hover: #ae6613;--radio-fill-active: #995200}a-radio[tone=critical],a-radio[tone-selected=critical],a-radio-group[tone=critical] a-radio:not([tone]),a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #c9302c;--radio-fill-hover: #b02120;--radio-fill-active: #a01c1c}a-radio[tone=brand],a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #fcfcfe;--radio-border: #bcb1f1;--radio-border-hover: #9e8eeb;--radio-border-active: #9081df}a-radio[tone=info],a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #fbfcfe;--radio-border: #93c5ec;--radio-border-hover: #69ace5;--radio-border-active: #56a1e1}a-radio[tone=success],a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #f7fcf9;--radio-border: #88d7a0;--radio-border-hover: #5bc87b;--radio-border-active: #44c169}a-radio[tone=warning],a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #fefbf6;--radio-border: #edb25a;--radio-border-hover: #e09127;--radio-border-active: #d88118}a-radio[tone=critical],a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #fefbfb;--radio-border: #efa4a4;--radio-border-hover: #e87f7f;--radio-border-active: #e56c6c}a-radio[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio-group[tone]:not([tone=""],[tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]){--radio-bg: oklch(from var(--radio-tone-source) .99 calc(c*.03) h);--_radio-border-base: color-mix(in oklch, var(--radio-fill) 70%, var(--radio-border-neutral));--radio-border: oklch(from var(--_radio-border-base) calc(l + .17) c h);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: var(--_radio-border-base);.dark &{--radio-bg: oklch(from var(--radio-tone-source) .15 calc(c*.18) h);--radio-border: var(--_radio-border-base);--radio-border-hover: oklch(from var(--_radio-border-base) calc(l + .1) c h);--radio-border-active: oklch(from var(--_radio-border-base) calc(l + .17) c h)}}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--radio-tone-source: attr(tone type(<color>), transparent)}a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--radio-tone-source: attr(tone-selected type(<color>), transparent)}a-radio[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]),a-radio[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]),a-radio-group[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]) a-radio:not([tone]),a-radio-group[tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]) a-radio:not([tone-selected]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4;--radio-fill: oklch(from var(--radio-tone-source) var(--_tone-l-rest) c h);--radio-fill-hover: oklch(from var(--radio-tone-source) var(--_tone-l-hover) c h);--radio-fill-active: oklch(from var(--radio-tone-source) var(--_tone-l-active) c h);.dark &{--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}}.dark a-radio{--_radio-dot-adjust: 1px;&:after{box-shadow:0 0 1px 1px color-mix(in oklch,black 40%,transparent)}--radio-border-neutral: #49424c;--radio-border-hover: #635b65;--radio-border-active: #776e77;--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65;--radio-dot: #ece9ec;--radio-dot-disabled: #534c57;--radio-bg-disabled: color-mix(in oklch, #e4d1ef 10%, transparent);--radio-border-disabled: color-mix(in oklch, #e4d1ef 10%, transparent)}.dark a-radio[tone=brand],.dark a-radio[tone-selected=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]),.dark a-radio-group[tone-selected=brand] a-radio:not([tone-selected]){--radio-fill: #503cb4;--radio-fill-hover: #5f4bc3;--radio-fill-active: #7460d7}.dark a-radio[tone=neutral],.dark a-radio[tone-selected=neutral],.dark a-radio-group[tone=neutral] a-radio:not([tone]),.dark a-radio-group[tone-selected=neutral] a-radio:not([tone-selected]){--radio-fill: #49424c;--radio-fill-hover: #534c57;--radio-fill-active: #635b65}.dark a-radio[tone=info],.dark a-radio[tone-selected=info],.dark a-radio-group[tone=info] a-radio:not([tone]),.dark a-radio-group[tone-selected=info] a-radio:not([tone-selected]){--radio-fill: #1a5b93;--radio-fill-hover: #1f6eb2;--radio-fill-active: #2686d9}.dark a-radio[tone=success],.dark a-radio[tone-selected=success],.dark a-radio-group[tone=success] a-radio:not([tone]),.dark a-radio-group[tone-selected=success] a-radio:not([tone-selected]){--radio-fill: #226737;--radio-fill-hover: #2a7e43;--radio-fill-active: #329550}.dark a-radio[tone=warning],.dark a-radio[tone-selected=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]),.dark a-radio-group[tone-selected=warning] a-radio:not([tone-selected]){--radio-fill: #7f410b;--radio-fill-hover: #995200;--radio-fill-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio[tone-selected=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]),.dark a-radio-group[tone-selected=critical] a-radio:not([tone-selected]){--radio-fill: #b02120;--radio-fill-hover: #c9302c;--radio-fill-active: #de4545}.dark a-radio[tone=brand],.dark a-radio-group[tone=brand] a-radio:not([tone]){--radio-bg: #0b0916;--radio-border: #483493;--radio-border-hover: #5f4bc3;--radio-border-active: #7460d7}.dark a-radio[tone=info],.dark a-radio-group[tone=info] a-radio:not([tone]){--radio-bg: #040d18;--radio-border: #175082;--radio-border-hover: #1f6eb2;--radio-border-active: #2686d9}.dark a-radio[tone=success],.dark a-radio-group[tone=success] a-radio:not([tone]){--radio-bg: #041008;--radio-border: #1f5c31;--radio-border-hover: #2a7e43;--radio-border-active: #329550}.dark a-radio[tone=warning],.dark a-radio-group[tone=warning] a-radio:not([tone]){--radio-bg: #120a03;--radio-border: #6a3b0c;--radio-border-hover: #995200;--radio-border-active: #ae6613}.dark a-radio[tone=critical],.dark a-radio-group[tone=critical] a-radio:not([tone]){--radio-bg: #190405;--radio-border: #a01c1c;--radio-border-hover: #c9302c;--radio-border-active: #de4545}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",