@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index346.js

@@ -1,271 +1,5 @@
-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);
-  }
-}
+const textListCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:block}}@layer components{.lst{list-style:none;display:flex;flex-direction:column;gap:var(--lib-space-sm)}.lst-item{display:flex;align-items:baseline;gap:var(--lib-space-sm);font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);padding:var(--lib-space-xs) 0}.lst-item-text{flex:1}ul.lst .lst-item:before{content:"";width:4px;height:4px;border-radius:var(--radius-full);background:var(--color-washi-400);flex-shrink:0;margin-top:.55em}ol.lst{counter-reset:lst-counter}ol.lst .lst-item{counter-increment:lst-counter}ol.lst .lst-item:before{content:counter(lst-counter,decimal) ".";font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);flex-shrink:0;min-width:18px;margin-top:0}ol.lst.lst-ordered-roman .lst-item:before{content:counter(lst-counter,upper-roman) "."}ol.lst.lst-ordered-alpha .lst-item:before{content:counter(lst-counter,lower-alpha) "."}ul.lst.lst-kaki .lst-item:before{background:var(--color-kaki-400)}ul.lst.lst-dash .lst-item:before{content:"—";width:auto;height:auto;border-radius:0;background:none;font-family:var(--lib-font-mono);font-size:10px;color:var(--text-muted);margin-top:0}ul.lst.lst-checked .lst-item:before{content:none}.lst-check-icon{display:flex;align-items:center;flex-shrink:0;font-size:14px;color:var(--color-celadon-500);margin-top:2px}.lst .lst{margin-left:var(--lib-space-md);margin-top:var(--lib-space-xs)}.lst .lst .lst-item:before{background:var(--color-washi-300);width:3px;height:3px}.lst.lst-sm .lst-item{font-size:var(--text-xs);gap:var(--lib-space-sm)}.lst.lst-lg .lst-item{font-size:var(--text-base);gap:var(--lib-space-md)}.lst-ui{list-style:none;display:flex;flex-direction:column;background:var(--bg-elevated)}.lst-ui.lst-bordered{border:1px solid var(--border-subtle)}.lst-ui.lst-inset{background:var(--bg-surface)}.lst-row{display:flex;align-items:center;gap:var(--lib-space-md);padding:var(--lib-space-md) var(--lib-space-md);position:relative;transition:background var(--duration-fast)}.lst-ui.lst-divided .lst-row{border-bottom:1px solid var(--border-subtle)}.lst-ui.lst-divided .lst-row:last-child{border-bottom:none}.lst-ui.lst-interactive .lst-row{cursor:pointer;-webkit-user-select:none;user-select:none}.lst-ui.lst-interactive .lst-row:hover{background:var(--bg-surface)}.lst-ui.lst-interactive .lst-row:active{background:var(--color-washi-200)}.lst-row.is-selected{background:var(--color-kaki-50)!important}.lst-row.is-selected .lst-row-label{color:var(--text-primary)}.lst-row.is-disabled{opacity:.38;cursor:not-allowed!important;pointer-events:none}.lst-row.is-danger .lst-row-label,.lst-row.is-danger .lst-row-icon{color:var(--color-error)}.lst-ui.lst-interactive .lst-row.is-danger:hover{background:#fff8f7}.lst-ui.lst-sm .lst-row{padding:var(--lib-space-sm) var(--lib-space-md);gap:var(--lib-space-sm)}.lst-ui.lst-lg .lst-row{padding:calc(var(--lib-space-md) + var(--lib-space-xs)) var(--lib-space-md);gap:var(--lib-space-md)}.lst-row-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-muted);background:var(--bg-surface);border:1px solid var(--border-subtle);transition:color var(--duration-fast),background var(--duration-fast)}.lst-ui.lst-sm .lst-row-icon{width:28px;height:28px;font-size:14px}.lst-ui.lst-lg .lst-row-icon{width:44px;height:44px;font-size:22px}.lst-row-icon.icon-kaki{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.lst-row-icon.icon-celadon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.lst-row-icon.icon-error{background:#fff8f7;border-color:#f5c4bc;color:var(--color-error)}.lst-row-icon.icon-info{background:#d6e8f5;border-color:#d6e8f5;color:#1a4a6e}.lst-row-icon.icon-plain{background:transparent;border:none}.lst-row-icon.icon-round{border-radius:var(--radius-full)}.lst-row-avatar{width:36px;height:36px;border-radius:var(--radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:10px;background:var(--color-washi-200);color:var(--text-secondary)}.lst-ui.lst-sm .lst-row-avatar{width:28px;height:28px;font-size:8px}.lst-ui.lst-lg .lst-row-avatar{width:44px;height:44px;font-size:12px}.lst-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.lst-row-label{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-snug);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lst-row-desc{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lst-ui.lst-lg .lst-row-label{font-size:var(--text-base)}.lst-ui.lst-sm .lst-row-label{font-size:var(--text-xs)}.lst-ui.lst-sm .lst-row-desc{font-size:9px}.lst-row-meta{flex-shrink:0;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);display:flex;align-items:center;gap:var(--lib-space-sm)}.lst-row-action{flex-shrink:0;font-size:16px;color:var(--text-muted);display:flex;align-items:center;transition:color var(--duration-fast),transform var(--duration-base)}.lst-ui.lst-interactive .lst-row:hover .lst-row-action{color:var(--text-secondary);transform:translate(2px)}.lst-badge{display:inline-flex;align-items:center;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);text-transform:uppercase;padding:1px var(--lib-space-sm)}.lst-badge-default{background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border-subtle)}.lst-badge-kaki{background:var(--color-kaki-50);color:var(--color-kaki-500);border:1px solid var(--color-kaki-100)}.lst-badge-celadon{background:var(--color-celadon-50);color:var(--color-celadon-500);border:1px solid var(--color-celadon-100)}.lst-badge-error{background:#fff8f7;color:var(--color-error);border:1px solid #F5C4BC}.lst-row-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:18px;border-radius:var(--radius-full);background:var(--color-washi-300);border:none;cursor:pointer;position:relative;flex-shrink:0;transition:background var(--duration-base)}.lst-row-toggle:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:var(--radius-full);background:var(--color-white);box-shadow:0 1px 3px #0003;transition:transform var(--duration-base) var(--ease-out)}.lst-row-toggle:checked{background:var(--color-washi-900)}.lst-row-toggle:checked:after{transform:translate(14px)}.lst-section-header{padding:var(--lib-space-sm) var(--lib-space-md) var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}.lst-section-header:not(:first-child){border-top:1px solid var(--border-subtle);margin-top:var(--lib-space-xs)}.lst-sep{height:1px;background:var(--border-subtle);margin:var(--lib-space-xs) 0;list-style:none}.lst-dl{display:grid;grid-template-columns:auto 1fr;gap:var(--lib-space-sm) var(--lib-space-lg);align-items:baseline}.lst-dl.lst-dl-wide{grid-template-columns:180px 1fr}.lst-dl.lst-dl-stack{grid-template-columns:1fr;gap:var(--lib-space-md)}.lst-dl.lst-dl-divided .lst-dt,.lst-dl.lst-dl-divided .lst-dd{border-bottom:1px solid var(--border-subtle);padding-bottom:var(--lib-space-sm);padding-top:var(--lib-space-sm)}.lst-dl.lst-dl-divided .lst-dt:first-of-type,.lst-dl.lst-dl-divided .lst-dd:first-of-type{padding-top:0}.lst-dl.lst-dl-stack .lst-dt{margin-bottom:calc(-1 * var(--lib-space-xs))}.lst-dt{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);white-space:nowrap}.lst-dd{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-snug);margin:0}.lst-dd.lst-dd-mono{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)}:host([dark]) ul.lst .lst-item:before{background:#312620}:host([dark]) ol.lst .lst-item:before{color:#2a1f19}:host([dark]) .lst-item{color:#6d6059}:host([dark]) .lst-ui{background:#0a0403}:host([dark]) .lst-ui.lst-bordered{border-color:#190f0a}:host([dark]) .lst-ui.lst-inset{background:#060201}:host([dark]) .lst-ui.lst-divided .lst-row{border-color:#150a06}:host([dark]) .lst-ui.lst-interactive .lst-row:hover{background:#150a06}:host([dark]) .lst-section-header{background:#060201;border-color:#150a06;color:#2a1f19}:host([dark]) .lst-sep{background:#150a06}:host([dark]) .lst-row-icon{background:#150a06;border-color:#1e130e;color:#362b25}:host([dark]) .lst-row-avatar{background:#1e130e;color:#51453e}:host([dark]) .lst-row-label{color:#7b6f67}:host([dark]) .lst-row-desc{color:#362b25}:host([dark]) .lst-row-meta{color:#312620}:host([dark]) .lst-row-action{color:#2a1f19}:host([dark]) .lst-row.is-selected{background:#190f0a!important}:host([dark]) .lst-row-toggle{background:#2a1f1a}:host([dark]) .lst-dt{color:#312620}:host([dark]) .lst-dd{color:#6d6059}:host([dark]) .lst-dd-mono{color:#574a43}:host([dark]) .lst-dl.lst-dl-divided .lst-dt,:host([dark]) .lst-dl.lst-dl-divided .lst-dd{border-color:#150a06}.lst-item.skeleton .lst-skeleton-line{display:inline-block;width:65%;height:.75rem;background:var(--color-washi-200);border-radius:var(--radius-sm);position:relative;overflow:hidden}.lst-item.skeleton .lst-skeleton-line:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,#fff0,#fff9,#fff0);animation:lst-shimmer 1.8s infinite}@keyframes lst-shimmer{to{transform:translate(100%)}}}';
 export {
-  renderAccordion,
-  renderFooter,
-  renderGlitch,
-  renderKintsugi,
-  renderSocial
+  textListCss as default
 };
 //# sourceMappingURL=index346.js.map

package/dist/index346.js.map

@@ -1 +1 @@
-{"version":3,"file":"index346.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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"}
+{"version":3,"file":"index346.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index347.js

@@ -1,5 +1,179 @@
-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}}}`;
+import { html, nothing } from "lit";
+import { map as o } from "./index232.js";
+function renderContentItem(item, marker) {
+  return html`
+    <li class="lst-item">
+      ${marker === "check" ? html`
+            <span class="lst-check-icon" style="${item.checked === false ? "color:var(--color-washi-300)" : ""}">
+              <lib-icon
+                name="${item.checked === false ? "circle" : "check-circle"}"
+                weight="${item.checked === false ? "regular" : "fill"}"
+                size="sm"
+              ></lib-icon>
+            </span>` : nothing}
+
+      <span class="lst-item-text">${item.label}</span>
+
+      ${item.children && item.children.length ? html`
+            <ul class="lst">
+              ${o(
+    item.children,
+    (child) => renderContentItem(child, marker)
+  )}
+            </ul>` : nothing}
+    </li>
+  `;
+}
+function renderUiItem(item, interactive, onRowClick, onToggle) {
+  if (item.type === "separator") {
+    return html`<li class="lst-sep" role="separator"></li>`;
+  }
+  if (item.type === "header") {
+    const h = item;
+    return html`<li class="lst-section-header">${h.label}</li>`;
+  }
+  const row = item;
+  const rowCls = [
+    "lst-row",
+    row.selected ? "is-selected" : "",
+    row.disabled ? "is-disabled" : "",
+    row.danger ? "is-danger" : ""
+  ].filter(Boolean).join(" ");
+  return html`
+    <li
+      class="${rowCls}"
+      role="${interactive ? "button" : "listitem"}"
+      tabindex="${interactive && !row.disabled ? "0" : "-1"}"
+      aria-selected="${row.selected ?? false}"
+      aria-disabled="${row.disabled ?? false}"
+      @click="${() => {
+    if (!row.disabled) onRowClick(row);
+  }}"
+      @keydown="${(e) => {
+    if ((e.key === "Enter" || e.key === " ") && !row.disabled) {
+      e.preventDefault();
+      onRowClick(row);
+    }
+  }}"
+    >
+      <!-- Icon o Avatar -->
+      ${row.avatar ? html`<div class="lst-row-avatar">${row.avatar}</div>` : row.icon ? html`
+              <div class="lst-row-icon ${row.iconVariant ? `icon-${row.iconVariant}` : ""}">
+                <lib-icon name="${row.icon}" size="sm"></lib-icon>
+              </div>` : nothing}
+
+      <!-- Body -->
+      <div class="lst-row-body">
+        <span class="lst-row-label">${row.label}</span>
+        ${row.desc ? html`<span class="lst-row-desc">${row.desc}</span>` : nothing}
+      </div>
+
+      <!-- Meta -->
+      ${row.meta ? html`<span class="lst-row-meta">${row.meta}</span>` : nothing}
+
+      <!-- Badge -->
+      ${row.badge ? html`
+            <span class="lst-badge lst-badge-${row.badge.variant ?? "default"}">
+              ${row.badge.label}
+            </span>` : nothing}
+
+      <!-- Toggle -->
+      ${row.toggle != null ? html`
+            <input
+              type="checkbox"
+              class="lst-row-toggle"
+              .checked="${row.toggle}"
+              @click="${(e) => {
+    e.stopPropagation();
+    const target = e.currentTarget;
+    onToggle(row, target.checked);
+  }}"
+              aria-label="${row.label}"
+            />` : nothing}
+
+      <!-- Chevron -->
+      ${row.chevron ? html`
+            <span class="lst-row-action">
+              <lib-icon name="caret-right" size="sm"></lib-icon>
+            </span>` : nothing}
+    </li>
+  `;
+}
+function renderDlItem(item) {
+  return html`
+    <dt class="lst-dt">${item.term}</dt>
+    <dd class="lst-dd ${item.mono ? "lst-dd-mono" : ""}">${item.description}</dd>
+  `;
+}
+function textListTemplate(props) {
+  const {
+    family,
+    contentItems,
+    marker,
+    counter,
+    size,
+    uiItems,
+    divided,
+    bordered,
+    inset,
+    interactive,
+    dark,
+    dlItems,
+    dlLayout,
+    dlDivided,
+    onRowClick,
+    onToggle
+  } = props;
+  if (family === "ul" || family === "ol") {
+    const trackCls = [
+      "lst",
+      size !== "md" ? `lst-${size}` : "",
+      marker === "kaki" ? "lst-kaki" : "",
+      marker === "dash" ? "lst-dash" : "",
+      marker === "check" ? "lst-checked" : "",
+      family === "ol" && counter === "roman" ? "lst-ordered-roman" : "",
+      family === "ol" && counter === "alpha" ? "lst-ordered-alpha" : ""
+    ].filter(Boolean).join(" ");
+    const items = html`
+      ${o(contentItems, (item) => renderContentItem(item, marker))}
+    `;
+    return family === "ol" ? html`<ol class="${trackCls}">${items}</ol>` : html`<ul class="${trackCls}">${items}</ul>`;
+  }
+  if (family === "ui") {
+    const trackCls = [
+      "lst-ui",
+      divided ? "lst-divided" : "",
+      bordered ? "lst-bordered" : "",
+      inset ? "lst-inset" : "",
+      interactive ? "lst-interactive" : "",
+      dark ? "lst-dark" : ""
+    ].filter(Boolean).join(" ");
+    return html`
+      <ul
+        class="${trackCls}"
+        role="${interactive ? "listbox" : "list"}"
+      >
+        ${o(
+      uiItems,
+      (item) => renderUiItem(item, interactive, onRowClick, onToggle)
+    )}
+      </ul>
+    `;
+  }
+  const dlCls = [
+    "lst-dl",
+    dlLayout === "wide" ? "lst-dl-wide" : "",
+    dlLayout === "stack" ? "lst-dl-stack" : "",
+    dlDivided ? "lst-dl-divided" : "",
+    dark ? "lst-dark" : ""
+  ].filter(Boolean).join(" ");
+  return html`
+    <dl class="${dlCls}">
+      ${o(dlItems, (item) => renderDlItem(item))}
+    </dl>
+  `;
+}
 export {
-  componentCss as default
+  textListTemplate
 };
 //# sourceMappingURL=index347.js.map

package/dist/index347.js.map

@@ -1 +1 @@
-{"version":3,"file":"index347.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index347.js","sources":["../src/components/atoms/text-list/lib-text-list.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport type {\n  TextListTemplateProps,\n  ContentItem,\n  UiItem,\n  UiRow,\n  UiSectionHeader,\n  DlItem,\n} from './lib-text-list.types';\n\n/* ================================================================\n   HELPERS — Content List\n   ================================================================ */\n\nfunction renderContentItem(\n  item: ContentItem,\n  marker: TextListTemplateProps['marker'],\n): TemplateResult {\n  return html`\n    <li class=\"lst-item\">\n      ${marker === 'check'\n        ? html`\n            <span class=\"lst-check-icon\" style=\"${item.checked === false ? 'color:var(--color-washi-300)' : ''}\">\n              <lib-icon\n                name=\"${item.checked === false ? 'circle' : 'check-circle'}\"\n                weight=\"${item.checked === false ? 'regular' : 'fill'}\"\n                size=\"sm\"\n              ></lib-icon>\n            </span>`\n        : nothing}\n\n      <span class=\"lst-item-text\">${item.label}</span>\n\n      ${item.children && item.children.length\n        ? html`\n            <ul class=\"lst\">\n              ${map(item.children, (child: ContentItem) =>\n                renderContentItem(child, marker)\n              )}\n            </ul>`\n        : nothing}\n    </li>\n  `;\n}\n\n/* ================================================================\n   HELPERS — UI List\n   ================================================================ */\n\nfunction renderUiItem(\n  item: UiItem,\n  interactive: boolean,\n  onRowClick: (r: UiRow) => void,\n  onToggle: (r: UiRow, v: boolean) => void,\n): TemplateResult {\n  /* Separator */\n  if (item.type === 'separator') {\n    return html`<li class=\"lst-sep\" role=\"separator\"></li>`;\n  }\n\n  /* Section header */\n  if (item.type === 'header') {\n    const h = item as UiSectionHeader;\n    return html`<li class=\"lst-section-header\">${h.label}</li>`;\n  }\n\n  /* Row */\n  const row = item as UiRow;\n  const rowCls = [\n    'lst-row',\n    row.selected ? 'is-selected' : '',\n    row.disabled ? 'is-disabled' : '',\n    row.danger   ? 'is-danger'   : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <li\n      class=\"${rowCls}\"\n      role=\"${interactive ? 'button' : 'listitem'}\"\n      tabindex=\"${interactive && !row.disabled ? '0' : '-1'}\"\n      aria-selected=\"${row.selected ?? false}\"\n      aria-disabled=\"${row.disabled ?? false}\"\n      @click=\"${(): void => { if (!row.disabled) onRowClick(row); }}\"\n      @keydown=\"${(e: KeyboardEvent): void => {\n        if ((e.key === 'Enter' || e.key === ' ') && !row.disabled) {\n          e.preventDefault();\n          onRowClick(row);\n        }\n      }}\"\n    >\n      <!-- Icon o Avatar -->\n      ${row.avatar\n        ? html`<div class=\"lst-row-avatar\">${row.avatar}</div>`\n        : row.icon\n          ? html`\n              <div class=\"lst-row-icon ${row.iconVariant ? `icon-${row.iconVariant}` : ''}\">\n                <lib-icon name=\"${row.icon}\" size=\"sm\"></lib-icon>\n              </div>`\n          : nothing}\n\n      <!-- Body -->\n      <div class=\"lst-row-body\">\n        <span class=\"lst-row-label\">${row.label}</span>\n        ${row.desc ? html`<span class=\"lst-row-desc\">${row.desc}</span>` : nothing}\n      </div>\n\n      <!-- Meta -->\n      ${row.meta ? html`<span class=\"lst-row-meta\">${row.meta}</span>` : nothing}\n\n      <!-- Badge -->\n      ${row.badge\n        ? html`\n            <span class=\"lst-badge lst-badge-${row.badge.variant ?? 'default'}\">\n              ${row.badge.label}\n            </span>`\n        : nothing}\n\n      <!-- Toggle -->\n      ${row.toggle != null\n        ? html`\n            <input\n              type=\"checkbox\"\n              class=\"lst-row-toggle\"\n              .checked=\"${row.toggle}\"\n              @click=\"${(e: Event): void => {\n                e.stopPropagation();\n                const target = e.currentTarget as HTMLInputElement;\n                onToggle(row, target.checked);\n              }}\"\n              aria-label=\"${row.label}\"\n            />`\n        : nothing}\n\n      <!-- Chevron -->\n      ${row.chevron\n        ? html`\n            <span class=\"lst-row-action\">\n              <lib-icon name=\"caret-right\" size=\"sm\"></lib-icon>\n            </span>`\n        : nothing}\n    </li>\n  `;\n}\n\n/* ================================================================\n   HELPERS — Description List\n   ================================================================ */\n\nfunction renderDlItem(item: DlItem): TemplateResult {\n  return html`\n    <dt class=\"lst-dt\">${item.term}</dt>\n    <dd class=\"lst-dd ${item.mono ? 'lst-dd-mono' : ''}\">${item.description}</dd>\n  `;\n}\n\n/* ================================================================\n   TEMPLATE PRINCIPAL\n   ================================================================ */\n\nexport function textListTemplate(props: TextListTemplateProps): TemplateResult {\n  const {\n    family, contentItems, marker, counter, size,\n    uiItems, divided, bordered, inset, interactive, dark,\n    dlItems, dlLayout, dlDivided,\n    onRowClick, onToggle,\n  } = props;\n\n  /* ── CONTENT LIST ── */\n  if (family === 'ul' || family === 'ol') {\n    const trackCls = [\n      'lst',\n      size !== 'md'   ? `lst-${size}`            : '',\n      marker === 'kaki'    ? 'lst-kaki'    : '',\n      marker === 'dash'    ? 'lst-dash'    : '',\n      marker === 'check'   ? 'lst-checked' : '',\n      family === 'ol' && counter === 'roman' ? 'lst-ordered-roman' : '',\n      family === 'ol' && counter === 'alpha' ? 'lst-ordered-alpha' : '',\n    ].filter(Boolean).join(' ');\n\n    const items = html`\n      ${map(contentItems, (item: ContentItem) => renderContentItem(item, marker))}\n    `;\n\n    return family === 'ol'\n      ? html`<ol class=\"${trackCls}\">${items}</ol>`\n      : html`<ul class=\"${trackCls}\">${items}</ul>`;\n  }\n\n  /* ── UI LIST ── */\n  if (family === 'ui') {\n    const trackCls = [\n      'lst-ui',\n      divided     ? 'lst-divided'     : '',\n      bordered    ? 'lst-bordered'    : '',\n      inset       ? 'lst-inset'       : '',\n      interactive ? 'lst-interactive' : '',\n      dark        ? 'lst-dark'        : '',\n    ].filter(Boolean).join(' ');\n\n    return html`\n      <ul\n        class=\"${trackCls}\"\n        role=\"${interactive ? 'listbox' : 'list'}\"\n      >\n        ${map(uiItems, (item: UiItem) =>\n          renderUiItem(item, interactive, onRowClick, onToggle)\n        )}\n      </ul>\n    `;\n  }\n\n  /* ── DESCRIPTION LIST ── */\n  const dlCls = [\n    'lst-dl',\n    dlLayout === 'wide'  ? 'lst-dl-wide'    : '',\n    dlLayout === 'stack' ? 'lst-dl-stack'   : '',\n    dlDivided            ? 'lst-dl-divided' : '',\n    dark                 ? 'lst-dark'       : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <dl class=\"${dlCls}\">\n      ${map(dlItems, (item: DlItem) => renderDlItem(item))}\n    </dl>\n  `;\n}"],"names":["map"],"mappings":";;AAeA,SAAS,kBACP,MACA,QACgB;AAChB,SAAO;AAAA;AAAA,QAED,WAAW,UACT;AAAA,kDACwC,KAAK,YAAY,QAAQ,iCAAiC,EAAE;AAAA;AAAA,wBAEtF,KAAK,YAAY,QAAQ,WAAW,cAAc;AAAA,0BAChD,KAAK,YAAY,QAAQ,YAAY,MAAM;AAAA;AAAA;AAAA,uBAI3D,OAAO;AAAA;AAAA,oCAEmB,KAAK,KAAK;AAAA;AAAA,QAEtC,KAAK,YAAY,KAAK,SAAS,SAC7B;AAAA;AAAA,gBAEMA;AAAAA,IAAI,KAAK;AAAA,IAAU,CAAC,UACpB,kBAAkB,OAAO,MAAM;AAAA,EAAA,CAChC;AAAA,qBAEL,OAAO;AAAA;AAAA;AAGjB;AAMA,SAAS,aACP,MACA,aACA,YACA,UACgB;AAEhB,MAAI,KAAK,SAAS,aAAa;AAC7B,WAAO;AAAA,EACT;AAGA,MAAI,KAAK,SAAS,UAAU;AAC1B,UAAM,IAAI;AACV,WAAO,sCAAsC,EAAE,KAAK;AAAA,EACtD;AAGA,QAAM,MAAM;AACZ,QAAM,SAAS;AAAA,IACb;AAAA,IACA,IAAI,WAAW,gBAAgB;AAAA,IAC/B,IAAI,WAAW,gBAAgB;AAAA,IAC/B,IAAI,SAAW,cAAgB;AAAA,EAAA,EAC/B,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SAAO;AAAA;AAAA,eAEM,MAAM;AAAA,cACP,cAAc,WAAW,UAAU;AAAA,kBAC/B,eAAe,CAAC,IAAI,WAAW,MAAM,IAAI;AAAA,uBACpC,IAAI,YAAY,KAAK;AAAA,uBACrB,IAAI,YAAY,KAAK;AAAA,gBAC5B,MAAY;AAAE,QAAI,CAAC,IAAI,SAAU,YAAW,GAAG;AAAA,EAAG,CAAC;AAAA,kBACjD,CAAC,MAA2B;AACtC,SAAK,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAQ,CAAC,IAAI,UAAU;AACzD,QAAE,eAAA;AACF,iBAAW,GAAG;AAAA,IAChB;AAAA,EACF,CAAC;AAAA;AAAA;AAAA,QAGC,IAAI,SACF,mCAAmC,IAAI,MAAM,WAC7C,IAAI,OACF;AAAA,yCAC6B,IAAI,cAAc,QAAQ,IAAI,WAAW,KAAK,EAAE;AAAA,kCACvD,IAAI,IAAI;AAAA,wBAE9B,OAAO;AAAA;AAAA;AAAA;AAAA,sCAImB,IAAI,KAAK;AAAA,UACrC,IAAI,OAAO,kCAAkC,IAAI,IAAI,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA,QAI1E,IAAI,OAAO,kCAAkC,IAAI,IAAI,YAAY,OAAO;AAAA;AAAA;AAAA,QAGxE,IAAI,QACF;AAAA,+CACqC,IAAI,MAAM,WAAW,SAAS;AAAA,gBAC7D,IAAI,MAAM,KAAK;AAAA,uBAErB,OAAO;AAAA;AAAA;AAAA,QAGT,IAAI,UAAU,OACZ;AAAA;AAAA;AAAA;AAAA,0BAIgB,IAAI,MAAM;AAAA,wBACZ,CAAC,MAAmB;AAC5B,MAAE,gBAAA;AACF,UAAM,SAAS,EAAE;AACjB,aAAS,KAAK,OAAO,OAAO;AAAA,EAC9B,CAAC;AAAA,4BACa,IAAI,KAAK;AAAA,kBAE3B,OAAO;AAAA;AAAA;AAAA,QAGT,IAAI,UACF;AAAA;AAAA;AAAA,uBAIA,OAAO;AAAA;AAAA;AAGjB;AAMA,SAAS,aAAa,MAA8B;AAClD,SAAO;AAAA,yBACgB,KAAK,IAAI;AAAA,wBACV,KAAK,OAAO,gBAAgB,EAAE,KAAK,KAAK,WAAW;AAAA;AAE3E;AAMO,SAAS,iBAAiB,OAA8C;AAC7E,QAAM;AAAA,IACJ;AAAA,IAAQ;AAAA,IAAc;AAAA,IAAQ;AAAA,IAAS;AAAA,IACvC;AAAA,IAAS;AAAA,IAAS;AAAA,IAAU;AAAA,IAAO;AAAA,IAAa;AAAA,IAChD;AAAA,IAAS;AAAA,IAAU;AAAA,IACnB;AAAA,IAAY;AAAA,EAAA,IACV;AAGJ,MAAI,WAAW,QAAQ,WAAW,MAAM;AACtC,UAAM,WAAW;AAAA,MACf;AAAA,MACA,SAAS,OAAS,OAAO,IAAI,KAAgB;AAAA,MAC7C,WAAW,SAAY,aAAgB;AAAA,MACvC,WAAW,SAAY,aAAgB;AAAA,MACvC,WAAW,UAAY,gBAAgB;AAAA,MACvC,WAAW,QAAQ,YAAY,UAAU,sBAAsB;AAAA,MAC/D,WAAW,QAAQ,YAAY,UAAU,sBAAsB;AAAA,IAAA,EAC/D,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,UAAM,QAAQ;AAAA,QACVA,EAAI,cAAc,CAAC,SAAsB,kBAAkB,MAAM,MAAM,CAAC,CAAC;AAAA;AAG7E,WAAO,WAAW,OACd,kBAAkB,QAAQ,KAAK,KAAK,UACpC,kBAAkB,QAAQ,KAAK,KAAK;AAAA,EAC1C;AAGA,MAAI,WAAW,MAAM;AACnB,UAAM,WAAW;AAAA,MACf;AAAA,MACA,UAAc,gBAAoB;AAAA,MAClC,WAAc,iBAAoB;AAAA,MAClC,QAAc,cAAoB;AAAA,MAClC,cAAc,oBAAoB;AAAA,MAClC,OAAc,aAAoB;AAAA,IAAA,EAClC,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,WAAO;AAAA;AAAA,iBAEM,QAAQ;AAAA,gBACT,cAAc,YAAY,MAAM;AAAA;AAAA,UAEtCA;AAAAA,MAAI;AAAA,MAAS,CAAC,SACd,aAAa,MAAM,aAAa,YAAY,QAAQ;AAAA,IAAA,CACrD;AAAA;AAAA;AAAA,EAGP;AAGA,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA,aAAa,SAAU,gBAAmB;AAAA,IAC1C,aAAa,UAAU,iBAAmB;AAAA,IAC1C,YAAuB,mBAAmB;AAAA,IAC1C,OAAuB,aAAmB;AAAA,EAAA,EAC1C,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SAAO;AAAA,iBACQ,KAAK;AAAA,QACdA,EAAI,SAAS,CAAC,SAAiB,aAAa,IAAI,CAAC,CAAC;AAAA;AAAA;AAG1D;"}

