@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index247.js

@@ -1,5 +1,271 @@
-const styles = "@layer components{:host{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}}";
+import { html } from "lit";
+const ICON_GITHUB = html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>`;
+const ICON_LINKEDIN = html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>`;
+const ICON_EMAIL = html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>`;
+const ICON_RSS = html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M4 11a9 9 0 019 9"/><path d="M4 4a16 16 0 0116 16"/><circle cx="5" cy="19" r="1" fill="currentColor" stroke="none"/></svg>`;
+const ICON_CHEVRON_DOWN = html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg>`;
+const ICON_ARROW_SM = html`<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>`;
+function renderSocial(ctx) {
+  return html`
+    <footer>
+      <div class="ft-inner">
+
+        <!-- Brand centered -->
+        <div style="text-align:center;margin-bottom:var(--lib-space-xl,2rem);">
+          <div class="ft-brand" style="font-size:2rem;">
+            ${ctx.brandName} <em>${ctx.brandKanji}</em>
+          </div>
+          <span class="ft-brand-sub">${ctx.brandSub}</span>
+        </div>
+
+        <!-- Social grid large -->
+        <div class="ft-social-grid">
+          <a href="${ctx.githubHref}" class="ft-social-cell" aria-label="GitHub" style="color:var(--color-washi-500,#9A8878);">
+            ${ICON_GITHUB}
+            <span class="ft-social-cell-label">GitHub</span>
+          </a>
+          <a href="${ctx.linkedinHref}" class="ft-social-cell" aria-label="LinkedIn" style="color:var(--color-washi-500,#9A8878);">
+            ${ICON_LINKEDIN}
+            <span class="ft-social-cell-label">LinkedIn</span>
+          </a>
+          <a href="mailto:${ctx.email}" class="ft-social-cell accent" aria-label="Email" style="color:var(--color-kaki-400,#D97234);">
+            ${ICON_EMAIL}
+            <span class="ft-social-cell-label">Email</span>
+          </a>
+          <a href="${ctx.rssHref}" class="ft-social-cell" aria-label="RSS" style="color:var(--color-washi-500,#9A8878);">
+            ${ICON_RSS}
+            <span class="ft-social-cell-label">RSS</span>
+          </a>
+        </div>
+
+        <!-- Nav + copyright -->
+        <div class="ft-nav-row">
+          <ul class="ft-nav-links">
+            ${(ctx.navLinks ?? []).map((link) => html`
+              <li>
+                <a href="${link.href}" class="ft-link-mono">${link.label}</a>
+              </li>
+            `)}
+          </ul>
+          <p class="ft-copyright">© ${ctx.year} · ${ctx.brandName} DS · ${ctx.location}</p>
+        </div>
+
+      </div>
+    </footer>
+  `;
+}
+function renderAccordion(ctx) {
+  return html`
+    <footer>
+      <div class="ft-inner" style="max-width:480px;">
+
+        <!-- Brand + social row -->
+        <div class="ft-acc-brand-row">
+          <div class="ft-brand-dark">
+            ${ctx.brandName} <em>${ctx.brandKanji}</em>
+          </div>
+          <div class="ft-social-mini">
+            <a href="${ctx.githubHref}" class="ft-social-mini-btn" aria-label="GitHub">
+              ${ICON_GITHUB}
+            </a>
+            <a href="${ctx.linkedinHref}" class="ft-social-mini-btn" aria-label="LinkedIn">
+              ${ICON_LINKEDIN}
+            </a>
+            <a href="mailto:${ctx.email}" class="ft-social-mini-btn" aria-label="Email">
+              ${ICON_EMAIL}
+            </a>
+          </div>
+        </div>
+
+        <!-- Accordion columns -->
+        ${(ctx.columns ?? []).map((col) => html`
+          <div class="ft-acc-item">
+            <button
+              class="ft-acc-trigger"
+              @click=${(e) => ctx._toggleAccordion(e.currentTarget)}
+              aria-expanded="false"
+            >
+              ${col.heading}
+              <span class="ft-acc-arrow">${ICON_CHEVRON_DOWN}</span>
+            </button>
+            <div class="ft-acc-body">
+              <div class="ft-acc-body-inner">
+                ${(col.links ?? []).map((link) => html`<a href="${link.href}">${link.label}</a>`)}
+              </div>
+            </div>
+          </div>
+        `)}
+
+        <!-- Bottom bar -->
+        <div class="ft-bottom" style="border-top-color:rgba(255,255,255,.06);">
+          <p class="ft-copyright">© ${ctx.year} · ${ctx.brandName} · MIT</p>
+          <div style="display:flex;gap:var(--lib-space-md,1rem);">
+            ${(ctx.legalLinks ?? []).map((link) => html`
+              <a href="${link.href}" class="ft-link-mono">${link.label}</a>
+            `)}
+          </div>
+        </div>
+
+      </div>
+    </footer>
+  `;
+}
+function renderKintsugi(ctx) {
+  return html`
+    <footer style="position:relative;">
+
+      <!-- Gold seam -->
+      <div class="ft-kintsugi-seam" aria-hidden="true"></div>
+
+      <!-- Ring ornament -->
+      <div class="ft-kintsugi-ring" aria-hidden="true">
+        <div class="ft-kintsugi-ring-track"></div>
+        <span class="ft-kintsugi-symbol">✦</span>
+      </div>
+
+      <div class="ft-inner" style="padding-top:var(--lib-space-xl,2rem);">
+
+        <!-- Brand centered -->
+        <div style="text-align:center;margin-bottom:var(--lib-space-lg,1.5rem);">
+          <div class="ft-brand-dark" style="font-size:1.75rem;">
+            ${ctx.brandName} <em>${ctx.brandKanji}</em>
+          </div>
+          <span style="font-family:var(--lib-font-mono,'DM Mono',monospace);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,247,244,.18);display:block;margin-top:.375rem;">
+            ${ctx.brandSub}
+          </span>
+        </div>
+
+        <!-- Nav columns -->
+        <div class="ft-kintsugi-grid">
+          ${(ctx.columns ?? []).map((col) => html`
+            <div>
+              <div class="ft-kintsugi-col-head">${col.heading}</div>
+              <ul class="ft-kintsugi-col-links">
+                ${(col.links ?? []).map((link) => html`
+                  <li>
+                    <a href="${link.href}">
+                      <span class="ft-kintsugi-arrow">›</span>
+                      ${link.label}
+                    </a>
+                  </li>
+                `)}
+              </ul>
+            </div>
+          `)}
+        </div>
+
+        <!-- Bottom bar -->
+        <div class="ft-bottom" style="border-top-color:rgba(255,255,255,.06);">
+          <p class="ft-copyright">// © ${ctx.year} · ${ctx.brandName.toUpperCase()} · MIT LICENSE</p>
+          <div style="display:flex;gap:var(--lib-space-md,1rem);">
+            ${(ctx.legalLinks ?? []).map((link) => html`
+              <a href="${link.href}" class="ft-link-mono">${link.label}</a>
+            `)}
+          </div>
+        </div>
+
+      </div>
+    </footer>
+  `;
+}
+function renderGlitch(ctx) {
+  return html`
+    <footer style="position:relative;overflow:hidden;">
+
+      <!-- Texture layers -->
+      <div class="ft-glitch-scanlines" aria-hidden="true"></div>
+      <div class="ft-glitch-noise" aria-hidden="true"></div>
+
+      <div class="ft-inner">
+
+        <div class="ft-glitch-grid">
+
+          <!-- Col 1: brand + status -->
+          <div>
+            <!-- Status indicators -->
+            <div style="margin-bottom:var(--lib-space-md,1rem);">
+              <div class="ft-status-row">
+                <span class="ft-status-dot online"></span>
+                <span class="ft-status-text">System · online</span>
+              </div>
+              <div class="ft-status-row">
+                <span class="ft-status-dot pending"></span>
+                <span class="ft-status-text">Build · pending deploy</span>
+              </div>
+            </div>
+
+            <h2 class="ft-glitch-head">
+              ${ctx.brandName}<br>
+              <em>${ctx.brandKanji}</em><span class="ft-glitch-cursor"></span>
+            </h2>
+
+            <p class="ft-glitch-sub">
+              Design System · ${ctx.location}<br>
+              v${ctx.version} · ${ctx.year}
+            </p>
+          </div>
+
+          <!-- Col 2: modules -->
+          <div>
+            <div class="ft-glitch-modules-head">// modules</div>
+            <div class="ft-glitch-modules-links">
+              ${(ctx.navLinks ?? []).map((link) => html`
+                <a href="${link.href}">
+                  <span style="color:var(--color-kaki-400,#D97234);opacity:.6;">${ICON_ARROW_SM}</span>
+                  ${link.label}
+                </a>
+              `)}
+            </div>
+          </div>
+
+          <!-- Col 3: runtime -->
+          <div>
+            <div class="ft-glitch-modules-head">// runtime</div>
+            <div class="ft-glitch-runtime">
+              ${(ctx.runtimeLines ?? []).map((line) => html`
+                <div>
+                  <span class="key">${line.key.padEnd(5, " ")}</span>
+                  ${line.value.includes("0") && line.key === "deps" ? html`<span class="celadon">${line.value}</span>` : line.value}
+                </div>
+              `)}
+            </div>
+          </div>
+
+        </div>
+
+        <!-- Bottom mono bar -->
+        <div class="ft-bottom" style="border-top-color:rgba(255,255,255,.06);">
+          <p class="ft-copyright">// © ${ctx.year} · ${ctx.brandName.toUpperCase()} · MIT LICENSE · node ${ctx.nodeVersion}</p>
+          <div style="display:flex;gap:var(--lib-space-md,1rem);">
+            ${(ctx.legalLinks ?? []).map((link) => html`
+              <a href="${link.href}" class="ft-link-mono">${link.label}</a>
+            `)}
+          </div>
+        </div>
+
+      </div>
+    </footer>
+  `;
+}
+function renderFooter(ctx) {
+  switch (ctx.variant) {
+    case "social":
+      return renderSocial(ctx);
+    case "accordion":
+      return renderAccordion(ctx);
+    case "kintsugi":
+      return renderKintsugi(ctx);
+    case "glitch":
+      return renderGlitch(ctx);
+    default:
+      return renderSocial(ctx);
+  }
+}
 export {
-  styles as default
+  renderAccordion,
+  renderFooter,
+  renderGlitch,
+  renderKintsugi,
+  renderSocial
 };
 //# sourceMappingURL=index247.js.map

package/dist/index247.js.map

@@ -1 +1 @@
-{"version":3,"file":"index247.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index247.js","sources":["../src/components/organisms/footer/lib-footer.html.ts"],"sourcesContent":["import { html, type TemplateResult } from 'lit';\nimport type { LibFooter } from './lib-footer.component';\n\n/* ── SVG helpers inline ── */\nconst ICON_GITHUB = html`<svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22\"/></svg>`;\nconst ICON_LINKEDIN = html`<svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><path d=\"M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z\"/><circle cx=\"4\" cy=\"4\" r=\"2\"/></svg>`;\nconst ICON_EMAIL = html`<svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"/><polyline points=\"22,6 12,13 2,6\"/></svg>`;\nconst ICON_RSS = html`<svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><path d=\"M4 11a9 9 0 019 9\"/><path d=\"M4 4a16 16 0 0116 16\"/><circle cx=\"5\" cy=\"19\" r=\"1\" fill=\"currentColor\" stroke=\"none\"/></svg>`;\nconst ICON_CHEVRON_DOWN = html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>`;\nconst ICON_ARROW_SM = html`<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"/><polyline points=\"12 5 19 12 12 19\"/></svg>`;\n\n/* ────────────────────────────────────────────────────────────\n   01 · SOCIAL PROMINENT\n   ──────────────────────────────────────────────────────────── */\nexport function renderSocial(ctx: LibFooter): TemplateResult {\n  return html`\n    <footer>\n      <div class=\"ft-inner\">\n\n        <!-- Brand centered -->\n        <div style=\"text-align:center;margin-bottom:var(--lib-space-xl,2rem);\">\n          <div class=\"ft-brand\" style=\"font-size:2rem;\">\n            ${ctx.brandName} <em>${ctx.brandKanji}</em>\n          </div>\n          <span class=\"ft-brand-sub\">${ctx.brandSub}</span>\n        </div>\n\n        <!-- Social grid large -->\n        <div class=\"ft-social-grid\">\n          <a href=\"${ctx.githubHref}\" class=\"ft-social-cell\" aria-label=\"GitHub\" style=\"color:var(--color-washi-500,#9A8878);\">\n            ${ICON_GITHUB}\n            <span class=\"ft-social-cell-label\">GitHub</span>\n          </a>\n          <a href=\"${ctx.linkedinHref}\" class=\"ft-social-cell\" aria-label=\"LinkedIn\" style=\"color:var(--color-washi-500,#9A8878);\">\n            ${ICON_LINKEDIN}\n            <span class=\"ft-social-cell-label\">LinkedIn</span>\n          </a>\n          <a href=\"mailto:${ctx.email}\" class=\"ft-social-cell accent\" aria-label=\"Email\" style=\"color:var(--color-kaki-400,#D97234);\">\n            ${ICON_EMAIL}\n            <span class=\"ft-social-cell-label\">Email</span>\n          </a>\n          <a href=\"${ctx.rssHref}\" class=\"ft-social-cell\" aria-label=\"RSS\" style=\"color:var(--color-washi-500,#9A8878);\">\n            ${ICON_RSS}\n            <span class=\"ft-social-cell-label\">RSS</span>\n          </a>\n        </div>\n\n        <!-- Nav + copyright -->\n        <div class=\"ft-nav-row\">\n          <ul class=\"ft-nav-links\">\n            ${(ctx.navLinks ?? []).map(link => html`\n              <li>\n                <a href=\"${link.href}\" class=\"ft-link-mono\">${link.label}</a>\n              </li>\n            `)}\n          </ul>\n          <p class=\"ft-copyright\">© ${ctx.year} · ${ctx.brandName} DS · ${ctx.location}</p>\n        </div>\n\n      </div>\n    </footer>\n  `;\n}\n\n/* ────────────────────────────────────────────────────────────\n   02 · ACCORDION MOBILE (dark)\n   ──────────────────────────────────────────────────────────── */\nexport function renderAccordion(ctx: LibFooter): TemplateResult {\n  return html`\n    <footer>\n      <div class=\"ft-inner\" style=\"max-width:480px;\">\n\n        <!-- Brand + social row -->\n        <div class=\"ft-acc-brand-row\">\n          <div class=\"ft-brand-dark\">\n            ${ctx.brandName} <em>${ctx.brandKanji}</em>\n          </div>\n          <div class=\"ft-social-mini\">\n            <a href=\"${ctx.githubHref}\" class=\"ft-social-mini-btn\" aria-label=\"GitHub\">\n              ${ICON_GITHUB}\n            </a>\n            <a href=\"${ctx.linkedinHref}\" class=\"ft-social-mini-btn\" aria-label=\"LinkedIn\">\n              ${ICON_LINKEDIN}\n            </a>\n            <a href=\"mailto:${ctx.email}\" class=\"ft-social-mini-btn\" aria-label=\"Email\">\n              ${ICON_EMAIL}\n            </a>\n          </div>\n        </div>\n\n        <!-- Accordion columns -->\n        ${(ctx.columns ?? []).map(col => html`\n          <div class=\"ft-acc-item\">\n            <button\n              class=\"ft-acc-trigger\"\n              @click=${(e: Event):void => ctx._toggleAccordion(e.currentTarget as HTMLElement)}\n              aria-expanded=\"false\"\n            >\n              ${col.heading}\n              <span class=\"ft-acc-arrow\">${ICON_CHEVRON_DOWN}</span>\n            </button>\n            <div class=\"ft-acc-body\">\n              <div class=\"ft-acc-body-inner\">\n                ${(col.links ?? []).map(link => html`<a href=\"${link.href}\">${link.label}</a>`)}\n              </div>\n            </div>\n          </div>\n        `)}\n\n        <!-- Bottom bar -->\n        <div class=\"ft-bottom\" style=\"border-top-color:rgba(255,255,255,.06);\">\n          <p class=\"ft-copyright\">© ${ctx.year} · ${ctx.brandName} · MIT</p>\n          <div style=\"display:flex;gap:var(--lib-space-md,1rem);\">\n            ${(ctx.legalLinks ?? []).map(link => html`\n              <a href=\"${link.href}\" class=\"ft-link-mono\">${link.label}</a>\n            `)}\n          </div>\n        </div>\n\n      </div>\n    </footer>\n  `;\n}\n\n/* ────────────────────────────────────────────────────────────\n   03 · KINTSUGI (dark + gold seam)\n   ──────────────────────────────────────────────────────────── */\nexport function renderKintsugi(ctx: LibFooter): TemplateResult {\n  return html`\n    <footer style=\"position:relative;\">\n\n      <!-- Gold seam -->\n      <div class=\"ft-kintsugi-seam\" aria-hidden=\"true\"></div>\n\n      <!-- Ring ornament -->\n      <div class=\"ft-kintsugi-ring\" aria-hidden=\"true\">\n        <div class=\"ft-kintsugi-ring-track\"></div>\n        <span class=\"ft-kintsugi-symbol\">✦</span>\n      </div>\n\n      <div class=\"ft-inner\" style=\"padding-top:var(--lib-space-xl,2rem);\">\n\n        <!-- Brand centered -->\n        <div style=\"text-align:center;margin-bottom:var(--lib-space-lg,1.5rem);\">\n          <div class=\"ft-brand-dark\" style=\"font-size:1.75rem;\">\n            ${ctx.brandName} <em>${ctx.brandKanji}</em>\n          </div>\n          <span style=\"font-family:var(--lib-font-mono,'DM Mono',monospace);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,247,244,.18);display:block;margin-top:.375rem;\">\n            ${ctx.brandSub}\n          </span>\n        </div>\n\n        <!-- Nav columns -->\n        <div class=\"ft-kintsugi-grid\">\n          ${(ctx.columns ?? []).map(col => html`\n            <div>\n              <div class=\"ft-kintsugi-col-head\">${col.heading}</div>\n              <ul class=\"ft-kintsugi-col-links\">\n                ${(col.links ?? []).map(link => html`\n                  <li>\n                    <a href=\"${link.href}\">\n                      <span class=\"ft-kintsugi-arrow\">›</span>\n                      ${link.label}\n                    </a>\n                  </li>\n                `)}\n              </ul>\n            </div>\n          `)}\n        </div>\n\n        <!-- Bottom bar -->\n        <div class=\"ft-bottom\" style=\"border-top-color:rgba(255,255,255,.06);\">\n          <p class=\"ft-copyright\">// © ${ctx.year} · ${ctx.brandName.toUpperCase()} · MIT LICENSE</p>\n          <div style=\"display:flex;gap:var(--lib-space-md,1rem);\">\n            ${(ctx.legalLinks ?? []).map(link => html`\n              <a href=\"${link.href}\" class=\"ft-link-mono\">${link.label}</a>\n            `)}\n          </div>\n        </div>\n\n      </div>\n    </footer>\n  `;\n}\n\n/* ────────────────────────────────────────────────────────────\n   04 · GLITCH TERMINAL (dark + scanlines + noise)\n   ──────────────────────────────────────────────────────────── */\nexport function renderGlitch(ctx: LibFooter): TemplateResult {\n  return html`\n    <footer style=\"position:relative;overflow:hidden;\">\n\n      <!-- Texture layers -->\n      <div class=\"ft-glitch-scanlines\" aria-hidden=\"true\"></div>\n      <div class=\"ft-glitch-noise\" aria-hidden=\"true\"></div>\n\n      <div class=\"ft-inner\">\n\n        <div class=\"ft-glitch-grid\">\n\n          <!-- Col 1: brand + status -->\n          <div>\n            <!-- Status indicators -->\n            <div style=\"margin-bottom:var(--lib-space-md,1rem);\">\n              <div class=\"ft-status-row\">\n                <span class=\"ft-status-dot online\"></span>\n                <span class=\"ft-status-text\">System · online</span>\n              </div>\n              <div class=\"ft-status-row\">\n                <span class=\"ft-status-dot pending\"></span>\n                <span class=\"ft-status-text\">Build · pending deploy</span>\n              </div>\n            </div>\n\n            <h2 class=\"ft-glitch-head\">\n              ${ctx.brandName}<br>\n              <em>${ctx.brandKanji}</em><span class=\"ft-glitch-cursor\"></span>\n            </h2>\n\n            <p class=\"ft-glitch-sub\">\n              Design System · ${ctx.location}<br>\n              v${ctx.version} · ${ctx.year}\n            </p>\n          </div>\n\n          <!-- Col 2: modules -->\n          <div>\n            <div class=\"ft-glitch-modules-head\">// modules</div>\n            <div class=\"ft-glitch-modules-links\">\n              ${(ctx.navLinks ?? []).map(link => html`\n                <a href=\"${link.href}\">\n                  <span style=\"color:var(--color-kaki-400,#D97234);opacity:.6;\">${ICON_ARROW_SM}</span>\n                  ${link.label}\n                </a>\n              `)}\n            </div>\n          </div>\n\n          <!-- Col 3: runtime -->\n          <div>\n            <div class=\"ft-glitch-modules-head\">// runtime</div>\n            <div class=\"ft-glitch-runtime\">\n              ${(ctx.runtimeLines ?? []).map(line => html`\n                <div>\n                  <span class=\"key\">${line.key.padEnd(5, '\\u00A0')}</span>\n                  ${line.value.includes('0') && line.key === 'deps'\n                    ? html`<span class=\"celadon\">${line.value}</span>`\n                    : line.value\n                  }\n                </div>\n              `)}\n            </div>\n          </div>\n\n        </div>\n\n        <!-- Bottom mono bar -->\n        <div class=\"ft-bottom\" style=\"border-top-color:rgba(255,255,255,.06);\">\n          <p class=\"ft-copyright\">// © ${ctx.year} · ${ctx.brandName.toUpperCase()} · MIT LICENSE · node ${ctx.nodeVersion}</p>\n          <div style=\"display:flex;gap:var(--lib-space-md,1rem);\">\n            ${(ctx.legalLinks ?? []).map(link => html`\n              <a href=\"${link.href}\" class=\"ft-link-mono\">${link.label}</a>\n            `)}\n          </div>\n        </div>\n\n      </div>\n    </footer>\n  `;\n}\n\n/* ────────────────────────────────────────────────────────────\n   Dispatcher — decide qué template renderizar\n   ──────────────────────────────────────────────────────────── */\nexport function renderFooter(ctx: LibFooter): TemplateResult {\n  switch (ctx.variant) {\n    case 'social':    return renderSocial(ctx);\n    case 'accordion': return renderAccordion(ctx);\n    case 'kintsugi':  return renderKintsugi(ctx);\n    case 'glitch':    return renderGlitch(ctx);\n    default:          return renderSocial(ctx);\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index248.js

