@shibui-ui/ui 1.25.1 → 1.26.1

package/dist/index205.js.map

@@ -1 +1 @@
-{"version":3,"file":"index205.js","sources":["../src/components/molecules/color-picker/lib-color-picker.types.ts"],"sourcesContent":["/** Modo de visualización del componente */\nexport type ColorPickerVariant = 'inline' | 'trigger';\n\n/** Modo de los inputs de texto */\nexport type ColorInputMode = 'hex' | 'rgb' | 'hsl';\n\n/** Fila de swatches para el swatch-grid */\nexport interface SwatchRow {\n  label: string;\n  colors: SwatchColor[];\n}\n\nexport interface SwatchColor {\n  value: string;   // hex\n  name?: string;   // tooltip\n}\n\n/** Props internas del estado de color (HSL + alpha) */\nexport interface ColorState {\n  h: number;       // 0–360\n  s: number;       // 0–100\n  l: number;       // 0–100\n  alpha: number;   // 0–100\n}\n\n/** Paleta Shibui por defecto para el swatch grid */\nexport const SHIBUI_SWATCHES: SwatchRow[] = [\n  {\n    label: 'washi',\n    colors: [\n      { value: '#FAF7F4', name: 'washi-50' },\n      { value: '#F2EDE6', name: 'washi-100' },\n      { value: '#E5DDD3', name: 'washi-200' },\n      { value: '#D3C8BC', name: 'washi-300' },\n      { value: '#B8A99A', name: 'washi-400' },\n      { value: '#9A8878', name: 'washi-500' },\n      { value: '#7A6A5C', name: 'washi-600' },\n      { value: '#5C4E42', name: 'washi-700' },\n      { value: '#3D332A', name: 'washi-800' },\n      { value: '#221C16', name: 'washi-900' },\n      { value: '#120E0A', name: 'washi-950' },\n    ],\n  },\n  {\n    label: 'kaki',\n    colors: [\n      { value: '#FDF3EC', name: 'kaki-50' },\n      { value: '#FAE2CC', name: 'kaki-100' },\n      { value: '#F5C89A', name: 'kaki-200' },\n      { value: '#EBAA66', name: 'kaki-300' },\n      { value: '#D97234', name: 'kaki-400' },\n      { value: '#B85A1E', name: 'kaki-500' },\n      { value: '#8C4115', name: 'kaki-600' },\n    ],\n  },\n  {\n    label: 'celadón',\n    colors: [\n      { value: '#EFF5F3', name: 'celadon-50' },\n      { value: '#D3E8E1', name: 'celadon-100' },\n      { value: '#A8D0C5', name: 'celadon-200' },\n      { value: '#76B3A5', name: 'celadon-300' },\n      { value: '#4D8E82', name: 'celadon-400' },\n      { value: '#357164', name: 'celadon-500' },\n      { value: '#245249', name: 'celadon-600' },\n    ],\n  },\n];"],"names":[],"mappings":"AA0BO,MAAM,kBAA+B;AAAA,EAC1C;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,IAAY;AAAA,EACxC;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,EAAE,OAAO,WAAW,MAAM,UAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,IAAW;AAAA,EACvC;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,EAAE,OAAO,WAAW,MAAM,aAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,IAAc;AAAA,EAC1C;AAEJ;"}
+{"version":3,"file":"index205.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/index206.js

@@ -1,54 +1,5 @@
-import { html } from "lit";
-const chevronSvg = html`
-  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-    <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
-  </svg>`;
-function dropdownTemplate(ctx) {
-  return html`
-    <div class="dd" part="root">
-
-      <!-- ── Trigger ── -->
-      <button
-        class="dd-trigger"
-        part="trigger"
-        aria-haspopup="true"
-        aria-expanded="${ctx.open}"
-        aria-label="${ctx.ariaLabel || ctx.label}"
-        @click="${() => ctx._toggle()}"
-        @keydown="${(e) => ctx._handleTriggerKey(e)}"
-      >
-        <slot name="trigger">${ctx.label}</slot>
-        <span class="dd-chevron" part="chevron">${chevronSvg}</span>
-      </button>
-
-      <!-- ── Panel ── -->
-      <div
-        class="dd-menu"
-        part="menu"
-        role="menu"
-        style="${ctx.minWidth ? `--dd-min-width:${ctx.minWidth}` : ""}"
-        @keydown="${(e) => ctx._handleMenuKey(e)}"
-      >
-        <!-- Header opcional (búsqueda, título) -->
-        <div class="dd-header-wrap" part="header-wrap"
-          style="${ctx._hasSlot("header") ? "" : "display:none"}">
-          <slot name="header"></slot>
-        </div>
-
-        <!-- Contenido: items, separadores, grupos -->
-        <slot></slot>
-
-        <!-- Footer opcional (acciones, confirmación) -->
-        <div class="dd-footer-wrap" part="footer-wrap"
-          style="${ctx._hasSlot("footer") ? "" : "display:none"}">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-
-    </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 {
-  dropdownTemplate
+  dialogCss as default
 };
 //# sourceMappingURL=index206.js.map

package/dist/index206.js.map

@@ -1 +1 @@
-{"version":3,"file":"index206.js","sources":["../src/components/molecules/dropdown/lib-dropdown.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibDropdown } from './lib-dropdown.component';\n\n/* Chevron SVG inline — no depende de Phosphor ni ninguna lib */\nconst chevronSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80a8,8,0,0,1,11.32-11.32L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"/>\n  </svg>`;\n\nexport function dropdownTemplate(ctx: LibDropdown): TemplateResult {\n  return html`\n    <div class=\"dd\" part=\"root\">\n\n      <!-- ── Trigger ── -->\n      <button\n        class=\"dd-trigger\"\n        part=\"trigger\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"${ctx.open}\"\n        aria-label=\"${ctx.ariaLabel || ctx.label}\"\n        @click=\"${(): void => ctx._toggle()}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._handleTriggerKey(e)}\"\n      >\n        <slot name=\"trigger\">${ctx.label}</slot>\n        <span class=\"dd-chevron\" part=\"chevron\">${chevronSvg}</span>\n      </button>\n\n      <!-- ── Panel ── -->\n      <div\n        class=\"dd-menu\"\n        part=\"menu\"\n        role=\"menu\"\n        style=\"${ctx.minWidth ? `--dd-min-width:${ctx.minWidth}` : ''}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._handleMenuKey(e)}\"\n      >\n        <!-- Header opcional (búsqueda, título) -->\n        <div class=\"dd-header-wrap\" part=\"header-wrap\"\n          style=\"${ctx._hasSlot('header') ? '' : 'display:none'}\">\n          <slot name=\"header\"></slot>\n        </div>\n\n        <!-- Contenido: items, separadores, grupos -->\n        <slot></slot>\n\n        <!-- Footer opcional (acciones, confirmación) -->\n        <div class=\"dd-footer-wrap\" part=\"footer-wrap\"\n          style=\"${ctx._hasSlot('footer') ? '' : 'display:none'}\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,aAA6B;AAAA;AAAA;AAAA;AAK5B,SAAS,iBAAiB,KAAkC;AACjE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQgB,IAAI,IAAI;AAAA,sBACX,IAAI,aAAa,IAAI,KAAK;AAAA,kBAC9B,MAAY,IAAI,SAAS;AAAA,oBACvB,CAAC,MAA2B,IAAI,kBAAkB,CAAC,CAAC;AAAA;AAAA,+BAEzC,IAAI,KAAK;AAAA,kDACU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQ3C,IAAI,WAAW,kBAAkB,IAAI,QAAQ,KAAK,EAAE;AAAA,oBACjD,CAAC,MAA2B,IAAI,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,mBAIlD,IAAI,SAAS,QAAQ,IAAI,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAS5C,IAAI,SAAS,QAAQ,IAAI,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/D;"}
+{"version":3,"file":"index206.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index207.js

@@ -1,5 +1,97 @@
-const dropdownCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;position:relative}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.dd{position:relative;display:inline-block;-webkit-user-select:none;user-select:none}.dd-trigger{display:inline-flex;align-items:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;cursor:pointer;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default);padding:calc(var(--lib-space-sm) + var(--lib-space-xs)) var(--lib-space-md);white-space:nowrap;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out)}.dd-trigger:hover{background:var(--bg-surface);border-color:var(--border-strong)}:host([open]) .dd-trigger{background:var(--bg-surface);border-color:var(--color-washi-700)}.dd-trigger:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}.dd-chevron{display:flex;align-items:center;flex-shrink:0;color:var(--text-muted);transition:transform var(--duration-slow) var(--ease-out);line-height:1}.dd-chevron svg{width:12px;height:12px}:host([open]) .dd-chevron{transform:rotate(180deg)}:host([variant="ghost"]) .dd-trigger{background:transparent;border-color:transparent;color:var(--text-secondary)}:host([variant="ghost"]) .dd-trigger:hover{background:var(--bg-surface);border-color:transparent}:host([variant="ghost"][open]) .dd-trigger{background:var(--bg-surface);border-color:transparent}:host([variant="filled"]) .dd-trigger{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50)}:host([variant="filled"]) .dd-trigger:hover{background:var(--color-washi-800);border-color:var(--color-washi-800)}:host([variant="filled"]) .dd-chevron{color:var(--color-washi-400)}:host([variant="kaki"]) .dd-trigger{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:#fff}:host([variant="kaki"]) .dd-trigger:hover{background:var(--color-kaki-600);border-color:var(--color-kaki-600)}:host([variant="kaki"]) .dd-chevron{color:#fff9}.dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:300;min-width:var(--dd-min-width, 200px);background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-6px) scaleY(.97);transform-origin:top center;pointer-events:none;transition:opacity .16s var(--ease-out),transform .2s var(--ease-out)}:host([open]) .dd-menu{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}:host([align="right"]) .dd-menu{left:auto;right:0}::slotted(.dd-item){display:flex!important;align-items:center;gap:.75rem;width:100%;padding:.75rem var(--lib-space-md);font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);background:transparent;border:none;cursor:pointer;text-align:left;text-decoration:none;white-space:nowrap;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}::slotted(.dd-item:hover){background:var(--bg-surface);color:var(--text-primary)}::slotted(.dd-item.is-active){color:var(--text-primary);background:var(--color-washi-100)}::slotted(.dd-item.is-disabled){opacity:.38;cursor:not-allowed;pointer-events:none}::slotted(.dd-item.is-danger){color:var(--color-error)}::slotted(.dd-item.is-danger:hover){background:var(--color-error-light);color:var(--color-error)}::slotted(.dd-sep){display:block!important;height:1px;background:var(--border-subtle);margin:var(--lib-space-xs) 0;border:none}::slotted(.dd-group-label){display:block!important;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);padding:.75rem var(--lib-space-md) var(--lib-space-xs)}.dd-header-wrap{border-bottom:1px solid var(--border-subtle)}.dd-footer-wrap{border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:flex-end;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md)}.dd-scroll-wrap{max-height:220px;overflow-y:auto;overscroll-behavior:contain}.dd-scroll-wrap::-webkit-scrollbar{width:4px}.dd-scroll-wrap::-webkit-scrollbar-track{background:transparent}.dd-scroll-wrap::-webkit-scrollbar-thumb{background:var(--color-washi-300);border-radius:2px}:host([dark]) .dd-menu{background:var(--color-washi-900);border-color:var(--color-washi-800)}:host([dark]) .dd-header-wrap{border-color:var(--color-washi-800)}:host([dark]) .dd-footer-wrap{border-color:var(--color-washi-800)}:host([dark]) ::slotted(.dd-item){color:var(--color-washi-400)}:host([dark]) ::slotted(.dd-item:hover){background:var(--color-washi-800);color:var(--color-washi-100)}:host([dark]) ::slotted(.dd-item.is-active){background:var(--color-washi-800);color:var(--color-washi-100)}:host([dark]) ::slotted(.dd-item.is-danger){color:#e87a6a}:host([dark]) ::slotted(.dd-item.is-danger:hover){background:#8c2a1a4d;color:#e87a6a}:host([dark]) ::slotted(.dd-sep){background:var(--color-washi-800)}:host([dark]) ::slotted(.dd-group-label){color:var(--color-washi-600)}}';
+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 {
-  dropdownCss as default
+  drawerTemplate
 };
 //# sourceMappingURL=index207.js.map

package/dist/index207.js.map

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

@@ -1,36 +1,5 @@
-import { html, nothing } from "lit";
-function emptyStateTemplate(props) {
-  const illustrationZone = props.kanji ? html`
-        <div class="es-illustration">
-          <span class="es-kanji">${props.kanji}</span>
-        </div>
-      ` : html`
-        <div class="es-illustration">
-          <div class="es-icon-wrap">
-            <slot name="illustration"></slot>
-          </div>
-        </div>
-      `;
-  return html`
-    <div class="es
-      ${props.layout === "inline" ? "es-inline" : ""}
-      ${props.size === "sm" ? "es-sm" : ""}
-      ${props.tone !== "neutral" ? `es-${props.tone}` : ""}
-      ${props.bordered ? "es-bordered" : ""}
-      ${props.ghost ? "es-ghost" : ""}
-    ">
-      ${illustrationZone}
-      <div class="es-body">
-        ${props.heading ? html`<h3 class="es-title">${props.heading}</h3>` : nothing}
-        ${props.description ? html`<p class="es-desc">${props.description}</p>` : nothing}
-        <div class="es-actions">
-          <slot name="actions"></slot>
-        </div>
-      </div>
-    </div>
-  `;
-}
+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 {
-  emptyStateTemplate
+  drawerCss as default
 };
 //# sourceMappingURL=index208.js.map

package/dist/index208.js.map

@@ -1 +1 @@
-{"version":3,"file":"index208.js","sources":["../src/components/molecules/empty-state/lib-empty-state.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibEmptyStateTone   = 'neutral' | 'kaki' | 'celadon' | 'error';\nexport type LibEmptyStateLayout = 'default' | 'inline';\nexport type LibEmptyStateSize   = 'sm' | 'md';\n\nexport interface EmptyStateTemplateProps {\n  heading:     string;\n  description: string;\n  kanji:       string;\n  tone:        LibEmptyStateTone;\n  layout:      LibEmptyStateLayout;\n  size:        LibEmptyStateSize;\n  bordered:    boolean;\n  ghost:       boolean;\n}\n\n/**\n * Template para lib-empty-state.\n *\n * Estructura (ambos layouts):\n *   div.es\n *     div.es-illustration     ← kanji | icon-wrap[slot=illustration]\n *     div.es-body\n *       h3.es-title\n *       p.es-desc\n *       div.es-actions\n *         slot[name=actions]\n *\n * La zona de ilustración se omite si no hay kanji ni slot.\n * El CSS diferencia .es-inline (row) de .es (column).\n */\nexport function emptyStateTemplate(props: EmptyStateTemplateProps): TemplateResult {\n  const illustrationZone = props.kanji\n    ? html`\n        <div class=\"es-illustration\">\n          <span class=\"es-kanji\">${props.kanji}</span>\n        </div>\n      `\n    : html`\n        <div class=\"es-illustration\">\n          <div class=\"es-icon-wrap\">\n            <slot name=\"illustration\"></slot>\n          </div>\n        </div>\n      `;\n\n  return html`\n    <div class=\"es\n      ${props.layout  === 'inline'  ? 'es-inline'  : ''}\n      ${props.size    === 'sm'      ? 'es-sm'      : ''}\n      ${props.tone    !== 'neutral' ? `es-${props.tone}` : ''}\n      ${props.bordered              ? 'es-bordered' : ''}\n      ${props.ghost                 ? 'es-ghost'   : ''}\n    \">\n      ${illustrationZone}\n      <div class=\"es-body\">\n        ${props.heading\n          ? html`<h3 class=\"es-title\">${props.heading}</h3>`\n          : nothing}\n        ${props.description\n          ? html`<p class=\"es-desc\">${props.description}</p>`\n          : nothing}\n        <div class=\"es-actions\">\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgCO,SAAS,mBAAmB,OAAgD;AACjF,QAAM,mBAAmB,MAAM,QAC3B;AAAA;AAAA,mCAE6B,MAAM,KAAK;AAAA;AAAA,UAGxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQJ,SAAO;AAAA;AAAA,QAED,MAAM,WAAY,WAAY,cAAe,EAAE;AAAA,QAC/C,MAAM,SAAY,OAAY,UAAe,EAAE;AAAA,QAC/C,MAAM,SAAY,YAAY,MAAM,MAAM,IAAI,KAAK,EAAE;AAAA,QACrD,MAAM,WAAwB,gBAAgB,EAAE;AAAA,QAChD,MAAM,QAAwB,aAAe,EAAE;AAAA;AAAA,QAE/C,gBAAgB;AAAA;AAAA,UAEd,MAAM,UACJ,4BAA4B,MAAM,OAAO,UACzC,OAAO;AAAA,UACT,MAAM,cACJ,0BAA0B,MAAM,WAAW,SAC3C,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnB;"}
+{"version":3,"file":"index208.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index209.js

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