@antadesign/anta 0.1.1-dev.5 → 0.1.1-dev.7

package/dist/general_types.d.ts

@@ -1,3 +1,4 @@
+import type { IconShape } from './elements/a-icon.shapes';
 /** Common props for JSX component wrappers. */
 export interface BaseProps {
     /** CSS class name. Merged with any internal classes by the component. */
@@ -6,9 +7,21 @@ export interface BaseProps {
     style?: React.CSSProperties;
     /** Child elements. When provided, replaces the component's default label/content. */
     children?: React.ReactNode;
+    /** HTML `id` attribute. */
+    id?: string;
+    /** HTML `title` attribute — native browser tooltip on hover. */
+    title?: string;
+    /** Tab order. Set to `-1` to skip the element when tabbing. */
+    tabIndex?: number;
+    /** Any `data-*` attribute is forwarded to the rendered element. */
+    [key: `data-${string}`]: unknown;
+    /** Any `aria-*` attribute is forwarded to the rendered element. */
+    [key: `aria-${string}`]: unknown;
 }
 /** Attributes for intrinsic custom elements (`<a-*>` tags) in JSX. */
 export interface BaseAttributes {
+    /** React/Preact reconciliation key when rendered inside a list. */
+    key?: string | number | null;
     /** HTML `class` attribute (standard DOM). */
     class?: string;
     /** React/Preact-style class name. Alias for `class`. */
@@ -60,6 +73,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
@@ -74,13 +89,83 @@ export interface ATextAttributes extends BaseAttributes {
     'aria-expanded'?: boolean | 'true' | 'false';
 }
 /**
- * Attributes for the `<a-icon>` custom element. The `shape` attribute
- * value is typed as `string` here so the element accepts any consumer's
- * generated shapes. The JSX wrapper (`Icon`) narrows it to `IconShape`.
+ * 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-sticker>` static sticker carrier.
+ *
+ * The SVG payload is passed as the `svg` attribute — a markup string.
+ * On change, the element writes it into its shadow DOM (no light-DOM
+ * `<slot>`, so children aren't rendered). The JSX wrapper
+ * (`Sticker{Name}`) sets it from the per-sticker module's inlined SVG.
+ * Sizing comes from `--sticker-size`.
+ */
+export interface AStickerAttributes extends BaseAttributes {
+    /** SVG markup string. On change the element drops it into its shadow
+     *  DOM (`innerHTML`). */
+    svg?: string;
+    role?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: 'true' | 'false' | boolean;
+}
+/**
+ * Attributes for the `<a-sticker-animated>` Lottie sticker carrier.
+ *
+ * The Lottie payload is passed as the `animation` attribute — a JSON
+ * string. On change the element `JSON.parse`s it once and drives a
+ * `lottie-web` player (SVG renderer) inside its shadow DOM. The JSX
+ * wrapper (`Sticker{Name}Animated`) sets it from the per-sticker
+ * module's inlined JSON. Sizing comes from the `--sticker-size` CSS
+ * variable; `paused` controls playback.
+ */
+export interface AStickerAnimatedAttributes extends BaseAttributes {
+    /** Lottie payload as a JSON string. The element parses it once on
+     *  change. */
+    animation?: string;
+    /** Present (any string value, including `""`) freezes the animation.
+     *  A numeric string is parsed as seconds and the player seeks to
+     *  that time before pausing. Omit to play. */
+    paused?: string | boolean | number;
+    role?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: 'true' | 'false' | boolean;
+}
+/**
+ * Attributes for the `<a-icon>` custom element. `shape` is typed as
+ * `IconShape` (`keyof IconShapes`); the `IconShapes` interface is
+ * module-augmentable, so consumers who generate their own shape sets
+ * via `declare module '@antadesign/anta' { interface IconShapes { … } }`
+ * get those keys accepted automatically.
  */
 export interface AIconAttributes extends BaseAttributes {
     /** Which icon to render. */
-    shape?: string;
+    shape?: IconShape;
+    /** 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. */
@@ -88,3 +173,34 @@ export interface AIconAttributes extends BaseAttributes {
     /** Hides decorative icons from screen readers. */
     'aria-hidden'?: 'true' | 'false' | boolean;
 }
+/**
+ * Attributes for the `<a-button>` custom element. For the typed JSX
+ * wrapper use `Button` from `@antadesign/anta`.
+ */
+export interface AButtonAttributes extends BaseAttributes {
+    /** Visual emphasis. */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+    /** Semantic tone, or any literal CSS color for a one-off custom tone. */
+    tone?: 'neutral' | 'brand' | 'critical' | 'info' | 'success' | 'warning' | (string & {});
+    /** Underline style. Only renders on `priority="tertiary" | "quaternary"`. */
+    underline?: 'solid' | 'dashed' | 'dotted';
+    /** Size variant. small=22px, medium=26px, large=30px. */
+    size?: 'small' | 'medium' | 'large';
+    /** Drop outer padding to zero. Only takes effect on `priority="quaternary"`.
+     *  Presence-based: `''` (or any value) turns it on; omit to turn off. */
+    paddingless?: '' | 'true' | 'false' | boolean;
+    /** Loading state. Presence-based (`''` on, omit off). */
+    loading?: '' | 'true' | 'false' | boolean;
+    /** Disabled state. Presence-based (`''` on, omit off). */
+    disabled?: '' | 'true' | 'false' | boolean;
+    /** Toggled-on / pressed state. Presence-based (`''` on, omit off). */
+    selected?: '' | 'true' | 'false' | boolean;
+    /** Submit/reset semantics. */
+    type?: 'button' | 'submit' | 'reset';
+    /** Associate with a form by id when not nested inside it. */
+    form?: string;
+    /** Custom event name dispatched (bubbling) on click. */
+    'data-custom-event'?: string;
+    'aria-disabled'?: 'true' | 'false' | boolean;
+    'aria-busy'?: 'true' | 'false' | boolean;
+}

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/generate-stickers.mjs

@@ -0,0 +1,293 @@
+#!/usr/bin/env node
+/**
+ * generate-stickers.mjs — read a folder of per-sticker subfolders and emit
+ * one per-sticker TS module per mode (static + animated) under the chosen
+ * output folder, plus a barrel index that re-exports them.
+ *
+ * Expected source layout:
+ *
+ *   stickers/
+ *     coding/
+ *       coding.json   — Lottie animation (drives Sticker{Name}Animated)
+ *       coding.svg    — static pose (drives Sticker{Name})
+ *     vacation/
+ *       vacation.json
+ *       vacation.svg
+ *     …
+ *
+ *
+ * Collision detection — when `--internal` is NOT passed (i.e. consumer
+ * run), the generator warns if a generated name collides with one of
+ * anta's built-in stickers. Anta's own build passes `--internal`.
+ *
+ *   node scripts/generate-stickers.mjs --input ./stickers --output ./src/components/__generated__/stickers
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+// Anta's built-in sticker names. Consumers who generate a same-named
+// sticker get a warning; their generated module will resolve to the same
+// import path and shadow ours. Keep this list in sync with the canonical
+// names under ./stickers/<name>/.
+const DEFAULT_BUILT_IN = [
+  "angry",
+  "ask",
+  "balance",
+  "butterfly",
+  "butterfly-snake",
+  "catch",
+  "clap",
+  "coding",
+  "cowboy",
+  "dance",
+  "detective",
+  "disapprove",
+  "distracted",
+  "dive",
+  "eat",
+  "facepalm",
+  "failed",
+  "found",
+  "grow",
+  "handstand",
+  "heart",
+  "hello",
+  "idea",
+  "laugh",
+  "love",
+  "nap",
+  "party",
+  "passed",
+  "peekaboo",
+  "pizza",
+  "puzzle",
+  "sad",
+  "scared",
+  "scroll",
+  "search",
+  "shield",
+  "shocked",
+  "sleep",
+  "stressed",
+  "suspicious",
+  "thanks",
+  "think",
+  "think-of-you",
+  "thumbs-up",
+  "vacation",
+  "wait",
+  "wink",
+  "work",
+  "zen",
+];
+
+function pascalCase(name) {
+  return name
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+}
+
+function componentName(base) {
+  return `Sticker${pascalCase(base)}`;
+}
+
+export async function generate({ input, output, internal = false } = {}) {
+  if (!input) throw new Error("generate-stickers: --input is required");
+  if (!output) throw new Error("generate-stickers: --output is required");
+
+  const inDir = path.resolve(input);
+  const outDir = path.resolve(output);
+  if (!fs.existsSync(inDir)) {
+    throw new Error(`generate-stickers: input folder not found: ${inDir}`);
+  }
+  fs.mkdirSync(outDir, { recursive: true });
+
+  // Each immediate subfolder of inDir is one sticker. The folder name is
+  // the canonical sticker name.
+  const subdirs = fs
+    .readdirSync(inDir, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name)
+    .sort();
+
+  if (subdirs.length === 0) {
+    console.warn(`generate-stickers: no sticker subfolders in ${inDir}`);
+  }
+
+  // Clear out previous generated files so renamed/removed stickers don't
+  // leave stale modules behind. Keep index.ts (about to be rewritten) and
+  // the per-sticker static + animated file names we're about to write.
+  // Naming convention: `<name>.ts` is the static (default) sticker;
+  // `<name>-animated.ts` is the Lottie-backed animated variant.
+  const keep = new Set([
+    "index.ts",
+    ...subdirs.flatMap((n) => [`${n}.ts`, `${n}-animated.ts`]),
+  ]);
+  for (const existing of fs.readdirSync(outDir)) {
+    if (!keep.has(existing) && /\.ts$/.test(existing)) {
+      fs.unlinkSync(path.join(outDir, existing));
+    }
+  }
+
+  const exports = [];
+  const skipped = [];
+  const builtInSet = internal ? new Set() : new Set(DEFAULT_BUILT_IN);
+  const collisions = [];
+
+  for (const name of subdirs) {
+    const subdir = path.join(inDir, name);
+    const lottiePath = path.join(subdir, `${name}.json`);
+    const svgPath = path.join(subdir, `${name}.svg`);
+    const hasLottie = fs.existsSync(lottiePath);
+    const hasSvg = fs.existsSync(svgPath) && fs.statSync(svgPath).size > 0;
+    if (!hasLottie && !hasSvg) {
+      skipped.push(`${name} (no ${name}.json or ${name}.svg)`);
+      continue;
+    }
+    if (builtInSet.has(name)) collisions.push(name);
+    const cname = componentName(name);
+    const animatedName = `${cname}Animated`;
+
+    // Static module — the default. Emitted whenever a non-empty SVG
+    // exists. Imports the `Sticker` runtime wrapper from the package
+    // root `@antadesign/anta` (same root specifier the icon codegen
+    // uses — no bespoke runtime subpath). Lives at `<name>.ts` so the
+    // import path matches the bare sticker name.
+    //
+    // Two exports: the JSX `Sticker{Name}` component (React/Preact),
+    // and the raw `svg` string (vanilla JS / non-JSX consumers, who
+    // assign it to an `<a-sticker>` element's `svg` attribute).
+    // Bundlers tree-shake the unused one.
+    if (hasSvg) {
+      const svg = fs.readFileSync(svgPath, "utf8");
+      const lines = [
+        "/* Auto-generated by @antadesign/anta. Do not edit by hand. */",
+        "",
+        "import { Sticker, type StickerProps } from '@antadesign/anta'",
+        "",
+        `export const svg = ${JSON.stringify(svg)}`,
+        "",
+        `export const ${cname} = (props: StickerProps) => Sticker({ ...props, svg })`,
+        "",
+      ];
+      fs.writeFileSync(path.join(outDir, `${name}.ts`), lines.join("\n"));
+    }
+
+    // Animated module — emitted whenever a Lottie JSON exists. Each
+    // module lives in `<name>-animated.ts` so importing only the static
+    // sticker (`<name>.ts`) never drags the Lottie payload. Bundlers
+    // tree-shake per-file when the barrel uses `export { … } from
+    // './foo'`. Imports the `StickerAnimated` runtime wrapper from the
+    // package root `@antadesign/anta`.
+    //
+    // The animation is exported as a JSON *string* (not the parsed
+    // object). `<a-sticker-animated>` receives it via its `animation`
+    // attribute and parses it once on set. Two exports: the JSX
+    // `Sticker{Name}Animated` component, and the raw `animationJson`
+    // string (vanilla JS / non-JSX consumers who call
+    // `el.setAttribute('animation', animationJson)`).
+    if (hasLottie) {
+      const lottieJson = fs.readFileSync(lottiePath, "utf8");
+      const lines = [
+        "/* Auto-generated by @antadesign/anta. Do not edit by hand. */",
+        "",
+        "import { StickerAnimated, type StickerAnimatedProps } from '@antadesign/anta'",
+        "",
+        `export const animationJson = ${JSON.stringify(lottieJson)}`,
+        "",
+        `export const ${animatedName} = (props: StickerAnimatedProps) => StickerAnimated({ ...props, animation: animationJson })`,
+        "",
+      ];
+      fs.writeFileSync(
+        path.join(outDir, `${name}-animated.ts`),
+        lines.join("\n"),
+      );
+    }
+
+    exports.push({
+      base: name,
+      componentName: cname,
+      hasLottie,
+      hasSvg,
+      animatedName,
+    });
+  }
+
+  // Barrel — alphabetical for stable diffs, side-effect free so unused
+  // stickers tree-shake. Each export references the correct per-mode
+  // file so importing only the static variant doesn't pull the animated
+  // module (and vice versa).
+  const reExports = [];
+  for (const {
+    base,
+    componentName,
+    hasLottie,
+    hasSvg,
+    animatedName,
+  } of exports) {
+    if (hasSvg) reExports.push(`export { ${componentName} } from './${base}'`);
+    if (hasLottie)
+      reExports.push(`export { ${animatedName} } from './${base}-animated'`);
+  }
+  const indexLines = [
+    "/* Auto-generated by @antadesign/anta. Do not edit by hand. */",
+    "",
+    "export type { StickerProps, StickerAnimatedProps } from '@antadesign/anta'",
+    "",
+    ...reExports,
+    "",
+  ];
+  fs.writeFileSync(path.join(outDir, "index.ts"), indexLines.join("\n"));
+
+  if (collisions.length > 0) {
+    console.warn(
+      `generate-stickers: ${collisions.length} sticker name(s) collide with Anta's built-in stickers: ` +
+        `${collisions.join(", ")}. ` +
+        `Consumers importing from \`@antadesign/anta/stickers\` get Anta's; your generated barrel exposes yours under its own import path.`,
+    );
+  }
+
+  console.log(
+    `generate-stickers: wrote ${exports.length} sticker${exports.length === 1 ? "" : "s"} to ${outDir}`,
+  );
+  if (skipped.length) {
+    console.warn(
+      `generate-stickers: skipped ${skipped.length} (${skipped.join(", ")})`,
+    );
+  }
+  return { stickers: exports };
+}
+
+function parseArgs(argv) {
+  const out = {};
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg.startsWith("--")) {
+      const key = arg.slice(2);
+      const next = argv[i + 1];
+      if (next && !next.startsWith("--")) {
+        out[key] = next;
+        i++;
+      } else {
+        out[key] = true;
+      }
+    }
+  }
+  return out;
+}
+
+const isMain = process.argv[1]?.endsWith("generate-stickers.mjs");
+if (isMain) {
+  const args = parseArgs(process.argv.slice(2));
+  generate({
+    input: args.input,
+    output: args.output,
+    internal: args.internal === true,
+  }).catch((e) => {
+    console.error(e.message);
+    process.exit(1);
+  });
+}

