@shibui-ui/ui 1.25.0 → 1.25.1

package/dist/index232.js

@@ -1,5 +1,15 @@
-const checkboxCardCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.cc-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc{display:block;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}.cc:focus-within .cc-body{outline:2px solid var(--color-kaki-400);outline-offset:2px}.cc-body{position:relative;border:1px solid var(--border-subtle);background:var(--bg-elevated);padding:var(--lib-space-lg);overflow:hidden;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.cc:hover .cc-body{border-color:var(--border-default);background:var(--bg-surface)}.cc:active .cc-body{transform:scale(.985)}.cc-body:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgb(255,255,255,.4) 0%,transparent 50%);opacity:0;pointer-events:none;transition:opacity var(--duration-slow)}.cc-input:checked~.cc-body:before{opacity:1}.cc-body:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-kaki-400),transparent);opacity:0;transition:opacity var(--duration-slow)}.cc-input:checked~.cc-body:after{opacity:1}.cc-input:checked~.cc-body{border-color:var(--color-kaki-500);background:var(--color-kaki-50)}.cc-check{position:absolute;top:var(--lib-space-md);right:var(--lib-space-md);width:18px;height:18px;border:1px solid var(--border-default);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2;pointer-events:none;transition:border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out)}.cc-check svg{width:10px;height:10px;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transform:scale(.5);transition:opacity var(--duration-base) var(--ease-bounce),transform var(--duration-base) var(--ease-bounce)}.cc-input:checked~.cc-body .cc-check{border-color:var(--color-kaki-500);background:var(--color-kaki-500)}.cc-input:checked~.cc-body .cc-check svg{opacity:1;transform:scale(1)}.cc-check-pill{border-radius:999px}.cc-icon{margin-bottom:var(--lib-space-md);display:flex;align-items:center}.cc-icon svg,.cc-icon img{width:28px;height:28px;color:var(--text-muted);transition:color var(--duration-base)}.cc-input:checked~.cc-body .cc-icon svg{color:var(--color-kaki-500)}.cc-title{font-family:var(--lib-font-display);font-size:1.2rem;font-weight:300;letter-spacing:var(--tracking-tight);color:var(--text-primary);line-height:1.2;margin-bottom:var(--lib-space-xs);padding-right:var(--lib-space-xl)}.cc-input:checked~.cc-body .cc-title{color:var(--color-kaki-600)}.cc-desc{font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);line-height:1.7}.cc-input:checked~.cc-body .cc-desc{color:var(--text-secondary)}.cc-badge{display:inline-block;font-family:var(--lib-font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--border-subtle);color:var(--text-muted);margin-bottom:var(--lib-space-sm);transition:border-color var(--duration-base),color var(--duration-base)}.cc-input:checked~.cc-body .cc-badge{border-color:#b85a1e4d;color:var(--color-kaki-500)}.cc-price{font-family:var(--lib-font-display);font-size:2rem;font-weight:300;letter-spacing:var(--tracking-tight);line-height:1;color:var(--text-primary);margin-top:var(--lib-space-md)}.cc-price sup{font-size:.9rem;vertical-align:super;color:var(--text-muted);font-family:var(--lib-font-mono);letter-spacing:.06em}.cc-price sub{font-size:.65rem;vertical-align:baseline;color:var(--text-muted);font-family:var(--lib-font-mono);letter-spacing:.08em}.cc-input:checked~.cc-body .cc-price{color:var(--color-kaki-600)}.cc-divider{height:1px;background:var(--border-subtle);margin:var(--lib-space-md) 0;transition:background var(--duration-base)}.cc-input:checked~.cc-body .cc-divider{background:#b85a1e33}.cc-features{list-style:none;display:flex;flex-direction:column;gap:var(--lib-space-sm)}.cc-features li{font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-secondary);display:flex;align-items:center;gap:var(--lib-space-sm)}.cc-features li:before{content:"";width:12px;height:1px;background:var(--border-default);flex-shrink:0;transition:background var(--duration-base),width var(--duration-base)}.cc-input:checked~.cc-body .cc-features li:before{background:var(--color-kaki-400);width:14px}.cc-input:checked~.cc-body .cc-features li{color:var(--text-primary)}.cc-ripple{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.cc-ripple-dot{position:absolute;width:4px;height:4px;background:var(--color-kaki-400);border-radius:50%;transform:scale(0);opacity:.18;animation:cc-ripple .5s ease-out forwards}@keyframes cc-ripple{to{transform:scale(80);opacity:0}}:host([layout="horizontal"]) .cc-body{display:flex;align-items:center;gap:var(--lib-space-lg);padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="horizontal"]) .cc-icon{margin-bottom:0;flex-shrink:0}:host([layout="horizontal"]) .cc-content{flex:1;min-width:0}:host([layout="horizontal"]) .cc-title{margin-bottom:2px;font-size:1rem;padding-right:var(--lib-space-lg)}:host([layout="horizontal"]) .cc-check{top:50%;right:var(--lib-space-md);transform:translateY(-50%)}:host([layout="compact"]) .cc-body{padding:var(--lib-space-md) var(--lib-space-lg)}:host([layout="compact"]) .cc-title{font-size:1rem}:host([color="celadon"]) .cc-input:checked~.cc-body{border-color:var(--color-celadon-500);background:var(--color-celadon-50)}:host([color="celadon"]) .cc-input:checked~.cc-body:after{background:linear-gradient(90deg,transparent,var(--color-celadon-400),transparent)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-check{border-color:var(--color-celadon-500);background:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-title{color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-icon svg{color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-badge{border-color:#3571644d;color:var(--color-celadon-500)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-features li:before{background:var(--color-celadon-400)}:host([color="celadon"]) .cc-input:checked~.cc-body .cc-divider{background:#35716433}:host([color="celadon"]) .cc-ripple-dot{background:var(--color-celadon-400)}:host([color="celadon"]) .cc:focus-within .cc-body{outline-color:var(--color-celadon-400)}:host([input-type="radio"]) .cc-check{border-radius:50%}:host([input-type="radio"]) .cc-input:checked~.cc-body .cc-check{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}:host([dark]) .cc-body{background:#ffffff0a;border-color:#ffffff14}:host([dark]) .cc:hover .cc-body{border-color:#ffffff26;background:#ffffff0f}:host([dark]) .cc-check{background:#ffffff0f;border-color:#ffffff24}:host([dark]) .cc-title{color:#faf7f4bf}:host([dark]) .cc-desc{color:#faf7f447}:host([dark]) .cc-badge{border-color:#ffffff1a;color:#faf7f44d}:host([dark]) .cc-divider{background:#ffffff14}:host([dark]) .cc-features li{color:#faf7f44d}:host([dark]) .cc-features li:before{background:#ffffff26}:host([dark]) .cc-price{color:#faf7f4bf}:host([dark]) .cc-price sup,:host([dark]) .cc-price sub{color:#faf7f44d}:host([dark]) .cc-input:checked~.cc-body{border-color:var(--color-kaki-500);background:#b85a1e14}:host([dark]) .cc-input:checked~.cc-body .cc-check{border-color:var(--color-kaki-500);background:var(--color-kaki-500)}:host([dark]) .cc-input:checked~.cc-body .cc-title{color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-desc{color:#faf7f466}:host([dark]) .cc-input:checked~.cc-body .cc-badge{border-color:#b85a1e59;color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-divider{background:#b85a1e33}:host([dark]) .cc-input:checked~.cc-body .cc-features li{color:#faf7f48c}:host([dark]) .cc-input:checked~.cc-body .cc-features li:before{background:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-price{color:var(--color-kaki-400)}:host([dark]) .cc-input:checked~.cc-body .cc-icon svg{color:var(--color-kaki-400)}:host([disabled]) .cc{pointer-events:none;opacity:.4}:host([disabled]) .cc-body{cursor:not-allowed}:host([error]) .cc-body{border-color:#c0392b66;background:#c0392b08}:host([error]) .cc:hover .cc-body{border-color:var(--color-error)}.cc-img-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:grayscale(.4);transition:filter var(--duration-slow)}.cc-input:checked~.cc-body .cc-img-thumb{filter:grayscale(0)}.cc-img-content{padding:var(--lib-space-md) var(--lib-space-lg) var(--lib-space-lg)}:host([image]) .cc-body{padding:0}:host([image]) .cc-check{top:var(--lib-space-sm);right:var(--lib-space-sm);background:#ffffffd9}:host([image]) .cc-input:checked~.cc-body .cc-check{background:var(--color-kaki-500);border-color:var(--color-kaki-500)}}';
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function* o(o2, f) {
+  if (void 0 !== o2) {
+    let i = 0;
+    for (const t of o2) yield f(t, i++);
+  }
+}
 export {
-  checkboxCardCss as default
+  o as map
 };
 //# sourceMappingURL=index232.js.map

package/dist/index232.js.map

@@ -1 +1 @@
-{"version":3,"file":"index232.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index232.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/map.js"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction*o(o,f){if(void 0!==o){let i=0;for(const t of o)yield f(t,i++)}}export{o as map};\n//# sourceMappingURL=map.js.map\n"],"names":["o"],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,UAAS,EAAEA,IAAE,GAAE;AAAC,MAAG,WAASA,IAAE;AAAC,QAAI,IAAE;AAAE,eAAU,KAAKA,GAAE,OAAM,EAAE,GAAE,GAAG;AAAA,EAAC;AAAC;","x_google_ignoreList":[0]}

package/dist/index233.js

@@ -1,60 +1,12 @@
 import { html } from "lit";
-const removeSvg = html`
-  <svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-    <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>
-  </svg>`;
-function staticChip() {
+function accordionTemplate(props) {
   return html`
-    <span class="chip" part="chip" role="note" tabindex="-1">
-      <slot name="icon"></slot>
+    <div class="accordion__root" @accordion-toggle=${props.onToggle}>
       <slot></slot>
-    </span>`;
-}
-function toggleChip(ctx) {
-  return html`
-    <button
-      class="chip-toggle"
-      part="chip"
-      role="checkbox"
-      aria-checked="${ctx.selected}"
-      aria-label="${ctx.ariaLabel}"
-      @click="${() => ctx._handleToggle()}"
-      @keydown="${(e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      ctx._handleToggle();
-    }
-  }}"
-    >
-      <slot name="icon"></slot>
-      <slot></slot>
-    </button>`;
-}
-function inputChip(ctx) {
-  return html`
-    <span class="chip-input" part="chip">
-      <slot name="avatar"></slot>
-      <slot name="icon"></slot>
-      <slot></slot>
-      <button
-        class="chip-remove"
-        part="remove"
-        type="button"
-        aria-label="Eliminar ${ctx.ariaLabel || ""}"
-        @click="${(e) => ctx._handleRemove(e)}"
-      >
-        ${removeSvg}
-      </button>
-    </span>`;
-}
-function chipTemplate(ctx) {
-  if (ctx.kind === "toggle") return toggleChip(ctx);
-  if (ctx.kind === "input") return inputChip(ctx);
-  return staticChip(
-    /*ctx*/
-  );
+    </div>
+  `;
 }
 export {
-  chipTemplate
+  accordionTemplate
 };
 //# sourceMappingURL=index233.js.map

package/dist/index233.js.map

@@ -1 +1 @@
-{"version":3,"file":"index233.js","sources":["../src/components/molecules/chip/lib-chip.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibChip } from './lib-chip.component';\n\n/* SVG × para el botón de eliminar */\nconst removeSvg: TemplateResult = html`\n  <svg viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"/>\n  </svg>`;\n\n/* ── Familia STATIC ── */\nfunction staticChip(/*ctx: LibChip*/): TemplateResult {\n  return html`\n    <span class=\"chip\" part=\"chip\" role=\"note\" tabindex=\"-1\">\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n    </span>`;\n}\n\n/* ── Familia TOGGLE ── */\nfunction toggleChip(ctx: LibChip): TemplateResult {\n  return html`\n    <button\n      class=\"chip-toggle\"\n      part=\"chip\"\n      role=\"checkbox\"\n      aria-checked=\"${ctx.selected}\"\n      aria-label=\"${ctx.ariaLabel}\"\n      @click=\"${(): void => ctx._handleToggle()}\"\n      @keydown=\"${(e: KeyboardEvent): void => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          ctx._handleToggle();\n        }\n      }}\"\n    >\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n    </button>`;\n}\n\n/* ── Familia INPUT (removable) ── */\nfunction inputChip(ctx: LibChip): TemplateResult {\n  return html`\n    <span class=\"chip-input\" part=\"chip\">\n      <slot name=\"avatar\"></slot>\n      <slot name=\"icon\"></slot>\n      <slot></slot>\n      <button\n        class=\"chip-remove\"\n        part=\"remove\"\n        type=\"button\"\n        aria-label=\"Eliminar ${ctx.ariaLabel || ''}\"\n        @click=\"${(e: MouseEvent): void => ctx._handleRemove(e)}\"\n      >\n        ${removeSvg}\n      </button>\n    </span>`;\n}\n\nexport function chipTemplate(ctx: LibChip): TemplateResult {\n  if (ctx.kind === 'toggle') return toggleChip(ctx);\n  if (ctx.kind === 'input')  return inputChip(ctx);\n  return staticChip(/*ctx*/);\n}"],"names":[],"mappings":";AAIA,MAAM,YAA4B;AAAA;AAAA;AAAA;AAMlC,SAAS,aAA6C;AACpD,SAAO;AAAA;AAAA;AAAA;AAAA;AAKT;AAGA,SAAS,WAAW,KAA8B;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKa,IAAI,QAAQ;AAAA,oBACd,IAAI,SAAS;AAAA,gBACjB,MAAY,IAAI,eAAe;AAAA,kBAC7B,CAAC,MAA2B;AACtC,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,UAAI,cAAA;AAAA,IACN;AAAA,EACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAKP;AAGA,SAAS,UAAU,KAA8B;AAC/C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BASsB,IAAI,aAAa,EAAE;AAAA,kBAChC,CAAC,MAAwB,IAAI,cAAc,CAAC,CAAC;AAAA;AAAA,UAErD,SAAS;AAAA;AAAA;AAGnB;AAEO,SAAS,aAAa,KAA8B;AACzD,MAAI,IAAI,SAAS,SAAU,QAAO,WAAW,GAAG;AAChD,MAAI,IAAI,SAAS,QAAU,QAAO,UAAU,GAAG;AAC/C,SAAO;AAAA;AAAA,EAAA;AACT;"}
+{"version":3,"file":"index233.js","sources":["../src/components/organisms/accordion/lib-accordion.component.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\n\nexport interface AccordionTemplateProps {\n  onToggle: (e: Event) => void;\n}\n\n/**\n * Plantilla para lib-accordion.\n *\n * El organismo es un contenedor de slot: no renderiza items propios,\n * solo orquesta el comportamiento exclusive y aplica variantes via CSS.\n */\nexport function accordionTemplate(props: AccordionTemplateProps): TemplateResult {\n  return html`\n    <div class=\"accordion__root\" @accordion-toggle=${props.onToggle}>\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAYO,SAAS,kBAAkB,OAA+C;AAC/E,SAAO;AAAA,qDAC4C,MAAM,QAAQ;AAAA;AAAA;AAAA;AAInE;"}

package/dist/index234.js

@@ -1,5 +1,5 @@
-const chipCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-flex;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}button{font:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}}@layer components{.chip,.chip-toggle,.chip-input{display:inline-flex;align-items:center;gap:var(--lib-space-xs);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:9999px;transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),transform var(--duration-fast)}.chip{padding:4px var(--lib-space-sm);background:var(--color-washi-100);color:var(--text-secondary);border:1px solid var(--border-subtle);cursor:default}.chip-toggle{padding:5px var(--lib-space-md);background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);cursor:pointer;position:relative;overflow:hidden}.chip-toggle:hover{border-color:var(--border-strong);color:var(--text-primary);background:var(--bg-surface)}.chip-toggle:active{transform:scale(.96)}.chip-toggle:focus-visible{outline:2px solid var(--color-kaki-400);outline-offset:2px}:host([selected]) .chip-toggle{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);box-shadow:var(--shadow-sm)}.chip-input{padding:4px 4px 4px var(--lib-space-sm);background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default);gap:var(--lib-space-sm)}.chip-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:9999px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;padding:0;flex-shrink:0;transition:background var(--duration-fast),color var(--duration-fast)}.chip-remove:hover{background:var(--color-washi-200);color:var(--text-primary)}.chip-remove svg{width:10px;height:10px}.chip-input.is-entering{animation:chip-enter .25s var(--ease-bounce)}@keyframes chip-enter{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.chip-input.is-removing{animation:chip-remove-anim .2s var(--ease-out) forwards}@keyframes chip-remove-anim{to{opacity:0;transform:scale(.8);max-width:0;padding:0;margin:0;border-width:0}}:host([size="xs"]) .chip{font-size:9px;padding:2px var(--lib-space-sm);letter-spacing:.04em}:host([size="xs"]) .chip-toggle{font-size:9px;padding:3px var(--lib-space-sm);letter-spacing:.04em}:host([size="xs"]) .chip-input{font-size:9px;padding:2px 2px 2px var(--lib-space-sm)}:host([size="xs"]) .chip-remove{width:14px;height:14px;font-size:10px}:host([size="xs"]) .chip-avatar{width:14px;height:14px;font-size:7px}:host([size="sm"]) .chip{font-size:10px;padding:3px var(--lib-space-sm)}:host([size="sm"]) .chip-toggle{font-size:10px;padding:4px var(--lib-space-sm)}:host([size="sm"]) .chip-input{font-size:10px;padding:3px 3px 3px var(--lib-space-sm)}:host([size="lg"]) .chip{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-md);letter-spacing:var(--tracking-wider)}:host([size="lg"]) .chip-toggle{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-md);letter-spacing:var(--tracking-wider)}:host([size="lg"]) .chip-input{font-size:var(--text-sm);padding:var(--lib-space-sm) var(--lib-space-sm) var(--lib-space-sm) var(--lib-space-md)}:host([size="lg"]) .chip-remove{width:22px;height:22px;font-size:14px}:host([size="lg"]) .chip-avatar{width:22px;height:22px;font-size:9px}:host([color="kaki"]) .chip{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-toggle:not(.chip-toggle-selected){background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-toggle:hover:not([selected]){border-color:var(--color-kaki-400)}:host([color="kaki"][selected]) .chip-toggle{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:#fff}:host([color="kaki"]) .chip-input{background:var(--color-kaki-50);color:var(--color-kaki-600);border-color:var(--color-kaki-100)}:host([color="kaki"]) .chip-remove:hover{background:var(--color-kaki-100);color:var(--color-kaki-600)}:host([color="celadon"]) .chip{background:var(--color-celadon-100);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"]) .chip-toggle{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"][selected]) .chip-toggle{background:var(--color-celadon-500);border-color:var(--color-celadon-500);color:#fff}:host([color="celadon"]) .chip-input{background:var(--color-celadon-50);color:var(--color-celadon-600);border-color:var(--color-celadon-100)}:host([color="celadon"]) .chip-remove:hover{background:var(--color-celadon-100);color:var(--color-celadon-600)}:host([color="error"]) .chip,:host([color="error"]) .chip-input{background:var(--color-error-light);color:var(--color-error);border-color:var(--color-error-light)}:host([color="error"]) .chip-remove:hover{background:#ebc5bf;color:var(--color-error)}:host([color="info"]) .chip{background:var(--color-info-light, #D6E8F5);color:var(--color-info, #1A4A6E);border-color:var(--color-info-light, #D6E8F5)}:host([color="dark"]) .chip{background:var(--color-washi-900);color:var(--color-washi-300);border-color:var(--color-washi-800)}:host([color="dark"]) .chip-toggle{background:var(--color-washi-800);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([color="dark"]) .chip-toggle:hover{border-color:var(--color-washi-500);color:var(--color-washi-100)}:host([color="dark"][selected]) .chip-toggle{background:var(--color-washi-50);border-color:var(--color-washi-50);color:var(--color-washi-950)}:host([color="dark"]) .chip-input{background:var(--color-washi-800);color:var(--color-washi-300);border-color:var(--color-washi-700)}:host([color="dark"]) .chip-remove:hover{background:var(--color-washi-700);color:var(--color-washi-100)}:host([dot]) .chip:before,:host([dot]) .chip-toggle:before,:host([dot]) .chip-input:before{content:"";width:6px;height:6px;border-radius:9999px;background:currentcolor;flex-shrink:0;opacity:.7}.chip-avatar{width:18px;height:18px;border-radius:9999px;object-fit:cover;flex-shrink:0;background:var(--color-washi-200);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-family:var(--lib-font-mono);color:var(--text-secondary);overflow:hidden}.chip-icon{font-size:13px;display:inline-flex;align-items:center;flex-shrink:0;opacity:.7}.chip-icon svg{width:1em;height:1em}}';
+const accordionCss = '@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{border:1px solid var(--border-subtle);background:var(--bg-elevated);display:block}.accordion__root{display:flex;flex-direction:column}::slotted(lib-accordion-item:last-of-type){border-bottom:none!important}:host([variant="flush"]){border:none;background:transparent;box-shadow:none}:host([variant="flush"]) ::slotted(lib-accordion-item){--accordion-item-trigger-px: 0px;--accordion-item-content-px: 0px;--accordion-item-trigger-hover-bg: transparent;--accordion-item-trigger-bg: transparent;--accordion-item-body-bg: transparent}:host([variant="separated"]){border:none;background:transparent;box-shadow:none}:host([variant="separated"]) .accordion__root{gap:var(--lib-space-sm)}:host([variant="separated"]) ::slotted(lib-accordion-item){border:1px solid var(--border-subtle)!important;transition:box-shadow var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out)}:host([variant="separated"]) ::slotted(lib-accordion-item[open]){box-shadow:var(--shadow-md);border-color:var(--border-default)!important}:host([variant="accent"]){border:1px solid var(--border-subtle);background:var(--bg-elevated)}:host([variant="accent"]) ::slotted(lib-accordion-item[open]){--accordion-item-accent-border: 2px solid var(--color-kaki-400);--accordion-item-trigger-bg: var(--color-kaki-50);--accordion-item-trigger-hover-bg: var(--color-kaki-100);--accordion-item-body-bg: var(--color-kaki-50);--accordion-item-label-color: var(--color-kaki-600);--accordion-item-icon-color: var(--color-kaki-400);--accordion-item-content-border: var(--color-kaki-200);--accordion-item-content-color: var(--color-kaki-600)}@media(prefers-reduced-motion:reduce){::slotted(lib-accordion-item){transition:none}}}';
 export {
-  chipCss as default
+  accordionCss as default
 };
 //# sourceMappingURL=index234.js.map

package/dist/index235.js

@@ -1,5 +1,21 @@
-const pickerCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}}@layer components{.cp{width:260px;background:var(--bg-elevated);border:1px solid var(--border-default);box-shadow:var(--shadow-md);-webkit-user-select:none;user-select:none;flex-shrink:0}.cp-canvas{width:100%;height:160px;position:relative;cursor:crosshair;overflow:hidden}.cp-canvas:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#fff 0%,transparent 100%);pointer-events:none}.cp-canvas:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 0%,#000 100%);pointer-events:none}.cp-thumb{position:absolute;width:14px;height:14px;border-radius:var(--radius-full);border:2px solid #fff;box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003;transform:translate(-50%,-50%);z-index:2;pointer-events:none;transition:transform var(--duration-fast)}.cp-canvas:active .cp-thumb{transform:translate(-50%,-50%) scale(1.15)}.cp-sliders{display:flex;gap:var(--lib-space-sm);align-items:center;padding:var(--lib-space-sm) var(--lib-space-md) 0}.cp-preview-dot{width:28px;height:28px;border-radius:var(--radius-full);flex-shrink:0;border:1px solid rgb(0,0,0,.1);position:relative;overflow:hidden}.cp-preview-dot:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0}.cp-preview-color{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-full)}.cp-sliders-stack{display:flex;flex-direction:column;gap:var(--lib-space-xs);flex:1}.cp-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border-radius:var(--radius-full);border:1px solid rgb(0,0,0,.08);outline:none;cursor:pointer}.cp-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:var(--radius-full);background:#fff;border:1px solid rgb(0,0,0,.25);box-shadow:0 1px 3px #0003;cursor:grab;transition:transform var(--duration-fast),box-shadow var(--duration-fast)}.cp-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15);box-shadow:0 2px 6px #00000040}.cp-range::-moz-range-thumb{width:14px;height:14px;border-radius:var(--radius-full);background:#fff;border:1px solid rgb(0,0,0,.25);box-shadow:0 1px 3px #0003;cursor:grab}.cp-range-hue{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.cp-alpha-wrap{position:relative;border-radius:var(--radius-full);overflow:hidden}.cp-alpha-checker{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#aaa 25%,transparent 25%),linear-gradient(-45deg,#aaa 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aaa 75%),linear-gradient(-45deg,transparent 75%,#aaa 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;background-color:#eee;border-radius:var(--radius-full);border:1px solid rgb(0,0,0,.08)}.cp-alpha-checker .cp-range-alpha{position:relative;z-index:1;background:transparent;border:none}.cp-inputs-wrap{padding:var(--lib-space-sm) var(--lib-space-md);display:flex;gap:var(--lib-space-xs);align-items:flex-start;border-top:1px solid var(--border-subtle)}.cp-mode-btn{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:color var(--duration-fast);margin-top:4px;padding:0}.cp-mode-btn:hover{color:var(--text-primary)}.cp-input-group{display:flex;flex-direction:column;gap:0;min-width:0}.cp-input{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-primary);background:var(--bg-base);border:1px solid var(--border-default);padding:var(--lib-space-xs) var(--lib-space-sm);outline:none;width:100%;transition:border-color var(--duration-base),box-shadow var(--duration-base);text-transform:uppercase}.cp-input:focus{border-color:var(--color-washi-700);box-shadow:0 0 0 3px #1a140e17}.cp-input[type=number]{text-transform:none}.cp-input-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);display:block;text-align:center;margin-top:3px}.cp-saved{padding:var(--lib-space-xs) var(--lib-space-md) var(--lib-space-sm);border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:var(--lib-space-xs);flex-wrap:wrap}.cp-saved-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);width:100%}.cp-saved-add{width:20px;height:20px;border:1px dashed var(--border-default);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-muted);cursor:pointer;background:transparent;transition:border-color var(--duration-fast),color var(--duration-fast),background var(--duration-fast);flex-shrink:0;line-height:1}.cp-saved-add:hover{border-color:var(--color-washi-700);color:var(--text-primary);background:var(--bg-surface)}.cp-actions{display:flex;gap:var(--lib-space-xs);padding:var(--lib-space-sm) var(--lib-space-md);border-top:1px solid var(--border-subtle);background:var(--bg-surface)}.cp-btn{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);text-transform:uppercase;border:none;padding:var(--lib-space-xs) var(--lib-space-md);cursor:pointer;transition:background var(--duration-base),color var(--duration-base);flex:1}.cp-btn-cancel{background:transparent;border:1px solid var(--border-default);color:var(--text-muted)}.cp-btn-cancel:hover{background:var(--color-washi-200);color:var(--text-primary)}.cp-btn-ok{background:var(--color-washi-900);color:var(--color-washi-50)}.cp-btn-ok:hover{background:var(--color-washi-800)}.cp-trigger-wrap{position:relative;display:inline-block}.cp-trigger{display:flex;align-items:center;gap:var(--lib-space-sm);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);padding:var(--lib-space-xs) var(--lib-space-sm);cursor:pointer;transition:border-color var(--duration-base),box-shadow var(--duration-base);outline:none}.cp-trigger:focus,.cp-trigger.is-open{border-color:var(--color-washi-700);box-shadow:0 0 0 3px #1a140e17}.cp-trigger-dot{width:18px;height:18px;border:1px solid rgb(0,0,0,.1);flex-shrink:0;position:relative;overflow:hidden}.cp-trigger-dot:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0}.cp-trigger-color{position:absolute;top:0;right:0;bottom:0;left:0}.cp-trigger-wrap .cp{position:absolute;top:calc(100% + 6px);left:0;z-index:400;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}.cp-trigger-wrap .cp.is-open{opacity:1;transform:translateY(0);pointer-events:auto}.cp-swatches{display:flex;flex-direction:column;gap:var(--lib-space-sm)}.cp-swatches-row{display:flex;gap:var(--lib-space-xs);align-items:center}.cp-swatches-label{font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted);width:52px;flex-shrink:0}.cp-swatch{width:24px;height:24px;border:1px solid rgb(0,0,0,.08);cursor:pointer;position:relative;flex-shrink:0;transition:transform var(--duration-fast),box-shadow var(--duration-fast)}.cp-swatch:hover{transform:scale(1.18);box-shadow:0 2px 8px #0000002e;z-index:1}.cp-swatch.is-selected:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border:2px solid var(--color-washi-900)}.cp-swatch[data-name]:before{content:attr(data-name);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wide);white-space:nowrap;background:var(--color-washi-900);color:var(--color-washi-100);padding:2px var(--lib-space-xs);pointer-events:none;opacity:0;transition:opacity var(--duration-base);z-index:10}.cp-swatch[data-name]:hover:before{opacity:1}.cp-swatch-sm{width:18px;height:18px}.cp-swatch-lg{width:32px;height:32px}.cp-swatch-xl{width:48px;height:48px}:host([dark]) .cp{background:#0a0403;border-color:#1e130e;box-shadow:0 8px 32px #00000080}:host([dark]) .cp-input{background:#060201;border-color:#231813;color:#998c84}:host([dark]) .cp-input:focus{border-color:#6d6059}:host([dark]) .cp-input-label{color:#2a1f19}:host([dark]) .cp-saved{border-color:#190f0a}:host([dark]) .cp-saved-label{color:#2a1f19}:host([dark]) .cp-saved-add{border-color:#231813;color:#362b25}:host([dark]) .cp-saved-add:hover{background:#150a06;border-color:#51453e;color:#998c84}:host([dark]) .cp-actions{background:#060201;border-color:#190f0a}:host([dark]) .cp-btn-cancel{border-color:#231813;color:#433831}:host([dark]) .cp-btn-cancel:hover{background:#190f0a;color:#998c84}:host([dark]) .cp-mode-btn{color:#362b25}:host([dark]) .cp-mode-btn:hover{color:#998c84}:host([dark]) .cp-inputs-wrap{border-color:#190f0a}:host([dark]) .cp-trigger{background:#100704;border-color:#1e130e;color:#5f524c}:host([dark]) .cp-trigger:focus,:host([dark]) .cp-trigger.is-open{border-color:#6d6059}:host([dark]) .cp-swatch.is-selected:after{border-color:#998c84}:host([dark]) .cp-swatches-label{color:#312620}:host([disabled]){pointer-events:none;opacity:.5}}';
+import { html } from "lit";
+function bentoGridTemplate(ctx) {
+  return html`
+    <div
+      class="bento-grid"
+      part="grid"
+      role="presentation"
+      style="
+        --_columns: ${ctx.columns};
+        --_gap: var(--lib-space-${ctx.gap});
+        --_row-height: ${ctx.rowHeight};
+      "
+    >
+      <slot></slot>
+    </div>
+  `;
+}
 export {
-  pickerCss as default
+  bentoGridTemplate
 };
 //# sourceMappingURL=index235.js.map

package/dist/index235.js.map

@@ -1 +1 @@
-{"version":3,"file":"index235.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index235.js","sources":["../src/components/organisms/bento-grid/lib-bento-grid.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibBentoGrid } from './lib-bento-grid.component';\n\nexport function bentoGridTemplate(ctx: LibBentoGrid): TemplateResult {\n  return html`\n    <div\n      class=\"bento-grid\"\n      part=\"grid\"\n      role=\"presentation\"\n      style=\"\n        --_columns: ${ctx.columns};\n        --_gap: var(--lib-space-${ctx.gap});\n        --_row-height: ${ctx.rowHeight};\n      \"\n    >\n      <slot></slot>\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,kBAAkB,KAAmC;AACnE,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMa,IAAI,OAAO;AAAA,kCACC,IAAI,GAAG;AAAA,yBAChB,IAAI,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtC;"}

package/dist/index236.js

@@ -1,165 +1,5 @@
-import { html, nothing } from "lit";
-const ROTATE_SVG = html`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor"
-  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M10 2.5A4.5 4.5 0 1 0 11 6"/>
-  <path d="M10 .5v2h2"/>
-</svg>`;
-const CARET_SVG = html`<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor"
-  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M2 4l3 3 3-3"/>
-</svg>`;
-function swatchGridTemplate(props) {
-  const { rows, selected, onSelect } = props;
-  return html`
-    <div class="cp-swatches">
-      ${rows.map((row) => html`
-        <div class="cp-swatches-row">
-          <span class="cp-swatches-label">${row.label}</span>
-          ${row.colors.map((c) => html`
-            <div
-              class="cp-swatch ${c.value.toLowerCase() === selected.toLowerCase() ? "is-selected" : ""}"
-              style="background:${c.value};"
-              data-name="${c.name ?? ""}"
-              @click="${() => onSelect(c)}"
-              role="button"
-              aria-label="${c.name ?? c.value}"
-            ></div>
-          `)}
-        </div>
-      `)}
-    </div>
-  `;
-}
-function pickerPanelTemplate(p) {
-  const { hex, r, g, b, h, s, l, alpha, inputMode, savedColors, showAlpha } = p;
-  const thumbX = s;
-  const thumbY = 100 - l;
-  const cssColor = alpha < 100 ? `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})` : hex;
-  const alphaGradient = `linear-gradient(to right, transparent, hsl(${h},${s}%,${l}%))`;
-  const inputsBlock = inputMode === "hex" ? html`
-        <div class="cp-input-group" style="flex:3">
-          <input class="cp-input" type="text" .value="${hex}" maxlength="7"
-            @input="${p.onHexInput}">
-          <span class="cp-input-label">HEX</span>
-        </div>
-        ${showAlpha ? html`
-          <div class="cp-input-group" style="flex:1">
-            <input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100"
-              @input="${p.onAlphaNumInput}">
-            <span class="cp-input-label">A%</span>
-          </div>` : nothing}
-      ` : inputMode === "rgb" ? html`
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(r)}" min="0" max="255" @input="${(e) => p.onRgbInput(0, e)}"><span class="cp-input-label">R</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(g)}" min="0" max="255" @input="${(e) => p.onRgbInput(1, e)}"><span class="cp-input-label">G</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(b)}" min="0" max="255" @input="${(e) => p.onRgbInput(2, e)}"><span class="cp-input-label">B</span></div>
-        ${showAlpha ? html`<div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100" @input="${p.onAlphaNumInput}"><span class="cp-input-label">A%</span></div>` : nothing}
-      ` : html`
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(h)}" min="0" max="360" @input="${(e) => p.onHslInput(0, e)}"><span class="cp-input-label">H</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(s)}" min="0" max="100" @input="${(e) => p.onHslInput(1, e)}"><span class="cp-input-label">S%</span></div>
-        <div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(l)}" min="0" max="100" @input="${(e) => p.onHslInput(2, e)}"><span class="cp-input-label">L%</span></div>
-        ${showAlpha ? html`<div class="cp-input-group" style="flex:1"><input class="cp-input" type="number" .value="${String(Math.round(alpha))}" min="0" max="100" @input="${p.onAlphaNumInput}"><span class="cp-input-label">A%</span></div>` : nothing}
-      `;
-  return html`
-    <!-- Canvas 2D -->
-    <div class="cp-canvas"
-      style="background: hsl(${h},100%,50%);"
-      @mousedown="${p.onCanvasMousedown}"
-    >
-      <div class="cp-thumb"
-        style="left:${thumbX}%;top:${thumbY}%;background:${cssColor};"
-      ></div>
-    </div>
-
-    <!-- Sliders -->
-    <div class="cp-sliders">
-      <div class="cp-preview-dot">
-        <div class="cp-preview-color" style="background:${cssColor};"></div>
-      </div>
-      <div class="cp-sliders-stack">
-        <input type="range" class="cp-range cp-range-hue"
-          min="0" max="360" .value="${String(h)}"
-          @input="${p.onHueInput}">
-        ${showAlpha ? html`
-          <div class="cp-alpha-wrap" style="height:10px;">
-            <div class="cp-alpha-checker">
-              <input type="range" class="cp-range cp-range-alpha"
-                min="0" max="100" .value="${String(Math.round(alpha))}"
-                style="background:${alphaGradient};"
-                @input="${p.onAlphaInput}">
-            </div>
-          </div>` : nothing}
-      </div>
-    </div>
-
-    <!-- Inputs -->
-    <div class="cp-inputs-wrap">
-      <button class="cp-mode-btn" title="Cambiar modo" @click="${p.onModeToggle}">
-        ${ROTATE_SVG}
-      </button>
-      <div style="display:flex;gap:var(--lib-space-xs);flex:1;">
-        ${inputsBlock}
-      </div>
-    </div>
-
-    <!-- Saved colors -->
-    <div class="cp-saved">
-      <span class="cp-saved-label">Guardados</span>
-      ${savedColors.map((sc) => html`
-        <div class="cp-swatch cp-swatch-sm"
-          style="background:${sc};"
-          data-name="${sc}"
-          @click="${() => p.onSavedClick(sc)}"
-        ></div>
-      `)}
-      <button class="cp-saved-add" title="Guardar color actual" @click="${p.onSaveColor}">+</button>
-    </div>
-
-    <!-- Actions -->
-    <div class="cp-actions">
-      <button class="cp-btn cp-btn-cancel" @click="${p.onCancel}">Cancelar</button>
-      <button class="cp-btn cp-btn-ok" @click="${p.onApply}">Aplicar</button>
-    </div>
-  `;
-}
-function colorPickerTemplate(props) {
-  const {
-    variant,
-    /*label,*/
-    hex,
-    alpha,
-    panelOpen,
-    onTriggerClick
-  } = props;
-  const panel = html`
-    <div class="cp ${variant === "trigger" && panelOpen ? "is-open" : ""}">
-      ${pickerPanelTemplate(props)}
-    </div>
-  `;
-  if (variant === "inline") {
-    return panel;
-  }
-  const cssColor = alpha < 100 ? `rgba(${props.r},${props.g},${props.b},${(alpha / 100).toFixed(2)})` : hex;
-  return html`
-    <div class="cp-trigger-wrap">
-      <button
-        class="cp-trigger ${panelOpen ? "is-open" : ""}"
-        @click="${onTriggerClick}"
-        aria-expanded="${panelOpen}"
-        aria-haspopup="true"
-      >
-        <div class="cp-trigger-dot">
-          <div class="cp-trigger-color" style="background:${cssColor};"></div>
-        </div>
-        <span>${hex.toUpperCase()}</span>
-        ${CARET_SVG}
-      </button>
-      ${panel}
-    </div>
-  `;
-}
+const gridCss = "@layer tokens,reset,components;@layer reset{:host{display:block}*,*:before,*:after{box-sizing:border-box}}@layer components{.bento-item{height:100%;width:100%;display:flex;flex-direction:column;position:relative;background:var(--bg-elevated);border-radius:var(--lib-radius-lg);border:1px solid var(--border-subtle);overflow:hidden}:host([interactive]) .bento-item{cursor:pointer;transition:transform var(--duration-slow) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-slow) var(--ease-default)}:host([interactive]) .bento-item:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}:host([interactive]) .bento-item:active{transform:translateY(-1px)}.content{padding:var(--lib-space-md);height:100%;display:flex;flex-direction:column}:host([flush]) .content{padding:0}@media(prefers-reduced-motion:reduce){:host([interactive]) .bento-item{transition:border-color var(--duration-base)}:host([interactive]) .bento-item:hover{transform:none}}}";
 export {
-  colorPickerTemplate,
-  pickerPanelTemplate,
-  swatchGridTemplate
+  gridCss as default
 };
 //# sourceMappingURL=index236.js.map

package/dist/index236.js.map

@@ -1 +1 @@
-{"version":3,"file":"index236.js","sources":["../src/components/molecules/color-picker/lib-color-picker.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { ColorPickerVariant, ColorInputMode, SwatchRow, SwatchColor } from './lib-color-picker.types';\n\n/* ── Icono ↺ inline para el mode button ── */\nconst ROTATE_SVG = html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\"\n  stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M10 2.5A4.5 4.5 0 1 0 11 6\"/>\n  <path d=\"M10 .5v2h2\"/>\n</svg>`;\n\n/* ── Caret-down para trigger ── */\nconst CARET_SVG = html`<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\"\n  stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <path d=\"M2 4l3 3 3-3\"/>\n</svg>`;\n\n/* ────────────────────────────────────────────\n   Interfaces de props para cada sub-sección\n   ──────────────────────────────────────────── */\n\nexport interface PickerPanelProps {\n  hex:          string;\n  r: number; g: number; b: number;\n  h: number; s: number; l: number;\n  alpha:        number;   // 0–100\n  inputMode:    ColorInputMode;\n  savedColors:  string[];\n  showAlpha:    boolean;\n  /** Callbacks */\n  onCanvasMousedown: (e: MouseEvent) => void;\n  onHueInput:        (e: Event) => void;\n  onAlphaInput:      (e: Event) => void;\n  onModeToggle:      () => void;\n  onHexInput:        (e: Event) => void;\n  onRgbInput:        (rIdx: 0|1|2, e: Event) => void;\n  onHslInput:        (cIdx: 0|1|2, e: Event) => void;\n  onAlphaNumInput:   (e: Event) => void;\n  onSaveColor:       () => void;\n  onSavedClick:      (hex: string) => void;\n  onCancel:          () => void;\n  onApply:           () => void;\n}\n\nexport interface SwatchGridProps {\n  rows:     SwatchRow[];\n  selected: string;\n  onSelect: (color: SwatchColor) => void;\n}\n\n/* ────────────────────────────────────────────\n   Swatch grid template\n   ──────────────────────────────────────────── */\nexport function swatchGridTemplate(props: SwatchGridProps): TemplateResult {\n  const { rows, selected, onSelect } = props;\n  return html`\n    <div class=\"cp-swatches\">\n      ${rows.map(row => html`\n        <div class=\"cp-swatches-row\">\n          <span class=\"cp-swatches-label\">${row.label}</span>\n          ${row.colors.map(c => html`\n            <div\n              class=\"cp-swatch ${c.value.toLowerCase() === selected.toLowerCase() ? 'is-selected' : ''}\"\n              style=\"background:${c.value};\"\n              data-name=\"${c.name ?? ''}\"\n              @click=\"${(): void => onSelect(c)}\"\n              role=\"button\"\n              aria-label=\"${c.name ?? c.value}\"\n            ></div>\n          `)}\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Picker panel template (canvas + sliders + inputs + saved + actions)\n   ──────────────────────────────────────────── */\nexport function pickerPanelTemplate(p: PickerPanelProps): TemplateResult {\n  const { hex, r, g, b, h, s, l, alpha, inputMode, savedColors, showAlpha } = p;\n\n  /* Thumb position: x = saturation %, y = inverted lightness % */\n  const thumbX = s;\n  const thumbY = 100 - l;\n\n  const cssColor = alpha < 100\n    ? `rgba(${r},${g},${b},${(alpha / 100).toFixed(2)})`\n    : hex;\n\n  const alphaGradient =\n    `linear-gradient(to right, transparent, hsl(${h},${s}%,${l}%))`;\n\n  /* Inputs según el modo */\n  const inputsBlock: TemplateResult = inputMode === 'hex'\n    ? html`\n        <div class=\"cp-input-group\" style=\"flex:3\">\n          <input class=\"cp-input\" type=\"text\" .value=\"${hex}\" maxlength=\"7\"\n            @input=\"${p.onHexInput}\">\n          <span class=\"cp-input-label\">HEX</span>\n        </div>\n        ${showAlpha ? html`\n          <div class=\"cp-input-group\" style=\"flex:1\">\n            <input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\"\n              @input=\"${p.onAlphaNumInput}\">\n            <span class=\"cp-input-label\">A%</span>\n          </div>` : nothing}\n      `\n    : inputMode === 'rgb'\n    ? html`\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(r)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(0, e)}\"><span class=\"cp-input-label\">R</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(g)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(1, e)}\"><span class=\"cp-input-label\">G</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(b)}\" min=\"0\" max=\"255\" @input=\"${(e: Event): void => p.onRgbInput(2, e)}\"><span class=\"cp-input-label\">B</span></div>\n        ${showAlpha ? html`<div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\" @input=\"${p.onAlphaNumInput}\"><span class=\"cp-input-label\">A%</span></div>` : nothing}\n      `\n    : html`\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(h)}\" min=\"0\" max=\"360\" @input=\"${(e: Event): void => p.onHslInput(0, e)}\"><span class=\"cp-input-label\">H</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(s)}\" min=\"0\" max=\"100\" @input=\"${(e: Event): void => p.onHslInput(1, e)}\"><span class=\"cp-input-label\">S%</span></div>\n        <div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(l)}\" min=\"0\" max=\"100\" @input=\"${(e: Event): void => p.onHslInput(2, e)}\"><span class=\"cp-input-label\">L%</span></div>\n        ${showAlpha ? html`<div class=\"cp-input-group\" style=\"flex:1\"><input class=\"cp-input\" type=\"number\" .value=\"${String(Math.round(alpha))}\" min=\"0\" max=\"100\" @input=\"${p.onAlphaNumInput}\"><span class=\"cp-input-label\">A%</span></div>` : nothing}\n      `;\n\n  return html`\n    <!-- Canvas 2D -->\n    <div class=\"cp-canvas\"\n      style=\"background: hsl(${h},100%,50%);\"\n      @mousedown=\"${p.onCanvasMousedown}\"\n    >\n      <div class=\"cp-thumb\"\n        style=\"left:${thumbX}%;top:${thumbY}%;background:${cssColor};\"\n      ></div>\n    </div>\n\n    <!-- Sliders -->\n    <div class=\"cp-sliders\">\n      <div class=\"cp-preview-dot\">\n        <div class=\"cp-preview-color\" style=\"background:${cssColor};\"></div>\n      </div>\n      <div class=\"cp-sliders-stack\">\n        <input type=\"range\" class=\"cp-range cp-range-hue\"\n          min=\"0\" max=\"360\" .value=\"${String(h)}\"\n          @input=\"${p.onHueInput}\">\n        ${showAlpha ? html`\n          <div class=\"cp-alpha-wrap\" style=\"height:10px;\">\n            <div class=\"cp-alpha-checker\">\n              <input type=\"range\" class=\"cp-range cp-range-alpha\"\n                min=\"0\" max=\"100\" .value=\"${String(Math.round(alpha))}\"\n                style=\"background:${alphaGradient};\"\n                @input=\"${p.onAlphaInput}\">\n            </div>\n          </div>` : nothing}\n      </div>\n    </div>\n\n    <!-- Inputs -->\n    <div class=\"cp-inputs-wrap\">\n      <button class=\"cp-mode-btn\" title=\"Cambiar modo\" @click=\"${p.onModeToggle}\">\n        ${ROTATE_SVG}\n      </button>\n      <div style=\"display:flex;gap:var(--lib-space-xs);flex:1;\">\n        ${inputsBlock}\n      </div>\n    </div>\n\n    <!-- Saved colors -->\n    <div class=\"cp-saved\">\n      <span class=\"cp-saved-label\">Guardados</span>\n      ${savedColors.map(sc => html`\n        <div class=\"cp-swatch cp-swatch-sm\"\n          style=\"background:${sc};\"\n          data-name=\"${sc}\"\n          @click=\"${(): void => p.onSavedClick(sc)}\"\n        ></div>\n      `)}\n      <button class=\"cp-saved-add\" title=\"Guardar color actual\" @click=\"${p.onSaveColor}\">+</button>\n    </div>\n\n    <!-- Actions -->\n    <div class=\"cp-actions\">\n      <button class=\"cp-btn cp-btn-cancel\" @click=\"${p.onCancel}\">Cancelar</button>\n      <button class=\"cp-btn cp-btn-ok\" @click=\"${p.onApply}\">Aplicar</button>\n    </div>\n  `;\n}\n\n/* ────────────────────────────────────────────\n   Root template — inline vs trigger\n   ──────────────────────────────────────────── */\n\nexport interface ColorPickerRootProps extends PickerPanelProps {\n  variant:    ColorPickerVariant;\n  label:      string;\n  panelOpen:  boolean;\n  onTriggerClick: () => void;\n}\n\nexport function colorPickerTemplate(props: ColorPickerRootProps): TemplateResult {\n  const { variant, /*label,*/ hex, alpha, panelOpen, onTriggerClick } = props;\n\n  const panel = html`\n    <div class=\"cp ${variant === 'trigger' && panelOpen ? 'is-open' : ''}\">\n      ${pickerPanelTemplate(props)}\n    </div>\n  `;\n\n  if (variant === 'inline') {\n    return panel;\n  }\n\n  /* Trigger variant — botón + panel flotante */\n  const cssColor = alpha < 100\n    ? `rgba(${props.r},${props.g},${props.b},${(alpha / 100).toFixed(2)})`\n    : hex;\n\n  return html`\n    <div class=\"cp-trigger-wrap\">\n      <button\n        class=\"cp-trigger ${panelOpen ? 'is-open' : ''}\"\n        @click=\"${onTriggerClick}\"\n        aria-expanded=\"${panelOpen}\"\n        aria-haspopup=\"true\"\n      >\n        <div class=\"cp-trigger-dot\">\n          <div class=\"cp-trigger-color\" style=\"background:${cssColor};\"></div>\n        </div>\n        <span>${hex.toUpperCase()}</span>\n        ${CARET_SVG}\n      </button>\n      ${panel}\n    </div>\n  `;\n}"],"names":[],"mappings":";AAIA,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAOnB,MAAM,YAAY;AAAA;AAAA;AAAA;AAyCX,SAAS,mBAAmB,OAAwC;AACzE,QAAM,EAAE,MAAM,UAAU,SAAA,IAAa;AACrC,SAAO;AAAA;AAAA,QAED,KAAK,IAAI,CAAA,QAAO;AAAA;AAAA,4CAEoB,IAAI,KAAK;AAAA,YACzC,IAAI,OAAO,IAAI,CAAA,MAAK;AAAA;AAAA,iCAEC,EAAE,MAAM,YAAA,MAAkB,SAAS,YAAA,IAAgB,gBAAgB,EAAE;AAAA,kCACpE,EAAE,KAAK;AAAA,2BACd,EAAE,QAAQ,EAAE;AAAA,wBACf,MAAY,SAAS,CAAC,CAAC;AAAA;AAAA,4BAEnB,EAAE,QAAQ,EAAE,KAAK;AAAA;AAAA,WAElC,CAAC;AAAA;AAAA,OAEL,CAAC;AAAA;AAAA;AAGR;AAKO,SAAS,oBAAoB,GAAqC;AACvE,QAAM,EAAE,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,OAAO,WAAW,aAAa,UAAA,IAAc;AAG5E,QAAM,SAAS;AACf,QAAM,SAAS,MAAM;AAErB,QAAM,WAAW,QAAQ,MACrB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,QAAQ,KAAK,QAAQ,CAAC,CAAC,MAC/C;AAEJ,QAAM,gBACJ,8CAA8C,CAAC,IAAI,CAAC,KAAK,CAAC;AAG5D,QAAM,cAA8B,cAAc,QAC9C;AAAA;AAAA,wDAEkD,GAAG;AAAA,sBACrC,EAAE,UAAU;AAAA;AAAA;AAAA,UAGxB,YAAY;AAAA;AAAA,4DAEsC,OAAO,KAAK,MAAM,KAAK,CAAC,CAAC;AAAA,wBAC7D,EAAE,eAAe;AAAA;AAAA,oBAErB,OAAO;AAAA,UAErB,cAAc,QACd;AAAA,mGAC6F,OAAO,CAAC,CAAC,+BAA+B,CAAC,MAAmB,EAAE,WAAW,GAAG,CAAC,CAAC;AAAA,mGAC9E,OAAO,CAAC,CAAC,+BAA+B,CAAC,MAAmB,EAAE,WAAW,GAAG,CAAC,CAAC;AAAA,mGAC9E,OAAO,CAAC,CAAC,+BAA+B,CAAC,MAAmB,EAAE,WAAW,GAAG,CAAC,CAAC;AAAA,UACvK,YAAY,gGAAgG,OAAO,KAAK,MAAM,KAAK,CAAC,CAAC,+BAA+B,EAAE,eAAe,mDAAmD,OAAO;AAAA,UAEnP;AAAA,mGAC6F,OAAO,CAAC,CAAC,+BAA+B,CAAC,MAAmB,EAAE,WAAW,GAAG,CAAC,CAAC;AAAA,mGAC9E,OAAO,CAAC,CAAC,+BAA+B,CAAC,MAAmB,EAAE,WAAW,GAAG,CAAC,CAAC;AAAA,mGAC9E,OAAO,CAAC,CAAC,+BAA+B,CAAC,MAAmB,EAAE,WAAW,GAAG,CAAC,CAAC;AAAA,UACvK,YAAY,gGAAgG,OAAO,KAAK,MAAM,KAAK,CAAC,CAAC,+BAA+B,EAAE,eAAe,mDAAmD,OAAO;AAAA;AAGvP,SAAO;AAAA;AAAA;AAAA,+BAGsB,CAAC;AAAA,oBACZ,EAAE,iBAAiB;AAAA;AAAA;AAAA,sBAGjB,MAAM,SAAS,MAAM,gBAAgB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0DAOT,QAAQ;AAAA;AAAA;AAAA;AAAA,sCAI5B,OAAO,CAAC,CAAC;AAAA,oBAC3B,EAAE,UAAU;AAAA,UACtB,YAAY;AAAA;AAAA;AAAA;AAAA,4CAIsB,OAAO,KAAK,MAAM,KAAK,CAAC,CAAC;AAAA,oCACjC,aAAa;AAAA,0BACvB,EAAE,YAAY;AAAA;AAAA,oBAEpB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iEAMsC,EAAE,YAAY;AAAA,UACrE,UAAU;AAAA;AAAA;AAAA,UAGV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOb,YAAY,IAAI,CAAA,OAAM;AAAA;AAAA,8BAEA,EAAE;AAAA,uBACT,EAAE;AAAA,oBACL,MAAY,EAAE,aAAa,EAAE,CAAC;AAAA;AAAA,OAE3C,CAAC;AAAA,0EACkE,EAAE,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,qDAKlC,EAAE,QAAQ;AAAA,iDACd,EAAE,OAAO;AAAA;AAAA;AAG1D;AAaO,SAAS,oBAAoB,OAA6C;AAC/E,QAAM;AAAA,IAAE;AAAA;AAAA,IAAoB;AAAA,IAAK;AAAA,IAAO;AAAA,IAAW;AAAA,EAAA,IAAmB;AAEtE,QAAM,QAAQ;AAAA,qBACK,YAAY,aAAa,YAAY,YAAY,EAAE;AAAA,QAChE,oBAAoB,KAAK,CAAC;AAAA;AAAA;AAIhC,MAAI,YAAY,UAAU;AACxB,WAAO;AAAA,EACT;AAGA,QAAM,WAAW,QAAQ,MACrB,QAAQ,MAAM,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM,CAAC,KAAK,QAAQ,KAAK,QAAQ,CAAC,CAAC,MACjE;AAEJ,SAAO;AAAA;AAAA;AAAA,4BAGmB,YAAY,YAAY,EAAE;AAAA,kBACpC,cAAc;AAAA,yBACP,SAAS;AAAA;AAAA;AAAA;AAAA,4DAI0B,QAAQ;AAAA;AAAA,gBAEpD,IAAI,aAAa;AAAA,UACvB,SAAS;AAAA;AAAA,QAEX,KAAK;AAAA;AAAA;AAGb;"}
+{"version":3,"file":"index236.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index237.js

@@ -1,46 +1,87 @@
-const SHIBUI_SWATCHES = [
-  {
-    label: "washi",
-    colors: [
-      { value: "#FAF7F4", name: "washi-50" },
-      { value: "#F2EDE6", name: "washi-100" },
-      { value: "#E5DDD3", name: "washi-200" },
-      { value: "#D3C8BC", name: "washi-300" },
-      { value: "#B8A99A", name: "washi-400" },
-      { value: "#9A8878", name: "washi-500" },
-      { value: "#7A6A5C", name: "washi-600" },
-      { value: "#5C4E42", name: "washi-700" },
-      { value: "#3D332A", name: "washi-800" },
-      { value: "#221C16", name: "washi-900" },
-      { value: "#120E0A", name: "washi-950" }
-    ]
-  },
-  {
-    label: "kaki",
-    colors: [
-      { value: "#FDF3EC", name: "kaki-50" },
-      { value: "#FAE2CC", name: "kaki-100" },
-      { value: "#F5C89A", name: "kaki-200" },
-      { value: "#EBAA66", name: "kaki-300" },
-      { value: "#D97234", name: "kaki-400" },
-      { value: "#B85A1E", name: "kaki-500" },
-      { value: "#8C4115", name: "kaki-600" }
-    ]
-  },
-  {
-    label: "celadón",
-    colors: [
-      { value: "#EFF5F3", name: "celadon-50" },
-      { value: "#D3E8E1", name: "celadon-100" },
-      { value: "#A8D0C5", name: "celadon-200" },
-      { value: "#76B3A5", name: "celadon-300" },
-      { value: "#4D8E82", name: "celadon-400" },
-      { value: "#357164", name: "celadon-500" },
-      { value: "#245249", name: "celadon-600" }
-    ]
-  }
-];
+import { svg, html, nothing } from "lit";
+const iconPrev = svg`
+  <svg viewBox="0 0 16 16" fill="none"
+       stroke="currentColor" stroke-width="1.5"
+       stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="10,3 5,8 10,13"/>
+  </svg>`;
+const iconNext = svg`
+  <svg viewBox="0 0 16 16" fill="none"
+       stroke="currentColor" stroke-width="1.5"
+       stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="6,3 11,8 6,13"/>
+  </svg>`;
+function carouselTemplate(props) {
+  const {
+    mode,
+    current,
+    total,
+    peek,
+    arrows,
+    dots,
+    counter,
+    loop,
+    handlePrev,
+    handleNext,
+    handleDot,
+    handleSlot,
+    handleThumb,
+    handleKey
+  } = props;
+  const prevDisabled = !loop && current === 0;
+  const nextDisabled = !loop && current === total - 1;
+  const counterHtml = peek > 1 ? html`<span>${current + 1}</span>&thinsp;–&thinsp;<span>${Math.min(current + peek, total)}</span> / ${total}` : html`<span>${current + 1}</span> / ${total}`;
+  return html`
+    <div
+      class="cr"
+      tabindex="0"
+      role="region"
+      aria-label="Carousel"
+      @keydown=${handleKey}
+    >
+      <div class="cr-track" part="track">
+        <slot @slotchange=${handleSlot}></slot>
+      </div>
+
+      ${arrows && mode === "slide" ? html`
+        <button
+          class="cr-arrow cr-arrow-prev ${prevDisabled ? "is-disabled" : ""}"
+          ?disabled=${prevDisabled}
+          aria-label="Anterior"
+          @click=${handlePrev}
+        >${iconPrev}</button>
+
+        <button
+          class="cr-arrow cr-arrow-next ${nextDisabled ? "is-disabled" : ""}"
+          ?disabled=${nextDisabled}
+          aria-label="Siguiente"
+          @click=${handleNext}
+        >${iconNext}</button>
+      ` : nothing}
+    </div>
+
+    ${dots && total > 1 ? html`
+      <div class="cr-dots" role="tablist" aria-label="Navegación por slides">
+        ${Array.from({ length: total }, (_, i) => html`
+          <button
+            class="cr-dot ${i === current ? "is-active" : ""}"
+            role="tab"
+            aria-selected=${i === current ? "true" : "false"}
+            aria-label="Ir a slide ${i + 1}"
+            @click=${() => handleDot(i)}
+          ></button>
+        `)}
+      </div>
+    ` : nothing}
+
+    ${counter && total > 1 ? html`
+      <p class="cr-counter">${counterHtml}</p>
+    ` : nothing}
+
+    <slot name="thumbnail" @slotchange=${handleThumb}></slot>
+  `;
+}
 export {
-  SHIBUI_SWATCHES
+  carouselTemplate
 };
 //# sourceMappingURL=index237.js.map

package/dist/index237.js.map

@@ -1 +1 @@
-{"version":3,"file":"index237.js","sources":["../src/components/molecules/color-picker/lib-color-picker.types.ts"],"sourcesContent":["/** Modo de visualización del componente */\nexport type ColorPickerVariant = 'inline' | 'trigger';\n\n/** Modo de los inputs de texto */\nexport type ColorInputMode = 'hex' | 'rgb' | 'hsl';\n\n/** Fila de swatches para el swatch-grid */\nexport interface SwatchRow {\n  label: string;\n  colors: SwatchColor[];\n}\n\nexport interface SwatchColor {\n  value: string;   // hex\n  name?: string;   // tooltip\n}\n\n/** Props internas del estado de color (HSL + alpha) */\nexport interface ColorState {\n  h: number;       // 0–360\n  s: number;       // 0–100\n  l: number;       // 0–100\n  alpha: number;   // 0–100\n}\n\n/** Paleta Shibui por defecto para el swatch grid */\nexport const SHIBUI_SWATCHES: SwatchRow[] = [\n  {\n    label: 'washi',\n    colors: [\n      { value: '#FAF7F4', name: 'washi-50' },\n      { value: '#F2EDE6', name: 'washi-100' },\n      { value: '#E5DDD3', name: 'washi-200' },\n      { value: '#D3C8BC', name: 'washi-300' },\n      { value: '#B8A99A', name: 'washi-400' },\n      { value: '#9A8878', name: 'washi-500' },\n      { value: '#7A6A5C', name: 'washi-600' },\n      { value: '#5C4E42', name: 'washi-700' },\n      { value: '#3D332A', name: 'washi-800' },\n      { value: '#221C16', name: 'washi-900' },\n      { value: '#120E0A', name: 'washi-950' },\n    ],\n  },\n  {\n    label: 'kaki',\n    colors: [\n      { value: '#FDF3EC', name: 'kaki-50' },\n      { value: '#FAE2CC', name: 'kaki-100' },\n      { value: '#F5C89A', name: 'kaki-200' },\n      { value: '#EBAA66', name: 'kaki-300' },\n      { value: '#D97234', name: 'kaki-400' },\n      { value: '#B85A1E', name: 'kaki-500' },\n      { value: '#8C4115', name: 'kaki-600' },\n    ],\n  },\n  {\n    label: 'celadón',\n    colors: [\n      { value: '#EFF5F3', name: 'celadon-50' },\n      { value: '#D3E8E1', name: 'celadon-100' },\n      { value: '#A8D0C5', name: 'celadon-200' },\n      { value: '#76B3A5', name: 'celadon-300' },\n      { value: '#4D8E82', name: 'celadon-400' },\n      { value: '#357164', name: 'celadon-500' },\n      { value: '#245249', name: 'celadon-600' },\n    ],\n  },\n];"],"names":[],"mappings":"AA0BO,MAAM,kBAA+B;AAAA,EAC1C;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,YAAA;AAAA,IAAY;AAAA,EACxC;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,EAAE,OAAO,WAAW,MAAM,UAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,WAAA;AAAA,IAAW;AAAA,EACvC;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,MACN,EAAE,OAAO,WAAW,MAAM,aAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,MAC1B,EAAE,OAAO,WAAW,MAAM,cAAA;AAAA,IAAc;AAAA,EAC1C;AAEJ;"}
+{"version":3,"file":"index237.js","sources":["../src/components/organisms/carousel/lib-carousel.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\n\nexport type LibCarouselMode = 'slide' | 'fade';\n\nexport interface CarouselTemplateProps {\n  mode:          LibCarouselMode;\n  current:       number;\n  total:         number;\n  peek:          number;\n  arrows:        boolean;\n  dots:          boolean;\n  counter:       boolean;\n  loop:          boolean;\n  handlePrev:    () => void;\n  handleNext:    () => void;\n  handleDot:     (i: number) => void;\n  handleSlot:    (e: Event) => void;\n  handleThumb:   (e: Event) => void;\n  handleKey:     (e: KeyboardEvent) => void;\n}\n\n/** SVG chevron left */\nconst iconPrev = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"10,3 5,8 10,13\"/>\n  </svg>`;\n\n/** SVG chevron right */\nconst iconNext = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"1.5\"\n       stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <polyline points=\"6,3 11,8 6,13\"/>\n  </svg>`;\n\n/**\n * Template para lib-carousel.\n *\n * Estructura:\n *   div.cr                      ← raíz, maneja keydown\n *     div.cr-track              ← contenedor deslizante\n *       slot                    ← slides del consumer\n *   button.cr-arrow-prev        ← (condicional)\n *   button.cr-arrow-next        ← (condicional)\n *   div.cr-dots                 ← (condicional)\n *   p.cr-counter                ← (condicional)\n *   slot[name=\"thumbnail\"]      ← tira de miniaturas (condicional)\n */\nexport function carouselTemplate(props: CarouselTemplateProps): TemplateResult {\n  const {\n    mode, current, total, peek, arrows, dots, counter, loop,\n    handlePrev, handleNext, handleDot, handleSlot, handleThumb, handleKey,\n  } = props;\n\n  const prevDisabled = !loop && current === 0;\n  const nextDisabled = !loop && current === total - 1;\n\n  // Counter text: \"2 / 6\" para peek=1, \"1 – 3 / 6\" para peek>1\n  const counterHtml = peek > 1\n    ? html`<span>${current + 1}</span>&thinsp;–&thinsp;<span>${Math.min(current + peek, total)}</span> / ${total}`\n    : html`<span>${current + 1}</span> / ${total}`;\n\n  return html`\n    <div\n      class=\"cr\"\n      tabindex=\"0\"\n      role=\"region\"\n      aria-label=\"Carousel\"\n      @keydown=${handleKey}\n    >\n      <div class=\"cr-track\" part=\"track\">\n        <slot @slotchange=${handleSlot}></slot>\n      </div>\n\n      ${arrows && mode === 'slide' ? html`\n        <button\n          class=\"cr-arrow cr-arrow-prev ${prevDisabled ? 'is-disabled' : ''}\"\n          ?disabled=${prevDisabled}\n          aria-label=\"Anterior\"\n          @click=${handlePrev}\n        >${iconPrev}</button>\n\n        <button\n          class=\"cr-arrow cr-arrow-next ${nextDisabled ? 'is-disabled' : ''}\"\n          ?disabled=${nextDisabled}\n          aria-label=\"Siguiente\"\n          @click=${handleNext}\n        >${iconNext}</button>\n      ` : nothing}\n    </div>\n\n    ${dots && total > 1 ? html`\n      <div class=\"cr-dots\" role=\"tablist\" aria-label=\"Navegación por slides\">\n        ${Array.from({ length: total }, (_, i) => html`\n          <button\n            class=\"cr-dot ${i === current ? 'is-active' : ''}\"\n            role=\"tab\"\n            aria-selected=${i === current ? 'true' : 'false'}\n            aria-label=\"Ir a slide ${i + 1}\"\n            @click=${():void => handleDot(i)}\n          ></button>\n        `)}\n      </div>\n    ` : nothing}\n\n    ${counter && total > 1 ? html`\n      <p class=\"cr-counter\">${counterHtml}</p>\n    ` : nothing}\n\n    <slot name=\"thumbnail\" @slotchange=${handleThumb}></slot>\n  `;\n}"],"names":[],"mappings":";AAsBA,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBV,SAAS,iBAAiB,OAA8C;AAC7E,QAAM;AAAA,IACJ;AAAA,IAAM;AAAA,IAAS;AAAA,IAAO;AAAA,IAAM;AAAA,IAAQ;AAAA,IAAM;AAAA,IAAS;AAAA,IACnD;AAAA,IAAY;AAAA,IAAY;AAAA,IAAW;AAAA,IAAY;AAAA,IAAa;AAAA,EAAA,IAC1D;AAEJ,QAAM,eAAe,CAAC,QAAQ,YAAY;AAC1C,QAAM,eAAe,CAAC,QAAQ,YAAY,QAAQ;AAGlD,QAAM,cAAc,OAAO,IACvB,aAAa,UAAU,CAAC,iCAAiC,KAAK,IAAI,UAAU,MAAM,KAAK,CAAC,aAAa,KAAK,KAC1G,aAAa,UAAU,CAAC,aAAa,KAAK;AAE9C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMQ,SAAS;AAAA;AAAA;AAAA,4BAGE,UAAU;AAAA;AAAA;AAAA,QAG9B,UAAU,SAAS,UAAU;AAAA;AAAA,0CAEK,eAAe,gBAAgB,EAAE;AAAA,sBACrD,YAAY;AAAA;AAAA,mBAEf,UAAU;AAAA,WAClB,QAAQ;AAAA;AAAA;AAAA,0CAGuB,eAAe,gBAAgB,EAAE;AAAA,sBACrD,YAAY;AAAA;AAAA,mBAEf,UAAU;AAAA,WAClB,QAAQ;AAAA,UACT,OAAO;AAAA;AAAA;AAAA,MAGX,QAAQ,QAAQ,IAAI;AAAA;AAAA,UAEhB,MAAM,KAAK,EAAE,QAAQ,SAAS,CAAC,GAAG,MAAM;AAAA;AAAA,4BAEtB,MAAM,UAAU,cAAc,EAAE;AAAA;AAAA,4BAEhC,MAAM,UAAU,SAAS,OAAO;AAAA,qCACvB,IAAI,CAAC;AAAA,qBACrB,MAAW,UAAU,CAAC,CAAC;AAAA;AAAA,SAEnC,CAAC;AAAA;AAAA,QAEF,OAAO;AAAA;AAAA,MAET,WAAW,QAAQ,IAAI;AAAA,8BACC,WAAW;AAAA,QACjC,OAAO;AAAA;AAAA,yCAE0B,WAAW;AAAA;AAEpD;"}