@proyecto-viviana/ui 0.4.1 → 0.5.0

package/src/viviana-tokens.css

@@ -1,88 +1,99 @@
 /*
- * Viviana ("Silapse") design tokens.
+ * Viviana UI design tokens — blue + amber frosted glass.
  *
  * The brand's color palette + typography, owned by the design system itself so
  * the product components are self-contained. The S2 style() macro carries the
  * *shape* (spacing, radius, sizing, type ramp) via its named tokens; these vars
- * supply the *colors*, referenced from components as arbitrary `[var(--color-*)]`
- * values. Dark is the default (`:root`); light overrides bind to the same
- * `data-color-scheme` attribute solid-spectrum's theme uses, so a single scheme
- * switch flips both layers together.
+ * supply the *color* + the *frosted-glass effect* families, referenced from
+ * components as arbitrary `[var(--color-*)]` / `[var(--surface-*)]` values.
+ *
+ * This is the retuned Viviana UI token layer authored on the
+ * `design/visual-system-claude-v1` lane (see `.claude/current/visual-system-lane.md`).
+ * It supersedes the earlier blue + pink "Silapse" palette: the accent family is
+ * now amber (the single warm, one-per-screen action color), blue carries
+ * wayfinding/selection, and new **surface / blur / edge-glass / glow / shadow**
+ * families express the frosted-glass surface ladder. Semantic
+ * success/warning/danger are unchanged. The values are the canonical spec
+ * transcribed from the paired design handoff; the Education reference route keeps
+ * the same semantic names under its `.vui` scope.
  *
- * Values mirror apps/web's palette verbatim — keep them in sync until apps/web
- * consumes this file directly.
+ * Dark is the default (`:root`); light overrides bind to the same
+ * `data-color-scheme` attribute solid-spectrum's theme uses, so a single scheme
+ * switch flips both layers together. `apps/web` still ships its own copy of the
+ * legacy palette until the Tailwind-removal Phase 4 restyle consumes this file
+ * directly (`.claude/current/tailwind-removal.md`).
  */
 
 :root {
-  /* Grey scale */
-  --color-grey-50: #ffffff;
-  --color-grey-100: #e0e0e0;
-  --color-grey-200: #c0c0c0;
-  --color-grey-300: #a0a0a0;
-  --color-grey-400: #606060;
-  --color-grey-500: #404040;
-  --color-grey-600: #1a1a1a;
-  --color-grey-700: #111111;
-  --color-grey-800: #0a0a0a;
-  --color-grey-900: #000000;
-
-  /* Blue scale */
-  --color-blue-50: #f0f7ff;
-  --color-blue-100: #ddf4ff;
-  --color-blue-200: #b6e3ff;
-  --color-blue-300: #80ccff;
-  --color-blue-400: #54aeff;
-  --color-blue-500: #388bfd;
-  --color-blue-600: #1f6feb;
-  --color-blue-700: #1158c7;
-  --color-blue-800: #0d419d;
-  --color-blue-900: #050a12;
-
-  /* Pink scale */
-  --color-pink-50: #fff5f9;
-  --color-pink-100: #ffe4f3;
-  --color-pink-200: #ffc9e9;
-  --color-pink-300: #ffa0d5;
-  --color-pink-400: #f778ba;
-  --color-pink-500: #d84a8f;
-  --color-pink-600: #b13570;
-  --color-pink-700: #912b5a;
-  --color-pink-800: #702244;
-  --color-pink-900: #0f0508;
-
-  /* Background — pure void */
-  --color-bg-100: #404040;
-  --color-bg-200: #252525;
-  --color-bg-300: #1a1a1a;
-  --color-bg-400: #111111;
-  --color-bg-light: #515151;
-
-  /* Primary — blue scale */
-  --color-primary: #75abc7;
-  --color-primary-50: #081018;
-  --color-primary-100: #ddf4ff;
-  --color-primary-200: #b6e3ff;
-  --color-primary-300: #80ccff;
-  --color-primary-400: #54aeff;
-  --color-primary-500: #4da0ff;
-  --color-primary-600: #3080f4;
-  --color-primary-700: #1158c7;
-  --color-primary-800: #0d419d;
-  --color-primary-900: #050a12;
-
-  /* Accent — pink */
-  --color-accent: #df5c9a;
-  --color-accent-50: #100810;
-  --color-accent-100: #0f0508;
-  --color-accent-200: #150a12;
-  --color-accent-300: #ffa0d5;
-  --color-accent-400: #f778ba;
-  --color-accent-500: #d84a8f;
-  --color-accent-600: #f778ba;
-  --color-accent-700: #ffa0d5;
-  --color-accent-800: #ffc9e9;
-  --color-accent-900: #0f0508;
-  --color-accent-highlight: #e2a2be;
+  /* Grey scale — charcoal-slate neutral ramp */
+  --color-grey-50: #f3f4f6;
+  --color-grey-100: #d7dce2;
+  --color-grey-200: #b9c0c9;
+  --color-grey-300: #97a1ab;
+  --color-grey-400: #626d78;
+  --color-grey-500: #4a545e;
+  --color-grey-600: #333c45;
+  --color-grey-700: #232d37;
+  --color-grey-800: #1a222a;
+  --color-grey-900: #10161c;
+
+  /* Blue scale — wayfinding / selection */
+  --color-blue-50: #eaf4fe;
+  --color-blue-100: #d4e9fd;
+  --color-blue-200: #a8d2fb;
+  --color-blue-300: #7cbaf8;
+  --color-blue-400: #55a6f6;
+  --color-blue-500: #2e90fa;
+  --color-blue-600: #1877e8;
+  --color-blue-700: #135fc0;
+  --color-blue-800: #0e4a99;
+  --color-blue-900: #0a2f63;
+
+  /* Amber scale — the single warm action accent */
+  --color-amber-50: #fef4e6;
+  --color-amber-100: #fde7c8;
+  --color-amber-200: #fcd9a0;
+  --color-amber-300: #f9c270;
+  --color-amber-400: #f9a838;
+  --color-amber-500: #f79009;
+  --color-amber-600: #e07b00;
+  --color-amber-700: #b86200;
+  --color-amber-800: #8f4c00;
+  --color-amber-900: #3b2200;
+
+  /* Background — frosted charcoal ladder (near-opaque worst-case surfaces) */
+  --color-bg-100: #2a333c;
+  --color-bg-200: #232d37;
+  --color-bg-300: #1b242c;
+  --color-bg-400: #141a1f;
+  --color-bg-light: #33424e;
+
+  /* Primary — blue */
+  --color-primary: #55a6f6;
+  --color-primary-50: #0a1826;
+  --color-primary-100: #d4e9fd;
+  --color-primary-200: #a8d2fb;
+  --color-primary-300: #7cbaf8;
+  --color-primary-400: #55a6f6;
+  --color-primary-500: #2e90fa;
+  --color-primary-600: #1877e8;
+  --color-primary-700: #135fc0;
+  --color-primary-800: #0e4a99;
+  --color-primary-900: #0a2f63;
+
+  /* Accent — amber (high indices lighten for text/marks on dark) */
+  --color-accent: #f79009;
+  --color-accent-50: #1f1405;
+  --color-accent-100: #fde7c8;
+  --color-accent-200: #fcd9a0;
+  --color-accent-300: #f9c270;
+  --color-accent-400: #f9a838;
+  --color-accent-500: #f79009;
+  --color-accent-600: #f9a838;
+  --color-accent-700: #f9c270;
+  --color-accent-800: #fde7c8;
+  --color-accent-900: #3b2200;
+  --color-accent-highlight: #f9c270;
 
   /* Semantic colors */
   --color-success-100: #e5fff3;
@@ -114,36 +125,36 @@
   --color-danger-900: #ffe5e5;
 
   /* Cards */
-  --color-cards-bg: #373737;
-  --color-cards-bg-load: #484848;
+  --color-cards-bg: #232d37;
+  --color-cards-bg-load: #2f3a44;
   --color-correct: #83f1a7;
   --color-incorrect: #e74c3c;
 
   /* Canvas */
-  --color-canvas-bg: #000000;
+  --color-canvas-bg: #10161c;
 
-  /* Surfaces */
-  --color-background: #000000;
-  --color-surface: #0a0a0a;
-  --color-surface-elevated: #111111;
+  /* Surfaces (opaque) */
+  --color-background: #141a1f;
+  --color-surface: #1b242c;
+  --color-surface-elevated: #232d37;
 
   /* Blue depth backgrounds */
-  --color-bg-blue-deep: #050a12;
-  --color-bg-blue-dark: #081020;
-  --color-bg-blue-mid: #0a1830;
-  --color-bg-blue-light: #102040;
+  --color-bg-blue-deep: #071726;
+  --color-bg-blue-dark: #0a1f33;
+  --color-bg-blue-mid: #0e2a44;
+  --color-bg-blue-light: #123a5e;
 
   /* Text */
-  --color-text: #ffffff;
-  --color-text-secondary: #a0a0a0;
-  --color-text-muted: #606060;
-  --color-text-dim: #4f6d85;
-  --color-text-disabled: #404040;
+  --color-text: #f3f4f6;
+  --color-text-secondary: #97a1ab;
+  --color-text-muted: #626d78;
+  --color-text-dim: #55708a;
+  --color-text-disabled: #3a444e;
 
   /* Borders */
-  --color-border: #1a1a1a;
-  --color-border-muted: #141414;
-  --color-divider: #141414;
+  --color-border: #232d37;
+  --color-border-muted: #1a222a;
+  --color-divider: #1a222a;
 
   /* Semantic base + dim */
   --color-success: #3fb950;
@@ -154,22 +165,51 @@
   --color-danger-dim: #da3633;
 
   /* Dim versions (wire base / inactive elements) */
-  --color-primary-dim: #1a3040;
-  --color-accent-dim: #301520;
+  --color-primary-dim: #123a5e;
+  --color-accent-dim: #3b2a12;
 
   /* Header background */
-  --color-header-bg: #181818;
+  --color-header-bg: #1b242c;
 
-  /* Glow effects (for drop-shadow filters) */
-  --color-primary-glow: rgba(128, 204, 255, 0.6);
-  --color-accent-glow: rgba(255, 160, 213, 0.6);
-  --color-fusion-glow: rgba(180, 140, 230, 0.7);
+  /* Glow effects (for drop-shadow filters) — blue + amber */
+  --color-primary-glow: rgba(46, 144, 250, 0.55);
+  --color-accent-glow: rgba(247, 144, 9, 0.5);
+  --color-fusion-glow: rgba(139, 92, 246, 0.5);
 
   /* Semantic background tints */
   --color-success-bg: rgba(63, 185, 80, 0.1);
   --color-warning-bg: rgba(210, 153, 34, 0.1);
   --color-danger-bg: rgba(248, 81, 73, 0.1);
 
+  /* ── Frosted-glass surface family (translucent ladder over a lit scene) ── */
+  --surface-app: #1e2227;
+  --surface-panel: rgba(20, 26, 31, 0.94);
+  --surface-card: rgba(27, 36, 44, 0.9);
+  --surface-raised: rgba(35, 45, 55, 0.95);
+  --surface-inset: rgba(13, 17, 21, 0.72);
+  --surface-hover: rgba(42, 53, 64, 0.95);
+  --surface-ghost: rgba(30, 36, 41, 0.28);
+
+  /* Accent surface tints (soft fills for selected/warm states) */
+  --accent-primary: var(--color-primary);
+  --accent-primary-soft: rgba(46, 144, 250, 0.15);
+  --accent-warm: var(--color-accent);
+  --accent-warm-soft: rgba(247, 144, 9, 0.15);
+
+  /* ── Blur family ── */
+  --blur-panel: blur(18px);
+  --blur-card: blur(10px);
+
+  /* ── Edge-glass (inner highlight that catches the light) ── */
+  --edge-glass: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+
+  /* ── Shadow + glow family (glow follows the accent, never the chrome) ── */
+  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
+  --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.5);
+  --shadow-float: 0 16px 48px rgba(0, 0, 0, 0.6);
+  --shadow-glow-blue: 0 0 24px rgba(46, 144, 250, 0.35);
+  --shadow-glow-warm: 0 0 24px rgba(247, 144, 9, 0.3);
+
   /* Typography */
   --font-sen: "Sen", sans-serif;
   --font-jost: "Jost", sans-serif;
