@proyecto-viviana/ui 0.4.0 → 0.4.1

package/dist/CalendarCard.js

@@ -1,12 +1,11 @@
 import { t as Chip } from "./chip2.js";
 /* empty css                                                                       */
 /* 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=" ZKniM13 FKniM13 _va13 _Hb13 oc13 nc13 kc13 jc13 _kc13 hc13 mc13 lc13 _jf13 ij1j4Pd13">`), _tmpl$2 = /*#__PURE__*/ template(`<span class=" xd13 _xa13 xX0cczbc13 _xX0cczba13 pj1j4Pd13"><!$><!/> más`), _tmpl$3 = /*#__PURE__*/ template(`<span class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13">seguida por <!$><!/><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd13 _wb13 Ub13 qb13">`), _tmpl$5 = /*#__PURE__*/ template(`<div><!$><!/><div class=" sd13 _ta13 Ue13 qe13 _ub13 Na13"><span class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-f13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13"></span><!$><!/><!$><!/>`), _tmpl$6 = /*#__PURE__*/ template(`<span class=" xd13 _xa13 xX0cczbc13 _xX0cczba13 pj1j4Pd13">`);
-const card = " sd13 eb13 Ug13 qg13 Za13 LQAax0d13 Te13 Qe13 Se13 Re13 oe13 ne13 ke13 je13 _kc13 hc13 mc13 lc13 _jf13 i6nBqyb13 gg0eWE13 _nLeasBb13";
+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 = () => {

package/dist/CalendarCard.js.map

@@ -1 +1 @@
-{"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  color: \"[var(--color-accent)]\",\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;AA0DN,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"}
+{"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"}

package/dist/CalendarCard.jsx

@@ -1,16 +1,15 @@
 import { t as Chip } from "./chip2.jsx";
 /* empty css                                                                        */
 /* empty css                                                                        */
-/* empty css                                                                        */
 import { For, Show } from "solid-js";
 //#region src/custom/calendar-card/index.tsx
-const card = " sd13 eb13 Ug13 qg13 Za13 LQAax0d13 Te13 Qe13 Se13 Re13 oe13 ne13 ke13 je13 _kc13 hc13 mc13 lc13 _jf13 i6nBqyb13 gg0eWE13 _nLeasBb13";
-const thumb = " ZKniM13 FKniM13 _va13 _Hb13 oc13 nc13 kc13 jc13 _kc13 hc13 mc13 lc13 _jf13 ij1j4Pd13";
-const body = " sd13 _ta13 Ue13 qe13 _ub13 Na13";
-const title = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-f13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13";
-const followers = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13";
-const followerName = " xd13 _xa13 xX0cczbc13 _xX0cczba13 pj1j4Pd13";
-const tags = " sd13 _wb13 Ub13 qb13";
+const card = " sd151 eb151 Ug151 qg151 Za151 LQAax0d151 Te151 Qe151 Se151 Re151 oe151 ne151 ke151 je151 _kc151 hc151 mc151 lc151 _jf151 i6nBqyb151 gg0eWE151 _nLeasBb151";
+const thumb = " ZKniM151 FKniM151 _va151 _Hb151 oc151 nc151 kc151 jc151 _kc151 hc151 mc151 lc151 _jf151 ij1j4Pd151";
+const body = " sd151 _ta151 Ue151 qe151 _ub151 Na151";
+const title = " 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";
+const followers = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pxeCuqc151";
+const followerName = " xd151 _xa151 xX0cczbc151 _xX0cczba151 pO550xe151";
+const tags = " sd151 _wb151 Ub151 qb151";
 function CalendarCard(props) {
 	const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
 	const remainingCount = () => {

package/dist/CalendarCard.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCard.jsx","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  color: \"[var(--color-accent)]\",\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,QAAA;AAeN,MAAM,OAAA;AAWN,MAAM,QAAA;AAQN,MAAM,YAAA;AAQN,MAAM,eAAA;AAKN,MAAM,OAAA;AAKN,SAAM,aAAA,OAAA;CAMN,MAAA,2BAAqD,MAAA,WAAA,MAAA,GAAA,CAAA,KAAA,CAAA;CACnD,MAAM,uBAAA;EACN,QAAM,MAAA,iBAAiB,MAAA,WAAA,UAAA,KAAA,mBAAA,EAAA;;CAIvB,OAAA,CAAA,IAAA,OAAA,GAAA,KAAA,GAAA,MAAA,SAAA,MAAA;MAEA,CAAA,KACG,MAAI,MAAU,OAAQ;QACpB,CAAA,IAAK,OAAM,OAAM,KAAO,MAAA,OAAA,KAAA,MAAA,SAAA;QACvB,KAAK;MACP,CAAA,IAAE,OAAK,MAAA;QACN,CAAA,KAAI,OAAO,QAAM,MAAA,MAAA,EAAA,KAAA;QAChB,CAAC,KAAK,MAAA,mBAAqB,EAAK,SAAQ,GAAA;UACvC,CAAA,KAAK,OAAM,WAAA;wBACG,IAAA;0CACK,GAAA;gBACf,UAAU,UAAA,EAAA;kBACP,CAAA,KAAA,OAAU,eACR,SAAA,KAAA,EAAA,KAAA;mBACC,MAAK,IAAA,mBAAsB,EAAA,SAAS,KAAO,KAAK;oBAChD;kBACH;YAEJ,CAAA,KAAM,MAAA,eAAA,IAAA,GAAA;eACL,IAAK;gBACH,CAAA,KAAI,OAAA,eAAA,eAAA,EAAA,IAAA,EAAA,KAAA;mBACF;YACL,KAAE;UACJ,KAAE;QACJ,CAAA,KAAE,MAAK,MAAA,QAAA,MAAA,KAAA,SAAA,GAAA;UACN,CAAA,IAAK,OAAM,MAAM;YACf,CAAA,IAAI,MAAO,MAAM,QAAA,QAAA,CAAA,KAAA,MAAA,KAAA,qBAAA,EAAA,IAAA;YAChB,IAAC;UACH,KAAE;QACJ,IAAE;MACJ"}
+{"version":3,"file":"CalendarCard.jsx","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,QAAA;AAeN,MAAM,OAAA;AAWN,MAAM,QAAA;AAQN,MAAM,YAAA;AAQN,MAAM,eAAA;AAKN,MAAM,OAAA;AAcN,SAAM,aAAA,OAAA;CAMN,MAAA,2BAAqD,MAAA,WAAA,MAAA,GAAA,CAAA,KAAA,CAAA;CACnD,MAAM,uBAAA;EACN,QAAM,MAAA,iBAAiB,MAAA,WAAA,UAAA,KAAA,mBAAA,EAAA;;CAIvB,OAAA,CAAA,IAAA,OAAA,GAAA,KAAA,GAAA,MAAA,SAAA,MAAA;MAEA,CAAA,KACG,MAAI,MAAU,OAAQ;QACpB,CAAA,IAAK,OAAM,OAAM,KAAO,MAAA,OAAA,KAAA,MAAA,SAAA;QACvB,KAAK;MACP,CAAA,IAAE,OAAK,MAAA;QACN,CAAA,KAAI,OAAO,QAAM,MAAA,MAAA,EAAA,KAAA;QAChB,CAAC,KAAK,MAAA,mBAAqB,EAAK,SAAQ,GAAA;UACvC,CAAA,KAAK,OAAM,WAAA;wBACG,IAAA;0CACK,GAAA;gBACf,UAAU,UAAA,EAAA;kBACP,CAAA,KAAA,OAAU,eACR,SAAA,KAAA,EAAA,KAAA;mBACC,MAAK,IAAA,mBAAsB,EAAA,SAAS,KAAO,KAAK;oBAChD;kBACH;YAEJ,CAAA,KAAM,MAAA,eAAA,IAAA,GAAA;eACL,IAAK;gBACH,CAAA,KAAI,OAAA,eAAA,eAAA,EAAA,IAAA,EAAA,KAAA;mBACF;YACL,KAAE;UACJ,KAAE;QACJ,CAAA,KAAE,MAAK,MAAA,QAAA,MAAA,KAAA,SAAA,GAAA;UACN,CAAA,IAAK,OAAM,MAAM;YACf,CAAA,IAAI,MAAO,MAAM,QAAA,QAAA,CAAA,KAAA,MAAA,KAAA,qBAAA,EAAA,IAAA;YAChB,IAAC;UACH,KAAE;QACJ,IAAE;MACJ"}

package/dist/Conversation.js

@@ -1,11 +1,10 @@
-/* empty css                                                                       */
 import { Avatar } from "@proyecto-viviana/solid-spectrum";
 import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, template } from "solid-js/web";
 import { For, Show } from "solid-js";
 import { Button } from "@proyecto-viviana/solidaria-components";
 //#region src/custom/conversation/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xc13 _xa13 xfd13 _xfa13 xfX0cczbc13 _xfX0cczba13 _Fd13 _FnuYUweb13 pcoywsd13 _va13">`), _tmpl$2 = /*#__PURE__*/ template(`<p class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13 _Nc13 Pc13 _Yb13 _7c13">`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" sd13 _ta13 Ua13 qa13 _ub13 Na13"><div class=" sd13 eb13 _Ce13 Ue13 qe13"><span class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xd13 _xa13 xX0cczbc13 _xX0cczba13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13"></span><!$><!/></div><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<span class=" sd13 eb13 _Ca13 _va13 Zm13 Fn13 og13 ng13 kg13 jg13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xd13 _xa13 xX0cczbc13 _xX0cczba13 _Fd13 _FnuYUweb13 pTloWE13 gj1j4Pd13">`), _tmpl$5 = /*#__PURE__*/ template(`<span>`), _tmpl$6 = /*#__PURE__*/ template(`<div><div><p></p><!$><!/>`), _tmpl$7 = /*#__PURE__*/ template(`<div>`);
-const preview = " sd13 eb13 Ug13 qg13 Za13 Te13 Qe13 Se13 Re13 oc13 nc13 kc13 jc13 _Wd13 ry13 g913 _je13";
+var _tmpl$ = /*#__PURE__*/ template(`<span class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xc151 _xa151 xfd151 _xfa151 xfX0cczbc151 _xfX0cczba151 _Fd151 _FnuYUweb151 pO550xe151 _va151">`), _tmpl$2 = /*#__PURE__*/ template(`<p class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151 _Nc151 Pc151 _Yb151 _7c151">`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" sd151 _ta151 Ua151 qa151 _ub151 Na151"><div class=" sd151 eb151 _Ce151 Ue151 qe151"><span class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xd151 _xa151 xX0cczbc151 _xX0cczba151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151"></span><!$><!/></div><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<span class=" sd151 eb151 _Ca151 _va151 Zm151 Fn151 og151 ng151 kg151 jg151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xd151 _xa151 xX0cczbc151 _xX0cczba151 _Fd151 _FnuYUweb151 padAQ7151 gj1j4Pd151">`), _tmpl$5 = /*#__PURE__*/ template(`<span>`), _tmpl$6 = /*#__PURE__*/ template(`<div><div><p></p><!$><!/>`), _tmpl$7 = /*#__PURE__*/ template(`<div>`);
+const preview = " sd151 eb151 Ug151 qg151 Za151 Te151 Qe151 Se151 Re151 oc151 nc151 kc151 jc151 _Wd151 ry151 g9151 _je151";
 function ConversationPreview(props) {
 	return createComponent(Button, {
 		type: "button",
@@ -68,55 +67,55 @@ function ConversationPreview(props) {
 }
 const bubbleRow = function anonymous(props) {
 	let rules = " ";
-	rules += " sd13";
-	if (props.isUser) rules += " _Cb13";
-	else rules += " _Cg13";
+	rules += " sd151";
+	if (props.isUser) rules += " _Cb151";
+	else rules += " _Cg151";
 	return rules;
 };
 const bubble = function anonymous(props) {
 	let rules = " ";
-	rules += " sd13";
-	rules += " _ta13";
-	rules += " Ua13";
-	rules += " qa13";
-	rules += " LbmOfn13";
-	rules += " Sf13";
-	rules += " Rf13";
-	rules += " Tt13";
-	rules += " Qt13";
-	rules += " oc13";
-	rules += " nc13";
-	rules += " kc13";
-	rules += " jc13";
-	if (props.isUser) rules += " gj1j4Pd13";
-	else rules += " gg0eWE13";
-	if (props.isUser) rules += " pTloWE13";
-	else rules += " pXDQpyb13";
+	rules += " sd151";
+	rules += " _ta151";
+	rules += " Ua151";
+	rules += " qa151";
+	rules += " LbmOfn151";
+	rules += " Sf151";
+	rules += " Rf151";
+	rules += " Tt151";
+	rules += " Qt151";
+	rules += " oc151";
+	rules += " nc151";
+	rules += " kc151";
+	rules += " jc151";
+	if (props.isUser) rules += " gj1j4Pd151";
+	else rules += " gg0eWE151";
+	if (props.isUser) rules += " padAQ7151";
+	else rules += " pXDQpyb151";
 	return rules;
 };
 const bubbleTime = function anonymous(props) {
 	let rules = " ";
-	rules += " uk13";
-	rules += " ucJ9TBTb13";
-	rules += " ud3Euai13";
-	rules += " uea13";
-	rules += " ugb13";
-	rules += " uhd13";
-	rules += " uje13";
-	rules += " u2NhKxcl13";
-	rules += " uic13";
-	rules += " -_6BNtrc-b13";
-	rules += " vx13";
-	rules += " xc13";
-	rules += " _xa13";
-	rules += " xfd13";
-	rules += " _xfa13";
-	rules += " xfX0cczbc13";
-	rules += " _xfX0cczba13";
-	rules += " _Fd13";
-	rules += " _FnuYUweb13";
-	if (props.isUser) rules += " pg0eWE13";
-	else rules += " pcoywsd13";
+	rules += " uk151";
+	rules += " ucJ9TBTb151";
+	rules += " ud3Euai151";
+	rules += " uea151";
+	rules += " ugb151";
+	rules += " uhd151";
+	rules += " uje151";
+	rules += " u2NhKxcl151";
+	rules += " uic151";
+	rules += " -_6BNtrc-b151";
+	rules += " vx151";
+	rules += " xc151";
+	rules += " _xa151";
+	rules += " xfd151";
+	rules += " _xfa151";
+	rules += " xfX0cczbc151";
+	rules += " _xfX0cczba151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	if (props.isUser) rules += " padAQ7151";
+	else rules += " pO550xe151";
 	return rules;
 };
 function ConversationBubble(props) {
@@ -147,7 +146,7 @@ function ConversationBubble(props) {
 		return _el$1;
 	})();
 }
-const thread = " sd13 _ta13 Ue13 qe13 Tf13 Qf13 Sf13 Rf13";
+const thread = " sd151 _ta151 Ue151 qe151 Tf151 Qf151 Sf151 Rf151";
 function Conversation(props) {
 	return (() => {
 		var _el$15 = getNextElement(_tmpl$7);

package/dist/Conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Conversation.js","names":[],"sources":["../src/custom/conversation/index.tsx"],"sourcesContent":["import { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A conversation preview row, message bubbles, and a thread\n// list, on the S2 spacing/radius ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface Message {\n  id: string;\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n}\n\nexport interface ConversationPreviewProps {\n  user: {\n    name: string;\n    avatar?: string;\n    online?: boolean;\n  };\n  lastMessage?: string;\n  unreadCount?: number;\n  timestamp?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst preview = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 12,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst previewBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst previewTop = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  gap: 8,\n});\n\nconst previewName = style({\n  font: \"ui\",\n  fontWeight: \"bold\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst previewTime = style({\n  font: \"detail-sm\",\n  color: \"[var(--color-text-muted)]\",\n  flexShrink: 0,\n});\n\nconst previewMessage = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst unread = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  flexShrink: 0,\n  width: 20,\n  height: 20,\n  borderRadius: \"full\",\n  font: \"detail-sm\",\n  fontWeight: \"bold\",\n  backgroundColor: \"[var(--color-accent)]\",\n  color: \"[var(--color-bg-400)]\",\n});\n\nexport function ConversationPreview(props: ConversationPreviewProps) {\n  return (\n    <HeadlessButton\n      type=\"button\"\n      class={`${preview} ${props.class ?? \"\"}`}\n      onPress={() => props.onClick?.()}\n    >\n      <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size=\"md\" />\n      <div class={previewBody}>\n        <div class={previewTop}>\n          <span class={previewName}>{props.user.name}</span>\n          <Show when={props.timestamp}>\n            <span class={previewTime}>{props.timestamp}</span>\n          </Show>\n        </div>\n        <Show when={props.lastMessage}>\n          <p class={previewMessage}>{props.lastMessage}</p>\n        </Show>\n      </div>\n      <Show when={props.unreadCount && props.unreadCount > 0}>\n        <span class={unread}>{props.unreadCount}</span>\n      </Show>\n    </HeadlessButton>\n  );\n}\n\nexport interface ConversationBubbleProps {\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n  class?: string;\n}\n\nconst bubbleRow = style<{ isUser: boolean }>({\n  display: \"flex\",\n  justifyContent: { default: \"start\", isUser: \"end\" },\n});\n\nconst bubble = style<{ isUser: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  maxWidth: \"[70%]\",\n  paddingX: 16,\n  paddingY: 8,\n  borderRadius: \"lg\",\n  backgroundColor: {\n    default: \"[var(--color-bg-300)]\",\n    isUser: \"[var(--color-accent)]\",\n  },\n  color: {\n    default: \"[var(--color-primary-100)]\",\n    isUser: \"[var(--color-bg-400)]\",\n  },\n});\n\nconst bubbleTime = style<{ isUser: boolean }>({\n  font: \"detail-sm\",\n  color: {\n    default: \"[var(--color-text-muted)]\",\n    isUser: \"[var(--color-bg-300)]\",\n  },\n});\n\nexport function ConversationBubble(props: ConversationBubbleProps) {\n  const isUser = () => props.sender === \"user\";\n\n  return (\n    <div class={`${bubbleRow({ isUser: isUser() })} ${props.class ?? \"\"}`}>\n      <div class={bubble({ isUser: isUser() })}>\n        <p>{props.content}</p>\n        <Show when={props.timestamp}>\n          <span class={bubbleTime({ isUser: isUser() })}>{props.timestamp}</span>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface ConversationProps {\n  messages: Message[];\n  class?: string;\n}\n\nconst thread = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 8,\n  padding: 16,\n});\n\nexport function Conversation(props: ConversationProps) {\n  return (\n    <div class={`${thread} ${props.class ?? \"\"}`}>\n      <For each={props.messages}>\n        {(message) => (\n          <ConversationBubble\n            content={message.content}\n            sender={message.sender}\n            timestamp={message.timestamp}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Conversation.js","names":[],"sources":["../src/custom/conversation/index.tsx"],"sourcesContent":["import { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A conversation preview row, message bubbles, and a thread\n// list, on the S2 spacing/radius ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface Message {\n  id: string;\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n}\n\nexport interface ConversationPreviewProps {\n  user: {\n    name: string;\n    avatar?: string;\n    online?: boolean;\n  };\n  lastMessage?: string;\n  unreadCount?: number;\n  timestamp?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst preview = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 12,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst previewBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst previewTop = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  gap: 8,\n});\n\nconst previewName = style({\n  font: \"ui\",\n  fontWeight: \"bold\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst previewTime = style({\n  font: \"detail-sm\",\n  // `--color-text-muted` renders ~1.7:1 light / ~2.4:1 dark on the `bg-200`\n  // panel (fails AA both modes); the flipping `--color-text` clears it. Muting\n  // is carried by the smaller `detail-sm` size, not a sub-AA color.\n  color: \"[var(--color-text)]\",\n  flexShrink: 0,\n});\n\nconst previewMessage = style({\n  font: \"ui-sm\",\n  // `--color-text-secondary` renders 3.84:1 on the light `bg-200` panel (fails\n  // the 4.5 small-text floor); the flipping `--color-text` clears both themes.\n  color: \"[var(--color-text)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst unread = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  flexShrink: 0,\n  width: 20,\n  height: 20,\n  borderRadius: \"full\",\n  font: \"detail-sm\",\n  fontWeight: \"bold\",\n  backgroundColor: \"[var(--color-accent)]\",\n  // Text on the non-flipping pink `--color-accent` fill: the near-white\n  // `--color-bg-400` gives only 2.74:1 in light mode (fail). `--color-grey-900`\n  // (the darkest token) reaches ~5.2:1 light / ~6.1:1 dark — the Chip accent-fill\n  // resolution.\n  color: \"[var(--color-grey-900)]\",\n});\n\nexport function ConversationPreview(props: ConversationPreviewProps) {\n  return (\n    <HeadlessButton\n      type=\"button\"\n      class={`${preview} ${props.class ?? \"\"}`}\n      onPress={() => props.onClick?.()}\n    >\n      <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size=\"md\" />\n      <div class={previewBody}>\n        <div class={previewTop}>\n          <span class={previewName}>{props.user.name}</span>\n          <Show when={props.timestamp}>\n            <span class={previewTime}>{props.timestamp}</span>\n          </Show>\n        </div>\n        <Show when={props.lastMessage}>\n          <p class={previewMessage}>{props.lastMessage}</p>\n        </Show>\n      </div>\n      <Show when={props.unreadCount && props.unreadCount > 0}>\n        <span class={unread}>{props.unreadCount}</span>\n      </Show>\n    </HeadlessButton>\n  );\n}\n\nexport interface ConversationBubbleProps {\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n  class?: string;\n}\n\nconst bubbleRow = style<{ isUser: boolean }>({\n  display: \"flex\",\n  justifyContent: { default: \"start\", isUser: \"end\" },\n});\n\nconst bubble = style<{ isUser: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  maxWidth: \"[70%]\",\n  paddingX: 16,\n  paddingY: 8,\n  borderRadius: \"lg\",\n  backgroundColor: {\n    default: \"[var(--color-bg-300)]\",\n    isUser: \"[var(--color-accent)]\",\n  },\n  color: {\n    // `other` bubble: `--color-primary-100` on the neutral `bg-300` fill (AA both\n    // themes). `user` bubble text on the pink `--color-accent` fill: the near-white\n    // `--color-bg-400` gives only 2.74:1 light (fail) → `--color-grey-900` (~5.2:1\n    // light / ~6.1:1 dark), the Chip accent-fill resolution.\n    default: \"[var(--color-primary-100)]\",\n    isUser: \"[var(--color-grey-900)]\",\n  },\n});\n\nconst bubbleTime = style<{ isUser: boolean }>({\n  font: \"detail-sm\",\n  color: {\n    // `other` timestamp on `bg-300`: `--color-text-muted` fails AA both modes\n    // (~2.2:1 light / ~2.8:1 dark) → the flipping `--color-text`. `user` timestamp\n    // on the `--color-accent` fill: `--color-bg-300` gives 2.42:1 light (fail) →\n    // `--color-grey-900` (matching the bubble body).\n    default: \"[var(--color-text)]\",\n    isUser: \"[var(--color-grey-900)]\",\n  },\n});\n\nexport function ConversationBubble(props: ConversationBubbleProps) {\n  const isUser = () => props.sender === \"user\";\n\n  return (\n    <div class={`${bubbleRow({ isUser: isUser() })} ${props.class ?? \"\"}`}>\n      <div class={bubble({ isUser: isUser() })}>\n        <p>{props.content}</p>\n        <Show when={props.timestamp}>\n          <span class={bubbleTime({ isUser: isUser() })}>{props.timestamp}</span>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface ConversationProps {\n  messages: Message[];\n  class?: string;\n}\n\nconst thread = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 8,\n  padding: 16,\n});\n\nexport function Conversation(props: ConversationProps) {\n  return (\n    <div class={`${thread} ${props.class ?? \"\"}`}>\n      <For each={props.messages}>\n        {(message) => (\n          <ConversationBubble\n            content={message.content}\n            sender={message.sender}\n            timestamp={message.timestamp}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/Conversation.jsx

@@ -1,15 +1,14 @@
-/* empty css                                                                        */
 import { Avatar } from "@proyecto-viviana/solid-spectrum";
 import { For, Show } from "solid-js";
 import { Button } from "@proyecto-viviana/solidaria-components";
 //#region src/custom/conversation/index.tsx
-const preview = " sd13 eb13 Ug13 qg13 Za13 Te13 Qe13 Se13 Re13 oc13 nc13 kc13 jc13 _Wd13 ry13 g913 _je13";
-const previewBody = " sd13 _ta13 Ua13 qa13 _ub13 Na13";
-const previewTop = " sd13 eb13 _Ce13 Ue13 qe13";
-const previewName = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xd13 _xa13 xX0cczbc13 _xX0cczba13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13";
-const previewTime = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xc13 _xa13 xfd13 _xfa13 xfX0cczbc13 _xfX0cczba13 _Fd13 _FnuYUweb13 pcoywsd13 _va13";
-const previewMessage = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13 _Nc13 Pc13 _Yb13 _7c13";
-const unread = " sd13 eb13 _Ca13 _va13 Zm13 Fn13 og13 ng13 kg13 jg13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xd13 _xa13 xX0cczbc13 _xX0cczba13 _Fd13 _FnuYUweb13 pTloWE13 gj1j4Pd13";
+const preview = " sd151 eb151 Ug151 qg151 Za151 Te151 Qe151 Se151 Re151 oc151 nc151 kc151 jc151 _Wd151 ry151 g9151 _je151";
+const previewBody = " sd151 _ta151 Ua151 qa151 _ub151 Na151";
+const previewTop = " sd151 eb151 _Ce151 Ue151 qe151";
+const previewName = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xd151 _xa151 xX0cczbc151 _xX0cczba151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151";
+const previewTime = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xc151 _xa151 xfd151 _xfa151 xfX0cczbc151 _xfX0cczba151 _Fd151 _FnuYUweb151 pO550xe151 _va151";
+const previewMessage = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151 _Nc151 Pc151 _Yb151 _7c151";
+const unread = " sd151 eb151 _Ca151 _va151 Zm151 Fn151 og151 ng151 kg151 jg151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xd151 _xa151 xX0cczbc151 _xX0cczba151 _Fd151 _FnuYUweb151 padAQ7151 gj1j4Pd151";
 function ConversationPreview(props) {
 	return <Button type="button" class={`${preview} ${props.class ?? ""}`} onPress={() => props.onClick?.()}>
       <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size="md" />
@@ -31,55 +30,55 @@ function ConversationPreview(props) {
 }
 const bubbleRow = function anonymous(props) {
 	let rules = " ";
-	rules += " sd13";
-	if (props.isUser) rules += " _Cb13";
-	else rules += " _Cg13";
+	rules += " sd151";
+	if (props.isUser) rules += " _Cb151";
+	else rules += " _Cg151";
 	return rules;
 };
 const bubble = function anonymous(props) {
 	let rules = " ";
-	rules += " sd13";
-	rules += " _ta13";
-	rules += " Ua13";
-	rules += " qa13";
-	rules += " LbmOfn13";
-	rules += " Sf13";
-	rules += " Rf13";
-	rules += " Tt13";
-	rules += " Qt13";
-	rules += " oc13";
-	rules += " nc13";
-	rules += " kc13";
-	rules += " jc13";
-	if (props.isUser) rules += " gj1j4Pd13";
-	else rules += " gg0eWE13";
-	if (props.isUser) rules += " pTloWE13";
-	else rules += " pXDQpyb13";
+	rules += " sd151";
+	rules += " _ta151";
+	rules += " Ua151";
+	rules += " qa151";
+	rules += " LbmOfn151";
+	rules += " Sf151";
+	rules += " Rf151";
+	rules += " Tt151";
+	rules += " Qt151";
+	rules += " oc151";
+	rules += " nc151";
+	rules += " kc151";
+	rules += " jc151";
+	if (props.isUser) rules += " gj1j4Pd151";
+	else rules += " gg0eWE151";
+	if (props.isUser) rules += " padAQ7151";
+	else rules += " pXDQpyb151";
 	return rules;
 };
 const bubbleTime = function anonymous(props) {
 	let rules = " ";
-	rules += " uk13";
-	rules += " ucJ9TBTb13";
-	rules += " ud3Euai13";
-	rules += " uea13";
-	rules += " ugb13";
-	rules += " uhd13";
-	rules += " uje13";
-	rules += " u2NhKxcl13";
-	rules += " uic13";
-	rules += " -_6BNtrc-b13";
-	rules += " vx13";
-	rules += " xc13";
-	rules += " _xa13";
-	rules += " xfd13";
-	rules += " _xfa13";
-	rules += " xfX0cczbc13";
-	rules += " _xfX0cczba13";
-	rules += " _Fd13";
-	rules += " _FnuYUweb13";
-	if (props.isUser) rules += " pg0eWE13";
-	else rules += " pcoywsd13";
+	rules += " uk151";
+	rules += " ucJ9TBTb151";
+	rules += " ud3Euai151";
+	rules += " uea151";
+	rules += " ugb151";
+	rules += " uhd151";
+	rules += " uje151";
+	rules += " u2NhKxcl151";
+	rules += " uic151";
+	rules += " -_6BNtrc-b151";
+	rules += " vx151";
+	rules += " xc151";
+	rules += " _xa151";
+	rules += " xfd151";
+	rules += " _xfa151";
+	rules += " xfX0cczbc151";
+	rules += " _xfX0cczba151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	if (props.isUser) rules += " padAQ7151";
+	else rules += " pO550xe151";
 	return rules;
 };
 function ConversationBubble(props) {
@@ -93,7 +92,7 @@ function ConversationBubble(props) {
       </div>
     </div>;
 }
-const thread = " sd13 _ta13 Ue13 qe13 Tf13 Qf13 Sf13 Rf13";
+const thread = " sd151 _ta151 Ue151 qe151 Tf151 Qf151 Sf151 Rf151";
 function Conversation(props) {
 	return <div class={`${thread} ${props.class ?? ""}`}>
       <For each={props.messages}>

package/dist/Conversation.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Conversation.jsx","names":[],"sources":["../src/custom/conversation/index.tsx"],"sourcesContent":["import { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A conversation preview row, message bubbles, and a thread\n// list, on the S2 spacing/radius ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface Message {\n  id: string;\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n}\n\nexport interface ConversationPreviewProps {\n  user: {\n    name: string;\n    avatar?: string;\n    online?: boolean;\n  };\n  lastMessage?: string;\n  unreadCount?: number;\n  timestamp?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst preview = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 12,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst previewBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst previewTop = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  gap: 8,\n});\n\nconst previewName = style({\n  font: \"ui\",\n  fontWeight: \"bold\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst previewTime = style({\n  font: \"detail-sm\",\n  color: \"[var(--color-text-muted)]\",\n  flexShrink: 0,\n});\n\nconst previewMessage = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst unread = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  flexShrink: 0,\n  width: 20,\n  height: 20,\n  borderRadius: \"full\",\n  font: \"detail-sm\",\n  fontWeight: \"bold\",\n  backgroundColor: \"[var(--color-accent)]\",\n  color: \"[var(--color-bg-400)]\",\n});\n\nexport function ConversationPreview(props: ConversationPreviewProps) {\n  return (\n    <HeadlessButton\n      type=\"button\"\n      class={`${preview} ${props.class ?? \"\"}`}\n      onPress={() => props.onClick?.()}\n    >\n      <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size=\"md\" />\n      <div class={previewBody}>\n        <div class={previewTop}>\n          <span class={previewName}>{props.user.name}</span>\n          <Show when={props.timestamp}>\n            <span class={previewTime}>{props.timestamp}</span>\n          </Show>\n        </div>\n        <Show when={props.lastMessage}>\n          <p class={previewMessage}>{props.lastMessage}</p>\n        </Show>\n      </div>\n      <Show when={props.unreadCount && props.unreadCount > 0}>\n        <span class={unread}>{props.unreadCount}</span>\n      </Show>\n    </HeadlessButton>\n  );\n}\n\nexport interface ConversationBubbleProps {\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n  class?: string;\n}\n\nconst bubbleRow = style<{ isUser: boolean }>({\n  display: \"flex\",\n  justifyContent: { default: \"start\", isUser: \"end\" },\n});\n\nconst bubble = style<{ isUser: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  maxWidth: \"[70%]\",\n  paddingX: 16,\n  paddingY: 8,\n  borderRadius: \"lg\",\n  backgroundColor: {\n    default: \"[var(--color-bg-300)]\",\n    isUser: \"[var(--color-accent)]\",\n  },\n  color: {\n    default: \"[var(--color-primary-100)]\",\n    isUser: \"[var(--color-bg-400)]\",\n  },\n});\n\nconst bubbleTime = style<{ isUser: boolean }>({\n  font: \"detail-sm\",\n  color: {\n    default: \"[var(--color-text-muted)]\",\n    isUser: \"[var(--color-bg-300)]\",\n  },\n});\n\nexport function ConversationBubble(props: ConversationBubbleProps) {\n  const isUser = () => props.sender === \"user\";\n\n  return (\n    <div class={`${bubbleRow({ isUser: isUser() })} ${props.class ?? \"\"}`}>\n      <div class={bubble({ isUser: isUser() })}>\n        <p>{props.content}</p>\n        <Show when={props.timestamp}>\n          <span class={bubbleTime({ isUser: isUser() })}>{props.timestamp}</span>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface ConversationProps {\n  messages: Message[];\n  class?: string;\n}\n\nconst thread = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 8,\n  padding: 16,\n});\n\nexport function Conversation(props: ConversationProps) {\n  return (\n    <div class={`${thread} ${props.class ?? \"\"}`}>\n      <For each={props.messages}>\n        {(message) => (\n          <ConversationBubble\n            content={message.content}\n            sender={message.sender}\n            timestamp={message.timestamp}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AA4BA,MAAM,cAAA;AAaN,MAAM,cAAA;AAQN,MAAM,iBAAA;AAON,MAAM,SAAA;AASN,SAAM,oBAAA,OAAA;CAMN,OAAM,CAAA,OAAA,cAAA,OAAA,GAAA,QAAA,GAAA,MAAA,SAAA,MAAA,eAAA,MAAA,UAAA,GAAA;MAQA,CAAA,OAAA,KAAA,MAAA,KAAA,QAAA,KAAA,MAAA,KAAA,MAAA,QAAA,MAAA,KAAA,QAAA,YAAA;MAcN,CAAA,IAAgB,OAAA,aAAoB;QAC3B,CACJ,IAAA,OACC,YACA;UAGC,CAAA,KAAO,OAAK,cAAW,MAAa,KAAA,KAAM,EAAK,KAAM;UACrD,CAAI,KAAA,MAAO,MAAA,WAAa;YACtB,CAAI,KAAA,OAAO,cAAY,MAAA,UAAA,EAAA,KAAA;UACtB,EAAC,KAAK;UACN,IAAC;cACE,MAAK,MAAO,aAAc;UAC7B,CAAA,EAAE,OAAK,iBAAA,MAAA,YAAA,EAAA,EAAA;QACT,EAAE,KAAI;QACN,IAAC;YACE,MAAE,MAAO,eAAiB,MAAM,cAAgB,GAAA;QACnD,CAAA,KAAE,OAAK,SAAA,MAAA,YAAA,EAAA,KAAA;MACT,EAAE,KAAI;MACN;;MAEA,YAAO,SAAA,UAAA,OAAA;KACT,QAAE;CAEN,SAAA;CASA,IAAA,MAAM,QAAA,SAAA;;;;;;;CAKN,SAAM;;;;;;;;;;;;;;;;;;;;;CAkBN,SAAM;;;;;;;;;;;;;;;;;;;;;;;;;MAQN,CAAA,IAAgB,OAAA,OAAA,EAAA,QAAiD,OAAA,EAAA,CAAA,GAAA;QACzD,CAAA,GAAA,MAAA,QAAe,EAAM,EAAA;QAEpB,CACJ,KAAI,MAAO,MAAG,WAAY;UACxB,CAAI,KAAA,OAAO,WAAS,EAAQ,QAAS,OAAI,EAAA,CAAA,IAAA,MAAA,UAAA,EAAA,KAAA;QACxC,EAAC,KAAG;QACJ,IAAC;;;MAGH,SAAM;SACN,aAAA,OAAA;CAEN,OAAA,CAAA,IAAA,OAAA,GAAA,OAAA,GAAA,MAAA,SAAA,MAAA;MAOM,CAAA,IAAA,MAAA,MAAA,UAAA;UAOU,YAAa,CAAA,mBAAwB,SAAA,QAAA,SAAA,QAAA,QAAA,QAAA,WAAA,QAAA,cAAA;MACnD,EAAO,IACJ;MACC;;;AAWN,SAAA,cAAA,oBAAA"}
+{"version":3,"file":"Conversation.jsx","names":[],"sources":["../src/custom/conversation/index.tsx"],"sourcesContent":["import { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A conversation preview row, message bubbles, and a thread\n// list, on the S2 spacing/radius ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface Message {\n  id: string;\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n}\n\nexport interface ConversationPreviewProps {\n  user: {\n    name: string;\n    avatar?: string;\n    online?: boolean;\n  };\n  lastMessage?: string;\n  unreadCount?: number;\n  timestamp?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst preview = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 12,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst previewBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst previewTop = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  gap: 8,\n});\n\nconst previewName = style({\n  font: \"ui\",\n  fontWeight: \"bold\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst previewTime = style({\n  font: \"detail-sm\",\n  // `--color-text-muted` renders ~1.7:1 light / ~2.4:1 dark on the `bg-200`\n  // panel (fails AA both modes); the flipping `--color-text` clears it. Muting\n  // is carried by the smaller `detail-sm` size, not a sub-AA color.\n  color: \"[var(--color-text)]\",\n  flexShrink: 0,\n});\n\nconst previewMessage = style({\n  font: \"ui-sm\",\n  // `--color-text-secondary` renders 3.84:1 on the light `bg-200` panel (fails\n  // the 4.5 small-text floor); the flipping `--color-text` clears both themes.\n  color: \"[var(--color-text)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst unread = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  flexShrink: 0,\n  width: 20,\n  height: 20,\n  borderRadius: \"full\",\n  font: \"detail-sm\",\n  fontWeight: \"bold\",\n  backgroundColor: \"[var(--color-accent)]\",\n  // Text on the non-flipping pink `--color-accent` fill: the near-white\n  // `--color-bg-400` gives only 2.74:1 in light mode (fail). `--color-grey-900`\n  // (the darkest token) reaches ~5.2:1 light / ~6.1:1 dark — the Chip accent-fill\n  // resolution.\n  color: \"[var(--color-grey-900)]\",\n});\n\nexport function ConversationPreview(props: ConversationPreviewProps) {\n  return (\n    <HeadlessButton\n      type=\"button\"\n      class={`${preview} ${props.class ?? \"\"}`}\n      onPress={() => props.onClick?.()}\n    >\n      <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size=\"md\" />\n      <div class={previewBody}>\n        <div class={previewTop}>\n          <span class={previewName}>{props.user.name}</span>\n          <Show when={props.timestamp}>\n            <span class={previewTime}>{props.timestamp}</span>\n          </Show>\n        </div>\n        <Show when={props.lastMessage}>\n          <p class={previewMessage}>{props.lastMessage}</p>\n        </Show>\n      </div>\n      <Show when={props.unreadCount && props.unreadCount > 0}>\n        <span class={unread}>{props.unreadCount}</span>\n      </Show>\n    </HeadlessButton>\n  );\n}\n\nexport interface ConversationBubbleProps {\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n  class?: string;\n}\n\nconst bubbleRow = style<{ isUser: boolean }>({\n  display: \"flex\",\n  justifyContent: { default: \"start\", isUser: \"end\" },\n});\n\nconst bubble = style<{ isUser: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  maxWidth: \"[70%]\",\n  paddingX: 16,\n  paddingY: 8,\n  borderRadius: \"lg\",\n  backgroundColor: {\n    default: \"[var(--color-bg-300)]\",\n    isUser: \"[var(--color-accent)]\",\n  },\n  color: {\n    // `other` bubble: `--color-primary-100` on the neutral `bg-300` fill (AA both\n    // themes). `user` bubble text on the pink `--color-accent` fill: the near-white\n    // `--color-bg-400` gives only 2.74:1 light (fail) → `--color-grey-900` (~5.2:1\n    // light / ~6.1:1 dark), the Chip accent-fill resolution.\n    default: \"[var(--color-primary-100)]\",\n    isUser: \"[var(--color-grey-900)]\",\n  },\n});\n\nconst bubbleTime = style<{ isUser: boolean }>({\n  font: \"detail-sm\",\n  color: {\n    // `other` timestamp on `bg-300`: `--color-text-muted` fails AA both modes\n    // (~2.2:1 light / ~2.8:1 dark) → the flipping `--color-text`. `user` timestamp\n    // on the `--color-accent` fill: `--color-bg-300` gives 2.42:1 light (fail) →\n    // `--color-grey-900` (matching the bubble body).\n    default: \"[var(--color-text)]\",\n    isUser: \"[var(--color-grey-900)]\",\n  },\n});\n\nexport function ConversationBubble(props: ConversationBubbleProps) {\n  const isUser = () => props.sender === \"user\";\n\n  return (\n    <div class={`${bubbleRow({ isUser: isUser() })} ${props.class ?? \"\"}`}>\n      <div class={bubble({ isUser: isUser() })}>\n        <p>{props.content}</p>\n        <Show when={props.timestamp}>\n          <span class={bubbleTime({ isUser: isUser() })}>{props.timestamp}</span>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface ConversationProps {\n  messages: Message[];\n  class?: string;\n}\n\nconst thread = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 8,\n  padding: 16,\n});\n\nexport function Conversation(props: ConversationProps) {\n  return (\n    <div class={`${thread} ${props.class ?? \"\"}`}>\n      <For each={props.messages}>\n        {(message) => (\n          <ConversationBubble\n            content={message.content}\n            sender={message.sender}\n            timestamp={message.timestamp}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n"],"mappings":";;;;AA4BA,MAAM,UAAA;AAaN,MAAM,cAAA;AAQN,MAAM,aAAA;AAON,MAAM,cAAA;AASN,MAAM,cAAA;AASN,MAAM,iBAAA;AAUN,MAAM,SAAA;AAkBN,SAAgB,oBAAoB,OAA+B;CACjE,OAAO,CACJ,OACC,cACA,OAAO,GAAG,QAAQ,GAAG,MAAM,SAAS,MACpC,eAAe,MAAM,UAAO,GAC7B;MACC,CAAC,OAAO,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM,KAAK,MAAM,QAAQ,MAAM,KAAK,QAAQ,YAAY;MAC7F,CAAC,IAAI,OAAO,aAAa;QACvB,CAAC,IAAI,OAAO,YAAY;UACtB,CAAC,KAAK,OAAO,cAAc,MAAM,KAAK,KAAI,EAAG,KAAK;UAClD,CAAC,KAAK,MAAM,MAAM,WAAW;YAC3B,CAAC,KAAK,OAAO,cAAc,MAAM,UAAS,EAAG,KAAK;UACpD,EAAE,KAAK;QACT,EAAE,IAAI;QACN,CAAC,KAAK,MAAM,MAAM,aAAa;UAC7B,CAAC,EAAE,OAAO,iBAAiB,MAAM,YAAW,EAAG,EAAE;QACnD,EAAE,KAAK;MACT,EAAE,IAAI;MACN,CAAC,KAAK,MAAM,MAAM,eAAe,MAAM,cAAc,GAAG;QACtD,CAAC,KAAK,OAAO,SAAS,MAAM,YAAW,EAAG,KAAK;MACjD,EAAE,KAAK;IACT,EAAE;AAEN;AASA,MAAM,YAAA,SAAA,UAAA,OAAA;;;;;;;AAKN,MAAM,SAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;AAsBN,MAAM,aAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,SAAgB,mBAAmB,OAA8B;CAC/D,MAAM,eAAe,MAAM,WAAW;CAEtC,OAAO,CACJ,IAAI,OAAO,GAAG,UAAU,EAAE,QAAQ,OAAA,EAAS,CAAA,EAAG,GAAG,MAAM,SAAS,MAAM;MACrE,CAAC,IAAI,OAAO,OAAO,EAAE,QAAQ,OAAA,EAAS,CAAA,GAAI;QACxC,CAAC,GAAG,MAAM,QAAO,EAAG,EAAE;QACtB,CAAC,KAAK,MAAM,MAAM,WAAW;UAC3B,CAAC,KAAK,OAAO,WAAW,EAAE,QAAQ,OAAA,EAAS,CAAA,IAAK,MAAM,UAAS,EAAG,KAAK;QACzE,EAAE,KAAK;MACT,EAAE,IAAI;IACR,EAAE;AAEN;AAOA,MAAM,SAAA;AAON,SAAgB,aAAa,OAAwB;CACnD,OAAO,CACJ,IAAI,OAAO,GAAG,OAAO,GAAG,MAAM,SAAS,MAAM;MAC5C,CAAC,IAAI,MAAM,MAAM,UAAU;UACvB,YAAY,CACX,mBACC,SAAS,QAAQ,SACjB,QAAQ,QAAQ,QAChB,WAAW,QAAQ,cAErB;MACJ,EAAE,IAAI;IACR,EAAE;AAEN"}

package/dist/EventCard.js

@@ -1,13 +1,11 @@
 /* empty css                                                                       */
-/* empty css                                                                       */
-/* empty css                                                                       */
 import { Avatar } from "@proyecto-viviana/solid-spectrum";
 import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, setAttribute, template } from "solid-js/web";
 import { For, Show } from "solid-js";
 import { Button } from "@proyecto-viviana/solidaria-components";
 //#region src/custom/event-card/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<img class=" _Pa13 WJ13 _zI13 ZC13 Fx13 _Ha13"alt>`), _tmpl$2 = /*#__PURE__*/ template(`<img class=" Za13 fu4qurc13 _Hb13">`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" sd13 eb13 Ub13 qb13"><span class=" pj1j4Pd13">@</span><span>`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd13 eb13 Ub13 qb13"><span class=" pj1j4Pd13">⏱</span><span>`), _tmpl$5 = /*#__PURE__*/ template(`<div class=" sd13 eb13 Ul13 ql13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13"><!$><!/><!$><!/>`), _tmpl$6 = /*#__PURE__*/ template(`<span class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13">+<!$><!/> más`), _tmpl$7 = /*#__PURE__*/ template(`<div class=" sd13 eb13 Ue13 qe13"><div class=" sd13 eb13 Ub13 qb13"></div><!$><!/>`), _tmpl$8 = /*#__PURE__*/ template(`<div class=" sd13 Ue13 qe13">`), _tmpl$9 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><div class=" sd13 _ta13 Ug13 qg13 Tf13 Qf13 Sf13 Rf13"><h3 class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-g13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 pj1j4Pd13"></h3><!$><!/><!$><!/><!$><!/>`), _tmpl$0 = /*#__PURE__*/ template(`<img class=" ZF13 Fz13 _va13 ob13 nb13 kb13 jb13 _Hb13">`), _tmpl$1 = /*#__PURE__*/ template(`<p class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13 _Nc13 Pc13 _Yb13 _7c13">`), _tmpl$10 = /*#__PURE__*/ template(`<div class=" sd13 _ta13 _ub13 Na13"><h4 class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xc13 _xa13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13"></h4><!$><!/>`);
-const card = " _Pc13 sd13 _ta13 _Nc13 Pc13 oe13 ne13 ke13 je13 gDE5VE13 _nLeasBb13";
+var _tmpl$ = /*#__PURE__*/ template(`<img class=" _Pa151 WJ151 _zI151 ZC151 Fx151 _Ha151"alt>`), _tmpl$2 = /*#__PURE__*/ template(`<img class=" Za151 fu4qurc151 _Hb151">`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" sd151 eb151 Ub151 qb151"><span class=" pO550xe151">@</span><span>`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd151 eb151 Ub151 qb151"><span class=" pO550xe151">⏱</span><span>`), _tmpl$5 = /*#__PURE__*/ template(`<div class=" sd151 eb151 Ul151 ql151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151"><!$><!/><!$><!/>`), _tmpl$6 = /*#__PURE__*/ template(`<span class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151">+<!$><!/> más`), _tmpl$7 = /*#__PURE__*/ template(`<div class=" sd151 eb151 Ue151 qe151"><div class=" sd151 eb151 Ub151 qb151"></div><!$><!/>`), _tmpl$8 = /*#__PURE__*/ template(`<div class=" sd151 Ue151 qe151">`), _tmpl$9 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><div class=" sd151 _ta151 Ug151 qg151 Tf151 Qf151 Sf151 Rf151"><h3 class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-g151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pH0v9Fe151"></h3><!$><!/><!$><!/><!$><!/>`), _tmpl$0 = /*#__PURE__*/ template(`<img class=" ZF151 Fz151 _va151 ob151 nb151 kb151 jb151 _Hb151">`), _tmpl$1 = /*#__PURE__*/ template(`<p class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pxeCuqc151 _Nc151 Pc151 _Yb151 _7c151">`), _tmpl$10 = /*#__PURE__*/ template(`<div class=" sd151 _ta151 _ub151 Na151"><h4 class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xc151 _xa151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151"></h4><!$><!/>`);
+const card = " _Pc151 sd151 _ta151 _Nc151 Pc151 oe151 ne151 ke151 je151 gDE5VE151 _nLeasBb151";
 function EventCard(props) {
 	const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
 	const remainingCount = () => {
@@ -124,7 +122,7 @@ function EventCard(props) {
 		return _el$;
 	})();
 }
-const listItem = " sd13 eb13 Ug13 qg13 Za13 Tt13 Qt13 St13 Rt13 oc13 nc13 kc13 jc13 _Wd13 ry13 g913 _je13";
+const listItem = " sd151 eb151 Ug151 qg151 Za151 Tt151 Qt151 St151 Rt151 oc151 nc151 kc151 jc151 _Wd151 ry151 g9151 _je151";
 function EventListItem(props) {
 	return createComponent(Button, {
 		get ["class"]() {

package/dist/EventCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventCard.js","names":[],"sources":["../src/custom/event-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). An event summary card (S2 Card shape: preview + content +\n// footer) plus a compact list-item variant, on the S2 ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface EventCardProps {\n  title: string;\n  image?: string;\n  date?: string;\n  author?: string;\n  authorAvatar?: string;\n  attendees?: { avatar?: string; name: string }[];\n  attendeeCount?: number;\n  decorationImage?: string;\n  /**\n   * Actions to display below the event.\n   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`\n   */\n  actions?: JSX.Element | (() => JSX.Element);\n  class?: string;\n}\n\nconst card = style({\n  position: \"relative\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  overflow: \"hidden\",\n  borderRadius: \"xl\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n  boxShadow: \"elevated\",\n});\n\nconst decoration = style({\n  position: \"absolute\",\n  top: 8,\n  insetEnd: 8,\n  width: 32,\n  height: 32,\n  objectFit: \"contain\",\n});\n\nconst preview = style({\n  width: \"full\",\n  aspectRatio: \"16/9\",\n  objectFit: \"cover\",\n});\n\nconst body = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 12,\n  padding: 16,\n});\n\nconst title = style({\n  font: \"heading\",\n  color: \"[var(--color-accent)]\",\n});\n\nconst meta = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 16,\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst metaItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst metaIcon = style({\n  color: \"[var(--color-accent)]\",\n});\n\nconst attendeesRow = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n});\n\nconst avatars = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst more = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst actionRow = style({\n  display: \"flex\",\n  gap: 8,\n});\n\nexport function EventCard(props: EventCardProps) {\n  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];\n  const remainingCount = () => {\n    const total = props.attendeeCount ?? props.attendees?.length ?? 0;\n    const displayed = displayedAttendees().length;\n    return total - displayed;\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <Show when={props.decorationImage}>\n        <img class={decoration} src={props.decorationImage} alt=\"\" />\n      </Show>\n\n      <Show when={props.image}>\n        <img class={preview} src={props.image} alt={props.title} />\n      </Show>\n\n      <div class={body}>\n        <h3 class={title}>{props.title}</h3>\n\n        <Show when={props.date || props.author}>\n          <div class={meta}>\n            <Show when={props.author}>\n              <div class={metaItem}>\n                <span class={metaIcon}>@</span>\n                <span>{props.author}</span>\n              </div>\n            </Show>\n            <Show when={props.date}>\n              <div class={metaItem}>\n                <span class={metaIcon}>⏱</span>\n                <span>{props.date}</span>\n              </div>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={displayedAttendees().length > 0}>\n          <div class={attendeesRow}>\n            <div class={avatars}>\n              <For each={displayedAttendees()}>\n                {(attendee) => <Avatar src={attendee.avatar} alt={attendee.name} size=\"sm\" />}\n              </For>\n            </div>\n            <Show when={remainingCount() > 0}>\n              <span class={more}>+{remainingCount()} más</span>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={props.actions}>\n          <div class={actionRow}>\n            {typeof props.actions === \"function\" ? props.actions() : props.actions}\n          </div>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface EventListItemProps {\n  title: string;\n  image?: string;\n  subtitle?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst listItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 8,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst thumb = style({\n  width: 48,\n  height: 48,\n  flexShrink: 0,\n  borderRadius: \"default\",\n  objectFit: \"cover\",\n});\n\nconst listBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst listTitle = style({\n  font: \"ui\",\n  fontWeight: \"medium\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst listSubtitle = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nexport function EventListItem(props: EventListItemProps) {\n  return (\n    <HeadlessButton class={`${listItem} ${props.class ?? \"\"}`} onPress={() => props.onClick?.()}>\n      <Show when={props.image}>\n        <img class={thumb} src={props.image} alt={props.title} />\n      </Show>\n      <div class={listBody}>\n        <h4 class={listTitle}>{props.title}</h4>\n        <Show when={props.subtitle}>\n          <p class={listSubtitle}>{props.subtitle}</p>\n        </Show>\n      </div>\n    </HeadlessButton>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"EventCard.js","names":[],"sources":["../src/custom/event-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). An event summary card (S2 Card shape: preview + content +\n// footer) plus a compact list-item variant, on the S2 ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface EventCardProps {\n  title: string;\n  image?: string;\n  date?: string;\n  author?: string;\n  authorAvatar?: string;\n  attendees?: { avatar?: string; name: string }[];\n  attendeeCount?: number;\n  decorationImage?: string;\n  /**\n   * Actions to display below the event.\n   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`\n   */\n  actions?: JSX.Element | (() => JSX.Element);\n  class?: string;\n}\n\nconst card = style({\n  position: \"relative\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  overflow: \"hidden\",\n  borderRadius: \"xl\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n  boxShadow: \"elevated\",\n});\n\nconst decoration = style({\n  position: \"absolute\",\n  top: 8,\n  insetEnd: 8,\n  width: 32,\n  height: 32,\n  objectFit: \"contain\",\n});\n\nconst preview = style({\n  width: \"full\",\n  aspectRatio: \"16/9\",\n  objectFit: \"cover\",\n});\n\nconst body = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 12,\n  padding: 16,\n});\n\nconst title = style({\n  font: \"heading\",\n  // WCAG AA fix: the title sits on the `--color-bg-200` card. `--color-accent`\n  // (#df5c9a) is a fixed pink in BOTH themes, so it does not flip against a card\n  // that is dark-grey in dark mode and light-blue in light mode — it read 4.48:1\n  // dark / 1.89:1 light. `font: heading` renders 22px / weight 800, which is WCAG\n  // large text via the BOLD path (≥18.66px && ≥700), NOT because it is ≥24px — so\n  // the 3:1 large-text floor applies. `--color-accent-500` is the smallest ramp\n  // step that flips with the theme (bright pink dark / deep magenta light) AND\n  // clears 3:1 both ways (3.87:1 dark / 4.91:1 light), keeping the brand accent.\n  color: \"[var(--color-accent-500)]\",\n});\n\nconst meta = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 16,\n  font: \"ui-sm\",\n  // WCAG AA fix: the meta text is small (`ui-sm`), so the 4.5:1 normal-text\n  // floor applies. `--color-text-secondary` read only 3.84:1 on the light\n  // `--color-bg-200` card; `--color-text` flips and clears 4.5:1 both ways\n  // (15.33:1 dark / 7.53:1 light). Secondary de-emphasis rides on the smaller\n  // `ui-sm` size rather than a sub-AA color.\n  color: \"[var(--color-text)]\",\n});\n\nconst metaItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst metaIcon = style({\n  // WCAG AA fix: the meta glyphs (@ / ⏱) are small (inherit `ui-sm`), so the\n  // 4.5:1 floor applies. `--color-accent` fails on the card (4.48:1 dark /\n  // 1.89:1 light) and no pink ramp step clears 4.5:1 on both the dark-grey and\n  // light-blue card, so the glyphs take the flipping `--color-text` like the\n  // meta text they prefix.\n  color: \"[var(--color-text)]\",\n});\n\nconst attendeesRow = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n});\n\nconst avatars = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst more = style({\n  font: \"ui-sm\",\n  // WCAG AA fix: the \"+N más\" overflow count is small text on the same\n  // `--color-bg-200` card as the meta, so it shares the same 3.84:1-light\n  // failure and the same `--color-text` fix.\n  color: \"[var(--color-text)]\",\n});\n\nconst actionRow = style({\n  display: \"flex\",\n  gap: 8,\n});\n\nexport function EventCard(props: EventCardProps) {\n  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];\n  const remainingCount = () => {\n    const total = props.attendeeCount ?? props.attendees?.length ?? 0;\n    const displayed = displayedAttendees().length;\n    return total - displayed;\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <Show when={props.decorationImage}>\n        <img class={decoration} src={props.decorationImage} alt=\"\" />\n      </Show>\n\n      <Show when={props.image}>\n        <img class={preview} src={props.image} alt={props.title} />\n      </Show>\n\n      <div class={body}>\n        <h3 class={title}>{props.title}</h3>\n\n        <Show when={props.date || props.author}>\n          <div class={meta}>\n            <Show when={props.author}>\n              <div class={metaItem}>\n                <span class={metaIcon}>@</span>\n                <span>{props.author}</span>\n              </div>\n            </Show>\n            <Show when={props.date}>\n              <div class={metaItem}>\n                <span class={metaIcon}>⏱</span>\n                <span>{props.date}</span>\n              </div>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={displayedAttendees().length > 0}>\n          <div class={attendeesRow}>\n            <div class={avatars}>\n              <For each={displayedAttendees()}>\n                {(attendee) => <Avatar src={attendee.avatar} alt={attendee.name} size=\"sm\" />}\n              </For>\n            </div>\n            <Show when={remainingCount() > 0}>\n              <span class={more}>+{remainingCount()} más</span>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={props.actions}>\n          <div class={actionRow}>\n            {typeof props.actions === \"function\" ? props.actions() : props.actions}\n          </div>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface EventListItemProps {\n  title: string;\n  image?: string;\n  subtitle?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst listItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 8,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst thumb = style({\n  width: 48,\n  height: 48,\n  flexShrink: 0,\n  borderRadius: \"default\",\n  objectFit: \"cover\",\n});\n\nconst listBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst listTitle = style({\n  font: \"ui\",\n  fontWeight: \"medium\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst listSubtitle = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nexport function EventListItem(props: EventListItemProps) {\n  return (\n    <HeadlessButton class={`${listItem} ${props.class ?? \"\"}`} onPress={() => props.onClick?.()}>\n      <Show when={props.image}>\n        <img class={thumb} src={props.image} alt={props.title} />\n      </Show>\n      <div class={listBody}>\n        <h4 class={listTitle}>{props.title}</h4>\n        <Show when={props.subtitle}>\n          <p class={listSubtitle}>{props.subtitle}</p>\n        </Show>\n      </div>\n    </HeadlessButton>\n  );\n}\n"],"mappings":"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"}