@shibui-ui/ui 1.5.5

package/dist/index339.js

@@ -0,0 +1,95 @@
+import { html, nothing } from "lit";
+import { styleMap as o } from "./index241.js";
+function timelineItemTemplate(props) {
+  const {
+    nodeType,
+    nodeColor,
+    icon,
+    avatar,
+    status,
+    lineVariant,
+    lineProgress,
+    hideLine,
+    timestamp,
+    title,
+    body,
+    card,
+    collapsed,
+    collapsible,
+    onToggleCollapse
+  } = props;
+  const itemCls = [
+    "tl-item",
+    status !== "default" ? `is-${status}` : "",
+    collapsed ? "is-collapsed" : ""
+  ].filter(Boolean).join(" ");
+  const nodeTypeCls = `tl-node-${nodeType}`;
+  const nodeColorCls = nodeColor !== "default" ? `nd-${nodeColor}` : "";
+  const nodeCls = `tl-node ${nodeTypeCls} ${nodeColorCls}`.trim();
+  const nodeInner = nodeType === "icon" ? html`<lib-icon name="${icon}" size="xs"></lib-icon>` : nodeType === "avatar" ? html`${avatar}` : nothing;
+  const lineCls = [
+    "tl-line",
+    lineVariant === "dashed" ? "dashed" : "",
+    lineVariant === "progress" ? "progress" : ""
+  ].filter(Boolean).join(" ");
+  const lineStyles = lineVariant === "progress" ? o({ "--tl-progress": `${lineProgress}%` }) : nothing;
+  const contentInner = card ? html`
+        <div class="tl-card">
+          ${title ? html`<p class="tl-title">${title}</p>` : nothing}
+          <div class="tl-card-body">
+            ${body ? html`<div class="tl-body">${body}</div>` : nothing}
+            <!-- slot por defecto para contenido libre dentro de la card -->
+            <slot></slot>
+            <!-- slot meta: badges, avatares, etc. -->
+            <div class="tl-meta">
+              <slot name="meta"></slot>
+            </div>
+            <!-- slot media: imágenes adjuntas -->
+            <slot name="media"></slot>
+          </div>
+        </div>` : html`
+        ${title ? html`<p class="tl-title">${title}</p>` : nothing}
+        ${body ? html`<div class="tl-body">${body}</div>` : html`<div class="tl-body"><slot></slot></div>`}
+        <div class="tl-meta">
+          <slot name="meta"></slot>
+        </div>`;
+  return html`
+    <div class="${itemCls}" role="listitem">
+
+      <!-- ── Spine: nodo + línea ── -->
+      <div class="tl-spine">
+        <div class="${nodeCls}">${nodeInner}</div>
+        ${hideLine ? nothing : html`<div class="${lineCls}" style="${lineStyles}"></div>`}
+      </div>
+
+      <!-- ── Content ── -->
+      <div class="tl-content">
+        ${timestamp ? html`
+              <div class="tl-timestamp">
+                <span class="tl-timestamp-dot"></span>
+                ${timestamp}
+              </div>` : nothing}
+
+        ${contentInner}
+
+        ${collapsible ? html`
+              <button
+                class="tl-expand-btn"
+                aria-expanded="${!collapsed}"
+                @click="${onToggleCollapse}"
+              >
+                <lib-icon
+                  name="${collapsed ? "caret-down" : "caret-up"}"
+                  size="xs"
+                ></lib-icon>
+                ${collapsed ? "Mostrar más" : "Mostrar menos"}
+              </button>` : nothing}
+      </div>
+
+    </div>
+  `;
+}
+export {
+  timelineItemTemplate
+};
+//# sourceMappingURL=index339.js.map

