@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index216.js.map

@@ -1 +1 @@
-{"version":3,"file":"index216.js","sources":["../src/components/atoms/step/lib-step.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\nimport type { LibStepStatus, LibStepOrientation } from './lib-step.types';\n\nexport type { LibStepStatus, LibStepOrientation } from './lib-step.types';\nexport type { LibStepVariant, LibStepSize } from './lib-step.types';\n\nexport interface StepTemplateProps {\n  index:       number;\n  status:      LibStepStatus;\n  label:       string;\n  sub:         string;\n  last:        boolean;\n  orientation: LibStepOrientation;\n}\n\n/* ── SVG icons ─────────────────────────────────────────────── */\nconst iconCheck = svg`\n  <svg class=\"step-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n    <polyline points=\"2,6 5,9 10,3\"/>\n  </svg>\n`;\n\nconst iconError = svg`\n  <svg class=\"step-icon\" viewBox=\"0 0 14 14\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n       aria-hidden=\"true\">\n    <line x1=\"7\" y1=\"3\" x2=\"7\" y2=\"7.5\"/>\n    <circle cx=\"7\" cy=\"10\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/>\n  </svg>\n`;\n\nfunction nodeContent(props: StepTemplateProps): TemplateResult {\n  if (props.status === 'completed') return iconCheck;\n  if (props.status === 'error')     return iconError;\n  return html`${props.index}`;\n}\n\n/**\n * Template para lib-step.\n *\n * Estructura (orientación horizontal):\n *   .step-node     — círculo/cuadrado con número o icono\n *   .step-connector— línea que conecta con el siguiente paso (oculta en [last])\n *   .step-text     — label + sub\n *\n * Estructura (orientación vertical):\n *   .step-node\n *   .step-connector (vertical)\n *   .step-body\n *     .step-title\n *     .step-content  ← <slot> para contenido descriptivo\n */\nexport function stepTemplate(props: StepTemplateProps): TemplateResult {\n  const isVertical = props.orientation === 'vertical';\n\n  return html`\n    <div\n      class=\"step-inner\"\n      role=\"listitem\"\n      aria-current=${props.status === 'active' ? 'step' : nothing}\n    >\n      <div class=\"step-node\" aria-hidden=\"true\">\n        ${nodeContent(props)}\n      </div>\n\n      ${!props.last ? html`<div class=\"step-connector\" aria-hidden=\"true\"></div>` : nothing}\n\n      ${isVertical\n        ? html`\n          <div class=\"step-body\">\n            <p class=\"step-title\">${props.label}</p>\n            ${props.sub ? html`<p class=\"step-sub\">${props.sub}</p>` : nothing}\n            <div class=\"step-content\"><slot></slot></div>\n          </div>\n        `\n        : html`\n          <div class=\"step-text\">\n            <span class=\"step-label\">${props.label}</span>\n            ${props.sub ? html`<span class=\"step-sub\">${props.sub}</span>` : nothing}\n          </div>\n        `\n      }\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgBA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,SAAS,YAAY,OAA0C;AAC7D,MAAI,MAAM,WAAW,YAAa,QAAO;AACzC,MAAI,MAAM,WAAW,QAAa,QAAO;AACzC,SAAO,OAAO,MAAM,KAAK;AAC3B;AAiBO,SAAS,aAAa,OAA0C;AACrE,QAAM,aAAa,MAAM,gBAAgB;AAEzC,SAAO;AAAA;AAAA;AAAA;AAAA,qBAIY,MAAM,WAAW,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA,UAGvD,YAAY,KAAK,CAAC;AAAA;AAAA;AAAA,QAGpB,CAAC,MAAM,OAAO,8DAA8D,OAAO;AAAA;AAAA,QAEnF,aACE;AAAA;AAAA,oCAE0B,MAAM,KAAK;AAAA,cACjC,MAAM,MAAM,2BAA2B,MAAM,GAAG,SAAS,OAAO;AAAA;AAAA;AAAA,YAIpE;AAAA;AAAA,uCAE6B,MAAM,KAAK;AAAA,cACpC,MAAM,MAAM,8BAA8B,MAAM,GAAG,YAAY,OAAO;AAAA;AAAA,SAG9E;AAAA;AAAA;AAGN;"}
+{"version":3,"file":"index216.js","sources":["../src/components/molecules/input/lib-input.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport interface InputTemplateProps {\n  uuid: string;\n  type: 'text' | 'email' | 'password';\n  label: string;\n  placeholder: string;\n  required: boolean;\n  disabled: boolean;\n  error: boolean;\n  errorMessage: string;\n  value: string;\n  showPassword: boolean;\n  handleInput: (e: InputEvent) => void;\n  handleTogglePassword: () => void;\n}\n\n/**\n * Plantilla base para el componente lib-input.\n * Renderiza un campo de texto con label, slots prefix/suffix y estado de error.\n */\nexport function inputTemplate(props: InputTemplateProps): TemplateResult {\n  const inputType = props.type === 'password' && props.showPassword ? 'text' : props.type;\n\n  return html`\n    <div class=\"input-group ${props.error ? 'has-error' : ''} ${props.disabled ? 'is-disabled' : ''}\">\n\n      ${props.label ? html`\n        <label\n          class=\"input-label\"\n          for=\"${props.uuid}\"\n        >\n          ${props.label}\n          ${props.required ? html`<span class=\"input-required\" aria-hidden=\"true\">*</span>` : nothing}\n        </label>\n      ` : nothing}\n\n      <div class=\"input-wrapper\">\n        <slot name=\"prefix\"></slot>\n\n        <input\n          id=\"${props.uuid}\"\n          type=\"${inputType}\"\n          placeholder=\"${props.placeholder}\"\n          ?required=\"${props.required}\"\n          ?disabled=\"${props.disabled}\"\n          aria-invalid=\"${props.error}\"\n          aria-describedby=\"${props.error && props.errorMessage ? `${props.uuid}-error` : nothing}\"\n          .value=\"${props.value}\"\n          @input=\"${props.handleInput}\"\n        />\n\n        ${props.type === 'password' ? html`\n          <button\n            class=\"input-password-toggle\"\n            type=\"button\"\n            @click=\"${props.handleTogglePassword}\"\n            aria-label=\"${props.showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}\"\n          >\n            ${props.showPassword ? html`\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94\"/>\n                <path d=\"M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19\"/>\n                <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/>\n              </svg>\n            ` : html`\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/>\n                <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n              </svg>\n            `}\n          </button>\n        ` : nothing}\n\n        <slot name=\"suffix\"></slot>\n      </div>\n\n      ${props.error && props.errorMessage ? html`\n        <span class=\"input-error-message\" id=\"${props.uuid}-error\" role=\"alert\">\n          ${props.errorMessage}\n        </span>\n      ` : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAqBO,SAAS,cAAc,OAA2C;AACvE,QAAM,YAAY,MAAM,SAAS,cAAc,MAAM,eAAe,SAAS,MAAM;AAEnF,SAAO;AAAA,8BACqB,MAAM,QAAQ,cAAc,EAAE,IAAI,MAAM,WAAW,gBAAgB,EAAE;AAAA;AAAA,QAE3F,MAAM,QAAQ;AAAA;AAAA;AAAA,iBAGL,MAAM,IAAI;AAAA;AAAA,YAEf,MAAM,KAAK;AAAA,YACX,MAAM,WAAW,iEAAiE,OAAO;AAAA;AAAA,UAE3F,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMD,MAAM,IAAI;AAAA,kBACR,SAAS;AAAA,yBACF,MAAM,WAAW;AAAA,uBACnB,MAAM,QAAQ;AAAA,uBACd,MAAM,QAAQ;AAAA,0BACX,MAAM,KAAK;AAAA,8BACP,MAAM,SAAS,MAAM,eAAe,GAAG,MAAM,IAAI,WAAW,OAAO;AAAA,oBAC7E,MAAM,KAAK;AAAA,oBACX,MAAM,WAAW;AAAA;AAAA;AAAA,UAG3B,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA,sBAIhB,MAAM,oBAAoB;AAAA,0BACtB,MAAM,eAAe,uBAAuB,oBAAoB;AAAA;AAAA,cAE5E,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMnB;AAAA;AAAA;AAAA;AAAA;AAAA,aAKH;AAAA;AAAA,YAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKX,MAAM,SAAS,MAAM,eAAe;AAAA,gDACI,MAAM,IAAI;AAAA,YAC9C,MAAM,YAAY;AAAA;AAAA,UAEpB,OAAO;AAAA;AAAA;AAAA;AAIjB;"}

package/dist/index217.js

@@ -1,5 +1,35 @@
-const stepCss = '@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;flex:1;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.step-inner{display:flex;flex-direction:column;align-items:center;position:relative}.step-node{width:32px;height:32px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-elevated);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);position:relative;z-index:1;flex-shrink:0;transition:background var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out),color var(--duration-slow) var(--ease-out),box-shadow var(--duration-slow) var(--ease-out)}.step-icon{width:12px;height:12px;stroke:currentcolor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}.step-text{margin-top:var(--lib-space-sm);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--lib-space-xs)}.step-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);text-transform:uppercase;transition:color var(--duration-base) var(--ease-default)}.step-sub{font-family:var(--lib-font-body);font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-snug)}.step-connector{position:absolute;top:15px;left:calc(50% + 16px);width:calc(100% - 32px);height:1px;background:var(--border-default);transition:background var(--duration-slow) var(--ease-out);pointer-events:none}:host([status="active"]) .step-node{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);box-shadow:0 0 0 4px var(--color-washi-100)}:host([status="active"]) .step-label{color:var(--text-primary)}:host([status="completed"]) .step-node{background:var(--color-washi-700);border-color:var(--color-washi-700);color:var(--color-washi-50)}:host([status="completed"]) .step-label{color:var(--text-secondary)}:host([status="completed"]) .step-connector{background:var(--color-washi-700)}:host([status="error"]) .step-node{background:var(--color-error-subtle);border-color:var(--color-error);color:var(--color-error)}:host([status="error"]) .step-label{color:var(--color-error)}:host([size="sm"]) .step-node{width:24px;height:24px;font-size:9px}:host([size="sm"]) .step-connector{top:11px;left:calc(50% + 12px);width:calc(100% - 24px)}:host([size="sm"]) .step-label{font-size:9px}:host([size="lg"]) .step-node{width:40px;height:40px;font-size:var(--text-sm)}:host([size="lg"]) .step-connector{top:19px;left:calc(50% + 20px);width:calc(100% - 40px)}:host([variant="minimal"]) .step-node{width:24px;height:24px;border-radius:var(--radius-none);background:transparent;font-size:9px}:host([variant="minimal"]) .step-connector{top:11px;left:calc(50% + 12px);width:calc(100% - 24px)}:host([variant="minimal"][status="active"]) .step-node{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:var(--color-white);box-shadow:none}:host([variant="minimal"][status="active"]) .step-label{color:var(--color-kaki-500)}:host([variant="minimal"][status="completed"]) .step-node{background:transparent;border-color:var(--color-washi-700);color:var(--color-washi-700)}:host([variant="kintsugi"][status="completed"]) .step-node{background:var(--color-washi-900);border:none;color:var(--color-washi-200)}:host([variant="kintsugi"][status="completed"]) .step-node:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}:host([variant="kintsugi"][status="active"]) .step-node{background:var(--color-washi-950);border:none;color:var(--color-washi-200);box-shadow:0 0 0 4px #6d4d3e1a}:host([variant="kintsugi"][status="active"]) .step-node:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1.5px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:kintsugi-pulse 2.5s ease-in-out infinite}@keyframes kintsugi-pulse{0%,to{opacity:.7}50%{opacity:1}}:host([variant="kintsugi"][status="completed"]) .step-connector{background:linear-gradient(90deg,#66503f80,#866c534d)}:host([variant="kintsugi"]) .step-label{color:var(--color-washi-700)}:host([variant="kintsugi"][status="active"]) .step-label{color:var(--color-washi-100)}:host([variant="kintsugi"][status="completed"]) .step-label{color:var(--color-washi-500)}:host([variant="kintsugi"]) .step-node{background:var(--color-washi-950);border-color:var(--color-washi-800);color:var(--color-washi-700)}:host([variant="kintsugi"]) .step-connector{background:var(--color-washi-800)}:host([orientation="vertical"]){flex:none}:host([orientation="vertical"]) .step-inner{flex-direction:row;align-items:flex-start;gap:var(--lib-space-lg)}:host([orientation="vertical"]) .step-connector{position:absolute;left:15px;top:32px;bottom:0;width:1px;height:auto}:host([orientation="vertical"][size="sm"]) .step-connector{left:11px;top:24px}:host([orientation="vertical"][size="lg"]) .step-connector{left:19px;top:40px}.step-body{padding-bottom:var(--lib-space-xl);flex:1}.step-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);line-height:32px;transition:color var(--duration-base) var(--ease-default)}:host([orientation="vertical"][status="active"]) .step-title{color:var(--text-primary)}:host([orientation="vertical"][status="completed"]) .step-title{color:var(--text-secondary)}:host([orientation="vertical"][status="error"]) .step-title{color:var(--color-error)}.step-content{margin-top:var(--lib-space-sm);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:420px}:host([variant="brutal"]) .step-node{border-radius:0;background:var(--color-washi-50);border:2px solid var(--color-ink-100);color:var(--color-ink-100);box-shadow:var(--lib-shadow-brutal)}:host([variant="brutal"][status="active"]) .step-node{background:var(--color-ink-100);border-color:var(--color-ink-100);color:var(--color-washi-50);box-shadow:var(--lib-shadow-brutal)}:host([variant="brutal"][status="completed"]) .step-node{background:var(--color-ink-100);border-color:var(--color-ink-100);color:var(--color-washi-50);box-shadow:2px 2px 0 0 var(--lib-shibui-ink)}:host([variant="brutal"][status="error"]) .step-node{background:var(--color-washi-50);border-color:var(--color-error);color:var(--color-error);box-shadow:4px 4px 0 0 var(--color-error)}:host([variant="brutal"]) .step-connector{background:var(--color-ink-100);height:2px}:host([variant="brutal"][status="completed"]) .step-connector{background:var(--color-ink-100)}:host([variant="brutal"]) .step-label{color:var(--color-ink-100);letter-spacing:var(--tracking-widest)}:host([variant="brutal"][status="active"]) .step-label{color:var(--color-ink-100);font-weight:var(--weight-semibold)}:host([variant="brutal"][status="completed"]) .step-label{color:var(--text-secondary)}:host([variant="brutal"][status="error"]) .step-label{color:var(--color-error)}@media(prefers-reduced-motion:reduce){.step-node,.step-connector,.step-label{transition:none}:host([variant="kintsugi"][status="active"]) .step-node:after{animation:none}}}';
+import { nothing, html } from "lit";
+const DEFAULT_HEADING = {
+  default: "Default",
+  info: "Info",
+  warning: "Warning",
+  error: "Error",
+  success: "Success"
+};
+function alertTemplate(props) {
+  const displayHeading = props.heading || DEFAULT_HEADING[props.type];
+  return html`
+    <div class="alert" role="alert" aria-live="polite">
+
+      <div class="alert-content">
+        <p class="alert-title">${displayHeading}</p>
+        <div class="alert-body">
+          <slot></slot>
+        </div>
+      </div>
+
+      ${props.closable ? html`
+            <button
+              class="alert-close"
+              type="button"
+              aria-label="Cerrar alerta"
+              @click="${props.handleClose}"
+            >×</button>` : nothing}
+
+    </div>
+  `;
+}
 export {
-  stepCss as default
+  alertTemplate
 };
 //# sourceMappingURL=index217.js.map

package/dist/index217.js.map

@@ -1 +1 @@
-{"version":3,"file":"index217.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index217.js","sources":["../src/components/molecules/lib-alert/lib-alert.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { AlertTemplateProps, AlertType } from './lib-alert.types';\n\n/** Auto-generated heading per type if none is provided. */\nconst DEFAULT_HEADING: Record<AlertType, string> = {\n  default: 'Default',\n  info:    'Info',\n  warning: 'Warning',\n  error:   'Error',\n  success: 'Success',\n};\n\n/**\n * Template para lib-alert.\n * Estructura: borde izquierdo · [heading DM Mono] · slot (cuerpo) · [botón cerrar]\n */\nexport function alertTemplate(props: AlertTemplateProps): TemplateResult {\n  const displayHeading = props.heading || DEFAULT_HEADING[props.type];\n\n  return html`\n    <div class=\"alert\" role=\"alert\" aria-live=\"polite\">\n\n      <div class=\"alert-content\">\n        <p class=\"alert-title\">${displayHeading}</p>\n        <div class=\"alert-body\">\n          <slot></slot>\n        </div>\n      </div>\n\n      ${props.closable\n        ? html`\n            <button\n              class=\"alert-close\"\n              type=\"button\"\n              aria-label=\"Cerrar alerta\"\n              @click=\"${props.handleClose}\"\n            >×</button>`\n        : nothing}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,kBAA6C;AAAA,EACjD,SAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAMO,SAAS,cAAc,OAA2C;AACvE,QAAM,iBAAiB,MAAM,WAAW,gBAAgB,MAAM,IAAI;AAElE,SAAO;AAAA;AAAA;AAAA;AAAA,iCAIwB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMvC,MAAM,WACJ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKc,MAAM,WAAW;AAAA,2BAE/B,OAAO;AAAA;AAAA;AAAA;AAIjB;"}

package/dist/index218.js

@@ -1,88 +1,5 @@
-import { html, nothing } from "lit";
-const ICONS = {
-  star: {
-    regular: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M239.2,97.4A16.4,16.4,0,0,0,224.6,86l-59.4-4.1-22-55.5A16.4,16.4,0,0,0,128,16h0a16.4,16.4,0,0,0-15.2,10.4L90.8,82,31.4,86A16.5,16.5,0,0,0,16.8,97.4,16.8,16.8,0,0,0,22,115.5l45.4,38.4L52.5,212a16.4,16.4,0,0,0,6.4,17.3,16.7,16.7,0,0,0,18.2.5L128,198.8l51,31.1a16.1,16.1,0,0,0,8.5,2.4,16.5,16.5,0,0,0,9.7-3.1A16.4,16.4,0,0,0,203.5,212l-14.9-58.1L234,115.5A16.8,16.8,0,0,0,239.2,97.4Zm-15.4,5.9-45.4,38.4a8,8,0,0,0-2.6,8.2l14.9,58.1a.6.6,0,0,1-.3.7c-.1.1-.3.2-.5.1l-51-31.2a8,8,0,0,0-8.4,0l-51,31.1-.4-.1a.6.6,0,0,1-.3-.7l14.9-58.1a8,8,0,0,0-2.6-8.2L31.2,103.3l-.1-.4c.1-.3.2-.5.5-.6l59.3-4.1a8,8,0,0,0,6.8-5.1L119.7,38a.8.8,0,0,1,.6-.5h.2a.8.8,0,0,1,.6.5l21.9,55.2a8,8,0,0,0,6.8,5.1l59.3,4.1c.3.1.4.3.5.6A.7.7,0,0,1,223.8,103.3Z"/>
-    </svg>`,
-    fill: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34l13.49-58.54L21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"/>
-    </svg>`
-  },
-  heart: {
-    regular: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M178,32c-20.65,0-38.73,8.88-50,23.89C116.73,40.88,98.65,32,78,32A62.07,62.07,0,0,0,16,94c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,220.66,240,164,240,94A62.07,62.07,0,0,0,178,32ZM128,206.8C109.74,196.16,32,147.69,32,94A46.06,46.06,0,0,1,78,48c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,147.61,146.24,196.15,128,206.8Z"/>
-    </svg>`,
-    fill: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M240,94c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,220.66,16,164,16,94A62.07,62.07,0,0,1,78,32c20.65,0,38.73,8.88,50,23.89C139.27,40.88,157.35,32,178,32A62.07,62.07,0,0,1,240,94Z"/>
-    </svg>`
-  },
-  diamond: {
-    regular: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M235.32,104,211.31,56a16,16,0,0,0-14.31-8.05H59A16,16,0,0,0,44.69,56L20.68,104a16,16,0,0,0,2.62,18.51l96,96a16,16,0,0,0,17.4,3.37,15.93,15.93,0,0,0,5.26-3.38l96-96A16,16,0,0,0,235.32,104ZM59,64H197l21.33,42.67L128,213.32,37.67,106.67Z"/>
-    </svg>`,
-    fill: html`<svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M238,106.38,214,58.34A16.09,16.09,0,0,0,199.69,50H56.31A16.09,16.09,0,0,0,42,58.34L18,106.38a16,16,0,0,0,2.69,18.76l96,96a16,16,0,0,0,22.62,0l96-96A16,16,0,0,0,238,106.38Z"/>
-    </svg>`
-  }
-};
-function getIcon(name) {
-  return ICONS[name] ?? ICONS["star"];
-}
-function ratingTemplate(ctx) {
-  const { value, max, icon, readonly, showCount, count } = ctx;
-  const icons = getIcon(icon);
-  const display = ctx._hoverValue || value;
-  const items = Array.from({ length: max }, (_, i) => {
-    const pos = i + 1;
-    const isHalf = readonly && !Number.isInteger(value) && pos === Math.ceil(value);
-    const isFilled = pos <= Math.floor(display);
-    const isPreview = !readonly && pos > Math.floor(display) && pos <= ctx._hoverValue;
-    if (isHalf) {
-      return html`
-        <span
-          class="rt-item rt-item-half"
-          part="item item-half"
-          aria-hidden="true"
-        >
-          ${icons == null ? void 0 : icons.regular}
-          <span class="rt-half-fill">${icons == null ? void 0 : icons.fill}</span>
-        </span>
-      `;
-    }
-    return html`
-      <span
-        class="rt-item ${isFilled ? "is-filled" : ""} ${isPreview ? "is-preview" : ""}"
-        part="item${isFilled ? " item-filled" : ""}"
-        role="${readonly ? nothing : "button"}"
-        aria-label="${readonly ? nothing : `Valorar ${pos} de ${max}`}"
-        tabindex="${readonly ? nothing : "0"}"
-        @mouseenter="${() => ctx._onEnter(pos)}"
-        @click="${() => ctx._onClick(pos)}"
-        @keydown="${(e) => ctx._onKeyItem(e, pos)}"
-      >
-        ${isFilled || isPreview ? icons == null ? void 0 : icons.fill : icons == null ? void 0 : icons.regular}
-      </span>
-    `;
-  });
-  const numDisplay = showCount ? html`
-        <span class="rt-num" part="num">
-          <strong>${value > 0 ? value.toFixed(1) : "—"}</strong>
-          ${count != null ? html`<span style="margin-left:2px;">(${count})</span>` : nothing}
-        </span>` : nothing;
-  return html`
-    <div
-      class="rt"
-      part="root"
-      role="${readonly ? "img" : "group"}"
-      aria-label="${readonly ? `Valoración: ${value} de ${max}` : `Valorar de 1 a ${max}`}"
-      @mouseleave="${() => ctx._onLeave()}"
-    >
-      ${items}
-    </div>
-    ${numDisplay}
-  `;
-}
+const alertCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.alert{padding:var(--lib-space-md) var(--lib-space-lg);border-left:2px solid;display:flex;gap:var(--lib-space-md);align-items:flex-start;width:100%;transition:opacity var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-default)}.alert-content{flex:1;min-width:0}.alert-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;margin-bottom:var(--lib-space-xs);line-height:var(--leading-snug)}.alert-body{font-family:var(--lib-font-body);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.alert-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:transparent;border:none;cursor:pointer;padding:0;opacity:.5;color:inherit;transition:opacity var(--duration-fast) var(--ease-default);font-size:16px;line-height:1;font-family:var(--lib-font-mono)}.alert-close:hover{opacity:1}:host([type="default"]) .alert,.alert{background:var(--bg-surface);border-color:var(--border-strong)}:host([type="default"]) .alert-title{color:var(--text-secondary)}:host([type="default"]) .alert-body{color:var(--text-secondary)}:host([type="info"]) .alert{background:var(--color-celadon-50);border-color:var(--color-celadon-400)}:host([type="info"]) .alert-title{color:var(--color-celadon-600)}:host([type="info"]) .alert-body{color:var(--color-celadon-500)}:host([type="warning"]) .alert{background:#fffbf0;border-color:var(--color-warning)}:host([type="warning"]) .alert-title{color:var(--color-warning)}:host([type="warning"]) .alert-body{color:#6b5010}:host([type="error"]) .alert{background:#fff8f7;border-color:var(--color-error)}:host([type="error"]) .alert-title{color:var(--color-error)}:host([type="error"]) .alert-body{color:#6b2015}:host([type="success"]) .alert{background:#f5faf6;border-color:var(--color-success)}:host([type="success"]) .alert-title{color:var(--color-success)}:host([type="success"]) .alert-body{color:#1e4a2a}:host([glass]) .alert{background:var(--lib-glass-bg);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);border:var(--lib-glass-border);border-left-width:2px;box-shadow:var(--lib-glass-shadow);position:relative;overflow:hidden}:host([glass]) .alert:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--lib-glass-shine);pointer-events:none}:host([glass]) .alert-title,:host([glass]) .alert-body{color:var(--lib-glass-text);text-shadow:var(--lib-glass-text-shadow);position:relative;z-index:1}:host([glass]) .alert-close{color:var(--lib-glass-text);position:relative;z-index:1}}';
 export {
-  ratingTemplate
+  alertCss as default
 };
 //# sourceMappingURL=index218.js.map

package/dist/index218.js.map

@@ -1 +1 @@
-{"version":3,"file":"index218.js","sources":["../src/components/atoms/rating/lib-rating.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibRating } from './lib-rating.component';\n\n/* ══════════════════════════════════════════════════════════\n   SVGs Phosphor-style — regular (outline) y fill\n   ══════════════════════════════════════════════════════════ */\n\nconst ICONS: Record<string, { regular: TemplateResult; fill: TemplateResult }> = {\n  star: {\n    regular: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M239.2,97.4A16.4,16.4,0,0,0,224.6,86l-59.4-4.1-22-55.5A16.4,16.4,0,0,0,128,16h0a16.4,16.4,0,0,0-15.2,10.4L90.8,82,31.4,86A16.5,16.5,0,0,0,16.8,97.4,16.8,16.8,0,0,0,22,115.5l45.4,38.4L52.5,212a16.4,16.4,0,0,0,6.4,17.3,16.7,16.7,0,0,0,18.2.5L128,198.8l51,31.1a16.1,16.1,0,0,0,8.5,2.4,16.5,16.5,0,0,0,9.7-3.1A16.4,16.4,0,0,0,203.5,212l-14.9-58.1L234,115.5A16.8,16.8,0,0,0,239.2,97.4Zm-15.4,5.9-45.4,38.4a8,8,0,0,0-2.6,8.2l14.9,58.1a.6.6,0,0,1-.3.7c-.1.1-.3.2-.5.1l-51-31.2a8,8,0,0,0-8.4,0l-51,31.1-.4-.1a.6.6,0,0,1-.3-.7l14.9-58.1a8,8,0,0,0-2.6-8.2L31.2,103.3l-.1-.4c.1-.3.2-.5.5-.6l59.3-4.1a8,8,0,0,0,6.8-5.1L119.7,38a.8.8,0,0,1,.6-.5h.2a.8.8,0,0,1,.6.5l21.9,55.2a8,8,0,0,0,6.8,5.1l59.3,4.1c.3.1.4.3.5.6A.7.7,0,0,1,223.8,103.3Z\"/>\n    </svg>`,\n    fill: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34l13.49-58.54L21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z\"/>\n    </svg>`,\n  },\n  heart: {\n    regular: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M178,32c-20.65,0-38.73,8.88-50,23.89C116.73,40.88,98.65,32,78,32A62.07,62.07,0,0,0,16,94c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,220.66,240,164,240,94A62.07,62.07,0,0,0,178,32ZM128,206.8C109.74,196.16,32,147.69,32,94A46.06,46.06,0,0,1,78,48c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,147.61,146.24,196.15,128,206.8Z\"/>\n    </svg>`,\n    fill: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M240,94c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,220.66,16,164,16,94A62.07,62.07,0,0,1,78,32c20.65,0,38.73,8.88,50,23.89C139.27,40.88,157.35,32,178,32A62.07,62.07,0,0,1,240,94Z\"/>\n    </svg>`,\n  },\n  diamond: {\n    regular: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M235.32,104,211.31,56a16,16,0,0,0-14.31-8.05H59A16,16,0,0,0,44.69,56L20.68,104a16,16,0,0,0,2.62,18.51l96,96a16,16,0,0,0,17.4,3.37,15.93,15.93,0,0,0,5.26-3.38l96-96A16,16,0,0,0,235.32,104ZM59,64H197l21.33,42.67L128,213.32,37.67,106.67Z\"/>\n    </svg>`,\n    fill: html`<svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=\"M238,106.38,214,58.34A16.09,16.09,0,0,0,199.69,50H56.31A16.09,16.09,0,0,0,42,58.34L18,106.38a16,16,0,0,0,2.69,18.76l96,96a16,16,0,0,0,22.62,0l96-96A16,16,0,0,0,238,106.38Z\"/>\n    </svg>`,\n  },\n};\n\n/* ── Fallback al icono estrella si el icon prop no coincide ── */\nfunction getIcon(name: string): { regular: TemplateResult; fill: TemplateResult } | undefined {\n  return ICONS[name] ?? ICONS['star'];\n}\n\n/* ══════════════════════════════════════════════════════════\n   Template principal\n   ══════════════════════════════════════════════════════════ */\nexport function ratingTemplate(ctx: LibRating): TemplateResult {\n  const { value, max, icon, readonly, showCount, count } = ctx;\n  const icons = getIcon(icon);\n  const display = ctx._hoverValue || value;\n\n  /* Secuencia de items */\n  const items = Array.from({ length: max }, (_, i) => {\n    const pos = i + 1; // 1-indexed\n\n    /* Half-star: solo read-only, cuando value tiene .5 */\n    const isHalf = readonly && !Number.isInteger(value) && pos === Math.ceil(value);\n    const isFilled = pos <= Math.floor(display);\n    const isPreview = !readonly && pos > Math.floor(display) && pos <= ctx._hoverValue;\n\n    if (isHalf) {\n      return html`\n        <span\n          class=\"rt-item rt-item-half\"\n          part=\"item item-half\"\n          aria-hidden=\"true\"\n        >\n          ${icons?.regular}\n          <span class=\"rt-half-fill\">${icons?.fill}</span>\n        </span>\n      `;\n    }\n\n    return html`\n      <span\n        class=\"rt-item ${isFilled ? 'is-filled' : ''} ${isPreview ? 'is-preview' : ''}\"\n        part=\"item${isFilled ? ' item-filled' : ''}\"\n        role=\"${readonly ? nothing : 'button'}\"\n        aria-label=\"${readonly ? nothing : `Valorar ${pos} de ${max}`}\"\n        tabindex=\"${readonly ? nothing : '0'}\"\n        @mouseenter=\"${(): void => ctx._onEnter(pos)}\"\n        @click=\"${(): void => ctx._onClick(pos)}\"\n        @keydown=\"${(e: KeyboardEvent): void => ctx._onKeyItem(e, pos)}\"\n      >\n        ${isFilled || isPreview ? icons?.fill : icons?.regular}\n      </span>\n    `;\n  });\n\n  /* Numeric display */\n  const numDisplay = showCount\n    ? html`\n        <span class=\"rt-num\" part=\"num\">\n          <strong>${value > 0 ? value.toFixed(1) : '—'}</strong>\n          ${count != null ? html`<span style=\"margin-left:2px;\">(${count})</span>` : nothing}\n        </span>`\n    : nothing;\n\n  return html`\n    <div\n      class=\"rt\"\n      part=\"root\"\n      role=\"${readonly ? 'img' : 'group'}\"\n      aria-label=\"${readonly\n        ? `Valoración: ${value} de ${max}`\n        : `Valorar de 1 a ${max}`}\"\n      @mouseleave=\"${(): void => ctx._onLeave()}\"\n    >\n      ${items}\n    </div>\n    ${numDisplay}\n  `;\n}"],"names":[],"mappings":";AAOA,MAAM,QAA2E;AAAA,EAC/E,MAAM;AAAA,IACJ,SAAS;AAAA;AAAA;AAAA,IAGT,MAAM;AAAA;AAAA;AAAA,EAAA;AAAA,EAIR,OAAO;AAAA,IACL,SAAS;AAAA;AAAA;AAAA,IAGT,MAAM;AAAA;AAAA;AAAA,EAAA;AAAA,EAIR,SAAS;AAAA,IACP,SAAS;AAAA;AAAA;AAAA,IAGT,MAAM;AAAA;AAAA;AAAA,EAAA;AAIV;AAGA,SAAS,QAAQ,MAA6E;AAC5F,SAAO,MAAM,IAAI,KAAK,MAAM,MAAM;AACpC;AAKO,SAAS,eAAe,KAAgC;AAC7D,QAAM,EAAE,OAAO,KAAK,MAAM,UAAU,WAAW,UAAU;AACzD,QAAM,QAAQ,QAAQ,IAAI;AAC1B,QAAM,UAAU,IAAI,eAAe;AAGnC,QAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,IAAA,GAAO,CAAC,GAAG,MAAM;AAClD,UAAM,MAAM,IAAI;AAGhB,UAAM,SAAS,YAAY,CAAC,OAAO,UAAU,KAAK,KAAK,QAAQ,KAAK,KAAK,KAAK;AAC9E,UAAM,WAAW,OAAO,KAAK,MAAM,OAAO;AAC1C,UAAM,YAAY,CAAC,YAAY,MAAM,KAAK,MAAM,OAAO,KAAK,OAAO,IAAI;AAEvE,QAAI,QAAQ;AACV,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMD,+BAAO,OAAO;AAAA,uCACa,+BAAO,IAAI;AAAA;AAAA;AAAA,IAG9C;AAEA,WAAO;AAAA;AAAA,yBAEc,WAAW,cAAc,EAAE,IAAI,YAAY,eAAe,EAAE;AAAA,oBACjE,WAAW,iBAAiB,EAAE;AAAA,gBAClC,WAAW,UAAU,QAAQ;AAAA,sBACvB,WAAW,UAAU,WAAW,GAAG,OAAO,GAAG,EAAE;AAAA,oBACjD,WAAW,UAAU,GAAG;AAAA,uBACrB,MAAY,IAAI,SAAS,GAAG,CAAC;AAAA,kBAClC,MAAY,IAAI,SAAS,GAAG,CAAC;AAAA,oBAC3B,CAAC,MAA2B,IAAI,WAAW,GAAG,GAAG,CAAC;AAAA;AAAA,UAE5D,YAAY,YAAY,+BAAO,OAAO,+BAAO,OAAO;AAAA;AAAA;AAAA,EAG5D,CAAC;AAGD,QAAM,aAAa,YACf;AAAA;AAAA,oBAEc,QAAQ,IAAI,MAAM,QAAQ,CAAC,IAAI,GAAG;AAAA,YAC1C,SAAS,OAAO,uCAAuC,KAAK,aAAa,OAAO;AAAA,mBAEtF;AAEJ,SAAO;AAAA;AAAA;AAAA;AAAA,cAIK,WAAW,QAAQ,OAAO;AAAA,oBACpB,WACV,eAAe,KAAK,OAAO,GAAG,KAC9B,kBAAkB,GAAG,EAAE;AAAA,qBACZ,MAAY,IAAI,UAAU;AAAA;AAAA,QAEvC,KAAK;AAAA;AAAA,MAEP,UAAU;AAAA;AAEhB;"}
+{"version":3,"file":"index218.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index219.js

@@ -1,5 +1,5 @@
-const ratingCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:center;gap:var(--lib-space-sm);-webkit-user-select:none;user-select:none;--_gold: #C4922A;--_gold-light: #F0D080;--_gold-pale: #FAF0D0}*,*:before,*:after{box-sizing:border-box}}@layer components{@keyframes rt-pop{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}.rt{display:inline-flex;align-items:center;gap:3px;position:relative}.rt-item{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--color-washi-300);transition:color var(--duration-fast) var(--ease-default),transform var(--duration-base) var(--ease-bounce);line-height:1;flex-shrink:0}.rt-item svg{display:block;width:1em;height:1em}.rt-item:hover{transform:scale(1.15)}.rt-item.is-filled{color:var(--_gold)}.rt-item.is-preview{color:var(--_gold-light)}.rt-item.is-pop{animation:rt-pop .3s var(--ease-bounce) forwards}:host([readonly]) .rt-item,:host([readonly]) .rt-item:hover{cursor:default;pointer-events:none;transform:none}:host([disabled]) .rt{opacity:.4;pointer-events:none}:host([size="xs"]) .rt{gap:1px;font-size:12px}:host([size="sm"]) .rt{gap:2px;font-size:16px}:host([size="md"]) .rt,:host(:not([size])) .rt{gap:3px;font-size:22px}:host([size="lg"]) .rt{gap:4px;font-size:30px}:host([size="xl"]) .rt{gap:5px;font-size:40px}:host([color="kaki"]) .rt-item.is-filled{color:var(--color-kaki-500)}:host([color="kaki"]) .rt-item.is-preview{color:var(--color-kaki-400);opacity:.6}:host([color="washi"]) .rt-item.is-filled{color:var(--color-washi-900)}:host([color="washi"]) .rt-item.is-preview{color:var(--color-washi-600);opacity:.5}:host([color="celadon"]) .rt-item.is-filled{color:var(--color-celadon-500)}:host([color="celadon"]) .rt-item.is-preview{color:var(--color-celadon-400);opacity:.45}.rt-item-half{position:relative}.rt-half-fill{position:absolute;left:0;top:0;width:50%;overflow:hidden;color:var(--_gold);display:flex;align-items:center;pointer-events:none}.rt-half-fill svg{width:1em;height:1em;flex-shrink:0}:host([color="kaki"]) .rt-half-fill{color:var(--color-kaki-500)}:host([color="washi"]) .rt-half-fill{color:var(--color-washi-900)}:host([color="celadon"]) .rt-half-fill{color:var(--color-celadon-500)}.rt-num{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap;line-height:1}.rt-num strong{font-family:var(--lib-font-display);font-weight:300;letter-spacing:var(--tracking-tight);color:var(--text-primary)}@media(prefers-reduced-motion:reduce){.rt-item{transition:none}.rt-item.is-pop{animation:none}}}';
+const modalCss = "@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:contents}.mo-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal, 500);background:#120e0aa6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--lib-space-lg);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity var(--duration-slow) var(--ease-out)}:host([open]) .mo-backdrop{opacity:1;pointer-events:auto}.mo-panel-wrap{position:relative;width:100%;max-width:560px;max-height:calc(100vh - var(--lib-space-lg) * 2);display:flex;flex-direction:column;transform:scale(.95) translateY(8px);transition:transform var(--duration-slow) var(--ease-out)}:host([open]) .mo-panel-wrap{transform:scale(1) translateY(0)}.mo-panel-wrap.mo-slide-up{transform:translateY(40px)}:host([open]) .mo-panel-wrap.mo-slide-up{transform:translateY(0)}.mo-panel-wrap.mo-slide-down{transform:translateY(-40px)}:host([open]) .mo-panel-wrap.mo-slide-down{transform:translateY(0)}.mo-panel-wrap.mo-xs{max-width:280px}.mo-panel-wrap.mo-sm{max-width:420px}.mo-panel-wrap.mo-lg{max-width:720px}.mo-panel-wrap.mo-xl{max-width:920px}.mo-panel-wrap.mo-full{max-width:100vw;max-height:100vh;height:100vh;margin:0}.mo-panel-wrap.mo-full .mo-panel{max-height:100vh;height:100vh;border:none}.mo-panel{background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:0 20px 60px #1a140e2e,0 4px 16px #1a140e1a;display:flex;flex-direction:column;max-height:calc(100vh - var(--lib-space-lg) * 2);overflow:hidden}.mo-panel.is-editorial .mo-header{border-bottom:none;padding-bottom:0}.mo-panel.is-editorial .mo-title{font-size:2.5rem;letter-spacing:var(--tracking-tight)}.mo-panel.is-editorial .mo-body{padding-top:var(--lib-space-sm)}.mo-panel.is-danger .mo-header{border-bottom-color:#f5ddd9;background:#f5ddd9}.mo-panel.is-danger .mo-title{color:var(--color-error)}.mo-panel.is-danger .mo-footer{border-top-color:#f5ddd9;background:#fef5f3}.mo-header{display:flex;align-items:flex-start;gap:var(--lib-space-md);padding:var(--lib-space-lg) var(--lib-space-lg) var(--lib-space-md);border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-elevated)}.mo-header-icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-muted)}.mo-header-icon.is-kaki{background:var(--color-kaki-50);border-color:var(--color-kaki-100);color:var(--color-kaki-500)}.mo-header-icon.is-celadon{background:var(--color-celadon-50);border-color:var(--color-celadon-100);color:var(--color-celadon-500)}.mo-header-icon.is-error{background:#f5ddd9;border-color:#f5ddd9;color:var(--color-error)}.mo-header-icon.is-info{background:#d6e8f5;border-color:#d6e8f5;color:#1a4a6e}.mo-header-text{flex:1;min-width:0}.mo-title{font-family:var(--lib-font-display);font-size:var(--text-2xl);font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--text-primary)}.mo-subtitle{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted);margin-top:var(--lib-space-xs)}.mo-close{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;line-height:1;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default);margin-top:-2px;margin-right:-4px}.mo-close:hover{background:var(--bg-surface);color:var(--text-primary)}.mo-body{flex:1;overflow-y:auto;padding:var(--lib-space-lg);scrollbar-width:thin;scrollbar-color:var(--color-washi-300) transparent}.mo-body::-webkit-scrollbar{width:4px}.mo-body::-webkit-scrollbar-track{background:transparent}.mo-body::-webkit-scrollbar-thumb{background:var(--color-washi-300)}.mo-footer{display:flex;align-items:center;gap:var(--lib-space-md);padding:var(--lib-space-md) var(--lib-space-lg);border-top:1px solid var(--border-subtle);flex-shrink:0;background:var(--bg-surface)}.mo-footer-info{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-right:auto}.mo-panel-wrap.mo-dark .mo-panel{background:#0c0604;border-color:#1e130e;box-shadow:0 20px 60px #0000008c,0 4px 16px #0000004d}.mo-panel-wrap.mo-dark .mo-header{background:#0c0604;border-color:#190f0a}.mo-panel-wrap.mo-dark .mo-title{color:#c8bbb2}.mo-panel-wrap.mo-dark .mo-subtitle{color:#312620}.mo-panel-wrap.mo-dark .mo-close{color:#362b25}.mo-panel-wrap.mo-dark .mo-close:hover{background:#190f0a;color:#998c84}.mo-panel-wrap.mo-dark .mo-footer{background:#060201;border-color:#190f0a}.mo-panel-wrap.mo-dark .mo-footer-info{color:#312620}.mo-panel-wrap.mo-dark .mo-header-icon{background:#190f0a;border-color:#231813;color:#433831}@media(max-width:768px){.mo-backdrop{padding:var(--lib-space-md)}.mo-panel-wrap{max-height:calc(100vh - var(--lib-space-md) * 2)}}}";
 export {
-  ratingCss as default
+  modalCss as default
 };
 //# sourceMappingURL=index219.js.map

package/dist/index22.js

@@ -1,8 +1,8 @@
-import { unsafeCSS, css, LitElement, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import { getIcon } from "./index3.js";
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { renderDisplayHeading } from "./index302.js";
+import componentCss from "./index303.js";
 import sharedTokens from "./index196.js";
-import iconStyles from "./index231.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,65 +13,58 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibIcon = class extends LitElement {
+let LibDisplayHeading = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.name = "";
+    this.line1 = "";
+    this.line2Prefix = "";
+    this.accent = "";
+    this.description = "";
+    this.surface = "light";
     this.size = "md";
-    this.variant = "default";
-    this._svgContent = "";
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("name")) {
-      this._loadIcon();
-    }
-  }
-  // 4. Buscamos el SVG en tu registro y lo guardamos en el estado
-  //TODO: Implementar nominale vs. generico
-  _loadIcon() {
-    const iconNominale = getIcon(this.name);
-    console.log(iconNominale);
-    if (iconNominale) {
-      this._svgContent = iconNominale ?? "";
-      this.requestUpdate();
-    } else {
-      this._svgContent = "";
-    }
+    this.tag = "h2";
+    this.centered = false;
+    this._animate = false;
   }
   render() {
-    const sizeVar = `var(--lib-font-size-${this.size})`;
-    const variantClass = this.variant !== "default" ? `variant-${this.variant}` : "";
-    return html`
-      <div
-        class="icon-wrapper ${variantClass}"
-        style="--lib-icon-size: ${sizeVar}"
-        aria-hidden="true"
-        .innerHTML="${this._svgContent}"
-      >
-      </div>
-    `;
+    return renderDisplayHeading(this);
   }
 };
-LibIcon.styles = [
+LibDisplayHeading.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(iconStyles)}`
+  css`${unsafeCSS(componentCss)}`
 ];
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibIcon.prototype, "name", 2);
+  property({ type: String })
+], LibDisplayHeading.prototype, "line1", 2);
+__decorateClass([
+  property({ type: String, attribute: "line2-prefix" })
+], LibDisplayHeading.prototype, "line2Prefix", 2);
 __decorateClass([
   property({ type: String })
-], LibIcon.prototype, "size", 2);
+], LibDisplayHeading.prototype, "accent", 2);
 __decorateClass([
   property({ type: String })
-], LibIcon.prototype, "variant", 2);
+], LibDisplayHeading.prototype, "description", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibDisplayHeading.prototype, "surface", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibDisplayHeading.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibDisplayHeading.prototype, "tag", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibDisplayHeading.prototype, "centered", 2);
 __decorateClass([
-  state()
-], LibIcon.prototype, "_svgContent", 2);
-LibIcon = __decorateClass([
-  customElement("lib-icon")
-], LibIcon);
+  property({ type: Boolean, reflect: true })
+], LibDisplayHeading.prototype, "_animate", 2);
+LibDisplayHeading = __decorateClass([
+  customElement("lib-display-heading")
+], LibDisplayHeading);
 export {
-  LibIcon
+  LibDisplayHeading
 };
 //# sourceMappingURL=index22.js.map

package/dist/index22.js.map

@@ -1 +1 @@
-{"version":3,"file":"index22.js","sources":["../src/components/atoms/icon/lib-icon.component.ts"],"sourcesContent":["import { LitElement, html, css, unsafeCSS, TemplateResult } from 'lit';\n// 1. Añadimos 'state' a las importaciones de lit/decorators\nimport { customElement, property, state } from 'lit/decorators.js'; \n//import { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { getIcon/*, ICON_REGISTRY*/ } from '../../../shared/icons/icon-registry';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport iconStyles from './lib-icon.css?inline';\n\n@customElement('lib-icon')\nexport class LibIcon extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(iconStyles)}`,\n  ];\n\n  @property({ type: String, reflect: true }) name: string = '';\n  @property({ type: String }) size: string = 'md';\n  @property({ type: String }) variant: string = 'default';\n\n  // 2. DECLARAMOS EL ESTADO INTERNO (Esta es la pieza que faltaba)\n  @state() private _svgContent: string = '';\n\n  override willUpdate(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('name')) {\n      this._loadIcon();\n    }\n  }\n\n  // 4. Buscamos el SVG en tu registro y lo guardamos en el estado\n  //TODO: Implementar nominale vs. generico\n  private _loadIcon(): void {\n    //const icon = ICON_REGISTRY[this.name];\n    const iconNominale = getIcon(this.name);\n    console.log(iconNominale);\n    if (iconNominale) {\n      this._svgContent = iconNominale ?? '';\n      this.requestUpdate();\n    } else {\n      this._svgContent = ''; // Si no existe, limpiamos\n      //console.warn(`Icono \"${this.name}\" no encontrado.`);\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const sizeVar: string = `var(--lib-font-size-${this.size})`;\n    const variantClass: string = this.variant !== 'default' ? `variant-${this.variant}` : '';\n    \n\n    return html`\n      <div\n        class=\"icon-wrapper ${variantClass}\"\n        style=\"--lib-icon-size: ${sizeVar}\"\n        aria-hidden=\"true\"\n        .innerHTML=\"${this._svgContent}\"\n      >\n      </div>\n    `;\n  }\n}\n\n//        ${this._svgContent ? unsafeSVG(this._svgContent) : html`<span></span>`}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AASO,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAMsC,SAAA,OAAe;AAC9B,SAAA,OAAe;AACf,SAAA,UAAkB;AAGrC,SAAQ,cAAsB;AAAA,EAAA;AAAA,EAE9B,WAAW,mBAA+C;AACjE,QAAI,kBAAkB,IAAI,MAAM,GAAG;AACjC,WAAK,UAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA;AAAA,EAIQ,YAAkB;AAExB,UAAM,eAAe,QAAQ,KAAK,IAAI;AACtC,YAAQ,IAAI,YAAY;AACxB,QAAI,cAAc;AAChB,WAAK,cAAc,gBAAgB;AACnC,WAAK,cAAA;AAAA,IACP,OAAO;AACL,WAAK,cAAc;AAAA,IAErB;AAAA,EACF;AAAA,EAEmB,SAAyB;AAC1C,UAAM,UAAkB,uBAAuB,KAAK,IAAI;AACxD,UAAM,eAAuB,KAAK,YAAY,YAAY,WAAW,KAAK,OAAO,KAAK;AAGtF,WAAO;AAAA;AAAA,8BAEmB,YAAY;AAAA,kCACR,OAAO;AAAA;AAAA,sBAEnB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpC;AACF;AAjDa,QACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,UAAU,CAAC;AAC7B;AAE2C,gBAAA;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAN9B,QAMgC,WAAA,QAAA,CAAA;AACf,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,QAOiB,WAAA,QAAA,CAAA;AACA,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,QAQiB,WAAA,WAAA,CAAA;AAGX,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAXI,QAWM,WAAA,eAAA,CAAA;AAXN,UAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,OAAA;"}
+{"version":3,"file":"index22.js","sources":["../src/components/atoms/display-heading/lib-display-heading.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { renderDisplayHeading } from './lib-display-heading.html';\nimport type {\n  DisplayHeadingSurface,\n  DisplayHeadingSize,\n  DisplayHeadingTag,\n} from './lib-display-heading.types';\nimport componentCss from './lib-display-heading.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * `<lib-display-heading>` — Titular de display editorial.\n *\n * Heading en Cormorant Garamond con peso 300 y acento itálico en kaki.\n * Patrón recurrente del sistema: primera línea normal + segunda línea con\n * texto itálico en `--color-kaki-400`. Acepta un `<lib-eyebrow>` por slot.\n *\n * @tag lib-display-heading\n *\n * @attr {string} line1         - Primera línea del titular.\n * @attr {string} line2-prefix  - Texto antes del acento en la segunda línea.\n * @attr {string} accent        - Texto en itálica kaki (acento).\n * @attr {string} description   - Párrafo de descripción (alternativa al slot).\n * @attr {'dark'|'light'|'washi'} surface - Superficie sobre la que se muestra.\n * @attr {'sm'|'md'|'lg'}       size    - Tamaño tipográfico fluido.\n * @attr {'h1'|'h2'|'h3'|'h4'} tag     - Tag semántico del heading.\n * @attr {boolean}              centered - Centra el bloque.\n * @attr {boolean}              animate  - Activa la animación de entrada fade-up.\n *\n * @slot eyebrow     - Acepta un `<lib-eyebrow>` como prefijo.\n * @slot description - Descripción como rich content (alternativa a `description`).\n *\n * @csspart wrapper     - Div contenedor externo.\n * @csspart heading     - El elemento h1–h4.\n * @csspart description - El párrafo de descripción.\n *\n * @example\n * <!-- Básico -->\n * <lib-display-heading\n *   line1=\"Todo lo que\"\n *   line2-prefix=\"necesitas,\"\n *   accent=\"nada más\"\n *   surface=\"dark\"\n * ></lib-display-heading>\n *\n * <!-- Con eyebrow y descripción -->\n * <lib-display-heading\n *   line1=\"La belleza\"\n *   line2-prefix=\"de lo\"\n *   accent=\"austero\"\n *   surface=\"dark\"\n *   size=\"lg\"\n *   description=\"66 componentes sin dependencias.\"\n * >\n *   <lib-eyebrow slot=\"eyebrow\" effect=\"kintsugi\" size=\"lg\">\n *     Design System · v0.1.0\n *   </lib-eyebrow>\n * </lib-display-heading>\n */\n@customElement('lib-display-heading')\nexport class LibDisplayHeading extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /** Primera línea del titular */\n  @property({ type: String })\n  line1 = '';\n\n  /** Texto antes del acento en la segunda línea */\n  @property({ type: String, attribute: 'line2-prefix' })\n  line2Prefix = '';\n\n  /** Texto en itálica kaki */\n  @property({ type: String })\n  accent = '';\n\n  /** Párrafo de descripción inline */\n  @property({ type: String })\n  description = '';\n\n  /** Superficie sobre la que aparece */\n  @property({ type: String, reflect: true })\n  surface: DisplayHeadingSurface = 'light';\n\n  /** Tamaño tipográfico fluido */\n  @property({ type: String, reflect: true })\n  size: DisplayHeadingSize = 'md';\n\n  /** Tag semántico del heading */\n  @property({ type: String, reflect: true })\n  tag: DisplayHeadingTag = 'h2';\n\n  /** Centra el bloque */\n  @property({ type: Boolean, reflect: true })\n  centered = false;\n\n  /** Activa animación de entrada */\n  @property({ type: Boolean, reflect: true })\n  _animate = false;\n\n  protected override render(): TemplateResult {\n    return renderDisplayHeading(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-display-heading': LibDisplayHeading;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6DO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,QAAQ;AAIR,SAAA,cAAc;AAId,SAAA,SAAS;AAIT,SAAA,cAAc;AAId,SAAA,UAAiC;AAIjC,SAAA,OAA2B;AAI3B,SAAA,MAAyB;AAIzB,SAAA,WAAW;AAIX,SAAA,WAAW;AAAA,EAAA;AAAA,EAEQ,SAAyB;AAC1C,WAAO,qBAAqB,IAAI;AAAA,EAClC;AACF;AA9Ca,kBAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,kBASX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB;AAAA,GAZ1C,kBAaX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,kBAiBX,WAAA,UAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApBf,kBAqBX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAxB9B,kBAyBX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA5B9B,kBA6BX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAhC9B,kBAiCX,WAAA,OAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApC/B,kBAqCX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAxC/B,kBAyCX,WAAA,YAAA,CAAA;AAzCW,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

package/dist/index220.js

@@ -1,76 +1,84 @@
-import { nothing, svg, html } from "lit";
-const SIZE_MAP = {
-  xs: { px: 40, stroke: 3 },
-  sm: { px: 64, stroke: 4 },
-  md: { px: 96, stroke: 6 },
-  lg: { px: 128, stroke: 7 },
-  xl: { px: 176, stroke: 6 }
-};
-function progressCircleTemplate(props) {
-  const { px, stroke: defaultStroke } = SIZE_MAP[props.size];
-  const sw = props.strokeWidth ?? defaultStroke;
-  const r = (px - sw) / 2;
-  const circ = 2 * Math.PI * r;
-  const offset = props.indeterminate ? 0 : circ * (1 - Math.min(props.value, props.max) / props.max);
-  const pct = Math.round(props.value / props.max * 100);
+import { nothing, html } from "lit";
+function panelWrapClass(p) {
+  const classes = ["mo-panel-wrap"];
+  if (p.size !== "md") classes.push(`mo-${p.size}`);
+  if (p._animate === "slide-up") classes.push("mo-slide-up");
+  if (p._animate === "slide-down") classes.push("mo-slide-down");
+  if (p.dark) classes.push("mo-dark");
+  return classes.join(" ");
+}
+function panelClass(variant) {
+  const classes = ["mo-panel"];
+  if (variant === "editorial") classes.push("is-editorial");
+  if (variant === "danger") classes.push("is-danger");
+  return classes.join(" ");
+}
+function iconClass(tone) {
+  const classes = ["mo-header-icon"];
+  if (tone !== "default") classes.push(`is-${tone}`);
+  return classes.join(" ");
+}
+function modalTemplate(p) {
   return html`
     <div
-      class="pc"
-      style="width:${px}px; height:${px}px;"
-      role="progressbar"
-      aria-valuenow=${props.indeterminate ? nothing : props.value}
-      aria-valuemin="0"
-      aria-valuemax=${props.max}
-      aria-label=${props.indeterminate ? "Cargando…" : `${pct}%`}
+      class="mo-backdrop"
+      part="backdrop"
+      @click="${p.onBackdropClick}"
     >
-      ${svg`
-        <svg
-          width="${px}"
-          height="${px}"
-          viewBox="0 0 ${px} ${px}"
-          class="pc__svg ${props.indeterminate ? "pc__svg--spin" : ""}"
-        >
-          <circle
-            class="pc__track"
-            cx="${px / 2}"
-            cy="${px / 2}"
-            r="${r}"
-            stroke-width="${sw}"
-          />
-          <circle
-            class="pc__arc ${props.indeterminate ? "pc__arc--indet" : ""}"
-            cx="${px / 2}"
-            cy="${px / 2}"
-            r="${r}"
-            stroke-width="${sw}"
-            stroke-dasharray="${props.indeterminate ? `${circ * 0.3} ${circ}` : circ}"
-            stroke-dashoffset="${props.indeterminate ? 0 : offset}"
-            stroke-linecap="round"
-          />
-        </svg>
-      `}
+      <div
+        class="${panelWrapClass(p)}"
+        part="panel-wrap"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="mo-title"
+        @click="${(e) => e.stopPropagation()}"
+      >
+        <div class="${panelClass(p.variant)}" part="panel">
+
+          <!-- ── HEADER ── -->
+          <div class="mo-header" part="header">
+
+            <!-- Ícono opcional — tone prop activa el wrapper -->
+            ${p.iconTone !== null ? html`
+              <div class="${iconClass(p.iconTone)}" part="icon">
+                <slot name="icon"></slot>
+              </div>
+            ` : nothing}
+
+            <!-- Título y subtítulo -->
+            <div class="mo-header-text">
+              <h2 id="mo-title" class="mo-title">${p.heading}</h2>
+              ${p.subtitle ? html`<p class="mo-subtitle">${p.subtitle}</p>` : nothing}
+            </div>
+
+            <!-- Botón de cierre -->
+            <button
+              class="mo-close"
+              part="close-btn"
+              aria-label="Cerrar"
+              @click="${p.onClose}"
+            >×</button>
+          </div>
+
+          <!-- ── BODY — slot default ── -->
+          <div class="mo-body" part="body">
+            <slot></slot>
+          </div>
+
+          <!-- ── FOOTER ── -->
+          <div class="mo-footer" part="footer">
+            ${p.footerInfo ? html`
+              <span class="mo-footer-info">${p.footerInfo}</span>
+            ` : nothing}
+            <slot name="footer"></slot>
+          </div>
 
-      ${!props.bare && !props.indeterminate ? html`
-        <div class="pc__label">
-          ${props.icon === "check" ? html`
-            <svg class="pc__check" width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
-              <polyline
-                points="6,14 11,20 22,9"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          ` : html`
-            <span class="pc__value">${pct}%</span>
-            ${props.sub ? html`<span class="pc__sub">${props.sub}</span>` : nothing}
-          `}
         </div>
-      ` : nothing}
+      </div>
     </div>
   `;
 }
 export {
-  progressCircleTemplate
+  modalTemplate
 };
 //# sourceMappingURL=index220.js.map

package/dist/index220.js.map

@@ -1 +1 @@
-{"version":3,"file":"index220.js","sources":["../src/components/atoms/progress-circle/lib-progress-circle.component.html.ts"],"sourcesContent":["import { html, svg, nothing, TemplateResult } from 'lit';\n\nexport type LibProgressCircleSize    = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type LibProgressCircleVariant = 'default' | 'kaki' | 'celadon' | 'error';\n\n/** Dimensiones canónicas por tamaño */\nconst SIZE_MAP: Record<LibProgressCircleSize, { px: number; stroke: number }> = {\n  xs: { px: 40,  stroke: 3 },\n  sm: { px: 64,  stroke: 4 },\n  md: { px: 96,  stroke: 6 },\n  lg: { px: 128, stroke: 7 },\n  xl: { px: 176, stroke: 6 },\n};\n\nexport interface ProgressCircleTemplateProps {\n  value:         number;\n  max:           number;\n  size:          LibProgressCircleSize;\n  /** Sobreescribe el strokeWidth por defecto del tamaño */\n  strokeWidth:   number | null;\n  variant:       LibProgressCircleVariant;\n  indeterminate: boolean;\n  /** Oculta el label central */\n  bare:          boolean;\n  /** Subtítulo bajo el valor numérico */\n  sub:           string;\n  /** Icono SVG en el centro en lugar del texto */\n  icon:          'check' | null;\n}\n\n/**\n * Renderiza el SVG circular y el label central.\n *\n * Fórmula del arco:\n *   r           = (size - strokeWidth) / 2\n *   circumference = 2π × r\n *   offset      = circumference × (1 − value/max)\n *\n * El SVG se rota -90° en CSS para que el arco empiece arriba.\n */\nexport function progressCircleTemplate(props: ProgressCircleTemplateProps): TemplateResult {\n  const { px, stroke: defaultStroke } = SIZE_MAP[props.size];\n  const sw = props.strokeWidth ?? defaultStroke;\n\n  const r    = (px - sw) / 2;\n  const circ = 2 * Math.PI * r;\n\n  // Indeterminate: arco corto fijo; determinado: offset calculado\n  const offset = props.indeterminate\n    ? 0   // stroke-dasharray en CSS controla la longitud del segmento\n    : circ * (1 - Math.min(props.value, props.max) / props.max);\n\n  const pct = Math.round((props.value / props.max) * 100);\n\n  return html`\n    <div\n      class=\"pc\"\n      style=\"width:${px}px; height:${px}px;\"\n      role=\"progressbar\"\n      aria-valuenow=${props.indeterminate ? nothing : props.value}\n      aria-valuemin=\"0\"\n      aria-valuemax=${props.max}\n      aria-label=${props.indeterminate ? 'Cargando…' : `${pct}%`}\n    >\n      ${svg`\n        <svg\n          width=\"${px}\"\n          height=\"${px}\"\n          viewBox=\"0 0 ${px} ${px}\"\n          class=\"pc__svg ${props.indeterminate ? 'pc__svg--spin' : ''}\"\n        >\n          <circle\n            class=\"pc__track\"\n            cx=\"${px / 2}\"\n            cy=\"${px / 2}\"\n            r=\"${r}\"\n            stroke-width=\"${sw}\"\n          />\n          <circle\n            class=\"pc__arc ${props.indeterminate ? 'pc__arc--indet' : ''}\"\n            cx=\"${px / 2}\"\n            cy=\"${px / 2}\"\n            r=\"${r}\"\n            stroke-width=\"${sw}\"\n            stroke-dasharray=\"${props.indeterminate ? `${circ * 0.3} ${circ}` : circ}\"\n            stroke-dashoffset=\"${props.indeterminate ? 0 : offset}\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n      `}\n\n      ${!props.bare && !props.indeterminate ? html`\n        <div class=\"pc__label\">\n          ${props.icon === 'check' ? html`\n            <svg class=\"pc__check\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" aria-hidden=\"true\">\n              <polyline\n                points=\"6,14 11,20 22,9\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          ` : html`\n            <span class=\"pc__value\">${pct}%</span>\n            ${props.sub ? html`<span class=\"pc__sub\">${props.sub}</span>` : nothing}\n          `}\n        </div>\n      ` : nothing}\n    </div>\n  `;\n}"],"names":[],"mappings":";AAMA,MAAM,WAA0E;AAAA,EAC9E,IAAI,EAAE,IAAI,IAAK,QAAQ,EAAA;AAAA,EACvB,IAAI,EAAE,IAAI,IAAK,QAAQ,EAAA;AAAA,EACvB,IAAI,EAAE,IAAI,IAAK,QAAQ,EAAA;AAAA,EACvB,IAAI,EAAE,IAAI,KAAK,QAAQ,EAAA;AAAA,EACvB,IAAI,EAAE,IAAI,KAAK,QAAQ,EAAA;AACzB;AA4BO,SAAS,uBAAuB,OAAoD;AACzF,QAAM,EAAE,IAAI,QAAQ,kBAAkB,SAAS,MAAM,IAAI;AACzD,QAAM,KAAK,MAAM,eAAe;AAEhC,QAAM,KAAQ,KAAK,MAAM;AACzB,QAAM,OAAO,IAAI,KAAK,KAAK;AAG3B,QAAM,SAAS,MAAM,gBACjB,IACA,QAAQ,IAAI,KAAK,IAAI,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM;AAEzD,QAAM,MAAM,KAAK,MAAO,MAAM,QAAQ,MAAM,MAAO,GAAG;AAEtD,SAAO;AAAA;AAAA;AAAA,qBAGY,EAAE,cAAc,EAAE;AAAA;AAAA,sBAEjB,MAAM,gBAAgB,UAAU,MAAM,KAAK;AAAA;AAAA,sBAE3C,MAAM,GAAG;AAAA,mBACZ,MAAM,gBAAgB,cAAc,GAAG,GAAG,GAAG;AAAA;AAAA,QAExD;AAAA;AAAA,mBAEW,EAAE;AAAA,oBACD,EAAE;AAAA,yBACG,EAAE,IAAI,EAAE;AAAA,2BACN,MAAM,gBAAgB,kBAAkB,EAAE;AAAA;AAAA;AAAA;AAAA,kBAInD,KAAK,CAAC;AAAA,kBACN,KAAK,CAAC;AAAA,iBACP,CAAC;AAAA,4BACU,EAAE;AAAA;AAAA;AAAA,6BAGD,MAAM,gBAAgB,mBAAmB,EAAE;AAAA,kBACtD,KAAK,CAAC;AAAA,kBACN,KAAK,CAAC;AAAA,iBACP,CAAC;AAAA,4BACU,EAAE;AAAA,gCACE,MAAM,gBAAgB,GAAG,OAAO,GAAG,IAAI,IAAI,KAAK,IAAI;AAAA,iCACnD,MAAM,gBAAgB,IAAI,MAAM;AAAA;AAAA;AAAA;AAAA,OAI1D;AAAA;AAAA,QAEC,CAAC,MAAM,QAAQ,CAAC,MAAM,gBAAgB;AAAA;AAAA,YAElC,MAAM,SAAS,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cASvB;AAAA,sCACwB,GAAG;AAAA,cAC3B,MAAM,MAAM,6BAA6B,MAAM,GAAG,YAAY,OAAO;AAAA,WACxE;AAAA;AAAA,UAED,OAAO;AAAA;AAAA;AAGjB;"}
+{"version":3,"file":"index220.js","sources":["../src/components/molecules/modal/lib-modal.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { ModalAnimate, ModalIconTone, ModalSize, ModalVariant } from './lib-modal.types';\n\nexport interface ModalTemplateProps {\n  /* Estado */\n  open:             boolean;\n  /* Panel */\n  size:             ModalSize;\n  variant:          ModalVariant;\n  _animate:          ModalAnimate;\n  dark:             boolean;\n  /* Header */\n  heading:          string;\n  subtitle:         string;\n  iconTone:         ModalIconTone | null;\n  /* Footer */\n  footerInfo:       string;\n  /* Handlers */\n  onClose:          () => void;\n  onBackdropClick:  (e: MouseEvent) => void;\n}\n\n/** Clases del contenedor del panel (.mo-panel-wrap). */\nfunction panelWrapClass(p: ModalTemplateProps): string {\n  const classes = ['mo-panel-wrap'];\n  if (p.size !== 'md')         classes.push(`mo-${p.size}`);\n  if (p._animate === 'slide-up')   classes.push('mo-slide-up');\n  if (p._animate === 'slide-down') classes.push('mo-slide-down');\n  if (p.dark)                  classes.push('mo-dark');\n  return classes.join(' ');\n}\n\n/** Clases del panel (.mo-panel). */\nfunction panelClass(variant: ModalVariant): string {\n  const classes = ['mo-panel'];\n  if (variant === 'editorial') classes.push('is-editorial');\n  if (variant === 'danger')    classes.push('is-danger');\n  return classes.join(' ');\n}\n\n/** Clases del ícono de header. */\nfunction iconClass(tone: ModalIconTone): string {\n  const classes = ['mo-header-icon'];\n  if (tone !== 'default') classes.push(`is-${tone}`);\n  return classes.join(' ');\n}\n\nexport function modalTemplate(p: ModalTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"mo-backdrop\"\n      part=\"backdrop\"\n      @click=\"${p.onBackdropClick}\"\n    >\n      <div\n        class=\"${panelWrapClass(p)}\"\n        part=\"panel-wrap\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"mo-title\"\n        @click=\"${(e: MouseEvent):void => e.stopPropagation()}\"\n      >\n        <div class=\"${panelClass(p.variant)}\" part=\"panel\">\n\n          <!-- ── HEADER ── -->\n          <div class=\"mo-header\" part=\"header\">\n\n            <!-- Ícono opcional — tone prop activa el wrapper -->\n            ${p.iconTone !== null ? html`\n              <div class=\"${iconClass(p.iconTone)}\" part=\"icon\">\n                <slot name=\"icon\"></slot>\n              </div>\n            ` : nothing}\n\n            <!-- Título y subtítulo -->\n            <div class=\"mo-header-text\">\n              <h2 id=\"mo-title\" class=\"mo-title\">${p.heading}</h2>\n              ${p.subtitle ? html`<p class=\"mo-subtitle\">${p.subtitle}</p>` : nothing}\n            </div>\n\n            <!-- Botón de cierre -->\n            <button\n              class=\"mo-close\"\n              part=\"close-btn\"\n              aria-label=\"Cerrar\"\n              @click=\"${p.onClose}\"\n            >×</button>\n          </div>\n\n          <!-- ── BODY — slot default ── -->\n          <div class=\"mo-body\" part=\"body\">\n            <slot></slot>\n          </div>\n\n          <!-- ── FOOTER ── -->\n          <div class=\"mo-footer\" part=\"footer\">\n            ${p.footerInfo ? html`\n              <span class=\"mo-footer-info\">${p.footerInfo}</span>\n            ` : nothing}\n            <slot name=\"footer\"></slot>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAuBA,SAAS,eAAe,GAA+B;AACrD,QAAM,UAAU,CAAC,eAAe;AAChC,MAAI,EAAE,SAAS,KAAc,SAAQ,KAAK,MAAM,EAAE,IAAI,EAAE;AACxD,MAAI,EAAE,aAAa,WAAc,SAAQ,KAAK,aAAa;AAC3D,MAAI,EAAE,aAAa,aAAc,SAAQ,KAAK,eAAe;AAC7D,MAAI,EAAE,KAAuB,SAAQ,KAAK,SAAS;AACnD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAGA,SAAS,WAAW,SAA+B;AACjD,QAAM,UAAU,CAAC,UAAU;AAC3B,MAAI,YAAY,YAAa,SAAQ,KAAK,cAAc;AACxD,MAAI,YAAY,SAAa,SAAQ,KAAK,WAAW;AACrD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAGA,SAAS,UAAU,MAA6B;AAC9C,QAAM,UAAU,CAAC,gBAAgB;AACjC,MAAI,SAAS,UAAW,SAAQ,KAAK,MAAM,IAAI,EAAE;AACjD,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,SAAS,cAAc,GAAuC;AACnE,SAAO;AAAA;AAAA;AAAA;AAAA,gBAIO,EAAE,eAAe;AAAA;AAAA;AAAA,iBAGhB,eAAe,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhB,CAAC,MAAuB,EAAE,iBAAiB;AAAA;AAAA,sBAEvC,WAAW,EAAE,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAM7B,EAAE,aAAa,OAAO;AAAA,4BACR,UAAU,EAAE,QAAQ,CAAC;AAAA;AAAA;AAAA,gBAGjC,OAAO;AAAA;AAAA;AAAA;AAAA,mDAI4B,EAAE,OAAO;AAAA,gBAC5C,EAAE,WAAW,8BAA8B,EAAE,QAAQ,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQ7D,EAAE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWnB,EAAE,aAAa;AAAA,6CACgB,EAAE,UAAU;AAAA,gBACzC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB;"}