@@ -177,6 +217,8 @@
   --font-mono: "JetBrains Mono", monospace;
   --font-title: "Jost", system-ui, sans-serif;
   --font-body: "Sen", system-ui, sans-serif;
+  --font-display: var(--font-jost);
+  --font-ui: var(--font-sen);
 }
 
 [data-color-scheme="light"] {
@@ -191,55 +233,56 @@
   --color-grey-800: #262626;
   --color-grey-900: #171717;
 
-  --color-blue-100: #e0f0f7;
-  --color-blue-200: #b6d9eb;
-  --color-blue-300: #8bc4db;
-  --color-blue-400: #75abc7;
-  --color-blue-500: #5a94b3;
-  --color-blue-600: #3d7a9c;
-  --color-blue-700: #2b6080;
-  --color-blue-800: #1a4560;
-  --color-blue-900: #0d2a3d;
-
-  --color-pink-100: #fef2f7;
-  --color-pink-200: #fcc7e0;
-  --color-pink-300: #f78fb9;
-  --color-pink-400: #df5c9a;
-  --color-pink-500: #cf2c74;
-  --color-pink-600: #a31f58;
-  --color-pink-700: #8a1a4a;
-  --color-pink-800: #6b143a;
-  --color-pink-900: #4d0f2a;
-
-  /* Backgrounds — AA-verified against primary text */
-  --color-bg-100: #7096a8;
-  --color-bg-200: #a8c5d4;
-  --color-bg-300: #c8dce6;
-  --color-bg-400: #dbe8ef;
+  /* Blue + primary FLIP for daylight: the :root (dark) ramp runs light→dark as
+     the index climbs, so the low indices (100/200/300 — used as *text*: wordmarks,
+     card titles, nav section titles, active links) must invert to dark navy here,
+     or they render near-invisible on the light surfaces. Mid index 500 stays a
+     readable medium blue (its only text use sits on the light bg-400 bar); 700
+     lightens because it is a *fill* (the primary Chip) that carries dark text.
+     Same hue as dark — only lightness/saturation shift for AA (WCAG verified
+     against the bg-* ladder below). Blue mirrors primary (no direct consumers,
+     kept in lockstep for future use). */
+  --color-blue-50: #eef5ff;
+  --color-blue-100: #08203c;
+  --color-blue-200: #0b2a4a;
+  --color-blue-300: #103c67;
+  --color-blue-400: #15508a;
+  --color-blue-500: #1a5fa3;
+  --color-blue-600: #2270b0;
+  --color-blue-700: #6fa8d6;
+  --color-blue-800: #a8cfec;
+  --color-blue-900: #0b2545;
+  --color-primary: #1a5fa3;
+  --color-primary-50: #eef5ff;
+  --color-primary-100: #08203c;
+  --color-primary-200: #0b2a4a;
+  --color-primary-300: #103c67;
+  --color-primary-400: #15508a;
+  --color-primary-500: #1a5fa3;
+  --color-primary-600: #2270b0;
+  --color-primary-700: #6fa8d6;
+  --color-primary-800: #a8cfec;
+  --color-primary-900: #0b2545;
+
+  /* Amber accent — high indices darken for text/marks on light */
+  --color-accent: #f79009;
+  --color-accent-100: #fef4e6;
+  --color-accent-200: #7a4a00;
+  --color-accent-300: #f9c270;
+  --color-accent-400: #f79009;
+  --color-accent-500: #8a5200;
+  --color-accent-highlight: #e07b00;
+
+  /* Backgrounds — daylight slate ladder, AA-verified against primary text.
+     bg-100 (the darkest rung, e.g. the secondary Chip fill) is lightened enough
+     that dark primary-200 text clears 4.5:1 on it — a mid-slate cannot host any
+     AA text. */
+  --color-bg-100: #7ba0b3;
+  --color-bg-200: #aebccb;
+  --color-bg-300: #cdd8e4;
+  --color-bg-400: #e2e9f1;
   --color-bg-light: #ffffff;
 
-  /* Primary — blue */
-  --color-primary: #75abc7;
-  --color-primary-50: #f0f7ff;
-  --color-primary-100: #06131d;
-  --color-primary-200: #0c2436;
-  --color-primary-300: #133a54;
-  --color-primary-400: #195073;
-  --color-primary-500: #1e6090;
-  --color-primary-600: #2470a5;
-  --color-primary-700: #5ea8d0;
-  --color-primary-800: #9dcce4;
-  --color-primary-900: #0d2a3d;
-
-  /* Accent — pink */
-  --color-accent: #df5c9a;
-  --color-accent-100: #fef2f7;
-  --color-accent-200: #7d1c48;
-  --color-accent-300: #f78fb9;
-  --color-accent-400: #df5c9a;
-  --color-accent-500: #8a1e4a;
-  --color-accent-highlight: #d4508a;
-
   /* Semantic — darker for readability on light bgs */
   --color-success-100: #e5fff3;
   --color-success-200: #c2ffc8;
@@ -269,33 +312,39 @@
   --color-danger-800: #572f2f;
   --color-danger-900: #351c1c;
 
-  --color-cards-bg: #ecf2f5;
-  --color-cards-bg-load: #dfeaef;
+  --color-cards-bg: #ffffff;
+  --color-cards-bg-load: #eef3f9;
   --color-correct: #1a7f37;
   --color-incorrect: #cf222e;
 
-  --color-canvas-bg: #404040;
+  --color-canvas-bg: #dbe8ef;
 
-  /* Surfaces */
-  --color-background: #f2f7fa;
+  /* Surfaces (opaque) */
+  --color-background: #eef3f9;
   --color-surface: #ffffff;
-  --color-surface-elevated: #e6f0f5;
+  --color-surface-elevated: #e7edf5;
 
-  --color-bg-blue-deep: #e0f0f7;
-  --color-bg-blue-dark: #b6d9eb;
-  --color-bg-blue-mid: #8bc4db;
-  --color-bg-blue-light: #75abc7;
+  --color-bg-blue-deep: #eaf4fe;
+  --color-bg-blue-dark: #d4e9fd;
+  --color-bg-blue-mid: #a8d2fb;
+  --color-bg-blue-light: #7cbaf8;
 
   /* Text */
-  --color-text: #1a3040;
+  --color-text: #17212e;
+  /* WCAG AA: secondary text lands as normal-size runs on the light
+     --color-bg-300 card (EventListItem subtitle, CalendarCard "seguida por"
+     connector). A mid-slate (#64748b) read only 3.29:1 there; this darker
+     slate-blue clears 4.82:1 on bg-300 while staying the same hue and reading
+     as muted secondary against the near-black --color-text. */
   --color-text-secondary: #405d70;
-  --color-text-muted: #7096a8;
-  --color-text-disabled: #a8c5d4;
+  --color-text-muted: #94a3b8;
+  --color-text-dim: #64748b;
+  --color-text-disabled: #c4d0de;
 
   /* Borders */
-  --color-border: #c8dce6;
-  --color-border-muted: #dbe8ef;
-  --color-divider: #dbe8ef;
+  --color-border: #dce4ee;
+  --color-border-muted: #eaeff6;
+  --color-divider: #eaeff6;
 
   /* Semantic base + dim */
   --color-success: #5bc96e;
@@ -306,13 +355,33 @@
   --color-danger-dim: #9d5555;
 
   /* Dim, glow, bg tints */
-  --color-primary-dim: #b6d9eb;
-  --color-accent-dim: #fcc7e0;
-  --color-header-bg: #d0e4ed;
-  --color-primary-glow: rgba(117, 171, 199, 0.4);
-  --color-accent-glow: rgba(223, 92, 154, 0.4);
-  --color-fusion-glow: rgba(170, 130, 180, 0.5);
+  --color-primary-dim: #d4e9fd;
+  --color-accent-dim: #fde7c8;
+  --color-header-bg: #e7edf5;
+  --color-primary-glow: rgba(46, 144, 250, 0.4);
+  --color-accent-glow: rgba(247, 144, 9, 0.35);
+  --color-fusion-glow: rgba(139, 92, 246, 0.4);
   --color-success-bg: rgba(63, 185, 80, 0.1);
   --color-warning-bg: rgba(210, 153, 34, 0.15);
   --color-danger-bg: rgba(248, 81, 73, 0.1);
+
+  /* ── Frosted-glass surface family (daylight) ── */
+  --surface-app: #e9eff6;
+  --surface-panel: rgba(255, 255, 255, 0.42);
+  --surface-card: rgba(255, 255, 255, 0.55);
+  --surface-raised: rgba(255, 255, 255, 0.88);
+  --surface-inset: rgba(238, 243, 249, 0.55);
+  --surface-hover: rgba(255, 255, 255, 0.75);
+  --surface-ghost: rgba(255, 255, 255, 0.18);
+
+  --accent-primary-soft: rgba(46, 144, 250, 0.1);
+  --accent-warm-soft: rgba(247, 144, 9, 0.1);
+
+  /* Edge-glass + shadow/glow — daylight (soft, cool-tinted; glow carries accent) */
+  --edge-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+  --shadow-card: 0 2px 8px rgba(99, 115, 139, 0.08), 0 8px 24px rgba(99, 115, 139, 0.1);
+  --shadow-panel: 0 12px 40px rgba(99, 115, 139, 0.14);
+  --shadow-float: 0 16px 48px rgba(99, 115, 139, 0.22);
+  --shadow-glow-blue: 0 4px 20px rgba(46, 144, 250, 0.28);
+  --shadow-glow-warm: 0 4px 20px rgba(247, 144, 9, 0.24);
 }

