@eduardoalvarez/arrecife 0.6.0 → 0.7.0

package/dist/og/index.cjs

@@ -39,7 +39,8 @@ var dark = {
   warm: "#F2A65A"};
 var light = {
   background: "#F6F2EA",
-  surfaceRaised: "#EFE9DE",
+  //          paper
+  surface: "#FFFFFF",
   //       hairline on card hover
   textPrimary: "#0B1524",
   //                           16.40:1
@@ -64,7 +65,7 @@ var gradient = {
     og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
   },
   light: {
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surfaceRaised} 100%)`
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
   }
 };
 var tagline = {

package/dist/og/index.js

@@ -1,5 +1,5 @@
 import { ASSETS_PATH, faces, poses, fins } from '../chunk-CKRSQPTX.js';
-import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-O4TAH7YJ.js';
+import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-OMKSESQB.js';
 import '../chunk-MLKGABMK.js';
 
 // src/og/templates.ts

package/dist/shiki/index.js

@@ -1,4 +1,4 @@
-import { syntax } from '../chunk-O4TAH7YJ.js';
+import { syntax } from '../chunk-OMKSESQB.js';
 import '../chunk-MLKGABMK.js';
 
 // src/shiki/theme.ts

package/dist/social/index.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/social/index.tsx
+function Brand({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "1em",
+      height: "1em",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children
+    }
+  );
+}
+function Functional({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "1em",
+      height: "1em",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.6,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children
+    }
+  );
+}
+var GitHub = (props) => /* @__PURE__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.91c.58.1.79-.25.79-.55 0-.27-.01-1.18-.02-2.14-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.8 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14 0 1.55-.01 2.79-.01 3.17 0 .3.2.66.79.55A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z" }) });
+var LinkedIn = (props) => /* @__PURE__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.71h.05a4.17 4.17 0 0 1 3.75-2.06c4.01 0 4.75 2.64 4.75 6.07V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21h-3.97V9Z" }) });
+var X = (props) => /* @__PURE__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.53 3h3.06l-6.69 7.64L21.75 21h-6.16l-4.83-6.3L5.25 21H2.19l7.15-8.17L2.5 3h6.32l4.36 5.77L17.53 3Zm-1.07 16.17h1.7L7.62 4.74H5.8l10.66 14.43Z" }) });
+var Instagram = (props) => /* @__PURE__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 3.68a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32Zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm7.85-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0Z" }) });
+var Discord = (props) => /* @__PURE__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.32 5.56A18.5 18.5 0 0 0 15.7 4.1a.07.07 0 0 0-.07.04c-.2.36-.42.82-.58 1.19a17 17 0 0 0-5.1 0c-.16-.38-.39-.83-.59-1.19a.07.07 0 0 0-.07-.04c-1.6.28-3.15.77-4.62 1.46a.06.06 0 0 0-.03.03C1.66 10 .9 14.28 1.28 18.5a.08.08 0 0 0 .03.05 18.6 18.6 0 0 0 5.6 2.84.07.07 0 0 0 .08-.03c.43-.59.81-1.21 1.14-1.86a.07.07 0 0 0-.04-.1c-.6-.23-1.18-.51-1.74-.83a.07.07 0 0 1-.01-.12l.35-.27a.07.07 0 0 1 .07-.01 13.3 13.3 0 0 0 11.3 0 .07.07 0 0 1 .08.01l.34.27c.04.04.04.1-.01.12-.55.33-1.13.6-1.74.83a.07.07 0 0 0-.04.1c.34.65.72 1.27 1.14 1.86a.07.07 0 0 0 .08.03 18.5 18.5 0 0 0 5.6-2.84.07.07 0 0 0 .04-.05c.45-4.88-.75-9.12-3.18-12.88a.06.06 0 0 0-.03-.03ZM8.4 15.93c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.9 2.25-2.02 2.25Zm7.22 0c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.89 2.25-2.02 2.25Z" }) });
+var YouTube = (props) => /* @__PURE__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23.5 6.9a3 3 0 0 0-2.12-2.12C19.5 4.27 12 4.27 12 4.27s-7.5 0-9.38.51A3 3 0 0 0 .5 6.9 31.3 31.3 0 0 0 0 12a31.3 31.3 0 0 0 .5 5.1 3 3 0 0 0 2.12 2.12c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3 3 0 0 0 2.12-2.12A31.3 31.3 0 0 0 24 12a31.3 31.3 0 0 0-.5-5.1ZM9.6 15.6V8.4l6.24 3.6-6.24 3.6Z" }) });
+var Rss = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Functional, { ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "19", r: "1.6", fill: "currentColor", stroke: "none" })
+] });
+var Email = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Functional, { ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" })
+] });
+var Newsletter = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Functional, { ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8.5a6 6 0 1 0-12 0c0 5-2 6.5-2 6.5h16s-2-1.5-2-6.5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.7 19a2 2 0 0 1-3.4 0" })
+] });
+
+exports.Discord = Discord;
+exports.Email = Email;
+exports.GitHub = GitHub;
+exports.Instagram = Instagram;
+exports.LinkedIn = LinkedIn;
+exports.Newsletter = Newsletter;
+exports.Rss = Rss;
+exports.X = X;
+exports.YouTube = YouTube;

package/dist/social/index.d.cts

@@ -0,0 +1,2 @@
+import 'react';
+export { D as Discord, E as Email, G as GitHub, I as Instagram, L as LinkedIn, N as Newsletter, R as Rss, S as SocialIconProps, X, Y as YouTube } from '../index-DlAO2JZs.cjs';

package/dist/social/index.d.ts

@@ -0,0 +1,2 @@
+import 'react';
+export { D as Discord, E as Email, G as GitHub, I as Instagram, L as LinkedIn, N as Newsletter, R as Rss, S as SocialIconProps, X, Y as YouTube } from '../index-DlAO2JZs.js';

package/dist/social/index.js

@@ -0,0 +1,2 @@
+export { Discord, Email, GitHub, Instagram, LinkedIn, Newsletter, Rss, X, YouTube } from '../chunk-45HVCTB7.js';
+import '../chunk-MLKGABMK.js';

package/dist/tokens/index.cjs

@@ -215,6 +215,30 @@ var spacing = {
 var size = {
   /** Navigation bar height. */
   nav: 64,
+  /**
+   * The bar when it shares the screen with a sidebar.
+   *
+   * It is not «a smaller bar because it looks better». At 64 the header of an
+   * app shell competes with the rail beside it for the same corner, and the two
+   * together eat the top of the content area. 56 is what `cursos` had arrived at
+   * on its own, and it is the same reasoning as `control.iconSm`: the one admin
+   * app of the five is denser than the four reading sites. See
+   * `docs/decisions.md` § 30.
+   */
+  navCompact: 56,
+  /**
+   * The admin sidebar, and the rail it collapses to.
+   *
+   * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+   * has to know BOTH: the layout beside it reserves one of the two, and two
+   * numbers written by hand in two files drift the first time one of them moves.
+   * A sidebar that never collapses is still just a box the layout sizes.
+   *
+   * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+   * a square corner instead of a step.
+   */
+  sidebar: 256,
+  sidebarRail: 56,
   /** Reading column width. */
   content: 760,
   /** Maximum page width. */
@@ -247,9 +271,9 @@ var gradient = {
     og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
   },
   light: {
-    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surfaceRaised} 100%)`,
-    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.surfaceRaised} 100%)`,
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surfaceRaised} 100%)`
+    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%)`
   }
 };
 var shadow = {

package/dist/tokens/index.d.cts

@@ -397,6 +397,30 @@ declare const spacing: {
 declare const size: {
     /** Navigation bar height. */
     readonly nav: 64;
+    /**
+     * The bar when it shares the screen with a sidebar.
+     *
+     * It is not «a smaller bar because it looks better». At 64 the header of an
+     * app shell competes with the rail beside it for the same corner, and the two
+     * together eat the top of the content area. 56 is what `cursos` had arrived at
+     * on its own, and it is the same reasoning as `control.iconSm`: the one admin
+     * app of the five is denser than the four reading sites. See
+     * `docs/decisions.md` § 30.
+     */
+    readonly navCompact: 56;
+    /**
+     * The admin sidebar, and the rail it collapses to.
+     *
+     * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+     * has to know BOTH: the layout beside it reserves one of the two, and two
+     * numbers written by hand in two files drift the first time one of them moves.
+     * A sidebar that never collapses is still just a box the layout sizes.
+     *
+     * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+     * a square corner instead of a step.
+     */
+    readonly sidebar: 256;
+    readonly sidebarRail: 56;
     /** Reading column width. */
     readonly content: 760;
     /** Maximum page width. */
@@ -478,9 +502,9 @@ declare const gradient: {
         readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
     };
     readonly light: {
-        readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
-        readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
-        readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
+        readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
+        readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
+        readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
     };
 };
 /** A single level. There is no elevation scale. */
@@ -711,6 +735,9 @@ declare const tokens: {
     };
     readonly size: {
         readonly nav: 64;
+        readonly navCompact: 56;
+        readonly sidebar: 256;
+        readonly sidebarRail: 56;
         readonly content: 760;
         readonly wide: 1180;
     };
@@ -721,9 +748,9 @@ declare const tokens: {
             readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
         };
         readonly light: {
-            readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
-            readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
-            readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
+            readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
+            readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
+            readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
         };
     };
     readonly syntax: {

package/dist/tokens/index.d.ts

@@ -397,6 +397,30 @@ declare const spacing: {
 declare const size: {
     /** Navigation bar height. */
     readonly nav: 64;
+    /**
+     * The bar when it shares the screen with a sidebar.
+     *
+     * It is not «a smaller bar because it looks better». At 64 the header of an
+     * app shell competes with the rail beside it for the same corner, and the two
+     * together eat the top of the content area. 56 is what `cursos` had arrived at
+     * on its own, and it is the same reasoning as `control.iconSm`: the one admin
+     * app of the five is denser than the four reading sites. See
+     * `docs/decisions.md` § 30.
+     */
+    readonly navCompact: 56;
+    /**
+     * The admin sidebar, and the rail it collapses to.
+     *
+     * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+     * has to know BOTH: the layout beside it reserves one of the two, and two
+     * numbers written by hand in two files drift the first time one of them moves.
+     * A sidebar that never collapses is still just a box the layout sizes.
+     *
+     * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+     * a square corner instead of a step.
+     */
+    readonly sidebar: 256;
+    readonly sidebarRail: 56;
     /** Reading column width. */
     readonly content: 760;
     /** Maximum page width. */
@@ -478,9 +502,9 @@ declare const gradient: {
         readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
     };
     readonly light: {
-        readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
-        readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
-        readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
+        readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
+        readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
+        readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
     };
 };
 /** A single level. There is no elevation scale. */
@@ -711,6 +735,9 @@ declare const tokens: {
     };
     readonly size: {
         readonly nav: 64;
+        readonly navCompact: 56;
+        readonly sidebar: 256;
+        readonly sidebarRail: 56;
         readonly content: 760;
         readonly wide: 1180;
     };
@@ -721,9 +748,9 @@ declare const tokens: {
             readonly og: "linear-gradient(145deg, #091319 55%, #0D2129 100%)";
         };
         readonly light: {
-            readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%)";
-            readonly section: "linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%)";
-            readonly og: "linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%)";
+            readonly hero: "linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%)";
+            readonly section: "linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%)";
+            readonly og: "linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%)";
         };
     };
     readonly syntax: {

package/dist/tokens/index.js

@@ -1,3 +1,3 @@
-export { tokens } from '../chunk-PMN7NR3G.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from '../chunk-O4TAH7YJ.js';
+export { tokens } from '../chunk-TA7TLWW4.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from '../chunk-OMKSESQB.js';
 import '../chunk-MLKGABMK.js';

package/dist/tokens/theme.css

@@ -123,6 +123,9 @@
   --spacing-control-icon-sm: 32px;
 
   --spacing-nav: 64px;
+  --spacing-nav-compact: 56px;
+  --spacing-sidebar: 256px;
+  --spacing-sidebar-rail: 56px;
   --container-content: 760px;
   --container-wide: 1180px;
   --container-measure: 68ch;
@@ -204,9 +207,9 @@
   --color-series-3: #3E7CB1;
   --color-series-4: #626A75;
 
-  --gradient-hero: linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%);
-  --gradient-section: linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%);
-  --gradient-og: linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%);
+  --gradient-hero: linear-gradient(160deg, #F6F2EA 60%, #FFFFFF 100%);
+  --gradient-section: linear-gradient(150deg, #FFFFFF 0%, #F6F2EA 100%);
+  --gradient-og: linear-gradient(145deg, #F6F2EA 55%, #FFFFFF 100%);
 }
 
 /* --- the system's two gradients, as utilities -------------------------------
@@ -335,6 +338,33 @@
   animation: arrecife-slide-out-bottom var(--duration-standard) var(--ease-standard);
 }
 
+/* --- the focus ring ---------------------------------------------------------
+   The document gives it once, on the primary button: «focus ring 2px #35D6C0 +
+   offset 3px». The code had it as three classes copied to twenty-nine call
+   sites in twenty-four files, all of them at offset 2, and three audits in a row
+   said so — the value was never argued down to 2, it was copied from the first
+   component and inherited by the next twenty-eight.
+
+   It is one utility for the reason § 15 gives: a list kept in sync by hand with
+   another list ends up out of sync. Twenty-nine copies is twenty-nine chances to
+   write the next one at offset 2 again, and nothing was checking.
+
+   focus-ring-warm exists for the ONE control the ring cannot be biolume on:
+   the conversion button is the system's only sand fill, and a biolume ring
+   around it puts both of the brand's accents in the same three pixels. It sets
+   only the color, so the width and the offset stay in one place. */
+@utility focus-ring {
+  &:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 3px;
+  }
+}
+@utility focus-ring-warm {
+  &:focus-visible {
+    outline-color: var(--color-warm);
+  }
+}
+
 /* The system's only transition, as a utility. States are communicated with
    border and color, not with movement: this class cannot animate anything else. */
 @utility transition-standard {

package/dist/variants/index.cjs

@@ -8,7 +8,7 @@ var button = classVarianceAuthority.cva(
     "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
     "rounded-control font-sans font-medium",
     "transition-standard",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "focus-ring",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:shrink-0"
   ],
@@ -19,7 +19,10 @@ var button = classVarianceAuthority.cva(
           "bg-accent text-accent-on hover:bg-accent-hover",
           "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
         ],
-        conversion: "bg-warm text-warm-on hover:bg-warm-hover",
+        // The one control whose focus ring is not biolume. It is the system's
+        // only sand fill, and a biolume ring three pixels off a sand button puts
+        // both of the brand's accents in the same glance. See `decisions.md` § 37.
+        conversion: "bg-warm text-warm-on hover:bg-warm-hover focus-ring-warm",
         secondary: [
           "border-hairline-hover border bg-transparent text-text-primary",
           "hover:border-accent hover:text-accent"
@@ -177,7 +180,7 @@ var CARD = [
   "group block cursor-pointer",
   CARD_SURFACE,
   CARD_HOVER,
-  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+  "focus-ring"
 ];
 
 exports.CARD = CARD;

package/dist/variants/index.d.cts

@@ -174,7 +174,10 @@ declare const avatar: (props?: ({
  * hand: that project ships no framework JavaScript and cannot import a
  * component, so until now it copied the class list into its Astro. The copy had
  * already drifted once — the hero gradient sat at `55%` and `#e9eeea` against