@@ -1,39 +1,5 @@
-import { html, nothing } from "lit";
-const checkSvg = html`
-  <svg class="checkbox__check" viewBox="0 0 10 10" aria-hidden="true">
-    <polyline points="1.5,5 4,7.5 8.5,2"/>
-  </svg>
-`;
-const dashEl = html`<span class="checkbox__dash" aria-hidden="true"></span>`;
-function checkboxTemplate(props) {
-  return html`
-    <label class="checkbox">
-
-      <input
-        class="checkbox__input"
-        type="checkbox"
-        .checked="${props.checked}"
-        .indeterminate="${props.indeterminate}"
-        ?disabled="${props.disabled}"
-        value="${props.value}"
-        @change="${props.onChange}"
-      />
-
-      <span class="checkbox__box">
-        ${props.indeterminate ? dashEl : checkSvg}
-      </span>
-
-      ${props.label || props.sublabel ? html`
-            <span class="checkbox__label">
-              ${props.label ? html`<span class="checkbox__label-text">${props.label}</span>` : nothing}
-              ${props.sublabel ? html`<span class="checkbox__label-sub">${props.sublabel}</span>` : nothing}
-            </span>
-          ` : html`<slot></slot>`}
-
-    </label>
-  `;
-}
+const componentCss = `@layer tokens,reset,components;@layer tokens{:host{display:block;--ft-pad-x: var(--lib-space-xl, 2rem);--ft-pad-y: var(--lib-space-xl, 2rem);--ft-max-width: 1200px;--ft-bg: var(--color-washi-50, #FAF7F4);--ft-border: var(--color-washi-200, #E5DDD3);--ft-text: var(--color-washi-900, #221C16);--ft-text-muted: var(--color-washi-400, #B8A99A);--ft-text-faint: var(--color-washi-300, #D3C8BC);--ft-accent: var(--color-kaki-500, #B85A1E);--ft-accent-hover: var(--color-kaki-600, #8C4115);--ft-link: var(--color-washi-400, #B8A99A);--ft-link-hover: var(--color-washi-900, #221C16);--ft-gold-start: rgb(184, 90, 30, .4);--ft-gold-mid: #F5D08A;--ft-gold-end: rgb(184, 90, 30, .4);--ft-font-display: var(--lib-font-display, "Cormorant Garamond", Georgia, serif);--ft-font-mono: var(--lib-font-mono, "DM Mono", "Courier New", monospace);--ft-dur-base: .22s;--ft-dur-slow: .38s;--ft-ease-out: cubic-bezier(0, 0, .2, 1)}:host([variant="accordion"]),:host([variant="kintsugi"]),:host([variant="glitch"]){--ft-bg: var(--color-washi-950, #120E0A);--ft-border: rgb(255, 255, 255, .07);--ft-text: rgb(250, 247, 244, .85);--ft-text-muted: rgb(250, 247, 244, .35);--ft-text-faint: rgb(250, 247, 244, .12);--ft-link: rgb(250, 247, 244, .22);--ft-link-hover: rgb(250, 247, 244, .85)}}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}a{text-decoration:none;color:inherit}ul,ol{list-style:none}button{cursor:pointer;background:none;border:none;font-family:inherit}}@layer components{footer{background:var(--ft-bg);border-top:1px solid var(--ft-border)}.ft-inner{max-width:var(--ft-max-width);margin:0 auto;padding:var(--ft-pad-y) var(--ft-pad-x)}.ft-label-mono{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ft-text-muted)}.ft-link-mono{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ft-link);text-decoration:none;transition:color var(--ft-dur-base) var(--ft-ease-out);display:inline-block}.ft-link-mono:hover{color:var(--ft-link-hover)}.ft-brand{font-family:var(--ft-font-display);font-weight:300;letter-spacing:.15em;color:var(--color-washi-800, #3D332A);line-height:1}.ft-brand em{font-style:italic;color:var(--ft-accent)}.ft-brand-sub{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ft-text-muted);margin-top:.375rem;display:block}.ft-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--lib-space-md, 1rem);border-top:1px solid var(--ft-border);padding-top:var(--lib-space-lg, 1.5rem);margin-top:var(--lib-space-lg, 1.5rem)}.ft-copyright{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.12em;color:var(--ft-text-faint)}:host([variant="social"]) footer{background:#fff}.ft-social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-washi-200, #E5DDD3);max-width:640px;margin:0 auto var(--lib-space-xl, 2rem)}.ft-social-cell{background:#fff;padding:var(--lib-space-xl, 2rem) var(--lib-space-lg, 1.5rem);display:flex;flex-direction:column;align-items:center;gap:var(--lib-space-md, 1rem);transition:background var(--ft-dur-base);text-decoration:none}.ft-social-cell:hover{background:var(--color-washi-50, #FAF7F4)}.ft-social-cell.accent:hover{background:var(--color-kaki-50, #FDF3EC)}.ft-social-cell svg{width:22px;height:22px}.ft-social-cell-label{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ft-text-muted)}.ft-social-cell.accent .ft-social-cell-label{color:var(--ft-accent)}.ft-nav-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--lib-space-md, 1rem);border-top:1px solid var(--color-washi-100, #F2EDE6);padding-top:var(--lib-space-lg, 1.5rem)}.ft-nav-links{display:flex;gap:var(--lib-space-lg, 1.5rem)}.ft-acc-brand-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--lib-space-lg, 1.5rem);border-bottom:1px solid var(--ft-border);margin-bottom:var(--lib-space-md, 1rem)}.ft-brand-dark{font-family:var(--ft-font-display);font-weight:300;font-size:1.25rem;letter-spacing:.15em;color:#faf7f48c}.ft-brand-dark em{font-style:italic;color:var(--ft-accent)}.ft-social-mini{display:flex;gap:var(--lib-space-sm, .5rem)}.ft-social-mini-btn{width:32px;height:32px;border:1px solid rgb(255,255,255,.1);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:border-color var(--ft-dur-base);color:#faf7f44d}.ft-social-mini-btn:hover{border-color:#ffffff4d;color:#faf7f4cc}.ft-social-mini-btn svg{width:13px;height:13px;stroke:currentcolor;fill:none;stroke-width:1.6;stroke-linecap:round}.ft-acc-item{border-bottom:1px solid rgb(255,255,255,.06)}.ft-acc-trigger{width:100%;background:none;border:none;display:flex;align-items:center;justify-content:space-between;padding:var(--lib-space-md, 1rem) 0;cursor:pointer;font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:#faf7f459;transition:color var(--ft-dur-base)}.ft-acc-trigger:hover{color:#faf7f4b3}.ft-acc-arrow{width:14px;height:14px;transition:transform var(--ft-dur-base) var(--ft-ease-out);flex-shrink:0}.ft-acc-arrow svg{width:14px;height:14px;stroke:currentcolor;fill:none;stroke-width:1.4;stroke-linecap:round}.ft-acc-body{overflow:hidden;max-height:0;transition:max-height var(--ft-dur-slow) var(--ft-ease-out)}.ft-acc-body-inner{display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem);padding-bottom:var(--lib-space-md, 1rem)}.ft-acc-body-inner a{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.1em;color:#faf7f438;text-decoration:none;transition:color var(--ft-dur-base)}.ft-acc-body-inner a:hover{color:var(--ft-accent)}.ft-kintsugi-seam{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--ft-gold-start) 15%,var(--ft-accent) 35%,var(--ft-gold-mid) 50%,var(--ft-accent) 65%,var(--ft-gold-end) 85%,transparent);background-size:200% 100%;animation:kintsugi-seam 5s linear infinite}.ft-kintsugi-ring{position:absolute;top:-28px;left:50%;transform:translate(-50%);width:56px;height:56px;display:flex;align-items:center;justify-content:center}.ft-kintsugi-ring-track{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:1px solid transparent;border-top-color:#f5d08a99;border-right-color:#b85a1e4d;animation:kintsugi-ring 8s linear infinite}.ft-kintsugi-symbol{font-family:var(--ft-font-display);font-size:1.25rem;color:#faf7f426}.ft-kintsugi-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:var(--lib-space-xl, 2rem);padding-top:var(--lib-space-xl, 2rem)}.ft-kintsugi-col-head{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:#faf7f426;margin-bottom:var(--lib-space-md, 1rem)}.ft-kintsugi-col-links{display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem)}.ft-kintsugi-col-links a{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.1em;color:#faf7f438;text-decoration:none;display:flex;align-items:center;gap:var(--lib-space-xs, .25rem);transition:color var(--ft-dur-base)}.ft-kintsugi-col-links a:hover{color:var(--color-kaki-400, #D97234)}.ft-kintsugi-arrow{color:var(--ft-accent);opacity:.6;flex-shrink:0}:host([variant="glitch"]) footer{position:relative;overflow:hidden;animation:glitch-border 7s ease-in-out infinite}.ft-glitch-scanlines{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(250,247,244,.015) 3px,rgb(250,247,244,.015) 4px);pointer-events:none;animation:scanshift 7s ease-in-out infinite}.ft-glitch-noise{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.02;pointer-events:none}.ft-glitch-cursor{display:inline-block;width:1px;height:.85em;background:var(--ft-accent);vertical-align:middle;margin-left:2px;animation:cursor-blink 1s step-end infinite;opacity:.8}.ft-glitch-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--lib-space-xl, 2rem);padding-top:var(--lib-space-lg, 1.5rem)}.ft-glitch-head{font-family:var(--ft-font-display);font-size:1.5rem;font-weight:300;color:#faf7f466;line-height:1.2;letter-spacing:-.02em;margin-bottom:var(--lib-space-md, 1rem)}.ft-glitch-head em{font-style:italic;color:var(--ft-accent)}.ft-glitch-sub{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.12em;color:#faf7f42e;line-height:2}.ft-glitch-modules-head{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:#faf7f426;margin-bottom:var(--lib-space-md, 1rem)}.ft-glitch-modules-links{display:flex;flex-direction:column;gap:var(--lib-space-sm, .5rem)}.ft-glitch-modules-links a{font-family:var(--ft-font-mono);font-size:.5625rem;letter-spacing:.1em;color:#faf7f438;text-decoration:none;display:flex;align-items:center;gap:var(--lib-space-xs, .25rem);transition:color var(--ft-dur-base)}.ft-glitch-modules-links a:hover{color:var(--color-kaki-400, #D97234)}.ft-glitch-runtime{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.08em;color:#faf7f42e;line-height:2.2}.ft-glitch-runtime span.key{color:#faf7f41a}.ft-glitch-runtime span.celadon{color:var(--color-celadon-400, #4E9482)}.ft-status-row{display:flex;align-items:center;gap:var(--lib-space-sm, .5rem);margin-bottom:var(--lib-space-sm, .5rem)}.ft-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ft-status-dot.online{background:var(--color-celadon-400, #4E9482);animation:status-pulse 1.4s ease-in-out infinite}.ft-status-dot.pending{background:var(--color-kaki-400, #D97234);animation:status-pulse 1.4s ease-in-out infinite 1s}.ft-status-text{font-family:var(--ft-font-mono);font-size:.5rem;letter-spacing:.12em;color:#faf7f433}@keyframes kintsugi-seam{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes kintsugi-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes glitch-border{0%,88%,to{box-shadow:none;opacity:1}89%{box-shadow:-2px 0 #d9723466,2px 0 #4e94824d;transform:translate(-2px)}90%{box-shadow:2px 0 #d972344d,-2px 0 #4e948233;transform:translate(2px)}91%{box-shadow:none;transform:none}}@keyframes scan-shift{0%,88%,to{opacity:1;transform:none}89%{transform:translateY(-3px);opacity:.7}90%{transform:translateY(2px);opacity:.9}91%{transform:none;opacity:1}}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes cursor-blink{0%,to{opacity:.8}50%{opacity:0}}@media(max-width:768px){.ft-kintsugi-grid{grid-template-columns:1fr 1fr}.ft-glitch-grid{grid-template-columns:1fr}.ft-social-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.ft-kintsugi-grid,.ft-social-grid{grid-template-columns:1fr}}}`;
 export {
-  checkboxTemplate
+  componentCss as default
 };
 //# sourceMappingURL=index248.js.map