package/dist/CalendarCard.d.ts

@@ -1,2 +0,0 @@
-export * from "./custom/calendar-card";
-//# sourceMappingURL=CalendarCard.d.ts.map

package/dist/CalendarCard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CalendarCard.d.ts","sourceRoot":"","sources":["../src/CalendarCard.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/CalendarCard.js

@@ -1,96 +0,0 @@
-import { t as Chip } from "./chip2.js";
-/* empty css                                                                       */
-/* empty css                                                                       */
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, setAttribute, template } from "solid-js/web";
-import { For, Show } from "solid-js";
-//#region src/custom/calendar-card/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<img class=" ZKniM151 FKniM151 _va151 _Hb151 oc151 nc151 kc151 jc151 _kc151 hc151 mc151 lc151 _jf151 ij1j4Pd151">`), _tmpl$2 = /*#__PURE__*/ template(`<span class=" xd151 _xa151 xX0cczbc151 _xX0cczba151 pO550xe151"><!$><!/> más`), _tmpl$3 = /*#__PURE__*/ template(`<span class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pxeCuqc151">seguida por <!$><!/><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd151 _wb151 Ub151 qb151">`), _tmpl$5 = /*#__PURE__*/ template(`<div><!$><!/><div class=" sd151 _ta151 Ue151 qe151 _ub151 Na151"><span class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-f151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151"></span><!$><!/><!$><!/>`), _tmpl$6 = /*#__PURE__*/ template(`<span class=" xd151 _xa151 xX0cczbc151 _xX0cczba151 pO550xe151">`);
-const card = " sd151 eb151 Ug151 qg151 Za151 LQAax0d151 Te151 Qe151 Se151 Re151 oe151 ne151 ke151 je151 _kc151 hc151 mc151 lc151 _jf151 i6nBqyb151 gg0eWE151 _nLeasBb151";
-function CalendarCard(props) {
-	const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
-	const remainingCount = () => {
-		return (props.followerCount ?? props.followers?.length ?? 0) - displayedFollowers().length;
-	};
-	return (() => {
-		var _el$ = getNextElement(_tmpl$5), _el$19 = _el$.firstChild, [_el$20, _co$6] = getNextMarker(_el$19.nextSibling), _el$3 = _el$20.nextSibling, _el$4 = _el$3.firstChild, _el$15 = _el$4.nextSibling, [_el$16, _co$4] = getNextMarker(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$5] = getNextMarker(_el$17.nextSibling);
-		insert(_el$, createComponent(Show, {
-			get when() {
-				return props.image;
-			},
-			get children() {
-				var _el$2 = getNextElement(_tmpl$);
-				effect((_p$) => {
-					var _v$ = props.image, _v$2 = props.title;
-					_v$ !== _p$.e && setAttribute(_el$2, "src", _p$.e = _v$);
-					_v$2 !== _p$.t && setAttribute(_el$2, "alt", _p$.t = _v$2);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0
-				});
-				return _el$2;
-			}
-		}), _el$20, _co$6);
-		insert(_el$4, () => props.title);
-		insert(_el$3, createComponent(Show, {
-			get when() {
-				return displayedFollowers().length > 0;
-			},
-			get children() {
-				var _el$5 = getNextElement(_tmpl$3), _el$10 = _el$5.firstChild.nextSibling, [_el$11, _co$2] = getNextMarker(_el$10.nextSibling), _el$12 = _el$11.nextSibling, [_el$13, _co$3] = getNextMarker(_el$12.nextSibling);
-				insert(_el$5, createComponent(For, {
-					get each() {
-						return displayedFollowers();
-					},
-					children: (follower, index) => [(() => {
-						var _el$21 = getNextElement(_tmpl$6);
-						insert(_el$21, () => follower.name);
-						return _el$21;
-					})(), memo(() => index() < displayedFollowers().length - 1 && ", ")]
-				}), _el$11, _co$2);
-				insert(_el$5, createComponent(Show, {
-					get when() {
-						return remainingCount() > 0;
-					},
-					get children() {
-						return [
-							" ",
-							"y ",
-							(() => {
-								var _el$8 = getNextElement(_tmpl$2), _el$0 = _el$8.firstChild, [_el$1, _co$] = getNextMarker(_el$0.nextSibling);
-								_el$1.nextSibling;
-								insert(_el$8, remainingCount, _el$1, _co$);
-								return _el$8;
-							})()
-						];
-					}
-				}), _el$13, _co$3);
-				return _el$5;
-			}
-		}), _el$16, _co$4);
-		insert(_el$3, createComponent(Show, {
-			get when() {
-				return memo(() => !!props.tags)() && props.tags.length > 0;
-			},
-			get children() {
-				var _el$14 = getNextElement(_tmpl$4);
-				insert(_el$14, createComponent(For, {
-					get each() {
-						return props.tags;
-					},
-					children: (tag) => createComponent(Chip, {
-						text: tag,
-						variant: "primary"
-					})
-				}));
-				return _el$14;
-			}
-		}), _el$18, _co$5);
-		effect(() => className(_el$, `${card} ${props.class ?? ""}`));
-		return _el$;
-	})();
-}
-//#endregion
-export { CalendarCard };
-
-//# sourceMappingURL=CalendarCard.js.map

