@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index242.js

@@ -1,17 +1,240 @@
-import { html } from "lit";
-const rippleTemplate = (ripples) => {
+import { nothing, html } from "lit";
+function renderBadge(value, tone) {
+  const label = String(value ?? "");
+  return html`<span class="cell-badge tone-${tone}">${label}</span>`;
+}
+function renderProgress(value, tone) {
+  const pct = Math.min(100, Math.max(0, Number(value) || 0));
+  const toneClass = tone ? `tone-${tone}` : "";
   return html`
-    ${ripples.map((r) => html`
-      <span class="ripple" style="
-        width: ${r.size}px;
-        height: ${r.size}px;
-        left: ${r.x}px;
-        top: ${r.y}px;
-      "></span>
-    `)}
+    <div class="cell-progress">
+      <div class="progress-bar">
+        <div class="progress-fill ${toneClass}" style="width:${pct}%"></div>
+      </div>
+      <span class="progress-val">${pct}%</span>
+    </div>
   `;
-};
+}
+function renderAvatar(row, col) {
+  const name = String(row[col.key] ?? "");
+  const initials = col.initialsKey ? String(row[col.initialsKey] ?? "").slice(0, 2).toUpperCase() : name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+  const hint = col.hintKey ? String(row[col.hintKey] ?? "") : "";
+  return html`
+    <div class="cell-avatar">
+      <div class="avatar-circle">${initials}</div>
+      <div class="avatar-text">
+        <span class="avatar-name">${name}</span>
+        ${hint ? html`<span class="avatar-hint">${hint}</span>` : nothing}
+      </div>
+    </div>
+  `;
+}
+function renderActionsBtn(row, idx, onRowAction) {
+  return html`
+    <button class="actions-btn"
+      aria-label="Acciones"
+      @click="${(e) => {
+    e.stopPropagation();
+    onRowAction(row, idx);
+  }}"
+    >⋯</button>
+  `;
+}
+function renderCell(col, row, idx, onRowAction) {
+  const value = row[col.key];
+  switch (col.type) {
+    case "badge": {
+      const tone = col.toneKey ? String(row[col.toneKey] ?? "inactive") : col.badgeTone ?? "inactive";
+      return renderBadge(value, tone);
+    }
+    case "progress":
+      return renderProgress(value, col.progressTone ?? "");
+    case "avatar":
+      return renderAvatar(row, col);
+    case "actions":
+      return renderActionsBtn(row, idx, onRowAction);
+    case "mono":
+      return html`<span class="cell-mono">${value ?? "—"}</span>`;
+    default:
+      return html`${value ?? "—"}`;
+  }
+}
+function thClasses(col, sortKey, sortDir) {
+  const parts = [];
+  if (col.type === "num") parts.push("cell-num", "is-num");
+  if (col.sticky) parts.push("col-sticky");
+  if (col.sortable) {
+    parts.push("is-sortable");
+    if (sortKey === col.key) parts.push(sortDir === "asc" ? "sort-asc" : "sort-desc");
+  }
+  return parts.join(" ");
+}
+function tdClasses(col) {
+  const parts = [];
+  if (col.type === "num") parts.push("cell-num");
+  if (col.type === "actions") parts.push("cell-actions");
+  if (col.sticky) parts.push("col-sticky");
+  if (col.truncate) parts.push("cell-truncate");
+  return parts.join(" ");
+}
+function rowClass(row, idx, selected) {
+  const state = row._state;
+  const isSelected = selected.has(idx) || state === "selected";
+  const parts = [];
+  if (isSelected) parts.push("is-selected");
+  else if (state) parts.push(`is-${state}`);
+  return parts.join(" ");
+}
+const WIDTHS = ["w-80", "w-60", "w-40", "w-60", "w-80"];
+function renderSkeletonCell(col, idx) {
+  const w = WIDTHS[idx % WIDTHS.length] ?? "w-60";
+  if (col.type === "avatar") return html`
+    <div class="skel-cell">
+      <div class="skel-avatar"></div>
+      <div style="flex:1;display:flex;flex-direction:column;gap:4px;">
+        <div class="skel-line ${w}"></div>
+        <div class="skel-line w-40" style="height:7px;"></div>
+      </div>
+    </div>`;
+  if (col.type === "badge") return html`<div class="skel-badge"></div>`;
+  if (col.type === "num") return html`<div class="skel-line ${w}" style="margin-left:auto;"></div>`;
+  return html`<div class="skel-line ${w}"></div>`;
+}
+function renderSkeleton(count, cols, selectable) {
+  return html`${Array.from({ length: count }, (_, r) => html`
+    <tr class="tbl-tr">
+      ${selectable ? html`<td class="cell-check"></td>` : nothing}
+      ${cols.map((col, c) => html`
+        <td class="${tdClasses(col)}" style="${col.type === "actions" ? "" : ""}">
+          ${renderSkeletonCell(col, r + c)}
+        </td>
+      `)}
+    </tr>
+  `)}`;
+}
+function renderEmpty(title, desc, colSpan) {
+  return html`
+    <tr class="empty-row">
+      <td colspan="${colSpan}">
+        <span class="empty-icon">◯</span>
+        <span class="empty-title">${title}</span>
+        <span class="empty-desc">${desc}</span>
+      </td>
+    </tr>
+  `;
+}
+function renderToolbar(p) {
+  const countLabel = p.query ? `${p.filteredTotal} de ${p.totalRows}` : `${p.totalRows} registros`;
+  return html`
+    <div class="tbl-toolbar">
+      ${p.toolbarTitle ? html`<span class="tbl-toolbar-title">${p.toolbarTitle}</span>` : nothing}
+      <span class="tbl-toolbar-count">${countLabel}</span>
+      <input
+        class="tbl-toolbar-search"
+        type="search"
+        placeholder="Buscar…"
+        .value="${p.query}"
+        @input="${(e) => p.onSearch(e.target.value)}"
+      >
+      <slot name="toolbar-actions"></slot>
+    </div>
+  `;
+}
+function buildPageNumbers(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages = [1];
+  if (current > 3) pages.push("…");
+  const lo = Math.max(2, current - 1);
+  const hi = Math.min(total - 1, current + 1);
+  for (let i = lo; i <= hi; i++) pages.push(i);
+  if (current < total - 2) pages.push("…");
+  pages.push(total);
+  return pages;
+}
+function renderPagination(p) {
+  if (p.pageSize <= 0 || p.totalPages <= 1) return html``;
+  const start = (p.page - 1) * p.pageSize + 1;
+  const end = Math.min(p.page * p.pageSize, p.filteredTotal);
+  const pages = buildPageNumbers(p.page, p.totalPages);
+  return html`
+    <div class="tbl-pagination">
+      <span class="pag-info">${start}–${end} de ${p.filteredTotal}</span>
+
+      <button class="pag-btn" ?disabled="${p.page <= 1}"
+        @click="${() => p.onPageChange(p.page - 1)}">‹</button>
+
+      ${pages.map((pg) => pg === "…" ? html`<span class="pag-sep">…</span>` : html`
+          <button class="pag-btn ${p.page === pg ? "is-active" : ""}"
+            @click="${() => p.onPageChange(pg)}">${pg}</button>
+        `)}
+
+      <button class="pag-btn" ?disabled="${p.page >= p.totalPages}"
+        @click="${() => p.onPageChange(p.page + 1)}">›</button>
+    </div>
+  `;
+}
+function dataTableTemplate(p) {
+  const colSpan = p.columns.length + (p.selectable ? 1 : 0);
+  const wrapCls = `tbl-wrap${p.stickyHead ? " tbl-sticky-head" : ""}`;
+  return html`
+    ${p.toolbar ? renderToolbar(p) : nothing}
+
+    <div class="${wrapCls}">
+      <table>
+        ${p.caption ? html`<caption>${p.caption}</caption>` : nothing}
+
+        <!-- THEAD -->
+        <thead>
+          <tr>
+            ${p.selectable ? html`
+              <th class="cell-check">
+                <input type="checkbox"
+                  .indeterminate="${p.someSelected}"
+                  .checked="${p.allSelected}"
+                  @change="${(e) => p.onSelectAll(e.target.checked, p.data.length)}">
+              </th>
+            ` : nothing}
+
+            ${p.columns.map((col) => html`
+              <th class="${thClasses(col, p.sortKey, p.sortDir)}"
+                @click="${col.sortable ? () => p.onSort(col.key) : nothing}">
+                ${col.header}
+              </th>
+            `)}
+          </tr>
+        </thead>
+
+        <!-- TBODY -->
+        <tbody>
+          ${p.loading ? renderSkeleton(p.skeletonRows, p.columns, p.selectable) : p.data.length === 0 ? renderEmpty(p.emptyTitle, p.emptyDesc, colSpan) : p.data.map((row, idx) => {
+    const globalIdx = (p.page - 1) * (p.pageSize || 0) + idx;
+    return html`
+                    <tr class="${rowClass(row, globalIdx, p.selected)}">
+                      ${p.selectable ? html`
+                        <td class="cell-check">
+                          <input type="checkbox"
+                            .checked="${p.selected.has(globalIdx)}"
+                            @change="${(e) => p.onSelectRow(globalIdx, e.target.checked)}">
+                        </td>
+                      ` : nothing}
+
+                      ${p.columns.map((col) => html`
+                        <td class="${tdClasses(col)}">
+                          ${renderCell(col, row, globalIdx, p.onRowAction)}
+                        </td>
+                      `)}
+                    </tr>
+                  `;
+  })}
+        </tbody>
+      </table>
+    </div>
+
+    ${renderPagination(p)}
+    <slot name="pagination"></slot>
+  `;
+}
 export {
-  rippleTemplate
+  dataTableTemplate
 };
 //# sourceMappingURL=index242.js.map

