@shibui-ui/ui 1.25.1 → 1.26.1

package/dist/index216.js

@@ -1,69 +1,5 @@
-import { nothing, html } from "lit";
-function inputTemplate(props) {
-  const inputType = props.type === "password" && props.showPassword ? "text" : props.type;
-  return html`
-    <div class="input-group ${props.error ? "has-error" : ""} ${props.disabled ? "is-disabled" : ""}">
-
-      ${props.label ? html`
-        <label
-          class="input-label"
-          for="${props.uuid}"
-        >
-          ${props.label}
-          ${props.required ? html`<span class="input-required" aria-hidden="true">*</span>` : nothing}
-        </label>
-      ` : nothing}
-
-      <div class="input-wrapper">
-        <slot name="prefix"></slot>
-
-        <input
-          id="${props.uuid}"
-          type="${inputType}"
-          placeholder="${props.placeholder}"
-          ?required="${props.required}"
-          ?disabled="${props.disabled}"
-          aria-invalid="${props.error}"
-          aria-describedby="${props.error && props.errorMessage ? `${props.uuid}-error` : nothing}"
-          .value="${props.value}"
-          @input="${props.handleInput}"
-        />
-
-        ${props.type === "password" ? html`
-          <button
-            class="input-password-toggle"
-            type="button"
-            @click="${props.handleTogglePassword}"
-            aria-label="${props.showPassword ? "Ocultar contraseña" : "Mostrar contraseña"}"
-          >
-            ${props.showPassword ? html`
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
-                <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
-                <line x1="1" y1="1" x2="23" y2="23"/>
-              </svg>
-            ` : html`
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
-                <circle cx="12" cy="12" r="3"/>
-              </svg>
-            `}
-          </button>
-        ` : nothing}
-
-        <slot name="suffix"></slot>
-      </div>
-
-      ${props.error && props.errorMessage ? html`
-        <span class="input-error-message" id="${props.uuid}-error" role="alert">
-          ${props.errorMessage}
-        </span>
-      ` : nothing}
-
-    </div>
-  `;
-}
+const stackCss = '@layer tokens,reset,components;@layer reset{:host{display:block;padding:10vh 0}*,*:before,*:after{box-sizing:border-box}}@layer components{.pts-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--lib-space-md)}.pts-layer{display:block;will-change:transform;transition:transform var(--duration-fast) var(--ease-out);white-space:nowrap;line-height:.9;text-transform:uppercase;-webkit-user-select:none;user-select:none}:host([size="sm"]) .pts-layer{font-size:clamp(2rem,6vw,4rem)}:host([size="md"]) .pts-layer{font-size:clamp(3rem,8vw,6rem)}:host([size="lg"]) .pts-layer,:host(:not([size])) .pts-layer{font-size:clamp(4rem,10vw,8rem)}:host([size="xl"]) .pts-layer{font-size:clamp(5rem,13vw,10rem)}:host([size="2xl"]) .pts-layer{font-size:clamp(6rem,16vw,14rem)}.pts-layer--outline{font-family:var(--lib-font-display);font-weight:300;letter-spacing:var(--tracking-tight);-webkit-text-stroke:1px var(--text-primary);color:transparent}.pts-layer--italic{font-family:var(--lib-font-body);font-style:italic;font-weight:400;letter-spacing:var(--tracking-tight);color:var(--text-primary)}:host([color="muted"]) .pts-layer--outline{-webkit-text-stroke-color:var(--text-muted)}:host([color="muted"]) .pts-layer--italic{color:var(--text-muted)}:host([color="kaki"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-kaki-500)}:host([color="kaki"]) .pts-layer--italic{color:var(--color-kaki-500)}:host([color="celadon"]) .pts-layer--outline{-webkit-text-stroke-color:var(--color-celadon-500)}:host([color="celadon"]) .pts-layer--italic{color:var(--color-celadon-500)}@media(prefers-reduced-motion:reduce){.pts-layer{transition:none;transform:none!important}}}';
 export {
-  inputTemplate
+  stackCss as default
 };
 //# sourceMappingURL=index216.js.map

package/dist/index216.js.map