package/dist/index248.js.map

@@ -1 +1 @@
-{"version":3,"file":"index248.js","sources":["../src/components/atoms/checkbox/lib-checkbox.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibCheckboxSize    = 'sm' | 'md' | 'lg';\nexport type LibCheckboxVariant = 'default' | 'kaki' | 'error';\n\nexport interface CheckboxTemplateProps {\n  checked: boolean;\n  disabled: boolean;\n  indeterminate: boolean;\n  label: string;\n  sublabel: string;\n  value: string;\n  size: LibCheckboxSize;\n  variant: LibCheckboxVariant;\n  onChange: (e: Event) => void;\n}\n\n/** SVG check — polyline del styleguide, animado con ease-bounce */\nconst checkSvg = html`\n  <svg class=\"checkbox__check\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n    <polyline points=\"1.5,5 4,7.5 8.5,2\"/>\n  </svg>\n`;\n\n/** SVG dash — estado indeterminate */\nconst dashEl = html`<span class=\"checkbox__dash\" aria-hidden=\"true\"></span>`;\n\n/**\n * Plantilla para lib-checkbox.\n *\n * Estructura:\n *   label.checkbox\n *     input[type=checkbox]  (capa de interaccion, invisible)\n *     span.checkbox__box    (visual: box + check/dash)\n *     span.checkbox__label  (label-text + sublabel opcional)\n */\nexport function checkboxTemplate(props: CheckboxTemplateProps): TemplateResult {\n  return html`\n    <label class=\"checkbox\">\n\n      <input\n        class=\"checkbox__input\"\n        type=\"checkbox\"\n        .checked=\"${props.checked}\"\n        .indeterminate=\"${props.indeterminate}\"\n        ?disabled=\"${props.disabled}\"\n        value=\"${props.value}\"\n        @change=\"${props.onChange}\"\n      />\n\n      <span class=\"checkbox__box\">\n        ${props.indeterminate ? dashEl : checkSvg}\n      </span>\n\n      ${props.label || props.sublabel\n        ? html`\n            <span class=\"checkbox__label\">\n              ${props.label\n                ? html`<span class=\"checkbox__label-text\">${props.label}</span>`\n                : nothing}\n              ${props.sublabel\n                ? html`<span class=\"checkbox__label-sub\">${props.sublabel}</span>`\n                : nothing}\n            </span>\n          `\n        : html`<slot></slot>`}\n\n    </label>\n  `;\n}"],"names":[],"mappings":";AAkBA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAOjB,MAAM,SAAS;AAWR,SAAS,iBAAiB,OAA8C;AAC7E,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMW,MAAM,OAAO;AAAA,0BACP,MAAM,aAAa;AAAA,qBACxB,MAAM,QAAQ;AAAA,iBAClB,MAAM,KAAK;AAAA,mBACT,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,UAIvB,MAAM,gBAAgB,SAAS,QAAQ;AAAA;AAAA;AAAA,QAGzC,MAAM,SAAS,MAAM,WACnB;AAAA;AAAA,gBAEM,MAAM,QACJ,0CAA0C,MAAM,KAAK,YACrD,OAAO;AAAA,gBACT,MAAM,WACJ,yCAAyC,MAAM,QAAQ,YACvD,OAAO;AAAA;AAAA,cAGf,mBAAmB;AAAA;AAAA;AAAA;AAI7B;"}
+{"version":3,"file":"index248.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index249.js

@@ -1,5 +1,24 @@
-const checkboxCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block}*,*:before,*:after{box-sizing:border-box}}@layer components{.checkbox{display:inline-flex;align-items:flex-start;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none}:host([disabled]) .checkbox{cursor:not-allowed;opacity:.4;pointer-events:none}.checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:0;height:0;margin:0;opacity:0;pointer-events:none}.checkbox__box{width:18px;height:18px;flex-shrink:0;margin-top:2px;border:1px solid var(--border-default);background:var(--bg-elevated);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.checkbox:hover .checkbox__box{border-color:var(--border-strong)}.checkbox__input:focus-visible~.checkbox__box,.checkbox:focus-within .checkbox__box{box-shadow:0 0 0 3px var(--color-ink-20);border-color:var(--color-washi-700)}:host([checked]) .checkbox__box{background:var(--color-washi-900);border-color:var(--color-washi-900)}:host([indeterminate]) .checkbox__box{background:var(--color-washi-900);border-color:var(--color-washi-900)}.checkbox__check{width:10px;height:10px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-base) var(--ease-bounce)}:host([checked]) .checkbox__check{opacity:1;transform:scale(1)}.checkbox__dash{width:8px;height:2px;background:#fff;border-radius:1px;opacity:0;transform:scaleX(.4);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-base) var(--ease-bounce)}:host([indeterminate]) .checkbox__dash{opacity:1;transform:scaleX(1)}.checkbox__label{display:flex;flex-direction:column;gap:var(--lib-space-xs)}.checkbox__label-text{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-primary);line-height:var(--leading-snug);transition:color var(--duration-fast)}.checkbox__label-sub{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);line-height:var(--leading-snug)}:host([size="sm"]) .checkbox__box{width:14px;height:14px}:host([size="sm"]) .checkbox__check{width:8px;height:8px;stroke-width:2.5}:host([size="sm"]) .checkbox__dash{width:6px;height:1.5px}:host([size="sm"]) .checkbox__label-text{font-size:var(--text-sm)}:host([size="lg"]) .checkbox__box{width:22px;height:22px}:host([size="lg"]) .checkbox__check{width:13px;height:13px}:host([size="lg"]) .checkbox__dash{width:10px;height:2.5px}:host([size="lg"]) .checkbox__label-text{font-size:var(--text-md)}:host([variant="kaki"][checked]) .checkbox__box,:host([variant="kaki"][indeterminate]) .checkbox__box{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}:host([variant="kaki"]) .checkbox:hover .checkbox__box{border-color:var(--color-kaki-400)}:host([variant="kaki"]) .checkbox:focus-within .checkbox__box{box-shadow:0 0 0 3px #6d4d3e1f;border-color:var(--color-kaki-500)}:host([variant="error"]) .checkbox__box{border-color:var(--color-error)}:host([variant="error"]) .checkbox:hover .checkbox__box{border-color:var(--color-error)}:host([variant="error"]) .checkbox__label-text{color:var(--color-error)}@media(prefers-reduced-motion:reduce){.checkbox__box,.checkbox__check,.checkbox__dash{transition:none}}}';
+import { html } from "lit";
+function horizontalScrollTemplate(ctx) {
+  return html`
+    <div class="sticky-wrapper" part="wrapper">
+
+      <div class="horizontal-content" part="content">
+        <slot></slot>
+      </div>
+
+      <div class="progress-bar" part="progress-bar" ?hidden="${!ctx.showProgress}">
+        <div class="progress-fill" part="progress-fill"></div>
+      </div>
+
+      <span class="counter" part="counter" ?hidden="${!ctx.showProgress}">
+        0%
+      </span>
+
+    </div>
+  `;
+}
 export {
-  checkboxCss as default
+  horizontalScrollTemplate
 };
 //# sourceMappingURL=index249.js.map

package/dist/index249.js.map

@@ -1 +1 @@
-{"version":3,"file":"index249.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index249.js","sources":["../src/components/organisms/horizontal-scroll-section/lib-horizontal-scroll-section.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibHorizontalScrollSection } from './lib-horizontal-scroll-section.component';\n\nexport function horizontalScrollTemplate(ctx: LibHorizontalScrollSection): TemplateResult {\n  return html`\n    <div class=\"sticky-wrapper\" part=\"wrapper\">\n\n      <div class=\"horizontal-content\" part=\"content\">\n        <slot></slot>\n      </div>\n\n      <div class=\"progress-bar\" part=\"progress-bar\" ?hidden=\"${!ctx.showProgress}\">\n        <div class=\"progress-fill\" part=\"progress-fill\"></div>\n      </div>\n\n      <span class=\"counter\" part=\"counter\" ?hidden=\"${!ctx.showProgress}\">\n        0%\n      </span>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,yBAAyB,KAAiD;AACxF,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+DAOsD,CAAC,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA,sDAI1B,CAAC,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvE;"}

package/dist/index25.js

@@ -1,8 +1,8 @@
-import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { spotlightCardTemplate } from "./index235.js";
-import spotlightCss from "./index236.js";
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { getIcon } from "./index3.js";
 import sharedTokens from "./index196.js";
+import iconStyles from "./index308.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,46 +13,65 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibSpotlightCard = class extends LitElement {
+let LibIcon = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.spotlight = "kaki";
-    this.kintsugi = false;
+    this.name = "";
+    this.size = "md";
+    this.variant = "default";
+    this._svgContent = "";
   }
-  render() {
-    return spotlightCardTemplate({
-      spotlight: this.spotlight,
-      kintsugi: this.kintsugi,
-      onMouseMove: this._handleMouseMove.bind(this),
-      onMouseLeave: this._handleMouseLeave.bind(this)
-    });
+  willUpdate(changedProperties) {
+    if (changedProperties.has("name")) {
+      this._loadIcon();
+    }
   }
-  _handleMouseMove(e) {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = (e.clientX - rect.left) / rect.width * 100;
-    const y = (e.clientY - rect.top) / rect.height * 100;
-    this.style.setProperty("--lib-spotlight-x", `${x}%`);
-    this.style.setProperty("--lib-spotlight-y", `${y}%`);
+  // 4. Buscamos el SVG en tu registro y lo guardamos en el estado
+  //TODO: Implementar nominale vs. generico
+  _loadIcon() {
+    const iconNominale = getIcon(this.name);
+    console.log(iconNominale);
+    if (iconNominale) {
+      this._svgContent = iconNominale ?? "";
+      this.requestUpdate();
+    } else {
+      this._svgContent = "";
+    }
   }
-  _handleMouseLeave() {
-    this.style.setProperty("--lib-spotlight-x", "50%");
-    this.style.setProperty("--lib-spotlight-y", "50%");
+  render() {
+    const sizeVar = `var(--lib-font-size-${this.size})`;
+    const variantClass = this.variant !== "default" ? `variant-${this.variant}` : "";
+    return html`
+      <div
+        class="icon-wrapper ${variantClass}"
+        style="--lib-icon-size: ${sizeVar}"
+        aria-hidden="true"
+        .innerHTML="${this._svgContent}"
+      >
+      </div>
+    `;
   }
 };
-LibSpotlightCard.styles = [
+LibIcon.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(spotlightCss)}`
+  css`${unsafeCSS(iconStyles)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
-], LibSpotlightCard.prototype, "spotlight", 2);
+], LibIcon.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], LibIcon.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], LibIcon.prototype, "variant", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSpotlightCard.prototype, "kintsugi", 2);
-LibSpotlightCard = __decorateClass([
-  customElement("lib-spotlight-card")
-], LibSpotlightCard);
+  state()
+], LibIcon.prototype, "_svgContent", 2);
+LibIcon = __decorateClass([
+  customElement("lib-icon")
+], LibIcon);
 export {
-  LibSpotlightCard
+  LibIcon
 };
 //# sourceMappingURL=index25.js.map