package/dist/index242.js.map

@@ -1 +1 @@
-{"version":3,"file":"index242.js","sources":["../src/components/atoms/ripple/lib-ripple.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { RippleEffect } from './lib-ripple.component';\n\nexport const rippleTemplate = (ripples: RippleEffect[]): TemplateResult => {\n  return html`\n    ${ripples.map(r => html`\n      <span class=\"ripple\" style=\"\n        width: ${r.size}px;\n        height: ${r.size}px;\n        left: ${r.x}px;\n        top: ${r.y}px;\n      \"></span>\n    `)}\n  `;\n};"],"names":[],"mappings":";AAGO,MAAM,iBAAiB,CAAC,YAA4C;AACzE,SAAO;AAAA,MACH,QAAQ,IAAI,CAAA,MAAK;AAAA;AAAA,iBAEN,EAAE,IAAI;AAAA,kBACL,EAAE,IAAI;AAAA,gBACR,EAAE,CAAC;AAAA,eACJ,EAAE,CAAC;AAAA;AAAA,KAEb,CAAC;AAAA;AAEN;"}
+{"version":3,"file":"index242.js","sources":["../src/components/organisms/data-table/lib-data-table.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type {\n  TableColumn,\n  TableRowData,\n  TableVariant,\n  TableSize,\n  TableBadgeTone,\n} from './lib-data-table.types';\n\n/* ── Template Props ─────────────────────────────────────── */\nexport interface DataTableTemplateProps {\n  columns:       TableColumn[];\n  data:          TableRowData[];\n  filteredTotal: number;\n  totalRows:     number;\n  variant:       TableVariant;\n  size:          TableSize;\n  dark:          boolean;\n  loading:       boolean;\n  selectable:    boolean;\n  stickyHead:    boolean;\n  caption:       string;\n  emptyTitle:    string;\n  emptyDesc:     string;\n  toolbar:       boolean;\n  toolbarTitle:  string;\n  skeletonRows:  number;\n  sortKey:       string;\n  sortDir:       'asc' | 'desc';\n  query:         string;\n  selected:      Set<number>;\n  allSelected:   boolean;\n  someSelected:  boolean;\n  page:          number;\n  pageSize:      number;\n  totalPages:    number;\n  onSort:        (key: string) => void;\n  onSearch:      (q: string) => void;\n  onSelectAll:   (checked: boolean, total: number) => void;\n  onSelectRow:   (idx: number, checked: boolean) => void;\n  onRowAction:   (row: TableRowData, idx: number) => void;\n  onPageChange:  (p: number) => void;\n}\n\n/* ── Helpers: Cell renderers ───────────────────────────── */\n\nfunction renderBadge(value: unknown, tone: string): TemplateResult {\n  const label = String(value ?? '');\n  return html`<span class=\"cell-badge tone-${tone}\">${label}</span>`;\n}\n\nfunction renderProgress(value: unknown, tone: 'kaki' | 'celadon' | ''): TemplateResult {\n  const pct = Math.min(100, Math.max(0, Number(value) || 0));\n  const toneClass = tone ? `tone-${tone}` : '';\n  return html`\n    <div class=\"cell-progress\">\n      <div class=\"progress-bar\">\n        <div class=\"progress-fill ${toneClass}\" style=\"width:${pct}%\"></div>\n      </div>\n      <span class=\"progress-val\">${pct}%</span>\n    </div>\n  `;\n}\n\nfunction renderAvatar(row: TableRowData, col: TableColumn): TemplateResult {\n  const name     = String(row[col.key] ?? '');\n  const initials = col.initialsKey\n    ? String(row[col.initialsKey] ?? '').slice(0, 2).toUpperCase()\n    : name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();\n  const hint = col.hintKey ? String(row[col.hintKey] ?? '') : '';\n\n  return html`\n    <div class=\"cell-avatar\">\n      <div class=\"avatar-circle\">${initials}</div>\n      <div class=\"avatar-text\">\n        <span class=\"avatar-name\">${name}</span>\n        ${hint ? html`<span class=\"avatar-hint\">${hint}</span>` : nothing}\n      </div>\n    </div>\n  `;\n}\n\nfunction renderActionsBtn(row: TableRowData, idx: number, onRowAction: (r: TableRowData, i: number) => void): TemplateResult {\n  return html`\n    <button class=\"actions-btn\"\n      aria-label=\"Acciones\"\n      @click=\"${(e: Event):void => { e.stopPropagation(); onRowAction(row, idx); }}\"\n    >⋯</button>\n  `;\n}\n\nfunction renderCell(col: TableColumn, row: TableRowData, idx: number, onRowAction: (r: TableRowData, i: number) => void): TemplateResult {\n  const value = row[col.key];\n\n  switch (col.type) {\n    case 'badge': {\n      const tone = col.toneKey\n        ? String(row[col.toneKey] ?? 'inactive')\n        : (col.badgeTone ?? 'inactive');\n      return renderBadge(value, tone as TableBadgeTone);\n    }\n    case 'progress':\n      return renderProgress(value, col.progressTone ?? '');\n    case 'avatar':\n      return renderAvatar(row, col);\n    case 'actions':\n      return renderActionsBtn(row, idx, onRowAction);\n    case 'mono':\n      return html`<span class=\"cell-mono\">${value ?? '—'}</span>`;\n    default:\n      return html`${value ?? '—'}`;\n  }\n}\n\n/* ── Helpers: Structural ───────────────────────────────── */\n\nfunction thClasses(col: TableColumn, sortKey: string, sortDir: 'asc' | 'desc'): string {\n  const parts: string[] = [];\n  if (col.type === 'num')     parts.push('cell-num', 'is-num');\n  if (col.sticky)             parts.push('col-sticky');\n  if (col.sortable) {\n    parts.push('is-sortable');\n    if (sortKey === col.key)  parts.push(sortDir === 'asc' ? 'sort-asc' : 'sort-desc');\n  }\n  return parts.join(' ');\n}\n\nfunction tdClasses(col: TableColumn): string {\n  const parts: string[] = [];\n  if (col.type === 'num')      parts.push('cell-num');\n  if (col.type === 'actions')  parts.push('cell-actions');\n  if (col.sticky)              parts.push('col-sticky');\n  if (col.truncate)            parts.push('cell-truncate');\n  return parts.join(' ');\n}\n\nfunction rowClass(row: TableRowData, idx: number, selected: Set<number>): string {\n  const state = row._state;\n  const isSelected = selected.has(idx) || state === 'selected';\n  const parts: string[] = [];\n  if (isSelected)           parts.push('is-selected');\n  else if (state)           parts.push(`is-${state}`);\n  return parts.join(' ');\n}\n\n/* ── Skeleton rows ───────────────────────────────────────── */\nconst WIDTHS = ['w-80', 'w-60', 'w-40', 'w-60', 'w-80'] as const;\n\nfunction renderSkeletonCell(col: TableColumn, idx: number): TemplateResult {\n  const w = WIDTHS[idx % WIDTHS.length] ?? 'w-60';\n  if (col.type === 'avatar') return html`\n    <div class=\"skel-cell\">\n      <div class=\"skel-avatar\"></div>\n      <div style=\"flex:1;display:flex;flex-direction:column;gap:4px;\">\n        <div class=\"skel-line ${w}\"></div>\n        <div class=\"skel-line w-40\" style=\"height:7px;\"></div>\n      </div>\n    </div>`;\n  if (col.type === 'badge')  return html`<div class=\"skel-badge\"></div>`;\n  if (col.type === 'num')    return html`<div class=\"skel-line ${w}\" style=\"margin-left:auto;\"></div>`;\n  return html`<div class=\"skel-line ${w}\"></div>`;\n}\n\nfunction renderSkeleton(count: number, cols: TableColumn[], selectable: boolean): TemplateResult {\n  return html`${Array.from({ length: count }, (_, r) => html`\n    <tr class=\"tbl-tr\">\n      ${selectable ? html`<td class=\"cell-check\"></td>` : nothing}\n      ${cols.map((col, c) => html`\n        <td class=\"${tdClasses(col)}\" style=\"${col.type === 'actions' ? '' : ''}\">\n          ${renderSkeletonCell(col, r + c)}\n        </td>\n      `)}\n    </tr>\n  `)}`;\n}\n\n/* ── Empty state ─────────────────────────────────────────── */\nfunction renderEmpty(title: string, desc: string, colSpan: number): TemplateResult {\n  return html`\n    <tr class=\"empty-row\">\n      <td colspan=\"${colSpan}\">\n        <span class=\"empty-icon\">◯</span>\n        <span class=\"empty-title\">${title}</span>\n        <span class=\"empty-desc\">${desc}</span>\n      </td>\n    </tr>\n  `;\n}\n\n/* ── Toolbar ─────────────────────────────────────────────── */\nfunction renderToolbar(p: DataTableTemplateProps): TemplateResult {\n  const countLabel = p.query\n    ? `${p.filteredTotal} de ${p.totalRows}`\n    : `${p.totalRows} registros`;\n\n  return html`\n    <div class=\"tbl-toolbar\">\n      ${p.toolbarTitle ? html`<span class=\"tbl-toolbar-title\">${p.toolbarTitle}</span>` : nothing}\n      <span class=\"tbl-toolbar-count\">${countLabel}</span>\n      <input\n        class=\"tbl-toolbar-search\"\n        type=\"search\"\n        placeholder=\"Buscar…\"\n        .value=\"${p.query}\"\n        @input=\"${(e: Event):void => p.onSearch((e.target as HTMLInputElement).value)}\"\n      >\n      <slot name=\"toolbar-actions\"></slot>\n    </div>\n  `;\n}\n\n/* ── Built-in pagination bar ─────────────────────────────── */\nfunction buildPageNumbers(current: number, total: number): (number | '…')[] {\n  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);\n  const pages: (number | '…')[] = [1];\n  if (current > 3) pages.push('…');\n  const lo = Math.max(2, current - 1);\n  const hi = Math.min(total - 1, current + 1);\n  for (let i = lo; i <= hi; i++) pages.push(i);\n  if (current < total - 2) pages.push('…');\n  pages.push(total);\n  return pages;\n}\n\nfunction renderPagination(p: DataTableTemplateProps): TemplateResult {\n  if (p.pageSize <= 0 || p.totalPages <= 1) return html``;\n  const start  = (p.page - 1) * p.pageSize + 1;\n  const end    = Math.min(p.page * p.pageSize, p.filteredTotal);\n  const pages  = buildPageNumbers(p.page, p.totalPages);\n\n  return html`\n    <div class=\"tbl-pagination\">\n      <span class=\"pag-info\">${start}–${end} de ${p.filteredTotal}</span>\n\n      <button class=\"pag-btn\" ?disabled=\"${p.page <= 1}\"\n        @click=\"${():void => p.onPageChange(p.page - 1)}\">‹</button>\n\n      ${pages.map(pg => pg === '…'\n        ? html`<span class=\"pag-sep\">…</span>`\n        : html`\n          <button class=\"pag-btn ${p.page === pg ? 'is-active' : ''}\"\n            @click=\"${():void => p.onPageChange(pg as number)}\">${pg}</button>\n        `)}\n\n      <button class=\"pag-btn\" ?disabled=\"${p.page >= p.totalPages}\"\n        @click=\"${():void => p.onPageChange(p.page + 1)}\">›</button>\n    </div>\n  `;\n}\n\n/* ── Main template ────────────────────────────────────────── */\nexport function dataTableTemplate(p: DataTableTemplateProps): TemplateResult {\n  const colSpan  = p.columns.length + (p.selectable ? 1 : 0);\n  const wrapCls  = `tbl-wrap${p.stickyHead ? ' tbl-sticky-head' : ''}`;\n\n  return html`\n    ${p.toolbar ? renderToolbar(p) : nothing}\n\n    <div class=\"${wrapCls}\">\n      <table>\n        ${p.caption ? html`<caption>${p.caption}</caption>` : nothing}\n\n        <!-- THEAD -->\n        <thead>\n          <tr>\n            ${p.selectable ? html`\n              <th class=\"cell-check\">\n                <input type=\"checkbox\"\n                  .indeterminate=\"${p.someSelected}\"\n                  .checked=\"${p.allSelected}\"\n                  @change=\"${(e: Event):void =>\n                    p.onSelectAll((e.target as HTMLInputElement).checked, p.data.length)}\">\n              </th>\n            ` : nothing}\n\n            ${p.columns.map(col => html`\n              <th class=\"${thClasses(col, p.sortKey, p.sortDir)}\"\n                @click=\"${col.sortable ? ():void => p.onSort(col.key) : nothing}\">\n                ${col.header}\n              </th>\n            `)}\n          </tr>\n        </thead>\n\n        <!-- TBODY -->\n        <tbody>\n          ${p.loading\n            ? renderSkeleton(p.skeletonRows, p.columns, p.selectable)\n            : p.data.length === 0\n              ? renderEmpty(p.emptyTitle, p.emptyDesc, colSpan)\n              : p.data.map((row, idx) => {\n                  const globalIdx = (p.page - 1) * (p.pageSize || 0) + idx;\n                  return html`\n                    <tr class=\"${rowClass(row, globalIdx, p.selected)}\">\n                      ${p.selectable ? html`\n                        <td class=\"cell-check\">\n                          <input type=\"checkbox\"\n                            .checked=\"${p.selected.has(globalIdx)}\"\n                            @change=\"${(e: Event):void =>\n                              p.onSelectRow(globalIdx, (e.target as HTMLInputElement).checked)}\">\n                        </td>\n                      ` : nothing}\n\n                      ${p.columns.map(col => html`\n                        <td class=\"${tdClasses(col)}\">\n                          ${renderCell(col, row, globalIdx, p.onRowAction)}\n                        </td>\n                      `)}\n                    </tr>\n                  `;\n                })\n          }\n        </tbody>\n      </table>\n    </div>\n\n    ${renderPagination(p)}\n    <slot name=\"pagination\"></slot>\n  `;\n}"],"names":[],"mappings":"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"}