package/dist/index339.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index339.js","sources":["../src/components/organisms/timeline/lib-timeline-item.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { TimelineItemTemplateProps } from './lib-timeline-item.types';\n\nexport function timelineItemTemplate(props: TimelineItemTemplateProps): TemplateResult {\n  const {\n    nodeType, nodeColor, icon, avatar,\n    status, lineVariant, lineProgress, hideLine,\n    timestamp, title, body, card, collapsed, collapsible,\n    onToggleCollapse,\n  } = props;\n\n  /* ── Clases del ítem raíz ── */\n  const itemCls = [\n    'tl-item',\n    status !== 'default' ? `is-${status}` : '',\n    collapsed ? 'is-collapsed' : '',\n  ].filter(Boolean).join(' ');\n\n  /* ── Clases del nodo ── */\n  const nodeTypeCls = `tl-node-${nodeType}`;\n  const nodeColorCls = nodeColor !== 'default' ? `nd-${nodeColor}` : '';\n  const nodeCls = `tl-node ${nodeTypeCls} ${nodeColorCls}`.trim();\n\n  /* ── Nodo interior ── */\n  const nodeInner = nodeType === 'icon'\n    ? html`<lib-icon name=\"${icon}\" size=\"xs\"></lib-icon>`\n    : nodeType === 'avatar'\n      ? html`${avatar}`\n      : nothing; /* dot — nodo gestionado por CSS ::before/::after */\n\n  /* ── Línea ── */\n  const lineCls = [\n    'tl-line',\n    lineVariant === 'dashed'   ? 'dashed'   : '',\n    lineVariant === 'progress' ? 'progress' : '',\n  ].filter(Boolean).join(' ');\n\n  const lineStyles = lineVariant === 'progress'\n    ? styleMap({ '--tl-progress': `${lineProgress}%` } as Record<string, string>)\n    : nothing;\n\n  /* ── Contenido ── */\n  const contentInner: TemplateResult = card\n    ? html`\n        <div class=\"tl-card\">\n          ${title ? html`<p class=\"tl-title\">${title}</p>` : nothing}\n          <div class=\"tl-card-body\">\n            ${body ? html`<div class=\"tl-body\">${body}</div>` : nothing}\n            <!-- slot por defecto para contenido libre dentro de la card -->\n            <slot></slot>\n            <!-- slot meta: badges, avatares, etc. -->\n            <div class=\"tl-meta\">\n              <slot name=\"meta\"></slot>\n            </div>\n            <!-- slot media: imágenes adjuntas -->\n            <slot name=\"media\"></slot>\n          </div>\n        </div>`\n    : html`\n        ${title ? html`<p class=\"tl-title\">${title}</p>` : nothing}\n        ${body\n          ? html`<div class=\"tl-body\">${body}</div>`\n          : html`<div class=\"tl-body\"><slot></slot></div>`}\n        <div class=\"tl-meta\">\n          <slot name=\"meta\"></slot>\n        </div>`;\n\n  return html`\n    <div class=\"${itemCls}\" role=\"listitem\">\n\n      <!-- ── Spine: nodo + línea ── -->\n      <div class=\"tl-spine\">\n        <div class=\"${nodeCls}\">${nodeInner}</div>\n        ${hideLine\n          ? nothing\n          : html`<div class=\"${lineCls}\" style=\"${lineStyles}\"></div>`}\n      </div>\n\n      <!-- ── Content ── -->\n      <div class=\"tl-content\">\n        ${timestamp\n          ? html`\n              <div class=\"tl-timestamp\">\n                <span class=\"tl-timestamp-dot\"></span>\n                ${timestamp}\n              </div>`\n          : nothing}\n\n        ${contentInner}\n\n        ${collapsible\n          ? html`\n              <button\n                class=\"tl-expand-btn\"\n                aria-expanded=\"${!collapsed}\"\n                @click=\"${onToggleCollapse}\"\n              >\n                <lib-icon\n                  name=\"${collapsed ? 'caret-down' : 'caret-up'}\"\n                  size=\"xs\"\n                ></lib-icon>\n                ${collapsed ? 'Mostrar más' : 'Mostrar menos'}\n              </button>`\n          : nothing}\n      </div>\n\n    </div>\n  `;\n}"],"names":["styleMap"],"mappings":";;AAIO,SAAS,qBAAqB,OAAkD;AACrF,QAAM;AAAA,IACJ;AAAA,IAAU;AAAA,IAAW;AAAA,IAAM;AAAA,IAC3B;AAAA,IAAQ;AAAA,IAAa;AAAA,IAAc;AAAA,IACnC;AAAA,IAAW;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAW;AAAA,IACzC;AAAA,EAAA,IACE;AAGJ,QAAM,UAAU;AAAA,IACd;AAAA,IACA,WAAW,YAAY,MAAM,MAAM,KAAK;AAAA,IACxC,YAAY,iBAAiB;AAAA,EAAA,EAC7B,OAAO,OAAO,EAAE,KAAK,GAAG;AAG1B,QAAM,cAAc,WAAW,QAAQ;AACvC,QAAM,eAAe,cAAc,YAAY,MAAM,SAAS,KAAK;AACnE,QAAM,UAAU,WAAW,WAAW,IAAI,YAAY,GAAG,KAAA;AAGzD,QAAM,YAAY,aAAa,SAC3B,uBAAuB,IAAI,4BAC3B,aAAa,WACX,OAAO,MAAM,KACb;AAGN,QAAM,UAAU;AAAA,IACd;AAAA,IACA,gBAAgB,WAAa,WAAa;AAAA,IAC1C,gBAAgB,aAAa,aAAa;AAAA,EAAA,EAC1C,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1B,QAAM,aAAa,gBAAgB,aAC/BA,EAAS,EAAE,iBAAiB,GAAG,YAAY,IAAA,CAA+B,IAC1E;AAGJ,QAAM,eAA+B,OACjC;AAAA;AAAA,YAEM,QAAQ,2BAA2B,KAAK,SAAS,OAAO;AAAA;AAAA,cAEtD,OAAO,4BAA4B,IAAI,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAWjE;AAAA,UACI,QAAQ,2BAA2B,KAAK,SAAS,OAAO;AAAA,UACxD,OACE,4BAA4B,IAAI,WAChC,8CAA8C;AAAA;AAAA;AAAA;AAKxD,SAAO;AAAA,kBACS,OAAO;AAAA;AAAA;AAAA;AAAA,sBAIH,OAAO,KAAK,SAAS;AAAA,UACjC,WACE,UACA,mBAAmB,OAAO,YAAY,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAK5D,YACE;AAAA;AAAA;AAAA,kBAGM,SAAS;AAAA,wBAEf,OAAO;AAAA;AAAA,UAET,YAAY;AAAA;AAAA,UAEZ,cACE;AAAA;AAAA;AAAA,iCAGqB,CAAC,SAAS;AAAA,0BACjB,gBAAgB;AAAA;AAAA;AAAA,0BAGhB,YAAY,eAAe,UAAU;AAAA;AAAA;AAAA,kBAG7C,YAAY,gBAAgB,eAAe;AAAA,2BAEjD,OAAO;AAAA;AAAA;AAAA;AAAA;AAKnB;"}

