@antadesign/anta 0.3.20 → 0.3.22

package/dist/anta_helpers.d.ts

@@ -1,5 +1,14 @@
 import type { IconShape } from "./elements/a-icon.shapes";
+import type { OptionPresentationProps } from "./general_types";
 export declare function hasChildren(children: React.ReactNode): boolean;
+/**
+ * Select the safe presentation attributes from a data-rendered option. Option
+ * objects often carry application data, so wrappers must never spread them onto
+ * their rendered element. Menu rows also own `data-menu-*`: those attributes
+ * control closing and combobox navigation, and letting an option replace them
+ * would desynchronize its selection behavior.
+ */
+export declare function optionPresentationAttrs(option: OptionPresentationProps, menu?: boolean): OptionPresentationProps;
 /**
  * Normalize a wrapper's label content the way `Button` / `Tabs` do: a bare string
  * or number becomes a `<tag>` — the ellipsis-capable label part (`a-button-label`,

package/dist/anta_helpers.js

@@ -2,6 +2,14 @@ import { jsx, useState, useMemo } from "./jsx-runtime";
 function hasChildren(children) {
   return Array.isArray(children) ? children.length > 0 : children != null;
 }
+function optionPresentationAttrs(option, menu = false) {
+  const attrs = {};
+  for (const [name, value] of Object.entries(option)) {
+    if (name === "className" || name === "style" || name.startsWith("data-") && (!menu || !name.startsWith("data-menu-") && name !== "data-anta-menu-item"))
+      attrs[name] = value;
+  }
+  return attrs;
+}
 function wrapLabel(kids, tag) {
   if (kids == null) return kids;
   const arr = Array.isArray(kids) ? kids : [kids];
@@ -158,6 +166,7 @@ export {
   isMenuOpen,
   lengthStyle,
   nativeStateChange,
+  optionPresentationAttrs,
   parseOpenState,
   roundAttr,
   roundStyle,

package/dist/components/Button.d.ts

@@ -135,4 +135,4 @@ export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitM
  * <Button href="/docs" target="_blank" label="Read the docs" />
  * ```
  */
-export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;
+export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, onClick, href, target, rel, download, ping, type, form, className, style, children, ...rest }: ButtonProps) => any;

package/dist/components/Button.js