package/dist/CalendarCard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CalendarCard.js","names":[],"sources":["../src/custom/calendar-card/index.tsx"],"sourcesContent":["import { Show, For } from \"solid-js\";\nimport { Chip } from \"../chip\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A horizontal \"followed calendar\" card: square thumbnail +\n// title + followers line + tag chips, on the S2 ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface CalendarCardProps {\n  title: string;\n  image?: string;\n  tags?: string[];\n  followers?: { name: string }[];\n  followerCount?: number;\n  class?: string;\n}\n\nconst card = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  maxWidth: 500,\n  padding: 12,\n  borderRadius: \"xl\",\n  borderWidth: 2,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-primary-600)]\",\n  backgroundColor: \"[var(--color-bg-300)]\",\n  boxShadow: \"elevated\",\n});\n\nconst thumb = style({\n  width: 80,\n  height: 80,\n  flexShrink: 0,\n  objectFit: \"cover\",\n  borderRadius: \"lg\",\n  borderWidth: 2,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-accent)]\",\n});\n\nconst body = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 8,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst title = style({\n  font: \"heading-sm\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst followers = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst followerName = style({\n  fontWeight: \"bold\",\n  // WCAG AA fix: the follower names sit on the `--color-bg-300` card. They are\n  // small text (`ui-sm`, inherited), so the 4.5:1 normal-text floor applies.\n  // `--color-accent` (#df5c9a) is a fixed pink in both themes and read only\n  // 2.42:1 on the light-blue card (5.08:1 dark); no pink ramp step clears 4.5:1\n  // on both the dark-grey and light-blue card (`--color-accent-500` is 4.39:1\n  // dark — a hair under). The names keep their emphasis via `fontWeight: bold`\n  // against the secondary-grey connectors and take the flipping `--color-text`,\n  // which clears 4.5:1 both ways (17.40:1 dark / 9.63:1 light). The card's pink\n  // accent moment stays on the thumbnail border (bears no text).\n  color: \"[var(--color-text)]\",\n});\n\nconst tags = style({\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  gap: 4,\n});\n\nexport function CalendarCard(props: CalendarCardProps) {\n  const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];\n  const remainingCount = () => {\n    const total = props.followerCount ?? props.followers?.length ?? 0;\n    const displayed = displayedFollowers().length;\n    return total - displayed;\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <Show when={props.image}>\n        <img class={thumb} src={props.image} alt={props.title} />\n      </Show>\n      <div class={body}>\n        <span class={title}>{props.title}</span>\n        <Show when={displayedFollowers().length > 0}>\n          <span class={followers}>\n            seguida por{\" \"}\n            <For each={displayedFollowers()}>\n              {(follower, index) => (\n                <>\n                  <span class={followerName}>{follower.name}</span>\n                  {index() < displayedFollowers().length - 1 && \", \"}\n                </>\n              )}\n            </For>\n            <Show when={remainingCount() > 0}>\n              {\" \"}\n              y <span class={followerName}>{remainingCount()} más</span>\n            </Show>\n          </span>\n        </Show>\n        <Show when={props.tags && props.tags.length > 0}>\n          <div class={tags}>\n            <For each={props.tags}>{(tag) => <Chip text={tag} variant=\"primary\" />}</For>\n          </div>\n        </Show>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,OAAA;AAmEN,SAAgB,aAAa,OAAwB;CACnD,MAAM,2BAA2B,MAAM,WAAW,MAAM,GAAG,CAAA,KAAM,CAAA;CACjE,MAAM,uBAAiB;EAGrB,QAFc,MAAM,iBAAiB,MAAM,WAAW,UAAU,KAC9C,mBAAA,EAAqB;CAEzC;CAEA,cAAA;EAAA,IAAA,OAAA,eAAA,OAAA,GAAA,SAAA,KAAA,YAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,QAAA,OAAA,aAAA,QAAA,MAAA,YAAA,SAAA,MAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,SAAA,OAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA;EAAA,OAAA,MAAA,gBAEK,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM;GAAK;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,MAAA;IAAA,QAAA,QAAA;KAAA,IAAA,MACG,MAAM,OAAK,OAAO,MAAM;KAAK,QAAA,IAAA,KAAA,aAAA,OAAA,OAAA,IAAA,IAAA,GAAA;KAAA,SAAA,IAAA,KAAA,aAAA,OAAA,OAAA,IAAA,IAAA,IAAA;KAAA,OAAA;IAAA,GAAA;KAAA,GAAA,KAAA;KAAA,GAAA,KAAA;IAAA,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,aAGhC,MAAM,KAAK;EAAA,OAAA,OAAA,gBAC/B,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,mBAAA,EAAqB,SAAS;GAAA;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,OAAA,GAAA,SAAA,MAAA,WAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA,GAAA,SAAA,OAAA,aAAA,CAAA,QAAA,SAAA,cAAA,OAAA,WAAA;IAAA,OAAA,OAAA,gBAGrC,KAAA;KAAA,IAAI,OAAA;MAAA,OAAM,mBAAA;KAAA;KAAA,WACP,UAAU,UAAA,QAAA;MAAA,IAAA,SAAA,eAAA,OAAA;MAAA,OAAA,cAEoB,SAAS,IAAI;MAAA,OAAA;KAAA,GAAA,GAAA,WACxC,MAAA,IAAU,mBAAA,EAAqB,SAAS,KAAK,IAAA,CAAA;IAElD,CAAA,GAAA,QAAA,KAAA;IAAA,OAAA,OAAA,gBAED,MAAA;KAAA,IAAK,OAAA;MAAA,OAAM,eAAA,IAAmB;KAAA;KAAA,IAAA,WAAA;MAAA,OAAA;OAC5B;OAAA;cAAA;QAAA,IAAA,QAAA,eAAA,OAAA,GAAA,QAAA,MAAA,YAAA,CAAA,OAAA,QAAA,cAAA,MAAA,WAAA;QAAA,MAAA;QAAA,OAAA,OAC6B,gBAAA,OAAA,IAAA;QAAA,OAAA;OAAA,GAAA;MAAA;KAAA;IAAA,CAAA,GAAA,QAAA,KAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,OAAA,OAAA,gBAInC,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,WAAA,CAAA,CAAA,MAAM,IAAI,EAAA,KAAI,MAAM,KAAK,SAAS;GAAA;GAAA,IAAA,WAAA;IAAA,IAAA,SAAA,eAAA,OAAA;IAAA,OAAA,QAAA,gBAEzC,KAAA;KAAA,IAAI,OAAA;MAAA,OAAM,MAAM;KAAI;KAAA,WAAI,QAAA,gBAAS,MAAA;MAAK,MAAM;MAAK,SAAA;KAAA,CAAA;IAAQ,CAAA,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,QAAA,KAAA;EAAA,aAAA,UAAA,MAzBtD,GAAG,KAAA,GAAQ,MAAM,SAAS,IAAI,CAAA;EAAA,OAAA;CAAA,GAAA;AA+B9C"}