package/dist/index34.js

@@ -0,0 +1,66 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { kbdTemplate } from "./index252.js";
+import kbdCss from "./index253.js";
+import sharedTokens from "./index196.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibKbd = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.variant = "default";
+    this.pressed = false;
+    this._pointerPressed = false;
+  }
+  render() {
+    return kbdTemplate({
+      size: this.size,
+      variant: this.variant,
+      pressed: this.pressed || this._pointerPressed,
+      onDown: this._onPointerDown.bind(this),
+      onUp: this._onPointerUp.bind(this),
+      onLeave: this._onPointerLeave.bind(this)
+    });
+  }
+  _onPointerDown() {
+    this._pointerPressed = true;
+  }
+  _onPointerUp() {
+    this._pointerPressed = false;
+  }
+  _onPointerLeave() {
+    this._pointerPressed = false;
+  }
+};
+LibKbd.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(kbdCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibKbd.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibKbd.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibKbd.prototype, "pressed", 2);
+__decorateClass([
+  state()
+], LibKbd.prototype, "_pointerPressed", 2);
+LibKbd = __decorateClass([
+  customElement("lib-kbd")
+], LibKbd);
+export {
+  LibKbd
+};
+//# sourceMappingURL=index34.js.map

package/dist/index34.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index34.js","sources":["../src/components/atoms/kbd/lib-kbd.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { kbdTemplate } from './lib-kbd.html';\nimport kbdCss from './lib-kbd.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type LibKbdSize    = 'xs' | 'sm' | 'md' | 'lg';\nexport type LibKbdVariant = 'default' | 'dark' | 'ghost' | 'kaki' | 'celadon';\n\n/**\n * @element lib-kbd\n *\n * Representa una tecla de teclado física.\n * El `border-bottom` de 3px simula la pared lateral de la tecla.\n * El estado `pressed` produce un desplazamiento físico de 1-2px.\n *\n * @slot (default) — el símbolo o texto de la tecla (⌘, K, Ctrl…)\n *\n * @example — tecla individual\n * <lib-kbd>⌘</lib-kbd>\n *\n * @example — combo (el consumer compone las teclas)\n * <lib-kbd size=\"sm\">⌘</lib-kbd>\n * <span>+</span>\n * <lib-kbd size=\"sm\">K</lib-kbd>\n *\n * @example — pressed programático\n * <lib-kbd pressed>Space</lib-kbd>\n */\n@customElement('lib-kbd')\nexport class LibKbd extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(kbdCss)}`,\n  ];\n\n  /** Tamaño de la tecla. */\n  @property({ type: String, reflect: true })\n  size: LibKbdSize = 'md';\n\n  /** Variante visual de color. */\n  @property({ type: String, reflect: true })\n  variant: LibKbdVariant = 'default';\n\n  /**\n   * Estado pressed programático.\n   * El componente también gestiona pressed internamente\n   * via mousedown/mouseup para la interacción del usuario.\n   */\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  /** Estado interno de pulsación por ratón (no expuesto como atributo). */\n  @state()\n  private _pointerPressed = false;\n\n  override render(): TemplateResult {\n    return kbdTemplate({\n      size:    this.size,\n      variant: this.variant,\n      pressed: this.pressed || this._pointerPressed,\n      onDown:  this._onPointerDown.bind(this),\n      onUp:    this._onPointerUp.bind(this),\n      onLeave: this._onPointerLeave.bind(this),\n    });\n  }\n\n  private _onPointerDown(): void {\n    this._pointerPressed = true;\n  }\n\n  private _onPointerUp(): void {\n    this._pointerPressed = false;\n  }\n\n  private _onPointerLeave(): void {\n    this._pointerPressed = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-kbd': LibKbd;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BO,IAAM,SAAN,cAAqB,WAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,OAAmB;AAInB,SAAA,UAAyB;AAQzB,SAAA,UAAU;AAIV,SAAQ,kBAAkB;AAAA,EAAA;AAAA,EAEjB,SAAyB;AAChC,WAAO,YAAY;AAAA,MACjB,MAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,SAAS,KAAK,WAAW,KAAK;AAAA,MAC9B,QAAS,KAAK,eAAe,KAAK,IAAI;AAAA,MACtC,MAAS,KAAK,aAAa,KAAK,IAAI;AAAA,MACpC,SAAS,KAAK,gBAAgB,KAAK,IAAI;AAAA,IAAA,CACxC;AAAA,EACH;AAAA,EAEQ,iBAAuB;AAC7B,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEQ,eAAqB;AAC3B,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEQ,kBAAwB;AAC9B,SAAK,kBAAkB;AAAA,EACzB;AACF;AAhDa,OACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,MAAM,CAAC;AACzB;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAP9B,OAQX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAX9B,OAYX,WAAA,WAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAnB/B,OAoBX,WAAA,WAAA,CAAA;AAIQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAvBI,OAwBH,WAAA,mBAAA,CAAA;AAxBG,SAAN,gBAAA;AAAA,EADN,cAAc,SAAS;AAAA,GACX,MAAA;"}

