@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index221.js

@@ -1,5 +1,84 @@
-const progressCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.pc{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.pc__svg{display:block;transform:rotate(-90deg);transform-origin:center;overflow:visible}.pc__track,.pc__arc{fill:none;stroke-linecap:round}.pc__track{stroke:var(--color-washi-200)}.pc__arc{stroke:var(--color-washi-900);transition:stroke-dashoffset .7s cubic-bezier(0,0,.2,1),stroke .3s}:host([variant="kaki"]) .pc__arc{stroke:var(--color-kaki-500)}:host([variant="kaki"]) .pc__track{stroke:var(--color-kaki-100)}:host([variant="celadon"]) .pc__arc{stroke:var(--color-celadon-500)}:host([variant="celadon"]) .pc__track{stroke:var(--color-celadon-100)}:host([variant="error"]) .pc__arc{stroke:var(--color-error)}:host([variant="error"]) .pc__track{stroke:#f5ddd9}.pc__label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none}.pc__value{font-family:var(--lib-font-mono);font-weight:var(--weight-regular);letter-spacing:var(--tracking-wide);color:var(--text-primary);line-height:1}.pc__sub{font-family:var(--lib-font-mono);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);line-height:1}:host([size="xs"]) .pc__label{display:none}:host([size="sm"]) .pc__value{font-size:var(--text-xs)}:host([size="sm"]) .pc__sub{font-size:8px}:host([size="md"]) .pc__value{font-size:var(--text-md)}:host([size="md"]) .pc__sub{font-size:9px}:host([size="lg"]) .pc__value{font-size:var(--text-xl)}:host([size="lg"]) .pc__sub{font-size:var(--text-xs)}:host([size="xl"]) .pc__value{font-size:2rem}:host([size="xl"]) .pc__sub{font-size:var(--text-xs)}:host([variant="kaki"]) .pc__value{color:var(--color-kaki-600)}:host([variant="celadon"]) .pc__value{color:var(--color-celadon-600)}:host([variant="error"]) .pc__value{color:var(--color-error)}.pc__check polyline{stroke:var(--color-celadon-500)}:host([variant="kaki"]) .pc__check polyline{stroke:var(--color-kaki-500)}@keyframes pc-spin{to{transform:rotate(270deg)}}.pc__svg--spin{animation:pc-spin 1.2s linear infinite;transform-origin:center}.pc__arc--indet{transition:none}@media(prefers-reduced-motion:reduce){.pc__arc{transition:none}.pc__svg--spin{animation:none}}}';
+import { html, nothing } from "lit";
+const chevronLeft = html`
+  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+    <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/>
+  </svg>`;
+const chevronRight = html`
+  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+    <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/>
+  </svg>`;
+function buildPageSequence(current, total, siblings) {
+  if (total <= 1) return [1];
+  const left = Math.max(2, current - siblings);
+  const right = Math.min(total - 1, current + siblings);
+  const pages = [1];
+  if (left > 2) pages.push(null);
+  for (let i = left; i <= right; i++) pages.push(i);
+  if (right < total - 1) pages.push(null);
+  if (total > 1) pages.push(total);
+  return pages;
+}
+function paginationTemplate(ctx) {
+  const total = ctx.totalPages;
+  const current = ctx.currentPage;
+  const sequence = buildPageSequence(current, total, ctx.siblings);
+  const infoText = ctx.showInfo ? (() => {
+    const from = (current - 1) * ctx.itemsPerPage + 1;
+    const to = Math.min(current * ctx.itemsPerPage, ctx.totalItems);
+    return html`
+          <span class="pg-info" part="info">
+            ${from}–${to} de ${ctx.totalItems}
+          </span>`;
+  })() : nothing;
+  return html`
+    <nav class="pg" part="root" aria-label="${ctx.ariaLabel}">
+
+      ${ctx.showInfo ? infoText : nothing}
+
+      <!-- ← Anterior -->
+      <button
+        class="pg-btn pg-btn--nav"
+        part="btn-prev"
+        ?disabled="${current === 1}"
+        aria-label="Página anterior"
+        @click="${() => ctx._changePage(current - 1)}"
+      >
+        ${chevronLeft}
+        ${ctx.size !== "sm" ? html`<span>Ant</span>` : nothing}
+      </button>
+
+      <!-- Números -->
+      <div class="pg-numbers" part="numbers" role="list">
+        ${sequence.map(
+    (page) => page === null ? html`<span class="pg-ellipsis" role="listitem" aria-hidden="true">…</span>` : html`
+              <button
+                class="pg-btn ${page === current ? "pg-btn--active" : ""}"
+                part="btn-page${page === current ? " btn-page-active" : ""}"
+                role="listitem"
+                aria-label="Página ${page}"
+                aria-current="${page === current ? "page" : nothing}"
+                ?disabled="${page === current}"
+                @click="${() => ctx._changePage(page)}"
+              >${page}</button>`
+  )}
+      </div>
+
+      <!-- → Siguiente -->
+      <button
+        class="pg-btn pg-btn--nav"
+        part="btn-next"
+        ?disabled="${current === total}"
+        aria-label="Página siguiente"
+        @click="${() => ctx._changePage(current + 1)}"
+      >
+        ${ctx.size !== "sm" ? html`<span>Sig</span>` : nothing}
+        ${chevronRight}
+      </button>
+
+    </nav>
+  `;
+}
 export {
-  progressCss as default
+  paginationTemplate
 };
 //# sourceMappingURL=index221.js.map

package/dist/index221.js.map

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

package/dist/index222.js

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

package/dist/index222.js.map

@@ -1 +1 @@
-{"version":3,"file":"index222.js","sources":["../src/components/atoms/badge/lib-badge.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\n/**\n * Variantes visuales del badge.\n * TODO: mover a src/models/ui/ cuando se integre en el monorepo.\n */\nexport type LibBadgeVariant =\n  | 'default'\n  | 'accent'\n  | 'celadon'\n  | 'dark'\n  | 'error'\n  | 'success'\n  | 'warning';\n\nexport type LibBadgeSize = 'sm' | 'md';\n\nexport interface BadgeTemplateProps {\n  variant: LibBadgeVariant;\n  size: LibBadgeSize;\n  dot: boolean;\n  pill: boolean;\n}\n\n/**\n * Plantilla para lib-badge.\n * El contenido se proyecta mediante <slot> para máxima flexibilidad.\n */\nexport function badgeTemplate(props: BadgeTemplateProps): TemplateResult {\n  return html`\n    <span class=\"badge\">\n      ${props.dot ? html`<span class=\"badge__dot\" aria-hidden=\"true\"></span>` : nothing}\n      <slot></slot>\n    </span>\n  `;\n}"],"names":[],"mappings":";AA4BO,SAAS,cAAc,OAA2C;AACvE,SAAO;AAAA;AAAA,QAED,MAAM,MAAM,4DAA4D,OAAO;AAAA;AAAA;AAAA;AAIvF;"}
+{"version":3,"file":"index222.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index223.js

@@ -1,5 +1,136 @@
-const badgeCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.badge{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:10px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;line-height:1;padding:var(--lib-space-xs) var(--lib-space-sm);border:var(--lib-border-width) solid transparent;border-radius:var(--lib-radius-xs);-webkit-user-select:none;user-select:none}:host([size="md"]) .badge,.badge{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:10px}:host([size="sm"]) .badge{padding:2px var(--lib-space-xs);font-size:9px;letter-spacing:var(--tracking-wide)}:host([pill]) .badge{border-radius:var(--radius-full);padding-inline:var(--lib-space-md)}.badge__dot{display:inline-block;width:5px;height:5px;border-radius:var(--radius-full);background:currentcolor;opacity:.75;flex-shrink:0}:host([variant="default"]) .badge,.badge{background:var(--color-washi-100);color:var(--text-secondary);border-color:var(--border-default)}:host([variant="accent"]) .badge{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-200)}:host([variant="celadon"]) .badge{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-200)}:host([variant="dark"]) .badge{background:var(--color-washi-900);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([variant="error"]) .badge{background:#fcf3f3;color:var(--color-error);border-color:#e7c4c5}:host([variant="success"]) .badge{background:#f1f7f2;color:var(--color-success);border-color:#bcd6c0}:host([variant="warning"]) .badge{background:#fcf4e6;color:var(--color-warning);border-color:#e6d1b0}}';
+import { nothing, html } from "lit";
+function renderValue(v, unit) {
+  return html`${v}${unit ? html`<span class="rs-value-unit">${unit}</span>` : nothing}`;
+}
+function renderMarks(marks, pct) {
+  if (!marks.length) return html``;
+  return html`
+    <div class="rs-marks">
+      ${marks.map((m) => html`
+        <div
+          class="rs-mark ${m.pct <= pct ? "is-filled" : ""}"
+          style="left: ${m.pct}%"
+        >
+          ${m.label ? html`<span class="rs-mark-label">${m.label}</span>` : nothing}
+        </div>
+      `)}
+    </div>
+  `;
+}
+function renderLimits(show, low, high) {
+  if (!show) return html``;
+  return html`
+    <div class="rs-limits">
+      <span class="rs-limit">${low}</span>
+      <span class="rs-limit">${high}</span>
+    </div>
+  `;
+}
+function renderTooltip(show, pct, value, unit) {
+  if (!show) return html``;
+  return html`
+    <div class="rs-tooltip-wrap" style="left: ${pct}%">
+      <span class="rs-tooltip-bubble">${value}${unit}</span>
+    </div>
+  `;
+}
+function renderTrack(p) {
+  if (p.dual) {
+    return html`
+      <div class="rs-track-wrap">
+        <div class="rs-track">
+          <div
+            class="rs-fill-dual"
+            style="left: ${p.minPct}%; right: ${100 - p.maxPct}%"
+          ></div>
+        </div>
+        <input
+          type="range"
+          class="rs-input-min"
+          min=${p.min} max=${p.max} step=${p.step}
+          .value=${String(p.valueMin)}
+          ?disabled=${p.disabled}
+          aria-label="Mínimo"
+          @input=${p.onInputMin}
+        >
+        <input
+          type="range"
+          class="rs-input-max"
+          min=${p.min} max=${p.max} step=${p.step}
+          .value=${String(p.valueMax)}
+          ?disabled=${p.disabled}
+          aria-label="Máximo"
+          @input=${p.onInputMax}
+        >
+      </div>
+    `;
+  }
+  if (p.vertical) {
+    return html`
+      <div class="rs-vert-wrap">
+        <div class="rs-track-wrap">
+          <div class="rs-track">
+            <div class="rs-fill" style="width: ${p.pct}%"></div>
+          </div>
+          <input
+            type="range"
+            min=${p.min} max=${p.max} step=${p.step}
+            .value=${String(p.value)}
+            ?disabled=${p.disabled}
+            @input=${p.onInput}
+          >
+        </div>
+      </div>
+    `;
+  }
+  return html`
+    <div class="rs-track-wrap">
+      <div class="rs-track">
+        <div class="rs-fill" style="width: ${p.pct}%"></div>
+      </div>
+      <input
+        type="range"
+        min=${p.min} max=${p.max} step=${p.step}
+        .value=${String(p.value)}
+        ?disabled=${p.disabled}
+        @input=${p.onInput}
+      >
+      ${renderTooltip(p.tooltip, p.pct, p.value, p.unit)}
+    </div>
+  `;
+}
+function rangeSliderTemplate(p) {
+  const valueDisplay = p.dual ? html`<span class="rs-value">
+        ${p.valueMin} — ${p.valueMax}
+        ${p.unit ? html`<span class="rs-value-unit">${p.unit}</span>` : nothing}
+      </span>` : html`<span class="rs-value">${renderValue(p.value, p.unit)}</span>`;
+  return html`
+    <div class="rs">
+
+      ${!p.vertical && (p.label || p.dual) ? html`
+        <div class="rs-label-row">
+          ${p.label ? html`<span class="rs-label">${p.label}</span>` : nothing}
+          ${valueDisplay}
+        </div>
+      ` : nothing}
+
+      ${renderTrack(p)}
+
+      ${p.vertical ? html`
+        <div class="rs-label-row">
+          ${p.label ? html`<span class="rs-label">${p.label}</span>` : nothing}
+          ${valueDisplay}
+        </div>
+      ` : nothing}
+
+      ${renderMarks(p.marks, p.pct)}
+
+      ${renderLimits(p.showLimits, p.limitMinText, p.limitMaxText)}
+
+    </div>
+  `;
+}
 export {
-  badgeCss as default
+  rangeSliderTemplate
 };
 //# sourceMappingURL=index223.js.map

package/dist/index223.js.map

@@ -1 +1 @@
-{"version":3,"file":"index223.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index223.js","sources":["../src/components/molecules/range-slider/lib-range-slider.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { RsSize, RsTone, RsMark } from './lib-range-slider.component';\n\nexport interface RangeSliderTemplateProps {\n  /* sizing / modes */\n  size:     RsSize;\n  tone:     RsTone;\n  dual:     boolean;\n  vertical: boolean;\n  disabled: boolean;\n  tooltip:  boolean;\n\n  /* range attrs */\n  min:  number;\n  max:  number;\n  step: number;\n\n  /* values */\n  value:    number;   // single mode\n  valueMin: number;   // dual low\n  valueMax: number;   // dual high\n\n  /* computed pcts (0–100) */\n  pct:    number;     // single fill\n  minPct: number;     // dual fill left\n  maxPct: number;     // dual fill right\n\n  /* display */\n  label:        string;\n  unit:         string;\n  showLimits:   boolean;\n  limitMinText: string;\n  limitMaxText: string;\n  marks:        RsMark[];\n\n  /* handlers */\n  onInput:    (e: Event) => void;\n  onInputMin: (e: Event) => void;\n  onInputMax: (e: Event) => void;\n}\n\n/* ── Value display ───────────────────────────────────────── */\nfunction renderValue(v: number | string, unit: string): TemplateResult {\n  return html`${v}${unit ? html`<span class=\"rs-value-unit\">${unit}</span>` : nothing}`;\n}\n\n/* ── Marks ───────────────────────────────────────────────── */\nfunction renderMarks(marks: RsMark[], pct: number): TemplateResult {\n  if (!marks.length) return html``;\n  return html`\n    <div class=\"rs-marks\">\n      ${marks.map(m => html`\n        <div\n          class=\"rs-mark ${m.pct <= pct ? 'is-filled' : ''}\"\n          style=\"left: ${m.pct}%\"\n        >\n          ${m.label ? html`<span class=\"rs-mark-label\">${m.label}</span>` : nothing}\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ── Limits ──────────────────────────────────────────────── */\nfunction renderLimits(show: boolean, low: string, high: string): TemplateResult {\n  if (!show) return html``;\n  return html`\n    <div class=\"rs-limits\">\n      <span class=\"rs-limit\">${low}</span>\n      <span class=\"rs-limit\">${high}</span>\n    </div>\n  `;\n}\n\n/* ── Tooltip ─────────────────────────────────────────────── */\nfunction renderTooltip(show: boolean, pct: number, value: number, unit: string): TemplateResult {\n  if (!show) return html``;\n  return html`\n    <div class=\"rs-tooltip-wrap\" style=\"left: ${pct}%\">\n      <span class=\"rs-tooltip-bubble\">${value}${unit}</span>\n    </div>\n  `;\n}\n\n/* ── Track content ───────────────────────────────────────── */\nfunction renderTrack(p: RangeSliderTemplateProps): TemplateResult {\n  if (p.dual) {\n    return html`\n      <div class=\"rs-track-wrap\">\n        <div class=\"rs-track\">\n          <div\n            class=\"rs-fill-dual\"\n            style=\"left: ${p.minPct}%; right: ${100 - p.maxPct}%\"\n          ></div>\n        </div>\n        <input\n          type=\"range\"\n          class=\"rs-input-min\"\n          min=${p.min} max=${p.max} step=${p.step}\n          .value=${String(p.valueMin)}\n          ?disabled=${p.disabled}\n          aria-label=\"Mínimo\"\n          @input=${p.onInputMin}\n        >\n        <input\n          type=\"range\"\n          class=\"rs-input-max\"\n          min=${p.min} max=${p.max} step=${p.step}\n          .value=${String(p.valueMax)}\n          ?disabled=${p.disabled}\n          aria-label=\"Máximo\"\n          @input=${p.onInputMax}\n        >\n      </div>\n    `;\n  }\n\n  if (p.vertical) {\n    return html`\n      <div class=\"rs-vert-wrap\">\n        <div class=\"rs-track-wrap\">\n          <div class=\"rs-track\">\n            <div class=\"rs-fill\" style=\"width: ${p.pct}%\"></div>\n          </div>\n          <input\n            type=\"range\"\n            min=${p.min} max=${p.max} step=${p.step}\n            .value=${String(p.value)}\n            ?disabled=${p.disabled}\n            @input=${p.onInput}\n          >\n        </div>\n      </div>\n    `;\n  }\n\n  /* single horizontal */\n  return html`\n    <div class=\"rs-track-wrap\">\n      <div class=\"rs-track\">\n        <div class=\"rs-fill\" style=\"width: ${p.pct}%\"></div>\n      </div>\n      <input\n        type=\"range\"\n        min=${p.min} max=${p.max} step=${p.step}\n        .value=${String(p.value)}\n        ?disabled=${p.disabled}\n        @input=${p.onInput}\n      >\n      ${renderTooltip(p.tooltip, p.pct, p.value, p.unit)}\n    </div>\n  `;\n}\n\n/**\n * Template principal de lib-range-slider.\n */\nexport function rangeSliderTemplate(p: RangeSliderTemplateProps): TemplateResult {\n  /* Dual value display: \"120 — 480 €\" */\n  const valueDisplay = p.dual\n    ? html`<span class=\"rs-value\">\n        ${p.valueMin} — ${p.valueMax}\n        ${p.unit ? html`<span class=\"rs-value-unit\">${p.unit}</span>` : nothing}\n      </span>`\n    : html`<span class=\"rs-value\">${renderValue(p.value, p.unit)}</span>`;\n\n  return html`\n    <div class=\"rs\">\n\n      ${!p.vertical && (p.label || p.dual) ? html`\n        <div class=\"rs-label-row\">\n          ${p.label ? html`<span class=\"rs-label\">${p.label}</span>` : nothing}\n          ${valueDisplay}\n        </div>\n      ` : nothing}\n\n      ${renderTrack(p)}\n\n      ${p.vertical ? html`\n        <div class=\"rs-label-row\">\n          ${p.label ? html`<span class=\"rs-label\">${p.label}</span>` : nothing}\n          ${valueDisplay}\n        </div>\n      ` : nothing}\n\n      ${renderMarks(p.marks, p.pct)}\n\n      ${renderLimits(p.showLimits, p.limitMinText, p.limitMaxText)}\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AA0CA,SAAS,YAAY,GAAoB,MAA8B;AACrE,SAAO,OAAO,CAAC,GAAG,OAAO,mCAAmC,IAAI,YAAY,OAAO;AACrF;AAGA,SAAS,YAAY,OAAiB,KAA6B;AACjE,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,SAAO;AAAA;AAAA,QAED,MAAM,IAAI,CAAA,MAAK;AAAA;AAAA,2BAEI,EAAE,OAAO,MAAM,cAAc,EAAE;AAAA,yBACjC,EAAE,GAAG;AAAA;AAAA,YAElB,EAAE,QAAQ,mCAAmC,EAAE,KAAK,YAAY,OAAO;AAAA;AAAA,OAE5E,CAAC;AAAA;AAAA;AAGR;AAGA,SAAS,aAAa,MAAe,KAAa,MAA8B;AAC9E,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO;AAAA;AAAA,+BAEsB,GAAG;AAAA,+BACH,IAAI;AAAA;AAAA;AAGnC;AAGA,SAAS,cAAc,MAAe,KAAa,OAAe,MAA8B;AAC9F,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO;AAAA,gDACuC,GAAG;AAAA,wCACX,KAAK,GAAG,IAAI;AAAA;AAAA;AAGpD;AAGA,SAAS,YAAY,GAA6C;AAChE,MAAI,EAAE,MAAM;AACV,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKgB,EAAE,MAAM,aAAa,MAAM,EAAE,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAM9C,EAAE,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,IAAI;AAAA,mBAC9B,OAAO,EAAE,QAAQ,CAAC;AAAA,sBACf,EAAE,QAAQ;AAAA;AAAA,mBAEb,EAAE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKf,EAAE,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,IAAI;AAAA,mBAC9B,OAAO,EAAE,QAAQ,CAAC;AAAA,sBACf,EAAE,QAAQ;AAAA;AAAA,mBAEb,EAAE,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7B;AAEA,MAAI,EAAE,UAAU;AACd,WAAO;AAAA;AAAA;AAAA;AAAA,iDAIsC,EAAE,GAAG;AAAA;AAAA;AAAA;AAAA,kBAIpC,EAAE,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,IAAI;AAAA,qBAC9B,OAAO,EAAE,KAAK,CAAC;AAAA,wBACZ,EAAE,QAAQ;AAAA,qBACb,EAAE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5B;AAGA,SAAO;AAAA;AAAA;AAAA,6CAGoC,EAAE,GAAG;AAAA;AAAA;AAAA;AAAA,cAIpC,EAAE,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,IAAI;AAAA,iBAC9B,OAAO,EAAE,KAAK,CAAC;AAAA,oBACZ,EAAE,QAAQ;AAAA,iBACb,EAAE,OAAO;AAAA;AAAA,QAElB,cAAc,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC;AAAA;AAAA;AAGxD;AAKO,SAAS,oBAAoB,GAA6C;AAE/E,QAAM,eAAe,EAAE,OACnB;AAAA,UACI,EAAE,QAAQ,MAAM,EAAE,QAAQ;AAAA,UAC1B,EAAE,OAAO,mCAAmC,EAAE,IAAI,YAAY,OAAO;AAAA,iBAEzE,8BAA8B,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC;AAE9D,SAAO;AAAA;AAAA;AAAA,QAGD,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ;AAAA;AAAA,YAEjC,EAAE,QAAQ,8BAA8B,EAAE,KAAK,YAAY,OAAO;AAAA,YAClE,YAAY;AAAA;AAAA,UAEd,OAAO;AAAA;AAAA,QAET,YAAY,CAAC,CAAC;AAAA;AAAA,QAEd,EAAE,WAAW;AAAA;AAAA,YAET,EAAE,QAAQ,8BAA8B,EAAE,KAAK,YAAY,OAAO;AAAA,YAClE,YAAY;AAAA;AAAA,UAEd,OAAO;AAAA;AAAA,QAET,YAAY,EAAE,OAAO,EAAE,GAAG,CAAC;AAAA;AAAA,QAE3B,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,CAAC;AAAA;AAAA;AAAA;AAIlE;"}

package/dist/index224.js

@@ -1,29 +1,5 @@
-import { nothing, html } from "lit";
-function switchTemplate(props) {
-  return html`
-    <label class="sw" for=${props.switchId}>
-      <input
-        id=${props.switchId}
-        class="sw-input"
-        type="checkbox"
-        ?checked=${props.checked}
-        ?disabled=${props.disabled}
-        aria-checked=${props.checked ? "true" : "false"}
-        @change=${props.handleChange}
-      >
-      <span class="sw-track" aria-hidden="true">
-        <span class="sw-thumb"></span>
-      </span>
-      ${props.label ? html`
-        <span class="sw-label">
-          <span class="sw-label-text">${props.label}</span>
-          ${props.sub ? html`<span class="sw-label-sub">${props.sub}</span>` : nothing}
-        </span>
-      ` : nothing}
-    </label>
-  `;
-}
+const sliderCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.rs{--rs-thumb-size: 20px;--rs-track-h: 4px;--rs-fill-color: var(--color-washi-900);--rs-track-bg: var(--color-washi-200);display:flex;flex-direction:column;gap:var(--lib-space-sm);width:100%}.rs-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--lib-space-md)}.rs-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-secondary)}.rs-value{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);min-width:2.5rem;text-align:right;transition:color var(--duration-fast)}.rs-value-unit{color:var(--text-muted);font-size:10px;margin-left:1px}.rs-track-wrap{position:relative;height:var(--rs-thumb-size);display:flex;align-items:center}.rs-track{position:absolute;left:0;right:0;height:var(--rs-track-h);background:var(--rs-track-bg);border-radius:var(--radius-full);overflow:hidden;pointer-events:none}.rs-fill{position:absolute;left:0;top:0;bottom:0;background:var(--rs-fill-color);border-radius:var(--radius-full);transition:width var(--duration-fast),background var(--duration-base);pointer-events:none}.rs-fill-dual{position:absolute;top:0;bottom:0;background:var(--rs-fill-color);border-radius:var(--radius-full);pointer-events:none;transition:left var(--duration-fast),right var(--duration-fast)}.rs input[type=range]{position:absolute;left:0;right:0;width:100%;height:var(--rs-thumb-size);margin:0;padding:0;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;pointer-events:auto}.rs input[type=range]::-webkit-slider-runnable-track{height:var(--rs-track-h);background:transparent;border-radius:var(--radius-full)}.rs input[type=range]::-moz-range-track{height:var(--rs-track-h);background:transparent;border-radius:var(--radius-full)}.rs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--rs-thumb-size);height:var(--rs-thumb-size);border-radius:var(--radius-full);background:var(--bg-elevated);border:2px solid var(--rs-fill-color);box-shadow:var(--shadow-sm),0 0 0 0 transparent;cursor:grab;transition:border-color var(--duration-base),box-shadow var(--duration-base),transform var(--duration-fast);margin-top:calc((var(--rs-track-h) - var(--rs-thumb-size)) / 2)}.rs input[type=range]::-moz-range-thumb{width:var(--rs-thumb-size);height:var(--rs-thumb-size);border-radius:var(--radius-full);background:var(--bg-elevated);border:2px solid var(--rs-fill-color);box-shadow:var(--shadow-sm);cursor:grab;transition:border-color var(--duration-base),box-shadow var(--duration-base)}.rs input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-sm),0 0 0 3px var(--color-ink-10)}.rs input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15);box-shadow:var(--shadow-md)}:host([size="sm"]) .rs{--rs-thumb-size: 14px;--rs-track-h: 3px;gap:var(--lib-space-xs)}:host([size="sm"]) .rs-label{font-size:10px}:host([size="sm"]) .rs-value{font-size:10px}:host([size="lg"]) .rs{--rs-thumb-size: 26px;--rs-track-h: 8px;gap:var(--lib-space-md)}:host([size="lg"]) .rs-label{font-size:var(--text-sm)}:host([size="lg"]) .rs-value{font-size:var(--text-sm)}:host([tone="kaki"]) .rs{--rs-fill-color: var(--color-kaki-500)}:host([tone="celadon"]) .rs{--rs-fill-color: var(--color-celadon-500)}:host([tone="error"]) .rs{--rs-fill-color: var(--color-error)}:host([tone="washi"]) .rs{--rs-fill-color: var(--color-washi-700)}:host([tone="dark"]) .rs{--rs-track-bg: oklch(20% .02 45deg);--rs-fill-color: oklch(65% .02 55deg)}:host([tone="dark"]) .rs-label{color:#574a43}:host([tone="dark"]) .rs-value{color:#998c84}:host([tone="dark"]) .rs-limit{color:#312620}:host([tone="dark"]) .rs-mark{background:#231813}:host([tone="dark"]) .rs-mark.is-filled{background:#998c84}:host([tone="dark"]) .rs-mark-label{color:#312620}:host([tone="dark"]) .rs input[type=range]::-webkit-slider-thumb{background:#0c0604;border-color:#8a7d75}:host([tone="dark"]) .rs input[type=range]::-moz-range-thumb{background:#0c0604;border-color:#8a7d75}:host([disabled]) .rs{opacity:.38;pointer-events:none}:host([disabled]) .rs input[type=range]{cursor:not-allowed}.rs-limits{display:flex;justify-content:space-between;margin-top:calc(-1 * var(--lib-space-xs))}.rs-limit{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}.rs-marks{position:relative;height:10px;margin-top:calc(-1 * var(--lib-space-sm));pointer-events:none}.rs-mark{position:absolute;top:0;transform:translate(-50%);width:1px;height:5px;background:var(--border-default)}.rs-mark.is-filled{background:var(--rs-fill-color)}.rs-mark-label{position:absolute;top:7px;transform:translate(-50%);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wide);color:var(--text-muted);white-space:nowrap}.rs-tooltip-wrap{position:absolute;top:0;height:100%;display:flex;align-items:flex-start;pointer-events:none;transform:translate(-50%)}.rs-tooltip-bubble{position:absolute;bottom:calc(100% + var(--lib-space-sm));left:0;transform:translate(-50%);background:var(--color-washi-900);color:var(--color-washi-50);font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);padding:2px var(--lib-space-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--duration-base)}.rs-tooltip-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--color-washi-900)}.rs-track-wrap:hover .rs-tooltip-bubble{opacity:1}:host([dual]) .rs-track{overflow:visible}:host([dual]) .rs-track-wrap{overflow:visible}:host([dual]) .rs input[type=range]{pointer-events:none}:host([dual]) .rs input[type=range]::-webkit-slider-thumb{pointer-events:auto}:host([dual]) .rs input[type=range]::-moz-range-thumb{pointer-events:auto}:host([dual]) .rs .rs-input-max{z-index:1}:host([vertical]) .rs{width:auto;align-items:center}:host([vertical]) .rs-vert-wrap{position:relative;width:var(--rs-thumb-size);height:160px;flex-shrink:0}:host([vertical][size="sm"]) .rs-vert-wrap{height:120px}:host([vertical][size="lg"]) .rs-vert-wrap{height:200px}:host([vertical]) .rs-track-wrap{position:absolute;top:50%;left:50%;width:160px;height:var(--rs-thumb-size);transform:translate(-50%,-50%) rotate(-90deg)}:host([vertical][size="sm"]) .rs-track-wrap{width:120px}:host([vertical][size="lg"]) .rs-track-wrap{width:200px}:host([vertical]) .rs-label-row{flex-direction:column;align-items:center;gap:2px;width:auto}:host([vertical]) .rs-label-row .rs-label{text-align:center}:host([vertical]) .rs-label-row .rs-value{min-width:auto;text-align:center}@media(prefers-reduced-motion:reduce){.rs-fill,.rs-fill-dual{transition:none}.rs input[type=range]::-webkit-slider-thumb{transition:none}}}';
 export {
-  switchTemplate
+  sliderCss as default
 };
 //# sourceMappingURL=index224.js.map

package/dist/index224.js.map

@@ -1 +1 @@
-{"version":3,"file":"index224.js","sources":["../src/components/atoms/switch/lib-switch.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\n\nexport type LibSwitchVariant = 'default' | 'kintsugi';\nexport type LibSwitchSize    = 'sm' | 'md' | 'lg';\n\nexport interface SwitchTemplateProps {\n  switchId:  string;\n  checked:   boolean;\n  disabled:  boolean;\n  label:     string;\n  sub:       string;\n  handleChange: (e: Event) => void;\n}\n\n/**\n * Template para lib-switch.\n *\n * Estructura:\n *   label.sw\n *     input[type=checkbox]  — oculto, accesible\n *     span.sw-track\n *       span.sw-thumb\n *     span.sw-label          — (opcional) si hay label\n *       span.sw-label-text\n *       span.sw-label-sub    — (opcional) si hay sub\n *\n * El estado visual (checked, disabled, variant, size) se controla\n * íntegramente desde :host([attr]) en el CSS — el template es estático.\n */\nexport function switchTemplate(props: SwitchTemplateProps): TemplateResult {\n  return html`\n    <label class=\"sw\" for=${props.switchId}>\n      <input\n        id=${props.switchId}\n        class=\"sw-input\"\n        type=\"checkbox\"\n        ?checked=${props.checked}\n        ?disabled=${props.disabled}\n        aria-checked=${props.checked ? 'true' : 'false'}\n        @change=${props.handleChange}\n      >\n      <span class=\"sw-track\" aria-hidden=\"true\">\n        <span class=\"sw-thumb\"></span>\n      </span>\n      ${props.label ? html`\n        <span class=\"sw-label\">\n          <span class=\"sw-label-text\">${props.label}</span>\n          ${props.sub ? html`<span class=\"sw-label-sub\">${props.sub}</span>` : nothing}\n        </span>\n      ` : nothing}\n    </label>\n  `;\n}"],"names":[],"mappings":";AA6BO,SAAS,eAAe,OAA4C;AACzE,SAAO;AAAA,4BACmB,MAAM,QAAQ;AAAA;AAAA,aAE7B,MAAM,QAAQ;AAAA;AAAA;AAAA,mBAGR,MAAM,OAAO;AAAA,oBACZ,MAAM,QAAQ;AAAA,uBACX,MAAM,UAAU,SAAS,OAAO;AAAA,kBACrC,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,QAK5B,MAAM,QAAQ;AAAA;AAAA,wCAEkB,MAAM,KAAK;AAAA,YACvC,MAAM,MAAM,kCAAkC,MAAM,GAAG,YAAY,OAAO;AAAA;AAAA,UAE5E,OAAO;AAAA;AAAA;AAGjB;"}
+{"version":3,"file":"index224.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index225.js

@@ -1,5 +1,5 @@
-const switchCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;align-items:center;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.sw{display:inline-flex;align-items:center;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none}.sw-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.sw-track{position:relative;flex-shrink:0;width:40px;height:24px;border-radius:var(--radius-full);background:var(--color-washi-300);transition:background var(--duration-base) var(--ease-default),box-shadow var(--duration-slow) var(--ease-out)}.sw-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--radius-full);background:var(--color-white);box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-bounce),width var(--duration-base) var(--ease-default),background var(--duration-slow) var(--ease-default)}.sw-label{display:flex;flex-direction:column;gap:2px}.sw-label-text{font-family:var(--lib-font-body);font-size:var(--text-base);color:var(--text-primary);line-height:var(--leading-snug);transition:color var(--duration-base) var(--ease-default)}.sw-label-sub{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);line-height:var(--leading-snug)}:host([checked]) .sw-track{background:var(--color-washi-900)}:host([checked]) .sw-thumb{transform:translate(16px)}.sw:hover .sw-thumb{width:22px}:host([checked]) .sw:hover .sw-thumb{transform:translate(12px)}:host([disabled]){pointer-events:none}:host([disabled]) .sw{opacity:.35;cursor:not-allowed}.sw-input:focus-visible~.sw-track{outline:2px solid var(--color-washi-700);outline-offset:2px}:host([size="sm"]) .sw-track{width:30px;height:18px}:host([size="sm"]) .sw-thumb{width:12px;height:12px;top:2px;left:2px}:host([size="sm"][checked]) .sw-thumb{transform:translate(12px)}:host([size="sm"]) .sw:hover .sw-thumb{width:15px}:host([size="sm"][checked]) .sw:hover .sw-thumb{transform:translate(9px)}:host([size="lg"]) .sw-track{width:52px;height:30px}:host([size="lg"]) .sw-thumb{width:22px;height:22px;top:3px;left:3px}:host([size="lg"][checked]) .sw-thumb{transform:translate(22px)}:host([size="lg"]) .sw:hover .sw-thumb{width:27px}:host([size="lg"][checked]) .sw:hover .sw-thumb{transform:translate(17px)}@keyframes kin-pulse{0%,to{opacity:.45}50%{opacity:1}}@keyframes kin-pulse-on{0%,to{opacity:.7}50%{opacity:1}}@keyframes kin-thumb-glow{0%,to{box-shadow:0 0 6px 1px #be96324d}50%{box-shadow:0 0 14px 3px #be96328c}}:host([variant="kintsugi"]){--gold-bright: oklch(80% .09 78deg);--gold-mid: oklch(72% .06 68deg);--gold-deep: oklch(62% .05 60deg)}:host([variant="kintsugi"]) .sw-track{background:#0c0402;overflow:visible}:host([variant="kintsugi"]) .sw-track:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-full);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;animation:kin-pulse 3.5s ease-in-out infinite}:host([variant="kintsugi"]) .sw-thumb{background:#221812;box-shadow:none}:host([variant="kintsugi"][checked]) .sw-track{background:#1e0d01}:host([variant="kintsugi"][checked]) .sw-track:before{animation:kin-pulse-on 2.4s ease-in-out infinite}:host([variant="kintsugi"][checked]) .sw-thumb{background:linear-gradient(135deg,var(--gold-bright) 0%,var(--gold-mid) 60%,var(--gold-deep) 100%);animation:kin-thumb-glow 2.4s ease-in-out infinite}:host([variant="kintsugi"]) .sw-input:focus-visible~.sw-track:before{opacity:1;animation:none}:host([variant="kintsugi"]) .sw-label-text{color:#afa299}:host([variant="kintsugi"]) .sw-label-sub{color:#51453e}:host([variant="kintsugi"][checked]) .sw-label-text{color:#dfcab2}@media(prefers-reduced-motion:reduce){.sw-thumb,.sw-track{transition:none}:host([variant="kintsugi"]) .sw-track:before,:host([variant="kintsugi"][checked]) .sw-track:before,:host([variant="kintsugi"][checked]) .sw-thumb{animation:none}}}';
+const segmentedCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}:host{display:inline-block;vertical-align:middle}:host([full]){display:block;width:100%}}@layer components{.seg{display:inline-flex;align-items:stretch;position:relative;-webkit-user-select:none;user-select:none}.seg-thumb{position:absolute;top:0;bottom:0;left:0;pointer-events:none;z-index:1;transition:transform var(--duration-slow) var(--ease-bounce),width var(--duration-slow) var(--ease-out)}.seg-option{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;transition:color var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out)}.seg-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.seg-badge-dot{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-family:var(--lib-font-mono);letter-spacing:0;line-height:1;background:var(--color-kaki-500);color:var(--color-white);border-radius:var(--radius-full)}.seg-option.is-active .seg-badge-dot{background:#ffffff4d}.seg-option.is-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}:host([disabled]) .seg{opacity:.55;pointer-events:none}:host([full]) .seg{width:100%}:host([full]) .seg-option{flex:1}:host([icon-only]) .seg-option{min-width:44px;padding:var(--lib-space-sm)}:host([variant="outline"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="outline"]) .seg-thumb{background:var(--color-washi-900);top:3px;bottom:3px}:host([variant="outline"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="outline"]) .seg-option:hover{color:var(--text-primary)}:host([variant="outline"]) .seg-option.is-active{color:var(--color-washi-50)}:host([variant="underline"]) .seg{background:transparent;border-bottom:1px solid var(--border-subtle);gap:0;padding:0}:host([variant="underline"]) .seg-thumb{height:2px;top:auto;bottom:-1px;background:var(--color-kaki-500);transition:transform var(--duration-slow) var(--ease-bounce)}:host([variant="underline"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:var(--text-muted);border-bottom:2px solid transparent}:host([variant="underline"]) .seg-option:hover{color:var(--text-primary)}:host([variant="underline"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="pill"]) .seg{background:var(--color-washi-100);border:1px solid var(--border-subtle);border-radius:var(--radius-full);padding:4px;gap:0}:host([variant="pill"]) .seg-thumb{background:var(--bg-elevated);border-radius:var(--radius-full);top:4px;bottom:4px;box-shadow:0 1px 4px var(--color-ink-20)}:host([variant="pill"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:var(--text-muted);border-radius:var(--radius-full);min-width:80px}:host([variant="pill"]) .seg-option:hover{color:var(--text-primary)}:host([variant="pill"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="ghost"]) .seg{background:transparent;gap:0}:host([variant="ghost"]) .seg-thumb{display:none}:host([variant="ghost"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);border-right:1px solid var(--border-subtle)}:host([variant="ghost"]) .seg-option:last-child{border-right:none}:host([variant="ghost"]) .seg-option:hover{color:var(--text-primary)}:host([variant="ghost"]) .seg-option.is-active{color:var(--text-primary)}:host([variant="ghost"]) .seg-option.is-active:after{content:"";position:absolute;bottom:-1px;left:var(--lib-space-md);right:var(--lib-space-md);height:1px;background:var(--color-kaki-500)}:host([variant="kaki"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="kaki"]) .seg-thumb{background:var(--color-kaki-500);top:3px;bottom:3px}:host([variant="kaki"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="kaki"]) .seg-option:hover{color:var(--text-primary)}:host([variant="kaki"]) .seg-option.is-active{color:var(--color-white)}:host([variant="celadon"]) .seg{border:1.5px solid var(--border-default);background:var(--bg-elevated);padding:3px;gap:0}:host([variant="celadon"]) .seg-thumb{background:var(--color-celadon-500);top:3px;bottom:3px}:host([variant="celadon"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:var(--text-muted);min-width:80px}:host([variant="celadon"]) .seg-option:hover{color:var(--text-primary)}:host([variant="celadon"]) .seg-option.is-active{color:var(--color-white)}:host([variant="dark-outline"]) .seg{border:1px solid rgb(255,255,255,.1);background:#ffffff0a;padding:3px;gap:0}:host([variant="dark-outline"]) .seg-thumb{background:#faf7f41f;top:3px;bottom:3px}:host([variant="dark-outline"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:#faf7f447;min-width:80px}:host([variant="dark-outline"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-outline"]) .seg-option.is-active{color:#faf7f4cc}:host([variant="dark-pill"]) .seg{background:#ffffff0f;border:1px solid rgb(255,255,255,.07);border-radius:var(--radius-full);padding:4px;gap:0}:host([variant="dark-pill"]) .seg-thumb{background:#faf7f41f;border-radius:var(--radius-full);top:4px;bottom:4px}:host([variant="dark-pill"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:#faf7f447;border-radius:var(--radius-full);min-width:80px}:host([variant="dark-pill"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-pill"]) .seg-option.is-active{color:#faf7f4d9}:host([variant="dark-kaki"]) .seg{border:1px solid rgb(255,255,255,.07);background:#ffffff08;padding:3px;gap:0}:host([variant="dark-kaki"]) .seg-thumb{background:var(--color-kaki-500);top:3px;bottom:3px}:host([variant="dark-kaki"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-md);color:#faf7f44d;min-width:80px}:host([variant="dark-kaki"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-kaki"]) .seg-option.is-active{color:var(--color-white)}:host([variant="dark-underline"]) .seg{background:transparent;border-bottom:1px solid rgb(255,255,255,.07);gap:0;padding:0}:host([variant="dark-underline"]) .seg-thumb{height:2px;top:auto;bottom:-1px;background:var(--color-kaki-400);transition:transform var(--duration-slow) var(--ease-bounce)}:host([variant="dark-underline"]) .seg-option{padding:var(--lib-space-sm) calc(var(--lib-space-md) + var(--lib-space-sm));color:#faf7f447}:host([variant="dark-underline"]) .seg-option:hover{color:#faf7f4a6}:host([variant="dark-underline"]) .seg-option.is-active{color:#faf7f4cc}:host([size="sm"]) .seg-option{padding:var(--lib-space-xs) var(--lib-space-md);font-size:10px;min-width:60px}:host([size="sm"][variant="pill"]) .seg{padding:3px;border-radius:var(--radius-full)}:host([size="sm"][variant="pill"]) .seg-thumb{top:3px;bottom:3px}:host([size="sm"][variant="dark-pill"]) .seg{padding:3px;border-radius:var(--radius-full)}:host([size="sm"][variant="dark-pill"]) .seg-thumb{top:3px;bottom:3px}:host([size="sm"][variant="outline"]) .seg{padding:2px}:host([size="sm"][variant="outline"]) .seg-thumb{top:2px;bottom:2px}:host([size="sm"][variant="kaki"]) .seg{padding:2px}:host([size="sm"][variant="kaki"]) .seg-thumb{top:2px;bottom:2px}:host([size="lg"]) .seg-option{padding:var(--lib-space-sm) var(--lib-space-lg);font-size:.75rem;min-width:100px}:host([size="lg"][variant="pill"]) .seg{padding:5px}:host([size="lg"][variant="pill"]) .seg-thumb{top:5px;bottom:5px}:host([size="lg"][variant="dark-pill"]) .seg{padding:5px}:host([size="lg"][variant="dark-pill"]) .seg-thumb{top:5px;bottom:5px}:host([glitch]) .seg-option.is-active:before,:host([glitch]) .seg-option.is-active:after{content:attr(data-label);position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;pointer-events:none;opacity:0}:host([glitch]) .seg-option.is-active:before{color:var(--color-kaki-400);mix-blend-mode:screen}:host([glitch]) .seg-option.is-active:after{color:var(--color-celadon-400);mix-blend-mode:screen}:host([glitch]) .seg-option.glitch-on:before{opacity:.7;animation:seg-glitch-a .24s steps(1) infinite}:host([glitch]) .seg-option.glitch-on:after{opacity:.5;animation:seg-glitch-b .24s steps(1) infinite;animation-delay:30ms}@keyframes seg-glitch-a{0%{clip-path:inset(30% 0 50% 0);transform:translate(-2px)}50%{clip-path:inset(60% 0 10% 0);transform:translate(2px)}}@keyframes seg-glitch-b{0%{clip-path:inset(50% 0 20% 0);transform:translate(2px)}50%{clip-path:inset(10% 0 60% 0);transform:translate(-2px)}}.seg-ripple{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.seg-ripple-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:currentcolor;transform:scale(0);opacity:.25;animation:seg-ripple .36s ease-out forwards}@keyframes seg-ripple{to{transform:scale(40);opacity:0}}}';
 export {
-  switchCss as default
+  segmentedCss as default
 };
 //# sourceMappingURL=index225.js.map

package/dist/index226.js

@@ -1,21 +1,75 @@
-import { html } from "lit";
-function selectOptionTemplate(props) {
+import { nothing, html } from "lit";
+import { map as o } from "./index232.js";
+function segmentedTemplate(props) {
+  const {
+    options,
+    value,
+    variant,
+    size,
+    full,
+    iconOnly,
+    disabled,
+    glitch,
+    thumbStyle,
+    onSelect
+  } = props;
+  const isGhost = variant === "ghost";
+  const trackCls = [
+    "seg",
+    `seg-${variant}`,
+    size !== "md" ? `seg-${size}` : "",
+    full ? "seg-full" : "",
+    iconOnly ? "seg-icon-only" : "",
+    glitch ? "seg-glitch" : ""
+  ].filter(Boolean).join(" ");
   return html`
     <div
-      class="option"
-      role="option"
-      aria-selected="${props.selected}"
-      aria-disabled="${props.disabled}"
-      @click="${props.handleClick}"
+      class="${trackCls}"
+      role="radiogroup"
+      aria-disabled="${disabled}"
     >
-      <span class="option-label">
-        <slot></slot>
-      </span>
-      <span class="option-check" aria-hidden="true"></span>
+      <!-- Thumb — indicador animado de selección -->
+      ${isGhost ? nothing : html`<div class="seg-thumb" style="${thumbStyle}"></div>`}
+
+      <!-- Opciones -->
+      ${o(options, (opt) => {
+    const isActive = opt.value === value;
+    const isDisabled = opt.disabled ?? false;
+    const optCls = [
+      "seg-option",
+      isActive ? "is-active" : "",
+      isDisabled ? "is-disabled" : ""
+    ].filter(Boolean).join(" ");
+    return html`
+          <div
+            class="${optCls}"
+            role="radio"
+            aria-checked="${isActive}"
+            aria-disabled="${isDisabled}"
+            data-label="${opt.label}"
+            data-value="${opt.value}"
+            @click="${(e) => {
+      if (disabled || isDisabled) return;
+      onSelect(opt, e);
+    }}"
+          >
+            <!-- Icono Phosphor (slot reutilizando lib-icon) -->
+            ${opt.icon ? html`<span class="seg-icon">
+                  <lib-icon name="${opt.icon}" size="xs"></lib-icon>
+                </span>` : nothing}
+
+            <!-- Label — oculto si icon-only -->
+            ${iconOnly ? nothing : html`<span class="seg-label">${opt.label}</span>`}
+
+            <!-- Badge numérico opcional -->
+            ${opt.badge != null ? html`<span class="seg-badge-dot">${opt.badge}</span>` : nothing}
+          </div>
+        `;
+  })}
     </div>
   `;
 }
 export {
-  selectOptionTemplate
+  segmentedTemplate
 };
 //# sourceMappingURL=index226.js.map