package/dist/index243.js

@@ -1,5 +1,85 @@
-const styles = "@layer components{:host{display:block;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:10}.ripple{position:absolute;border-radius:50%;background-color:var(--lib-ripple-color, orange);opacity:.2;transform:scale(0);animation:ripple-animation var(--duration-slower, .6s) var(--ease-out) forwards;pointer-events:none}@keyframes ripple-animation{to{transform:scale(1);opacity:0}}}";
+import { html } from "lit";
+const closeSvg = html`
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
+       stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    <path d="M1 1l10 10M11 1L1 11"/>
+  </svg>
+`;
+const dangerSvg = html`
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+       stroke="var(--color-error)" stroke-width="1.5"
+       stroke-linecap="round" stroke-linejoin="round">
+    <path d="M8 2L14.5 13H1.5L8 2z"/>
+    <path d="M8 6v3M8 11v.5"/>
+  </svg>
+`;
+const warningSvg = html`
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+       stroke="var(--color-warning)" stroke-width="1.5"
+       stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="8" cy="8" r="6"/>
+    <path d="M8 5v3M8 10v.5"/>
+  </svg>
+`;
+function dialogTemplate(props) {
+  const {
+    eyebrow,
+    dlgTitle,
+    variant,
+    size,
+    layout,
+    footerMeta,
+    onClose
+  } = props;
+  const layoutCls = layout === "drawer-right" ? "dlg-drawer-right" : layout === "drawer-bottom" ? "dlg-drawer-bottom" : "";
+  const alertCls = layout === "alert" ? "dlg-alert" : "";
+  const sizeCls = `dlg-${size}`;
+  const dlgCls = `dlg ${sizeCls} ${layoutCls} ${alertCls}`.trim();
+  const hasIcon = variant === "danger" || variant === "warning";
+  const headerIcon = hasIcon ? html`<div class="dlg-header-icon">
+        ${variant === "danger" ? dangerSvg : warningSvg}
+      </div>` : null;
+  return html`
+    <dialog
+      class="${dlgCls}"
+      @cancel="${(e) => {
+    e.preventDefault();
+    onClose();
+  }}"
+      @click="${(e) => {
+    if (e.target.tagName === "DIALOG") onClose();
+  }}"
+    >
+      <!-- HEADER -->
+      <div class="dlg-header">
+        ${headerIcon}
+        <div class="dlg-header-text" style="${hasIcon ? "margin-left: var(--lib-space-md)" : ""}">
+          ${eyebrow ? html`<p class="dlg-eyebrow">${eyebrow}</p>` : null}
+          <slot name="header">
+            <h2 class="dlg-title">${dlgTitle}</h2>
+          </slot>
+        </div>
+        <button
+          class="dlg-close"
+          aria-label="Cerrar"
+          @click="${() => onClose()}"
+        >${closeSvg}</button>
+      </div>
+
+      <!-- BODY -->
+      <div class="dlg-body">
+        <slot></slot>
+      </div>
+
+      <!-- FOOTER -->
+      <div class="dlg-footer">
+        ${footerMeta ? html`<span class="dlg-footer-meta">${footerMeta}</span>` : null}
+        <slot name="footer"></slot>
+      </div>
+    </dialog>
+  `;
+}
 export {
-  styles as default
+  dialogTemplate
 };
 //# sourceMappingURL=index243.js.map