package/dist/index340.js

@@ -0,0 +1,24 @@
+import { html } from "lit";
+function horizontalScrollTemplate(ctx) {
+  return html`
+    <div class="sticky-wrapper" part="wrapper">
+
+      <div class="horizontal-content" part="content">
+        <slot></slot>
+      </div>
+
+      <div class="progress-bar" part="progress-bar" ?hidden="${!ctx.showProgress}">
+        <div class="progress-fill" part="progress-fill"></div>
+      </div>
+
+      <span class="counter" part="counter" ?hidden="${!ctx.showProgress}">
+        0%
+      </span>
+
+    </div>
+  `;
+}
+export {
+  horizontalScrollTemplate
+};
+//# sourceMappingURL=index340.js.map

package/dist/index340.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index340.js","sources":["../src/components/organisms/horizontal-scroll-section/lib-horizontal-scroll-section.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibHorizontalScrollSection } from './lib-horizontal-scroll-section.component';\n\nexport function horizontalScrollTemplate(ctx: LibHorizontalScrollSection): TemplateResult {\n  return html`\n    <div class=\"sticky-wrapper\" part=\"wrapper\">\n\n      <div class=\"horizontal-content\" part=\"content\">\n        <slot></slot>\n      </div>\n\n      <div class=\"progress-bar\" part=\"progress-bar\" ?hidden=\"${!ctx.showProgress}\">\n        <div class=\"progress-fill\" part=\"progress-fill\"></div>\n      </div>\n\n      <span class=\"counter\" part=\"counter\" ?hidden=\"${!ctx.showProgress}\">\n        0%\n      </span>\n\n    </div>\n  `;\n}"],"names":[],"mappings":";AAGO,SAAS,yBAAyB,KAAiD;AACxF,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+DAOsD,CAAC,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA,sDAI1B,CAAC,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMvE;"}