package/dist/index226.js.map

@@ -1 +1 @@
-{"version":3,"file":"index226.js","sources":["../src/components/atoms/select-option/lib-select-option.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { SelectOptionTemplateProps } from './lib-select-option.types';\n\nexport function selectOptionTemplate(props: SelectOptionTemplateProps): TemplateResult {\n  return html`\n    <div\n      class=\"option\"\n      role=\"option\"\n      aria-selected=\"${props.selected}\"\n      aria-disabled=\"${props.disabled}\"\n      @click=\"${props.handleClick}\"\n    >\n      <span class=\"option-label\">\n        <slot></slot>\n      </span>\n      <span class=\"option-check\" aria-hidden=\"true\"></span>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,qBAAqB,OAAkD;AACrF,SAAO;AAAA;AAAA;AAAA;AAAA,uBAIc,MAAM,QAAQ;AAAA,uBACd,MAAM,QAAQ;AAAA,gBACrB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC;"}
+{"version":3,"file":"index226.js","sources":["../src/components/molecules/segmented-control/lib-segmented-control.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport type { SegmentedOption, SegmentedTemplateProps } from './lib-segmented-control.types';\n\n/**\n * Template del componente lib-segmented-control.\n *\n * El thumb se posiciona via `style` calculado en el componente\n * (offsetLeft / offsetWidth del option activo).\n * La variante ghost oculta el thumb con CSS y usa un ::after de línea.\n */\nexport function segmentedTemplate(props: SegmentedTemplateProps): TemplateResult {\n  const {\n    options, value, variant, size, full,\n    iconOnly, disabled, glitch, thumbStyle, onSelect,\n  } = props;\n\n  const isGhost      = variant === 'ghost';\n  //const isUnderline  = variant === 'underline' || variant === 'dark-underline';\n  //const isPill       = variant === 'pill' || variant === 'dark-pill';\n\n  const trackCls = [\n    'seg',\n    `seg-${variant}`,\n    size !== 'md' ? `seg-${size}` : '',\n    full     ? 'seg-full'      : '',\n    iconOnly ? 'seg-icon-only' : '',\n    glitch   ? 'seg-glitch'    : '',\n  ].filter(Boolean).join(' ');\n\n  return html`\n    <div\n      class=\"${trackCls}\"\n      role=\"radiogroup\"\n      aria-disabled=\"${disabled}\"\n    >\n      <!-- Thumb — indicador animado de selección -->\n      ${isGhost ? nothing : html`<div class=\"seg-thumb\" style=\"${thumbStyle}\"></div>`}\n\n      <!-- Opciones -->\n      ${map(options, (opt: SegmentedOption) => {\n        const isActive   = opt.value === value;\n        const isDisabled = opt.disabled ?? false;\n\n        const optCls = [\n          'seg-option',\n          isActive   ? 'is-active'   : '',\n          isDisabled ? 'is-disabled' : '',\n        ].filter(Boolean).join(' ');\n\n        return html`\n          <div\n            class=\"${optCls}\"\n            role=\"radio\"\n            aria-checked=\"${isActive}\"\n            aria-disabled=\"${isDisabled}\"\n            data-label=\"${opt.label}\"\n            data-value=\"${opt.value}\"\n            @click=\"${(e: MouseEvent): void => {\n              if (disabled || isDisabled) return;\n              onSelect(opt, e);\n            }}\"\n          >\n            <!-- Icono Phosphor (slot reutilizando lib-icon) -->\n            ${opt.icon\n              ? html`<span class=\"seg-icon\">\n                  <lib-icon name=\"${opt.icon}\" size=\"xs\"></lib-icon>\n                </span>`\n              : nothing}\n\n            <!-- Label — oculto si icon-only -->\n            ${iconOnly\n              ? nothing\n              : html`<span class=\"seg-label\">${opt.label}</span>`}\n\n            <!-- Badge numérico opcional -->\n            ${opt.badge != null\n              ? html`<span class=\"seg-badge-dot\">${opt.badge}</span>`\n              : nothing}\n          </div>\n        `;\n      })}\n    </div>\n  `;\n}"],"names":["map"],"mappings":";;AAWO,SAAS,kBAAkB,OAA+C;AAC/E,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAO;AAAA,IAAS;AAAA,IAAM;AAAA,IAC/B;AAAA,IAAU;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAY;AAAA,EAAA,IACtC;AAEJ,QAAM,UAAe,YAAY;AAIjC,QAAM,WAAW;AAAA,IACf;AAAA,IACA,OAAO,OAAO;AAAA,IACd,SAAS,OAAO,OAAO,IAAI,KAAK;AAAA,IAChC,OAAW,aAAkB;AAAA,IAC7B,WAAW,kBAAkB;AAAA,IAC7B,SAAW,eAAkB;AAAA,EAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,SAAO;AAAA;AAAA,eAEM,QAAQ;AAAA;AAAA,uBAEA,QAAQ;AAAA;AAAA;AAAA,QAGvB,UAAU,UAAU,qCAAqC,UAAU,UAAU;AAAA;AAAA;AAAA,QAG7EA,EAAI,SAAS,CAAC,QAAyB;AACvC,UAAM,WAAa,IAAI,UAAU;AACjC,UAAM,aAAa,IAAI,YAAY;AAEnC,UAAM,SAAS;AAAA,MACb;AAAA,MACA,WAAa,cAAgB;AAAA,MAC7B,aAAa,gBAAgB;AAAA,IAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,WAAO;AAAA;AAAA,qBAEM,MAAM;AAAA;AAAA,4BAEC,QAAQ;AAAA,6BACP,UAAU;AAAA,0BACb,IAAI,KAAK;AAAA,0BACT,IAAI,KAAK;AAAA,sBACb,CAAC,MAAwB;AACjC,UAAI,YAAY,WAAY;AAC5B,eAAS,KAAK,CAAC;AAAA,IACjB,CAAC;AAAA;AAAA;AAAA,cAGC,IAAI,OACF;AAAA,oCACoB,IAAI,IAAI;AAAA,2BAE5B,OAAO;AAAA;AAAA;AAAA,cAGT,WACE,UACA,+BAA+B,IAAI,KAAK,SAAS;AAAA;AAAA;AAAA,cAGnD,IAAI,SAAS,OACX,mCAAmC,IAAI,KAAK,YAC5C,OAAO;AAAA;AAAA;AAAA,EAGjB,CAAC,CAAC;AAAA;AAAA;AAGR;"}

package/dist/index227.js

@@ -1,5 +1,100 @@
-const optionCss = `@layer tokens,reset,components;@layer reset{:host{display:block}:host:is([search-hidden]){display:none}*,*:before,*:after{box-sizing:border-box}}@layer components{.option{display:flex;align-items:center;gap:var(--lib-space-sm);padding:var(--lib-space-sm) var(--lib-space-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default)}:host(:not([disabled],[selected]):hover) .option{background:var(--bg-surface)}:host([selected]) .option{background:var(--color-washi-100)}:host([disabled]) .option{opacity:.38;cursor:not-allowed;pointer-events:none}.option-label{flex:1;min-width:0;font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-snug);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}:host(:hover) .option-label{color:var(--text-primary)}:host([selected]) .option-label{color:var(--text-primary)}:host([disabled]) .option-label{color:var(--text-muted)}.option-check{flex-shrink:0;width:14px;height:14px;opacity:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%23221C16' d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;transition:opacity var(--duration-fast) var(--ease-default)}:host([selected]) .option-check{opacity:1}}`;
+import { nothing, html } from "lit";
+function selectTemplate(props) {
+  const {
+    label,
+    placeholder,
+    hint,
+    errorMessage,
+    required,
+    optional,
+    open,
+    error,
+    selectedLabel,
+    hasSelection,
+    multi,
+    selectedCount,
+    searchable,
+    searchQuery,
+    visibleCount,
+    onTriggerClick,
+    onSearchInput,
+    onConfirm
+  } = props;
+  const labelTpl = label ? html`
+        <label class="sel-label">
+          ${label}
+          ${required ? html`<span class="sel-label-req" aria-hidden="true">*</span>` : nothing}
+          ${optional ? html`<span class="sel-label-opt">(opcional)</span>` : nothing}
+        </label>` : nothing;
+  const hintTpl = error && errorMessage ? html`<span class="sel-hint is-error">${errorMessage}</span>` : hint ? html`<span class="sel-hint">${hint}</span>` : nothing;
+  const triggerValueTpl = multi ? selectedCount > 0 ? html`
+          <span class="sel-trigger-value">
+            ${selectedCount} seleccionada${selectedCount !== 1 ? "s" : ""}
+            <span class="sel-trigger-count">${selectedCount}</span>
+          </span>` : html`<span class="sel-trigger-value is-placeholder">${placeholder}</span>` : hasSelection ? html`<span class="sel-trigger-value">${selectedLabel}</span>` : html`<span class="sel-trigger-value is-placeholder">${placeholder}</span>`;
+  const searchTpl = searchable ? html`
+        <div class="sel-panel-search">
+          <span class="sel-panel-search-icon" aria-hidden="true"></span>
+          <input
+            type="text"
+            placeholder="Buscar…"
+            .value="${searchQuery}"
+            @input="${onSearchInput}"
+            autocomplete="off"
+            aria-label="Buscar opciones"
+          >
+        </div>` : nothing;
+  const footerTpl = multi ? html`
+        <div class="sel-panel-footer">
+          <span class="sel-panel-footer-text">
+            ${selectedCount} seleccionada${selectedCount !== 1 ? "s" : ""}
+          </span>
+          <button
+            class="sel-panel-footer-btn"
+            type="button"
+            @click="${onConfirm}"
+          >Confirmar</button>
+        </div>` : nothing;
+  const emptyTpl = searchable && searchQuery && visibleCount === 0 ? html`<div class="sel-panel-empty">Sin resultados</div>` : nothing;
+  return html`
+    <div class="sel-field">
+
+      ${labelTpl}
+
+      <div class="sel-custom">
+        <button
+          class="sel-trigger"
+          type="button"
+          aria-haspopup="listbox"
+          aria-expanded="${open}"
+          @click="${onTriggerClick}"
+        >
+          ${triggerValueTpl}
+          <span class="sel-trigger-chevron" aria-hidden="true"></span>
+        </button>
+
+        <div
+          class="sel-panel"
+          role="listbox"
+          aria-multiselectable="${multi}"
+        >
+          ${searchTpl}
+
+          <div class="sel-panel-list">
+            <slot></slot>
+            ${emptyTpl}
+          </div>
+
+          ${footerTpl}
+        </div>
+      </div>
+
+      ${hintTpl}
+
+    </div>
+  `;
+}
 export {
-  optionCss as default
+  selectTemplate
 };
 //# sourceMappingURL=index227.js.map