@antadesign/anta 0.1.1-dev.4 → 0.1.1-dev.6

package/README.md

@@ -49,6 +49,19 @@ If you need a different order, declare it in your *own* CSS file that loads **be
 
 CSS custom properties (the `:root { --… }` declarations in `tokens.css`) stay unlayered so they take effect everywhere unconditionally.
 
+> **Gotcha: unlayered hard resets defeat Anta's element rules.**
+>
+> A snippet like this in your global CSS — common copy-paste from older reset guides — silently overrides every element rule Anta ships:
+>
+> ```css
+> *, *::before, *::after { box-sizing: border-box; }
+> * { margin: 0; }
+> ```
+>
+> Unlayered styles **always** beat layered ones in the cascade, regardless of specificity. So `* { margin: 0 }` outranks Anta's `caption { margin-bottom: 0.25em }`, `p { margin: 0 0 1em }`, `ul / ol` padding, and any other per-element default Anta provides — even though those use stronger selectors.
+>
+> If you're importing `@antadesign/anta/reset.css`, Anta already does the same universal `box-sizing` and margin reset, *inside* `@layer anta`. The element-level rules sitting on top are intentionally polite defaults — sensible out of the box, trivially overridable when you want something else (any rule in `@layer components` / `@layer utilities`, or any unlayered rule of your own that targets specific elements, wins automatically). **Delete the duplicate hard reset from your global CSS** so those defaults can apply. If you want to keep your own reset, wrap it in `@layer base { … }` so it sits below `anta` in the declared order and Anta's rules still win element-by-element.
+
 ## Registering elements
 
 The JSX wrappers (React components) as `Progress` render custom DOM elements as `<a-progress>`. The custom elements themselves must be registered with the browser **before** they appear in the DOM, and registration only works where `HTMLElement` exists — i.e. the UI thread of a real browser. **Node.js (SSR) and Worker threads don't have `HTMLElement`**, so the import is harmless in those environments: it does nothing — registration is skipped silently and the class uses a stand-in base instead of crashing — though it might extend your worker's bundle size a bit.

package/dist/components/Text.d.ts

