@shibui-ui/ui 1.6.0 → 1.7.0

package/dist/index361.js

@@ -0,0 +1,149 @@
+import { html, nothing } from "lit";
+const svgChevron = html`
+  <svg class="hdr-link-chevron" width="9" height="6" viewBox="0 0 10 6"
+    fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    <polyline points="1,1 5,5 9,1"/>
+  </svg>`;
+const svgSearch = html`
+  <svg width="12" height="12" viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+    <circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="14" y2="14"/>
+  </svg>`;
+const svgBell = html`
+  <svg width="15" height="15" viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    <path d="M8 1a5 5 0 00-5 5v2l-1 2v1h12v-1l-1-2V6A5 5 0 008 1z"/>
+    <path d="M6 13a2 2 0 004 0"/>
+  </svg>`;
+function renderLogoMark(ctx) {
+  if (ctx.variant === "kintsugi") {
+    return html`
+      <div class="hdr-logo-mark">
+        <span class="hdr-logo-mark-text">${ctx.logoMark}</span>
+      </div>`;
+  }
+  return html`<div class="hdr-logo-mark">${ctx.logoMark}</div>`;
+}
+function renderLogo(ctx) {
+  if (ctx.variant === "glitch") {
+    return html`
+      <a href="${ctx.logoHref}" class="hdr-logo-glitch">
+        ⌗ ${ctx.brandName.toUpperCase()}
+        <span class="hdr-logo-glitch-badge">SYS</span>
+      </a>`;
+  }
+  if (ctx.variant === "minimal") {
+    return html`
+      <a href="${ctx.logoHref}" class="hdr-logo">
+        <span class="hdr-brand-name">${ctx.logoMark}</span>
+      </a>`;
+  }
+  return html`
+    <a href="${ctx.logoHref}" class="hdr-logo">
+      ${renderLogoMark(ctx)}
+      <div>
+        <div class="hdr-brand-name">${ctx.brandName}
+          ${ctx.variant === "kintsugi" ? html` <em style="font-style:italic;color:var(--color-kaki-400);">金</em>` : nothing}
+        </div>
+        ${ctx.brandTagline && ctx.variant === "shrink" ? html`<div class="hdr-tagline">${ctx.brandTagline}</div>` : nothing}
+      </div>
+      ${ctx.version && ctx.variant === "dark" ? html`<span class="hdr-version">${ctx.version}</span>` : nothing}
+    </a>`;
+}
+function renderDropdown(_ctx, link) {
+  var _a;
+  return html`
+    <div class="hdr-dd">
+      <span class="hdr-link">
+        ${link.label}
+        ${svgChevron}
+      </span>
+      <div class="hdr-dd-menu">
+        ${(_a = link.dropdown) == null ? void 0 : _a.map((item) => html`
+          <a href="${item.href || "#"}"
+            class="hdr-dd-item ${item.divider ? "hdr-dd-item--divider" : ""}">
+            ${item.label}
+          </a>
+        `)}
+      </div>
+    </div>`;
+}
+function renderLinks(ctx, links) {
+  return html`
+    ${links.map(
+    (link) => {
+      var _a;
+      return ((_a = link.dropdown) == null ? void 0 : _a.length) ? renderDropdown(ctx, link) : html`
+            <a href="${link.href || "#"}"
+              class="hdr-link ${link.active ? "is-active" : ""}"
+              @click="${(e) => {
+        e.preventDefault();
+        ctx._onLinkClick(link.id);
+      }}"
+            >
+              ${ctx.variant === "glitch" ? html`<span>&gt;</span>` : nothing}
+              ${link.label}
+            </a>`;
+    }
+  )}`;
+}
+const ACTION_VARIANT_MAP = {
+  classic: "kaki",
+  centered: "outline",
+  dark: "kaki",
+  transparent: "kaki",
+  kintsugi: "kintsugi",
+  glitch: "glitch",
+  mega: "kaki",
+  shrink: "kaki",
+  minimal: ""
+};
+function renderActions(ctx) {
+  return html`
+    <div class="hdr-actions">
+      ${ctx.loginLabel ? html`
+        <a href="${ctx.loginHref || "#"}" class="hdr-login">${ctx.loginLabel}</a>
+      ` : nothing}
+
+      ${ctx.actions.map((action) => {
+    const cls = action.variant ? `hdr-action--${action.variant}` : `hdr-action--${ACTION_VARIANT_MAP[ctx.variant] || "kaki"}`;
+    return html`
+          <a href="${action.href || "#"}"
+            class="hdr-action ${cls}"
+            @click="${(e) => {
+      e.preventDefault();
+      ctx._onActionClick(action);
+    }}"
+          >${action.label}</a>`;
+  })}
+
+      ${ctx.variant === "glitch" ? html`
+        <div class="hdr-online">● online</div>
+      ` : nothing}
+
+      ${ctx.variant === "minimal" && ctx.contactLabel ? html`
+        <a href="${ctx.contactHref || "#"}" class="hdr-contact">${ctx.contactLabel} →</a>
+      ` : nothing}
+    </div>`;
+}
+function renderBreadcrumbs(items) {
+  return html`
+    <nav class="hdr-breadcrumbs" aria-label="breadcrumb">
+      ${items.map((item, i) => html`
+        ${i > 0 ? html`<span class="hdr-breadcrumb-sep">/</span>` : nothing}
+        ${i < items.length - 1 ? html`<a href="${item.href || "#"}" class="hdr-breadcrumb-link">${item.label}</a>` : html`<span class="hdr-breadcrumb-current">${item.label}</span>`}
+      `)}
+    </nav>`;
+}
+export {
+  renderActions,
+  renderBreadcrumbs,
+  renderDropdown,
+  renderLinks,
+  renderLogo,
+  renderLogoMark,
+  svgBell,
+  svgChevron,
+  svgSearch
+};
+//# sourceMappingURL=index361.js.map

