@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index270.js

@@ -1,13 +1,48 @@
-import { nothing, html } from "lit";
-function renderEyebrow(ctx) {
+import { html, nothing } from "lit";
+const defaultIconSvg = html`
+  <svg
+    class="avatar__icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="8" r="4"/>
+    <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
+  </svg>
+`;
+function avatarTemplate(props) {
   return html`
-    <span class="eb" part="base">
-      <slot></slot>
-      ${ctx.num ? html`<span class="eb-num-badge" part="badge">${ctx.num}</span>` : nothing}
-    </span>
+    <div
+      class="avatar__wrapper"
+      role="img"
+      aria-label="${props.name || "avatar"}"
+    >
+      <div class="avatar__face">
+
+        ${props.showImage ? html`<img
+              class="avatar__img"
+              src="${props.src}"
+              alt="${props.name}"
+              @error=${props.onError}
+            />` : nothing}
+
+        ${!props.showImage && props.initials ? html`<span class="avatar__initials">${props.initials}</span>` : nothing}
+
+        ${!props.showImage && !props.initials ? html`<slot>${defaultIconSvg}</slot>` : nothing}
+
+      </div>
+
+      <div class="avatar__status">
+        <slot name="status"></slot>
+      </div>
+    </div>
   `;
 }
 export {
-  renderEyebrow
+  avatarTemplate
 };
 //# sourceMappingURL=index270.js.map

package/dist/index270.js.map

@@ -1 +1 @@
-{"version":3,"file":"index270.js","sources":["../src/components/atoms/eyebrow/lib-eyebrow.html.ts"],"sourcesContent":["import { html, type TemplateResult, nothing } from 'lit';\nimport type { LibEyebrow } from './lib-eyebrow.component';\n\nexport function renderEyebrow(ctx: LibEyebrow): TemplateResult {\n  return html`\n    <span class=\"eb\" part=\"base\">\n      <slot></slot>\n      ${ctx.num\n        ? html`<span class=\"eb-num-badge\" part=\"badge\">${ctx.num}</span>`\n        : nothing\n      }\n    </span>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,cAAc,KAAiC;AAC7D,SAAO;AAAA;AAAA;AAAA,QAGD,IAAI,MACF,+CAA+C,IAAI,GAAG,YACtD,OACJ;AAAA;AAAA;AAGN;"}
+{"version":3,"file":"index270.js","sources":["../src/components/atoms/avatar/lib-avatar.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibAvatarSize  = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type LibAvatarShape = 'circle' | 'squircle' | 'square';\nexport type LibAvatarColor = 'washi' | 'kaki' | 'celadon' | 'dark';\n\nexport interface AvatarTemplateProps {\n  src: string;\n  name: string;\n  size: LibAvatarSize;\n  shape: LibAvatarShape;\n  color: LibAvatarColor;\n  showImage: boolean;\n  initials: string;\n  onError: () => void;\n}\n\n/** SVG de usuario por defecto cuando no hay imagen ni iniciales */\nconst defaultIconSvg = html`\n  <svg\n    class=\"avatar__icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n    <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n  </svg>\n`;\n\n/**\n * Plantilla para lib-avatar.\n *\n * Jerarquia de contenido:\n *  1. src + sin error -> imagen\n *  2. name            -> iniciales\n *  3. slot default    -> icono custom o SVG fallback\n *\n * avatar__status vive fuera del overflow:hidden para que\n * lib-status-dot no quede recortado.\n */\nexport function avatarTemplate(props: AvatarTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"avatar__wrapper\"\n      role=\"img\"\n      aria-label=\"${props.name || 'avatar'}\"\n    >\n      <div class=\"avatar__face\">\n\n        ${props.showImage\n          ? html`<img\n              class=\"avatar__img\"\n              src=\"${props.src}\"\n              alt=\"${props.name}\"\n              @error=${props.onError}\n            />`\n          : nothing}\n\n        ${!props.showImage && props.initials\n          ? html`<span class=\"avatar__initials\">${props.initials}</span>`\n          : nothing}\n\n        ${!props.showImage && !props.initials\n          ? html`<slot>${defaultIconSvg}</slot>`\n          : nothing}\n\n      </div>\n\n      <div class=\"avatar__status\">\n        <slot name=\"status\"></slot>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAkBA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BhB,SAAS,eAAe,OAA4C;AACzE,SAAO;AAAA;AAAA;AAAA;AAAA,oBAIW,MAAM,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,UAIhC,MAAM,YACJ;AAAA;AAAA,qBAES,MAAM,GAAG;AAAA,qBACT,MAAM,IAAI;AAAA,uBACR,MAAM,OAAO;AAAA,kBAExB,OAAO;AAAA;AAAA,UAET,CAAC,MAAM,aAAa,MAAM,WACxB,sCAAsC,MAAM,QAAQ,YACpD,OAAO;AAAA;AAAA,UAET,CAAC,MAAM,aAAa,CAAC,MAAM,WACzB,aAAa,cAAc,YAC3B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnB;"}

package/dist/index271.js

@@ -1,5 +1,5 @@
-const componentCss = '@layer tokens,reset,components;@layer tokens{:host{--eb-font: var(--lib-font-mono, "DM Mono", "Courier New", monospace);--eb-size: .65rem;--eb-tracking: .24em;--eb-color: rgb(184, 90, 30, .55);--eb-line-w: 28px;--eb-line-w-hover: 40px;--eb-line-grad: linear-gradient(90deg, var(--color-kaki-400, #D97234), transparent);--eb-line-grad-r: linear-gradient(270deg, var(--color-kaki-400, #D97234), transparent);--eb-dot-size: 5px;--eb-dot-color: var(--color-kaki-400, #D97234);--eb-num-color: rgb(184, 90, 30, .3);--eb-num-border: rgb(184, 90, 30, .18);--eb-dur-slow: .38s;--eb-ease-out: cubic-bezier(0, 0, .2, 1)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{:host{display:inline-flex}.eb{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--eb-font);font-size:var(--eb-size);letter-spacing:var(--eb-tracking);text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--eb-color)}.eb:before{content:"";display:block;width:var(--eb-line-w);height:1px;flex-shrink:0;background:var(--eb-line-grad);transition:width var(--eb-dur-slow) var(--eb-ease-out)}.eb:hover:before{width:var(--eb-line-w-hover)}:host([line="right"]) .eb{flex-direction:row-reverse}:host([line="right"]) .eb:before{background:var(--eb-line-grad-r)}:host([line="both"]) .eb:after{content:"";display:block;width:var(--eb-line-w);height:1px;flex-shrink:0;background:var(--eb-line-grad-r);transition:width var(--eb-dur-slow) var(--eb-ease-out)}:host([line="both"]) .eb:hover:after{width:var(--eb-line-w-hover)}:host([line="none"]) .eb:before,:host([line="none"]) .eb:after{display:none}:host([color="washi"]) .eb{--eb-color: var(--color-washi-400, #B8A99A);--eb-line-grad: linear-gradient(90deg, var(--color-washi-400, #B8A99A), transparent);--eb-line-grad-r: linear-gradient(270deg, var(--color-washi-400, #B8A99A), transparent)}:host([color="celadon"]) .eb{--eb-color: rgb(78, 148, 130, .6);--eb-line-grad: linear-gradient(90deg, var(--color-celadon-400, #4E9482), transparent);--eb-line-grad-r: linear-gradient(270deg, var(--color-celadon-400, #4E9482), transparent)}:host([color="white"]) .eb{--eb-color: rgb(250, 247, 244, .35);--eb-line-grad: linear-gradient(90deg, rgb(250, 247, 244, .4), transparent);--eb-line-grad-r: linear-gradient(270deg, rgb(250, 247, 244, .4), transparent)}:host([color="muted"]) .eb{--eb-color: rgb(250, 247, 244, .15);--eb-line-grad: linear-gradient(90deg, rgb(250, 247, 244, .15), transparent);--eb-line-grad-r: linear-gradient(270deg, rgb(250, 247, 244, .15), transparent)}:host([color="dark"]) .eb{--eb-color: rgb(184, 90, 30, .45);--eb-line-grad: linear-gradient(90deg, rgb(184, 90, 30, .5), transparent);--eb-line-grad-r: linear-gradient(270deg, rgb(184, 90, 30, .5), transparent)}:host([size="sm"]) .eb{--eb-size: .58rem;--eb-tracking: .18em;--eb-line-w: 20px}:host([size="lg"]) .eb{--eb-size: .75rem;--eb-tracking: .2em;--eb-line-w: 36px}:host([dot]) .eb:before{width:var(--eb-dot-size)!important;height:var(--eb-dot-size);border-radius:50%;background:var(--eb-dot-color)!important;animation:none!important}:host([dot][color="celadon"]) .eb:before{--eb-dot-color: var(--color-celadon-400, #4E9482)}:host([dot][color="washi"]) .eb:before{--eb-dot-color: var(--color-washi-400, #B8A99A)}:host([dot][color="white"]) .eb:before{--eb-dot-color: rgb(250, 247, 244, .4)}:host([dot]) .eb:hover:before{width:var(--eb-dot-size)!important}.eb-num-badge{display:inline-block;font-family:var(--eb-font);font-size:.58rem;letter-spacing:.12em;color:var(--eb-num-color);border:1px solid var(--eb-num-border);padding:0 5px;line-height:1.6;flex-shrink:0}@keyframes eb-gold{0%{background-position:-200% 0}to{background-position:200% 0}}:host([effect="kintsugi"]) .eb{background:linear-gradient(90deg,var(--color-kaki-600, #8C4115),#F5D08A,var(--color-kaki-400, #D97234),#F5D08A,var(--color-kaki-600, #8C4115));background-size:200% 100%;animation:eb-gold 4s linear infinite;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;color:transparent}:host([effect="kintsugi"]) .eb:before{background:linear-gradient(90deg,var(--color-kaki-400, #D97234),#F5D08A,transparent);background-size:200% 100%;animation:eb-gold 4s linear infinite}:host([effect="kintsugi"][line="right"]) .eb:before,:host([effect="kintsugi"][line="both"]) .eb:after{background:linear-gradient(270deg,var(--color-kaki-400, #D97234),#F5D08A,transparent);background-size:200% 100%;animation:eb-gold 4s linear infinite}@keyframes eb-glitch{0%,88%,to{transform:none;opacity:1}89%{transform:translate(-2px);opacity:.7}90%{transform:translate(2px);opacity:.9}91%{transform:none;opacity:1}}@keyframes eb-flicker{0%,87%,to{opacity:1}88%{opacity:.4}89%{opacity:1}90%{opacity:.2}90.5%{opacity:1}}:host([effect="glitch"]) .eb{color:#faf7f440;animation:eb-glitch 6s steps(1) infinite,eb-flicker 6s steps(1) infinite}:host([effect="glitch"]) .eb:before{background:linear-gradient(90deg,rgb(250,247,244,.25),transparent)}}';
+const avatarCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{--avatar-size: 40px;--avatar-initials-size: var(--text-xs);--avatar-icon-size: 18px}:host([size="xs"]){--avatar-size: 24px;--avatar-initials-size: 8px;--avatar-icon-size: 10px}:host([size="sm"]){--avatar-size: 32px;--avatar-initials-size: 10px;--avatar-icon-size: 14px}:host([size="md"]){--avatar-size: 40px;--avatar-initials-size: var(--text-xs);--avatar-icon-size: 18px}:host([size="lg"]){--avatar-size: 56px;--avatar-initials-size: var(--text-sm);--avatar-icon-size: 24px}:host([size="xl"]){--avatar-size: 72px;--avatar-initials-size: var(--text-base);--avatar-icon-size: 30px}:host([size="2xl"]){--avatar-size: 96px;--avatar-initials-size: var(--text-md);--avatar-icon-size: 40px}.avatar__wrapper{position:relative;display:inline-flex;width:var(--avatar-size);height:var(--avatar-size);flex-shrink:0}.avatar__face{width:100%;height:100%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-full);border:1px solid var(--color-washi-300);background:var(--color-washi-200);-webkit-user-select:none;user-select:none}:host([shape="squircle"]) .avatar__face{border-radius:30%}:host([shape="square"]) .avatar__face{border-radius:var(--radius-md)}.avatar__img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}.avatar__initials{font-family:var(--lib-font-mono);font-size:var(--avatar-initials-size);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;line-height:1;color:var(--color-washi-700)}.avatar__icon{width:var(--avatar-icon-size);height:var(--avatar-icon-size);display:block;flex-shrink:0;color:var(--color-washi-500)}.avatar__status{position:absolute;bottom:0;right:0;transform:translate(20%,20%);z-index:var(--z-raised);display:flex}:host([color="kaki"]) .avatar__face{background:var(--color-kaki-100);border-color:var(--color-kaki-200)}:host([color="kaki"]) .avatar__initials{color:var(--color-kaki-600)}:host([color="kaki"]) .avatar__icon{color:var(--color-kaki-500)}:host([color="celadon"]) .avatar__face{background:var(--color-celadon-100);border-color:var(--color-celadon-200)}:host([color="celadon"]) .avatar__initials{color:var(--color-celadon-600)}:host([color="celadon"]) .avatar__icon{color:var(--color-celadon-500)}:host([color="dark"]) .avatar__face{background:var(--color-washi-900);border-color:var(--color-washi-800)}:host([color="dark"]) .avatar__initials{color:var(--color-washi-300)}:host([color="dark"]) .avatar__icon{color:var(--color-washi-500)}}';
 export {
-  componentCss as default
+  avatarCss as default
 };
 //# sourceMappingURL=index271.js.map