package/dist/index341.js

@@ -0,0 +1,5 @@
+const sectionCss = "@layer tokens,reset,components;@layer reset{:host{display:block;position:relative}*,*:before,*:after{box-sizing:border-box}}@layer components{:host{height:var(--_scroll-height, 300vh)}.sticky-wrapper{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;background:var(--bg-base)}.horizontal-content{display:flex;gap:var(--_gap, calc(var(--lib-space-xl) * 2));padding:0 calc(var(--_padding-inline, 10) * 1vw);will-change:transform}::slotted(*){flex-shrink:0}.progress-bar{position:absolute;bottom:var(--lib-space-xl);left:calc(var(--_padding-inline, 10) * 1vw);width:calc(100% - (var(--_padding-inline, 10) * 2vw));height:1px;background:var(--border-subtle)}.progress-fill{height:100%;width:0%;background:var(--color-washi-900);transition:width 80ms linear}.counter{position:absolute;bottom:calc(var(--lib-space-xl) + 16px);right:calc(var(--_padding-inline, 10) * 1vw);font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--text-muted);-webkit-user-select:none;user-select:none}}";
+export {
+  sectionCss as default
+};
+//# sourceMappingURL=index341.js.map

package/dist/index341.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index341.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index342.js

@@ -0,0 +1,87 @@
+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 {
+  carouselTemplate
+};
+//# sourceMappingURL=index342.js.map

package/dist/index342.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index342.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;"}

package/dist/index343.js