package/dist/index361.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index361.js","sources":["../src/components/molecules/header/templates/header-shared.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport type { NavLink, DropdownItem, HeaderAction, BreadcrumbItem } from '../lib-header.types';\n\n/* ══════════════════════════════════════\n   SVG HELPERS (cambiar a iconos phosfor)\n   ══════════════════════════════════════ */\n\nexport const svgChevron = html`\n  <svg class=\"hdr-link-chevron\" width=\"9\" height=\"6\" viewBox=\"0 0 10 6\"\n    fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n    <polyline points=\"1,1 5,5 9,1\"/>\n  </svg>`;\n\nexport const svgSearch = html`\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <circle cx=\"7\" cy=\"7\" r=\"5\"/><line x1=\"11\" y1=\"11\" x2=\"14\" y2=\"14\"/>\n  </svg>`;\n\nexport const svgBell = html`\n  <svg width=\"15\" height=\"15\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n    <path d=\"M8 1a5 5 0 00-5 5v2l-1 2v1h12v-1l-1-2V6A5 5 0 008 1z\"/>\n    <path d=\"M6 13a2 2 0 004 0\"/>\n  </svg>`;\n\n/* ══════════════════════════════════════\n   LOGO MARK\n   ══════════════════════════════════════ */\n\nexport function renderLogoMark(ctx: LibHeader): TemplateResult {\n  if (ctx.variant === 'kintsugi') {\n    return html`\n      <div class=\"hdr-logo-mark\">\n        <span class=\"hdr-logo-mark-text\">${ctx.logoMark}</span>\n      </div>`;\n  }\n  return html`<div class=\"hdr-logo-mark\">${ctx.logoMark}</div>`;\n}\n\n/* ══════════════════════════════════════\n   LOGO\n   ══════════════════════════════════════ */\n\nexport function renderLogo(ctx: LibHeader): TemplateResult {\n  if (ctx.variant === 'glitch') {\n    return html`\n      <a href=\"${ctx.logoHref}\" class=\"hdr-logo-glitch\">\n        ⌗ ${ctx.brandName.toUpperCase()}\n        <span class=\"hdr-logo-glitch-badge\">SYS</span>\n      </a>`;\n  }\n\n  if (ctx.variant === 'minimal') {\n    return html`\n      <a href=\"${ctx.logoHref}\" class=\"hdr-logo\">\n        <span class=\"hdr-brand-name\">${ctx.logoMark}</span>\n      </a>`;\n  }\n\n  return html`\n    <a href=\"${ctx.logoHref}\" class=\"hdr-logo\">\n      ${renderLogoMark(ctx)}\n      <div>\n        <div class=\"hdr-brand-name\">${ctx.brandName}\n          ${ctx.variant === 'kintsugi'\n            ? html` <em style=\"font-style:italic;color:var(--color-kaki-400);\">金</em>`\n            : nothing}\n        </div>\n        ${ctx.brandTagline && ctx.variant === 'shrink'\n          ? html`<div class=\"hdr-tagline\">${ctx.brandTagline}</div>`\n          : nothing}\n      </div>\n      ${ctx.version && ctx.variant === 'dark'\n        ? html`<span class=\"hdr-version\">${ctx.version}</span>`\n        : nothing}\n    </a>`;\n}\n\n/* ══════════════════════════════════════\n   DROPDOWN (desktop)\n   ══════════════════════════════════════ */\n\nexport function renderDropdown(_ctx: LibHeader, link: NavLink): TemplateResult {\n  return html`\n    <div class=\"hdr-dd\">\n      <span class=\"hdr-link\">\n        ${link.label}\n        ${svgChevron}\n      </span>\n      <div class=\"hdr-dd-menu\">\n        ${link.dropdown?.map((item: DropdownItem) => html`\n          <a href=\"${item.href || '#'}\"\n            class=\"hdr-dd-item ${item.divider ? 'hdr-dd-item--divider' : ''}\">\n            ${item.label}\n          </a>\n        `)}\n      </div>\n    </div>`;\n}\n\n/* ══════════════════════════════════════\n   NAV LINKS (desktop)\n   ══════════════════════════════════════ */\n\nexport function renderLinks(ctx: LibHeader, links: NavLink[]): TemplateResult {\n  return html`\n    ${links.map(link =>\n      link.dropdown?.length\n        ? renderDropdown(ctx, link)\n        : html`\n            <a href=\"${link.href || '#'}\"\n              class=\"hdr-link ${link.active ? 'is-active' : ''}\"\n              @click=\"${(e: Event): void => {\n                e.preventDefault();\n                ctx._onLinkClick(link.id);\n              }}\"\n            >\n              ${ctx.variant === 'glitch' ? html`<span>&gt;</span>` : nothing}\n              ${link.label}\n            </a>`\n    )}`;\n}\n\n/* ══════════════════════════════════════\n   ACTIONS (desktop)\n   ══════════════════════════════════════ */\n\nconst ACTION_VARIANT_MAP: Record<string, string> = {\n  classic:     'kaki',\n  centered:    'outline',\n  dark:        'kaki',\n  transparent: 'kaki',\n  kintsugi:    'kintsugi',\n  glitch:      'glitch',\n  mega:        'kaki',\n  shrink:      'kaki',\n  minimal:     '',\n};\n\nexport function renderActions(ctx: LibHeader): TemplateResult {\n  return html`\n    <div class=\"hdr-actions\">\n      ${ctx.loginLabel ? html`\n        <a href=\"${ctx.loginHref || '#'}\" class=\"hdr-login\">${ctx.loginLabel}</a>\n      ` : nothing}\n\n      ${ctx.actions.map((action: HeaderAction) => {\n        const cls = action.variant\n          ? `hdr-action--${action.variant}`\n          : `hdr-action--${ACTION_VARIANT_MAP[ctx.variant] || 'kaki'}`;\n        return html`\n          <a href=\"${action.href || '#'}\"\n            class=\"hdr-action ${cls}\"\n            @click=\"${(e: Event): void => {\n              e.preventDefault();\n              ctx._onActionClick(action);\n            }}\"\n          >${action.label}</a>`;\n      })}\n\n      ${ctx.variant === 'glitch' ? html`\n        <div class=\"hdr-online\">● online</div>\n      ` : nothing}\n\n      ${ctx.variant === 'minimal' && ctx.contactLabel ? html`\n        <a href=\"${ctx.contactHref || '#'}\" class=\"hdr-contact\">${ctx.contactLabel} →</a>\n      ` : nothing}\n    </div>`;\n}\n\n/* ══════════════════════════════════════\n   BREADCRUMBS (app-bar)\n   ══════════════════════════════════════ */\n\nexport function renderBreadcrumbs(items: BreadcrumbItem[]): TemplateResult {\n  return html`\n    <nav class=\"hdr-breadcrumbs\" aria-label=\"breadcrumb\">\n      ${items.map((item, i) => html`\n        ${i > 0 ? html`<span class=\"hdr-breadcrumb-sep\">/</span>` : nothing}\n        ${i < items.length - 1\n          ? html`<a href=\"${item.href || '#'}\" class=\"hdr-breadcrumb-link\">${item.label}</a>`\n          : html`<span class=\"hdr-breadcrumb-current\">${item.label}</span>`}\n      `)}\n    </nav>`;\n}"],"names":[],"mappings":"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"}