package/dist/index272.js

@@ -1,37 +1,5 @@
-import { nothing, html } from "lit";
-function renderDisplayHeading(ctx) {
-  const headingContent = html`
-    <!-- Línea 1 -->
-    ${ctx.line1}
-    <!-- Línea 2: prefix + acento itálico -->
-    ${ctx.line2Prefix || ctx.accent ? html`
-          <br>
-          ${ctx.line2Prefix ? html`${ctx.line2Prefix} ` : nothing}
-          ${ctx.accent ? html`<em class="dh-accent">${ctx.accent}</em>` : nothing}
-        ` : nothing}
-  `;
-  return html`
-    <div class="dh-wrapper" part="wrapper">
-
-      <!-- Slot eyebrow: permite pasar un <lib-eyebrow> desde fuera -->
-      <slot name="eyebrow"></slot>
-
-      <!-- Heading con tag dinámico -->
-      ${ctx.tag === "h1" ? html`<h1 class="dh-heading" part="heading">${headingContent}</h1>` : nothing}
-      ${ctx.tag === "h2" ? html`<h2 class="dh-heading" part="heading">${headingContent}</h2>` : nothing}
-      ${ctx.tag === "h3" ? html`<h3 class="dh-heading" part="heading">${headingContent}</h3>` : nothing}
-      ${ctx.tag === "h4" ? html`<h4 class="dh-heading" part="heading">${headingContent}</h4>` : nothing}
-
-      <!-- Descripción como prop -->
-      ${ctx.description ? html`<p class="dh-desc" part="description">${ctx.description}</p>` : nothing}
-
-      <!-- Descripción como slot (rich content) -->
-      <slot name="description"></slot>
-
-    </div>
-  `;
-}
+const backgroundCss = `@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block;position:relative;overflow:hidden}}@layer components{.bg-base{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.bg-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.bg-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0}.bg-content{position:relative;z-index:2;width:100%;height:100%}:host([paused]) .bg-base,:host([paused]) .bg-overlay{animation-play-state:paused!important}:host([variant="washi"]) .bg-base{background:var(--color-washi-50)}:host([variant="washi-grain"]) .bg-base{background:var(--color-washi-50)}:host([variant="washi-grain"]) .bg-overlay{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.045'/%3E%3C/svg%3E");background-repeat:repeat;mix-blend-mode:multiply}:host([variant="washi-weave"]) .bg-base{background-color:var(--color-washi-100);background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(180,160,140,.06) 3px,rgb(180,160,140,.06) 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,rgb(180,160,140,.06) 3px,rgb(180,160,140,.06) 4px)}:host([variant="seigaiha"]) .bg-base{background-color:var(--color-washi-50);background-image:radial-gradient(ellipse 100% 90% at 50% 0%,transparent 60%,rgb(180,155,130,.18) 60%,rgb(180,155,130,.18) 64%,transparent 64%);background-size:36px 18px;background-position:0 0,18px 9px}:host([variant="tatami"]) .bg-base{background-color:var(--color-washi-100);background-image:linear-gradient(rgb(160,140,118,.12) 1px,transparent 1px),linear-gradient(90deg,rgb(160,140,118,.12) 1px,transparent 1px),linear-gradient(rgb(160,140,118,.06) 1px,transparent 1px),linear-gradient(90deg,rgb(160,140,118,.06) 1px,transparent 1px);background-size:60px 60px,60px 60px,20px 20px,20px 20px}:host([variant="asanoha"]) .bg-base{background-color:var(--color-washi-50);background-image:repeating-linear-gradient(60deg,rgb(160,140,118,.1) 0,rgb(160,140,118,.1) 1px,transparent 1px,transparent 18px),repeating-linear-gradient(-60deg,rgb(160,140,118,.1) 0,rgb(160,140,118,.1) 1px,transparent 1px,transparent 18px),repeating-linear-gradient(0deg,rgb(160,140,118,.08) 0,rgb(160,140,118,.08) 1px,transparent 1px,transparent 18px)}:host([variant="sashiko"]) .bg-base{background-color:#f0eae0;background-image:radial-gradient(circle,rgb(130,100,70,.18) 1.5px,transparent 1.5px);background-size:16px 16px}:host([variant="komon"]) .bg-base{background-color:var(--color-washi-50);background-image:radial-gradient(circle at 2px 2px,rgb(160,130,100,.15) 1px,transparent 0),radial-gradient(circle at 10px 10px,rgb(160,130,100,.08) 1px,transparent 0);background-size:12px 12px}:host([variant="kasuri"]) .bg-base{background-color:#f5efe6;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 8px,rgb(150,120,90,.05) 8px,rgb(150,120,90,.05) 10px),repeating-linear-gradient(45deg,transparent 0,transparent 8px,rgb(150,120,90,.04) 8px,rgb(150,120,90,.04) 10px)}:host([variant="nishiki"]) .bg-base{background:linear-gradient(135deg,var(--color-washi-50) 0%,#F5EEE4 35%,#EDE3D5 65%,var(--color-washi-100) 100%)}:host([variant="sumi"]) .bg-base{background:var(--color-washi-950)}:host([variant="sumi-grain"]) .bg-base{background:var(--color-washi-950)}:host([variant="sumi-grain"]) .bg-overlay{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.055'/%3E%3C/svg%3E");background-repeat:repeat;mix-blend-mode:screen}:host([variant="kintsugi"]) .bg-base{background:var(--color-washi-950);background-image:linear-gradient(125deg,transparent 30%,rgb(184,90,30,.07) 50%,transparent 70%),linear-gradient(45deg,transparent 20%,rgb(184,90,30,.04) 60%,transparent 80%)}:host([variant="ash-grid"]) .bg-base{background-color:var(--color-washi-950);background-image:linear-gradient(rgb(250,247,244,.04) 1px,transparent 1px),linear-gradient(90deg,rgb(250,247,244,.04) 1px,transparent 1px);background-size:40px 40px}:host([variant="ink-dot"]) .bg-base{background-color:var(--color-washi-950);background-image:radial-gradient(circle,rgb(250,247,244,.07) 1px,transparent 1px);background-size:20px 20px}:host([variant="mokume"]) .bg-base{background:#1a120a;background-image:repeating-linear-gradient(2deg,transparent 0,transparent 14px,rgb(255,240,220,.025) 14px,rgb(255,240,220,.025) 16px),repeating-linear-gradient(-1deg,transparent 0,transparent 22px,rgb(255,240,220,.015) 22px,rgb(255,240,220,.015) 24px)}:host([variant="kumo"]) .bg-base{background:#0e0a07;background-image:radial-gradient(ellipse 60% 40% at 20% 30%,rgb(184,90,30,.08) 0%,transparent 70%),radial-gradient(ellipse 50% 35% at 80% 70%,rgb(78,148,130,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 30% at 60% 20%,rgb(184,90,30,.04) 0%,transparent 70%)}:host([variant="temari"]) .bg-base{background:#110d09;background-image:radial-gradient(circle at 50% 50%,transparent 38px,rgb(250,247,244,.04) 39px,transparent 40px),radial-gradient(circle at 50% 50%,transparent 58px,rgb(250,247,244,.03) 59px,transparent 60px),radial-gradient(circle at 50% 50%,transparent 78px,rgb(250,247,244,.025) 79px,transparent 80px),radial-gradient(circle at 50% 50%,transparent 98px,rgb(250,247,244,.02) 99px,transparent 100px),radial-gradient(circle at 50% 50%,transparent 118px,rgb(250,247,244,.015) 119px,transparent 120px)}:host([variant="dusk"]) .bg-base{background:linear-gradient(160deg,#1a1008,#2a1a0e,#1a1208 60%,#0e0a06)}:host([variant="embers"]) .bg-base{background:#0c0804;background-image:radial-gradient(ellipse 50% 40% at 50% 100%,rgb(184,90,30,.22) 0%,transparent 65%),radial-gradient(ellipse 30% 20% at 50% 90%,rgb(217,114,52,.3) 0%,transparent 50%),radial-gradient(ellipse 80% 60% at 50% 50%,transparent 40%,rgb(10,6,2,.9) 100%)}:host([variant="aurora-light"]) .bg-base{background:radial-gradient(ellipse 80% 60% at 10% 20%,rgb(217,114,52,.12) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 90% 80%,rgb(78,148,130,.1) 0%,transparent 60%),radial-gradient(ellipse 70% 70% at 50% 50%,rgb(250,247,244,.5) 0%,transparent 100%),var(--color-washi-50)}:host([variant="kaki-glow"]) .bg-base{background:radial-gradient(ellipse 70% 60% at 30% 40%,rgb(217,114,52,.18) 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 80% 20%,rgb(184,90,30,.1) 0%,transparent 60%),var(--color-washi-100)}:host([variant="celadon-mist"]) .bg-base{background:radial-gradient(ellipse 80% 60% at 70% 30%,rgb(78,148,130,.14) 0%,transparent 65%),radial-gradient(ellipse 60% 50% at 20% 80%,rgb(78,148,130,.08) 0%,transparent 60%),var(--color-washi-50)}:host([variant="noctiluca"]) .bg-base{background:#0a0806;background-image:radial-gradient(ellipse 60% 50% at 20% 30%,rgb(217,114,52,.12) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 70%,rgb(78,148,130,.09) 0%,transparent 60%),radial-gradient(ellipse 70% 60% at 50% 50%,rgb(26,20,14,.8) 0%,transparent 100%)}:host([variant="horizon"]) .bg-base{background:linear-gradient(180deg,var(--color-washi-50) 0%,#EDE3D5 40%,#D8C8B4 70%,var(--color-washi-200) 100%)}:host([variant="breathing"]) .bg-base{background:var(--color-washi-50)}:host([variant="breathing"]) .bg-overlay{top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgb(217,114,52,.1) 0%,transparent 70%);animation:bg-breathe 6s ease-in-out infinite}:host([variant="aurora-drift"]) .bg-base{background:#0c0906}:host([variant="aurora-drift"]) .bg-overlay{background:transparent;animation:none}:host([variant="aurora-drift"]) .bg-orb-a,:host([variant="aurora-drift"]) .bg-orb-b{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:1}:host([variant="aurora-drift"]) .bg-orb-a{width:200px;height:160px;background:#b85a1e2e;top:10%;left:15%;animation:bg-aurora-float 12s ease-in-out infinite}:host([variant="aurora-drift"]) .bg-orb-b{width:180px;height:140px;background:#4e948224;bottom:15%;right:20%;animation:bg-aurora-float 12s ease-in-out infinite;animation-delay:-5s;animation-direction:reverse}:host([variant="scan"]) .bg-base{background:#0e0a07;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgb(255,255,255,.018) 3px,rgb(255,255,255,.018) 4px)}:host([variant="scan"]) .bg-overlay{height:2px;inset:0 0 auto;top:0;left:0;right:0;background:linear-gradient(90deg,transparent,rgb(184,90,30,.35),transparent);animation:bg-scan-sweep 5s linear infinite}:host([variant="ink-drop"]) .bg-base{background:var(--color-washi-50)}:host([variant="ink-drop"]) .bg-overlay{width:80px;height:80px;inset:unset;top:50%;left:50%;margin:-40px 0 0 -40px;background:radial-gradient(circle,rgb(26,20,14,.08) 0%,rgb(26,20,14,.03) 50%,transparent 100%);border-radius:50%;animation:bg-ink-expand 4s ease-in-out infinite}:host([variant="shimmer"]) .bg-base{background:var(--color-washi-100)}:host([variant="shimmer"]) .bg-overlay{background:linear-gradient(105deg,transparent 30%,rgb(250,247,244,.5) 50%,transparent 70%);transform:translate(-100%);animation:bg-shimmer-pass 4s ease-in-out infinite;animation-delay:1s}:host([variant="particles"]){background:var(--color-washi-950)}:host([variant="rain"]){background:#0e0a07}:host([variant="wave-mesh"]){background:var(--color-washi-50)}:host([variant="constellation"]){background:#0a0806}:host([variant="kagome"]) .bg-base{background-color:var(--color-washi-50);background-image:linear-gradient(60deg,rgb(160,140,118,.11) 1px,transparent 1px),linear-gradient(120deg,rgb(160,140,118,.11) 1px,transparent 1px),linear-gradient(0deg,rgb(160,140,118,.07) 1px,transparent 1px);background-size:22px 38px}:host([variant="shoji"]) .bg-base{background-color:#fdfaf6;background-image:linear-gradient(rgb(160,140,118,.07) 1px,transparent 1px),linear-gradient(90deg,rgb(160,140,118,.07) 1px,transparent 1px),linear-gradient(rgb(160,140,118,.13) 1px,transparent 1px),linear-gradient(90deg,rgb(160,140,118,.13) 1px,transparent 1px);background-size:10px 10px,10px 10px,40px 40px,40px 40px}:host([variant="shibori"]) .bg-base{background-color:var(--color-washi-50);background-image:radial-gradient(circle at 0% 0%,transparent 28%,rgb(160,140,118,.1) 29%,transparent 30%),radial-gradient(circle at 100% 0%,transparent 28%,rgb(160,140,118,.1) 29%,transparent 30%),radial-gradient(circle at 0% 100%,transparent 28%,rgb(160,140,118,.1) 29%,transparent 30%),radial-gradient(circle at 100% 100%,transparent 28%,rgb(160,140,118,.1) 29%,transparent 30%),radial-gradient(circle at 50% 50%,transparent 28%,rgb(160,140,118,.07) 29%,transparent 30%),radial-gradient(circle at 0% 0%,transparent 14%,rgb(160,140,118,.06) 15%,transparent 16%),radial-gradient(circle at 100% 0%,transparent 14%,rgb(160,140,118,.06) 15%,transparent 16%),radial-gradient(circle at 0% 100%,transparent 14%,rgb(160,140,118,.06) 15%,transparent 16%),radial-gradient(circle at 100% 100%,transparent 14%,rgb(160,140,118,.06) 15%,transparent 16%);background-size:48px 48px}:host([variant="ori"]) .bg-base{background-color:var(--color-washi-100);background-image:repeating-linear-gradient(45deg,transparent 0,transparent 4px,rgb(150,130,108,.09) 4px,rgb(150,130,108,.09) 5px),repeating-linear-gradient(-45deg,transparent 0,transparent 4px,rgb(150,130,108,.07) 4px,rgb(150,130,108,.07) 5px)}:host([variant="chirimen"]) .bg-base{background-color:#faf6f0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.3' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)' fill='rgb(160,140,118)' opacity='0.04'/%3E%3C/svg%3E");background-repeat:repeat}:host([variant="obsidian"]) .bg-base{background:#0a0808;background-image:linear-gradient(135deg,transparent 0%,rgb(220,215,210,.025) 25%,transparent 50%,rgb(220,215,210,.015) 75%,transparent 100%),radial-gradient(ellipse 60% 40% at 70% 30%,rgb(184,90,30,.06),transparent 60%)}:host([variant="forge"]) .bg-base{background:#080604;background-image:radial-gradient(ellipse 90% 40% at 50% 110%,rgb(217,114,52,.35) 0%,rgb(140,65,21,.2) 35%,transparent 65%),radial-gradient(ellipse 60% 25% at 50% 100%,rgb(250,180,80,.12) 0%,transparent 50%)}:host([variant="void"]) .bg-base{background:#06040302;background-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 20%,rgb(0,0,0,.3) 55%,rgb(0,0,0,.75) 100%),radial-gradient(ellipse 30% 25% at 50% 50%,rgb(184,90,30,.04),transparent 70%);background-color:#0c0a08}:host([variant="yami"]) .bg-base{background:linear-gradient(160deg,#1a1208,#0e0b07 30%,#080604 55%,#04030200);background-color:#080604}:host([variant="midnight"]) .bg-base{background-color:#090806;background-image:radial-gradient(circle,rgb(250,247,244,.04) 1px,transparent 1px);background-size:12px 12px;background-position:0 0,6px 6px}:host([variant="midnight"]) .bg-overlay{background:linear-gradient(180deg,transparent 60%,rgb(184,90,30,.04) 100%)}:host([variant="sakura"]) .bg-base{background:radial-gradient(ellipse 70% 60% at 30% 30%,rgb(230,190,180,.22) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 70%,rgb(217,114,52,.08) 0%,transparent 60%),radial-gradient(ellipse 80% 80% at 50% 50%,rgb(250,247,244,.6) 0%,transparent 100%),#faf4f2}:host([variant="twilight"]) .bg-base{background:linear-gradient(160deg,#2a1a0e,#1e1208 35%,#120c06 65%,#080604);background-image:radial-gradient(ellipse 80% 50% at 30% 20%,rgb(217,114,52,.14) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 80%,rgb(184,90,30,.08) 0%,transparent 60%)}:host([variant="jade-deep"]) .bg-base{background:#080e0c;background-image:radial-gradient(ellipse 70% 60% at 20% 40%,rgb(78,148,130,.16) 0%,transparent 65%),radial-gradient(ellipse 50% 40% at 85% 65%,rgb(53,113,100,.1) 0%,transparent 60%),radial-gradient(ellipse 40% 30% at 60% 20%,rgb(78,148,130,.07) 0%,transparent 60%)}:host([variant="pulse"]) .bg-base{background:var(--color-washi-950)}:host([variant="pulse"]) .bg-overlay{background:transparent}:host([variant="pulse"]) .bg-overlay:before,:host([variant="pulse"]) .bg-overlay:after{content:"";position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgb(184,90,30,.35);transform:translate(-50%,-50%) scale(0);width:160px;height:160px;animation:bg-pulse-ring 4s ease-out infinite}:host([variant="pulse"]) .bg-overlay:after{border-color:#f5d08a33;animation-delay:2s}@keyframes bg-pulse-ring{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(5.5);opacity:0}}:host([variant="fog"]) .bg-base{background:var(--color-washi-950)}:host([variant="fog"]) .bg-overlay{background:radial-gradient(ellipse 500px 220px at 0% 50%,rgb(250,247,244,.045),transparent 70%),radial-gradient(ellipse 300px 140px at 0% 50%,rgb(250,247,244,.03),transparent 60%);animation:bg-fog-drift 10s linear infinite}:host([variant="fog"]) .bg-overlay:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 400px 180px at 0% 65%,rgb(184,90,30,.025),transparent 70%);animation:bg-fog-drift 14s linear infinite;animation-delay:-5s}@keyframes bg-fog-drift{0%{transform:translate(-40%)}to{transform:translate(140%)}}:host([variant="static"]) .bg-base{background:#0a0806;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");background-repeat:repeat}:host([variant="static"]) .bg-overlay{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.012) 3px,rgb(255,255,255,.012) 4px);animation:bg-static-noise .12s steps(1) infinite}@keyframes bg-static-noise{0%{background-position:0 0,0 0;opacity:1}20%{background-position:-3% 2%,0 0;opacity:.9}40%{background-position:4% -1%,0 -2px;opacity:1}60%{background-position:-1% 3%,0 0;opacity:.8}80%{background-position:2% -2%,0 1px;opacity:1}}:host([variant="fireflies"]){background:#080604}:host([variant="ink-wash"]){background:var(--color-washi-50)}@keyframes bg-breathe{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}@keyframes bg-aurora-float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,15px) scale(.95)}}@keyframes bg-scan-sweep{0%{top:0%;opacity:0}2%{opacity:1}98%{opacity:.4}to{top:100%;opacity:0}}@keyframes bg-ink-expand{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(4);opacity:1}}@keyframes bg-shimmer-pass{0%{transform:translate(-100%)}to{transform:translate(200%)}}}`;
 export {
-  renderDisplayHeading
+  backgroundCss as default
 };
 //# sourceMappingURL=index272.js.map