package/dist/index25.js.map

@@ -1 +1 @@
-{"version":3,"file":"index25.js","sources":["../src/components/atoms/card/spotlight-card/lib-spotlight-card.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibSpotlightVariant } from './lib-spotlight-card.types';\nimport { spotlightCardTemplate } from './lib-spotlight-card.html';\nimport spotlightCss from './lib-spotlight-card.css?inline';\nimport sharedTokens from '../../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-spotlight-card\n *\n * Contenedor con foco de luz reactivo al cursor (Kintsugi Digital).\n * El gradiente radial sigue al puntero actualizando\n * `--lib-spotlight-x` y `--lib-spotlight-y` en :host.\n *\n * Con `kintsugi` activo añade el hilo de oro en el borde\n * y cambia el fondo a un tono cálido oscuro.\n *\n * @slot - Contenido de la card.\n *\n * @example — spotlight kaki\n * <lib-spotlight-card>...</lib-spotlight-card>\n *\n * @example — spotlight water\n * <lib-spotlight-card spotlight=\"water\">...</lib-spotlight-card>\n *\n * @example — kintsugi border + spotlight kaki\n * <lib-spotlight-card kintsugi>...</lib-spotlight-card>\n */\n@customElement('lib-spotlight-card')\nexport class LibSpotlightCard extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(spotlightCss)}`,\n  ];\n\n  /**\n   * Color del foco de luz.\n   * - kaki  : orgánico cálido — oklch(45% 0.05 45)  [default]\n   * - water : azul sereno    — oklch(55% 0.06 210)\n   * - white : neutro         — oklch(100% 0 0)\n   *\n   * Nota: cuando `kintsugi` está activo el spotlight es siempre kaki.\n   */\n  @property({ type: String, reflect: true })\n  spotlight: LibSpotlightVariant = 'kaki';\n\n  /**\n   * Activa el hilo de oro en el borde (--lib-kintsugi-border)\n   * y cambia el fondo del contenedor a un tono cálido oscuro.\n   */\n  @property({ type: Boolean, reflect: true })\n  kintsugi = false;\n\n  override render(): TemplateResult {\n    return spotlightCardTemplate({\n      spotlight:    this.spotlight,\n      kintsugi:     this.kintsugi,\n      onMouseMove:  this._handleMouseMove.bind(this),\n      onMouseLeave: this._handleMouseLeave.bind(this),\n    });\n  }\n\n  private _handleMouseMove(e: MouseEvent): void {\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const x = ((e.clientX - rect.left) / rect.width)  * 100;\n    const y = ((e.clientY - rect.top)  / rect.height) * 100;\n\n    // Actualiza las custom properties en :host\n    // El radial-gradient del CSS las consume automáticamente\n    this.style.setProperty('--lib-spotlight-x', `${x}%`);\n    this.style.setProperty('--lib-spotlight-y', `${y}%`);\n  }\n\n  private _handleMouseLeave(): void {\n    // Resetea al centro — la layer se oculta vía CSS opacity: 0\n    this.style.setProperty('--lib-spotlight-x', '50%');\n    this.style.setProperty('--lib-spotlight-y', '50%');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-spotlight-card': LibSpotlightCard;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6BO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAeL,SAAA,YAAiC;AAOjC,SAAA,WAAW;AAAA,EAAA;AAAA,EAEF,SAAyB;AAChC,WAAO,sBAAsB;AAAA,MAC3B,WAAc,KAAK;AAAA,MACnB,UAAc,KAAK;AAAA,MACnB,aAAc,KAAK,iBAAiB,KAAK,IAAI;AAAA,MAC7C,cAAc,KAAK,kBAAkB,KAAK,IAAI;AAAA,IAAA,CAC/C;AAAA,EACH;AAAA,EAEQ,iBAAiB,GAAqB;AAC5C,UAAM,OAAQ,EAAE,cAA8B,sBAAA;AAC9C,UAAM,KAAM,EAAE,UAAU,KAAK,QAAQ,KAAK,QAAU;AACpD,UAAM,KAAM,EAAE,UAAU,KAAK,OAAQ,KAAK,SAAU;AAIpD,SAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AACnD,SAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AAAA,EACrD;AAAA,EAEQ,oBAA0B;AAEhC,SAAK,MAAM,YAAY,qBAAqB,KAAK;AACjD,SAAK,MAAM,YAAY,qBAAqB,KAAK;AAAA,EACnD;AACF;AAjDa,iBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAd9B,iBAeX,WAAA,aAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GArB/B,iBAsBX,WAAA,YAAA,CAAA;AAtBW,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}
+{"version":3,"file":"index25.js","sources":["../src/components/atoms/icon/lib-icon.component.ts"],"sourcesContent":["import { LitElement, html, css, unsafeCSS, TemplateResult } from 'lit';\n// 1. Añadimos 'state' a las importaciones de lit/decorators\nimport { customElement, property, state } from 'lit/decorators.js'; \n//import { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { getIcon/*, ICON_REGISTRY*/ } from '../../../shared/icons/icon-registry';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport iconStyles from './lib-icon.css?inline';\n\n@customElement('lib-icon')\nexport class LibIcon extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(iconStyles)}`,\n  ];\n\n  @property({ type: String, reflect: true }) name: string = '';\n  @property({ type: String }) size: string = 'md';\n  @property({ type: String }) variant: string = 'default';\n\n  // 2. DECLARAMOS EL ESTADO INTERNO (Esta es la pieza que faltaba)\n  @state() private _svgContent: string = '';\n\n  override willUpdate(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('name')) {\n      this._loadIcon();\n    }\n  }\n\n  // 4. Buscamos el SVG en tu registro y lo guardamos en el estado\n  //TODO: Implementar nominale vs. generico\n  private _loadIcon(): void {\n    //const icon = ICON_REGISTRY[this.name];\n    const iconNominale = getIcon(this.name);\n    console.log(iconNominale);\n    if (iconNominale) {\n      this._svgContent = iconNominale ?? '';\n      this.requestUpdate();\n    } else {\n      this._svgContent = ''; // Si no existe, limpiamos\n      //console.warn(`Icono \"${this.name}\" no encontrado.`);\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const sizeVar: string = `var(--lib-font-size-${this.size})`;\n    const variantClass: string = this.variant !== 'default' ? `variant-${this.variant}` : '';\n    \n\n    return html`\n      <div\n        class=\"icon-wrapper ${variantClass}\"\n        style=\"--lib-icon-size: ${sizeVar}\"\n        aria-hidden=\"true\"\n        .innerHTML=\"${this._svgContent}\"\n      >\n      </div>\n    `;\n  }\n}\n\n//        ${this._svgContent ? unsafeSVG(this._svgContent) : html`<span></span>`}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AASO,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAMsC,SAAA,OAAe;AAC9B,SAAA,OAAe;AACf,SAAA,UAAkB;AAGrC,SAAQ,cAAsB;AAAA,EAAA;AAAA,EAE9B,WAAW,mBAA+C;AACjE,QAAI,kBAAkB,IAAI,MAAM,GAAG;AACjC,WAAK,UAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA;AAAA,EAIQ,YAAkB;AAExB,UAAM,eAAe,QAAQ,KAAK,IAAI;AACtC,YAAQ,IAAI,YAAY;AACxB,QAAI,cAAc;AAChB,WAAK,cAAc,gBAAgB;AACnC,WAAK,cAAA;AAAA,IACP,OAAO;AACL,WAAK,cAAc;AAAA,IAErB;AAAA,EACF;AAAA,EAEmB,SAAyB;AAC1C,UAAM,UAAkB,uBAAuB,KAAK,IAAI;AACxD,UAAM,eAAuB,KAAK,YAAY,YAAY,WAAW,KAAK,OAAO,KAAK;AAGtF,WAAO;AAAA;AAAA,8BAEmB,YAAY;AAAA,kCACR,OAAO;AAAA;AAAA,sBAEnB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpC;AACF;AAjDa,QACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,UAAU,CAAC;AAC7B;AAE2C,gBAAA;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAN9B,QAMgC,WAAA,QAAA,CAAA;AACf,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,QAOiB,WAAA,QAAA,CAAA;AACA,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,QAQiB,WAAA,WAAA,CAAA;AAGX,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAXI,QAWM,WAAA,eAAA,CAAA;AAXN,UAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,OAAA;"}

package/dist/index250.js

@@ -1,34 +1,5 @@
-import { nothing, html } from "lit";
-function radioTemplate(props) {
-  return html`
-    <label class="radio">
-
-      <input
-        class="radio__input"
-        type="radio"
-        id="${props.radioId}"
-        name="${props.name}"
-        value="${props.value}"
-        .checked="${props.checked}"
-        ?disabled="${props.disabled}"
-        @change="${props.onChange}"
-      />
-
-      <span class="radio__circle">
-        <span class="radio__dot"></span>
-      </span>
-
-      ${props.label || props.sublabel ? html`
-            <span class="radio__label">
-              ${props.label ? html`<span class="radio__label-text">${props.label}</span>` : nothing}
-              ${props.sublabel ? html`<span class="radio__label-sub">${props.sublabel}</span>` : nothing}
-            </span>
-          ` : html`<slot></slot>`}
-
-    </label>
-  `;
-}
+const sectionCss = "@layer tokens,reset,components;@layer reset{:host{display:block;position:relative}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{height:var(--_scroll-height, 300vh)}.sticky-wrapper{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;background:var(--bg-base)}.horizontal-content{display:flex;gap:var(--_gap, calc(var(--lib-space-xl) * 2));padding:0 calc(var(--_padding-inline, 10) * 1vw);will-change:transform}::slotted(*){flex-shrink:0}.progress-bar{position:absolute;bottom:var(--lib-space-xl);left:calc(var(--_padding-inline, 10) * 1vw);width:calc(100% - (var(--_padding-inline, 10) * 2vw));height:1px;background:var(--border-subtle)}.progress-fill{height:100%;width:0%;background:var(--color-washi-900);transition:width 80ms linear}.counter{position:absolute;bottom:calc(var(--lib-space-xl) + 16px);right:calc(var(--_padding-inline, 10) * 1vw);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--text-muted);-webkit-user-select:none;user-select:none}}";
 export {
-  radioTemplate
+  sectionCss as default
 };
 //# sourceMappingURL=index250.js.map

package/dist/index250.js.map

@@ -1 +1 @@
-{"version":3,"file":"index250.js","sources":["../src/components/atoms/radio/lib-radio.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibRadioSize    = 'sm' | 'md' | 'lg';\nexport type LibRadioVariant = 'default' | 'kaki' | 'error';\n\nexport interface RadioTemplateProps {\n  radioId: string;\n  name: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  label: string;\n  sublabel: string;\n  size: LibRadioSize;\n  variant: LibRadioVariant;\n  onChange: (e: Event) => void;\n}\n\n/**\n * Plantilla para lib-radio.\n *\n * Estructura:\n *   label.radio\n *     input[type=radio]   (invisible, capa de interaccion)\n *     span.radio__circle  (visual: circulo + dot interior)\n *     span.radio__label   (label-text + sublabel opcional)\n */\nexport function radioTemplate(props: RadioTemplateProps): TemplateResult {\n  return html`\n    <label class=\"radio\">\n\n      <input\n        class=\"radio__input\"\n        type=\"radio\"\n        id=\"${props.radioId}\"\n        name=\"${props.name}\"\n        value=\"${props.value}\"\n        .checked=\"${props.checked}\"\n        ?disabled=\"${props.disabled}\"\n        @change=\"${props.onChange}\"\n      />\n\n      <span class=\"radio__circle\">\n        <span class=\"radio__dot\"></span>\n      </span>\n\n      ${props.label || props.sublabel\n        ? html`\n            <span class=\"radio__label\">\n              ${props.label\n                ? html`<span class=\"radio__label-text\">${props.label}</span>`\n                : nothing}\n              ${props.sublabel\n                ? html`<span class=\"radio__label-sub\">${props.sublabel}</span>`\n                : nothing}\n            </span>\n          `\n        : html`<slot></slot>`}\n\n    </label>\n  `;\n}"],"names":[],"mappings":";AA2BO,SAAS,cAAc,OAA2C;AACvE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMK,MAAM,OAAO;AAAA,gBACX,MAAM,IAAI;AAAA,iBACT,MAAM,KAAK;AAAA,oBACR,MAAM,OAAO;AAAA,qBACZ,MAAM,QAAQ;AAAA,mBAChB,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOzB,MAAM,SAAS,MAAM,WACnB;AAAA;AAAA,gBAEM,MAAM,QACJ,uCAAuC,MAAM,KAAK,YAClD,OAAO;AAAA,gBACT,MAAM,WACJ,sCAAsC,MAAM,QAAQ,YACpD,OAAO;AAAA;AAAA,cAGf,mBAAmB;AAAA;AAAA;AAAA;AAI7B;"}
+{"version":3,"file":"index250.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}