package/dist/index362.js

@@ -0,0 +1,133 @@
+import { html, nothing } from "lit";
+function renderHamburger(ctx) {
+  const isLight = ["classic", "centered", "mega", "minimal", "shrink"].includes(ctx.variant);
+  const color = isLight ? "var(--color-washi-600, #7A6A5C)" : "rgba(250,247,244,0.5)";
+  return html`
+    <button
+      class="hdr-burger"
+      aria-label="${ctx._mobileOpen ? "Cerrar menú" : "Abrir menú"}"
+      aria-expanded="${ctx._mobileOpen}"
+      aria-controls="hdr-mobile-drawer"
+      @click="${() => ctx._toggleMobile()}"
+    >
+      <svg width="20" height="14" viewBox="0 0 20 14" fill="none"
+        stroke="${color}" stroke-width="1.6" stroke-linecap="round">
+        <line class="hdr-burger-top" x1="0" y1="1"  x2="20" y2="1"/>
+        <line class="hdr-burger-mid" x1="0" y1="7"  x2="20" y2="7"/>
+        <line class="hdr-burger-bot" x1="0" y1="13" x2="20" y2="13"/>
+      </svg>
+    </button>`;
+}
+function renderMobileDrawer(ctx) {
+  var _a;
+  if (!ctx._mobileOpen) return html``;
+  return html`
+    <!-- Backdrop -->
+    <div
+      class="hdr-mobile-backdrop"
+      @click="${() => ctx._closeMobile()}"
+      aria-hidden="true"
+    ></div>
+
+    <!-- Drawer panel -->
+    <nav
+      id="hdr-mobile-drawer"
+      class="hdr-mobile-drawer ${ctx._mobileOpen ? "is-open" : ""}"
+      aria-label="Menú principal"
+    >
+      <!-- Links principales -->
+      <div class="hdr-mobile-links">
+        ${(ctx.links ?? []).map((link) => {
+    var _a2, _b;
+    return html`
+          <a
+            href="${link.href ?? "#"}"
+            class="hdr-mobile-link"
+            @click="${(e) => {
+      e.preventDefault();
+      ctx._onLinkClick(link.id);
+    }}"
+          >
+            ${link.label}
+            ${((_a2 = link.dropdown) == null ? void 0 : _a2.length) ? html`
+              <svg width="8" height="5" viewBox="0 0 10 6" fill="none"
+                stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+                <polyline points="1,1 5,5 9,1"/>
+              </svg>` : nothing}
+          </a>
+
+          <!-- Sub-items — siempre visibles en móvil -->
+          ${((_b = link.dropdown) == null ? void 0 : _b.length) ? html`
+            <div class="hdr-mobile-sub">
+              ${link.dropdown.map((item) => html`
+                <a href="${item.href ?? "#"}" class="hdr-mobile-sub-link">
+                  › ${item.label}
+                </a>
+              `)}
+            </div>
+          ` : nothing}
+        `;
+  })}
+
+        <!-- Mega columns — accordion plano en móvil -->
+        ${((_a = ctx.megaColumns) == null ? void 0 : _a.length) ? html`
+          <div class="hdr-mobile-sub" style="margin-top:0;">
+            ${ctx.megaColumns.map((col) => html`
+              <p class="hdr-mobile-col-title">${col.title}</p>
+              ${col.items.map((item) => html`
+                <a href="${item.href ?? "#"}" class="hdr-mobile-sub-link">
+                  › ${item.label}
+                </a>
+              `)}
+            `)}
+          </div>
+        ` : nothing}
+      </div>
+
+      <!-- Divider -->
+      <div class="hdr-mobile-divider"></div>
+
+      <!-- Actions / CTAs -->
+      <div class="hdr-mobile-actions">
+        ${ctx.loginLabel ? html`
+          <a href="${ctx.loginHref ?? "#"}" class="hdr-mobile-login">
+            ${ctx.loginLabel}
+          </a>
+        ` : nothing}
+
+        ${(ctx.actions ?? []).map((action) => html`
+          <a
+            href="${action.href ?? "#"}"
+            class="hdr-mobile-cta"
+            @click="${(e) => {
+    e.preventDefault();
+    ctx._onActionClick(action);
+  }}"
+          >
+            ${action.label}
+          </a>
+        `)}
+
+        ${ctx.contactLabel ? html`
+          <a href="${ctx.contactHref ?? "#"}" class="hdr-mobile-login">
+            ${ctx.contactLabel} →
+          </a>
+        ` : nothing}
+      </div>
+
+      <!-- Footer del drawer -->
+      <div class="hdr-mobile-footer">
+        <span>${ctx.brandName}</span>
+        <button
+          class="hdr-mobile-close"
+          aria-label="Cerrar menú"
+          @click="${() => ctx._closeMobile()}"
+        >✕</button>
+      </div>
+    </nav>`;
+}
+export {
+  renderHamburger,
+  renderMobileDrawer
+};
+//# sourceMappingURL=index362.js.map