@@ -4,6 +4,9 @@ export interface TextProps extends BaseProps {
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
     /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
     tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';
+    /** Type scale. `small` = 13/16, `medium` = 15/20, `large` = 17/24.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
     /** Render as inline-block instead of the default block element. */
     inline?: boolean;
     /** Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
@@ -39,4 +42,4 @@ export interface TextProps extends BaseProps {
  * <Text truncate={3} expandable>…long paragraph…</Text>
  * ```
  */
-export declare const Text: ({ priority, tone, inline, truncate, expandable, className, style, children, ...rest }: TextProps) => any;
+export declare const Text: ({ priority, tone, size, inline, truncate, expandable, className, style, children, ...rest }: TextProps) => any;

package/dist/components/Text.js

@@ -1,5 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-const Text = ({ priority, tone, inline, truncate, expandable, className, style, children, ...rest }) => {
+const Text = ({ priority, tone, size, inline, truncate, expandable, className, style, children, ...rest }) => {
   const lineCount = typeof truncate === "number" ? truncate : truncate ? 1 : null;
   const computedStyle = lineCount != null ? { ...style, ["--line-clamp"]: lineCount } : style;
   return /* @__PURE__ */ jsx(
@@ -7,6 +7,7 @@ const Text = ({ priority, tone, inline, truncate, expandable, className, style,
     {
       priority,
       tone,
+      size,
       inline: inline ? "" : void 0,
       truncate: lineCount != null ? String(lineCount) : void 0,
       expandable: expandable && truncate ? "" : void 0,

package/dist/components/Title.d.ts

@@ -0,0 +1,41 @@
+import type { BaseProps } from "../general_types";
+export interface TitleProps extends BaseProps {
+    /** Heading level, 1-6. Drives font-size, line-height, and vertical
+     *  rhythm. Also surfaced to assistive tech via `aria-level`. Defaults
+     *  to 2 (h1 is typically reserved for the page title). */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Visual priority. Maps to text-1..text-5. Defaults to 'primary' (text-1). */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
+    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
+    tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';
+}
+/**
+ * Block-level heading with level 1-6, priority, and tone.
+ *
+ * Renders an `<a-title>` styled tag (no JS, no shadow DOM) with
+ * `role="heading"` and `aria-level={level}` set by this wrapper for
+ * accessibility. Children can be anything — text, icons, badges, links
+ * — so there are no `leadingIcon` / `trailingIcon` props; just compose
+ * inside.
+ *
+ * Raw `<h1>`-`<h6>` get the same visual styling via `src/reset.css`,
+ * so use a real heading tag if SEO matters and you don't need the
+ * `tone` / `priority` props.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only)
+ * so the CSS ships with the page.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Title level={1}>Page title</Title>
+ * <Title level={2} tone="brand">Section</Title>
+ * ```
+ *
+ * @example With children beyond text
+ * ```tsx
+ * <Title level={3}>
+ *   <Icon shape="bookmark" /> Saved items
+ * </Title>
+ * ```
+ */
+export declare const Title: ({ level, priority, tone, className, style, children, ...rest }: TitleProps) => any;

package/dist/components/Title.js

@@ -0,0 +1,20 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const Title = ({ level = 2, priority, tone, className, style, children, ...rest }) => {
+  return /* @__PURE__ */ jsx(
+    "a-title",
+    {
+      level: String(level),
+      priority,
+      tone,
+      role: "heading",
+      "aria-level": level,
+      class: className,
+      style,
+      ...rest,
+      children
+    }
+  );
+};
+export {
+  Title
+};

package/dist/elements/a-icon.css

@@ -1,5 +1,10 @@
 @layer anta {
   a-icon {
+    /* `<a-icon size="N">` maps to `--icon-size` via typed `attr()`
+       (CSS Values 5) — Chrome 133+, Safari 18.2+. Firefox not yet:
+       in raw HTML usage there, set `style="--icon-size: Npx"`. */
+    --icon-size: attr(size px);
+
     display: inline-block;
     vertical-align: middle;
     width: var(--icon-size, 16px);

package/dist/elements/a-icon.shapes.d.ts

@@ -1,3 +1,4 @@
+import type { IconShapes } from '@antadesign/anta';
 export declare const ICON_SHAPES: readonly ["arrow-left-to-line", "arrow-left", "arrow-narrow-down", "arrow-narrow-up-down", "arrow-narrow-up", "arrow-right", "arrow-top-right", "asterisk", "book-open", "braces", "bug", "calendar", "case-sensitive", "chat", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-right", "circle-check", "circle-large", "circle", "click", "clock", "cloud-upload", "copy", "corner-down-right", "cube", "dots-vertical", "download", "edit", "education-disk", "external-link", "file-down", "file", "filter", "folder-close", "folder-open", "folder-tree", "github-logo", "gitlab-logo", "hat-glasses", "heart-handshake", "help-disk", "history-tree", "history", "home", "hourglass", "info", "jira-logo", "linear-logo", "link", "list-detail-view", "maximize", "megaphone", "menu", "minimize", "minus", "moon", "more", "move-horizontal", "not-equal", "play", "plus", "presentation", "refresh-ccw-dot", "refresh", "regex", "repeat", "rss", "runs-history", "scroll-text", "search-check", "search", "send", "sparkles", "sun", "swatch-book", "table-2", "text-highlight", "text-initial", "timer", "trash", "trello-logo", "view", "warning-triangle", "webhook", "workflow", "x"];
 export declare const ICON_SYNONYMS: Readonly<Record<string, readonly string[]>>;
 declare module '@antadesign/anta' {
@@ -94,4 +95,4 @@ declare module '@antadesign/anta' {
         'x': true;
     }
 }
-export type IconShape = keyof import('@antadesign/anta').IconShapes;
+export type IconShape = keyof IconShapes;

package/dist/elements/a-progress.css

@@ -1,7 +1,7 @@
 @layer anta {
   a-progress {
     --progress-bg: var(--bg-block);
-    --progress-border-color: var(--border-2);
+    --progress-border-color: var(--border-4);
     --progress-indicator-bg: var(--bg-spot);
     /* Right-edge fade: from the indicator's own bg to the border
        colour, both opaque. Two opaque endpoints + `in oklch`
@@ -34,7 +34,7 @@
   
   a-progress[tone="info"] {
     --progress-bg: var(--bg-block-info);
-    --progress-border-color: var(--border-2-info);
+    --progress-border-color: var(--border-4-info);
     --progress-indicator-bg: var(--bg-spot-info);
     --progress-text-color: var(--text-2-info);
     --progress-hint-color: var(--text-3-info);

package/dist/elements/a-text.css

@@ -3,11 +3,17 @@
     --text-color: var(--text-1);
     --text-link-color: var(--link-color);
     --text-link-hover: var(--link-color-hover);
-  
+
     display: block;
     color: var(--text-color);
+    font-size: 15px;
+    line-height: 20px;
   }
-  
+
+  a-text[size="small"]  { font-size: 13px; line-height: 16px; }
+  a-text[size="medium"] { font-size: 15px; line-height: 20px; }
+  a-text[size="large"]  { font-size: 17px; line-height: 24px; }
+
   a-text[inline] {
     display: inline-block;
   }

package/dist/elements/a-title.css

@@ -0,0 +1,64 @@
+@layer anta {
+  /* `<a-title>` is intentionally CSS-only — no JS, no shadow DOM, no
+     `customElements.define`. The browser treats it as a generic unknown
+     element; the rules below give it block layout, the demi-bold
+     variable-font weight, and a per-level type scale + vertical rhythm.
+     The matching `h1`-`h6` rules in `src/reset.css` are kept in lockstep
+     so raw markup looks the same as `<Title level={n}>`. */
+
+  a-title {
+    display: block;
+    color: var(--text-1);
+    font-weight: 584.62;
+    letter-spacing: 0;
+    text-wrap: balance;
+  }
+
+  a-title a-icon {
+    transform: translateY(-0.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;  }
+
+  /* Neutral priority overrides. */
+  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); }
+
+  /* Tinted — same shape as a-text's tone × priority matrix. */
+  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);     }
+}

package/dist/elements/index.d.ts

@@ -1,5 +1,6 @@
 import './a-progress.css';
 import './a-text.css';
+import './a-title.css';
 import './a-icon.css';
 import './a-icon.shapes.css';
 export { AProgressElement, register_a_progress } from './a-progress';

package/dist/elements/index.js

@@ -3,6 +3,7 @@ import { register_a_text } from "./a-text";
 import { register_a_icon } from "./a-icon";
 import "./a-progress.css";
 import "./a-text.css";
+import "./a-title.css";
 import "./a-icon.css";
 import "./a-icon.shapes.css";
 import { AProgressElement, register_a_progress as register_a_progress2 } from "./a-progress";

package/dist/general_types.d.ts

@@ -60,6 +60,8 @@ export interface ATextAttributes extends BaseAttributes {
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
     /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
     tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';
+    /** 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. */
     inline?: boolean | string;
     /** Truncate to N lines with a trailing ellipsis. The attribute value
@@ -73,6 +75,25 @@ export interface ATextAttributes extends BaseAttributes {
     /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
     'aria-expanded'?: boolean | 'true' | 'false';
 }
+/**
+ * Attributes for the `<a-title>` styled tag.
+ *
+ * `<a-title>` has no JS — it's a CSS-only styled element. Low-level
+ * attributes; for the JSX wrapper with typed `level` numbers and ARIA
+ * use `Title` from `@antadesign/anta`.
+ */
+export interface ATitleAttributes extends BaseAttributes {
+    /** Heading level as a string attribute, '1'-'6'. */
+    level?: string;
+    /** Visual priority. Maps to text-1..text-5. */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
+    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
+    tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';
+    /** ARIA role — the JSX wrapper sets this to `'heading'`. */
+    role?: string;
+    /** ARIA heading level — the JSX wrapper sets this to match `level`. */
+    'aria-level'?: number | string;
+}
 /**
  * Attributes for the `<a-icon>` custom element. The `shape` attribute
  * value is typed as `string` here so the element accepts any consumer's
@@ -81,6 +102,16 @@ export interface ATextAttributes extends BaseAttributes {
 export interface AIconAttributes extends BaseAttributes {
     /** Which icon to render. */
     shape?: string;
+    /** Width and height in pixels. Mapped to the `--icon-size` custom
+     *  property via the CSS Values 5 typed `attr()` function — Chrome
+     *  133+ and Safari 18.2+ only. Firefox hasn't shipped typed
+     *  `attr()` yet, so on raw `<a-icon size="N">` the attribute is
+     *  silently ignored there and the icon stays at the default 16 ×
+     *  16. For cross-browser sizing in pure-HTML usage, set the
+     *  variable inline: `<a-icon style="--icon-size: 24px">`. The JSX
+     *  `<Icon size={N}>` wrapper already does that under the hood and
+     *  is the recommended path. */
+    size?: number | string;
     /** ARIA role — the JSX wrapper sets `'img'` when a label is provided. */
     role?: string;
     /** ARIA accessible name when the icon carries meaning. */

package/dist/generate-icons.mjs

@@ -63,7 +63,7 @@ export async function generate({ input, output = '.', name = 'a-icon.shapes', in
   // built-ins; consumers who want their icons unlayered can post-
   // process the output.
   const cssLines = [
-    '/* Auto-generated by scripts/generate-icons.mjs. Do not edit by hand. */',
+    '/* Auto-generated by @antadesign/anta. Do not edit by hand. */',
     '',
     '@layer anta {',
     '',
@@ -132,7 +132,9 @@ export async function generate({ input, output = '.', name = 'a-icon.shapes', in
 
   const synonymsEntries = Object.entries(synonyms)
   const tsLines = [
-    '/* Auto-generated by scripts/generate-icons.mjs. Do not edit by hand. */',
+    '/* Auto-generated by @antadesign/anta. Do not edit by hand. */',
+    '',
+    "import type { IconShapes } from '@antadesign/anta'",
     '',
     'export const ICON_SHAPES = [',
     ...shapes.map((s) => `  '${s}',`),
@@ -150,7 +152,7 @@ export async function generate({ input, output = '.', name = 'a-icon.shapes', in
     '  }',
     '}',
     '',
-    "export type IconShape = keyof import('@antadesign/anta').IconShapes",
+    'export type IconShape = keyof IconShapes',
     '',
   ]
   fs.writeFileSync(tsPath, tsLines.join('\n'))

package/dist/index.d.ts

@@ -20,6 +20,8 @@ export { Progress } from './components/Progress';
 export type { ProgressProps } from './components/Progress';
 export { Text } from './components/Text';
 export type { TextProps } from './components/Text';
+export { Title } from './components/Title';
+export type { TitleProps } from './components/Title';
 export { Icon } from './components/Icon';
 export type { IconProps } from './components/Icon';
 export { ICON_SHAPES, ICON_SYNONYMS } from './elements/a-icon.shapes';

package/dist/index.js

@@ -1,5 +1,6 @@
 import { Progress } from "./components/Progress";
 import { Text } from "./components/Text";
+import { Title } from "./components/Title";
 import { Icon } from "./components/Icon";
 import { ICON_SHAPES, ICON_SYNONYMS } from "./elements/a-icon.shapes";
 import { configure } from "./jsx-runtime";
@@ -9,5 +10,6 @@ export {
   Icon,
   Progress,
   Text,
+  Title,
   configure
 };

package/dist/jsx-runtime.d.ts

@@ -22,7 +22,7 @@ export declare function configure(jsx: JsxFunction, Fragment?: ComponentType): v
 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, AIconAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, AIconAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     type IntrinsicElements = React.JSX.IntrinsicElements & {
         'a-progress': AProgressAttributes;
@@ -31,6 +31,7 @@ export declare namespace JSX {
         'a-progress-text': BaseAttributes;
         'a-progress-hint': BaseAttributes;
         'a-text': ATextAttributes;
+        'a-title': ATitleAttributes;
         'a-icon': AIconAttributes;
     };
 }

package/dist/reset.css

@@ -52,10 +52,22 @@
 
   /* ───── Typography defaults — Anta opinion ───────────────────── */
 
+  /* Raw headings adopt the same visual scale as `<Title level={n}>`
+     so plain markup matches the component. Values are duplicated in
+     `src/elements/a-title.css`; keep the two in lockstep. */
   h1, h2, h3, h4, h5, h6 {
-    font-weight: 600;
+    color: var(--text-1);
+    font-weight: 584.62;
+    letter-spacing: 0;
   }
 
+  h1 { font-size: 28px; line-height: 32px; margin-block: 0    16px; }
+  h2 { font-size: 24px; line-height: 28px; margin-block: 32px 12px; }
+  h3 { font-size: 20px; line-height: 24px; margin-block: 24px 12px; }
+  h4 { font-size: 17px; line-height: 20px; margin-block: 20px 8px;  }
+  h5 { font-size: 15px; line-height: 20px; margin-block: 16px 8px;  }
+  h6 { font-size: 13px; line-height: 16px; margin-block: 16px 4px;  }
+
   strong {
     font-weight: 600;
   }
@@ -112,4 +124,79 @@
   a:active {
     text-decoration-color: color-mix(in oklch, currentColor 75%, transparent);
   }
+
+  /* Text selection — full-chroma brand color at 15% alpha. Using
+     OKLCH relative-color syntax (not `color-mix` with `transparent`)
+     keeps the chroma intact: mixing toward `transparent` interpolates
+     in OKLCH and pulls L/C toward zero, which washes the result out.
+     `calc(c * 1.5)` bumps the saturation modestly above the source
+     token so the highlight reads as clearly brand-coloured rather
+     than a neutral grey. No `color` override on the selection, so
+     the selected text keeps its original color and contrast is
+     preserved automatically. `--text-1-brand` inverts between light
+     and dark, so the effect tracks the active palette unaided. */
+  ::selection {
+    background: oklch(from var(--text-1-brand) l calc(c * 1.5) h / 0.15);
+  }
+
+  /* ───── Tables ───────────────────────────────────────────────── */
+
+  /* Polite, element-level baseline. Rules live in `@layer anta`, so
+     any consumer rule outside a layer — or in `components` /
+     `utilities` — overrides without effort. Width is intentionally
+     left untouched so app tables stay inline-sized; full-bleed is a
+     decision for the surrounding page. */
+  table {
+    border-collapse: collapse;
+    font-variant-numeric: tabular-nums;
+  }
+
+  caption {
+    text-align: left;
+    color: var(--text-3);
+    padding-left: 10px;
+    margin-bottom: 0.25em;
+  }
+
+  th, td {
+    padding: 5px 10px;
+    text-align: left;
+    vertical-align: top;
+    border-bottom: 1px solid var(--border-5);
+  }
+
+  thead th {
+    font-weight: 600;
+  }
+
+  /* Drop the trailing hairline under the table's last row so the
+     table doesn't end with an orphan line. Handles both "tbody is
+     the final section" and "tfoot is the final section". */
+  tfoot tr:last-child > :is(th, td),
+  table:not(:has(tfoot)) tbody tr:last-child > :is(th, td) {
+    border-bottom: none;
+  }
+
+  /* Opt-in: outer frame + vertical column dividers + 3px rounded
+     corners. Switches to separate borders because `border-radius`
+     doesn't render reliably under `border-collapse: collapse` — the
+     collapsed borders override the radius. Cells draw their own
+     right edges to build the internal grid; the last cell in each
+     row drops its right border so the table's own border supplies
+     the outer frame. Row separators come from the baseline
+     `border-bottom` and continue to work under separate-collapse. */
+  table[data-bordered] {
+    border-collapse: separate;
+    border-spacing: 0;
+    border: 1px solid var(--border-5);
+    border-radius: 3px;
+  }
+
+  table[data-bordered] :is(th, td) {
+    border-right: 1px solid var(--border-5);
+  }
+
+  table[data-bordered] tr > :is(th, td):last-child {
+    border-right: 0;
+  }
 }

package/dist/tokens.css

@@ -102,46 +102,46 @@
   --text-5-info: #17508280; --text-5-info: oklch(0.422 0.101 249 / 0.50);
 
   /* Borders — light, neutral */
-  --border-1: #ece9ec; --border-1: oklch(0.937 0.005 326);
-  --border-2: #e0dce0; --border-2: oklch(0.899 0.007 326);
+  --border-1: #938d96; --border-1: oklch(0.651 0.015 315);
+  --border-2: #c1b9c1; --border-2: oklch(0.795 0.014 326);
   --border-3: #d4ced4; --border-3: oklch(0.858 0.010 326);
-  --border-4: #c1b9c1; --border-4: oklch(0.795 0.014 326);
-  --border-5: #938d96; --border-5: oklch(0.651 0.015 315);
+  --border-4: #e0dce0; --border-4: oklch(0.899 0.007 326);
+  --border-5: #ece9ec; --border-5: oklch(0.937 0.005 326);
 
   /* Borders — light, Brand */
-  --border-1-brand: #e9e5fa; --border-1-brand: oklch(0.931 0.028 295);
-  --border-2-brand: #ddd8f8; --border-2-brand: oklch(0.896 0.044 293);
+  --border-1-brand: #9081df; --border-1-brand: oklch(0.657 0.137 289);
+  --border-2-brand: #bcb1f1; --border-2-brand: oklch(0.792 0.090 292);
   --border-3-brand: #d2cbf6; --border-3-brand: oklch(0.862 0.060 293);
-  --border-4-brand: #bcb1f1; --border-4-brand: oklch(0.792 0.090 292);
-  --border-5-brand: #9081df; --border-5-brand: oklch(0.657 0.137 289);
+  --border-4-brand: #ddd8f8; --border-4-brand: oklch(0.896 0.044 293);
+  --border-5-brand: #e9e5fa; --border-5-brand: oklch(0.931 0.028 295);
 
   /* Borders — light, Success */
-  --border-1-success: #d9f2e0; --border-1-success: oklch(0.938 0.036 154);
-  --border-2-success: #c6ecd1; --border-2-success: oklch(0.909 0.054 154);
+  --border-1-success: #44c169; --border-1-success: oklch(0.721 0.167 150);
+  --border-2-success: #88d7a0; --border-2-success: oklch(0.813 0.110 153);
   --border-3-success: #b3e5c2; --border-3-success: oklch(0.878 0.071 154);
-  --border-4-success: #88d7a0; --border-4-success: oklch(0.813 0.110 153);
-  --border-5-success: #44c169; --border-5-success: oklch(0.721 0.167 150);
+  --border-4-success: #c6ecd1; --border-4-success: oklch(0.909 0.054 154);
+  --border-5-success: #d9f2e0; --border-5-success: oklch(0.938 0.036 154);
 
   /* Borders — light, Critical */
-  --border-1-critical: #fae5e5; --border-1-critical: oklch(0.939 0.023 18);
-  --border-2-critical: #f7d4d4; --border-2-critical: oklch(0.899 0.039 18);
+  --border-1-critical: #e56c6c; --border-1-critical: oklch(0.676 0.151 22);
+  --border-2-critical: #efa4a4; --border-2-critical: oklch(0.791 0.089 19);
   --border-3-critical: #f4c2c2; --border-3-critical: oklch(0.858 0.057 18);
-  --border-4-critical: #efa4a4; --border-4-critical: oklch(0.791 0.089 19);
-  --border-5-critical: #e56c6c; --border-5-critical: oklch(0.676 0.151 22);
+  --border-4-critical: #f7d4d4; --border-4-critical: oklch(0.899 0.039 18);
+  --border-5-critical: #fae5e5; --border-5-critical: oklch(0.939 0.023 18);
 
   /* Borders — light, Warning */
-  --border-1-warning: #f9e7cd; --border-1-warning: oklch(0.936 0.040 77);
-  --border-2-warning: #f6dbb1; --border-2-warning: oklch(0.903 0.062 79);
+  --border-1-warning: #d88118; --border-1-warning: oklch(0.682 0.149 63);
+  --border-2-warning: #edb25a; --border-2-warning: oklch(0.801 0.125 75);
   --border-3-warning: #f3cc91; --border-3-warning: oklch(0.865 0.087 78);
-  --border-4-warning: #edb25a; --border-4-warning: oklch(0.801 0.125 75);
-  --border-5-warning: #d88118; --border-5-warning: oklch(0.682 0.149 63);
+  --border-4-warning: #f6dbb1; --border-4-warning: oklch(0.903 0.062 79);
+  --border-5-warning: #f9e7cd; --border-5-warning: oklch(0.936 0.040 77);
 
   /* Borders — light, Info */
-  --border-1-info: #e1eefa; --border-1-info: oklch(0.943 0.021 246);
-  --border-2-info: #cfe3f7; --border-2-info: oklch(0.907 0.035 248);
+  --border-1-info: #56a1e1; --border-1-info: oklch(0.688 0.121 246);
+  --border-2-info: #93c5ec; --border-2-info: oklch(0.802 0.076 242);
   --border-3-info: #bad6f3; --border-3-info: oklch(0.865 0.050 249);
-  --border-4-info: #93c5ec; --border-4-info: oklch(0.802 0.076 242);
-  --border-5-info: #56a1e1; --border-5-info: oklch(0.688 0.121 246);
+  --border-4-info: #cfe3f7; --border-4-info: oklch(0.907 0.035 248);
+  --border-5-info: #e1eefa; --border-5-info: oklch(0.943 0.021 246);
 
   /* Prose link colors — used by <a-text> for priorities 1 & 2 and by
      consumers wiring their own prose contexts. */
@@ -233,46 +233,46 @@
   --text-5-info: #7db6e866; --text-5-info: oklch(0.756 0.094 246 / 0.40);
 
   /* Borders — dark, neutral */
-  --border-1: #272329; --border-1: oklch(0.263 0.012 315);
-  --border-2: #3e3941; --border-2: oklch(0.353 0.015 313);
+  --border-1: #776e77; --border-1: oklch(0.549 0.018 326);
+  --border-2: #534c57; --border-2: oklch(0.427 0.020 313);
   --border-3: #49424c; --border-3: oklch(0.390 0.019 316);
-  --border-4: #534c57; --border-4: oklch(0.427 0.020 313);
-  --border-5: #776e77; --border-5: oklch(0.549 0.018 326);
+  --border-4: #3e3941; --border-4: oklch(0.353 0.015 313);
+  --border-5: #272329; --border-5: oklch(0.263 0.012 315);
 
   /* Borders — dark, Brand */
-  --border-1-brand: #251f47; --border-1-brand: oklch(0.269 0.072 287);
-  --border-2-brand: #2d2556; --border-2-brand: oklch(0.302 0.085 288);
+  --border-1-brand: #7460d7; --border-1-brand: oklch(0.569 0.175 287);
+  --border-2-brand: #503cb4; --border-2-brand: oklch(0.453 0.181 284);
   --border-3-brand: #483493; --border-3-brand: oklch(0.405 0.149 287);
-  --border-4-brand: #503cb4; --border-4-brand: oklch(0.453 0.181 284);
-  --border-5-brand: #7460d7; --border-5-brand: oklch(0.569 0.175 287);
+  --border-4-brand: #2d2556; --border-4-brand: oklch(0.302 0.085 288);
+  --border-5-brand: #251f47; --border-5-brand: oklch(0.269 0.072 287);
 
   /* Borders — dark, Success */
-  --border-1-success: #0f321a; --border-1-success: oklch(0.284 0.060 151);
-  --border-2-success: #12391e; --border-2-success: oklch(0.309 0.065 151);
+  --border-1-success: #329550; --border-1-success: oklch(0.595 0.138 150);
+  --border-2-success: #226737; --border-2-success: oklch(0.458 0.103 150);
   --border-3-success: #1f5c31; --border-3-success: oklch(0.424 0.094 150);
-  --border-4-success: #226737; --border-4-success: oklch(0.458 0.103 150);
-  --border-5-success: #329550; --border-5-success: oklch(0.595 0.138 150);
+  --border-4-success: #12391e; --border-4-success: oklch(0.309 0.065 151);
+  --border-5-success: #0f321a; --border-5-success: oklch(0.284 0.060 151);
 
   /* Borders — dark, Critical */
-  --border-1-critical: #531314; --border-1-critical: oklch(0.298 0.095 24);
-  --border-2-critical: #5d1819; --border-2-critical: oklch(0.325 0.100 24);
+  --border-1-critical: #de4545; --border-1-critical: oklch(0.610 0.190 25);
+  --border-2-critical: #b02120; --border-2-critical: oklch(0.492 0.179 27);
   --border-3-critical: #a01c1c; --border-3-critical: oklch(0.458 0.167 27);
-  --border-4-critical: #b02120; --border-4-critical: oklch(0.492 0.179 27);
-  --border-5-critical: #de4545; --border-5-critical: oklch(0.610 0.190 25);
+  --border-4-critical: #5d1819; --border-4-critical: oklch(0.325 0.100 24);
+  --border-5-critical: #531314; --border-5-critical: oklch(0.298 0.095 24);
 
   /* Borders — dark, Warning */
-  --border-1-warning: #37200b; --border-1-warning: oklch(0.269 0.048 61);
-  --border-2-warning: #3e250e; --border-2-warning: oklch(0.291 0.052 61);
+  --border-1-warning: #ae6613; --border-1-warning: oklch(0.579 0.127 62);
+  --border-2-warning: #7f410b; --border-2-warning: oklch(0.445 0.105 54);
   --border-3-warning: #6a3b0c; --border-3-warning: oklch(0.403 0.087 60);
-  --border-4-warning: #7f410b; --border-4-warning: oklch(0.445 0.105 54);
-  --border-5-warning: #ae6613; --border-5-warning: oklch(0.579 0.127 62);
+  --border-4-warning: #3e250e; --border-4-warning: oklch(0.291 0.052 61);
+  --border-5-warning: #37200b; --border-5-warning: oklch(0.269 0.048 61);
 
   /* Borders — dark, Info */
-  --border-1-info: #0e2b44; --border-1-info: oklch(0.281 0.058 248);
-  --border-2-info: #12324f; --border-2-info: oklch(0.309 0.064 249);
+  --border-1-info: #2686d9; --border-1-info: oklch(0.608 0.152 250);
+  --border-2-info: #1a5b93; --border-2-info: oklch(0.461 0.111 249);
   --border-3-info: #175082; --border-3-info: oklch(0.422 0.101 249);
-  --border-4-info: #1a5b93; --border-4-info: oklch(0.461 0.111 249);
-  --border-5-info: #2686d9; --border-5-info: oklch(0.608 0.152 250);
+  --border-4-info: #12324f; --border-4-info: oklch(0.309 0.064 249);
+  --border-5-info: #0e2b44; --border-5-info: oklch(0.281 0.058 248);
 
   /* Prose link colors — dark mode */
   --link-color: oklch(0.72 0.15 248.65);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.1.1-dev.4",
+  "version": "0.1.1-dev.6",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,8 +36,8 @@
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css && pnpm run build:types",
-    "build:css": "cp src/elements/a-progress.css src/elements/a-text.css src/elements/a-icon.css src/elements/a-icon.shapes.css dist/elements/ && cp src/components/Progress.module.css src/components/Text.module.css dist/components/ && cp src/tokens.css src/reset.css dist/ && cp scripts/generate-icons.mjs dist/",
-    "build:js": "esbuild src/components/Progress.tsx src/components/Text.tsx src/components/Icon.tsx src/index.ts src/jsx-runtime.ts src/general_types.ts src/anta_helpers.ts src/elements/index.ts src/elements/a-progress.ts src/elements/a-text.ts src/elements/a-icon.ts src/elements/a-icon.shapes.ts --outdir=dist --outbase=src --jsx=automatic --jsx-import-source=@antadesign/anta --format=esm --target=ES2022 --loader:.module.css=local-css --loader:.css=global-css",
+    "build:css": "cp src/elements/a-progress.css src/elements/a-text.css src/elements/a-title.css src/elements/a-icon.css src/elements/a-icon.shapes.css dist/elements/ && cp src/components/Progress.module.css src/components/Text.module.css dist/components/ && cp src/tokens.css src/reset.css dist/ && cp scripts/generate-icons.mjs dist/",
+    "build:js": "esbuild src/components/Progress.tsx src/components/Text.tsx src/components/Title.tsx src/components/Icon.tsx src/index.ts src/jsx-runtime.ts src/general_types.ts src/anta_helpers.ts src/elements/index.ts src/elements/a-progress.ts src/elements/a-text.ts src/elements/a-icon.ts src/elements/a-icon.shapes.ts --outdir=dist --outbase=src --jsx=automatic --jsx-import-source=@antadesign/anta --format=esm --target=ES2022 --loader:.module.css=local-css --loader:.css=global-css",
     "build:types": "tsc -p src/tsconfig.json",
     "typecheck": "tsc --noEmit -p src/tsconfig.json",
     "icons": "node scripts/generate-icons.mjs --input src/elements/icons --output src/elements --name a-icon.shapes --internal",