@shibui-ui/ui 1.25.0 → 1.25.1

package/dist/index205.js

@@ -1,85 +1,46 @@
-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>
-  `;
-}
+const SHIBUI_SWATCHES = [
+  {
+    label: "washi",
+    colors: [
+      { value: "#FAF7F4", name: "washi-50" },
+      { value: "#F2EDE6", name: "washi-100" },
+      { value: "#E5DDD3", name: "washi-200" },
+      { value: "#D3C8BC", name: "washi-300" },
+      { value: "#B8A99A", name: "washi-400" },
+      { value: "#9A8878", name: "washi-500" },
+      { value: "#7A6A5C", name: "washi-600" },
+      { value: "#5C4E42", name: "washi-700" },
+      { value: "#3D332A", name: "washi-800" },
+      { value: "#221C16", name: "washi-900" },
+      { value: "#120E0A", name: "washi-950" }
+    ]
+  },
+  {
+    label: "kaki",
+    colors: [
+      { value: "#FDF3EC", name: "kaki-50" },
+      { value: "#FAE2CC", name: "kaki-100" },
+      { value: "#F5C89A", name: "kaki-200" },
+      { value: "#EBAA66", name: "kaki-300" },
+      { value: "#D97234", name: "kaki-400" },
+      { value: "#B85A1E", name: "kaki-500" },
+      { value: "#8C4115", name: "kaki-600" }
+    ]
+  },
+  {
+    label: "celadón",
+    colors: [
+      { value: "#EFF5F3", name: "celadon-50" },
+      { value: "#D3E8E1", name: "celadon-100" },
+      { value: "#A8D0C5", name: "celadon-200" },
+      { value: "#76B3A5", name: "celadon-300" },
+      { value: "#4D8E82", name: "celadon-400" },
+      { value: "#357164", name: "celadon-500" },
+      { value: "#245249", name: "celadon-600" }
+    ]
+  }
+];
 export {
-  dialogTemplate
+  SHIBUI_SWATCHES
 };
 //# sourceMappingURL=index205.js.map

package/dist/index205.js.map

@@ -1 +1 @@
-{"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;"}
+{"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;"}

package/dist/index206.js

@@ -1,5 +1,54 @@
-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}}}';
+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>
+  `;
+}
 export {
-  dialogCss as default
+  dropdownTemplate
 };
 //# sourceMappingURL=index206.js.map

package/dist/index206.js.map

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

package/dist/index207.js

@@ -1,97 +1,5 @@
-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>
-  `;
-}
+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)}}';
 export {
-  drawerTemplate
+  dropdownCss as default
 };
 //# sourceMappingURL=index207.js.map

package/dist/index207.js.map

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

package/dist/index208.js

@@ -1,5 +1,36 @@
-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}}}';
+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>
+  `;
+}
 export {
-  drawerCss as default
+  emptyStateTemplate
 };
 //# sourceMappingURL=index208.js.map

package/dist/index208.js.map

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