package/dist/index362.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index362.js","sources":["../src/components/molecules/header/templates/header-mobile.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport type { NavLink, DropdownItem, HeaderAction } from '../lib-header.types';\n\n/* ══════════════════════════════════════\n   HAMBURGER BUTTON\n   ══════════════════════════════════════ */\n\nexport function renderHamburger(ctx: LibHeader): TemplateResult {\n  const isLight = ['classic', 'centered', 'mega', 'minimal', 'shrink'].includes(ctx.variant);\n  const color   = isLight\n    ? 'var(--color-washi-600, #7A6A5C)'\n    : 'rgba(250,247,244,0.5)';\n\n  return html`\n    <button\n      class=\"hdr-burger\"\n      aria-label=\"${ctx._mobileOpen ? 'Cerrar menú' : 'Abrir menú'}\"\n      aria-expanded=\"${ctx._mobileOpen}\"\n      aria-controls=\"hdr-mobile-drawer\"\n      @click=\"${(): void => ctx._toggleMobile()}\"\n    >\n      <svg width=\"20\" height=\"14\" viewBox=\"0 0 20 14\" fill=\"none\"\n        stroke=\"${color}\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n        <line class=\"hdr-burger-top\" x1=\"0\" y1=\"1\"  x2=\"20\" y2=\"1\"/>\n        <line class=\"hdr-burger-mid\" x1=\"0\" y1=\"7\"  x2=\"20\" y2=\"7\"/>\n        <line class=\"hdr-burger-bot\" x1=\"0\" y1=\"13\" x2=\"20\" y2=\"13\"/>\n      </svg>\n    </button>`;\n}\n\n/* ══════════════════════════════════════\n   MOBILE DRAWER\n   ══════════════════════════════════════ */\n\nexport function renderMobileDrawer(ctx: LibHeader): TemplateResult {\n  if (!ctx._mobileOpen) return html``;\n\n  return html`\n    <!-- Backdrop -->\n    <div\n      class=\"hdr-mobile-backdrop\"\n      @click=\"${(): void => ctx._closeMobile()}\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <!-- Drawer panel -->\n    <nav\n      id=\"hdr-mobile-drawer\"\n      class=\"hdr-mobile-drawer ${ctx._mobileOpen ? 'is-open' : ''}\"\n      aria-label=\"Menú principal\"\n    >\n      <!-- Links principales -->\n      <div class=\"hdr-mobile-links\">\n        ${(ctx.links ?? []).map((link: NavLink) => html`\n          <a\n            href=\"${link.href ?? '#'}\"\n            class=\"hdr-mobile-link\"\n            @click=\"${(e: Event): void => {\n              e.preventDefault();\n              ctx._onLinkClick(link.id);\n            }}\"\n          >\n            ${link.label}\n            ${link.dropdown?.length ? html`\n              <svg width=\"8\" height=\"5\" viewBox=\"0 0 10 6\" fill=\"none\"\n                stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n                <polyline points=\"1,1 5,5 9,1\"/>\n              </svg>` : nothing}\n          </a>\n\n          <!-- Sub-items — siempre visibles en móvil -->\n          ${link.dropdown?.length ? html`\n            <div class=\"hdr-mobile-sub\">\n              ${link.dropdown.map((item: DropdownItem) => html`\n                <a href=\"${item.href ?? '#'}\" class=\"hdr-mobile-sub-link\">\n                  › ${item.label}\n                </a>\n              `)}\n            </div>\n          ` : nothing}\n        `)}\n\n        <!-- Mega columns — accordion plano en móvil -->\n        ${ctx.megaColumns?.length ? html`\n          <div class=\"hdr-mobile-sub\" style=\"margin-top:0;\">\n            ${ctx.megaColumns.map(col => html`\n              <p class=\"hdr-mobile-col-title\">${col.title}</p>\n              ${col.items.map(item => html`\n                <a href=\"${item.href ?? '#'}\" class=\"hdr-mobile-sub-link\">\n                  › ${item.label}\n                </a>\n              `)}\n            `)}\n          </div>\n        ` : nothing}\n      </div>\n\n      <!-- Divider -->\n      <div class=\"hdr-mobile-divider\"></div>\n\n      <!-- Actions / CTAs -->\n      <div class=\"hdr-mobile-actions\">\n        ${ctx.loginLabel ? html`\n          <a href=\"${ctx.loginHref ?? '#'}\" class=\"hdr-mobile-login\">\n            ${ctx.loginLabel}\n          </a>\n        ` : nothing}\n\n        ${(ctx.actions ?? []).map((action: HeaderAction) => html`\n          <a\n            href=\"${action.href ?? '#'}\"\n            class=\"hdr-mobile-cta\"\n            @click=\"${(e: Event): void => {\n              e.preventDefault();\n              ctx._onActionClick(action);\n            }}\"\n          >\n            ${action.label}\n          </a>\n        `)}\n\n        ${ctx.contactLabel ? html`\n          <a href=\"${ctx.contactHref ?? '#'}\" class=\"hdr-mobile-login\">\n            ${ctx.contactLabel} →\n          </a>\n        ` : nothing}\n      </div>\n\n      <!-- Footer del drawer -->\n      <div class=\"hdr-mobile-footer\">\n        <span>${ctx.brandName}</span>\n        <button\n          class=\"hdr-mobile-close\"\n          aria-label=\"Cerrar menú\"\n          @click=\"${(): void => ctx._closeMobile()}\"\n        >✕</button>\n      </div>\n    </nav>`;\n}"],"names":["_a"],"mappings":";AAQO,SAAS,gBAAgB,KAAgC;AAC9D,QAAM,UAAU,CAAC,WAAW,YAAY,QAAQ,WAAW,QAAQ,EAAE,SAAS,IAAI,OAAO;AACzF,QAAM,QAAU,UACZ,oCACA;AAEJ,SAAO;AAAA;AAAA;AAAA,oBAGW,IAAI,cAAc,gBAAgB,YAAY;AAAA,uBAC3C,IAAI,WAAW;AAAA;AAAA,gBAEtB,MAAY,IAAI,eAAe;AAAA;AAAA;AAAA,kBAG7B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvB;AAMO,SAAS,mBAAmB,KAAgC;;AACjE,MAAI,CAAC,IAAI,YAAa,QAAO;AAE7B,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,MAAY,IAAI,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAOb,IAAI,cAAc,YAAY,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKtD,IAAI,SAAS,CAAA,GAAI,IAAI,CAAC;;AAAkB;AAAA;AAAA,oBAE/B,KAAK,QAAQ,GAAG;AAAA;AAAA,sBAEd,CAAC,MAAmB;AAC5B,QAAE,eAAA;AACF,UAAI,aAAa,KAAK,EAAE;AAAA,IAC1B,CAAC;AAAA;AAAA,cAEC,KAAK,KAAK;AAAA,gBACVA,MAAA,KAAK,aAAL,gBAAAA,IAAe,UAAS;AAAA;AAAA;AAAA;AAAA,wBAId,OAAO;AAAA;AAAA;AAAA;AAAA,cAInB,UAAK,aAAL,mBAAe,UAAS;AAAA;AAAA,gBAEpB,KAAK,SAAS,IAAI,CAAC,SAAuB;AAAA,2BAC/B,KAAK,QAAQ,GAAG;AAAA,sBACrB,KAAK,KAAK;AAAA;AAAA,eAEjB,CAAC;AAAA;AAAA,cAEF,OAAO;AAAA;AAAA,GACZ,CAAC;AAAA;AAAA;AAAA,YAGA,SAAI,gBAAJ,mBAAiB,UAAS;AAAA;AAAA,cAEtB,IAAI,YAAY,IAAI,CAAA,QAAO;AAAA,gDACO,IAAI,KAAK;AAAA,gBACzC,IAAI,MAAM,IAAI,CAAA,SAAQ;AAAA,2BACX,KAAK,QAAQ,GAAG;AAAA,sBACrB,KAAK,KAAK;AAAA;AAAA,eAEjB,CAAC;AAAA,aACH,CAAC;AAAA;AAAA,YAEF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQT,IAAI,aAAa;AAAA,qBACN,IAAI,aAAa,GAAG;AAAA,cAC3B,IAAI,UAAU;AAAA;AAAA,YAEhB,OAAO;AAAA;AAAA,WAER,IAAI,WAAW,CAAA,GAAI,IAAI,CAAC,WAAyB;AAAA;AAAA,oBAExC,OAAO,QAAQ,GAAG;AAAA;AAAA,sBAEhB,CAAC,MAAmB;AAC5B,MAAE,eAAA;AACF,QAAI,eAAe,MAAM;AAAA,EAC3B,CAAC;AAAA;AAAA,cAEC,OAAO,KAAK;AAAA;AAAA,SAEjB,CAAC;AAAA;AAAA,UAEA,IAAI,eAAe;AAAA,qBACR,IAAI,eAAe,GAAG;AAAA,cAC7B,IAAI,YAAY;AAAA;AAAA,YAElB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKH,IAAI,SAAS;AAAA;AAAA;AAAA;AAAA,oBAIT,MAAY,IAAI,cAAc;AAAA;AAAA;AAAA;AAIlD;"}

