@antadesign/anta 0.3.0 → 0.3.2

package/dist/general_types.d.ts

@@ -321,6 +321,14 @@ export interface ATooltipAttributes extends BaseAttributes {
     /** Make the bubble hoverable/clickable (pointer events on, stays open while
      *  hovered). Always pinned. Presence-based (`''` on, omit off). */
     interactive?: boolean | '';
+    /** Only show when the measured target is actually truncated/clipped (its text
+     *  overflows). UI-thread layout read, re-measured per show. Defaults to the
+     *  nearest Anta ellipsizing label part (`a-tab-label` / `a-button-label`) in the
+     *  anchor, then the anchor itself. Presence-based (`''` on, omit off). */
+    'truncated-only'?: boolean | '';
+    /** CSS selector (resolved within the anchor) for the element whose overflow a
+     *  `truncated-only` tooltip measures. */
+    'truncated-selector'?: string;
     /** HTML `id`. */
     id?: string;
 }
@@ -335,16 +343,17 @@ export interface ATooltipAttributes extends BaseAttributes {
  * `@antadesign/anta`.
  */
 export interface ACheckboxAttributes extends BaseAttributes {
-    /** Colour variant, or any literal CSS color for a one-off custom tone.
-     *  Named tones track light/dark mode automatically via the theme-aware role
-     *  tokens. `'neutral'` is the default (same as omitting it). */
+    /** Mark colour (checked fill + unselected box border), or any literal CSS color
+     *  for a one-off custom tone. Named tones track light/dark mode automatically via
+     *  the theme-aware role tokens. `'neutral'` is the default (same as omitting it).
+     *  The label + hint stay neutral — use `tone-text` for those. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Text colour (label + hint), independent of `tone`. A named tone or any literal
+     *  CSS color; named tones track light/dark via the `--text-*` role tokens. Omit
+     *  (or `'neutral'`) to leave the text neutral. */
+    'tone-text'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. `small` = 14px, `medium` (default) = 16px, `large` = 18px box. */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority. `primary` (default) fills the checked box with the tone
-     *  colour and draws a white checkmark; `secondary` keeps the box unfilled and
-     *  draws the border + checkmark in the tone colour (an outlined look). */
-    priority?: 'primary' | 'secondary';
     /** Controlled state — the element reflects changes to this attribute. Use this
      *  (driven from your store) for a controlled checkbox; use `default-state` for
      *  an uncontrolled one. */
@@ -462,10 +471,11 @@ export interface AMenuAttributes extends BaseAttributes {
     /** Open at the pointer coordinates instead of aligned to the trigger box.
      *  Presence-based (`''` on, omit off). */
     coord?: boolean | '';
-    /** For a submenu (an `<a-menu>` nested inside an `<a-menu-item>` — detected
-     *  from that structure, no flag needed): also open on hover. Presence-based
+    /** Submenus only (an `<a-menu>` nested inside an `<a-menu-item>` — detected
+     *  from that structure; ignored on a root menu). Submenus open on hover by
+     *  default; this opts out, making the submenu click-only. Presence-based
      *  (`''` on, omit off). */
-    hover?: boolean | '';
+    nohover?: boolean | '';
     /** Gap in pixels between the trigger and the menu. Defaults to 4. */
     offset?: number | string;
     /** Controlled open state (`'open'` / `'closed'`). Omit for uncontrolled;
@@ -564,16 +574,17 @@ export interface AButtonAttributes extends BaseAttributes {
 export interface ARadioAttributes extends BaseAttributes {
     /** This option's identity / submitted value. */
     value?: string;
-    /** Colour variant, or any literal CSS color for a one-off custom tone.
-     *  Named tones track light/dark mode automatically via the theme-aware role
-     *  tokens. `'neutral'` is the default (same as omitting it). */
+    /** Mark colour (selected ring fill + dot, unselected ring border), or any literal
+     *  CSS color for a one-off custom tone. Named tones track light/dark mode via the
+     *  theme-aware role tokens. `'neutral'` is the default. The label + hint stay
+     *  neutral — use `tone-text` for those. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Text colour (label + hint), independent of `tone`. A named tone or any literal
+     *  CSS color; named tones track light/dark via the `--text-*` role tokens. Omit
+     *  (or `'neutral'`) to leave the text neutral. */
+    'tone-text'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=14px, medium=16px, large=18px control. */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority. `primary` (default) fills the selected ring with the tone
-     *  colour and draws a white dot; `secondary` keeps the ring unfilled and draws
-     *  the border + dot in the tone colour (an outlined look). */
-    priority?: 'primary' | 'secondary';
     /** Disabled state. Presence-based (`''` on, omit off). */
     disabled?: boolean | '';
     /** Selected state — connect-time seed for the standalone render path (no
@@ -613,16 +624,16 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     'default-state'?: string;
     /** Form field name — the group submits `name=value`. */
     name?: string;
-    /** Tone cascaded to children that don't set their own, or any literal CSS
+    /** Mark tone cascaded to children that don't set their own, or any literal CSS
      *  color for a one-off custom tone. Inherits through CSS so every child
-     *  `<a-radio>` picks up the same fill curve. */
+     *  `<a-radio>` picks up the same fill curve. The option text stays neutral —
+     *  use `tone-text`. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Text tone cascaded to children's label + hint, independent of `tone`. A named
+     *  tone or any literal CSS color. Omit (or `'neutral'`) to leave the text neutral. */
+    'tone-text'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size cascaded to children that don't set their own. */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority cascaded to children that don't set their own. `primary`
-     *  (default) fills the selected ring with the tone colour; `secondary` keeps it
-     *  unfilled and draws the border + dot in the tone colour (an outlined look). */
-    priority?: 'primary' | 'secondary';
     /** Validation/feedback tone for the group hint — same set as `<a-input>`'s
      *  `status`. Recolours `<a-radio-group-hint>`; omit for the neutral default. */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
@@ -655,3 +666,119 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
+/**
+ * Attributes for the `<a-tab>` custom element — one tab in a tablist. Presentational,
+ * the sibling of `<a-radio>`: the parent `<a-tabs>` owns selection, keyboard, and
+ * scrolling. The selected look comes from the element's `:state(selected)` (set by the
+ * tablist via the `selected` property), not a host attribute. There is no `Tab` web
+ * component to render directly — `Tabs` renders these from its `<Tab>` children, and
+ * hand-authors write `<a-tab>` directly inside an `<a-tabs>`. Wrap the visible label in
+ * `<a-tab-label>` (as `Tabs` does) so it carries the optical baseline nudge, truncates
+ * with an ellipsis when constrained, and keeps a sibling `<a-icon>` centered — exactly
+ * like `<a-button-label>`.
+ */
+export interface ATabAttributes extends BaseAttributes {
+    /** This tab's identity / the value reported when it's selected. */
+    value?: string;
+    /** Per-tab tone override (same vocabulary as `<a-tabs tone>`): colours this tab's
+     *  label + icons and, when selected, its indicator. Named tones tone the sliding
+     *  indicator too; a custom literal colour tones the indicator only in `noslide`.
+     *  Custom tones also set `--tabs-tone-source` on the tab (via the wrapper's style). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Selected state — connect-time seed for the standalone render path (no tablist).
+     *  In an `<a-tabs>`, the tablist drives `:state(selected)` directly and this
+     *  attribute is ignored. Presence-based (`''` on, omit off). */
+    selected?: boolean | '';
+    /** Disabled state. Presence-based (`''` on, omit off). */
+    disabled?: boolean | '';
+    /** ARIA — `role="tab"` is set by the consumer (`Tabs` on each tab, or a hand-author),
+     *  and `aria-controls` points at the paired panel. `aria-selected` is published by
+     *  the element through `ElementInternals` (off the DOM), driven by the `selected`
+     *  property the tablist sets — not a DOM attribute. `tabindex` (inherited from
+     *  `BaseAttributes`) is set by `Tabs` — every enabled tab is its own tab stop
+     *  (`tabindex="0"`) — not by the element. */
+    role?: 'tab';
+    'aria-controls'?: string;
+    'aria-disabled'?: 'true' | 'false';
+}
+/**
+ * Attributes for the `<a-tabs>` custom element — the tablist + single-select
+ * coordinator. No shadow DOM: `<a-tab>` children are plain light-DOM, laid out by
+ * `a-tabs.css`, so the strip is restylable with ordinary CSS and usable hand-assembled.
+ * Unlike `<a-radio-group>` it is NOT form-associated (a tablist submits nothing), and
+ * the panels live outside it (siblings the `Tabs` wrapper shows/hides). The element
+ * coordinates **off-DOM only** — selection via each tab's `selected` property, focus via
+ * `internals.ariaActiveDescendantElement`, scroll via `scrollIntoView`. Roving
+ * `tabindex` (the JSX path) is rendered by the `Tabs` wrapper, not the element. For the
+ * typed JSX wrapper use `Tabs` from `@antadesign/anta`.
+ */
+export interface ATabsAttributes extends BaseAttributes {
+    /** Controlled selected value (the active tab's `value`). Present → controlled: the
+     *  element reflects changes to this attribute and a pick only dispatches
+     *  `statechange`. Absent → uncontrolled (seed with `default-state`). */
+    state?: string;
+    /** Uncontrolled initial selected value — read once on connect. */
+    'default-state'?: string;
+    /** Visual priority. `primary` (default) is the raised pill on a recessed track; `secondary`
+     *  keeps that sizing but drops the track (selected = subtle active background fill, no
+     *  border); `tertiary` is a bottom-underline under the selected tab only (no track, no rest
+     *  line). `tone` tints secondary + tertiary; primary stays neutral. */
+    priority?: 'primary' | 'secondary' | 'tertiary';
+    /** Tone applied to the selected indicator/label, or any literal CSS color for a
+     *  one-off custom tone (derived in oklch). `'neutral'` is the default. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. small=24px, medium (default)=28px, large=32px tall — matching Button's
+     *  scale (the label leading runs a touch tighter, offset by 1px more block padding per side). */
+    size?: 'small' | 'medium' | 'large';
+    /** Layout + arrow-key axis. `'horizontal'` (default) ellipsizes labels when tabs
+     *  overflow (scrolling is opt-in via CSS); `'vertical'` stacks them. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Disable the sliding indicator. By default the selected-tab indicator is a single
+     *  rectangle that animates between tabs via CSS anchor positioning; with `noslide` the
+     *  highlight is painted on each tab and snaps with no movement (also the automatic
+     *  fallback where anchor positioning isn't supported). Presence-based (`''` on, omit off). */
+    noslide?: boolean | '';
+    /** Disable the whole strip. Presence-based (`''` on, omit off). */
+    disabled?: boolean | '';
+    /** Fires whenever the active tab changes. `detail` carries `{ next, prev }` (values;
+     *  `null` = none). Cancelable: a synchronous `preventDefault()` vetoes the pick in
+     *  uncontrolled mode. All-lowercase to bind across both renderers (like
+     *  `<a-radio-group>`). */
+    onstatechange?: (e: CustomEvent<{
+        next: string | null;
+        prev: string | null;
+    }>) => void;
+    /** Native `change`, fired *after* a selection applies (post-apply counterpart to
+     *  `onstatechange`). Lowercase so both renderers bind the native event. */
+    onchange?: (e: Event) => void;
+    /** Strip focus enter / leave — wired from the bubbling `focusin` / `focusout` (focus
+     *  lands on a tab, not the tablist). The `Tabs` wrapper maps its `onFocus`/`onBlur`. */
+    onfocusin?: (e: FocusEvent) => void;
+    onfocusout?: (e: FocusEvent) => void;
+    /** ARIA — set by the `Tabs` wrapper (the element never touches these). */
+    role?: 'tablist';
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-disabled'?: 'true' | 'false';
+    'aria-label'?: string;
+}
+/**
+ * Attributes for the `<a-tabpanel>` styled tag.
+ *
+ * `<a-tabpanel>` has no JS — it's a CSS-only styled element. The `Tabs` wrapper renders
+ * it, pairs it to its tab via id, and toggles visibility declaratively: `hidden`
+ * (display:none) or `data-hide="visibility"` (keeps the layout box), plus `inert` while
+ * hidden. Low-level attributes; for the typed JSX wrapper use `TabPanel` (inside `Tabs`)
+ * from `@antadesign/anta`.
+ */
+export interface ATabpanelAttributes extends BaseAttributes {
+    /** Hidden via `display:none`. Presence-based (`''` on, omit off). */
+    hidden?: boolean | '';
+    /** Hidden via `visibility:hidden` (keeps the layout box). The `Tabs` wrapper sets
+     *  this for `mounting="visibility"`. */
+    'data-hide'?: 'visibility';
+    /** Removes the hidden panel from focus + the a11y tree. Presence-based. */
+    inert?: boolean | '';
+    /** ARIA — set by the `Tabs` wrapper. */
+    role?: 'tabpanel';
+    'aria-labelledby'?: string;
+}

package/dist/index.d.ts

@@ -47,6 +47,12 @@ export { Input } from './components/Input';
 export type { InputProps, InputChangeAttrs } from './components/Input';
 export { RadioGroup } from './components/RadioGroup';
 export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
+export { Tabs } from './components/Tabs';
+export type { TabsProps, TabsMounting, TabsChangeAttrs } from './components/Tabs';
+export { Tab } from './components/Tab';
+export type { TabProps } from './components/Tab';
+export { TabPanel } from './components/TabPanel';
+export type { TabPanelProps } from './components/TabPanel';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';

package/dist/index.js

@@ -14,6 +14,9 @@ import { MenuGroup } from "./components/MenuGroup";
 import { Expander } from "./components/Expander";
 import { Input } from "./components/Input";
 import { RadioGroup } from "./components/RadioGroup";
+import { Tabs } from "./components/Tabs";
+import { Tab } from "./components/Tab";
+import { TabPanel } from "./components/TabPanel";
 import { configure } from "./jsx-runtime";
 export {
   Button,
@@ -29,6 +32,9 @@ export {
   MenuSeparator,
   Progress,
   RadioGroup,
+  Tab,
+  TabPanel,
+  Tabs,
   Tag,
   Text,
   Title,

package/dist/jsx-runtime.d.ts

@@ -37,7 +37,7 @@ export declare function useId(): string;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -77,4 +77,8 @@ export interface AntaIntrinsicElements {
     'a-menu-separator': BaseAttributes;
     'a-menu-group': AMenuGroupAttributes;
     'a-menu-group-label': BaseAttributes;
+    'a-tabs': ATabsAttributes;
+    'a-tab': ATabAttributes;
+    'a-tab-label': BaseAttributes;
+    'a-tabpanel': ATabpanelAttributes;
 }

package/dist/tokens.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;font-size:15px;font-weight:400;font-feature-settings:"ss02" on,"ss05" on;--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{font-weight:400;--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 13%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}
+@layer base,anta,components,utilities;:root,.light{--sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;font-size:15px;font-weight:400;font-feature-settings:"ss02" on,"ss05" on,"tnum" on;--bg-1: #ffffff;--bg-2: #fbfafb;--bg-3: #f6f4f6;--bg-4: #f1eff1;--bg-5: #ece9ec;--bg-2-brand: #fcfcfe;--bg-3-brand: #f7f6fd;--bg-4-brand: #efeefc;--bg-5-brand: #e9e5fa;--bg-2-success: #f7fcf9;--bg-3-success: #ecf9f0;--bg-4-success: #e2f5e8;--bg-5-success: #d9f2e0;--bg-2-critical: #fefbfb;--bg-3-critical: #fdf2f2;--bg-4-critical: #fcebeb;--bg-5-critical: #fae5e5;--bg-2-warning: #fefbf6;--bg-3-warning: #fcf4e8;--bg-4-warning: #fbeeda;--bg-5-warning: #f9e7cd;--bg-2-info: #fbfcfe;--bg-3-info: #f2f7fd;--bg-4-info: #e9f3fb;--bg-5-info: #e1eefa;--text-1: #050306;--text-2: #302b31;--text-3: #635b65;--text-4: #878089;--text-5: #9f99a1;--text-1-brand: #2e1e7b;--text-2-brand: #483493;--text-3-brand: #483493cc;--text-4-brand: #48349399;--text-5-brand: #48349366;--text-1-success: #004618;--text-2-success: #1f5c31;--text-3-success: #1f5c31cc;--text-4-success: #1f5c3199;--text-5-success: #1f5c3166;--text-1-critical: #8f1014;--text-2-critical: #a01c1c;--text-3-critical: #a01c1ccc;--text-4-critical: #a01c1c99;--text-5-critical: #a01c1c66;--text-1-warning: #7f410b;--text-2-warning: #995200;--text-3-warning: #995200cc;--text-4-warning: #99520099;--text-5-warning: #99520066;--text-1-info: #003969;--text-2-info: #175082;--text-3-info: #175082cc;--text-4-info: #175082b2;--text-5-info: #17508280;--border-1: #938d96;--border-2: #c1b9c1;--border-3: #d4ced4;--border-4: #e0dce0;--border-5: #ece9ec;--border-1-brand: #9081df;--border-2-brand: #bcb1f1;--border-3-brand: #d2cbf6;--border-4-brand: #ddd8f8;--border-5-brand: #e9e5fa;--border-1-success: #44c169;--border-2-success: #88d7a0;--border-3-success: #b3e5c2;--border-4-success: #c6ecd1;--border-5-success: #d9f2e0;--border-1-critical: #e56c6c;--border-2-critical: #efa4a4;--border-3-critical: #f4c2c2;--border-4-critical: #f7d4d4;--border-5-critical: #fae5e5;--border-1-warning: #d88118;--border-2-warning: #edb25a;--border-3-warning: #f3cc91;--border-4-warning: #f6dbb1;--border-5-warning: #f9e7cd;--border-1-info: #56a1e1;--border-2-info: #93c5ec;--border-3-info: #bad6f3;--border-4-info: #cfe3f7;--border-5-info: #e1eefa;--link-color: #1466d4;--link-color-hover: #2674e6;--focus-ring: oklch(.55 .2 284.15)}.dark{font-weight:400;--bg-1: #000000;--bg-2: #0e0d0f;--bg-3: #121014;--bg-4: #161316;--bg-5: #1a171b;--bg-2-brand: #08060e;--bg-3-brand: #0f0c1d;--bg-4-brand: #130f24;--bg-5-brand: #16132b;--bg-2-success: #030b06;--bg-3-success: #051209;--bg-4-success: #06160b;--bg-5-success: #081b0e;--bg-2-critical: #120303;--bg-3-critical: #210606;--bg-4-critical: #260808;--bg-5-critical: #2e0a0b;--bg-2-warning: #110a03;--bg-3-warning: #1c1105;--bg-4-warning: #231406;--bg-5-warning: #2b1a08;--bg-2-info: #020a12;--bg-3-info: #05131f;--bg-4-info: #071725;--bg-5-info: #0c2337;--text-1: #ece9ec;--text-2: #c1b9c1;--text-3: #9f99a1;--text-4: #776e77;--text-5: #635b65;--text-1-brand: #c5baff;--text-2-brand: #ada0ee;--text-3-brand: #ada0eecc;--text-4-brand: #ada0ee99;--text-5-brand: #ada0ee66;--text-1-success: #9ddeb1;--text-2-success: #74cd8e;--text-3-success: #74cd8ecc;--text-4-success: #74cd8e99;--text-5-success: #74cd8e66;--text-1-critical: #ffabac;--text-2-critical: #e78e90;--text-3-critical: #e78e90cc;--text-4-critical: #e78e9099;--text-5-critical: #e78e9066;--text-1-warning: #f0bf75;--text-2-warning: #e1a452;--text-3-warning: #e1a452cc;--text-4-warning: #e1a45299;--text-5-warning: #e1a45266;--text-1-info: #9ed2ff;--text-2-info: #7db6e8;--text-3-info: #7db6e8cc;--text-4-info: #7db6e899;--text-5-info: #7db6e866;--border-1: hsl(288deg 5.21% 42%);--border-2: hsl(282deg 7.04% 28%);--border-3: hsl(277.5deg 6.56% 20%);--border-4: hsl(290deg 6.52% 13%);--border-5: hsl(285deg 7.14% 10%);--border-1-brand: hsl(250.08deg 59.8% 58%);--border-2-brand: hsl(250deg 50% 42%);--border-3-brand: hsl(252.63deg 47.74% 30%);--border-4-brand: hsl(249.8deg 39.84% 19%);--border-5-brand: hsl(249deg 39.22% 14%);--border-1-success: hsl(138.18deg 49.75% 29%);--border-2-success: hsl(138.26deg 50.36% 20%);--border-3-success: hsl(137.7deg 49.59% 16%);--border-4-success: hsl(138.46deg 52% 10%);--border-5-success: hsl(138.86deg 53.85% 7.5%);--border-1-critical: hsl(0deg 56% 46%);--border-2-critical: hsl(.42deg 63% 30%);--border-3-critical: hsl(0deg 62.21% 23%);--border-4-critical: hsl(359.13deg 59% 15%);--border-5-critical: hsl(359.06deg 63% 11%);--border-1-warning: hsl(32.13deg 80.31% 34%);--border-2-warning: hsl(27.93deg 84.06% 24%);--border-3-warning: hsl(30deg 79.66% 17%);--border-4-warning: hsl(28.75deg 63.16% 12%);--border-5-warning: hsl(28.64deg 66.67% 9%);--border-1-info: hsl(207.82deg 70.2% 40%);--border-2-info: hsl(207.77deg 69.94% 29%);--border-3-info: hsl(208.04deg 69.93% 21%);--border-4-info: hsl(208.52deg 62.89% 14%);--border-5-info: hsl(207.78deg 65.85% 10.5%);--link-color: #7baee9;--link-color-hover: #90bdee;--focus-ring: #a897fc}

package/package.json

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