package/dist/index.d.ts

@@ -20,9 +20,17 @@ 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 { Button } from './components/Button';
+export type { ButtonProps, BaseButtonProps, ContentMode, SubmitMode, PriorityMode, } from './components/Button';
 export { ICON_SHAPES, ICON_SYNONYMS } from './elements/a-icon.shapes';
+export { Sticker } from './components/Sticker';
+export type { StickerProps } from './components/Sticker';
+export { StickerAnimated } from './components/StickerAnimated';
+export type { StickerAnimatedProps } from './components/StickerAnimated';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 /**

package/dist/index.js

@@ -1,13 +1,21 @@
 import { Progress } from "./components/Progress";
 import { Text } from "./components/Text";
+import { Title } from "./components/Title";
 import { Icon } from "./components/Icon";
+import { Button } from "./components/Button";
 import { ICON_SHAPES, ICON_SYNONYMS } from "./elements/a-icon.shapes";
+import { Sticker } from "./components/Sticker";
+import { StickerAnimated } from "./components/StickerAnimated";
 import { configure } from "./jsx-runtime";
 export {
+  Button,
   ICON_SHAPES,
   ICON_SYNONYMS,
   Icon,
   Progress,
+  Sticker,
+  StickerAnimated,
   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, AButtonAttributes, AStickerAttributes, AStickerAnimatedAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     type IntrinsicElements = React.JSX.IntrinsicElements & {
         'a-progress': AProgressAttributes;
@@ -31,6 +31,11 @@ export declare namespace JSX {
         'a-progress-text': BaseAttributes;
         'a-progress-hint': BaseAttributes;
         'a-text': ATextAttributes;
+        'a-title': ATitleAttributes;
         'a-icon': AIconAttributes;
+        'a-button': AButtonAttributes;
+        'a-button-label': BaseAttributes;
+        'a-sticker': AStickerAttributes;
+        'a-sticker-animated': AStickerAnimatedAttributes;
     };
 }

package/dist/reset.css

@@ -52,14 +52,32 @@
 
   /* ───── 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;
   }
 
+  /* Keep inline `<code>` from inflating the line box of the prose it
+     sits in — `1em` pins its line height to its own font size. */
+  code {
+    line-height: 1em;
+  }
+
   /* Prose lists (ul, ol) get a tight 3ch left padding so markers
      hug the text, and items get a small bottom margin so
      consecutive ones breathe. Markers are toned all the way down
@@ -96,20 +114,87 @@
     color: var(--link-color);
     text-decoration: underline;
     text-decoration-style: solid;
-    text-decoration-color: color-mix(in oklch, currentColor 75%, transparent);
+    text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
     text-decoration-thickness: 0.5px;
     text-underline-offset: 3px;
   }
-  a:hover {
-    color: var(--link-color-hover);
-    /* Underline color set to the hover token directly (rather than
-       `currentColor`) so it repaints in lockstep with `color` — a
-       few browsers latch onto the old currentColor value
-       otherwise. */
-    text-decoration-color: var(--link-color-hover);
-    text-decoration-thickness: 1px;
+  /* Hover only on real-pointer devices — gating avoids the sticky hover
+     color that lingers after a tap on touch screens. */
+  @media (hover: hover) and (pointer: fine) {
+    a:hover {
+      color: var(--link-color-hover);
+      /* Underline color is left as the resting hairline (the base rule's
+         `currentColor` mix) — only the thickness grows on hover. */
+      text-decoration-thickness: 1px;
+    }
   }
   a:active {
-    text-decoration-color: color-mix(in oklch, currentColor 75%, transparent);
+    text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
+  }
+
+  /* Text selection — brand color at 15% alpha. */
+  ::selection {
+    background: color-mix(in srgb, var(--text-1-brand), transparent 85%);
+  }
+
+  /* ───── 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;
   }
 }