@antadesign/anta 0.3.7 → 0.3.9

package/dist/elements/a-title.css

@@ -1 +1 @@
-@layer anta{a-title{display:block;color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05","tnum"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px;margin-block-start:0;margin-block-end:16px}a-title[level="2"]{font-size:24px;line-height:28px;margin-block-start:32px;margin-block-end:12px}a-title[level="3"]{font-size:20px;line-height:24px;margin-block-start:24px;margin-block-end:12px}a-title[level="4"]{font-size:17px;line-height:20px;margin-block-start:20px;margin-block-end:8px}a-title[level="5"]{font-size:15px;line-height:20px;margin-block-start:16px;margin-block-end:8px}a-title[level="6"]{font-size:13px;line-height:16px;margin-block-start:16px;margin-block-end:4px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[priority=quinary]{color:var(--text-5)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=brand][priority=quinary]{color:var(--text-5-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=success][priority=quinary]{color:var(--text-5-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=critical][priority=quinary]{color:var(--text-5-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=warning][priority=quinary]{color:var(--text-5-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone=info][priority=quinary]{color:var(--text-5-info)}}
+@layer anta{a-title{display:block;color:var(--text-1);font-weight:584.62;letter-spacing:0;text-wrap:balance;font-feature-settings:"ss02","ss05","tnum"}a-title a-icon{transform:translateY(-.05em)}a-title[level="1"]{font-size:28px;line-height:32px;margin-block-start:0;margin-block-end:16px}a-title[level="2"]{font-size:24px;line-height:28px;margin-block-start:32px;margin-block-end:12px}a-title[level="3"]{font-size:20px;line-height:24px;margin-block-start:24px;margin-block-end:12px}a-title[level="4"]{font-size:17px;line-height:20px;margin-block-start:20px;margin-block-end:8px}a-title[level="5"]{font-size:15px;line-height:20px;margin-block-start:16px;margin-block-end:8px}a-title[level="6"]{font-size:13px;line-height:16px;margin-block-start:16px;margin-block-end:4px}a-title[priority=secondary]{color:var(--text-2)}a-title[priority=tertiary]{color:var(--text-3)}a-title[priority=quaternary]{color:var(--text-4)}a-title[priority=quinary]{color:var(--text-5)}a-title[tone=brand]{color:var(--text-1-brand)}a-title[tone=brand][priority=secondary]{color:var(--text-2-brand)}a-title[tone=brand][priority=tertiary]{color:var(--text-3-brand)}a-title[tone=brand][priority=quaternary]{color:var(--text-4-brand)}a-title[tone=brand][priority=quinary]{color:var(--text-5-brand)}a-title[tone=success]{color:var(--text-1-success)}a-title[tone=success][priority=secondary]{color:var(--text-2-success)}a-title[tone=success][priority=tertiary]{color:var(--text-3-success)}a-title[tone=success][priority=quaternary]{color:var(--text-4-success)}a-title[tone=success][priority=quinary]{color:var(--text-5-success)}a-title[tone=critical]{color:var(--text-1-critical)}a-title[tone=critical][priority=secondary]{color:var(--text-2-critical)}a-title[tone=critical][priority=tertiary]{color:var(--text-3-critical)}a-title[tone=critical][priority=quaternary]{color:var(--text-4-critical)}a-title[tone=critical][priority=quinary]{color:var(--text-5-critical)}a-title[tone=warning]{color:var(--text-1-warning)}a-title[tone=warning][priority=secondary]{color:var(--text-2-warning)}a-title[tone=warning][priority=tertiary]{color:var(--text-3-warning)}a-title[tone=warning][priority=quaternary]{color:var(--text-4-warning)}a-title[tone=warning][priority=quinary]{color:var(--text-5-warning)}a-title[tone=info]{color:var(--text-1-info)}a-title[tone=info][priority=secondary]{color:var(--text-2-info)}a-title[tone=info][priority=tertiary]{color:var(--text-3-info)}a-title[tone=info][priority=quaternary]{color:var(--text-4-info)}a-title[tone=info][priority=quinary]{color:var(--text-5-info)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--title-tone-source: attr(tone type(<color>), currentColor);--_title-tone: oklch(from var(--title-tone-source) .41 .15 h);color:oklch(from var(--title-tone-source) .33 .15 h)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=secondary]{color:var(--_title-tone)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{color:color-mix(in oklch,var(--_title-tone) 80%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quaternary]{color:color-mix(in oklch,var(--_title-tone) 60%,transparent)}a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=quinary]{color:color-mix(in oklch,var(--_title-tone) 40%,transparent)}.dark a-title[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--_title-tone: oklch(from var(--title-tone-source) .75 .11 h);color:oklch(from var(--title-tone-source) .82 .1 h)}}

package/dist/elements/index.d.ts

@@ -33,5 +33,6 @@ export { ATabElement, register_a_tab } from './a-tab';
 export { ATabsElement, register_a_tabs } from './a-tabs';
 export { ATabPanelElement, register_a_tabpanel } from './a-tabpanel';
 export { ADialogElement, register_a_dialog } from './a-dialog';
+export { ACardElement, register_a_card } from './a-card';
 import './a-title.css';
 import './a-tag.css';

package/dist/elements/index.js

@@ -18,11 +18,13 @@ import { ATabElement, register_a_tab } from "./a-tab";
 import { ATabsElement, register_a_tabs } from "./a-tabs";
 import { ATabPanelElement, register_a_tabpanel } from "./a-tabpanel";
 import { ADialogElement, register_a_dialog } from "./a-dialog";
+import { ACardElement, register_a_card } from "./a-card";
 import "./a-title.css";
 import "./a-tag.css";
 export {
   AButtonElement,
   ACalendarElement,
+  ACardElement,
   ACheckboxElement,
   ADialogElement,
   AExpanderElement,
@@ -43,6 +45,7 @@ export {
   ATooltipElement,
   register_a_button,
   register_a_calendar,
+  register_a_card,
   register_a_checkbox,
   register_a_dialog,
   register_a_expander,

package/dist/general_types.d.ts

@@ -11,6 +11,9 @@ export interface BaseProps {
     id?: string;
     /** HTML `title` attribute — native browser tooltip on hover. */
     title?: string;
+    /** Assigns the element to a named `<slot>` of a parent web component (e.g.
+     *  `slot="header"` inside a `<Card>`, `slot="footer"` inside a `<Dialog>`). */
+    slot?: string;
     /** Tab order. Set to `-1` to skip the element when tabbing. */
     tabIndex?: number;
     /** React/Preact reconciliation key when rendered inside a list. Consumed by the
@@ -171,9 +174,10 @@ export interface AProgressAttributes extends BaseAttributes {
 export interface ATextAttributes extends BaseAttributes {
     /** Visual priority. Maps to text-1..text-5. */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale;
-     *  the others apply the matching `--text-{N}-{tone}` palette. */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale; a named
+     *  tone applies the matching `--text-{N}-{tone}` palette; any literal CSS color
+     *  is a custom tone (hue kept, lightness/chroma pinned per priority in oklch). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Type scale. `small` = 13/16, `medium` (default) = 15/20, `large` = 17/24. */
     size?: 'small' | 'medium' | 'large';
     /** Render as inline-block instead of the default block. */
@@ -205,9 +209,10 @@ export interface ATitleAttributes extends BaseAttributes {
     level?: string;
     /** Visual priority. Maps to text-1..text-5. */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale;
-     *  the others apply the matching `--text-{N}-{tone}` palette. */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale; a named
+     *  tone applies the matching `--text-{N}-{tone}` palette; any literal CSS color
+     *  is a custom tone (hue kept, lightness/chroma pinned per priority in oklch). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** ARIA role — the JSX wrapper sets this to `'heading'`. */
     role?: string;
     /** ARIA heading level — the JSX wrapper sets this to match `level`. */
@@ -995,3 +1000,47 @@ export interface ATabpanelAttributes extends BaseAttributes {
      *  `internals.ariaLabelledByElements`. */
     role?: 'tabpanel';
 }
+/**
+ * Attributes for the `<a-card>` custom element — a surface container that lays out
+ * an optional `media` region plus a `header` / body / `footer` stack, and becomes a
+ * link when given `href`. Slots (light-DOM children): `media`, `icon`, `header`,
+ * `footer`, and the default slot for the body. The element exposes
+ * `::part(container | media | content | icon | header | body | footer)`. In link
+ * mode it names the shadow anchor from `aria-label` → header text → body text →
+ * `href`. Low-level attributes; for the typed JSX wrapper use `Card` from
+ * `@antadesign/anta`.
+ */
+export interface ACardAttributes extends BaseAttributes {
+    /** Semantic tone, or any literal CSS color for a one-off custom tone. Named tones
+     *  re-point the surface + text; a custom color keeps its hue with lightness/chroma
+     *  pinned. `'neutral'` is the default (same as omitting it). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Surface emphasis. `primary` (default) is a clean sheet; `secondary` a subtle
+     *  fill; `tertiary` a frosted, semi-transparent panel with a backdrop blur. */
+    priority?: 'primary' | 'secondary' | 'tertiary';
+    /** Size variant — scales the padding. `medium` is the default. */
+    size?: 'small' | 'medium' | 'large';
+    /** Which edge the full-bleed `media` slot sits on. `top` is the default. */
+    'media-position'?: 'top' | 'bottom' | 'left' | 'right';
+    /** Selected / chosen state — an inset ring in the tone colour. Presence-based
+     *  (`''` on, omit off). */
+    selected?: boolean | '';
+    /** Loading state — skeleton pulse, `aria-busy`, and (in link mode) navigation is
+     *  blocked (the anchor drops its `href`). Presence-based (`''` on, omit off). */
+    loading?: boolean | '';
+    /** Fully-round corners (`border-radius: 999px`), or a custom radius via a length
+     *  value (`round="16px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Turn the whole card into a link — the shadow container becomes a focusable
+     *  anchor with this URL. */
+    href?: string;
+    /** Anchor target (only with `href`). */
+    target?: string;
+    /** Anchor rel (only with `href`). */
+    rel?: string;
+    /** Space-separated URLs pinged on navigation (only with `href`). */
+    ping?: string;
+    /** Explicit accessible name for the link — overrides the header → body → href
+     *  chain the element derives in link mode. */
+    'aria-label'?: string;
+}

package/dist/index.d.ts

@@ -67,6 +67,8 @@ export { TabPanel } from './components/TabPanel';
 export type { TabPanelProps } from './components/TabPanel';
 export { Dialog } from './components/Dialog';
 export type { DialogProps } from './components/Dialog';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';

package/dist/index.js

@@ -39,10 +39,12 @@ import { SelectFaceted } from "./components/SelectFaceted";
 import { Tabs } from "./components/Tabs";
 import { TabPanel } from "./components/TabPanel";
 import { Dialog } from "./components/Dialog";
+import { Card } from "./components/Card";
 import { configure } from "./jsx-runtime";
 export {
   Button,
   Calendar,
+  Card,
   Checkbox,
   Dialog,
   Expander,

package/dist/jsx-runtime.d.ts

@@ -41,7 +41,7 @@ export declare function useMemo<T>(factory: () => T, deps: unknown[]): T;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -92,4 +92,5 @@ export interface AntaIntrinsicElements {
     'a-tab-label': BaseAttributes;
     'a-tabpanel': ATabpanelAttributes;
     'a-dialog': ADialogAttributes;
+    'a-card': ACardAttributes;
 }

package/package.json

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