@@ -0,0 +1,5 @@
+const carouselCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}button{font:inherit}}@layer components{.cr{position:relative;width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;outline:none}.cr:focus-visible{outline:2px solid var(--color-washi-700);outline-offset:2px}.cr-track{display:flex;transition:transform var(--duration-slow) var(--ease-out);will-change:transform}::slotted(*){flex:0 0 100%;min-width:0}:host([peek="2"]) .cr-track{gap:var(--lib-space-md)}:host([peek="2"]) ::slotted(*){flex:0 0 calc(50% - 8px)}:host([peek="3"]) .cr-track{gap:var(--lib-space-md)}:host([peek="3"]) ::slotted(*){flex:0 0 calc(33.333% - 11px)}:host([peek="4"]) .cr-track{gap:var(--lib-space-sm)}:host([peek="4"]) ::slotted(*){flex:0 0 calc(25% - 6px)}.cr-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:var(--z-raised);width:40px;height:40px;border:1px solid var(--border-default);background:#faf7f4e0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary);transition:background var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),opacity var(--duration-base) var(--ease-default),transform var(--duration-base) var(--ease-bounce);border-radius:var(--radius-none)}.cr-arrow svg{width:16px;height:16px;flex-shrink:0}.cr-arrow:hover:not(.is-disabled){background:var(--bg-elevated);border-color:var(--border-strong, var(--color-washi-500));transform:translateY(-50%) scale(1.05)}.cr-arrow.is-disabled{opacity:.3;pointer-events:none}.cr-arrow-prev{left:var(--lib-space-md)}.cr-arrow-next{right:var(--lib-space-md)}.cr-dots{display:flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);padding-top:var(--lib-space-md)}.cr-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-washi-300);border:none;cursor:pointer;padding:0;transition:width var(--duration-slow) var(--ease-bounce),background var(--duration-base) var(--ease-default);flex-shrink:0}.cr-dot.is-active{width:20px;background:var(--color-washi-900)}.cr-counter{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-widest);color:var(--text-muted);text-align:center;padding-top:var(--lib-space-sm)}.cr-counter span{color:var(--text-primary)}:host([mode="fade"]) .cr-track{transition:none;position:relative}:host([mode="fade"]) ::slotted(*){position:absolute;top:0;left:0;width:100%;opacity:0;transition:opacity var(--duration-slow) var(--ease-out);pointer-events:none}:host([mode="fade"]) ::slotted(.is-active){position:relative;opacity:1;pointer-events:auto}slot[name=thumbnail]{display:flex;gap:var(--lib-space-xs);padding-top:var(--lib-space-sm);overflow-x:auto;scrollbar-width:none}slot[name=thumbnail]::-webkit-scrollbar{display:none}::slotted([slot="thumbnail"]){width:64px;height:48px;flex-shrink:0;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color var(--duration-base) var(--ease-default),opacity var(--duration-base) var(--ease-default);opacity:.5}::slotted([slot="thumbnail"].is-active){border-color:var(--color-washi-900);opacity:1}@media(max-width:640px){:host([peek="2"]) ::slotted(*),:host([peek="3"]) ::slotted(*),:host([peek="4"]) ::slotted(*){flex:0 0 calc(80% - 8px)}}@media(prefers-reduced-motion:reduce){.cr-track{transition:none}.cr-dot{transition:background var(--duration-base)}:host([mode="fade"]) ::slotted(*){transition:none}}}';
+export {
+  carouselCss as default
+};
+//# sourceMappingURL=index343.js.map

package/dist/index343.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index343.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index344.js

@@ -0,0 +1,21 @@
+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 {
+  bentoGridTemplate
+};
+//# sourceMappingURL=index344.js.map

package/dist/index344.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index344.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/index345.js

@@ -0,0 +1,5 @@
+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 {
+  gridCss as default
+};
+//# sourceMappingURL=index345.js.map

package/dist/index345.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index345.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}