package/dist/index243.js.map

@@ -1 +1 @@
-{"version":3,"file":"index243.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index243.js","sources":["../src/components/organisms/dialog/lib-dialog.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { DialogTemplateProps } from './lib-dialog.types';\n\n/* SVG del botón de cierre — reutilizable */\nconst closeSvg = html`\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n    <path d=\"M1 1l10 10M11 1L1 11\"/>\n  </svg>\n`;\n\n/* Icono para variante danger */\nconst dangerSvg = html`\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"var(--color-error)\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M8 2L14.5 13H1.5L8 2z\"/>\n    <path d=\"M8 6v3M8 11v.5\"/>\n  </svg>\n`;\n\n/* Icono para variante warning */\nconst warningSvg = html`\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"var(--color-warning)\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"8\" cy=\"8\" r=\"6\"/>\n    <path d=\"M8 5v3M8 10v.5\"/>\n  </svg>\n`;\n\nexport function dialogTemplate(props: DialogTemplateProps): TemplateResult {\n  const {\n    eyebrow, dlgTitle, variant, size,\n    layout, footerMeta, onClose,\n  } = props;\n\n  /* ── Clases del <dialog> ── */\n  const layoutCls =\n    layout === 'drawer-right'  ? 'dlg-drawer-right'  :\n    layout === 'drawer-bottom' ? 'dlg-drawer-bottom' :\n    '';\n  const alertCls = layout === 'alert' ? 'dlg-alert' : '';\n  const sizeCls  = `dlg-${size}`;\n  const dlgCls   = `dlg ${sizeCls} ${layoutCls} ${alertCls}`.trim();\n\n  /* ── Icono de header (solo danger / warning) ── */\n  const hasIcon = variant === 'danger' || variant === 'warning';\n  const headerIcon = hasIcon\n    ? html`<div class=\"dlg-header-icon\">\n        ${ variant === 'danger' ? dangerSvg : warningSvg }\n      </div>`\n    : null;\n\n  return html`\n    <dialog\n      class=\"${dlgCls}\"\n      @cancel=\"${(e: Event): void => { e.preventDefault(); onClose(); }}\"\n      @click=\"${(e: MouseEvent): void => {\n        /* Cierre al click sobre el backdrop (target === dialog) */\n        if ((e.target as HTMLElement).tagName === 'DIALOG') onClose();\n      }}\"\n    >\n      <!-- HEADER -->\n      <div class=\"dlg-header\">\n        ${headerIcon}\n        <div class=\"dlg-header-text\" style=\"${hasIcon ? 'margin-left: var(--lib-space-md)' : ''}\">\n          ${eyebrow ? html`<p class=\"dlg-eyebrow\">${eyebrow}</p>` : null}\n          <slot name=\"header\">\n            <h2 class=\"dlg-title\">${dlgTitle}</h2>\n          </slot>\n        </div>\n        <button\n          class=\"dlg-close\"\n          aria-label=\"Cerrar\"\n          @click=\"${(): void => onClose()}\"\n        >${closeSvg}</button>\n      </div>\n\n      <!-- BODY -->\n      <div class=\"dlg-body\">\n        <slot></slot>\n      </div>\n\n      <!-- FOOTER -->\n      <div class=\"dlg-footer\">\n        ${footerMeta ? html`<span class=\"dlg-footer-meta\">${footerMeta}</span>` : null}\n        <slot name=\"footer\"></slot>\n      </div>\n    </dialog>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUlB,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASZ,SAAS,eAAe,OAA4C;AACzE,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAU;AAAA,IAAS;AAAA,IAC5B;AAAA,IAAQ;AAAA,IAAY;AAAA,EAAA,IAClB;AAGJ,QAAM,YACJ,WAAW,iBAAkB,qBAC7B,WAAW,kBAAkB,sBAC7B;AACF,QAAM,WAAW,WAAW,UAAU,cAAc;AACpD,QAAM,UAAW,OAAO,IAAI;AAC5B,QAAM,SAAW,OAAO,OAAO,IAAI,SAAS,IAAI,QAAQ,GAAG,KAAA;AAG3D,QAAM,UAAU,YAAY,YAAY,YAAY;AACpD,QAAM,aAAa,UACf;AAAA,UACK,YAAY,WAAW,YAAY,UAAW;AAAA,gBAEnD;AAEJ,SAAO;AAAA;AAAA,eAEM,MAAM;AAAA,iBACJ,CAAC,MAAmB;AAAE,MAAE,eAAA;AAAkB,YAAA;AAAA,EAAW,CAAC;AAAA,gBACvD,CAAC,MAAwB;AAEjC,QAAK,EAAE,OAAuB,YAAY,SAAU,SAAA;AAAA,EACtD,CAAC;AAAA;AAAA;AAAA;AAAA,UAIG,UAAU;AAAA,8CAC0B,UAAU,qCAAqC,EAAE;AAAA,YACnF,UAAU,8BAA8B,OAAO,SAAS,IAAI;AAAA;AAAA,oCAEpC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMxB,MAAY,SAAS;AAAA,WAC9B,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAUT,aAAa,qCAAqC,UAAU,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAKtF;"}

package/dist/index244.js

@@ -1,12 +1,5 @@
-import { html } from "lit";
-const aspectRatioTemplate = () => {
-  return html`
-    <div class="aspect-ratio-container">
-      <slot></slot>
-    </div>
-  `;
-};
+const dialogCss = '@layer tokens,reset,components;@layer reset{:host{display:contents}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{dialog::backdrop{background:#120e0a00;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .3s,backdrop-filter .3s}dialog.is-open::backdrop{background:#120e0a8c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}dialog.dlg{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;padding:0;border:1px solid var(--border-default);background:var(--bg-elevated);box-shadow:var(--shadow-xl);max-height:calc(100vh - var(--lib-space-xl));display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(12px) scale(.97);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-bounce)}dialog.dlg[open]{opacity:1;transform:translateY(0) scale(1)}dialog.dlg.is-closing{opacity:0;transform:translateY(6px) scale(.98);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.dlg-sm{width:min(400px,calc(100vw - var(--lib-space-md)))}.dlg-md{width:min(540px,calc(100vw - var(--lib-space-md)))}.dlg-lg{width:min(720px,calc(100vw - var(--lib-space-md)))}.dlg-xl{width:min(960px,calc(100vw - var(--lib-space-md)))}.dlg-full{width:100vw;height:100vh;max-height:100vh;margin:0}.dlg-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lib-space-md);padding:var(--lib-space-xl) var(--lib-space-xl) var(--lib-space-lg);border-bottom:1px solid var(--border-subtle);flex-shrink:0}.dlg-header-text{flex:1}.dlg-header-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);flex-shrink:0;margin-top:2px}.dlg-eyebrow{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--lib-space-xs)}.dlg-title{font-family:var(--lib-font-display);font-size:var(--text-xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:1.2;color:var(--text-primary)}.dlg-title em{font-style:italic;color:var(--text-accent)}.dlg-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);background:transparent;cursor:pointer;color:var(--text-muted);flex-shrink:0;transition:border-color var(--duration-fast),color var(--duration-fast),background var(--duration-fast)}.dlg-close:hover{border-color:var(--border-default);color:var(--text-primary);background:var(--bg-surface)}.dlg-close svg{display:block;pointer-events:none}.dlg-body{padding:var(--lib-space-xl);overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--color-washi-300) transparent;font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}.dlg-footer{padding:var(--lib-space-lg) var(--lib-space-xl);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);flex-shrink:0;background:var(--bg-surface)}.dlg-footer-meta{margin-right:auto;font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.dlg-divider{border:none;border-top:1px solid var(--border-subtle);margin:var(--lib-space-lg) 0}:host([variant="danger"]) .dlg-header{border-bottom-color:var(--color-error-border, #E8B4AE);background:var(--color-error-bg, #FDF0EE)}:host([variant="danger"]) .dlg-title{color:var(--color-error)}:host([variant="danger"]) .dlg-eyebrow{color:var(--color-error);opacity:.6}:host([variant="danger"]) .dlg-header-icon{border-color:var(--color-error-border, #E8B4AE)}:host([variant="danger"]) .dlg-close{border-color:var(--color-error-border, #E8B4AE)}:host([variant="warning"]) .dlg-header{border-bottom-color:var(--color-warning-border, #E8D0AE);background:var(--color-warning-bg, #FDF5EC)}:host([variant="warning"]) .dlg-title{color:var(--color-warning)}:host([variant="warning"]) .dlg-eyebrow{color:var(--color-warning);opacity:.6}:host([variant="warning"]) .dlg-header-icon{border-color:var(--color-warning-border, #E8D0AE)}:host([variant="warning"]) .dlg-close{border-color:var(--color-warning-border, #E8D0AE)}:host([variant="dark"]) dialog.dlg{background:var(--color-washi-950);border-color:#190f0a}:host([variant="dark"]) .dlg-header{border-bottom-color:#150a06}:host([variant="dark"]) .dlg-title{color:#faf7f4d9}:host([variant="dark"]) .dlg-eyebrow{color:#3c302a}:host([variant="dark"]) .dlg-close{border-color:#1e130e;color:#433831}:host([variant="dark"]) .dlg-close:hover{border-color:#372b26;color:#faf7f499;background:#100704}:host([variant="dark"]) .dlg-body{color:#6d6059}:host([variant="dark"]) .dlg-footer{background:#070201;border-top-color:#150a06}:host([variant="dark"]) .dlg-footer-meta{color:#312620}:host([variant="dark"]) .dlg-divider{border-top-color:#150a06}:host([layout="drawer-right"]) dialog.dlg{inset:0 0 0 auto;margin:0;height:100vh;max-height:100vh;border-top:none;border-bottom:none;border-right:none;opacity:0;transform:translate(40px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}:host([layout="drawer-right"]) dialog.dlg[open]{opacity:1;transform:translate(0)}:host([layout="drawer-right"]) dialog.dlg.is-closing{opacity:0;transform:translate(40px)}:host([layout="drawer-bottom"]) dialog.dlg{inset:auto 0 0;margin:0;width:100%;max-width:100%;border-left:none;border-right:none;border-bottom:none;opacity:0;transform:translateY(40px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}:host([layout="drawer-bottom"]) dialog.dlg[open]{opacity:1;transform:translateY(0)}:host([layout="drawer-bottom"]) dialog.dlg.is-closing{opacity:0;transform:translateY(40px)}:host([layout="alert"]) .dlg-header{padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md)}:host([layout="alert"]) .dlg-body{padding:0 var(--lib-space-lg) var(--lib-space-lg)}:host([layout="alert"]) .dlg-footer{padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="alert"]) .dlg-title{font-family:var(--lib-font-body);font-size:var(--text-md)}@media(max-width:768px){.dlg-sm,.dlg-md,.dlg-lg,.dlg-xl{width:calc(100vw - var(--lib-space-md));margin:auto}}}';
 export {
-  aspectRatioTemplate
+  dialogCss as default
 };
 //# sourceMappingURL=index244.js.map

package/dist/index244.js.map

@@ -1 +1 @@
-{"version":3,"file":"index244.js","sources":["../src/components/atoms/aspect-ratio/lib-aspect-ratio.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport const aspectRatioTemplate = (): TemplateResult => {\n  return html`\n    <div class=\"aspect-ratio-container\">\n      <slot></slot>\n    </div>\n  `;\n};"],"names":[],"mappings":";AAEO,MAAM,sBAAsB,MAAsB;AACvD,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;"}
+{"version":3,"file":"index244.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index245.js

@@ -1,5 +1,97 @@
-const styles = "@layer components{:host{display:block;width:100%}.aspect-ratio-container{position:relative;width:100%;aspect-ratio:var(--lib-aspect-ratio, 1 / 1)}::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}}";
+import { html, nothing } from "lit";
+const iconClose = html`
+  <svg viewBox="0 0 14 14" aria-hidden="true">
+    <line x1="2" y1="2" x2="12" y2="12"/>
+    <line x1="12" y1="2" x2="2" y2="12"/>
+  </svg>`;
+function drawerTemplate(ctx) {
+  const isHorizontal = ctx.placement === "right" || ctx.placement === "left";
+  const isGlitch = ctx.variant === "glitch" || ctx.variant === "glitch-dark";
+  const placementClass = `dr-${ctx.placement}`;
+  return html`
+    <!-- Backdrop — click fuera cierra -->
+    <div
+      class="dr-backdrop"
+      part="backdrop"
+      @click="${(e) => {
+    if (e.target.classList.contains("dr-backdrop")) ctx._close();
+  }}"
+    >
+      <!-- Panel -->
+      <div
+        class="dr ${placementClass}"
+        part="panel"
+        role="dialog"
+        aria-modal="true"
+        aria-label="${ctx.drawerLabel}"
+        tabindex="-1"
+      >
+        <!-- RGB ghost layers (glitch variants únicamente) -->
+        ${isGlitch ? html`
+          <div class="dr-rgb-r" aria-hidden="true"></div>
+          <div class="dr-rgb-b" aria-hidden="true"></div>
+        ` : nothing}
+
+        <!-- Handle bar — solo top / bottom -->
+        ${!isHorizontal ? html`
+          <div class="dr-handle" part="handle">
+            <div class="dr-handle-bar"></div>
+          </div>
+        ` : nothing}
+
+        <!-- Header -->
+        <div class="dr-header" part="header">
+          <div class="dr-title-block">
+
+            <!-- Eyebrow — slot o prop -->
+            ${ctx.eyebrow ? html`
+              <div class="dr-eyebrow" part="eyebrow">
+                <slot name="eyebrow">${ctx.eyebrow}</slot>
+              </div>
+            ` : html`
+              <slot name="eyebrow">
+                <div class="dr-eyebrow" part="eyebrow" style="display:none"></div>
+              </slot>
+            `}
+
+            <!-- Title — slot o prop -->
+            <div class="dr-title" part="title" id="dr-title-${ctx._uid}">
+              <slot name="title">${ctx.label}</slot>
+            </div>
+
+            <!-- Subtitle — slot o prop -->
+            ${ctx.subtitle ? html`
+              <div class="dr-subtitle" part="subtitle">
+                <slot name="subtitle">${ctx.subtitle}</slot>
+              </div>
+            ` : html`<slot name="subtitle"></slot>`}
+
+          </div>
+
+          <!-- Botón cerrar -->
+          <button
+            class="dr-close"
+            part="close-btn"
+            aria-label="Cerrar"
+            @click="${() => ctx._close()}"
+          >${iconClose}</button>
+        </div>
+
+        <!-- Body — slot default -->
+        <div class="dr-body" part="body">
+          <slot></slot>
+        </div>
+
+        <!-- Footer — slot footer (oculto si vacío via CSS) -->
+        <div class="dr-footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+
+      </div>
+    </div>
+  `;
+}
 export {
-  styles as default
+  drawerTemplate
 };
 //# sourceMappingURL=index245.js.map

package/dist/index245.js.map

@@ -1 +1 @@
-{"version":3,"file":"index245.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index245.js","sources":["../src/components/organisms/drawer/lib-drawer.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibDrawer } from './lib-drawer.component';\n\n/* ── SVG close (X) ── */\nconst iconClose: TemplateResult = html`\n  <svg viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n    <line x1=\"2\" y1=\"2\" x2=\"12\" y2=\"12\"/>\n    <line x1=\"12\" y1=\"2\" x2=\"2\" y2=\"12\"/>\n  </svg>`;\n\nexport function drawerTemplate(ctx: LibDrawer): TemplateResult {\n  const isHorizontal = ctx.placement === 'right' || ctx.placement === 'left';\n  const isGlitch     = ctx.variant === 'glitch' || ctx.variant === 'glitch-dark';\n\n  /* Clase CSS del panel según placement */\n  const placementClass = `dr-${ctx.placement}`;\n\n  return html`\n    <!-- Backdrop — click fuera cierra -->\n    <div\n      class=\"dr-backdrop\"\n      part=\"backdrop\"\n      @click=\"${(e: MouseEvent): void => {\n        if ((e.target as HTMLElement).classList.contains('dr-backdrop')) ctx._close();\n      }}\"\n    >\n      <!-- Panel -->\n      <div\n        class=\"dr ${placementClass}\"\n        part=\"panel\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"${ctx.drawerLabel}\"\n        tabindex=\"-1\"\n      >\n        <!-- RGB ghost layers (glitch variants únicamente) -->\n        ${isGlitch ? html`\n          <div class=\"dr-rgb-r\" aria-hidden=\"true\"></div>\n          <div class=\"dr-rgb-b\" aria-hidden=\"true\"></div>\n        ` : nothing}\n\n        <!-- Handle bar — solo top / bottom -->\n        ${!isHorizontal ? html`\n          <div class=\"dr-handle\" part=\"handle\">\n            <div class=\"dr-handle-bar\"></div>\n          </div>\n        ` : nothing}\n\n        <!-- Header -->\n        <div class=\"dr-header\" part=\"header\">\n          <div class=\"dr-title-block\">\n\n            <!-- Eyebrow — slot o prop -->\n            ${ctx.eyebrow ? html`\n              <div class=\"dr-eyebrow\" part=\"eyebrow\">\n                <slot name=\"eyebrow\">${ctx.eyebrow}</slot>\n              </div>\n            ` : html`\n              <slot name=\"eyebrow\">\n                <div class=\"dr-eyebrow\" part=\"eyebrow\" style=\"display:none\"></div>\n              </slot>\n            `}\n\n            <!-- Title — slot o prop -->\n            <div class=\"dr-title\" part=\"title\" id=\"dr-title-${ctx._uid}\">\n              <slot name=\"title\">${ctx.label}</slot>\n            </div>\n\n            <!-- Subtitle — slot o prop -->\n            ${ctx.subtitle ? html`\n              <div class=\"dr-subtitle\" part=\"subtitle\">\n                <slot name=\"subtitle\">${ctx.subtitle}</slot>\n              </div>\n            ` : html`<slot name=\"subtitle\"></slot>`}\n\n          </div>\n\n          <!-- Botón cerrar -->\n          <button\n            class=\"dr-close\"\n            part=\"close-btn\"\n            aria-label=\"Cerrar\"\n            @click=\"${(): void => ctx._close()}\"\n          >${iconClose}</button>\n        </div>\n\n        <!-- Body — slot default -->\n        <div class=\"dr-body\" part=\"body\">\n          <slot></slot>\n        </div>\n\n        <!-- Footer — slot footer (oculto si vacío via CSS) -->\n        <div class=\"dr-footer\" part=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,YAA4B;AAAA;AAAA;AAAA;AAAA;AAM3B,SAAS,eAAe,KAAgC;AAC7D,QAAM,eAAe,IAAI,cAAc,WAAW,IAAI,cAAc;AACpE,QAAM,WAAe,IAAI,YAAY,YAAY,IAAI,YAAY;AAGjE,QAAM,iBAAiB,MAAM,IAAI,SAAS;AAE1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKO,CAAC,MAAwB;AACjC,QAAK,EAAE,OAAuB,UAAU,SAAS,aAAa,OAAO,OAAA;AAAA,EACvE,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIa,cAAc;AAAA;AAAA;AAAA;AAAA,sBAIZ,IAAI,WAAW;AAAA;AAAA;AAAA;AAAA,UAI3B,WAAW;AAAA;AAAA;AAAA,YAGT,OAAO;AAAA;AAAA;AAAA,UAGT,CAAC,eAAe;AAAA;AAAA;AAAA;AAAA,YAId,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOL,IAAI,UAAU;AAAA;AAAA,uCAEW,IAAI,OAAO;AAAA;AAAA,gBAElC;AAAA;AAAA;AAAA;AAAA,aAIH;AAAA;AAAA;AAAA,8DAGiD,IAAI,IAAI;AAAA,mCACnC,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA,cAI9B,IAAI,WAAW;AAAA;AAAA,wCAEW,IAAI,QAAQ;AAAA;AAAA,gBAEpC,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAS7B,MAAY,IAAI,QAAQ;AAAA,aACjC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBtB;"}

package/dist/index246.js

@@ -1,8 +1,5 @@
-import { html } from "lit";
-const visuallyHiddenTemplate = () => {
-  return html`<slot></slot>`;
-};
+const drawerCss = '@layer tokens,reset,components;@layer reset{:host{display:contents}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}}@layer components{.dr-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:400;background:#1a140e00;pointer-events:none;transition:background var(--duration-slow) var(--ease-out)}:host([open]) .dr-backdrop{background:#1a140e73;pointer-events:auto}.dr{position:fixed;z-index:401;background:var(--bg-elevated);display:flex;flex-direction:column;will-change:transform;visibility:hidden;transition:transform var(--duration-slow) var(--ease-out),visibility 0ms var(--duration-slow)}:host([open]) .dr{visibility:visible;transform:translate(0);transition:transform var(--duration-slow) var(--ease-out),visibility 0ms 0ms}.dr-right{top:0;right:0;bottom:0;width:420px;transform:translate(100%);border-left:1px solid var(--border-subtle);box-shadow:-8px 0 48px #1a140e29}.dr-left{top:0;left:0;bottom:0;width:420px;transform:translate(-100%);border-right:1px solid var(--border-subtle);box-shadow:8px 0 48px #1a140e29}.dr-top{top:0;left:0;right:0;height:360px;transform:translateY(-100%);border-bottom:1px solid var(--border-subtle);box-shadow:0 8px 48px #1a140e29}.dr-bottom{bottom:0;left:0;right:0;height:360px;transform:translateY(100%);border-top:1px solid var(--border-subtle);box-shadow:0 -8px 48px #1a140e29}:host([placement="right"][size="sm"]) .dr,:host([placement="left"][size="sm"]) .dr{width:300px}:host([placement="right"][size="lg"]) .dr,:host([placement="left"][size="lg"]) .dr{width:560px}:host([placement="right"][size="xl"]) .dr,:host([placement="left"][size="xl"]) .dr{width:720px}:host([placement="right"][size="full"]) .dr,:host([placement="left"][size="full"]) .dr{width:100%}:host([placement="top"][size="sm"]) .dr,:host([placement="bottom"][size="sm"]) .dr{height:240px}:host([placement="top"][size="lg"]) .dr,:host([placement="bottom"][size="lg"]) .dr{height:480px}:host([placement="top"][size="full"]) .dr,:host([placement="bottom"][size="full"]) .dr{height:100%}.dr-right:before,.dr-left:before{content:"";position:absolute;top:50%;width:3px;height:32px;border-radius:999px;background:var(--color-washi-200);transform:translateY(-50%);pointer-events:none}.dr-right:before{left:var(--lib-space-sm)}.dr-left:before{right:var(--lib-space-sm)}.dr-handle{display:flex;justify-content:center;padding:var(--lib-space-sm) 0 var(--lib-space-xs);flex-shrink:0}.dr-handle-bar{width:36px;height:3px;background:var(--color-washi-300);border-radius:999px}.dr-header{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);flex-shrink:0;gap:var(--lib-space-md)}.dr-eyebrow{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--lib-space-xs)}.dr-title{font-family:var(--lib-font-display);font-size:1.8rem;font-weight:300;letter-spacing:var(--tracking-tight);line-height:1.1;color:var(--text-primary)}.dr-subtitle{font-family:var(--lib-font-body);font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);margin-top:var(--lib-space-sm);line-height:1.6}.dr-close{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border-subtle);cursor:pointer;color:var(--text-muted);margin-top:var(--lib-space-xs);transition:border-color var(--duration-base),color var(--duration-base),background var(--duration-base)}.dr-close:hover{border-color:var(--border-default);background:var(--bg-surface);color:var(--text-primary)}.dr-close:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.dr-close svg{width:12px;height:12px;stroke-width:1.6;stroke:currentcolor;fill:none;stroke-linecap:round}.dr-body{flex:1;overflow:hidden auto;padding:var(--lib-space-lg)}.dr-body::-webkit-scrollbar{width:4px}.dr-body::-webkit-scrollbar-thumb{background:var(--color-washi-300);border-radius:2px}.dr-body::-webkit-scrollbar-thumb:hover{background:var(--color-washi-500)}.dr-body::-webkit-scrollbar-track{background:transparent}:host([open]) .dr-body ::slotted(*:nth-child(1)){animation:dr-body-in var(--duration-slow) var(--ease-out) .12s both}:host([open]) .dr-body ::slotted(*:nth-child(2)){animation:dr-body-in var(--duration-slow) var(--ease-out) .16s both}:host([open]) .dr-body ::slotted(*:nth-child(3)){animation:dr-body-in var(--duration-slow) var(--ease-out) .2s both}:host([open]) .dr-body ::slotted(*:nth-child(4)){animation:dr-body-in var(--duration-slow) var(--ease-out) .24s both}:host([open]) .dr-body ::slotted(*:nth-child(n+5)){animation:dr-body-in var(--duration-slow) var(--ease-out) .28s both}@keyframes dr-body-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.dr-footer{border-top:1px solid var(--border-subtle);padding:var(--lib-space-md) var(--lib-space-lg);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);flex-shrink:0;background:var(--bg-base)}.dr-footer:not(:has(slot[name=footer] *)){display:none}:host([variant="dark"]) .dr{background:var(--color-washi-950);border-color:#ffffff12!important}:host([variant="dark"]) .dr-header{border-bottom-color:#ffffff12}:host([variant="dark"]) .dr-eyebrow{color:#faf7f438}:host([variant="dark"]) .dr-title{color:#faf7f4bf}:host([variant="dark"]) .dr-subtitle{color:#faf7f447}:host([variant="dark"]) .dr-close{border-color:#ffffff1a;color:#faf7f44d}:host([variant="dark"]) .dr-close:hover{border-color:#fff3;background:#ffffff0d;color:#faf7f4b3}:host([variant="dark"]) .dr-right:before,:host([variant="dark"]) .dr-left:before{background:#ffffff14}:host([variant="dark"]) .dr-footer{border-top-color:#ffffff12;background:#ffffff05}:host([variant="dark"]) .dr-handle-bar{background:#ffffff1f}:host([variant="dark"]) .dr-body::-webkit-scrollbar-thumb{background:#faf7f426}:host([variant="dark"]) .dr-body::-webkit-scrollbar-thumb:hover{background:#faf7f44d}:host([variant="kintsugi"]) .dr{border-color:#b85a1e4d!important}:host([variant="kintsugi"]) .dr-header{border-bottom-color:#b85a1e26}:host([variant="kintsugi"]) .dr-eyebrow{color:var(--color-kaki-400)}:host([variant="kintsugi"]) .dr-title{color:var(--color-kaki-600)}:host([variant="kintsugi"]) .dr-close{border-color:#b85a1e40;color:var(--color-kaki-500)}:host([variant="kintsugi"]) .dr-close:hover{background:var(--color-kaki-50);border-color:var(--color-kaki-400)}:host([variant="kintsugi"]) .dr-footer{background:var(--color-kaki-50);border-top-color:#b85a1e1f}:host([variant="kintsugi"]) .dr-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--color-kaki-400),#F5D08A,var(--color-kaki-600));background-size:100% 200%;animation:kintsugi-seam 3s ease-in-out infinite alternate}:host([variant="kintsugi"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent 0%,var(--color-kaki-400) 20%,#F5D08A 50%,var(--color-kaki-400) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi"][placement="left"]) .dr:after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:linear-gradient(180deg,transparent 0%,var(--color-kaki-400) 20%,#F5D08A 50%,var(--color-kaki-400) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi"][placement="top"]) .dr:after,:host([variant="kintsugi"][placement="bottom"]) .dr:after{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--color-kaki-400) 20%,#F5D08A 50%,var(--color-kaki-400) 80%,transparent 100%);background-size:200% 100%;animation:kintsugi-sweep 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi"][placement="top"]) .dr:after{bottom:0}:host([variant="kintsugi"][placement="bottom"]) .dr:after{top:0}@keyframes kintsugi-seam{0%{background-position:0 -20%;opacity:.7}50%{background-position:0 50%;opacity:1}to{background-position:0 120%;opacity:.7}}@keyframes kintsugi-sweep{0%{background-position:-200% 0}to{background-position:200% 0}}:host([variant="kintsugi-dark"]) .dr{background:var(--color-washi-950);border-color:#b85a1e33!important}:host([variant="kintsugi-dark"]) .dr-header{border-bottom-color:#b85a1e26}:host([variant="kintsugi-dark"]) .dr-eyebrow{color:#d9723480}:host([variant="kintsugi-dark"]) .dr-title{color:var(--color-kaki-400)}:host([variant="kintsugi-dark"]) .dr-subtitle{color:#faf7f440}:host([variant="kintsugi-dark"]) .dr-close{border-color:#b85a1e33;color:#d9723480}:host([variant="kintsugi-dark"]) .dr-close:hover{background:#b85a1e14;border-color:var(--color-kaki-500);color:var(--color-kaki-400)}:host([variant="kintsugi-dark"]) .dr-footer{background:#b85a1e0a;border-top-color:#b85a1e1f}:host([variant="kintsugi-dark"]) .dr-right:before,:host([variant="kintsugi-dark"]) .dr-left:before{background:#b85a1e26}:host([variant="kintsugi-dark"]) .dr-body::-webkit-scrollbar-thumb{background:#b85a1e66}:host([variant="kintsugi-dark"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent 0%,rgb(184,90,30,.5) 20%,rgb(245,208,138,.7) 50%,rgb(184,90,30,.5) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="kintsugi-dark"][placement="left"]) .dr:after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:linear-gradient(180deg,transparent 0%,rgb(184,90,30,.5) 20%,rgb(245,208,138,.7) 50%,rgb(184,90,30,.5) 80%,transparent 100%);background-size:100% 200%;animation:kintsugi-seam 4s ease-in-out infinite alternate;pointer-events:none}:host([variant="glitch"]) .dr{animation:dr-glitch-slide 7s steps(1) infinite}:host([variant="glitch"][open]) .dr{animation:dr-flicker 7s steps(1) infinite}:host([variant="glitch"][open][placement="right"]) .dr{animation:dr-glitch-open-r var(--duration-slow) var(--ease-out) forwards,dr-glitch-slide 7s steps(1) infinite .6s}:host([variant="glitch"]) .dr-title{font-family:var(--lib-font-mono);font-size:1rem;letter-spacing:.14em;text-transform:uppercase}:host([variant="glitch"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--color-washi-900);animation:dr-seam-glitch 7s steps(1) infinite;pointer-events:none}:host([variant="glitch"][placement="left"]) .dr:after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--color-washi-900);animation:dr-seam-glitch 7s steps(1) infinite;pointer-events:none}:host([variant="glitch"]) .dr:before{content:""!important;position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(0,0,0,.03) 3px,rgb(0,0,0,.03) 4px)!important;animation:dr-scanline 7s steps(1) infinite!important;pointer-events:none!important;z-index:10!important;width:auto!important;height:auto!important;border-radius:0!important}.dr-rgb-r,.dr-rgb-b{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9}:host([variant="glitch"]) .dr-rgb-r{background:#d9723414;animation:dr-rgb-r 7s steps(1) infinite;mix-blend-mode:screen}:host([variant="glitch"]) .dr-rgb-b{background:#4e94820f;animation:dr-rgb-b 7s steps(1) infinite 60ms;mix-blend-mode:screen}:host([variant="glitch-dark"]) .dr{background:var(--color-washi-950);border-color:#ffffff0f!important;animation:dr-glitch-slide 6s steps(1) infinite,dr-flicker 6s steps(1) infinite}:host([variant="glitch-dark"][open]) .dr{animation:dr-flicker 6s steps(1) infinite}:host([variant="glitch-dark"][placement="right"]) .dr:after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:#faf7f44d;animation:dr-seam-glitch 6s steps(1) infinite;pointer-events:none}:host([variant="glitch-dark"]) .dr:before{content:""!important;position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:0!important;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgb(255,255,255,.02) 3px,rgb(255,255,255,.02) 4px)!important;animation:dr-scanline 6s steps(1) infinite!important;pointer-events:none!important;z-index:10!important;width:auto!important;height:auto!important}:host([variant="glitch-dark"]) .dr-rgb-r{background:#d972341f;animation:dr-rgb-r 6s steps(1) infinite;mix-blend-mode:screen}:host([variant="glitch-dark"]) .dr-rgb-b{background:#4e94821a;animation:dr-rgb-b 6s steps(1) infinite 80ms;mix-blend-mode:screen}:host([variant="glitch-dark"]) .dr-header{border-bottom-color:#ffffff12}:host([variant="glitch-dark"]) .dr-eyebrow{color:#faf7f433}:host([variant="glitch-dark"]) .dr-title{color:#faf7f4bf;font-family:var(--lib-font-mono);font-size:1rem;letter-spacing:.14em;text-transform:uppercase}:host([variant="glitch-dark"]) .dr-subtitle{color:#faf7f440}:host([variant="glitch-dark"]) .dr-close{border-color:#ffffff1a;color:#faf7f44d}:host([variant="glitch-dark"]) .dr-close:hover{background:#ffffff0d;border-color:#fff3;color:#faf7f4b3}:host([variant="glitch-dark"]) .dr-footer{background:#ffffff05;border-top-color:#ffffff0f}:host([variant="glitch-dark"]) .dr-body::-webkit-scrollbar-thumb{background:#faf7f426}@keyframes dr-glitch-slide{0%,88%,to{transform:translate(0)}89%{transform:translate(-2px)}90%{transform:translate(2px)}91%{transform:translate(-1px)}92%{transform:translate(0)}}@keyframes dr-glitch-open-r{0%{transform:translate(100%)}60%{transform:translate(-3px)}65%{transform:translate(2px)}70%{transform:translate(-1px)}to{transform:translate(0)}}@keyframes dr-seam-glitch{0%,85%,to{opacity:.3;height:100%;top:0}86%{opacity:1;height:60%;top:20%}87%{opacity:.6;height:80%;top:5%}88%{opacity:0}89%{opacity:1;height:40%;top:50%}90%{opacity:.3;height:100%;top:0}}@keyframes dr-scanline{0%{background-position:0 0;opacity:.04}89%{background-position:0 0;opacity:.04}90%{background-position:0 -4px;opacity:.12}91%{background-position:0 3px;opacity:.08}92%{background-position:0 0;opacity:.04}}@keyframes dr-rgb-r{0%,88%,to{opacity:0}89%{opacity:.15;transform:translate(-3px);clip-path:inset(20% 0 40% 0)}90%{opacity:.1;transform:translate(2px);clip-path:inset(60% 0 10% 0)}91%{opacity:0}}@keyframes dr-rgb-b{0%,88%,to{opacity:0}89%{opacity:.12;transform:translate(3px);clip-path:inset(50% 0 20% 0)}90%{opacity:.08;transform:translate(-2px);clip-path:inset(10% 0 60% 0)}91%{opacity:0}}@keyframes dr-flicker{0%,85%,to{opacity:1}89%{opacity:.8}89.5%{opacity:1}90%{opacity:.6}90.5%{opacity:1}}@media(prefers-reduced-motion:reduce){.dr{transition:visibility 0ms}:host([open]) .dr{transition:none}:host([variant="glitch"]) .dr,:host([variant="glitch-dark"]) .dr{animation:none}:host([variant="kintsugi"]) .dr:after,:host([variant="kintsugi-dark"]) .dr:after{animation:none}:host([open]) .dr-body ::slotted(*){animation:none}}}';
 export {
-  visuallyHiddenTemplate
+  drawerCss as default
 };
 //# sourceMappingURL=index246.js.map

package/dist/index246.js.map

@@ -1 +1 @@
-{"version":3,"file":"index246.js","sources":["../src/components/atoms/visually-hidden/lib-visually-hidden.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport const visuallyHiddenTemplate = (): TemplateResult => {\n  return html`<slot></slot>`;\n};"],"names":[],"mappings":";AAEO,MAAM,yBAAyB,MAAsB;AAC1D,SAAO;AACT;"}
+{"version":3,"file":"index246.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}