@eduardoalvarez/arrecife 0.12.2 → 0.12.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.12.3](https://github.com/Proskynete/arrecife/compare/v0.12.2...v0.12.3) (2026-09-24)
+
+
+### 🐛 Correcciones
+
+* **components:** align ten components and the stories with the Design System canvas ([#85](https://github.com/Proskynete/arrecife/issues/85)) ([52f141d](https://github.com/Proskynete/arrecife/commit/52f141dcdc8739f6735f0b5082e7f2a19b54d383))
+* **tokens:** the tagline follows the new positioning, so the header stops saying the old one ([#82](https://github.com/Proskynete/arrecife/issues/82)) ([01abbbf](https://github.com/Proskynete/arrecife/commit/01abbbf5f31fd0690137c5c169432bd8c34b7689))
+
+
+### 📚 Documentación
+
+* re-sync the design system transcription and record where production diverged, §§ 69–75 ([#84](https://github.com/Proskynete/arrecife/issues/84)) ([64dddcf](https://github.com/Proskynete/arrecife/commit/64dddcf32490a65f0185cafffe3467d4fcf9f55d))
+
 ## [0.12.2](https://github.com/Proskynete/arrecife/compare/v0.12.1...v0.12.2) (2026-09-23)
 
 

package/README.md

@@ -355,7 +355,7 @@ import { Text, Button, Badge, cn } from '@eduardoalvarez/arrecife';
 import type { TextProps } from '@eduardoalvarez/arrecife';
 
 <Text variant="eyebrow" tone="muted">charlas</Text>
-<Text as="h2" variant="h1">Escalar con criterio</Text>
+<Text as="h2" variant="h1">Entender antes de construir</Text>
 <Text variant="body">Clamps itself to 68ch.</Text>
 <Text variant="ui" measure={false}>No clamp, for a narrow cell.</Text>
 ```

package/dist/brand/index.cjs

@@ -134,8 +134,8 @@ var spacing = {
   section: 96
 };
 var tagline = {
-  /** Header, one line. */
-  short: "Ayudo a equipos a escalar con criterio"};
+  /** Header, one line. Role and method, as in § 65. */
+  short: "Technical Lead \xB7 Spec-Driven Development"};
 var naming = {
   wordmark: "Eduardo \xC1lvarez"};
 

package/dist/brand/index.js

@@ -1,5 +1,5 @@
 'use client';
-export { Isotype, Logo, Mascot, MascotFace } from '../chunk-BRDTB44R.js';
-import '../chunk-TMUGT3Y3.js';
+export { Isotype, Logo, Mascot, MascotFace } from '../chunk-LS3PUZ6L.js';
+import '../chunk-RMA2KF5B.js';
 export { ASSETS_PATH, faceList, faceUsage, faces, fins, poseList, poses } from '../chunk-CKRSQPTX.js';
-import '../chunk-5YWGOFDX.js';
+import '../chunk-QQ5WRFHC.js';

package/dist/chart/index.js

@@ -1,8 +1,8 @@
 'use client';
-import { Text } from '../chunk-BFYNBIVJ.js';
+import { Text } from '../chunk-TJRXYXMG.js';
 import '../chunk-ODBFN44D.js';
-import { cn } from '../chunk-TMUGT3Y3.js';
-import { radius } from '../chunk-5YWGOFDX.js';
+import { cn } from '../chunk-RMA2KF5B.js';
+import { radius } from '../chunk-QQ5WRFHC.js';
 import { useId } from 'react';
 import { ResponsiveContainer, Tooltip, Legend, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Area, BarChart as BarChart$1, Bar, LineChart as LineChart$1, Line } from 'recharts';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-W75O3Z77.js → chunk-3SPOZC5F.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-TMUGT3Y3.js';
+import { cn } from './chunk-RMA2KF5B.js';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-WU66TPJT.js → chunk-DKXTF6N7.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-TMUGT3Y3.js';
+import { cn } from './chunk-RMA2KF5B.js';
 import { jsx } from 'react/jsx-runtime';
 
 var ICON_WEIGHT = "regular";

package/dist/{chunk-6QJQ6K7J.js → chunk-GP4MRY2B.js}

@@ -1,4 +1,4 @@
-import { naming, tagline, motion, shadow, series, syntax, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-5YWGOFDX.js';
+import { naming, tagline, motion, shadow, series, syntax, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-QQ5WRFHC.js';
 
 // src/tokens/index.ts
 var tokens = {

package/dist/{chunk-BRDTB44R.js → chunk-LS3PUZ6L.js}

@@ -1,6 +1,6 @@
-import { cn } from './chunk-TMUGT3Y3.js';
+import { cn } from './chunk-RMA2KF5B.js';
 import { fins, ASSETS_PATH, poses, faces } from './chunk-CKRSQPTX.js';
-import { naming, tagline } from './chunk-5YWGOFDX.js';
+import { naming, tagline } from './chunk-QQ5WRFHC.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function Isotype({

package/dist/{chunk-5YWGOFDX.js → chunk-QQ5WRFHC.js}

@@ -261,17 +261,22 @@ var series = {
   light: [light.accent, light.warm, brand.body, light.textMuted]
 };
 var deep = "#0D2129";
+var ogDeep = "#0E2A30";
 var gradient = {
   dark: {
     hero: `linear-gradient(160deg, ${dark.background} 60%, ${deep} 100%)`,
     section: `linear-gradient(150deg, ${dark.surface} 0%, ${deep} 100%)`,
-    /** The one used by the article OG template. 145°, from the document. */
-    og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
+    /** The article OG template. 145°, from the document. */
+    og: `linear-gradient(145deg, ${dark.background} 58%, ${ogDeep} 100%)`,
+    /** The talk OG template. 150°, from the document. */
+    ogTalk: `linear-gradient(150deg, ${dark.background} 55%, ${ogDeep} 100%)`
   },
   light: {
     hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surface} 100%)`,
     section: `linear-gradient(150deg, ${light.surface} 0%, ${light.background} 100%)`,
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`,
+    /** No light talk card exists; the key mirrors dark so both modes carry it. */
+    ogTalk: `linear-gradient(150deg, ${light.background} 55%, ${light.surface} 100%)`
   }
 };
 var shadow = {
@@ -283,12 +288,12 @@ var motion = {
   properties: "color, background-color, border-color, fill, stroke"
 };
 var tagline = {
-  /** Hero. */
-  long: "Ayudo a equipos de ingenier\xEDa a escalar con criterio",
-  /** Header, one line. */
-  short: "Ayudo a equipos a escalar con criterio",
-  /** LinkedIn. */
-  en: "Helping engineering teams scale with judgment"
+  /** Hero. The bajada approved in § 65. */
+  long: "Ense\xF1o a construir software con IA sin dejar de entender lo que hacemos.",
+  /** Header, one line. Role and method, as in § 65. */
+  short: "Technical Lead \xB7 Spec-Driven Development",
+  /** English surfaces. */
+  en: "I teach how to build software with AI without losing sight of what we build."
 };
 var naming = {
   wordmark: "Eduardo \xC1lvarez",

package/dist/{chunk-TMUGT3Y3.js → chunk-RMA2KF5B.js}

@@ -1,4 +1,4 @@
-import { spacing, control, radius, typeScale } from './chunk-5YWGOFDX.js';
+import { spacing, control, radius, typeScale } from './chunk-QQ5WRFHC.js';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 

package/dist/{chunk-BFYNBIVJ.js → chunk-TJRXYXMG.js}

@@ -1,5 +1,5 @@
 import { text } from './chunk-ODBFN44D.js';
-import { cn } from './chunk-TMUGT3Y3.js';
+import { cn } from './chunk-RMA2KF5B.js';
 import { Slot } from '@radix-ui/react-slot';
 import 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';

package/dist/form/index.js

@@ -1,9 +1,9 @@
 'use client';
-import { Label } from '../chunk-W75O3Z77.js';
-import { Text } from '../chunk-BFYNBIVJ.js';
+import { Label } from '../chunk-3SPOZC5F.js';
+import { Text } from '../chunk-TJRXYXMG.js';
 import '../chunk-ODBFN44D.js';
-import { cn } from '../chunk-TMUGT3Y3.js';
-import '../chunk-5YWGOFDX.js';
+import { cn } from '../chunk-RMA2KF5B.js';
+import '../chunk-QQ5WRFHC.js';
 import { createContext, useContext, useId } from 'react';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
 import { Slot } from '@radix-ui/react-slot';

package/dist/icons/index.js

@@ -1,3 +1,3 @@
-export { ICON_WEIGHT, Icon, TONE_WEIGHT } from '../chunk-WU66TPJT.js';
-import '../chunk-TMUGT3Y3.js';
-import '../chunk-5YWGOFDX.js';
+export { ICON_WEIGHT, Icon, TONE_WEIGHT } from '../chunk-DKXTF6N7.js';
+import '../chunk-RMA2KF5B.js';
+import '../chunk-QQ5WRFHC.js';

package/dist/index.cjs

@@ -326,17 +326,22 @@ var series = {
   light: [light.accent, light.warm, brand.body, light.textMuted]
 };
 var deep = "#0D2129";
+var ogDeep = "#0E2A30";
 var gradient = {
   dark: {
     hero: `linear-gradient(160deg, ${dark.background} 60%, ${deep} 100%)`,
     section: `linear-gradient(150deg, ${dark.surface} 0%, ${deep} 100%)`,
-    /** The one used by the article OG template. 145°, from the document. */
-    og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
+    /** The article OG template. 145°, from the document. */
+    og: `linear-gradient(145deg, ${dark.background} 58%, ${ogDeep} 100%)`,
+    /** The talk OG template. 150°, from the document. */
+    ogTalk: `linear-gradient(150deg, ${dark.background} 55%, ${ogDeep} 100%)`
   },
   light: {
     hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surface} 100%)`,
     section: `linear-gradient(150deg, ${light.surface} 0%, ${light.background} 100%)`,
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`,
+    /** No light talk card exists; the key mirrors dark so both modes carry it. */
+    ogTalk: `linear-gradient(150deg, ${light.background} 55%, ${light.surface} 100%)`
   }
 };
 var shadow = {
@@ -348,12 +353,12 @@ var motion = {
   properties: "color, background-color, border-color, fill, stroke"
 };
 var tagline = {
-  /** Hero. */
-  long: "Ayudo a equipos de ingenier\xEDa a escalar con criterio",
-  /** Header, one line. */
-  short: "Ayudo a equipos a escalar con criterio",
-  /** LinkedIn. */
-  en: "Helping engineering teams scale with judgment"
+  /** Hero. The bajada approved in § 65. */
+  long: "Ense\xF1o a construir software con IA sin dejar de entender lo que hacemos.",
+  /** Header, one line. Role and method, as in § 65. */
+  short: "Technical Lead \xB7 Spec-Driven Development",
+  /** English surfaces. */
+  en: "I teach how to build software with AI without losing sight of what we build."
 };
 var naming = {
   wordmark: "Eduardo \xC1lvarez",
@@ -1225,7 +1230,7 @@ function DateField({
         "hover:border-hairline-hover",
         "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
-        "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
+        "aria-[invalid=true]:border-error aria-[invalid=true]:focus-visible:outline-error",
         // The native indicator inherits the active theme's scheme.
         "scheme-light dark:scheme-dark [&::-webkit-calendar-picker-indicator]:cursor-pointer",
         className
@@ -1428,7 +1433,7 @@ function Input({ className, invalid = false, ...props }) {
         "hover:border-hairline-hover",
         "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
-        "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
+        "aria-[invalid=true]:border-error aria-[invalid=true]:focus-visible:outline-error",
         "file:mr-step-sm file:border-0 file:bg-transparent file:font-sans file:text-label file:text-text-secondary",
         className
       ),
@@ -1478,12 +1483,11 @@ function PaginationLink({ className, isActive = false, ...props }) {
     {
       "aria-current": isActive ? "page" : void 0,
       className: cn(
-        "rounded-chip px-step-sm inline-flex h-9 min-w-9 cursor-pointer items-center justify-center",
-        "font-sans text-ui text-text-secondary",
+        "rounded-chip px-step-sm inline-flex h-9 min-w-9 cursor-pointer items-center justify-center border",
+        "font-mono text-meta",
         "transition-standard",
-        "hover:bg-surface hover:text-text-primary",
         "focus-ring",
-        isActive && "bg-surface-raised text-text-primary",
+        isActive ? "border-accent bg-accent text-accent-on" : "border-border text-text-secondary hover:border-hairline-hover hover:text-text-primary",
         className
       ),
       ...props
@@ -1595,6 +1599,8 @@ function SelectTrigger({
         "transition-standard",
         "hover:border-hairline-hover",
         "focus-visible:border-accent focus-ring",
+        // `FormControl` marks an invalid field with `aria-invalid` only.
+        "aria-[invalid=true]:border-error aria-[invalid=true]:focus-visible:outline-error",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[placeholder]:text-text-muted",
         className
@@ -1978,7 +1984,7 @@ function Textarea({ className, invalid = false, ...props }) {
         "hover:border-hairline-hover",
         "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
-        "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
+        "aria-[invalid=true]:border-error aria-[invalid=true]:focus-visible:outline-error",
         className
       ),
       ...props
@@ -2152,9 +2158,9 @@ function TooltipContent({
     {
       sideOffset,
       className: cn(
-        "z-50 px-step-sm py-1.5",
-        "rounded-chip border-border bg-surface-raised shadow-standard border",
-        "font-sans text-label text-text-primary",
+        "z-50 px-step-sm py-step-xs",
+        "rounded-chip bg-text-primary shadow-standard",
+        "font-sans text-label text-background",
         className
       ),
       ...props
@@ -2258,7 +2264,9 @@ function ProgressBar({
   height,
   knob,
   progress,
-  redondeada = true,
+  valueText,
+  onKeyDown,
+  rounded = true,
   tabIndex = 0,
   ...pointer
 }) {
@@ -2267,28 +2275,31 @@ function ProgressBar({
     {
       className: cn(
         "group bg-surface-raised relative cursor-pointer",
+        "focus-ring",
         height,
-        redondeada && "rounded-pill"
+        rounded && "rounded-pill"
       ),
       role: "slider",
       "aria-label": "Progreso del audio",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(progress),
+      "aria-valuetext": valueText,
       tabIndex,
+      onKeyDown,
       ...pointer,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn("bg-accent absolute h-full", redondeada && "rounded-pill"),
+            className: cn("bg-accent absolute h-full", rounded && "rounded-pill"),
             style: { width: `${progress}%` }
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "rounded-pill bg-text-primary absolute top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100",
+            className: "rounded-pill bg-text-primary absolute top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100",
             style: {
               width: knob,
               height: knob,
@@ -2374,6 +2385,7 @@ function Volume({
         className: cn(
           "bg-surface-raised rounded-pill h-1 cursor-pointer appearance-none",
           "[accent-color:var(--color-accent)]",
+          "focus-ring",
           width
         ),
         "aria-label": "Volumen"
@@ -2385,7 +2397,7 @@ function PlayIcon({ className, loading, error, playing }) {
   if (loading)
     return /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.CircleNotch, className: cn("motion-safe:animate-spin", className) });
   if (error) return /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.ArrowsClockwise, className });
-  if (playing) return /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Pause, className });
+  if (playing) return /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Pause, tone: "current", className });
   return /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Play, className });
 }
 function PlayButton({
@@ -2404,7 +2416,8 @@ function PlayButton({
       className: cn(
         "text-accent-on transition-standard cursor-pointer",
         "focus-ring",
-        state.error ? "bg-error hover:bg-error/80" : "bg-accent hover:bg-accent-hover",
+        // `danger` is the fill and `error` is text: the retry button is a fill.
+        state.error ? "bg-danger text-danger-on hover:bg-danger-hover" : "bg-accent hover:bg-accent-hover",
         className
       ),
       "aria-label": label,
@@ -2536,6 +2549,29 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     e.currentTarget.releasePointerCapture(e.pointerId);
     isDragging.current = false;
   }, []);
+  const handleProgressKey = react$1.useCallback(
+    (e) => {
+      const audio = audioRef.current;
+      if (!audio || !duration) return;
+      const steps = {
+        ArrowLeft: -5,
+        ArrowDown: -5,
+        ArrowRight: 5,
+        ArrowUp: 5,
+        PageDown: -15,
+        PageUp: 15
+      };
+      let next;
+      if (e.key === "Home") next = 0;
+      else if (e.key === "End") next = duration;
+      else if (e.key in steps) next = audio.currentTime + (steps[e.key] ?? 0);
+      if (next === void 0) return;
+      e.preventDefault();
+      audio.currentTime = Math.max(0, Math.min(next, duration));
+      setCurrentTime(audio.currentTime);
+    },
+    [duration]
+  );
   const handleVolumeChange = react$1.useCallback((e) => {
     const audio = audioRef.current;
     if (!audio) return;
@@ -2576,7 +2612,9 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
   const pointer = {
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,
-    onPointerUp: handlePointerUp
+    onPointerUp: handlePointerUp,
+    onKeyDown: handleProgressKey,
+    valueText: `${formatTime(currentTime)} de ${formatTime(duration)}`
   };
   const floatingJsx = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2594,7 +2632,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             height: "h-1",
             knob: 10,
             progress,
-            redondeada: false,
+            rounded: false,
             tabIndex: -1,
             ...pointer
           }
@@ -2780,10 +2818,10 @@ function Blockquote({ children, author, source, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "blockquote",
     {
-      className: cn("border-accent pl-step-md my-step-lg border-l-2", className),
+      className: cn("border-warm pl-step-md my-step-lg border-l-3", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", className: "italic", children }),
         author || source ? /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "mt-step-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "muted", as: "span", children: [
           author ? /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "not-italic", children: author }) : null,
           author && source ? " \xB7 " : null,
@@ -2804,7 +2842,13 @@ function Breadcrumb({
 }) {
   const link = (href, content) => linkAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: LINK, children: linkAsChild({ href, children: content }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: LINK, children: content });
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "gap-step-xs flex flex-wrap items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("li", { children: link(homeHref, /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": homeLabel, children: "~" })) }),
+    /* @__PURE__ */ jsxRuntime.jsx("li", { children: link(
+      homeHref,
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "~" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: homeLabel })
+      ] })
+    ) }),
     items.map((item2, i) => {
       const last = i === items.length - 1;
       return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "gap-step-xs flex items-center", children: [
@@ -3163,7 +3207,7 @@ function EventCalendar({
                     size: "sm",
                     onClick: () => edit(event),
                     "aria-label": `Editar \xAB${event.title}\xBB`,
-                    children: "./edit"
+                    children: "./editar"
                   }
                 ) : null,
                 onDeleteEvent ? /* @__PURE__ */ jsxRuntime.jsxs(AlertDialog, { children: [
@@ -3185,7 +3229,7 @@ function EventCalendar({
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { children: "Mejor no" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { onClick: () => onDeleteEvent(event.id), children: "Borrar el event" })
+                      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { onClick: () => onDeleteEvent(event.id), children: "Borrar el evento" })
                     ] })
                   ] })
                 ] }) : null
@@ -3611,13 +3655,13 @@ function NewsletterForm({
   description,
   state = "idle",
   onSubmitEmail,
-  successMessage = "Ya est\xE1s dentro. Te llega un correo cada dos semanas, y nada m\xE1s.",
+  successMessage = "Ya est\xE1s dentro. Te llega un correo al mes, y nada m\xE1s.",
   errorMessage = "No se pudo suscribir ese correo. Rev\xEDsalo y vuelve a intentar.",
   disclaimer,
   expression,
   basePath,
   submitLabel = "Suscribirme",
-  placeholder = "tu@email.dev",
+  placeholder = "tu@correo.dev",
   fieldLabel = "Correo electr\xF3nico",
   nameField = false,
   nameLabel = "Nombre",
@@ -3652,7 +3696,7 @@ function NewsletterForm({
       type: "submit",
       variant: "conversion",
       loading: sending,
-      className: cn("disabled:opacity-60", nameField && "sm:self-start"),
+      className: cn("w-full disabled:opacity-60 sm:w-auto", nameField && "sm:self-start"),
       children: submitLabel
     }
   );
@@ -3723,7 +3767,7 @@ function NewsletterForm({
           state === "success" ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-notice`, variant: "success", emphasis: "strong", children: successMessage }) : null,
           error ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-notice`, variant: "error", emphasis: "strong", children: errorMessage }) : null,
           disclaimer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
-            expression ? /* @__PURE__ */ jsxRuntime.jsx(MascotFace, { expression, basePath, className: "w-10 max-w-none" }) : null,
+            expression && !aside ? /* @__PURE__ */ jsxRuntime.jsx(MascotFace, { expression, basePath, className: "w-10 max-w-none" }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "font-normal", children: disclaimer })
           ] }) : null
         ] }),
@@ -3833,6 +3877,7 @@ function Stat({
   label,
   tone = "neutral",
   progress,
+  progressLabel,
   icon,
   description,
   delta,
@@ -3840,6 +3885,7 @@ function Stat({
   className,
   ...props
 }) {
+  const barName = progressLabel ?? (typeof label === "string" ? label : "Progreso");
   const DeltaGlyph = delta ? DELTA[delta.direction].glyph : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(CARD_SURFACE, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
@@ -3876,7 +3922,7 @@ function Stat({
       {
         value: progress,
         tone: tone === "neutral" ? "accent" : "warm",
-        label: `${label}: ${progress}%`,
+        label: `${barName}: ${progress}%`,
         className: "mt-step-sm"
       }
     ) : null,

package/dist/index.d.cts

@@ -350,6 +350,11 @@ declare function PaginationItem(props: ComponentPropsWithoutRef<'li'>): react.JS
 type PaginationLinkProps = ComponentPropsWithoutRef<'a'> & {
     isActive?: boolean;
 };
+/**
+ * Mono, bordered, and the current page in solid biolume, as the document draws
+ * it: «paginación mono, página actual en bioluz sólido». The page is where you
+ * are, so it is the one control that carries the accent fill.
+ */
 declare function PaginationLink({ className, isActive, ...props }: PaginationLinkProps): react.JSX.Element;
 declare function PaginationPrevious({ className, ...props }: PaginationLinkProps): react.JSX.Element;
 declare function PaginationNext({ className, ...props }: PaginationLinkProps): react.JSX.Element;
@@ -651,6 +656,13 @@ declare function Toaster({ duration, label }: ToasterProps): react.JSX.Element;
 declare const TooltipProvider: react.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * Inverted on purpose: the document draws it «espuma sobre oscuro, texto casco
+ * 13px/500 — se invierte a propósito para que destaque». `bg-text-primary` with
+ * `text-background` is that inversion in both modes: foam on the abyss page in
+ * dark, ink on paper in light. It is the one layer that does not sit on a
+ * surface token, which is exactly what makes it read as a layer.
+ */
 declare function TooltipContent({ className, sideOffset, ...props }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>): react.JSX.Element;
 
 /** Allowed tags. The list is short on purpose: this is not a styled `div`. */
@@ -812,15 +824,16 @@ type BlockquoteProps = Omit<ComponentPropsWithoutRef<'blockquote'>, 'cite'> & {
     source?: ReactNode;
 };
 /**
- * The side bar is `accent`, the interactive color, because a quotation is
- * somebody else's voice entering the text. It carries no decorative quote marks:
- * the system's glyphs are SVG, and an ornamental quote adds nothing the border
- * and the indent do not already say.
+ * The side bar is `warm`, 3px, and the text is italic, as the document draws it:
+ * «cita con borde arena 3px, cursiva, sin fondo». Sand is the human accent —
+ * quotes, categories, conversion — and biolume is the interactive one; a quote
+ * in biolume read as a link that could not be clicked. It carries no decorative
+ * quote marks: the border and the italic already say it is somebody's voice.
  */
 declare function Blockquote({ children, author, source, className, ...props }: BlockquoteProps): react.JSX.Element;
 
 /**
- * The path as a path: `~ / artículos / cómo-escalar-un-equipo`.
+ * The path as a path: `~ / artículos / el-camino-hacia-mi-primera-charla`.
  *
  * The `~` is neither decoration nor a house icon: it is the filesystem's home,
  * which is why the breadcrumb is mono and not sans. The separators use `border`
@@ -1375,6 +1388,11 @@ type NewsletterFormProps = Omit<ComponentPropsWithoutRef<'section'>, 'title' | '
     errorMessage?: ReactNode;
     /** The small print. It is the «sin spam», which is why it accepts a face. */
     disclaimer?: ReactNode;
+    /**
+     * The face beside the disclaimer. It is dropped when `aside` is set: the
+     * manual allows one mascot per piece («Dos mascotas en la misma pieza.
+     * Compiten entre sí y ninguna gana»), and the aside is the illustration.
+     */
     expression?: Face | undefined;
     basePath?: string | undefined;
     submitLabel?: string;
@@ -1583,6 +1601,12 @@ type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     tone?: 'neutral' | 'alert' | 'achievement';
     /** With `progress`, the metric reads as progress and adds the bar. */
     progress?: number | undefined;
+    /**
+     * The bar's accessible name. It defaults to `label` when `label` is a string;
+     * a `label` that is markup has to spell it here, or the bar would announce
+     * «[object Object]: 38%».
+     */
+    progressLabel?: string | undefined;
     /**
      * Glyph in a tinted circle, in the corner opposite the title. At 1em, and it
      * inherits `currentColor` from the badge, so it takes the tone without being
@@ -1618,7 +1642,7 @@ type StatDelta = {
      */
     direction: 'up' | 'down' | 'flat';
 };
-declare function Stat({ value, label, tone, progress, icon, description, delta, spark, className, ...props }: StatProps): react.JSX.Element;
+declare function Stat({ value, label, tone, progress, progressLabel, icon, description, delta, spark, className, ...props }: StatProps): react.JSX.Element;
 
 type TalkContent = {
     title: ReactNode;