- * the token's `60%` and `#EFE9DE`, and nothing compared them.
+ * the token's `60%` and, at the time, `#EFE9DE`. Nothing compared them. The
+ * light gradient's second stop is `#FFFFFF` since § 9 was measured, which is the
+ * same lesson from the other side: a copied value goes stale when the original
+ * moves, and only the original is ever right.
  */
 declare const CARD_SURFACE = "rounded-card border-hairline bg-surface border";
 /** Rule 6's hover: the border only. Applied where the card is clickable. */

package/dist/variants/index.d.ts

@@ -174,7 +174,10 @@ declare const avatar: (props?: ({
  * hand: that project ships no framework JavaScript and cannot import a
  * component, so until now it copied the class list into its Astro. The copy had
  * already drifted once — the hero gradient sat at `55%` and `#e9eeea` against
- * the token's `60%` and `#EFE9DE`, and nothing compared them.
+ * the token's `60%` and, at the time, `#EFE9DE`. Nothing compared them. The
+ * light gradient's second stop is `#FFFFFF` since § 9 was measured, which is the
+ * same lesson from the other side: a copied value goes stale when the original
+ * moves, and only the original is ever right.
  */
 declare const CARD_SURFACE = "rounded-card border-hairline bg-surface border";
 /** Rule 6's hover: the border only. Applied where the card is clickable. */

package/dist/variants/index.js

@@ -1,3 +1,3 @@
-export { CARD, CARD_HOVER, CARD_SURFACE, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, category as categoryBadgeVariants, metric as metricBadgeVariants } from '../chunk-25YNFCIF.js';
+export { CARD, CARD_HOVER, CARD_SURFACE, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, category as categoryBadgeVariants, metric as metricBadgeVariants } from '../chunk-E6KFUSKB.js';
 export { text as textVariants } from '../chunk-ODBFN44D.js';
 import '../chunk-MLKGABMK.js';