@@ -1 +1 @@
-{"version":3,"file":"index216.js","sources":["../src/components/molecules/input/lib-input.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport interface InputTemplateProps {\n  uuid: string;\n  type: 'text' | 'email' | 'password';\n  label: string;\n  placeholder: string;\n  required: boolean;\n  disabled: boolean;\n  error: boolean;\n  errorMessage: string;\n  value: string;\n  showPassword: boolean;\n  handleInput: (e: InputEvent) => void;\n  handleTogglePassword: () => void;\n}\n\n/**\n * Plantilla base para el componente lib-input.\n * Renderiza un campo de texto con label, slots prefix/suffix y estado de error.\n */\nexport function inputTemplate(props: InputTemplateProps): TemplateResult {\n  const inputType = props.type === 'password' && props.showPassword ? 'text' : props.type;\n\n  return html`\n    <div class=\"input-group ${props.error ? 'has-error' : ''} ${props.disabled ? 'is-disabled' : ''}\">\n\n      ${props.label ? html`\n        <label\n          class=\"input-label\"\n          for=\"${props.uuid}\"\n        >\n          ${props.label}\n          ${props.required ? html`<span class=\"input-required\" aria-hidden=\"true\">*</span>` : nothing}\n        </label>\n      ` : nothing}\n\n      <div class=\"input-wrapper\">\n        <slot name=\"prefix\"></slot>\n\n        <input\n          id=\"${props.uuid}\"\n          type=\"${inputType}\"\n          placeholder=\"${props.placeholder}\"\n          ?required=\"${props.required}\"\n          ?disabled=\"${props.disabled}\"\n          aria-invalid=\"${props.error}\"\n          aria-describedby=\"${props.error && props.errorMessage ? `${props.uuid}-error` : nothing}\"\n          .value=\"${props.value}\"\n          @input=\"${props.handleInput}\"\n        />\n\n        ${props.type === 'password' ? html`\n          <button\n            class=\"input-password-toggle\"\n            type=\"button\"\n            @click=\"${props.handleTogglePassword}\"\n            aria-label=\"${props.showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}\"\n          >\n            ${props.showPassword ? html`\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\"/>\n                <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\"/>\n                <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n              </svg>\n            ` : html`\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n                <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n              </svg>\n            `}\n          </button>\n        ` : nothing}\n\n        <slot name=\"suffix\"></slot>\n      </div>\n\n      ${props.error && props.errorMessage ? html`\n        <span class=\"input-error-message\" id=\"${props.uuid}-error\" role=\"alert\">\n          ${props.errorMessage}\n        </span>\n      ` : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAqBO,SAAS,cAAc,OAA2C;AACvE,QAAM,YAAY,MAAM,SAAS,cAAc,MAAM,eAAe,SAAS,MAAM;AAEnF,SAAO;AAAA,8BACqB,MAAM,QAAQ,cAAc,EAAE,IAAI,MAAM,WAAW,gBAAgB,EAAE;AAAA;AAAA,QAE3F,MAAM,QAAQ;AAAA;AAAA;AAAA,iBAGL,MAAM,IAAI;AAAA;AAAA,YAEf,MAAM,KAAK;AAAA,YACX,MAAM,WAAW,iEAAiE,OAAO;AAAA;AAAA,UAE3F,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMD,MAAM,IAAI;AAAA,kBACR,SAAS;AAAA,yBACF,MAAM,WAAW;AAAA,uBACnB,MAAM,QAAQ;AAAA,uBACd,MAAM,QAAQ;AAAA,0BACX,MAAM,KAAK;AAAA,8BACP,MAAM,SAAS,MAAM,eAAe,GAAG,MAAM,IAAI,WAAW,OAAO;AAAA,oBAC7E,MAAM,KAAK;AAAA,oBACX,MAAM,WAAW;AAAA;AAAA;AAAA,UAG3B,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA,sBAIhB,MAAM,oBAAoB;AAAA,0BACtB,MAAM,eAAe,uBAAuB,oBAAoB;AAAA;AAAA,cAE5E,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMnB;AAAA;AAAA;AAAA;AAAA;AAAA,aAKH;AAAA;AAAA,YAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKX,MAAM,SAAS,MAAM,eAAe;AAAA,gDACI,MAAM,IAAI;AAAA,YAC9C,MAAM,YAAY;AAAA;AAAA,UAEpB,OAAO;AAAA;AAAA;AAAA;AAIjB;"}
+{"version":3,"file":"index216.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index217.js

@@ -1,35 +1,157 @@
-import { nothing, html } from "lit";
-const DEFAULT_HEADING = {
-  default: "Default",
-  info: "Info",
-  warning: "Warning",
-  error: "Error",
-  success: "Success"
-};
-function alertTemplate(props) {
-  const displayHeading = props.heading || DEFAULT_HEADING[props.type];
+import { html, nothing } from "lit";
+const svgSearch = html`
+  <svg width="11" height="11" 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 svgLogout = html`
+  <svg width="11" height="11" viewBox="0 0 14 14" fill="none"
+    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+    <path d="M6 2H3a1 1 0 00-1 1v8a1 1 0 001 1h3"/>
+    <polyline points="10,4 12,7 10,10"/>
+    <line x1="4" y1="7" x2="12" y2="7"/>
+  </svg>`;
+const svgMenu = html`
+  <svg width="18" height="18" viewBox="0 0 16 16" fill="none"
+    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+    <line x1="2" y1="4" x2="14" y2="4"/>
+    <line x1="2" y1="8" x2="14" y2="8"/>
+    <line x1="2" y1="12" x2="14" y2="12"/>
+  </svg>`;
+const svgClose = html`
+  <svg width="18" height="18" viewBox="0 0 14 14" fill="none"
+    stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+    <line x1="2" y1="2" x2="12" y2="12"/>
+    <line x1="12" y1="2" x2="2" y2="12"/>
+  </svg>`;
+function renderBadge(badge) {
+  if (badge === void 0 || badge === null || badge === "") return nothing;
+  if (badge === "dot") {
+    return html`<span class="sb-badge sb-badge--dot" aria-hidden="true"></span>`;
+  }
+  const n = typeof badge === "number" ? badge : parseInt(String(badge), 10);
+  const cls = !isNaN(n) && n > 9 || isNaN(n) ? "sb-badge--kaki" : "sb-badge--muted";
+  return html`<span class="sb-badge ${cls}">${badge}</span>`;
+}
+function renderHeader(p) {
+  const isGlitch = p.variant === "glitch";
+  const isKintsugi = p.variant === "kintsugi";
+  return html`
+    <div class="sb-header" part="header">
+      <div class="sb-logo-mark" part="logo-mark">
+        ${isKintsugi ? html`<span>${p.logoMark}</span>` : p.logoMark}
+      </div>
+      ${isGlitch ? html`<span class="sb-brand">⌗ ${p.brandName.toUpperCase()}</span>
+                <span class="sb-version">v0.1</span>` : html`<span class="sb-brand">${p.brandName}</span>`}
+    </div>
+  `;
+}
+function renderSearch(p) {
+  if (!p.showSearch) return nothing;
   return html`
-    <div class="alert" role="alert" aria-live="polite">
+    <div class="sb-search" part="search">
+      <div class="sb-search-inner">
+        ${svgSearch}
+        <input
+          class="sb-search-input"
+          type="search"
+          placeholder="${p.searchPlaceholder}"
+          aria-label="Buscar"
+          @input="${(e) => p.onSearchInput(e.target.value)}"
+        />
+        <span class="sb-search-kbd">⌘K</span>
+      </div>
+    </div>
+  `;
+}
+function renderNav(p) {
+  const isGlitch = p.variant === "glitch";
+  return html`
+    <nav class="sb-nav" part="nav" aria-label="Navegación principal">
+      <div class="sb-indicator" part="indicator"></div>
+
+      ${p.links.map((link) => html`
+        ${link.group ? html`
+          <div class="sb-group" part="group">
+            ${isGlitch ? `// ${link.group}` : link.group}
+          </div>
+        ` : nothing}
 
-      <div class="alert-content">
-        <p class="alert-title">${displayHeading}</p>
-        <div class="alert-body">
-          <slot></slot>
-        </div>
+        <button
+          class="sb-link ${link.id === p.active ? "is-active" : ""}"
+          part="link${link.id === p.active ? " link-active" : ""}"
+          data-id="${link.id}"
+          ?disabled="${link.disabled}"
+          aria-current="${link.id === p.active ? "page" : nothing}"
+          @click="${() => {
+    if (!link.disabled) p.onLinkClick(link.id);
+  }}"
+        >
+          <span class="sb-link-icon">
+            <lib-icon name="${link.icon}" size="sm"></lib-icon>
+          </span>
+
+          ${isGlitch ? html`<span class="sb-link-prefix">›</span>` : nothing}
+
+          <span class="sb-link-label">${link.label}</span>
+
+          ${renderBadge(link.badge)}
+        </button>
+      `)}
+    </nav>
+  `;
+}
+function renderUser(p) {
+  const isDark = p.variant === "dark" || !p.variant;
+  return html`
+    <div class="sb-user" part="user">
+      <div class="sb-user-avatar" part="user-avatar">
+        ${p.userAvatar ? html`<img src="${p.userAvatar}" alt="${p.userName}">` : p.userInitials || p.userName.slice(0, 1)}
       </div>
 
-      ${props.closable ? html`
-            <button
-              class="alert-close"
-              type="button"
-              aria-label="Cerrar alerta"
-              @click="${props.handleClose}"
-            >×</button>` : nothing}
+      <div class="sb-user-info">
+        <div class="sb-user-name">${p.userName}</div>
+        ${p.userRole ? html`<div class="sb-user-role">${p.userRole}</div>` : nothing}
+      </div>
 
+      ${isDark ? html`<span class="sb-user-dot" aria-hidden="true"></span>` : p.showUserAction ? html`
+              <button
+                class="sb-user-action"
+                aria-label="Acción de usuario"
+                @click="${p.onUserAction}"
+              >${svgLogout}</button>` : nothing}
     </div>
   `;
 }
+function sidebarTemplate(p) {
+  return html`
+    <div
+      class="sb-overlay ${p.mobileOpen ? "is-open" : ""}"
+      @click="${p.onOverlayClick}"
+      aria-hidden="true"
+    ></div>
+
+    <aside
+      class="sidebar
+        ${p.mobileOpen ? "is-open" : ""}
+        ${p.collapsed ? "is-collapsed" : ""}"
+      part="sidebar"
+    >
+      ${renderHeader(p)}
+      ${renderSearch(p)}
+      ${renderNav(p)}
+      ${renderUser(p)}
+    </aside>
+
+    <button
+      class="sb-toggle"
+      aria-label="${p.mobileOpen ? "Cerrar menú" : "Abrir menú"}"
+      aria-expanded="${p.mobileOpen}"
+      @click="${p.onToggleClick}"
+    >${p.mobileOpen ? svgClose : svgMenu}</button>
+  `;
+}
 export {
-  alertTemplate
+  sidebarTemplate
 };
 //# sourceMappingURL=index217.js.map

package/dist/index217.js.map

@@ -1 +1 @@
-{"version":3,"file":"index217.js","sources":["../src/components/molecules/lib-alert/lib-alert.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { AlertTemplateProps, AlertType } from './lib-alert.types';\n\n/** Auto-generated heading per type if none is provided. */\nconst DEFAULT_HEADING: Record<AlertType, string> = {\n  default: 'Default',\n  info:    'Info',\n  warning: 'Warning',\n  error:   'Error',\n  success: 'Success',\n};\n\n/**\n * Template para lib-alert.\n * Estructura: borde izquierdo · [heading DM Mono] · slot (cuerpo) · [botón cerrar]\n */\nexport function alertTemplate(props: AlertTemplateProps): TemplateResult {\n  const displayHeading = props.heading || DEFAULT_HEADING[props.type];\n\n  return html`\n    <div class=\"alert\" role=\"alert\" aria-live=\"polite\">\n\n      <div class=\"alert-content\">\n        <p class=\"alert-title\">${displayHeading}</p>\n        <div class=\"alert-body\">\n          <slot></slot>\n        </div>\n      </div>\n\n      ${props.closable\n        ? html`\n            <button\n              class=\"alert-close\"\n              type=\"button\"\n              aria-label=\"Cerrar alerta\"\n              @click=\"${props.handleClose}\"\n            >×</button>`\n        : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,kBAA6C;AAAA,EACjD,SAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAMO,SAAS,cAAc,OAA2C;AACvE,QAAM,iBAAiB,MAAM,WAAW,gBAAgB,MAAM,IAAI;AAElE,SAAO;AAAA;AAAA;AAAA;AAAA,iCAIwB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMvC,MAAM,WACJ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKc,MAAM,WAAW;AAAA,2BAE/B,OAAO;AAAA;AAAA;AAAA;AAIjB;"}
+{"version":3,"file":"index217.js","sources":["../src/components/organisms/sidebar/lib-sidebar.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { SidebarLink } from '../../../types';\n\nexport interface SidebarTemplateProps {\n  /* Header */\n  logoMark:   string;\n  brandName:  string;\n  /* Search */\n  showSearch:          boolean;\n  searchPlaceholder:   string;\n  /* Nav */\n  links:  SidebarLink[];\n  active: string;\n  /* User footer */\n  userName:    string;\n  userRole:    string;\n  userAvatar:  string;\n  userInitials:string;\n  showUserAction: boolean;\n  /* State */\n  variant:    string;\n  collapsed:  boolean;\n  mobileOpen: boolean;\n  /* Handlers */\n  onLinkClick:   (id: string) => void;\n  onUserAction:  () => void;\n  onSearchInput: (q: string) => void;\n  onOverlayClick: () => void;\n  onToggleClick:  () => void;\n}\n\n/* ── SVG icons inline — no lib-icon dependency for shell elements ── */\nconst svgSearch = html`\n  <svg width=\"11\" height=\"11\" 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\nconst svgLogout = html`\n  <svg width=\"11\" height=\"11\" viewBox=\"0 0 14 14\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <path d=\"M6 2H3a1 1 0 00-1 1v8a1 1 0 001 1h3\"/>\n    <polyline points=\"10,4 12,7 10,10\"/>\n    <line x1=\"4\" y1=\"7\" x2=\"12\" y2=\"7\"/>\n  </svg>`;\n\nconst svgMenu = html`\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <line x1=\"2\" y1=\"4\" x2=\"14\" y2=\"4\"/>\n    <line x1=\"2\" y1=\"8\" x2=\"14\" y2=\"8\"/>\n    <line x1=\"2\" y1=\"12\" x2=\"14\" y2=\"12\"/>\n  </svg>`;\n\nconst svgClose = html`\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n    <line x1=\"2\" y1=\"2\" x2=\"12\" y2=\"12\"/>\n    <line x1=\"12\" y1=\"2\" x2=\"2\" y2=\"12\"/>\n  </svg>`;\n\n/* ── Badge ── */\nfunction renderBadge(badge: string | number | undefined): TemplateResult | typeof nothing {\n  if (badge === undefined || badge === null || badge === '') return nothing;\n  if (badge === 'dot') {\n    return html`<span class=\"sb-badge sb-badge--dot\" aria-hidden=\"true\"></span>`;\n  }\n  const n = typeof badge === 'number' ? badge : parseInt(String(badge), 10);\n  const cls = (!isNaN(n) && n > 9) || isNaN(n) ? 'sb-badge--kaki' : 'sb-badge--muted';\n  return html`<span class=\"sb-badge ${cls}\">${badge}</span>`;\n}\n\n/* ── Header ── */\nfunction renderHeader(p: SidebarTemplateProps): TemplateResult {\n  const isGlitch = p.variant === 'glitch';\n  const isKintsugi = p.variant === 'kintsugi';\n\n  return html`\n    <div class=\"sb-header\" part=\"header\">\n      <div class=\"sb-logo-mark\" part=\"logo-mark\">\n        ${isKintsugi\n          ? html`<span>${p.logoMark}</span>`\n          : p.logoMark}\n      </div>\n      ${isGlitch\n        ? html`<span class=\"sb-brand\">⌗ ${p.brandName.toUpperCase()}</span>\n                <span class=\"sb-version\">v0.1</span>`\n        : html`<span class=\"sb-brand\">${p.brandName}</span>`}\n    </div>\n  `;\n}\n\n/* ── Search ── */\nfunction renderSearch(p: SidebarTemplateProps): TemplateResult | typeof nothing {\n  if (!p.showSearch) return nothing;\n  return html`\n    <div class=\"sb-search\" part=\"search\">\n      <div class=\"sb-search-inner\">\n        ${svgSearch}\n        <input\n          class=\"sb-search-input\"\n          type=\"search\"\n          placeholder=\"${p.searchPlaceholder}\"\n          aria-label=\"Buscar\"\n          @input=\"${(e: Event): void =>\n            p.onSearchInput((e.target as HTMLInputElement).value)}\"\n        />\n        <span class=\"sb-search-kbd\">⌘K</span>\n      </div>\n    </div>\n  `;\n}\n\n/* ── Nav ── */\nfunction renderNav(p: SidebarTemplateProps): TemplateResult {\n  const isGlitch = p.variant === 'glitch';\n\n  return html`\n    <nav class=\"sb-nav\" part=\"nav\" aria-label=\"Navegación principal\">\n      <div class=\"sb-indicator\" part=\"indicator\"></div>\n\n      ${p.links.map(link => html`\n        ${link.group ? html`\n          <div class=\"sb-group\" part=\"group\">\n            ${isGlitch ? `// ${link.group}` : link.group}\n          </div>\n        ` : nothing}\n\n        <button\n          class=\"sb-link ${link.id === p.active ? 'is-active' : ''}\"\n          part=\"link${link.id === p.active ? ' link-active' : ''}\"\n          data-id=\"${link.id}\"\n          ?disabled=\"${link.disabled}\"\n          aria-current=\"${link.id === p.active ? 'page' : nothing}\"\n          @click=\"${(): void => { if (!link.disabled) p.onLinkClick(link.id); }}\"\n        >\n          <span class=\"sb-link-icon\">\n            <lib-icon name=\"${link.icon}\" size=\"sm\"></lib-icon>\n          </span>\n\n          ${isGlitch\n            ? html`<span class=\"sb-link-prefix\">›</span>`\n            : nothing}\n\n          <span class=\"sb-link-label\">${link.label}</span>\n\n          ${renderBadge(link.badge)}\n        </button>\n      `)}\n    </nav>\n  `;\n}\n\n/* ── User footer ── */\nfunction renderUser(p: SidebarTemplateProps): TemplateResult {\n  const isDark = p.variant === 'dark' || !p.variant;\n\n  return html`\n    <div class=\"sb-user\" part=\"user\">\n      <div class=\"sb-user-avatar\" part=\"user-avatar\">\n        ${p.userAvatar\n          ? html`<img src=\"${p.userAvatar}\" alt=\"${p.userName}\">`\n          : p.userInitials || p.userName.slice(0, 1)}\n      </div>\n\n      <div class=\"sb-user-info\">\n        <div class=\"sb-user-name\">${p.userName}</div>\n        ${p.userRole ? html`<div class=\"sb-user-role\">${p.userRole}</div>` : nothing}\n      </div>\n\n      ${isDark\n        ? html`<span class=\"sb-user-dot\" aria-hidden=\"true\"></span>`\n        : p.showUserAction\n          ? html`\n              <button\n                class=\"sb-user-action\"\n                aria-label=\"Acción de usuario\"\n                @click=\"${p.onUserAction}\"\n              >${svgLogout}</button>`\n          : nothing}\n    </div>\n  `;\n}\n\n/* ── Template principal ── */\nexport function sidebarTemplate(p: SidebarTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"sb-overlay ${p.mobileOpen ? 'is-open' : ''}\"\n      @click=\"${p.onOverlayClick}\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <aside\n      class=\"sidebar\n        ${p.mobileOpen ? 'is-open' : ''}\n        ${p.collapsed  ? 'is-collapsed' : ''}\"\n      part=\"sidebar\"\n    >\n      ${renderHeader(p)}\n      ${renderSearch(p)}\n      ${renderNav(p)}\n      ${renderUser(p)}\n    </aside>\n\n    <button\n      class=\"sb-toggle\"\n      aria-label=\"${p.mobileOpen ? 'Cerrar menú' : 'Abrir menú'}\"\n      aria-expanded=\"${p.mobileOpen}\"\n      @click=\"${p.onToggleClick}\"\n    >${p.mobileOpen ? svgClose : svgMenu}</button>\n  `;\n}"],"names":[],"mappings":";AAgCA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlB,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,SAAS,YAAY,OAAqE;AACxF,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,GAAI,QAAO;AAClE,MAAI,UAAU,OAAO;AACnB,WAAO;AAAA,EACT;AACA,QAAM,IAAI,OAAO,UAAU,WAAW,QAAQ,SAAS,OAAO,KAAK,GAAG,EAAE;AACxE,QAAM,MAAO,CAAC,MAAM,CAAC,KAAK,IAAI,KAAM,MAAM,CAAC,IAAI,mBAAmB;AAClE,SAAO,6BAA6B,GAAG,KAAK,KAAK;AACnD;AAGA,SAAS,aAAa,GAAyC;AAC7D,QAAM,WAAW,EAAE,YAAY;AAC/B,QAAM,aAAa,EAAE,YAAY;AAEjC,SAAO;AAAA;AAAA;AAAA,UAGC,aACE,aAAa,EAAE,QAAQ,YACvB,EAAE,QAAQ;AAAA;AAAA,QAEd,WACE,gCAAgC,EAAE,UAAU,aAAa;AAAA,wDAEzD,8BAA8B,EAAE,SAAS,SAAS;AAAA;AAAA;AAG5D;AAGA,SAAS,aAAa,GAA0D;AAC9E,MAAI,CAAC,EAAE,WAAY,QAAO;AAC1B,SAAO;AAAA;AAAA;AAAA,UAGC,SAAS;AAAA;AAAA;AAAA;AAAA,yBAIM,EAAE,iBAAiB;AAAA;AAAA,oBAExB,CAAC,MACT,EAAE,cAAe,EAAE,OAA4B,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAMjE;AAGA,SAAS,UAAU,GAAyC;AAC1D,QAAM,WAAW,EAAE,YAAY;AAE/B,SAAO;AAAA;AAAA;AAAA;AAAA,QAID,EAAE,MAAM,IAAI,CAAA,SAAQ;AAAA,UAClB,KAAK,QAAQ;AAAA;AAAA,cAET,WAAW,MAAM,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA;AAAA,YAE5C,OAAO;AAAA;AAAA;AAAA,2BAGQ,KAAK,OAAO,EAAE,SAAS,cAAc,EAAE;AAAA,sBAC5C,KAAK,OAAO,EAAE,SAAS,iBAAiB,EAAE;AAAA,qBAC3C,KAAK,EAAE;AAAA,uBACL,KAAK,QAAQ;AAAA,0BACV,KAAK,OAAO,EAAE,SAAS,SAAS,OAAO;AAAA,oBAC7C,MAAY;AAAE,QAAI,CAAC,KAAK,SAAU,GAAE,YAAY,KAAK,EAAE;AAAA,EAAG,CAAC;AAAA;AAAA;AAAA,8BAGjD,KAAK,IAAI;AAAA;AAAA;AAAA,YAG3B,WACE,8CACA,OAAO;AAAA;AAAA,wCAEmB,KAAK,KAAK;AAAA;AAAA,YAEtC,YAAY,KAAK,KAAK,CAAC;AAAA;AAAA,OAE5B,CAAC;AAAA;AAAA;AAGR;AAGA,SAAS,WAAW,GAAyC;AAC3D,QAAM,SAAS,EAAE,YAAY,UAAU,CAAC,EAAE;AAE1C,SAAO;AAAA;AAAA;AAAA,UAGC,EAAE,aACA,iBAAiB,EAAE,UAAU,UAAU,EAAE,QAAQ,OACjD,EAAE,gBAAgB,EAAE,SAAS,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,oCAIhB,EAAE,QAAQ;AAAA,UACpC,EAAE,WAAW,iCAAiC,EAAE,QAAQ,WAAW,OAAO;AAAA;AAAA;AAAA,QAG5E,SACE,6DACA,EAAE,iBACA;AAAA;AAAA;AAAA;AAAA,0BAIc,EAAE,YAAY;AAAA,iBACvB,SAAS,cACd,OAAO;AAAA;AAAA;AAGnB;AAGO,SAAS,gBAAgB,GAAyC;AACvE,SAAO;AAAA;AAAA,0BAEiB,EAAE,aAAa,YAAY,EAAE;AAAA,gBACvC,EAAE,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMtB,EAAE,aAAa,YAAY,EAAE;AAAA,UAC7B,EAAE,YAAa,iBAAiB,EAAE;AAAA;AAAA;AAAA,QAGpC,aAAa,CAAC,CAAC;AAAA,QACf,aAAa,CAAC,CAAC;AAAA,QACf,UAAU,CAAC,CAAC;AAAA,QACZ,WAAW,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKD,EAAE,aAAa,gBAAgB,YAAY;AAAA,uBACxC,EAAE,UAAU;AAAA,gBACnB,EAAE,aAAa;AAAA,OACxB,EAAE,aAAa,WAAW,OAAO;AAAA;AAExC;"}

package/dist/index218.js

@@ -1,5 +1,5 @@
-const alertCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.alert{padding:var(--lib-space-md) var(--lib-space-lg);border-left:2px solid;display:flex;gap:var(--lib-space-md);align-items:flex-start;width:100%;transition:opacity var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-default)}.alert-content{flex:1;min-width:0}.alert-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;margin-bottom:var(--lib-space-xs);line-height:var(--leading-snug)}.alert-body{font-family:var(--lib-font-body);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.alert-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;cursor:pointer;padding:0;opacity:.5;color:inherit;transition:opacity var(--duration-fast) var(--ease-default);font-size:16px;line-height:1;font-family:var(--lib-font-mono)}.alert-close:hover{opacity:1}:host([type="default"]) .alert,.alert{background:var(--bg-surface);border-color:var(--border-strong)}:host([type="default"]) .alert-title{color:var(--text-secondary)}:host([type="default"]) .alert-body{color:var(--text-secondary)}:host([type="info"]) .alert{background:var(--color-celadon-50);border-color:var(--color-celadon-400)}:host([type="info"]) .alert-title{color:var(--color-celadon-600)}:host([type="info"]) .alert-body{color:var(--color-celadon-500)}:host([type="warning"]) .alert{background:#fffbf0;border-color:var(--color-warning)}:host([type="warning"]) .alert-title{color:var(--color-warning)}:host([type="warning"]) .alert-body{color:#6b5010}:host([type="error"]) .alert{background:#fff8f7;border-color:var(--color-error)}:host([type="error"]) .alert-title{color:var(--color-error)}:host([type="error"]) .alert-body{color:#6b2015}:host([type="success"]) .alert{background:#f5faf6;border-color:var(--color-success)}:host([type="success"]) .alert-title{color:var(--color-success)}:host([type="success"]) .alert-body{color:#1e4a2a}:host([glass]) .alert{background:var(--lib-glass-bg);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);border:var(--lib-glass-border);border-left-width:2px;box-shadow:var(--lib-glass-shadow);position:relative;overflow:hidden}:host([glass]) .alert:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--lib-glass-shine);pointer-events:none}:host([glass]) .alert-title,:host([glass]) .alert-body{color:var(--lib-glass-text);text-shadow:var(--lib-glass-text-shadow);position:relative;z-index:1}:host([glass]) .alert-close{color:var(--lib-glass-text);position:relative;z-index:1}}';
+const componentCss = '@layer tokens,reset,components;@layer reset{:host{display:block;height:100%}*,*:before,*:after{box-sizing:border-box}a{text-decoration:none}button{font:inherit;cursor:pointer;border:none;background:none}}@layer components{.sidebar{width:var(--lib-sidebar-width, 240px);height:100vh;display:flex;flex-direction:column;flex-shrink:0;position:relative;z-index:var(--z-raised);overflow:hidden;transition:width var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out);background:var(--color-washi-950);border-right:1px solid rgb(255,255,255,.07)}.sidebar.is-collapsed{width:64px}:host([variant="light"]) .sidebar{background:var(--bg-elevated);border-right:1px solid var(--border-subtle)}:host([variant="kintsugi"]) .sidebar{background:var(--color-washi-950);border-right:none}:host([variant="kintsugi"]) .sidebar:after{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent 0%,rgb(184,90,30,.3) 10%,var(--color-kaki-400) 30%,#F5D08A 50%,var(--color-kaki-400) 70%,rgb(184,90,30,.3) 90%,transparent 100%);background-size:100% 200%;animation:sb-kintsugi-seam 5s linear infinite;pointer-events:none;z-index:2}@keyframes sb-kintsugi-seam{0%{background-position:0 -100%}to{background-position:0 100%}}:host([variant="glitch"]) .sidebar{background:var(--color-washi-950);border-right:1px solid rgb(255,255,255,.06);animation:sb-glitch-border 7s steps(1) infinite}:host([variant="glitch"]) .sidebar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.015) 3px,rgb(255,255,255,.015) 4px);pointer-events:none;z-index:5;animation:sb-scanline-shift 7s steps(1) infinite}@keyframes sb-glitch-border{0%,88%,to{border-color:#ffffff0f;box-shadow:none}89%{border-color:#d9723466;box-shadow:-2px 0 #d9723433}90%{border-color:#4e94824d;box-shadow:2px 0 #4e948226}91%{border-color:#ffffff0f;box-shadow:none}}@keyframes sb-scanline-shift{0%,87%,to{opacity:1;transform:none}88%{transform:translateY(-3px);opacity:.7}89%{transform:translateY(2px);opacity:.9}90%{transform:none;opacity:1}}.sb-header{height:56px;padding:0 var(--lib-space-md);display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;border-bottom:1px solid rgb(255,255,255,.06);position:relative;z-index:1;overflow:hidden}:host([variant="light"]) .sb-header{border-bottom-color:var(--color-washi-100)}:host([variant="kintsugi"]) .sb-header{border-bottom-color:#b85a1e1f}.sb-logo-mark{width:28px;height:28px;background:var(--color-kaki-500);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-display);color:#fff;font-size:1rem;font-weight:300;flex-shrink:0}:host([variant="dark"]) .sb-logo-mark,.sb-logo-mark{background:var(--color-kaki-500);color:#fff}:host([variant="kintsugi"]) .sb-logo-mark{position:relative;background:transparent;border:none;overflow:visible;border-radius:50%}:host([variant="kintsugi"]) .sb-logo-mark:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;background:conic-gradient(var(--color-kaki-600),#F5D08A,var(--color-kaki-400),#F5D08A,var(--color-kaki-600));animation:sb-logo-ring 4s linear infinite}:host([variant="kintsugi"]) .sb-logo-mark:after{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:50%;background:var(--color-washi-950)}:host([variant="kintsugi"]) .sb-logo-mark span{position:relative;z-index:2;color:var(--color-kaki-400)}@keyframes sb-logo-ring{to{transform:rotate(360deg)}}.sb-brand{font-family:var(--lib-font-display);font-size:1.1rem;font-weight:300;letter-spacing:.08em;white-space:nowrap;overflow:hidden;transition:opacity var(--duration-base) var(--ease-out),width var(--duration-slow) var(--ease-out);color:#faf7f4a6}:host([variant="light"]) .sb-brand{color:var(--text-primary)}:host([variant="kintsugi"]) .sb-brand{color:#faf7f480}:host([variant="glitch"]) .sb-brand{font-family:var(--lib-font-mono);font-size:.75rem;letter-spacing:.2em;color:var(--color-kaki-400)}.sidebar.is-collapsed .sb-brand{opacity:0;width:0;pointer-events:none}.sb-version{margin-left:auto;font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.12em;color:#faf7f426;white-space:nowrap;transition:opacity var(--duration-base)}.sidebar.is-collapsed .sb-version{opacity:0;pointer-events:none}.sb-search{padding:var(--lib-space-sm) var(--lib-space-md);flex-shrink:0;overflow:hidden;transition:max-height var(--duration-slow) var(--ease-out),opacity var(--duration-base);max-height:52px}.sidebar.is-collapsed .sb-search{opacity:0;max-height:0;padding:0;pointer-events:none}.sb-search-inner{display:flex;align-items:center;gap:var(--lib-space-xs);border:1px solid rgb(255,255,255,.08);background:#ffffff0a;padding:0 var(--lib-space-sm);height:30px;transition:border-color var(--duration-base)}.sb-search-inner:focus-within{border-color:#ffffff2e}.sb-search-inner svg{flex-shrink:0;color:#faf7f440}.sb-search-input{flex:1;background:none;border:none;outline:none;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;color:#faf7f499;width:100%}.sb-search-input::placeholder{color:#faf7f433}.sb-search-kbd{margin-left:auto;font-family:var(--lib-font-mono);font-size:8px;color:#faf7f426;border:1px solid rgb(255,255,255,.1);padding:0 4px;white-space:nowrap;flex-shrink:0}.sb-nav{flex:1;padding:var(--lib-space-md) 0;display:flex;flex-direction:column;position:relative;z-index:1;overflow-y:auto;scrollbar-width:none}.sb-nav::-webkit-scrollbar{display:none}.sb-indicator{position:absolute;left:0;width:2px;background:var(--color-kaki-500);border-radius:0 2px 2px 0;pointer-events:none;opacity:0;transition:top .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1),opacity var(--duration-base)}.sb-indicator.visible{opacity:1}:host([variant="kintsugi"]) .sb-indicator{background:var(--color-kaki-400)}.sidebar.is-collapsed .sb-indicator{display:none}.sb-group{padding:var(--lib-space-sm) var(--lib-space-md) var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:#faf7f42e;white-space:nowrap;overflow:hidden;transition:opacity var(--duration-base),max-height var(--duration-slow),padding var(--duration-slow);max-height:32px}:host([variant="light"]) .sb-group{color:var(--color-washi-400)}:host([variant="kintsugi"]) .sb-group{color:#b85a1e59}:host([variant="glitch"]) .sb-group{color:#faf7f426;letter-spacing:.16em}.sidebar.is-collapsed .sb-group{opacity:0;max-height:0;padding-top:0;padding-bottom:0;pointer-events:none}.sb-link{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);width:100%;text-align:left;border-left:2px solid transparent;background:transparent;cursor:pointer;position:relative;transition:color var(--duration-fast),background var(--duration-fast),border-color var(--duration-fast);font-family:var(--lib-font-body);font-size:var(--text-sm);color:#faf7f459}:host([variant="light"]) .sb-link{color:var(--color-washi-600)}:host([variant="kintsugi"]) .sb-link{color:#faf7f44d}:host([variant="glitch"]) .sb-link{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.1em;color:#faf7f440;padding:.45rem var(--lib-space-md)}.sb-link:hover:not(.is-active,[disabled]){color:#faf7f4b3;background:#ffffff0a;border-left-color:#ffffff26}:host([variant="light"]) .sb-link:hover:not(.is-active,[disabled]){color:var(--color-washi-900);background:var(--color-washi-50);border-left-color:var(--color-washi-300)}:host([variant="kintsugi"]) .sb-link:hover:not(.is-active,[disabled]){color:#faf7f499;background:#b85a1e0d}:host([variant="glitch"]) .sb-link:hover:not(.is-active,[disabled]){color:#faf7f499;background:#ffffff08}.sb-link.is-active{color:var(--color-kaki-400);background:#b85a1e1a;border-left-color:var(--color-kaki-500)}:host([variant="light"]) .sb-link.is-active{color:var(--color-kaki-600);background:var(--color-kaki-50);border-left-color:var(--color-kaki-500)}:host([variant="kintsugi"]) .sb-link.is-active{color:var(--color-kaki-400);background:linear-gradient(90deg,rgb(184,90,30,.15),transparent);border-left-color:var(--color-kaki-400)}:host([variant="glitch"]) .sb-link.is-active{color:var(--color-kaki-400);background:#b85a1e14;border-left-color:var(--color-kaki-500)}.sb-link[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}.sb-link-icon{display:flex;align-items:center;flex-shrink:0;font-size:15px;opacity:.7;transition:opacity var(--duration-base)}.sb-link.is-active .sb-link-icon{opacity:1}.sb-link-prefix{font-size:9px;flex-shrink:0;color:var(--color-kaki-400)}.sb-link:not(.is-active) .sb-link-prefix{opacity:.4;color:inherit}.sb-link-label{white-space:nowrap;overflow:hidden;transition:opacity var(--duration-base),width var(--duration-slow) var(--ease-out)}.sb-badge{margin-left:auto;font-family:var(--lib-font-mono);font-size:8px;padding:1px 6px;letter-spacing:.1em;flex-shrink:0;transition:opacity var(--duration-base)}.sb-badge--kaki{background:var(--color-kaki-500);color:#fff}.sb-badge--muted{background:var(--color-washi-200);color:var(--color-washi-600)}:host([variant="kintsugi"]) .sb-badge--kaki{background:transparent;border:1px solid rgb(184,90,30,.3);color:var(--color-kaki-400)}.sb-badge--dot{width:6px;height:6px;border-radius:50%;background:var(--color-kaki-400);padding:0}:host([variant="glitch"]) .sb-badge--dot{animation:sb-glitch-pulse 2s ease-in-out infinite}@keyframes sb-glitch-pulse{0%,to{opacity:1}50%{opacity:.2}}.sidebar.is-collapsed .sb-link{position:relative;padding:0;height:44px;border-left-color:transparent}.sidebar.is-collapsed .sb-link.is-active{background:#b85a1e26;border-left-color:transparent}:host([variant="light"]) .sidebar.is-collapsed .sb-link.is-active{background:var(--color-kaki-50)}.sidebar.is-collapsed .sb-link-label,.sidebar.is-collapsed .sb-badge,.sidebar.is-collapsed .sb-link-prefix{display:none}.sidebar.is-collapsed .sb-link-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:17px;opacity:1}.sb-user{padding:var(--lib-space-md);border-top:1px solid rgb(255,255,255,.06);display:flex;align-items:center;gap:var(--lib-space-sm);flex-shrink:0;overflow:hidden;position:relative;z-index:1;transition:padding var(--duration-slow)}:host([variant="light"]) .sb-user{border-top-color:var(--color-washi-100)}:host([variant="kintsugi"]) .sb-user{border-top-color:#b85a1e1f}:host([variant="glitch"]) .sb-user{border-top-color:#ffffff0d}.sidebar.is-collapsed .sb-user{justify-content:center;padding:var(--lib-space-sm)}.sb-user-avatar{width:30px;height:30px;border-radius:50%;background:var(--color-kaki-500);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-display);color:#fff;font-size:.95rem;flex-shrink:0;overflow:hidden;cursor:pointer}.sb-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}:host([variant="dark"]) .sb-user-avatar,.sb-user-avatar{background:var(--color-kaki-500);color:#fff}:host([variant="kintsugi"]) .sb-user-avatar{background:#b85a1e40;border:1px solid rgb(184,90,30,.4);color:var(--color-kaki-400)}:host([variant="glitch"]) .sb-user-avatar{background:#b85a1e40;border:1px solid rgb(184,90,30,.35);color:var(--color-kaki-400);font-family:var(--lib-font-mono);font-size:.75rem}.sb-user-info{min-width:0;flex:1;overflow:hidden;transition:opacity var(--duration-base),width var(--duration-slow)}.sidebar.is-collapsed .sb-user-info{opacity:0;width:0;pointer-events:none}.sb-user-name{font-family:var(--lib-font-body);font-size:var(--text-sm);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#faf7f48c}:host([variant="light"]) .sb-user-name{color:var(--color-washi-800)}:host([variant="kintsugi"]) .sb-user-name{color:#faf7f473}.sb-user-role{font-family:var(--lib-font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;margin-top:1px;color:#faf7f433}:host([variant="light"]) .sb-user-role{color:var(--color-washi-400)}:host([variant="kintsugi"]) .sb-user-role{color:#b85a1e80}.sb-user-action{margin-left:auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid rgb(255,255,255,.1);color:#faf7f44d;flex-shrink:0;transition:border-color var(--duration-base),color var(--duration-base),background var(--duration-base);cursor:pointer}.sb-user-action:hover{border-color:#fff3;background:#ffffff0d;color:#faf7f4b3}:host([variant="light"]) .sb-user-action{border-color:var(--color-washi-200);color:var(--color-washi-400)}:host([variant="light"]) .sb-user-action:hover{border-color:var(--color-washi-400);background:var(--color-washi-50);color:var(--color-washi-700)}.sb-user-dot{width:6px;height:6px;border-radius:50%;background:var(--color-celadon-400);flex-shrink:0;margin-left:auto}.sidebar.is-collapsed .sb-user-action,.sidebar.is-collapsed .sb-user-dot{display:none}.sb-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:calc(var(--z-raised) - 1);opacity:0;transition:opacity var(--duration-base)}.sb-toggle{display:none;position:fixed;bottom:var(--lib-space-lg);right:var(--lib-space-lg);z-index:var(--z-modal);width:44px;height:44px;background:var(--color-washi-900);color:var(--color-washi-50);align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}@media(max-width:768px){:host{height:auto}.sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;transform:translate(-100%);z-index:var(--z-modal);box-shadow:var(--shadow-xl)}.sidebar.is-open{transform:translate(0)}.sb-toggle{display:flex}.sb-overlay{display:block}.sb-overlay.is-open{opacity:1;pointer-events:auto}}@media(prefers-reduced-motion:reduce){.sidebar,.sb-indicator,:host([variant="kintsugi"]) .sidebar:after,:host([variant="kintsugi"]) .sb-logo-mark:before,:host([variant="glitch"]) .sidebar,:host([variant="glitch"]) .sidebar:before{animation:none!important;transition:none!important}}}';
 export {
-  alertCss as default
+  componentCss as default
 };
 //# sourceMappingURL=index218.js.map

package/dist/index219.js

@@ -1,5 +1,8 @@
-const modalCss = "@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:contents}.mo-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal, 500);background:#120e0aa6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--lib-space-lg);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity var(--duration-slow) var(--ease-out)}:host([open]) .mo-backdrop{opacity:1;pointer-events:auto}.mo-panel-wrap{position:relative;width:100%;max-width:560px;max-height:calc(100vh - var(--lib-space-lg) * 2);display:flex;flex-direction:column;transform:scale(.95) translateY(8px);transition:transform var(--duration-slow) var(--ease-out)}:host([open]) .mo-panel-wrap{transform:scale(1) translateY(0)}.mo-panel-wrap.mo-slide-up{transform:translateY(40px)}:host([open]) .mo-panel-wrap.mo-slide-up{transform:translateY(0)}.mo-panel-wrap.mo-slide-down{transform:translateY(-40px)}:host([open]) .mo-panel-wrap.mo-slide-down{transform:translateY(0)}.mo-panel-wrap.mo-xs{max-width:280px}.mo-panel-wrap.mo-sm{max-width:420px}.mo-panel-wrap.mo-lg{max-width:720px}.mo-panel-wrap.mo-xl{max-width:920px}.mo-panel-wrap.mo-full{max-width:100vw;max-height:100vh;height:100vh;margin:0}.mo-panel-wrap.mo-full .mo-panel{max-height:100vh;height:100vh;border:none}.mo-panel{background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:0 20px 60px #1a140e2e,0 4px 16px #1a140e1a;display:flex;flex-direction:column;max-height:calc(100vh - var(--lib-space-lg) * 2);overflow:hidden}.mo-panel.is-editorial .mo-header{border-bottom:none;padding-bottom:0}.mo-panel.is-editorial .mo-title{font-size:2.5rem;letter-spacing:var(--tracking-tight)}.mo-panel.is-editorial .mo-body{padding-top:var(--lib-space-sm)}.mo-panel.is-danger .mo-header{border-bottom-color:#f5ddd9;background:#f5ddd9}.mo-panel.is-danger .mo-title{color:var(--color-error)}.mo-panel.is-danger .mo-footer{border-top-color:#f5ddd9;background:#fef5f3}.mo-header{display:flex;align-items:flex-start;gap:var(--lib-space-md);padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-elevated)}.mo-header-icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-muted)}.mo-header-icon.is-kaki{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.mo-header-icon.is-celadon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.mo-header-icon.is-error{background:#f5ddd9;border-color:#f5ddd9;color:var(--color-error)}.mo-header-icon.is-info{background:#d6e8f5;border-color:#d6e8f5;color:#1a4a6e}.mo-header-text{flex:1;min-width:0}.mo-title{font-family:var(--lib-font-display);font-size:var(--text-2xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--text-primary)}.mo-subtitle{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);margin-top:var(--lib-space-xs)}.mo-close{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;line-height:1;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);margin-top:-2px;margin-right:-4px}.mo-close:hover{background:var(--bg-surface);color:var(--text-primary)}.mo-body{flex:1;overflow-y:auto;padding:var(--lib-space-lg);scrollbar-width:thin;scrollbar-color:var(--color-washi-300) transparent}.mo-body::-webkit-scrollbar{width:4px}.mo-body::-webkit-scrollbar-track{background:transparent}.mo-body::-webkit-scrollbar-thumb{background:var(--color-washi-300)}.mo-footer{display:flex;align-items:center;gap:var(--lib-space-md);padding:var(--lib-space-md) var(--lib-space-lg);border-top:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-surface)}.mo-footer-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-right:auto}.mo-panel-wrap.mo-dark .mo-panel{background:#0c0604;border-color:#1e130e;box-shadow:0 20px 60px #0000008c,0 4px 16px #0000004d}.mo-panel-wrap.mo-dark .mo-header{background:#0c0604;border-color:#190f0a}.mo-panel-wrap.mo-dark .mo-title{color:#c8bbb2}.mo-panel-wrap.mo-dark .mo-subtitle{color:#312620}.mo-panel-wrap.mo-dark .mo-close{color:#362b25}.mo-panel-wrap.mo-dark .mo-close:hover{background:#190f0a;color:#998c84}.mo-panel-wrap.mo-dark .mo-footer{background:#060201;border-color:#190f0a}.mo-panel-wrap.mo-dark .mo-footer-info{color:#312620}.mo-panel-wrap.mo-dark .mo-header-icon{background:#190f0a;border-color:#231813;color:#433831}@media(max-width:768px){.mo-backdrop{padding:var(--lib-space-md)}.mo-panel-wrap{max-height:calc(100vh - var(--lib-space-md) * 2)}}}";
+import { html } from "lit";
+function staggerTemplate() {
+  return html`<slot></slot>`;
+}
 export {
-  modalCss as default
+  staggerTemplate
 };
 //# sourceMappingURL=index219.js.map

package/dist/index219.js.map

@@ -1 +1 @@
-{"version":3,"file":"index219.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index219.js","sources":["../src/components/organisms/stagger/lib-stagger-container.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport function staggerTemplate(): TemplateResult {\n  return html`<slot></slot>`;\n}"],"names":[],"mappings":";AAEO,SAAS,kBAAkC;AAChD,SAAO;AACT;"}

package/dist/index220.js

@@ -1,84 +1,5 @@
-import { nothing, html } from "lit";
-function panelWrapClass(p) {
-  const classes = ["mo-panel-wrap"];
-  if (p.size !== "md") classes.push(`mo-${p.size}`);
-  if (p._animate === "slide-up") classes.push("mo-slide-up");
-  if (p._animate === "slide-down") classes.push("mo-slide-down");
-  if (p.dark) classes.push("mo-dark");
-  return classes.join(" ");
-}
-function panelClass(variant) {
-  const classes = ["mo-panel"];
-  if (variant === "editorial") classes.push("is-editorial");
-  if (variant === "danger") classes.push("is-danger");
-  return classes.join(" ");
-}
-function iconClass(tone) {
-  const classes = ["mo-header-icon"];
-  if (tone !== "default") classes.push(`is-${tone}`);
-  return classes.join(" ");
-}
-function modalTemplate(p) {
-  return html`
-    <div
-      class="mo-backdrop"
-      part="backdrop"
-      @click="${p.onBackdropClick}"
-    >
-      <div
-        class="${panelWrapClass(p)}"
-        part="panel-wrap"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="mo-title"
-        @click="${(e) => e.stopPropagation()}"
-      >
-        <div class="${panelClass(p.variant)}" part="panel">
-
-          <!-- ── HEADER ── -->
-          <div class="mo-header" part="header">
-
-            <!-- Ícono opcional — tone prop activa el wrapper -->
-            ${p.iconTone !== null ? html`
-              <div class="${iconClass(p.iconTone)}" part="icon">
-                <slot name="icon"></slot>
-              </div>
-            ` : nothing}
-
-            <!-- Título y subtítulo -->
-            <div class="mo-header-text">
-              <h2 id="mo-title" class="mo-title">${p.heading}</h2>
-              ${p.subtitle ? html`<p class="mo-subtitle">${p.subtitle}</p>` : nothing}
-            </div>
-
-            <!-- Botón de cierre -->
-            <button
-              class="mo-close"
-              part="close-btn"
-              aria-label="Cerrar"
-              @click="${p.onClose}"
-            >×</button>
-          </div>
-
-          <!-- ── BODY — slot default ── -->
-          <div class="mo-body" part="body">
-            <slot></slot>
-          </div>
-
-          <!-- ── FOOTER ── -->
-          <div class="mo-footer" part="footer">
-            ${p.footerInfo ? html`
-              <span class="mo-footer-info">${p.footerInfo}</span>
-            ` : nothing}
-            <slot name="footer"></slot>
-          </div>
-
-        </div>
-      </div>
-    </div>
-  `;
-}
+const staggerCss = "@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{::slotted(*){opacity:0;transform:var(--_stagger-from, translateY(var(--lib-space-lg)));transition:opacity var(--_stagger-duration, var(--duration-slow)) var(--_stagger-ease, var(--ease-out)),transform var(--_stagger-duration, var(--duration-slow)) var(--_stagger-ease, var(--ease-out));transition-delay:var(--_stagger-delay, 0ms);will-change:opacity,transform}:host([visible]) ::slotted(*){opacity:1;transform:none}@media(prefers-reduced-motion:reduce){::slotted(*){transition:none;opacity:1;transform:none}}}";
 export {
-  modalTemplate
+  staggerCss as default
 };
 //# sourceMappingURL=index220.js.map

package/dist/index220.js.map

@@ -1 +1 @@
-{"version":3,"file":"index220.js","sources":["../src/components/molecules/modal/lib-modal.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { ModalAnimate, ModalIconTone, ModalSize, ModalVariant } from './lib-modal.types';\n\nexport interface ModalTemplateProps {\n  /* Estado */\n  open:             boolean;\n  /* Panel */\n  size:             ModalSize;\n  variant:          ModalVariant;\n  _animate:          ModalAnimate;\n  dark:             boolean;\n  /* Header */\n  heading:          string;\n  subtitle:         string;\n  iconTone:         ModalIconTone | null;\n  /* Footer */\n  footerInfo:       string;\n  /* Handlers */\n  onClose:          () => void;\n  onBackdropClick:  (e: MouseEvent) => void;\n}\n\n/** Clases del contenedor del panel (.mo-panel-wrap). */\nfunction panelWrapClass(p: ModalTemplateProps): string {\n  const classes = ['mo-panel-wrap'];\n  if (p.size !== 'md')         classes.push(`mo-${p.size}`);\n  if (p._animate === 'slide-up')   classes.push('mo-slide-up');\n  if (p._animate === 'slide-down') classes.push('mo-slide-down');\n  if (p.dark)                  classes.push('mo-dark');\n  return classes.join(' ');\n}\n\n/** Clases del panel (.mo-panel). */\nfunction panelClass(variant: ModalVariant): string {\n  const classes = ['mo-panel'];\n  if (variant === 'editorial') classes.push('is-editorial');\n  if (variant === 'danger')    classes.push('is-danger');\n  return classes.join(' ');\n}\n\n/** Clases del ícono de header. */\nfunction iconClass(tone: ModalIconTone): string {\n  const classes = ['mo-header-icon'];\n  if (tone !== 'default') classes.push(`is-${tone}`);\n  return classes.join(' ');\n}\n\nexport function modalTemplate(p: ModalTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"mo-backdrop\"\n      part=\"backdrop\"\n      @click=\"${p.onBackdropClick}\"\n    >\n      <div\n        class=\"${panelWrapClass(p)}\"\n        part=\"panel-wrap\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"mo-title\"\n        @click=\"${(e: MouseEvent):void => e.stopPropagation()}\"\n      >\n        <div class=\"${panelClass(p.variant)}\" part=\"panel\">\n\n          <!-- ── HEADER ── -->\n          <div class=\"mo-header\" part=\"header\">\n\n            <!-- Ícono opcional — tone prop activa el wrapper -->\n            ${p.iconTone !== null ? html`\n              <div class=\"${iconClass(p.iconTone)}\" part=\"icon\">\n                <slot name=\"icon\"></slot>\n              </div>\n            ` : nothing}\n\n            <!-- Título y subtítulo -->\n            <div class=\"mo-header-text\">\n              <h2 id=\"mo-title\" class=\"mo-title\">${p.heading}</h2>\n              ${p.subtitle ? html`<p class=\"mo-subtitle\">${p.subtitle}</p>` : nothing}\n            </div>\n\n            <!-- Botón de cierre -->\n            <button\n              class=\"mo-close\"\n              part=\"close-btn\"\n              aria-label=\"Cerrar\"\n              @click=\"${p.onClose}\"\n            >×</button>\n          </div>\n\n          <!-- ── BODY — slot default ── -->\n          <div class=\"mo-body\" part=\"body\">\n            <slot></slot>\n          </div>\n\n          <!-- ── FOOTER ── -->\n          <div class=\"mo-footer\" part=\"footer\">\n            ${p.footerInfo ? html`\n              <span class=\"mo-footer-info\">${p.footerInfo}</span>\n            ` : nothing}\n            <slot name=\"footer\"></slot>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAuBA,SAAS,eAAe,GAA+B;AACrD,QAAM,UAAU,CAAC,eAAe;AAChC,MAAI,EAAE,SAAS,KAAc,SAAQ,KAAK,MAAM,EAAE,IAAI,EAAE;AACxD,MAAI,EAAE,aAAa,WAAc,SAAQ,KAAK,aAAa;AAC3D,MAAI,EAAE,aAAa,aAAc,SAAQ,KAAK,eAAe;AAC7D,MAAI,EAAE,KAAuB,SAAQ,KAAK,SAAS;AACnD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAGA,SAAS,WAAW,SAA+B;AACjD,QAAM,UAAU,CAAC,UAAU;AAC3B,MAAI,YAAY,YAAa,SAAQ,KAAK,cAAc;AACxD,MAAI,YAAY,SAAa,SAAQ,KAAK,WAAW;AACrD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAGA,SAAS,UAAU,MAA6B;AAC9C,QAAM,UAAU,CAAC,gBAAgB;AACjC,MAAI,SAAS,UAAW,SAAQ,KAAK,MAAM,IAAI,EAAE;AACjD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,SAAS,cAAc,GAAuC;AACnE,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,EAAE,eAAe;AAAA;AAAA;AAAA,iBAGhB,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhB,CAAC,MAAuB,EAAE,iBAAiB;AAAA;AAAA,sBAEvC,WAAW,EAAE,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAM7B,EAAE,aAAa,OAAO;AAAA,4BACR,UAAU,EAAE,QAAQ,CAAC;AAAA;AAAA;AAAA,gBAGjC,OAAO;AAAA;AAAA;AAAA;AAAA,mDAI4B,EAAE,OAAO;AAAA,gBAC5C,EAAE,WAAW,8BAA8B,EAAE,QAAQ,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ7D,EAAE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWnB,EAAE,aAAa;AAAA,6CACgB,EAAE,UAAU;AAAA,gBACzC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB;"}
+{"version":3,"file":"index220.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index221.js

@@ -1,84 +1,12 @@
-import { html, nothing } from "lit";
-const chevronLeft = html`
-  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-    <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/>
-  </svg>`;
-const chevronRight = html`
-  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-    <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/>
-  </svg>`;
-function buildPageSequence(current, total, siblings) {
-  if (total <= 1) return [1];
-  const left = Math.max(2, current - siblings);
-  const right = Math.min(total - 1, current + siblings);
-  const pages = [1];
-  if (left > 2) pages.push(null);
-  for (let i = left; i <= right; i++) pages.push(i);
-  if (right < total - 1) pages.push(null);
-  if (total > 1) pages.push(total);
-  return pages;
-}
-function paginationTemplate(ctx) {
-  const total = ctx.totalPages;
-  const current = ctx.currentPage;
-  const sequence = buildPageSequence(current, total, ctx.siblings);
-  const infoText = ctx.showInfo ? (() => {
-    const from = (current - 1) * ctx.itemsPerPage + 1;
-    const to = Math.min(current * ctx.itemsPerPage, ctx.totalItems);
-    return html`
-          <span class="pg-info" part="info">
-            ${from}–${to} de ${ctx.totalItems}
-          </span>`;
-  })() : nothing;
+import { html } from "lit";
+function stepperTemplate(props) {
   return html`
-    <nav class="pg" part="root" aria-label="${ctx.ariaLabel}">
-
-      ${ctx.showInfo ? infoText : nothing}
-
-      <!-- ← Anterior -->
-      <button
-        class="pg-btn pg-btn--nav"
-        part="btn-prev"
-        ?disabled="${current === 1}"
-        aria-label="Página anterior"
-        @click="${() => ctx._changePage(current - 1)}"
-      >
-        ${chevronLeft}
-        ${ctx.size !== "sm" ? html`<span>Ant</span>` : nothing}
-      </button>
-
-      <!-- Números -->
-      <div class="pg-numbers" part="numbers" role="list">
-        ${sequence.map(
-    (page) => page === null ? html`<span class="pg-ellipsis" role="listitem" aria-hidden="true">…</span>` : html`
-              <button
-                class="pg-btn ${page === current ? "pg-btn--active" : ""}"
-                part="btn-page${page === current ? " btn-page-active" : ""}"
-                role="listitem"
-                aria-label="Página ${page}"
-                aria-current="${page === current ? "page" : nothing}"
-                ?disabled="${page === current}"
-                @click="${() => ctx._changePage(page)}"
-              >${page}</button>`
-  )}
-      </div>
-
-      <!-- → Siguiente -->
-      <button
-        class="pg-btn pg-btn--nav"
-        part="btn-next"
-        ?disabled="${current === total}"
-        aria-label="Página siguiente"
-        @click="${() => ctx._changePage(current + 1)}"
-      >
-        ${ctx.size !== "sm" ? html`<span>Sig</span>` : nothing}
-        ${chevronRight}
-      </button>
-
-    </nav>
+    <div class="stepper-track" role="list" aria-label="Pasos del proceso">
+      <slot @slotchange=${props.handleSlotChange}></slot>
+    </div>
   `;
 }
 export {
-  paginationTemplate
+  stepperTemplate
 };
 //# sourceMappingURL=index221.js.map

package/dist/index221.js.map

@@ -1 +1 @@
-{"version":3,"file":"index221.js","sources":["../src/components/molecules/pagination/lib-pagination.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibPagination } from './lib-pagination.component';\n\n/* ── Chevrons inline — sin dependencia de lib-icon ── */\nconst chevronLeft: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z\"/>\n  </svg>`;\n\nconst chevronRight: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z\"/>\n  </svg>`;\n\n/**\n * Genera la secuencia de páginas con ellipsis.\n *\n * Ejemplo (current=5, total=10, siblings=1):\n *   [1] … [4][5][6] … [10]\n *\n * Retorna un array de números o null (null = ellipsis).\n */\nfunction buildPageSequence(current: number, total: number, siblings: number): (number | null)[] {\n  if (total <= 1) return [1];\n\n  const left  = Math.max(2, current - siblings);\n  const right = Math.min(total - 1, current + siblings);\n\n  const pages: (number | null)[] = [1];\n\n  if (left > 2)        pages.push(null);           // ellipsis izquierdo\n  for (let i = left; i <= right; i++) pages.push(i);\n  if (right < total - 1) pages.push(null);         // ellipsis derecho\n  if (total > 1) pages.push(total);\n\n  return pages;\n}\n\nexport function paginationTemplate(ctx: LibPagination): TemplateResult {\n  const total   = ctx.totalPages;\n  const current = ctx.currentPage;\n  const sequence = buildPageSequence(current, total, ctx.siblings);\n\n  /* Info de resultados */\n  const infoText = ctx.showInfo\n    ? (():TemplateResult => {\n        const from = (current - 1) * ctx.itemsPerPage + 1;\n        const to   = Math.min(current * ctx.itemsPerPage, ctx.totalItems);\n        return html`\n          <span class=\"pg-info\" part=\"info\">\n            ${from}–${to} de ${ctx.totalItems}\n          </span>`;\n      })()\n    : nothing;\n\n  return html`\n    <nav class=\"pg\" part=\"root\" aria-label=\"${ctx.ariaLabel}\">\n\n      ${ctx.showInfo ? infoText : nothing}\n\n      <!-- ← Anterior -->\n      <button\n        class=\"pg-btn pg-btn--nav\"\n        part=\"btn-prev\"\n        ?disabled=\"${current === 1}\"\n        aria-label=\"Página anterior\"\n        @click=\"${(): void => ctx._changePage(current - 1)}\"\n      >\n        ${chevronLeft}\n        ${ctx.size !== 'sm' ? html`<span>Ant</span>` : nothing}\n      </button>\n\n      <!-- Números -->\n      <div class=\"pg-numbers\" part=\"numbers\" role=\"list\">\n        ${sequence.map((page, /*idx*/) =>\n          page === null\n            ? html`<span class=\"pg-ellipsis\" role=\"listitem\" aria-hidden=\"true\">…</span>`\n            : html`\n              <button\n                class=\"pg-btn ${page === current ? 'pg-btn--active' : ''}\"\n                part=\"btn-page${page === current ? ' btn-page-active' : ''}\"\n                role=\"listitem\"\n                aria-label=\"Página ${page}\"\n                aria-current=\"${page === current ? 'page' : nothing}\"\n                ?disabled=\"${page === current}\"\n                @click=\"${(): void => ctx._changePage(page as number)}\"\n              >${page}</button>`\n        )}\n      </div>\n\n      <!-- → Siguiente -->\n      <button\n        class=\"pg-btn pg-btn--nav\"\n        part=\"btn-next\"\n        ?disabled=\"${current === total}\"\n        aria-label=\"Página siguiente\"\n        @click=\"${(): void => ctx._changePage(current + 1)}\"\n      >\n        ${ctx.size !== 'sm' ? html`<span>Sig</span>` : nothing}\n        ${chevronRight}\n      </button>\n\n    </nav>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,cAA8B;AAAA;AAAA;AAAA;AAKpC,MAAM,eAA+B;AAAA;AAAA;AAAA;AAarC,SAAS,kBAAkB,SAAiB,OAAe,UAAqC;AAC9F,MAAI,SAAS,EAAG,QAAO,CAAC,CAAC;AAEzB,QAAM,OAAQ,KAAK,IAAI,GAAG,UAAU,QAAQ;AAC5C,QAAM,QAAQ,KAAK,IAAI,QAAQ,GAAG,UAAU,QAAQ;AAEpD,QAAM,QAA2B,CAAC,CAAC;AAEnC,MAAI,OAAO,EAAU,OAAM,KAAK,IAAI;AACpC,WAAS,IAAI,MAAM,KAAK,OAAO,IAAK,OAAM,KAAK,CAAC;AAChD,MAAI,QAAQ,QAAQ,EAAG,OAAM,KAAK,IAAI;AACtC,MAAI,QAAQ,EAAG,OAAM,KAAK,KAAK;AAE/B,SAAO;AACT;AAEO,SAAS,mBAAmB,KAAoC;AACrE,QAAM,QAAU,IAAI;AACpB,QAAM,UAAU,IAAI;AACpB,QAAM,WAAW,kBAAkB,SAAS,OAAO,IAAI,QAAQ;AAG/D,QAAM,WAAW,IAAI,YAChB,MAAqB;AACpB,UAAM,QAAQ,UAAU,KAAK,IAAI,eAAe;AAChD,UAAM,KAAO,KAAK,IAAI,UAAU,IAAI,cAAc,IAAI,UAAU;AAChE,WAAO;AAAA;AAAA,cAED,IAAI,IAAI,EAAE,OAAO,IAAI,UAAU;AAAA;AAAA,EAEvC,OACA;AAEJ,SAAO;AAAA,8CACqC,IAAI,SAAS;AAAA;AAAA,QAEnD,IAAI,WAAW,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMpB,YAAY,CAAC;AAAA;AAAA,kBAEhB,MAAY,IAAI,YAAY,UAAU,CAAC,CAAC;AAAA;AAAA,UAEhD,WAAW;AAAA,UACX,IAAI,SAAS,OAAO,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpD,SAAS;AAAA,IAAI,CAAC,SACd,SAAS,OACL,8EACA;AAAA;AAAA,gCAEkB,SAAS,UAAU,mBAAmB,EAAE;AAAA,gCACxC,SAAS,UAAU,qBAAqB,EAAE;AAAA;AAAA,qCAErC,IAAI;AAAA,gCACT,SAAS,UAAU,SAAS,OAAO;AAAA,6BACtC,SAAS,OAAO;AAAA,0BACnB,MAAY,IAAI,YAAY,IAAc,CAAC;AAAA,iBACpD,IAAI;AAAA,EAAA,CACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOY,YAAY,KAAK;AAAA;AAAA,kBAEpB,MAAY,IAAI,YAAY,UAAU,CAAC,CAAC;AAAA;AAAA,UAEhD,IAAI,SAAS,OAAO,yBAAyB,OAAO;AAAA,UACpD,YAAY;AAAA;AAAA;AAAA;AAAA;AAKtB;"}
+{"version":3,"file":"index221.js","sources":["../src/components/organisms/stepper/lib-stepper.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport type LibStepperOrientation = 'horizontal' | 'vertical';\nexport type LibStepperVariant     = 'default' | 'minimal' | 'kintsugi';\nexport type LibStepperSize        = 'sm' | 'md' | 'lg';\n\nexport interface StepperTemplateProps {\n  orientation: LibStepperOrientation;\n  handleSlotChange: (e: Event) => void;\n}\n\n/**\n * El stepper es únicamente el contenedor flex + slot.\n * Toda la lógica de estados y el dibujado visual vive en lib-step.\n * @layer components gestiona flex-direction vía :host([orientation=\"vertical\"]).\n */\nexport function stepperTemplate(props: StepperTemplateProps): TemplateResult {\n  return html`\n    <div class=\"stepper-track\" role=\"list\" aria-label=\"Pasos del proceso\">\n      <slot @slotchange=${props.handleSlotChange}></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgBO,SAAS,gBAAgB,OAA6C;AAC3E,SAAO;AAAA;AAAA,0BAEiB,MAAM,gBAAgB;AAAA;AAAA;AAGhD;"}

package/dist/index222.js

@@ -1,5 +1,5 @@
-const paginationCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}}@layer components{.pg{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);flex-wrap:wrap}.pg-numbers{display:flex;align-items:center;gap:var(--lib-space-xs)}.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-default);min-width:var(--_pg-size, 32px);height:var(--_pg-size, 32px);padding:0 var(--lib-space-sm);white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}.pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary)}.pg-btn:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.pg-btn:active:not(:disabled){transform:scale(.96)}.pg-btn--active{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);cursor:default}.pg-btn:disabled{opacity:.35;cursor:not-allowed}.pg-btn--nav{padding:0 var(--lib-space-md)}.pg-btn--nav svg{width:10px;height:10px;flex-shrink:0}.pg-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:var(--_pg-size, 32px);height:var(--_pg-size, 32px);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);-webkit-user-select:none;user-select:none}:host([size="sm"]){--_pg-size: 26px}:host([size="sm"]) .pg-btn{font-size:10px;padding:0 var(--lib-space-xs)}:host([size="sm"]) .pg-btn--nav{padding:0 var(--lib-space-sm)}:host([size="sm"]) .pg-ellipsis{font-size:10px}:host([size="md"]){--_pg-size: 32px}:host([size="lg"]){--_pg-size: 40px}:host([size="lg"]) .pg-btn{font-size:var(--text-sm);letter-spacing:var(--tracking-wider);padding:0 var(--lib-space-md)}:host([size="lg"]) .pg-btn--nav{padding:0 calc(var(--lib-space-md) + var(--lib-space-xs))}:host([variant="outline"]) .pg-btn{background:transparent}:host([variant="outline"]) .pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--bg-surface)}:host([variant="outline"]) .pg-btn--active{background:transparent;border-color:var(--color-washi-900);color:var(--color-washi-900)}:host([variant="ghost"]) .pg-btn{background:transparent;border-color:transparent}:host([variant="ghost"]) .pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--bg-surface);border-color:transparent}:host([variant="ghost"]) .pg-btn--active{background:var(--bg-surface);border-color:transparent;color:var(--text-primary);font-weight:500}.pg-info{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap}:host([dark]) .pg-btn{background:var(--color-washi-800);border-color:var(--color-washi-700);color:var(--color-washi-400)}:host([dark]) .pg-btn:hover:not(:disabled,.pg-btn--active){background:var(--color-washi-700);border-color:var(--color-washi-600);color:var(--color-washi-100)}:host([dark]) .pg-btn--active{background:var(--color-washi-50);border-color:var(--color-washi-50);color:var(--color-washi-950)}:host([dark]) .pg-ellipsis{color:var(--color-washi-600)}:host([dark]) .pg-info{color:var(--color-washi-600)}}';
+const stepperCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.stepper-track{display:flex;flex-direction:row;align-items:flex-start;width:100%;position:relative}:host([orientation="vertical"]) .stepper-track{flex-direction:column}}';
 export {
-  paginationCss as default
+  stepperCss as default
 };
 //# sourceMappingURL=index222.js.map