package/dist/index348.js

@@ -1,5 +1,5 @@
-const cursorCss = '@layer tokens,reset,components;@layer reset{:host{display:contents;pointer-events:none}*,*:before,*:after{box-sizing:border-box}}@layer components{.cur-dot{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform;transition:width .2s var(--ease-out),height .2s var(--ease-out),background .25s,border-radius .2s,opacity .3s}.cur-ring{position:fixed;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);will-change:transform;transition:width .3s var(--ease-out),height .3s var(--ease-out),border-color .3s,border-width .2s,background .3s,opacity .3s}.cur-label{position:fixed;pointer-events:none;z-index:9999;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-washi-50);background:var(--color-washi-900);padding:4px 8px;white-space:nowrap;opacity:0;transform:translate(14px,-50%);transition:opacity .2s;will-change:transform}.cur-label.is-visible{opacity:1}:host([curstate="hover"]) .cur-dot{width:10px;height:10px;background:var(--color-kaki-500)}:host([curstate="hover"]) .cur-ring{width:52px;height:52px;border-color:var(--color-kaki-400)!important;border-width:1.5px!important}:host([curstate="text"]) .cur-dot{width:2px;height:22px;border-radius:1px;background:var(--color-washi-700)}:host([curstate="text"]) .cur-ring{opacity:0}:host([curstate="press"]) .cur-dot{width:4px;height:4px;background:var(--color-kaki-600)}:host([curstate="press"]) .cur-ring{width:22px;height:22px;border-color:var(--color-kaki-500)!important;background:#b85a1e0f!important}:host([curstate="hidden"]) .cur-dot,:host([curstate="hidden"]) .cur-ring{opacity:0}:host([dark-zone]) .cur-ring{border-color:#faf7f440!important}@media(pointer:coarse),(max-width:768px){.cur-dot,.cur-ring,.cur-label{display:none}}}';
+const tooltipCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-flex;align-items:center;justify-content:center}.tip-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.tip-bubble{position:absolute;z-index:var(--z-tooltip, 400);background:var(--color-washi-900);color:var(--color-washi-100);font-family:var(--lib-font-mono);font-size:11px;letter-spacing:var(--tracking-wide);line-height:var(--leading-snug);padding:var(--lib-space-sm) var(--lib-space-md);max-width:220px;width:max-content;pointer-events:none;white-space:normal;opacity:0;transform-origin:center;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);transition-delay:0ms}.tip-wrap:hover .tip-bubble,.tip-wrap:focus-within .tip-bubble{transition-delay:.3s}.tip-instant .tip-bubble,.tip-instant:hover .tip-bubble,.tip-instant:focus-within .tip-bubble{transition-delay:0ms}.tip-wrap:hover .tip-bubble,.tip-wrap:focus-within .tip-bubble,.tip-wrap.is-open .tip-bubble{opacity:1}.tip-sm .tip-bubble{font-size:10px;padding:var(--lib-space-xs) var(--lib-space-sm);max-width:160px;letter-spacing:var(--tracking-wider)}.tip-lg .tip-bubble{font-size:var(--text-xs);font-family:var(--lib-font-body);padding:var(--lib-space-md) var(--lib-space-md);max-width:300px;letter-spacing:0;line-height:var(--leading-normal)}.tip-bubble:after{content:"";position:absolute;width:0;height:0;border:5px solid transparent;pointer-events:none}.tip-wrap[data-pos=top] .tip-bubble,.tip-wrap:not([data-pos]) .tip-bubble{bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px)}.tip-wrap[data-pos=top]:hover .tip-bubble,.tip-wrap[data-pos=top]:focus-within .tip-bubble,.tip-wrap[data-pos=top].is-open .tip-bubble,.tip-wrap:not([data-pos]):hover .tip-bubble,.tip-wrap:not([data-pos]):focus-within .tip-bubble,.tip-wrap:not([data-pos]).is-open .tip-bubble{transform:translate(-50%) translateY(0)}.tip-wrap[data-pos=top] .tip-bubble:after,.tip-wrap:not([data-pos]) .tip-bubble:after{top:100%;left:50%;transform:translate(-50%);border-top-color:var(--color-washi-900)}.tip-wrap[data-pos=bottom] .tip-bubble{top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(-4px)}.tip-wrap[data-pos=bottom]:hover .tip-bubble,.tip-wrap[data-pos=bottom]:focus-within .tip-bubble,.tip-wrap[data-pos=bottom].is-open .tip-bubble{transform:translate(-50%) translateY(0)}.tip-wrap[data-pos=bottom] .tip-bubble:after{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:var(--color-washi-900)}.tip-wrap[data-pos=left] .tip-bubble{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translate(4px)}.tip-wrap[data-pos=left]:hover .tip-bubble,.tip-wrap[data-pos=left]:focus-within .tip-bubble,.tip-wrap[data-pos=left].is-open .tip-bubble{transform:translateY(-50%) translate(0)}.tip-wrap[data-pos=left] .tip-bubble:after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--color-washi-900)}.tip-wrap[data-pos=right] .tip-bubble{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translate(-4px)}.tip-wrap[data-pos=right]:hover .tip-bubble,.tip-wrap[data-pos=right]:focus-within .tip-bubble,.tip-wrap[data-pos=right].is-open .tip-bubble{transform:translateY(-50%) translate(0)}.tip-wrap[data-pos=right] .tip-bubble:after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--color-washi-900)}.tip-wrap[data-pos=top-start] .tip-bubble{bottom:calc(100% + 8px);left:0;transform:translateY(4px)}.tip-wrap[data-pos=top-start]:hover .tip-bubble,.tip-wrap[data-pos=top-start]:focus-within .tip-bubble,.tip-wrap[data-pos=top-start].is-open .tip-bubble{transform:translateY(0)}.tip-wrap[data-pos=top-start] .tip-bubble:after{top:100%;left:var(--lib-space-md);border-top-color:var(--color-washi-900)}.tip-wrap[data-pos=top-end] .tip-bubble{bottom:calc(100% + 8px);right:0;transform:translateY(4px)}.tip-wrap[data-pos=top-end]:hover .tip-bubble,.tip-wrap[data-pos=top-end]:focus-within .tip-bubble,.tip-wrap[data-pos=top-end].is-open .tip-bubble{transform:translateY(0)}.tip-wrap[data-pos=top-end] .tip-bubble:after{top:100%;right:var(--lib-space-md);border-top-color:var(--color-washi-900)}.tip-wrap[data-pos=bottom-start] .tip-bubble{top:calc(100% + 8px);left:0;transform:translateY(-4px)}.tip-wrap[data-pos=bottom-start]:hover .tip-bubble,.tip-wrap[data-pos=bottom-start]:focus-within .tip-bubble,.tip-wrap[data-pos=bottom-start].is-open .tip-bubble{transform:translateY(0)}.tip-wrap[data-pos=bottom-start] .tip-bubble:after{bottom:100%;left:var(--lib-space-md);border-bottom-color:var(--color-washi-900)}.tip-wrap[data-pos=bottom-end] .tip-bubble{top:calc(100% + 8px);right:0;transform:translateY(-4px)}.tip-wrap[data-pos=bottom-end]:hover .tip-bubble,.tip-wrap[data-pos=bottom-end]:focus-within .tip-bubble,.tip-wrap[data-pos=bottom-end].is-open .tip-bubble{transform:translateY(0)}.tip-wrap[data-pos=bottom-end] .tip-bubble:after{bottom:100%;right:var(--lib-space-md);border-bottom-color:var(--color-washi-900)}.tip-light .tip-bubble{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);box-shadow:var(--shadow-md)}.tip-light[data-pos=top] .tip-bubble:after,.tip-light:not([data-pos]) .tip-bubble:after{border-top-color:var(--bg-elevated)}.tip-light[data-pos=bottom] .tip-bubble:after{border-bottom-color:var(--bg-elevated)}.tip-light[data-pos=left] .tip-bubble:after{border-left-color:var(--bg-elevated)}.tip-light[data-pos=right] .tip-bubble:after{border-right-color:var(--bg-elevated)}.tip-light[data-pos=top-start] .tip-bubble:after{border-top-color:var(--bg-elevated)}.tip-light[data-pos=top-end] .tip-bubble:after{border-top-color:var(--bg-elevated)}.tip-light[data-pos=bottom-start] .tip-bubble:after{border-bottom-color:var(--bg-elevated)}.tip-light[data-pos=bottom-end] .tip-bubble:after{border-bottom-color:var(--bg-elevated)}.tip-kaki .tip-bubble{background:var(--color-kaki-500);color:var(--color-white)}.tip-kaki[data-pos=top] .tip-bubble:after,.tip-kaki:not([data-pos]) .tip-bubble:after{border-top-color:var(--color-kaki-500)}.tip-kaki[data-pos=bottom] .tip-bubble:after{border-bottom-color:var(--color-kaki-500)}.tip-kaki[data-pos=left] .tip-bubble:after{border-left-color:var(--color-kaki-500)}.tip-kaki[data-pos=right] .tip-bubble:after{border-right-color:var(--color-kaki-500)}.tip-kaki[data-pos=top-start] .tip-bubble:after{border-top-color:var(--color-kaki-500)}.tip-kaki[data-pos=top-end] .tip-bubble:after{border-top-color:var(--color-kaki-500)}.tip-kaki[data-pos=bottom-start] .tip-bubble:after{border-bottom-color:var(--color-kaki-500)}.tip-kaki[data-pos=bottom-end] .tip-bubble:after{border-bottom-color:var(--color-kaki-500)}.tip-error .tip-bubble{background:var(--color-error);color:var(--color-white)}.tip-error[data-pos=top] .tip-bubble:after,.tip-error:not([data-pos]) .tip-bubble:after{border-top-color:var(--color-error)}.tip-error[data-pos=bottom] .tip-bubble:after{border-bottom-color:var(--color-error)}.tip-error[data-pos=left] .tip-bubble:after{border-left-color:var(--color-error)}.tip-error[data-pos=right] .tip-bubble:after{border-right-color:var(--color-error)}.tip-error[data-pos=top-start] .tip-bubble:after{border-top-color:var(--color-error)}.tip-error[data-pos=top-end] .tip-bubble:after{border-top-color:var(--color-error)}.tip-error[data-pos=bottom-start] .tip-bubble:after{border-bottom-color:var(--color-error)}.tip-error[data-pos=bottom-end] .tip-bubble:after{border-bottom-color:var(--color-error)}.tip-celadon .tip-bubble{background:var(--color-celadon-500);color:var(--color-white)}.tip-celadon[data-pos=top] .tip-bubble:after,.tip-celadon:not([data-pos]) .tip-bubble:after{border-top-color:var(--color-celadon-500)}.tip-celadon[data-pos=bottom] .tip-bubble:after{border-bottom-color:var(--color-celadon-500)}.tip-celadon[data-pos=left] .tip-bubble:after{border-left-color:var(--color-celadon-500)}.tip-celadon[data-pos=right] .tip-bubble:after{border-right-color:var(--color-celadon-500)}.tip-celadon[data-pos=top-start] .tip-bubble:after{border-top-color:var(--color-celadon-500)}.tip-celadon[data-pos=top-end] .tip-bubble:after{border-top-color:var(--color-celadon-500)}.tip-celadon[data-pos=bottom-start] .tip-bubble:after{border-bottom-color:var(--color-celadon-500)}.tip-celadon[data-pos=bottom-end] .tip-bubble:after{border-bottom-color:var(--color-celadon-500)}::slotted(.tip-title),.tip-title{font-family:var(--lib-font-display);font-size:var(--text-md);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:inherit;display:block;margin-bottom:var(--lib-space-xs)}::slotted(.tip-body),.tip-body{font-family:var(--lib-font-body);font-size:var(--text-xs);color:inherit;opacity:.75;line-height:var(--leading-normal);display:block}::slotted(.tip-kbd),.tip-kbd{display:inline-flex;align-items:center;gap:2px;margin-top:var(--lib-space-sm)}.tip-bubble kbd{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wide);background:#ffffff1f;border:1px solid rgb(255,255,255,.18);padding:1px var(--lib-space-sm);color:inherit;line-height:1.6}.tip-light .tip-bubble kbd{background:var(--bg-surface);border-color:var(--border-default);color:var(--text-secondary)}::slotted(.tip-sep),.tip-sep{height:1px;background:#ffffff1f;margin:var(--lib-space-sm) 0;display:block}.tip-light .tip-sep,.tip-light ::slotted(.tip-sep){background:var(--border-subtle)}}';
 export {
-  cursorCss as default
+  tooltipCss as default
 };
 //# sourceMappingURL=index348.js.map