@@ -13,6 +13,7 @@ const Button = ({
   disabled,
   selected,
   round,
+  onClick,
   href,
   target,
   rel,
@@ -26,6 +27,7 @@ const Button = ({
   ...rest
 }) => {
   const toneAttr = tone || void 0;
+  const unavailable = disabled || loading;
   const computedStyle = roundStyle(round, "--button-round", toneStyle(toneAttr, "--button-tone-source", style));
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;
   const sharedAttrs = {
@@ -53,8 +55,8 @@ const Button = ({
     // Disabled AND loading both leave the keyboard tab order — a loading
     // button blocks the mouse (pointer-events), so it must block Enter/Space
     // activation too, else the loading guard would be mouse-only.
-    tabIndex: disabled || loading ? -1 : 0,
-    "aria-disabled": disabled || loading ? "true" : void 0,
+    tabIndex: unavailable ? -1 : 0,
+    "aria-disabled": unavailable ? "true" : void 0,
     "aria-busy": loading ? "true" : void 0,
     "aria-pressed": selected ? "true" : void 0,
     // Icon-only buttons get an accessible name from the icon shape. Consumer's
@@ -62,7 +64,8 @@ const Button = ({
     // ButtonCopy uses to name an icon-only copy button "Copy".
     "aria-label": isIconOnly ? icon : void 0,
     class: className,
-    style: computedStyle
+    style: computedStyle,
+    onClick: unavailable ? void 0 : onClick
   };
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
@@ -71,16 +74,20 @@ const Button = ({
     iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
   ] });
   if (href != null) {
+    const anchorAttrs = {
+      ...sharedAttrs,
+      disabled: unavailable || void 0
+    };
     return /* @__PURE__ */ jsx(
       "a",
       {
-        href,
+        href: unavailable ? void 0 : href,
         "data-anta": "",
         target,
         rel,
         download,
         ping,
-        ...sharedAttrs,
+        ...anchorAttrs,
         ...rest,
         children: inner
       }

package/dist/components/Checkbox.js

@@ -33,7 +33,11 @@ const Checkbox = ({
     toneStyle(
       toneSelected,
       "--checkbox-tone-source",
-      toneStyle(tone, "--checkbox-tone-source", style)
+      toneStyle(
+        tone,
+        "--checkbox-off-tone-source",
+        toneSelected == null ? toneStyle(tone, "--checkbox-tone-source", style) : style
+      )
     )
   );
   const explicitAriaLabel = rest["aria-label"];
@@ -64,7 +68,7 @@ const Checkbox = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
+      "tone-selected": toneSelected || void 0,
       size: size && size !== "medium" ? size : void 0,
       round: roundAttr(round),
       tabIndex: disabled ? -1 : tabIndex ?? 0,

package/dist/components/Input.d.ts

@@ -93,7 +93,8 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     /** Placeholder shown when empty. */
     placeholder?: string;
     /** Ellipsize an overflowing single-line value. Read-only inputs already do
-     * this; use `truncate` when an editable field should keep the same treatment. */
+     * this; pass `false` when an editable field should show the full value.
+     * @defaultValue true */
     truncate?: boolean;
     /** Disable the field. */
     disabled?: boolean;

package/dist/components/Input.js

@@ -51,7 +51,7 @@ const Input = ({
   inputMode,
   name,
   placeholder,
-  truncate,
+  truncate = true,
   disabled,
   readOnly,
   required,

package/dist/components/InputAutocomplete.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useMemo, useId } from "../jsx-runtime";
-import { nativeStateChange } from "../anta_helpers";
+import { nativeStateChange, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
 import { Menu } from "./Menu";
@@ -69,23 +69,29 @@ const InputAutocomplete = (props) => {
           if (!next) setActiveId(null);
         },
         onactivedescendant: (e) => setActiveId(nativeStateChange(e).detail?.id ?? null),
-        children: visible.map((opt, i) => /* @__PURE__ */ jsx(
-          MenuItem,
-          {
-            id: `${rid}-o${i}`,
-            role: "option",
-            "aria-selected": activeId === `${rid}-o${i}` ? "true" : "false",
-            icon: opt.icon,
-            label: highlight(opt.label ?? opt.value, queryRe),
-            hint: opt.hint ? highlight(opt.hint, queryRe) : opt.hint,
-            tone: opt.tone,
-            disabled: opt.disabled,
-            value: opt.value,
-            onMouseDown: (e) => e.preventDefault(),
-            onSelect: () => pick(opt)
-          },
-          `${rid}-${opt.value}-${i}`
-        ))
+        children: visible.map((opt, i) => {
+          const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(opt, true);
+          return /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              ...optionAttrs,
+              id: `${rid}-o${i}`,
+              role: "option",
+              "aria-selected": activeId === `${rid}-o${i}` ? "true" : "false",
+              icon: opt.icon,
+              label: highlight(opt.label ?? opt.value, queryRe),
+              hint: opt.hint ? highlight(opt.hint, queryRe) : opt.hint,
+              tone: opt.tone,
+              disabled: opt.disabled,
+              value: opt.value,
+              onMouseDown: (e) => e.preventDefault(),
+              onSelect: () => pick(opt),
+              className: optionClassName,
+              style: optionStyle
+            },
+            `${rid}-${opt.value}-${i}`
+          );
+        })
       }
     )
   ] });

package/dist/components/InputDate.js

@@ -129,6 +129,7 @@ const InputDate = ({
         placeholder: pattern,
         inputMode: time ? "text" : "numeric",
         autoComplete: "off",
+        role: "combobox",
         "aria-haspopup": "dialog",
         "aria-expanded": open ? "true" : "false",
         onInput: (e) => {

package/dist/components/Menu.d.ts

@@ -43,6 +43,11 @@ export interface MenuProps extends BaseProps {
      *  fully round. A `number` (px) or CSS length string tunes the container radius
      *  only — items stay full pills. */
     round?: boolean | number | string;
+    /** Contain events so they don't bubble out of the menu to ancestor handlers
+     *  (e.g. a clickable row the menu sits in). Selecting an item is always
+     *  contained; this extends it to whole event types. `true` contains `click`;
+     *  pass an event name or list (`"click pointerdown"`) to contain those. */
+    stopPropagation?: boolean | string | string[];
     /** Fired before the open state changes — on open, and on every dismiss (Esc,
      *  outside-click, scroll, selecting an item). `event` is the cancelable
      *  `statechange`; `detail.next`/`detail.prev` are the requested/previous open
@@ -96,4 +101,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, inset, open, onStateChange, round, role, className, style, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, autoWidth, inset, open, onStateChange, round, stopPropagation, role, className, style, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -11,6 +11,7 @@ const Menu = ({
   open,
   onStateChange,
   round,
+  stopPropagation,
   role = "menu",
   className,
   style,
@@ -36,6 +37,7 @@ const Menu = ({
           });
       } : void 0,
       round: roundAttr(round),
+      "stop-propagation": stopPropagation === void 0 || stopPropagation === false ? void 0 : stopPropagation === true ? "" : Array.isArray(stopPropagation) ? stopPropagation.join(" ") : stopPropagation,
       role,
       "aria-orientation": "vertical",
       class: className,

package/dist/components/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from "../general_types";
+import type { BaseProps, OptionPresentationProps } from "../general_types";
 /** The element's `statechange` payload. `next`/`prev` are values (`null` = nothing
  *  selected); `reason` distinguishes a user pick from a form reset / bfcache restore. */
 type StateReason = "user" | "reset" | "restore";
@@ -15,7 +15,7 @@ export interface RadioChangeAttrs {
     name?: string;
 }
 /** One option in a `<RadioGroup>`. The wrapper renders an `<a-radio>` per entry. */
-export interface RadioOption {
+export interface RadioOption extends OptionPresentationProps {
     /** This option's identity and the value submitted when it's selected.
      *  Must be unique within the group (a dev-only warning fires on duplicates). */
     value: string;

package/dist/components/RadioGroup.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useId, useState } from "../jsx-runtime";
-import { nativeStateChange, toneStyle } from "../anta_helpers";
+import { nativeStateChange, optionPresentationAttrs, toneStyle } from "../anta_helpers";
 const radioAttrsOf = (el) => ({
   value: el?.value ?? null,
   name: el?.getAttribute?.("name") ?? void 0
@@ -64,7 +64,7 @@ const RadioGroup = ({
       name,
       status: status && status !== "neutral" ? status : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
+      "tone-selected": toneSelected || void 0,
       size: size && size !== "medium" ? size : void 0,
       disabled: disabled ? "" : void 0,
       orientation: orientation && orientation !== "vertical" ? orientation : void 0,
@@ -73,24 +73,43 @@ const RadioGroup = ({
       onfocusin: onFocus,
       onfocusout: onBlur,
       class: className,
-      style: toneStyle(toneSelected, "--radio-tone-source", toneStyle(tone, "--radio-tone-source", style)),
+      style: toneStyle(
+        toneSelected,
+        "--radio-tone-source",
+        toneStyle(
+          tone,
+          "--radio-off-tone-source",
+          toneSelected == null ? toneStyle(tone, "--radio-tone-source", style) : style
+        )
+      ),
       children: [
         label && /* @__PURE__ */ jsx("a-radio-group-label", { id: labelId, children: label }),
         hint && /* @__PURE__ */ jsx("a-radio-group-hint", { id: hintId, children: hint }),
         /* @__PURE__ */ jsx("a-radio-list", { children: options.map((o) => {
           const optDisabled = disabled || o.disabled;
+          const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(o);
           return /* @__PURE__ */ jsxs(
             "a-radio",
             {
+              ...optionAttrs,
               role: "radio",
               value: o.value,
               "aria-disabled": optDisabled ? "true" : void 0,
               tabIndex: o.value === tabStopValue ? 0 : -1,
-              tone: o.tone && o.tone !== "neutral" ? o.tone : void 0,
-              "tone-selected": o.toneSelected && o.toneSelected !== "neutral" ? o.toneSelected : void 0,
+              tone: o.tone || void 0,
+              "tone-selected": o.toneSelected || void 0,
               size: o.size && o.size !== "medium" ? o.size : void 0,
               disabled: o.disabled ? "" : void 0,
-              style: toneStyle(o.toneSelected, "--radio-tone-source", toneStyle(o.tone, "--radio-tone-source")),
+              class: optionClassName,
+              style: toneStyle(
+                o.toneSelected,
+                "--radio-tone-source",
+                toneStyle(
+                  o.tone,
+                  "--radio-off-tone-source",
+                  o.toneSelected == null ? toneStyle(o.tone, "--radio-tone-source", optionStyle) : optionStyle
+                )
+              ),
               children: [
                 /* @__PURE__ */ jsx("a-radio-label", { children: o.label }),
                 o.hint != null && /* @__PURE__ */ jsx("a-radio-hint", { children: o.hint })

package/dist/components/Select.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from '../general_types';
+import type { BaseProps, OptionPresentationProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
 import './select-parts.css';
@@ -14,7 +14,7 @@ export type OptionValue = string | number | boolean;
  *
  *  Generic in the value type `V` (defaults to `string`): `Select` infers `V` from your
  *  `options`, so `{ value: 365 }` round-trips as `number` through `onValueChange`. */
-export interface SelectOption<V extends OptionValue = string> {
+export interface SelectOption<V extends OptionValue = string> extends OptionPresentationProps {
     /** The option's value (`V`) — its identity, what `value` / `defaultValue` name, and
      *  what `onValueChange` reports. Unique across the whole `options` tree (selection is
      *  value-keyed and global across groups / submenus). */
@@ -248,7 +248,9 @@ export interface SelectCommonProps<V extends OptionValue = string> extends Omit<
      *  one focusable element, such as an Anta `Button`. The menu is positioned
      *  relative to that element and opens when it is clicked. Do not return a
      *  fragment, multiple siblings, or a non-focusable wrapper. Add
-     *  `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element.
+     *  `aria-haspopup="menu"` and `aria-expanded={state.open}` to the element, on a
+     *  role that supports them (an Anta `Button` already carries `role="button"`;
+     *  otherwise add `role="combobox"`).
      *  Field props (`label`, `hint`, `size`, `status`, `placeholder`, and `round`) and
      *  `className` / `style` apply only to the default field. Add styling and
      *  attributes to the returned element instead. */

package/dist/components/Select.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useId } from "../jsx-runtime";
-import { ISOLATE_HINT } from "../anta_helpers";
+import { ISOLATE_HINT, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
 import { Input } from "./Input";
 import { Icon } from "./Icon";
@@ -164,6 +164,7 @@ const Select = (props) => {
     emit?.(next, { all: true, selected: false });
   };
   const renderOptionRow = (o, disabled2) => {
+    const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(o, true);
     const optState = { value: o.value, selected: isSelected(o.value), disabled: disabled2 };
     const custom = renderOption?.(o, optState);
     const customMark = renderIndicator?.(optState);
@@ -174,6 +175,7 @@ const Select = (props) => {
     return /* @__PURE__ */ jsxs(
       MenuItem,
       {
+        ...optionAttrs,
         id: `${uid}-opt-${o.value}`,
         selectionIndicator: menuItemIndicator,
         ...ariaSelectable,
@@ -187,6 +189,8 @@ const Select = (props) => {
         disabled: disabled2 || void 0,
         "data-menu-open": multiple ? "" : void 0,
         onSelect: (e) => choose(o, e),
+        className: optionClassName,
+        style: optionStyle,
         children: [
           custom,
           tip && /* @__PURE__ */ jsx(Tooltip, { follow: true, ...hintOnly ? { delay: 700 } : {}, children: tip })
@@ -266,6 +270,7 @@ const Select = (props) => {
         status,
         statusIcon,
         round,
+        role: "combobox",
         "aria-haspopup": "menu",
         "aria-expanded": open ? "true" : "false",
         trailing: (

package/dist/components/SelectFaceted.d.ts

@@ -165,8 +165,10 @@ export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
      *  Receives a `SelectFacetedTriggerState`. Return exactly one focusable element:
      *  the menu is positioned relative to that element and opens when it is clicked.
      *  Add `aria-haspopup="menu"` and `aria-expanded={state.open}` to the returned
-     *  element. `className`, `style`, and other trigger props apply only to the
-     *  default Button, so add styling and attributes to the returned element. */
+     *  element, on a role that supports them (an Anta `Button` already carries
+     *  `role="button"`; otherwise add `role="combobox"`). `className`, `style`, and
+     *  other trigger props apply only to the default Button, so add styling and
+     *  attributes to the returned element. */
     renderTrigger?: (state: SelectFacetedTriggerState) => React.ReactNode;
 }
 /**

package/dist/components/SelectFaceted.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState, useMemo } from "../jsx-runtime";
-import { nativeStateChange, ISOLATE_HINT } from "../anta_helpers";
+import { nativeStateChange, ISOLATE_HINT, optionPresentationAttrs } from "../anta_helpers";
 import { normalizeOpt, matchQueryRegex, matchesQuery } from "./select-options";
 import { Button } from "./Button";
 import { Menu } from "./Menu";
@@ -118,13 +118,17 @@ const SelectFaceted = (props) => {
     }
   ) }) : null;
   const optionRow = (facet, opt, keyPrefix = "") => {
+    const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(opt, true);
     const shared = {
+      ...optionAttrs,
       icon: opt.icon,
       label: opt.label ?? String(opt.value),
       hint: opt.hint,
       tone: opt.tone,
       toneSelected,
       disabled: opt.disabled,
+      className: optionClassName,
+      style: optionStyle,
       "data-menu-open": ""
     };
     if (facet.kind === "single") {

package/dist/components/TabPanel.d.ts

@@ -3,8 +3,7 @@
  * 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.
+ * `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

package/dist/components/TabPanel.js

@@ -4,7 +4,6 @@ const TabPanel = ({ value, children, hideMode, className, style }) => /* @__PURE
   {
     value,
     role: "tabpanel",
-    tabIndex: 0,
     "hide-mode": hideMode === "visibility" ? "visibility" : void 0,
     class: className,
     style,

package/dist/components/Tabs.d.ts

@@ -1,4 +1,4 @@
-import type { BaseProps } from "../general_types";
+import type { BaseProps, OptionPresentationProps } from "../general_types";
 import type { IconShape } from "../elements/a-icon.shapes";
 /** The element's `statechange` payload — `next`/`prev` are tab values (`null` = none). */
 type StateDetail = {
@@ -14,7 +14,7 @@ export interface TabsChangeAttrs {
  *  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 {
+export interface TabOption extends OptionPresentationProps {
     /** 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;

package/dist/components/Tabs.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState } from "../jsx-runtime";
-import { nativeStateChange, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
+import { nativeStateChange, optionPresentationAttrs, toneStyle, roundStyle, roundAttr, wrapLabel } from "../anta_helpers";
 import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
@@ -75,17 +75,20 @@ const Tabs = ({
       children: tabs.map((p) => {
         const tabDisabled = disabled || p.disabled;
         const isSelected = p.value === currentValue;
+        const { className: optionClassName, style: optionStyle, ...optionAttrs } = optionPresentationAttrs(p);
         return /* @__PURE__ */ jsxs(
           "a-tab",
           {
+            ...optionAttrs,
             role: "tab",
             value: p.value,
             tone: p.tone && p.tone !== "neutral" ? p.tone : void 0,
-            style: toneStyle(p.tone, "--tabs-tone-source", void 0),
             "aria-disabled": tabDisabled ? "true" : void 0,
             tabIndex: tabDisabled && !isSelected ? -1 : 0,
             disabled: tabDisabled ? "" : void 0,
             round: roundAttr(round) ?? roundAttr(p.round),
+            class: optionClassName,
+            style: toneStyle(p.tone, "--tabs-tone-source", optionStyle),
             children: [
               p.icon && /* @__PURE__ */ jsx("a-icon", { shape: p.icon, "aria-hidden": "true" }),
               wrapLabel(p.label != null ? p.label : p.children, "a-tab-label"),

package/dist/components/Text.d.ts

@@ -36,9 +36,11 @@ export type TextProps = BaseProps & {
     inline?: boolean;
     /** Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
      *  single line; any integer ≥ 2 clamps to that many lines; `0` or a
-     *  negative value means no truncation. Uses the `-webkit-line-clamp`
-     *  technique, supported in all major browsers (Firefox 68+, Chrome,
-     *  Safari, Edge). */
+     *  negative value means no truncation. A clipped, non-expandable JSX
+     *  `Text` shows its text content in a tooltip by default. Nest a
+     *  `<Tooltip>` to provide your own tooltip instead. Uses the
+     *  `-webkit-line-clamp` technique, supported in all major browsers
+     *  (Firefox 68+, Chrome, Safari, Edge). */
     truncate?: boolean | number;
 } & ExpandMode;
 /**

package/dist/components/Text.js

@@ -1,5 +1,6 @@
-import { jsx } from "@antadesign/anta/jsx-runtime";
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { toneStyle } from "../anta_helpers";
+import { Tooltip } from "./Tooltip";
 const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible, className, style, children, ...rest }) => {
   const n = typeof truncate === "number" ? truncate : truncate ? 1 : null;
   const lineCount = n != null && n >= 1 ? n : null;
@@ -10,7 +11,7 @@ const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible,
     lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style
   );
   const canExpand = expandable && lineCount != null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "a-text",
     {
       priority,
@@ -23,7 +24,10 @@ const Text = ({ priority, tone, size, inline, truncate, expandable, collapsible,
       class: className,
       style: computedStyle,
       ...rest,
-      children
+      children: [
+        children,
+        lineCount != null && !canExpand && /* @__PURE__ */ jsx(Tooltip, { truncatedOnly: true, "data-anta-text-tooltip": "" })
+      ]
     }
   );
 };

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-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--checkbox-bg-selected: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-bg-selected-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h);--checkbox-border-neutral: var(--border-3);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--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-bg-selected-hover);border-color:var(--checkbox-bg-selected-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-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}&:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-selected)}&: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]:not([tone=""],[tone=neutral]),a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}a-checkbox[tone=brand],a-checkbox[tone-selected=brand]{--checkbox-tone-source: var(--anta-seed-brand)}a-checkbox[tone=info],a-checkbox[tone-selected=info]{--checkbox-tone-source: var(--anta-seed-info)}a-checkbox[tone=success],a-checkbox[tone-selected=success]{--checkbox-tone-source: var(--anta-seed-success)}a-checkbox[tone=warning],a-checkbox[tone-selected=warning]{--checkbox-tone-source: var(--anta-seed-warning)}a-checkbox[tone=critical],a-checkbox[tone-selected=critical]{--checkbox-tone-source: var(--anta-seed-critical)}a-checkbox[tone=neutral],a-checkbox[tone-selected=neutral]{--checkbox-tone-source: var(--anta-seed-neutral)}a-checkbox[tone]:not([tone=""],[tone=neutral]){--checkbox-bg: oklch(from var(--checkbox-tone-source) .99 calc(c*.03) h);--_checkbox-border-base: color-mix(in oklch, var(--checkbox-bg-selected) 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)}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)}.dark a-checkbox{--checkbox-border-neutral: var(--border-3);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--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);--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}.dark a-checkbox[tone]:not([tone=""],[tone=neutral]),.dark a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark a-checkbox[tone]:not([tone=""],[tone=neutral]){--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)}label:has(>input[data-anta][type=checkbox]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:15px;line-height:20px}input[data-anta][type=checkbox]{--native-choice-size: 16px;--native-choice-mark-size: 12px;--native-choice-round: 4px;--native-choice-bg: var(--bg-1);--native-choice-border-neutral: var(--border-3);--native-choice-border: var(--native-choice-border-neutral);--native-choice-border-hover: var(--border-2);--native-choice-border-active: var(--border-1);--native-choice-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4;--native-choice-selected: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-rest) c h);--native-choice-selected-hover: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-hover) c h);--native-choice-selected-active: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-active) c h);box-sizing:border-box;flex:0 0 var(--native-choice-size);inline-size:var(--native-choice-size);block-size:var(--native-choice-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--native-choice-border);border-radius:var(--native-choice-round);background-color:var(--native-choice-bg);background-repeat:no-repeat;background-position:center;background-size:var(--native-choice-mark-size);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=checkbox][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=checkbox][size=large]){font-size:17px;line-height:22px}input[data-anta][type=checkbox][size=small]{--native-choice-size: 14px;--native-choice-mark-size: 10px}input[data-anta][type=checkbox][size=large]{--native-choice-size: 18px;--native-choice-mark-size: 14px}input[data-anta][type=checkbox][round]{--native-choice-round: attr(round type(<length>), 999px)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]),input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .5;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=checkbox][tone=brand],input[data-anta][type=checkbox][tone-selected=brand]{--native-choice-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone=info],input[data-anta][type=checkbox][tone-selected=info]{--native-choice-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone=success],input[data-anta][type=checkbox][tone-selected=success]{--native-choice-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone=warning],input[data-anta][type=checkbox][tone-selected=warning]{--native-choice-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone=critical],input[data-anta][type=checkbox][tone-selected=critical]{--native-choice-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone=neutral],input[data-anta][type=checkbox][tone-selected=neutral]{--native-choice-tone-source: var(--anta-seed-neutral)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-tone-source) .99 calc(c*.03) h);--_native-choice-border-base: color-mix(in oklch, var(--native-choice-selected) 70%, var(--native-choice-border-neutral));--native-choice-border: oklch(from var(--_native-choice-border-base) calc(l + .17) c h);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: var(--_native-choice-border-base)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-choice-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--native-choice-tone-source: attr(tone-selected type(<color>), var(--anta-seed-neutral))}@media(hover:hover)and (pointer:fine){input[data-anta][type=checkbox]:not(:disabled):hover{border-color:var(--native-choice-border-hover)}input[data-anta][type=checkbox]:not(:disabled):hover:is(:checked,:indeterminate){background-color:var(--native-choice-selected-hover);border-color:var(--native-choice-selected-hover)}}input[data-anta][type=checkbox]:not(:disabled):active{border-color:var(--native-choice-border-active)}input[data-anta][type=checkbox]:not(:disabled):active:is(:checked,:indeterminate){background-color:var(--native-choice-selected-active);border-color:var(--native-choice-selected-active)}input[data-anta][type=checkbox]:is(:checked,:indeterminate){background-color:var(--native-choice-selected);border-color:var(--native-choice-selected)}input[data-anta][type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f4f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f4f6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=checkbox]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=checkbox]:disabled:is(:checked,:indeterminate){background-color:color-mix(in oklch,var(--text-1) 10%,transparent)}.dark input[data-anta][type=checkbox]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5}.dark input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .45;--_native-choice-l-hover: .5;--_native-choice-l-active: .57}.dark input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-tone-source) .15 calc(c*.18) h);--native-choice-border: var(--_native-choice-border-base);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: oklch(from var(--_native-choice-border-base) calc(l + .17) c h)}@media(forced-colors:active){a-checkbox:is(:state(checked),:state(indeterminate)):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-checkbox:is(:state(checked),:state(indeterminate)):after{forced-color-adjust:none;background-color:HighlightText}a-checkbox:disabled:before{background-color:Canvas;border-color:GrayText}a-checkbox:disabled:is(:state(checked),:state(indeterminate)):after{background-color:GrayText}}}
+@layer anta{a-checkbox{--checkbox-gap: 8px;--checkbox-box-size: 16px;--checkbox-bg: var(--bg-1);--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4;--checkbox-bg-selected: oklch(from var(--checkbox-tone-source) var(--_tone-l-rest) c h);--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) var(--_tone-l-hover) c h);--checkbox-bg-selected-active: oklch(from var(--checkbox-tone-source) var(--_tone-l-active) c h);--checkbox-border-neutral: var(--border-3);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--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-bg-selected-hover);border-color:var(--checkbox-bg-selected-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-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}&:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-selected)}&: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{outline:none}&: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]:not([tone=""],[tone=neutral]),a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .5;--_tone-l-hover: .45;--_tone-l-active: .4}a-checkbox[tone=brand]{--checkbox-tone-source: var(--anta-seed-brand);--checkbox-off-tone-source: var(--anta-seed-brand)}a-checkbox[tone=info]{--checkbox-tone-source: var(--anta-seed-info);--checkbox-off-tone-source: var(--anta-seed-info)}a-checkbox[tone=success]{--checkbox-tone-source: var(--anta-seed-success);--checkbox-off-tone-source: var(--anta-seed-success)}a-checkbox[tone=warning]{--checkbox-tone-source: var(--anta-seed-warning);--checkbox-off-tone-source: var(--anta-seed-warning)}a-checkbox[tone=critical]{--checkbox-tone-source: var(--anta-seed-critical);--checkbox-off-tone-source: var(--anta-seed-critical)}a-checkbox[tone=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral)}a-checkbox[tone]:not([tone=""],[tone=neutral]){--checkbox-bg: oklch(from var(--checkbox-off-tone-source) .99 calc(c*.03) h);--_checkbox-off-bg-selected: oklch(from var(--checkbox-off-tone-source) var(--_tone-l-rest) c h);--_checkbox-border-base: color-mix(in oklch, var(--_checkbox-off-bg-selected) 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)}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);--checkbox-off-tone-source: attr(tone type(<color>), transparent)}a-checkbox[tone-selected=brand]{--checkbox-tone-source: var(--anta-seed-brand)}a-checkbox[tone-selected=info]{--checkbox-tone-source: var(--anta-seed-info)}a-checkbox[tone-selected=success]{--checkbox-tone-source: var(--anta-seed-success)}a-checkbox[tone-selected=warning]{--checkbox-tone-source: var(--anta-seed-warning)}a-checkbox[tone-selected=critical]{--checkbox-tone-source: var(--anta-seed-critical)}a-checkbox[tone-selected=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--_tone-l-rest: .6;--_tone-l-hover: .45;--_tone-l-active: .4}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)}.dark a-checkbox{--checkbox-border-neutral: var(--border-3);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--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);--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}.dark a-checkbox[tone]:not([tone=""],[tone=neutral]),.dark a-checkbox[tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_tone-l-rest: .45;--_tone-l-hover: .5;--_tone-l-active: .57}.dark a-checkbox[tone]:not([tone=""],[tone=neutral]){--checkbox-bg: oklch(from var(--checkbox-off-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)}.dark a-checkbox[tone-selected=neutral]{--_tone-l-rest: .42;--_tone-l-hover: .45;--_tone-l-active: .5}label:has(>input[data-anta][type=checkbox]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-feature-settings:"ss02","ss05","tnum";font-size:15px;line-height:20px}input[data-anta][type=checkbox]{--native-choice-size: 16px;--native-choice-mark-size: 12px;--native-choice-round: 4px;--native-choice-bg: var(--bg-1);--native-choice-border-neutral: var(--border-3);--native-choice-border: var(--native-choice-border-neutral);--native-choice-border-hover: var(--border-2);--native-choice-border-active: var(--border-1);--native-choice-tone-source: var(--anta-seed-neutral);--native-choice-off-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4;--native-choice-selected: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-rest) c h);--native-choice-selected-hover: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-hover) c h);--native-choice-selected-active: oklch(from var(--native-choice-tone-source) var(--_native-choice-l-active) c h);box-sizing:border-box;flex:0 0 var(--native-choice-size);inline-size:var(--native-choice-size);block-size:var(--native-choice-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--native-choice-border);border-radius:var(--native-choice-round);background-color:var(--native-choice-bg);background-repeat:no-repeat;background-position:center;background-size:var(--native-choice-mark-size);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=checkbox][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=checkbox][size=large]){font-size:17px;line-height:22px}input[data-anta][type=checkbox][size=small]{--native-choice-size: 14px;--native-choice-mark-size: 10px}input[data-anta][type=checkbox][size=large]{--native-choice-size: 18px;--native-choice-mark-size: 14px}input[data-anta][type=checkbox][round]{--native-choice-round: attr(round type(<length>), 999px)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]),input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .5;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=checkbox][tone=brand]{--native-choice-tone-source: var(--anta-seed-brand);--native-choice-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone=info]{--native-choice-tone-source: var(--anta-seed-info);--native-choice-off-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone=success]{--native-choice-tone-source: var(--anta-seed-success);--native-choice-off-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone=warning]{--native-choice-tone-source: var(--anta-seed-warning);--native-choice-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone=critical]{--native-choice-tone-source: var(--anta-seed-critical);--native-choice-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone=neutral]{--native-choice-tone-source: var(--anta-seed-neutral);--native-choice-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-off-tone-source) .99 calc(c*.03) h);--_native-choice-off-selected: oklch(from var(--native-choice-off-tone-source) var(--_native-choice-l-rest) c h);--_native-choice-border-base: color-mix(in oklch, var(--_native-choice-off-selected) 70%, var(--native-choice-border-neutral));--native-choice-border: oklch(from var(--_native-choice-border-base) calc(l + .17) c h);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: var(--_native-choice-border-base)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--native-choice-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--native-choice-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}input[data-anta][type=checkbox][tone-selected=brand]{--native-choice-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone-selected=info]{--native-choice-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone-selected=success]{--native-choice-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone-selected=warning]{--native-choice-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone-selected=critical]{--native-choice-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone-selected=neutral]{--native-choice-tone-source: var(--anta-seed-neutral);--_native-choice-l-rest: .6;--_native-choice-l-hover: .45;--_native-choice-l-active: .4}input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=brand],[tone-selected=neutral],[tone-selected=info],[tone-selected=success],[tone-selected=warning],[tone-selected=critical]){--native-choice-tone-source: attr(tone-selected type(<color>), var(--anta-seed-neutral))}@media(hover:hover)and (pointer:fine){input[data-anta][type=checkbox]:not(:disabled):hover{border-color:var(--native-choice-border-hover)}input[data-anta][type=checkbox]:not(:disabled):hover:is(:checked,:indeterminate){background-color:var(--native-choice-selected-hover);border-color:var(--native-choice-selected-hover)}}input[data-anta][type=checkbox]:not(:disabled):active{border-color:var(--native-choice-border-active)}input[data-anta][type=checkbox]:not(:disabled):active:is(:checked,:indeterminate){background-color:var(--native-choice-selected-active);border-color:var(--native-choice-selected-active)}input[data-anta][type=checkbox]:is(:checked,:indeterminate){background-color:var(--native-choice-selected);border-color:var(--native-choice-selected)}input[data-anta][type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f4f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f4f6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=checkbox]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=checkbox]:disabled:is(:checked,:indeterminate){background-color:color-mix(in oklch,var(--text-1) 10%,transparent)}.dark input[data-anta][type=checkbox]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5}.dark input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]),.dark input[data-anta][type=checkbox][tone-selected]:not([tone-selected=""],[tone-selected=neutral]){--_native-choice-l-rest: .45;--_native-choice-l-hover: .5;--_native-choice-l-active: .57}.dark input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--native-choice-bg: oklch(from var(--native-choice-off-tone-source) .15 calc(c*.18) h);--native-choice-border: var(--_native-choice-border-base);--native-choice-border-hover: oklch(from var(--_native-choice-border-base) calc(l + .1) c h);--native-choice-border-active: oklch(from var(--_native-choice-border-base) calc(l + .17) c h)}.dark input[data-anta][type=checkbox][tone-selected=neutral]{--_native-choice-l-rest: .42;--_native-choice-l-hover: .45;--_native-choice-l-active: .5}@media(forced-colors:active){a-checkbox:is(:state(checked),:state(indeterminate)):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-checkbox:is(:state(checked),:state(indeterminate)):after{forced-color-adjust:none;background-color:HighlightText}a-checkbox:disabled:before{background-color:Canvas;border-color:GrayText}a-checkbox:disabled:is(:state(checked),:state(indeterminate)):after{background-color:GrayText}}}