package/dist/index272.js.map

@@ -1 +1 @@
-{"version":3,"file":"index272.js","sources":["../src/components/atoms/display-heading/lib-display-heading.html.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\nimport type { LibDisplayHeading } from './lib-display-heading.component';\n\nexport function renderDisplayHeading(ctx: LibDisplayHeading): TemplateResult {\n  /* Decide el tag semántico del heading */\n  const headingContent = html`\n    <!-- Línea 1 -->\n    ${ctx.line1}\n    <!-- Línea 2: prefix + acento itálico -->\n    ${ctx.line2Prefix || ctx.accent\n      ? html`\n          <br>\n          ${ctx.line2Prefix ? html`${ctx.line2Prefix} ` : nothing}\n          ${ctx.accent\n            ? html`<em class=\"dh-accent\">${ctx.accent}</em>`\n            : nothing\n          }\n        `\n      : nothing\n    }\n  `;\n\n  return html`\n    <div class=\"dh-wrapper\" part=\"wrapper\">\n\n      <!-- Slot eyebrow: permite pasar un <lib-eyebrow> desde fuera -->\n      <slot name=\"eyebrow\"></slot>\n\n      <!-- Heading con tag dinámico -->\n      ${ctx.tag === 'h1' ? html`<h1 class=\"dh-heading\" part=\"heading\">${headingContent}</h1>` : nothing}\n      ${ctx.tag === 'h2' ? html`<h2 class=\"dh-heading\" part=\"heading\">${headingContent}</h2>` : nothing}\n      ${ctx.tag === 'h3' ? html`<h3 class=\"dh-heading\" part=\"heading\">${headingContent}</h3>` : nothing}\n      ${ctx.tag === 'h4' ? html`<h4 class=\"dh-heading\" part=\"heading\">${headingContent}</h4>` : nothing}\n\n      <!-- Descripción como prop -->\n      ${ctx.description\n        ? html`<p class=\"dh-desc\" part=\"description\">${ctx.description}</p>`\n        : nothing\n      }\n\n      <!-- Descripción como slot (rich content) -->\n      <slot name=\"description\"></slot>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,qBAAqB,KAAwC;AAE3E,QAAM,iBAAiB;AAAA;AAAA,MAEnB,IAAI,KAAK;AAAA;AAAA,MAET,IAAI,eAAe,IAAI,SACrB;AAAA;AAAA,YAEI,IAAI,cAAc,OAAO,IAAI,WAAW,MAAM,OAAO;AAAA,YACrD,IAAI,SACF,6BAA6B,IAAI,MAAM,UACvC,OACJ;AAAA,YAEF,OACJ;AAAA;AAGF,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOD,IAAI,QAAQ,OAAO,6CAA6C,cAAc,UAAU,OAAO;AAAA,QAC/F,IAAI,QAAQ,OAAO,6CAA6C,cAAc,UAAU,OAAO;AAAA,QAC/F,IAAI,QAAQ,OAAO,6CAA6C,cAAc,UAAU,OAAO;AAAA,QAC/F,IAAI,QAAQ,OAAO,6CAA6C,cAAc,UAAU,OAAO;AAAA;AAAA;AAAA,QAG/F,IAAI,cACF,6CAA6C,IAAI,WAAW,SAC5D,OACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAON;"}
+{"version":3,"file":"index272.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index273.js

@@ -1,5 +1,19 @@
-const componentCss = '@layer tokens,reset,components;@layer tokens{:host{display:block;--dh-font-display: var(--lib-font-display, "Cormorant Garamond", Georgia, serif);--dh-font-body: var(--lib-font-body, "Shippori Mincho", serif);--dh-size: clamp(2.2rem, 5vw, 3.5rem);--dh-color-heading: var(--color-washi-800, #3D332A);--dh-color-accent: var(--color-kaki-400, #D97234);--dh-color-desc: var(--color-washi-500, #9A8878);--dh-gap-eyebrow: var(--lib-space-md, 1rem);--dh-gap-desc: var(--lib-space-lg, 1.5rem);--dh-max-width: 640px;--dh-dur: .56s;--dh-ease: cubic-bezier(0, 0, .2, 1)}:host([surface="dark"]){--dh-color-heading: rgb(250, 247, 244, .65);--dh-color-desc: rgb(250, 247, 244, .28)}:host([surface="washi"]){--dh-color-heading: var(--color-washi-800, #3D332A);--dh-color-desc: var(--color-washi-600, #7A6A5C)}:host([size="sm"]){--dh-size: clamp(1.5rem, 3.5vw, 2.2rem)}:host([size="md"]){--dh-size: clamp(2.2rem, 5vw, 3.5rem)}:host([size="lg"]){--dh-size: clamp(2.75rem, 6vw, 5rem)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.dh-wrapper{display:flex;flex-direction:column;align-items:flex-start;max-width:var(--dh-max-width)}.dh-eyebrow-slot{display:contents}::slotted([slot="eyebrow"]){margin-bottom:var(--dh-gap-eyebrow)}.dh-heading{font-family:var(--dh-font-display);font-size:var(--dh-size);font-weight:300;letter-spacing:-.02em;line-height:1.15;color:var(--dh-color-heading);margin:0}.dh-accent{font-style:italic;color:var(--dh-color-accent);font-family:inherit;font-size:inherit;font-weight:inherit}.dh-desc{font-family:var(--dh-font-body);font-size:var(--text-sm, .8125rem);color:var(--dh-color-desc);line-height:1.9;margin-top:var(--dh-gap-desc);max-width:var(--dh-max-width)}::slotted([slot="description"]){font-family:var(--dh-font-body);font-size:var(--text-sm, .8125rem);color:var(--dh-color-desc);line-height:1.9;margin-top:var(--dh-gap-desc);display:block}@keyframes dh-fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}:host([animate]) .dh-heading{animation:dh-fade-up var(--dh-dur) var(--dh-ease) both}:host([animate]) .dh-desc{animation:dh-fade-up var(--dh-dur) var(--dh-ease) .12s both}:host([centered]) .dh-wrapper{align-items:center;text-align:center;max-width:none}:host([centered]) .dh-heading,:host([centered]) .dh-desc{max-width:var(--dh-max-width);text-align:center}}';
+import { html, nothing } from "lit";
+function backgroundTemplate(props) {
+  const { variant, isCanvas } = props;
+  const isAuroraDrift = variant === "aurora-drift";
+  return html`
+    ${isCanvas ? html`<canvas class="bg-canvas"></canvas>` : html`
+          <div class="bg-base"></div>
+          <div class="bg-overlay"></div>
+          ${isAuroraDrift ? html`<div class="bg-orb-a"></div><div class="bg-orb-b"></div>` : nothing}
+        `}
+    <div class="bg-content">
+      <slot></slot>
+    </div>
+  `;
+}
 export {
-  componentCss as default
+  backgroundTemplate
 };
 //# sourceMappingURL=index273.js.map

package/dist/index273.js.map

@@ -1 +1 @@
-{"version":3,"file":"index273.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index273.js","sources":["../src/components/atoms/background/lib-background.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { BackgroundTemplateProps } from './lib-background.types';\n\n/**\n * Template principal de lib-background.\n *\n * Estructura de capas:\n *  .bg-base    → recibe background CSS (color/patrón/gradiente)\n *  .bg-overlay → grain, shimmer, scan line, ink-drop...\n *  .bg-orb-a/b → orbes animados (solo aurora-drift)\n *  .bg-canvas  → canvas 2D generativo (solo variantes canvas)\n *  .bg-content → contenido sloteado — z-index 2\n */\nexport function backgroundTemplate(props: BackgroundTemplateProps): TemplateResult {\n  const { variant, isCanvas } = props;\n  const isAuroraDrift = variant === 'aurora-drift';\n\n  return html`\n    ${isCanvas\n      ? html`<canvas class=\"bg-canvas\"></canvas>`\n      : html`\n          <div class=\"bg-base\"></div>\n          <div class=\"bg-overlay\"></div>\n          ${isAuroraDrift\n            ? html`<div class=\"bg-orb-a\"></div><div class=\"bg-orb-b\"></div>`\n            : nothing}\n        `\n    }\n    <div class=\"bg-content\">\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAaO,SAAS,mBAAmB,OAAgD;AACjF,QAAM,EAAE,SAAS,SAAA,IAAa;AAC9B,QAAM,gBAAgB,YAAY;AAElC,SAAO;AAAA,MACH,WACE,4CACA;AAAA;AAAA;AAAA,YAGI,gBACE,iEACA,OAAO;AAAA,SAEjB;AAAA;AAAA;AAAA;AAAA;AAKJ;"}

package/dist/index274.js

@@ -1,5 +1,12 @@
-const gridCss = "@layer tokens,reset,components;@layer tokens{:host{display:block;--cg-cols: repeat(auto-fill, minmax(280px, 1fr));--cg-gap: 1.5px;--cg-bg: rgb(255, 255, 255, .04);--cg-border: rgb(255, 255, 255, .04)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.grid{display:grid;grid-template-columns:var(--cg-cols);gap:var(--cg-gap);background:var(--cg-bg);border:1px solid var(--cg-border)}::slotted(lib-component-card[featured]){grid-column:span 2}@media(max-width:700px){::slotted(lib-component-card[featured]){grid-column:span 1}}@media(max-width:600px){.grid{grid-template-columns:1fr}}}";
+const BG_CANVAS_VARIANTS = /* @__PURE__ */ new Set([
+  "particles",
+  "rain",
+  "wave-mesh",
+  "constellation",
+  "fireflies",
+  "ink-wash"
+]);
 export {
-  gridCss as default
+  BG_CANVAS_VARIANTS
 };
 //# sourceMappingURL=index274.js.map

package/dist/index274.js.map

@@ -1 +1 @@
-{"version":3,"file":"index274.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index274.js","sources":["../src/components/atoms/background/lib-background.types.ts"],"sourcesContent":["/* ============================================================\n   LIB-BACKGROUND — Tipos e interfaces públicas\n   52 variantes: 15 light · 15 dark · 8 gradient · 8 animated · 6 canvas\n   ============================================================ */\n\n/** 15 fondos light inspirados en papel y textil japonés */\nexport type LibBackgroundLight =\n  | 'washi'\n  | 'washi-grain'\n  | 'washi-weave'\n  | 'seigaiha'\n  | 'tatami'\n  | 'asanoha'\n  | 'sashiko'\n  | 'komon'\n  | 'kasuri'\n  | 'nishiki'\n  /* ── Nuevos ── */\n  | 'kagome'      /* 籠目  hexagonal basket weave */\n  | 'shoji'       /* 障子  paper screen fine grid */\n  | 'shibori'     /* 絞り  tie-dye concentric circles */\n  | 'ori'         /* 織   diagonal woven textile */\n  | 'chirimen';   /* 縮緬  crepe silk fine crinkle */\n\n/** 15 fondos dark derivados de la tinta sumi */\nexport type LibBackgroundDark =\n  | 'sumi'\n  | 'sumi-grain'\n  | 'kintsugi'\n  | 'ash-grid'\n  | 'ink-dot'\n  | 'mokume'\n  | 'kumo'\n  | 'temari'\n  | 'dusk'\n  | 'embers'\n  /* ── Nuevos ── */\n  | 'obsidian'    /* 黒曜石  mineral shimmer sobre negro profundo */\n  | 'forge'       /* 鍛冶   brasa naranja desde abajo */\n  | 'void'        /* 虚空   vignette radial, oscuridad pura */\n  | 'yami'        /* 闇     degradado de profundidad casi imperceptible */\n  | 'midnight';   /* 深夜   matriz de puntos finos sobre near-black */\n\n/** 8 fondos de gradiente mesh */\nexport type LibBackgroundGradient =\n  | 'aurora-light'\n  | 'kaki-glow'\n  | 'celadon-mist'\n  | 'noctiluca'\n  | 'horizon'\n  /* ── Nuevos ── */\n  | 'sakura'      /* 桜    rosa-washi suave */\n  | 'twilight'    /* 黄昏  kaki cálido a oscuro */\n  | 'jade-deep';  /* 翡翠  celadón profundo con humo */\n\n/** 8 fondos animados en CSS puro */\nexport type LibBackgroundAnimated =\n  | 'breathing'\n  | 'aurora-drift'\n  | 'scan'\n  | 'ink-drop'\n  | 'shimmer'\n  /* ── Nuevos ── */\n  | 'pulse'       /* anillos kintsugi expandiéndose desde el centro */\n  | 'fog'         /* niebla lenta cruzando de izquierda a derecha */\n  | 'static';     /* ruido CRT — estética glitch */\n\n/** 6 fondos generativos en Canvas 2D */\nexport type LibBackgroundCanvas =\n  | 'particles'\n  | 'rain'\n  | 'wave-mesh'\n  | 'constellation'\n  /* ── Nuevos ── */\n  | 'fireflies'   /* partículas luminosas con movimiento orgánico */\n  | 'ink-wash';   /* manchas de tinta expandiéndose sobre papel */\n\n/** Unión completa de las 52 variantes */\nexport type LibBackgroundVariant =\n  | LibBackgroundLight\n  | LibBackgroundDark\n  | LibBackgroundGradient\n  | LibBackgroundAnimated\n  | LibBackgroundCanvas;\n\n/** Props del template */\nexport interface BackgroundTemplateProps {\n  variant:  LibBackgroundVariant;\n  isCanvas: boolean;\n}\n\n/** Set de variantes canvas (requieren inicialización JS) */\nexport const BG_CANVAS_VARIANTS = new Set<LibBackgroundVariant>([\n  'particles', 'rain', 'wave-mesh', 'constellation',\n  'fireflies', 'ink-wash',\n]);\n\n/** Set de variantes oscuras (para decidir color de demo content) */\nexport const BG_DARK_VARIANTS = new Set<LibBackgroundVariant>([\n  'sumi', 'sumi-grain', 'kintsugi', 'ash-grid', 'ink-dot',\n  'mokume', 'kumo', 'temari', 'dusk', 'embers',\n  'obsidian', 'forge', 'void', 'yami', 'midnight',\n  'noctiluca', 'aurora-drift', 'scan', 'particles', 'rain',\n  'constellation', 'twilight', 'jade-deep', 'pulse', 'fog',\n  'static', 'fireflies', 'ink-wash',\n]);"],"names":[],"mappings":"AA4FO,MAAM,yCAAyB,IAA0B;AAAA,EAC9D;AAAA,EAAa;AAAA,EAAQ;AAAA,EAAa;AAAA,EAClC;AAAA,EAAa;AACf,CAAC;"}

package/dist/index275.js

@@ -1,20 +1,13 @@
 import { nothing, html } from "lit";
-function rendercontentPillar(ctx) {
+function badgeTemplate(props) {
   return html`
-    <div class="pillar" part="pillar">
-
-      ${ctx.kanji ? html`<div class="pillar-kanji" part="kanji" aria-hidden="true">${ctx.kanji}</div>` : nothing}
-
-      <div class="pillar-body" part="body">
-        ${ctx.label ? html`<p class="pillar-label" part="label">${ctx.label}</p>` : nothing}
-
-        ${ctx.description ? html`<p class="pillar-desc" part="description">${ctx.description}</p>` : html`<slot></slot>`}
-      </div>
-
-    </div>
+    <span class="badge">
+      ${props.dot ? html`<span class="badge__dot" aria-hidden="true"></span>` : nothing}
+      <slot></slot>
+    </span>
   `;
 }
 export {
-  rendercontentPillar
+  badgeTemplate
 };
 //# sourceMappingURL=index275.js.map

package/dist/index275.js.map

@@ -1 +1 @@
-{"version":3,"file":"index275.js","sources":["../src/components/atoms/content-pillar/content-pillar.html.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\nimport type { LibContentPillar } from './content-pillar.component';\n\nexport function rendercontentPillar(ctx: LibContentPillar): TemplateResult {\n  return html`\n    <div class=\"pillar\" part=\"pillar\">\n\n      ${ctx.kanji\n        ? html`<div class=\"pillar-kanji\" part=\"kanji\" aria-hidden=\"true\">${ctx.kanji}</div>`\n        : nothing\n      }\n\n      <div class=\"pillar-body\" part=\"body\">\n        ${ctx.label\n          ? html`<p class=\"pillar-label\" part=\"label\">${ctx.label}</p>`\n          : nothing\n        }\n\n        ${ctx.description\n          ? html`<p class=\"pillar-desc\" part=\"description\">${ctx.description}</p>`\n          : html`<slot></slot>`\n        }\n      </div>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,oBAAoB,KAAuC;AACzE,SAAO;AAAA;AAAA;AAAA,QAGD,IAAI,QACF,iEAAiE,IAAI,KAAK,WAC1E,OACJ;AAAA;AAAA;AAAA,UAGI,IAAI,QACF,4CAA4C,IAAI,KAAK,SACrD,OACJ;AAAA;AAAA,UAEE,IAAI,cACF,iDAAiD,IAAI,WAAW,SAChE,mBACJ;AAAA;AAAA;AAAA;AAAA;AAKR;"}
+{"version":3,"file":"index275.js","sources":["../src/components/atoms/badge/lib-badge.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\n/**\n * Variantes visuales del badge.\n * TODO: mover a src/models/ui/ cuando se integre en el monorepo.\n */\nexport type LibBadgeVariant =\n  | 'default'\n  | 'accent'\n  | 'celadon'\n  | 'dark'\n  | 'error'\n  | 'success'\n  | 'warning';\n\nexport type LibBadgeSize = 'sm' | 'md';\n\nexport interface BadgeTemplateProps {\n  variant: LibBadgeVariant;\n  size: LibBadgeSize;\n  dot: boolean;\n  pill: boolean;\n}\n\n/**\n * Plantilla para lib-badge.\n * El contenido se proyecta mediante <slot> para máxima flexibilidad.\n */\nexport function badgeTemplate(props: BadgeTemplateProps): TemplateResult {\n  return html`\n    <span class=\"badge\">\n      ${props.dot ? html`<span class=\"badge__dot\" aria-hidden=\"true\"></span>` : nothing}\n      <slot></slot>\n    </span>\n  `;\n}"],"names":[],"mappings":";AA4BO,SAAS,cAAc,OAA2C;AACvE,SAAO;AAAA;AAAA,QAED,MAAM,MAAM,4DAA4D,OAAO;AAAA;AAAA;AAAA;AAIvF;"}

package/dist/index276.js

@@ -1,5 +1,5 @@
-const componentCss = '@layer tokens,reset,components;@layer tokens{:host{display:block;--pp-kanji-color: rgb(184, 90, 30, .35);--pp-label-color: rgb(184, 90, 30, .5);--pp-desc-color: rgb(250, 247, 244, .25);--pp-kanji-size: 2rem;--pp-kanji-width: 2.5rem;--pp-gap: 1.25rem;--pp-font-display: var(--lib-font-display, "Cormorant Garamond", Georgia, serif);--pp-font-mono: var(--lib-font-mono, "DM Mono", "Courier New", monospace);--pp-font-body: var(--lib-font-body, "Shippori Mincho", serif)}:host([surface="light"]){--pp-kanji-color: rgb(184, 90, 30, .25);--pp-label-color: var(--color-kaki-500, #B85A1E);--pp-desc-color: var(--color-washi-600, #7A6A5C)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.pillar{display:flex;gap:var(--pp-gap);align-items:flex-start}.pillar-kanji{font-family:var(--pp-font-display);font-size:var(--pp-kanji-size);font-weight:300;color:var(--pp-kanji-color);line-height:1;flex-shrink:0;width:var(--pp-kanji-width);text-align:center;-webkit-user-select:none;user-select:none}.pillar-body{display:flex;flex-direction:column;gap:.35rem}.pillar-label{font-family:var(--pp-font-mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pp-label-color);line-height:1}.pillar-desc{font-family:var(--pp-font-body);font-size:.82rem;color:var(--pp-desc-color);line-height:1.8}::slotted(*){font-family:var(--pp-font-body);font-size:.82rem;color:var(--pp-desc-color);line-height:1.8;margin:0}}';
+const badgeCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.badge{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:10px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;line-height:1;padding:var(--lib-space-xs) var(--lib-space-sm);border:var(--lib-border-width) solid transparent;border-radius:var(--lib-radius-xs);-webkit-user-select:none;user-select:none}:host([size="md"]) .badge,.badge{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:10px}:host([size="sm"]) .badge{padding:2px var(--lib-space-xs);font-size:9px;letter-spacing:var(--tracking-wide)}:host([pill]) .badge{border-radius:var(--radius-full);padding-inline:var(--lib-space-md)}.badge__dot{display:inline-block;width:5px;height:5px;border-radius:var(--radius-full);background:currentcolor;opacity:.75;flex-shrink:0}:host([variant="default"]) .badge,.badge{background:var(--color-washi-100);color:var(--text-secondary);border-color:var(--border-default)}:host([variant="accent"]) .badge{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-200)}:host([variant="celadon"]) .badge{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-200)}:host([variant="dark"]) .badge{background:var(--color-washi-900);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([variant="error"]) .badge{background:#fcf3f3;color:var(--color-error);border-color:#e7c4c5}:host([variant="success"]) .badge{background:#f1f7f2;color:var(--color-success);border-color:#bcd6c0}:host([variant="warning"]) .badge{background:#fcf4e6;color:var(--color-warning);border-color:#e6d1b0}}';
 export {
-  componentCss as default
+  badgeCss as default
 };
 //# sourceMappingURL=index276.js.map

package/dist/index277.js

@@ -1,21 +1,14 @@
-import { nothing, html } from "lit";
-function renderQuote(ctx) {
+import { html } from "lit";
+function bentoItemTemplate(_ctx) {
   return html`
-    <blockquote part="blockquote">
-
-      <p class="quote-text" part="text">
-        <!-- Línea 1: prop o slot -->
-        ${ctx.text ? html`${ctx.text}` : html`<slot></slot>`}
-        <!-- Línea 2: acento itálico -->
-        ${ctx.accent ? html`<em class="quote-accent" part="accent">${ctx.accent}</em>` : nothing}
-      </p>
-
-      ${ctx.cite ? html`<cite part="cite">${ctx.cite}</cite>` : nothing}
-
-    </blockquote>
+    <div class="bento-item" part="item">
+      <div class="content" part="content">
+        <slot></slot>
+      </div>
+    </div>
   `;
 }
 export {
-  renderQuote
+  bentoItemTemplate
 };
 //# sourceMappingURL=index277.js.map

package/dist/index277.js.map

@@ -1 +1 @@
-{"version":3,"file":"index277.js","sources":["../src/components/atoms/quote/lib-quote.html.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from 'lit';\nimport type { LibQuote } from './lib-quote.component';\n\nexport function renderQuote(ctx: LibQuote): TemplateResult {\n  return html`\n    <blockquote part=\"blockquote\">\n\n      <p class=\"quote-text\" part=\"text\">\n        <!-- Línea 1: prop o slot -->\n        ${ctx.text\n          ? html`${ctx.text}`\n          : html`<slot></slot>`\n        }\n        <!-- Línea 2: acento itálico -->\n        ${ctx.accent\n          ? html`<em class=\"quote-accent\" part=\"accent\">${ctx.accent}</em>`\n          : nothing\n        }\n      </p>\n\n      ${ctx.cite\n        ? html`<cite part=\"cite\">${ctx.cite}</cite>`\n        : nothing\n      }\n\n    </blockquote>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,YAAY,KAA+B;AACzD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKC,IAAI,OACF,OAAO,IAAI,IAAI,KACf,mBACJ;AAAA;AAAA,UAEE,IAAI,SACF,8CAA8C,IAAI,MAAM,UACxD,OACJ;AAAA;AAAA;AAAA,QAGA,IAAI,OACF,yBAAyB,IAAI,IAAI,YACjC,OACJ;AAAA;AAAA;AAAA;AAIN;"}
+{"version":3,"file":"index277.js","sources":["../src/components/atoms/bento-item/lib-bento-item.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibBentoItem } from './lib-bento-item.component';\n\nexport function bentoItemTemplate(_ctx: LibBentoItem): TemplateResult {\n  return html`\n    <div class=\"bento-item\" part=\"item\">\n      <div class=\"content\" part=\"content\">\n        <slot></slot>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,kBAAkB,MAAoC;AACpE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOT;"}

package/dist/index278.js

@@ -1,5 +1,5 @@
-const componentCss = '@layer tokens,reset,components;@layer tokens{:host{display:block;--q-font-display: var(--lib-font-display, "Cormorant Garamond", Georgia, serif);--q-font-mono: var(--lib-font-mono, "DM Mono", "Courier New", monospace);--q-text-color: rgb(250, 247, 244, .55);--q-accent-color: var(--color-kaki-400, #D97234);--q-cite-color: rgb(250, 247, 244, .18);--q-size: clamp(1.6rem, 3vw, 2.8rem)}:host([surface="light"]){--q-text-color: var(--color-washi-700, #5C4E42);--q-accent-color: var(--color-kaki-500, #B85A1E);--q-cite-color: var(--color-washi-400, #B8A99A)}:host([surface="washi"]){--q-text-color: var(--color-washi-800, #3D332A);--q-accent-color: var(--color-kaki-500, #B85A1E);--q-cite-color: var(--color-washi-500, #9A8878)}:host([size="sm"]){--q-size: clamp(1.2rem, 2vw, 1.8rem)}:host([size="md"]){--q-size: clamp(1.6rem, 3vw, 2.8rem)}:host([size="lg"]){--q-size: clamp(2rem, 4vw, 3.5rem)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{blockquote{margin:0;padding:0}.quote-text{font-family:var(--q-font-display);font-size:var(--q-size);font-weight:300;letter-spacing:-.02em;line-height:1.35;color:var(--q-text-color)}.quote-accent{display:block;font-style:italic;color:var(--q-accent-color);margin-top:.25rem}::slotted(*){font-family:var(--q-font-display);font-size:var(--q-size);font-weight:300;letter-spacing:-.02em;line-height:1.35;color:var(--q-text-color);display:block}cite{display:block;font-style:normal;font-family:var(--q-font-mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--q-cite-color);margin-top:1.5rem}}';
+const itemCss = "@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.bento-item{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background:var(--bg-elevated);border-radius:var(--lib-radius-lg);border:1px solid var(--border-subtle);overflow:hidden}:host([interactive]) .bento-item{cursor:pointer;transition:transform var(--duration-slow) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-slow) var(--ease-default)}:host([interactive]) .bento-item:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}:host([interactive]) .bento-item:active{transform:translateY(-1px)}.content{padding:var(--lib-space-md);height:100%;display:flex;flex-direction:column}:host([flush]) .content{padding:0}@media(prefers-reduced-motion:reduce){:host([interactive]) .bento-item{transition:border-color var(--duration-base)}:host([interactive]) .bento-item:hover{transform:none}}}";
 export {
-  componentCss as default
+  itemCss as default
 };
 //# sourceMappingURL=index278.js.map

package/dist/index279.js

@@ -1,5 +1,58 @@
-const colorScaleStyles = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.scale-wrap{display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem);width:100%}.scale-track{display:flex;width:100%;height:var(--lib-color-scale-height, 56px);overflow:hidden}.scale-swatch{flex:1;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--lib-space-xs, .25rem);cursor:default;transition:flex var(--duration-slow, .35s) var(--ease-out, cubic-bezier(0,0,.2,1)),filter var(--duration-base, .2s) var(--ease-out, cubic-bezier(0,0,.2,1))}.scale-track:has(.scale-swatch:hover) .scale-swatch{flex:.7}.scale-track .scale-swatch:hover{flex:1.8;filter:brightness(1.06)}.scale-swatch-label{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.6rem;letter-spacing:.1em;line-height:1;opacity:0;transform:translateY(4px);transition:opacity var(--duration-base, .2s) var(--ease-out, cubic-bezier(0,0,.2,1)),transform var(--duration-base, .2s) var(--ease-out, cubic-bezier(0,0,.2,1));pointer-events:none;-webkit-user-select:none;user-select:none}.scale-swatch:hover .scale-swatch-label{opacity:1;transform:translateY(0)}.scale-legends{display:flex;justify-content:space-between;align-items:center}.scale-legend{font-family:var(--lib-font-mono, "DM Mono", monospace);font-size:.6rem;letter-spacing:.12em;text-transform:lowercase;color:var(--text-muted, var(--color-washi-400, #B8A99A));white-space:nowrap}@supports not selector(:has(a)){.scale-swatch:hover{flex:1.8}}@media(prefers-reduced-motion:reduce){.scale-swatch,.scale-swatch-label{transition:none}}}';
+import { html, nothing } from "lit";
+const glitchGhost = html`
+  <div class="burger-ghost">
+    <svg class="ghost-a" width="52" height="52" viewBox="0 0 52 52" fill="none">
+      <line x1="12" y1="19" x2="40" y2="19" stroke="rgba(217,114,52,0.6)"  stroke-width="1.5"/>
+      <line x1="12" y1="26" x2="40" y2="26" stroke="rgba(217,114,52,0.6)"  stroke-width="1.5"/>
+      <line x1="12" y1="33" x2="40" y2="33" stroke="rgba(217,114,52,0.6)"  stroke-width="1.5"/>
+    </svg>
+    <svg class="ghost-b" width="52" height="52" viewBox="0 0 52 52" fill="none">
+      <line x1="12" y1="19" x2="40" y2="19" stroke="rgba(78,148,130,0.4)"  stroke-width="1"/>
+      <line x1="12" y1="26" x2="40" y2="26" stroke="rgba(78,148,130,0.4)"  stroke-width="1"/>
+      <line x1="12" y1="33" x2="40" y2="33" stroke="rgba(78,148,130,0.4)"  stroke-width="1"/>
+    </svg>
+  </div>`;
+const lines = html`
+  <div class="burger-lines">
+    <span class="burger-line"></span>
+    <span class="burger-line"></span>
+    <span class="burger-line"></span>
+  </div>`;
+function burgerBtn(ctx) {
+  return html`
+    <button
+      class="burger"
+      part="burger"
+      aria-label="${ctx.ariaLabel || "Menú"}"
+      aria-expanded="${ctx.open}"
+      @click="${() => ctx._handleClick()}"
+    >
+      ${ctx.variant === "glitch" ? glitchGhost : nothing}
+      ${lines}
+    </button>`;
+}
+function burgerTemplate(ctx) {
+  if (!ctx.label) return burgerBtn(ctx);
+  return html`
+    <div
+      class="burger-wrap"
+      part="wrap"
+      @click="${() => ctx._handleClick()}"
+    >
+      <button
+        class="burger"
+        part="burger"
+        aria-label="${ctx.ariaLabel || "Menú"}"
+        aria-expanded="${ctx.open}"
+        @click="${(e) => e.stopPropagation()}"
+      >
+        ${ctx.variant === "glitch" ? glitchGhost : nothing}
+        ${lines}
+      </button>
+      <span class="burger-label" part="label">${ctx._labelText}</span>
+    </div>`;
+}
 export {
-  colorScaleStyles as default
+  burgerTemplate
 };
 //# sourceMappingURL=index279.js.map

package/dist/index279.js.map

@@ -1 +1 @@
-{"version":3,"file":"index279.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index279.js","sources":["../src/components/atoms/burger-button/lib-burger-button.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibBurger } from './lib-burger-button.component';\n\n/* SVG ghost lines para la variante glitch */\nconst glitchGhost: TemplateResult = html`\n  <div class=\"burger-ghost\">\n    <svg class=\"ghost-a\" width=\"52\" height=\"52\" viewBox=\"0 0 52 52\" fill=\"none\">\n      <line x1=\"12\" y1=\"19\" x2=\"40\" y2=\"19\" stroke=\"rgba(217,114,52,0.6)\"  stroke-width=\"1.5\"/>\n      <line x1=\"12\" y1=\"26\" x2=\"40\" y2=\"26\" stroke=\"rgba(217,114,52,0.6)\"  stroke-width=\"1.5\"/>\n      <line x1=\"12\" y1=\"33\" x2=\"40\" y2=\"33\" stroke=\"rgba(217,114,52,0.6)\"  stroke-width=\"1.5\"/>\n    </svg>\n    <svg class=\"ghost-b\" width=\"52\" height=\"52\" viewBox=\"0 0 52 52\" fill=\"none\">\n      <line x1=\"12\" y1=\"19\" x2=\"40\" y2=\"19\" stroke=\"rgba(78,148,130,0.4)\"  stroke-width=\"1\"/>\n      <line x1=\"12\" y1=\"26\" x2=\"40\" y2=\"26\" stroke=\"rgba(78,148,130,0.4)\"  stroke-width=\"1\"/>\n      <line x1=\"12\" y1=\"33\" x2=\"40\" y2=\"33\" stroke=\"rgba(78,148,130,0.4)\"  stroke-width=\"1\"/>\n    </svg>\n  </div>`;\n\n/* Las tres líneas internas */\nconst lines: TemplateResult = html`\n  <div class=\"burger-lines\">\n    <span class=\"burger-line\"></span>\n    <span class=\"burger-line\"></span>\n    <span class=\"burger-line\"></span>\n  </div>`;\n\n/* Botón principal */\nfunction burgerBtn(ctx: LibBurger): TemplateResult {\n  return html`\n    <button\n      class=\"burger\"\n      part=\"burger\"\n      aria-label=\"${ctx.ariaLabel || 'Menú'}\"\n      aria-expanded=\"${ctx.open}\"\n      @click=\"${(): void => ctx._handleClick()}\"\n    >\n      ${ctx.variant === 'glitch' ? glitchGhost : nothing}\n      ${lines}\n    </button>`;\n}\n\nexport function burgerTemplate(ctx: LibBurger): TemplateResult {\n  /* Sin label — renderiza solo el botón */\n  if (!ctx.label) return burgerBtn(ctx);\n\n  /* Con label — wrapper flex */\n  return html`\n    <div\n      class=\"burger-wrap\"\n      part=\"wrap\"\n      @click=\"${(): void => ctx._handleClick()}\"\n    >\n      <button\n        class=\"burger\"\n        part=\"burger\"\n        aria-label=\"${ctx.ariaLabel || 'Menú'}\"\n        aria-expanded=\"${ctx.open}\"\n        @click=\"${(e: MouseEvent): void => e.stopPropagation()}\"\n      >\n        ${ctx.variant === 'glitch' ? glitchGhost : nothing}\n        ${lines}\n      </button>\n      <span class=\"burger-label\" part=\"label\">${ctx._labelText}</span>\n    </div>`;\n}"],"names":[],"mappings":";AAIA,MAAM,cAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAepC,MAAM,QAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9B,SAAS,UAAU,KAAgC;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA,oBAIW,IAAI,aAAa,MAAM;AAAA,uBACpB,IAAI,IAAI;AAAA,gBACf,MAAY,IAAI,cAAc;AAAA;AAAA,QAEtC,IAAI,YAAY,WAAW,cAAc,OAAO;AAAA,QAChD,KAAK;AAAA;AAEb;AAEO,SAAS,eAAe,KAAgC;AAE7D,MAAI,CAAC,IAAI,MAAO,QAAO,UAAU,GAAG;AAGpC,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,MAAY,IAAI,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKxB,IAAI,aAAa,MAAM;AAAA,yBACpB,IAAI,IAAI;AAAA,kBACf,CAAC,MAAwB,EAAE,iBAAiB;AAAA;AAAA,UAEpD,IAAI,YAAY,WAAW,cAAc,OAAO;AAAA,UAChD,KAAK;AAAA;AAAA,gDAEiC,IAAI,UAAU;AAAA;AAE9D;"}