package/dist/index37.js

@@ -0,0 +1,142 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { readingProgressTemplate } from "./index258.js";
+import componentCss from "./index259.js";
+import sharedTokens from "./index196.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibReadingProgress = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "bar";
+    this.tone = "kaki";
+    this.target = "";
+    this.dotsCount = 5;
+    this.ringSize = 28;
+    this._progress = 0;
+    this._scrollEl = null;
+    this._onScroll = () => {
+      if (this._scrollEl) this._calculate(this._scrollEl);
+    };
+  }
+  /* ── Lifecycle ───────────────────────────────────────── */
+  connectedCallback() {
+    super.connectedCallback();
+    this._bindScroll();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unbindScroll();
+  }
+  updated(changed) {
+    if (changed.has("target")) {
+      this._unbindScroll();
+      this._bindScroll();
+    }
+  }
+  /* ── Scroll binding ──────────────────────────────────── */
+  _bindScroll() {
+    if (this.target) {
+      this.updateComplete.then(() => {
+        const el = document.querySelector(this.target);
+        if (el) {
+          this._scrollEl = el;
+          el.addEventListener("scroll", this._onScroll, { passive: true });
+          this._calculate(el);
+        }
+      });
+    } else {
+      this._scrollEl = window;
+      window.addEventListener("scroll", this._onScroll, { passive: true });
+      this._calculate(window);
+    }
+  }
+  _unbindScroll() {
+    if (!this._scrollEl) return;
+    this._scrollEl.removeEventListener("scroll", this._onScroll);
+    this._scrollEl = null;
+  }
+  _calculate(source) {
+    let p;
+    if (source instanceof Window) {
+      const scrolled = window.scrollY;
+      const total = document.documentElement.scrollHeight - window.innerHeight;
+      p = total > 0 ? Math.min(1, Math.max(0, scrolled / total)) : 0;
+    } else {
+      const { scrollTop, scrollHeight, clientHeight } = source;
+      const total = scrollHeight - clientHeight;
+      p = total > 0 ? Math.min(1, Math.max(0, scrollTop / total)) : 0;
+    }
+    const pct = Math.round(p * 100);
+    if (pct === this._progress) return;
+    this._progress = pct;
+    this._applyHostStyle();
+  }
+  /* Aplica width / height al host en lugar de forzar un re-render
+     para las variantes cuyo elemento visual ES el host */
+  _applyHostStyle() {
+    const v = this.variant;
+    if (v === "bar" || v === "line") {
+      this.style.width = `${this._progress}%`;
+      const active = this._progress > 1 && this._progress < 100;
+      this.toggleAttribute("active", active);
+    } else if (v === "vertical") {
+      this.style.height = `${this._progress}%`;
+    }
+  }
+  /* ── Render ──────────────────────────────────────────── */
+  render() {
+    return readingProgressTemplate({
+      variant: this.variant,
+      progress: this._progress,
+      dotsCount: this.dotsCount,
+      ringSize: this.ringSize
+    });
+  }
+  /* ── Public API ──────────────────────────────────────── */
+  /** Devuelve el progreso actual (0-100) */
+  get progress() {
+    return this._progress;
+  }
+  /** Fuerza un recálculo inmediato del progreso */
+  recalculate() {
+    if (this._scrollEl) this._calculate(this._scrollEl);
+  }
+};
+LibReadingProgress.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(componentCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibReadingProgress.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibReadingProgress.prototype, "tone", 2);
+__decorateClass([
+  property({ type: String })
+], LibReadingProgress.prototype, "target", 2);
+__decorateClass([
+  property({ type: Number, attribute: "dots-count" })
+], LibReadingProgress.prototype, "dotsCount", 2);
+__decorateClass([
+  property({ type: Number, attribute: "ring-size" })
+], LibReadingProgress.prototype, "ringSize", 2);
+__decorateClass([
+  state()
+], LibReadingProgress.prototype, "_progress", 2);
+LibReadingProgress = __decorateClass([
+  customElement("lib-reading-progress")
+], LibReadingProgress);
+export {
+  LibReadingProgress
+};
+//# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index37.js","sources":["../src/components/atoms/reading-progress/lib-reading-progress.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state }              from 'lit/decorators.js';\nimport { readingProgressTemplate }                          from './lib-reading-progress.html';\nimport componentCss                                         from './lib-reading-progress.css?inline';\nimport sharedTokens                                         from '../../../styles/shared/tokens.css?inline';\n\nexport type ReadingProgressVariant = 'bar' | 'line' | 'dots' | 'ring' | 'vertical';\nexport type ReadingProgressTone    = 'kaki' | 'celadon' | 'ink' | 'kintsugi';\n\n\n/**\n * @element lib-reading-progress\n *\n * Cinco variantes de progreso de lectura — todas se alimentan del mismo\n * valor interno `_progress` (0-100) calculado con scroll.\n *\n * Variantes\n * ─────────\n * bar      → 2px debajo del nav. El HOST es el elemento visual.\n *            Coloca el componente DENTRO de un contenedor con\n *            position:relative; overflow:hidden.\n *\n * line     → 1px, más sutil. Mismos requisitos de posicionamiento.\n *\n * dots     → fila de N puntos. Display inline-flex. Va dentro del nav.\n *\n * ring     → anillo SVG. Display inline-flex. Va junto al brand.\n *\n * vertical → barra fija en el margen izquierdo de la ventana.\n *            Se posiciona sola con position:fixed.\n *\n * @attr {ReadingProgressVariant} variant    — bar · line · dots · ring · vertical\n * @attr {ReadingProgressTone}    tone       — kaki · celadon · ink\n * @attr {string}                 target     — selector CSS del contenedor scrollable.\n *                                             Si se omite, trackea window.\n * @attr {number}                 dots-count — número de puntos (variant=dots, default: 5)\n * @attr {number}                 ring-size  — diámetro del anillo en px (variant=ring, default: 28)\n */\n@customElement('lib-reading-progress')\nexport class LibReadingProgress extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /* ── Props ───────────────────────────────────────────── */\n\n  @property({ type: String, reflect: true })\n  variant: ReadingProgressVariant = 'bar';\n\n  @property({ type: String, reflect: true })\n  tone: ReadingProgressTone = 'kaki';\n\n  /** Selector CSS del elemento scrollable que se quiere observar.\n   *  Si está vacío, escucha el scroll de window. */\n  @property({ type: String })\n  target = '';\n\n  @property({ type: Number, attribute: 'dots-count' })\n  dotsCount = 5;\n\n  @property({ type: Number, attribute: 'ring-size' })\n  ringSize = 28;\n\n  /* ── Estado interno ──────────────────────────────────── */\n\n  @state()\n  private _progress = 0;\n\n  /* ── Elemento scrollable resuelto ───────────────────── */\n\n  private _scrollEl: Element | Window | null = null;\n\n  /* ── Lifecycle ───────────────────────────────────────── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._bindScroll();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unbindScroll();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    /* Si cambia el target, revinculamos el listener */\n    if (changed.has('target')) {\n      this._unbindScroll();\n      this._bindScroll();\n    }\n  }\n\n  /* ── Scroll binding ──────────────────────────────────── */\n\n  private _bindScroll(): void {\n    if (this.target) {\n      /* Esperamos al primer update para que el DOM esté disponible */\n      this.updateComplete.then(() => {\n        const el = document.querySelector(this.target);\n        if (el) {\n          this._scrollEl = el;\n          el.addEventListener('scroll', this._onScroll, { passive: true });\n          this._calculate(el);\n        }\n      });\n    } else {\n      this._scrollEl = window;\n      window.addEventListener('scroll', this._onScroll, { passive: true });\n      this._calculate(window);\n    }\n  }\n\n  private _unbindScroll(): void {\n    if (!this._scrollEl) return;\n    this._scrollEl.removeEventListener('scroll', this._onScroll);\n    this._scrollEl = null;\n  }\n\n  /* ── Cálculo de progreso ─────────────────────────────── */\n\n  private _onScroll = (): void => {\n    if (this._scrollEl) this._calculate(this._scrollEl);\n  };\n\n  private _calculate(source: Element | Window): void {\n    let p: number;\n\n    if (source instanceof Window) {\n      const scrolled = window.scrollY;\n      const total    = document.documentElement.scrollHeight - window.innerHeight;\n      p = total > 0 ? Math.min(1, Math.max(0, scrolled / total)) : 0;\n    } else {\n      const { scrollTop, scrollHeight, clientHeight } = source as Element;\n      const total = scrollHeight - clientHeight;\n      p = total > 0 ? Math.min(1, Math.max(0, scrollTop / total)) : 0;\n    }\n\n    const pct = Math.round(p * 100);\n    if (pct === this._progress) return;\n    this._progress = pct;\n\n    /* Actualiza el host directamente para bar / line / vertical\n       para evitar un re-render completo en cada frame de scroll */\n    this._applyHostStyle();\n  }\n\n  /* Aplica width / height al host en lugar de forzar un re-render\n     para las variantes cuyo elemento visual ES el host */\n  private _applyHostStyle(): void {\n    const v = this.variant;\n    if (v === 'bar' || v === 'line') {\n      this.style.width = `${this._progress}%`;\n      /* Activa el destello solo cuando hay progreso real y no está al 100% */\n      const active = this._progress > 1 && this._progress < 100;\n      this.toggleAttribute('active', active);\n    } else if (v === 'vertical') {\n      this.style.height = `${this._progress}%`;\n    }\n  }\n\n  /* ── Render ──────────────────────────────────────────── */\n\n  override render(): TemplateResult {\n    return readingProgressTemplate({\n      variant:   this.variant,\n      progress:  this._progress,\n      dotsCount: this.dotsCount,\n      ringSize:  this.ringSize,\n    });\n  }\n\n  /* ── Public API ──────────────────────────────────────── */\n\n  /** Devuelve el progreso actual (0-100) */\n  get progress(): number {\n    return this._progress;\n  }\n\n  /** Fuerza un recálculo inmediato del progreso */\n  recalculate(): void {\n    if (this._scrollEl) this._calculate(this._scrollEl);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-reading-progress': LibReadingProgress;\n  }\n}"],"names":[],"mappings":"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"}