@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index8.js.map

@@ -1 +1 @@
-{"version":3,"file":"index8.js","sources":["../src/components/atoms/text-list/lib-text-list.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport textListCss from './lib-text-list.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { textListTemplate } from './lib-text-list.html';\nimport type {\n  ListFamily,\n  ContentItem,\n  UiItem,\n  UiRow,\n  DlItem,\n  ContentMarker,\n  OrderedCounter,\n  ListSize,\n  DlLayout,\n  ListRowClickDetail,\n  ListToggleDetail,\n} from './lib-text-list.types';\n\n/**\n * @element lib-text-list\n *\n * Sistema de listas con tres familias:\n *\n * **Content list** (`family=\"ul\" | \"ol\"`) — listas tipográficas para prosa.\n * Marcadores: default · kaki · dash · check.\n * Contadores (ol): decimal · roman · alpha.\n *\n * **UI list** (`family=\"ui\"`) — filas de interfaz con icono, avatar,\n * meta, badge, toggle, chevron. Soporta separadores y headers de sección.\n *\n * **Description list** (`family=\"dl\"`) — pares clave/valor.\n * Layouts: inline · wide · stack.\n *\n * @prop {ListFamily}       family       — Familia activa (default: 'ul')\n *\n * — Content list —\n * @prop {ContentItem[]}    items        — Ítems de contenido\n * @prop {ContentMarker}    marker       — Tipo de viñeta (default: 'default')\n * @prop {OrderedCounter}   counter      — Tipo de contador ol (default: 'decimal')\n * @prop {ListSize}         size         — Tamaño (default: 'md')\n *\n * — UI list —\n * @prop {UiItem[]}         uiItems      — Filas, separadores y headers\n * @prop {boolean}          divided      — Separadores entre filas\n * @prop {boolean}          bordered     — Borde exterior\n * @prop {boolean}          inset        — Fondo de superficie\n * @prop {boolean}          interactive  — Hover + cursor pointer\n *\n * — Description list —\n * @prop {DlItem[]}         dlItems      — Pares clave/valor\n * @prop {DlLayout}         dlLayout     — Layout (default: 'inline')\n * @prop {boolean}          dlDivided    — Separadores entre pares\n *\n * — Global —\n * @prop {boolean}          dark         — Superficie oscura\n * @prop {boolean}          loading      — Estado de carga (skeleton)\n * @prop {number}           skeletonCount — Número de skeletons (default: 4)\n *\n * @fires ui-lib-row-click — Al hacer clic en una fila UI\n *   Detail: { key: string, item: UiRow }\n * @fires ui-lib-toggle    — Al cambiar un toggle en una fila UI\n *   Detail: { key: string, value: boolean }\n */\n@customElement('lib-text-list')\nexport class LibTextList extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(textListCss)}`,\n  ];\n\n  /* ── Familia ── */\n\n  @property({ type: String, reflect: true })\n  family: ListFamily = 'ul';\n\n  /* ── Content list ── */\n\n  @property({ type: Array })\n  items: ContentItem[] = [];\n\n  @property({ type: String, reflect: true })\n  marker: ContentMarker = 'default';\n\n  @property({ type: String, reflect: true })\n  counter: OrderedCounter = 'decimal';\n\n  @property({ type: String, reflect: true })\n  size: ListSize = 'md';\n\n  /* ── UI list ── */\n\n  @property({ type: Array, attribute: 'ui-items' })\n  uiItems: UiItem[] = [];\n\n  @property({ type: Boolean, reflect: true })\n  divided = false;\n\n  @property({ type: Boolean, reflect: true })\n  bordered = false;\n\n  @property({ type: Boolean, reflect: true })\n  inset = false;\n\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  /* ── Description list ── */\n\n  @property({ type: Array, attribute: 'dl-items' })\n  dlItems: DlItem[] = [];\n\n  @property({ type: String, reflect: true, attribute: 'dl-layout' })\n  dlLayout: DlLayout = 'inline';\n\n  @property({ type: Boolean, reflect: true, attribute: 'dl-divided' })\n  dlDivided = false;\n\n  /* ── Global ── */\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: Number, attribute: 'skeleton-count' })\n  skeletonCount = 4;\n\n  /* ── Handlers ── */\n\n  private _handleRowClick(item: UiRow): void {\n    this.dispatchEvent(\n      new CustomEvent<ListRowClickDetail>('ui-lib-row-click', {\n        detail: { key: item.key, item },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _handleToggle(item: UiRow, value: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent<ListToggleDetail>('ui-lib-toggle', {\n        detail: { key: item.key, value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    /* Loading skeleton — solo content list */\n    if (this.loading && (this.family === 'ul' || this.family === 'ol')) {\n      const skeletons: ContentItem[] = Array.from(\n        { length: this.skeletonCount },\n        (_, i): ContentItem => ({ label: `skeleton-${i}` })\n      );\n\n      return textListTemplate({\n        family:        this.family,\n        contentItems:  skeletons,\n        marker:        'default',\n        counter:       this.counter,\n        size:          this.size,\n        nested:        false,\n        uiItems:       [],\n        divided:       this.divided,\n        bordered:      this.bordered,\n        inset:         this.inset,\n        interactive:   this.interactive,\n        dark:          this.dark,\n        dlItems:       [],\n        dlLayout:      this.dlLayout,\n        dlDivided:     this.dlDivided,\n        onRowClick:    (): void => {},\n        onToggle:      (): void => {},\n      });\n    }\n\n    return textListTemplate({\n      family:        this.family,\n      contentItems:  this.items,\n      marker:        this.marker,\n      counter:       this.counter,\n      size:          this.size,\n      nested:        false,\n      uiItems:       this.uiItems,\n      divided:       this.divided,\n      bordered:      this.bordered,\n      inset:         this.inset,\n      interactive:   this.interactive,\n      dark:          this.dark,\n      dlItems:       this.dlItems,\n      dlLayout:      this.dlLayout,\n      dlDivided:     this.dlDivided,\n      onRowClick:    (item): void => this._handleRowClick(item),\n      onToggle:      (item, v): void => this._handleToggle(item, v),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-text-list': LibTextList;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index8.js","sources":["../src/components/atoms/badge/lib-badge.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibBadgeVariant, LibBadgeSize } from './lib-badge.html';\nimport { badgeTemplate } from './lib-badge.html';\nimport badgeCss from './lib-badge.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-badge\n *\n * Indicador visual compacto para estado, notificaciones o etiquetas.\n *\n * @slot - Contenido del badge (texto o icono)\n * @csspart badge - El elemento <span> raíz del badge\n *\n * @example\n * <lib-badge variant=\"success\" dot>Activo</lib-badge>\n * <lib-badge variant=\"error\">Error</lib-badge>\n * <lib-badge variant=\"accent\" pill>Nuevo</lib-badge>\n */\n@customElement('lib-badge')\nexport class LibBadge extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(badgeCss)}\n    `,\n  ];\n\n  /** Variante visual del badge */\n  @property({ type: String, reflect: true })\n  variant: LibBadgeVariant = 'default';\n\n  /** Tamaño del badge */\n  @property({ type: String, reflect: true })\n  size: LibBadgeSize = 'md';\n\n  /** Muestra un punto indicador de color a la izquierda del texto */\n  @property({ type: Boolean, reflect: true })\n  dot = false;\n\n  /** Aplica border-radius completo (estilo píldora) */\n  @property({ type: Boolean, reflect: true })\n  pill = false;\n\n  override render(): TemplateResult {\n    return badgeTemplate({\n      variant: this.variant,\n      size: this.size,\n      dot: this.dot,\n      pill: this.pill,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-badge': LibBadge;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBO,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAYL,SAAA,UAA2B;AAI3B,SAAA,OAAqB;AAIrB,SAAA,MAAM;AAIN,SAAA,OAAO;AAAA,EAAA;AAAA,EAEE,SAAyB;AAChC,WAAO,cAAc;AAAA,MACnB,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,KAAK,KAAK;AAAA,MACV,MAAM,KAAK;AAAA,IAAA,CACZ;AAAA,EACH;AACF;AAlCa,SACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,QAAQ,CAAC;AAAA;AAEzB;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAX9B,SAYX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAf9B,SAgBX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAnB/B,SAoBX,WAAA,OAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAvB/B,SAwBX,WAAA,QAAA,CAAA;AAxBW,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}

package/dist/index80.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, query, queryAssignedElements, customElement } from "lit/decorators.js";
-import { carouselTemplate } from "./index342.js";
-import carouselCss from "./index343.js";
+import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { staggerTemplate } from "./index257.js";
+import staggerCss from "./index258.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,210 +13,128 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibCarousel = class extends LitElement {
+const DIRECTION_MAP = {
+  up: "translateY(var(--lib-space-lg))",
+  down: "translateY(calc(-1 * var(--lib-space-lg)))",
+  left: "translateX(var(--lib-space-lg))",
+  right: "translateX(calc(-1 * var(--lib-space-lg)))",
+  fade: "none"
+};
+const EASING_MAP = {
+  default: "var(--ease-default)",
+  out: "var(--ease-out)",
+  bounce: "var(--ease-bounce)"
+};
+let LibStaggerContainer = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.mode = "slide";
-    this.peek = 1;
-    this.arrows = true;
-    this.dots = true;
-    this.counter = false;
-    this.loop = false;
-    this.autoplay = 0;
-    this._current = 0;
-    this._total = 0;
+    this.delay = 100;
+    this.duration = 600;
+    this.direction = "up";
+    this.easing = "out";
+    this.threshold = 0.15;
+    this.once = true;
+    this._observer = null;
+  }
+  /* ── Lifecycle ── */
+  /**
+   * firstUpdated: el DOM ya está renderizado y el slot poblado.
+   * Es el momento correcto para iniciar el observer,
+   * a diferencia de connectedCallback que dispara antes del render.
+   */
+  firstUpdated() {
+    var _a;
+    this._applyCssVars();
+    this._setupObserver();
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot");
+    slot == null ? void 0 : slot.addEventListener("slotchange", () => {
+      this._applyCssVars();
+    });
   }
-  /* ── Lifecycle ──────────────────────────────────────── */
   disconnectedCallback() {
+    var _a;
     super.disconnectedCallback();
-    this._clearAutoplay();
-  }
-  render() {
-    return carouselTemplate({
-      mode: this.mode,
-      current: this._current,
-      total: this._total,
-      peek: this.peek,
-      arrows: this.arrows,
-      dots: this.dots,
-      counter: this.counter,
-      loop: this.loop,
-      handlePrev: this._prev.bind(this),
-      handleNext: this._next.bind(this),
-      handleDot: this._goTo.bind(this),
-      handleSlot: this._onSlotChange.bind(this),
-      handleThumb: this._onThumbSlotChange.bind(this),
-      handleKey: this._onKeyDown.bind(this)
-    });
-  }
-  /* ── Slot handlers ──────────────────────────────────── */
-  _onSlotChange() {
-    this._total = this._slides.length;
-    this._applyState(this._current, false);
-    this._syncThumbs();
-    this.requestUpdate();
-    this._clearAutoplay();
-    this._startAutoplay();
-  }
-  _onThumbSlotChange() {
-    this._syncThumbs();
-  }
-  /* ── Navigation ─────────────────────────────────────── */
-  _prev() {
-    if (this._current === 0) {
-      if (this.loop) this._goTo(this._total - 1);
-    } else {
-      this._goTo(this._current - 1);
-    }
-  }
-  _next() {
-    if (this._current === this._total - 1) {
-      if (this.loop) this._goTo(0);
-    } else {
-      this._goTo(this._current + 1);
-    }
-  }
-  _goTo(index) {
-    if (!this._total) return;
-    const clamped = Math.max(0, Math.min(index, this._total - 1));
-    this._applyState(clamped, true);
-    this._syncThumbs();
-    this.requestUpdate();
-    this.dispatchEvent(
-      new CustomEvent("ui-lib-slide-change", {
-        detail: { current: this._current, total: this._total },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  /* ── Apply visual state ─────────────────────────────── */
-  _applyState(index, animate) {
-    this._current = index;
-    if (this.mode === "fade") {
-      this._applyFade();
-    } else {
-      this._applySlide(animate);
-    }
-  }
-  _applySlide(animate) {
-    if (!this._trackEl) return;
-    if (!animate) {
-      this._trackEl.style.transition = "none";
-      void this._trackEl.offsetHeight;
-    } else {
-      this._trackEl.style.transition = "";
-    }
-    if (this.peek === 1) {
-      this._trackEl.style.transform = `translateX(-${this._current * 100}%)`;
-    } else {
-      const slide = this._slides[0];
-      if (!slide) return;
-      const slideW = slide.offsetWidth;
-      const gap = parseFloat(getComputedStyle(this._trackEl).gap) || 16;
-      this._trackEl.style.transform = `translateX(-${this._current * (slideW + gap)}px)`;
-    }
-  }
-  _applyFade() {
-    this._slides.forEach((s, i) => {
-      s.classList.toggle("is-active", i === this._current);
+    (_a = this._observer) == null ? void 0 : _a.disconnect();
+    this._observer = null;
+  }
+  /* ── Props → CSS custom properties en :host ── */
+  updated() {
+    this.style.setProperty("--_stagger-from", DIRECTION_MAP[this.direction]);
+    this.style.setProperty("--_stagger-ease", EASING_MAP[this.easing]);
+    this.style.setProperty("--_stagger-duration", `${this.duration}ms`);
+  }
+  /* ── Asigna --_stagger-delay individual a cada item ── */
+  _applyCssVars() {
+    this._items.forEach((el, i) => {
+      el.style.setProperty("--_stagger-delay", `${i * this.delay}ms`);
     });
   }
-  /* ── Thumbnails ─────────────────────────────────────── */
-  _syncThumbs() {
-    this._thumbs.forEach((t, i) => {
-      t.classList.toggle("is-active", i === this._current);
-      t.addEventListener("click", () => this._goTo(i), { once: false });
-    });
-  }
-  /* ── Autoplay ───────────────────────────────────────── */
-  _startAutoplay() {
-    if (!this.autoplay || this.autoplay <= 0) return;
-    this._autoplayTimer = setInterval(() => {
-      if (this._current === this._total - 1) {
-        if (this.loop) this._goTo(0);
-      } else {
-        this._goTo(this._current + 1);
+  /* ── IntersectionObserver ── */
+  _setupObserver() {
+    this._observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          var _a;
+          if (entry.isIntersecting) {
+            this.setAttribute("visible", "");
+            this.dispatchEvent(new CustomEvent("ui-lib-stagger-visible", {
+              bubbles: true,
+              composed: true
+            }));
+            if (this.once) {
+              (_a = this._observer) == null ? void 0 : _a.disconnect();
+              this._observer = null;
+            }
+          } else if (!this.once) {
+            this.removeAttribute("visible");
+            this.dispatchEvent(new CustomEvent("ui-lib-stagger-hidden", {
+              bubbles: true,
+              composed: true
+            }));
+          }
+        });
+      },
+      {
+        threshold: this.threshold,
+        rootMargin: "0px 0px -40px 0px"
+        // Dispara un poco antes de llegar al borde
       }
-    }, this.autoplay);
-  }
-  _clearAutoplay() {
-    if (this._autoplayTimer !== void 0) {
-      clearInterval(this._autoplayTimer);
-      this._autoplayTimer = void 0;
-    }
-  }
-  /* ── Keyboard ───────────────────────────────────────── */
-  _onKeyDown(e) {
-    if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      this._prev();
-    }
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      this._next();
-    }
-    if (e.key === "Home") {
-      e.preventDefault();
-      this._goTo(0);
-    }
-    if (e.key === "End") {
-      e.preventDefault();
-      this._goTo(this._total - 1);
-    }
-  }
-  /* ── Public API ─────────────────────────────────────── */
-  /** Ir a un slide concreto por índice (0-based). */
-  goTo(index) {
-    this._goTo(index);
-  }
-  /** Ir al siguiente slide. */
-  next() {
-    this._next();
+    );
+    this._observer.observe(this);
   }
-  /** Ir al anterior slide. */
-  prev() {
-    this._prev();
+  render() {
+    return staggerTemplate();
   }
 };
-LibCarousel.styles = [
+LibStaggerContainer.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(carouselCss)}`
+  css`${unsafeCSS(staggerCss)}`
 ];
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibCarousel.prototype, "mode", 2);
-__decorateClass([
-  property({ type: Number, reflect: true })
-], LibCarousel.prototype, "peek", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibCarousel.prototype, "arrows", 2);
+  property({ type: Number })
+], LibStaggerContainer.prototype, "delay", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibCarousel.prototype, "dots", 2);
+  property({ type: Number })
+], LibStaggerContainer.prototype, "duration", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibCarousel.prototype, "counter", 2);
+  property({ type: String, reflect: true })
+], LibStaggerContainer.prototype, "direction", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibCarousel.prototype, "loop", 2);
+  property({ type: String })
+], LibStaggerContainer.prototype, "easing", 2);
 __decorateClass([
   property({ type: Number })
-], LibCarousel.prototype, "autoplay", 2);
-__decorateClass([
-  query(".cr-track")
-], LibCarousel.prototype, "_trackEl", 2);
+], LibStaggerContainer.prototype, "threshold", 2);
 __decorateClass([
-  queryAssignedElements()
-], LibCarousel.prototype, "_slides", 2);
+  property({ type: Boolean })
+], LibStaggerContainer.prototype, "once", 2);
 __decorateClass([
-  queryAssignedElements({ slot: "thumbnail" })
-], LibCarousel.prototype, "_thumbs", 2);
-LibCarousel = __decorateClass([
-  customElement("lib-carousel")
-], LibCarousel);
+  queryAssignedElements({ flatten: true })
+], LibStaggerContainer.prototype, "_items", 2);
+LibStaggerContainer = __decorateClass([
+  customElement("lib-stagger-container")
+], LibStaggerContainer);
 export {
-  LibCarousel
+  LibStaggerContainer
 };
 //# sourceMappingURL=index80.js.map

package/dist/index80.js.map

@@ -1 +1 @@
-{"version":3,"file":"index80.js","sources":["../src/components/organisms/carousel/lib-carousel.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { carouselTemplate } from './lib-carousel.html';\nimport type { LibCarouselMode } from './lib-carousel.html';\nimport carouselCss from './lib-carousel.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type { LibCarouselMode };\n\n/**\n * @element lib-carousel\n *\n * Carousel agnóstico. El consumer pasa los slides directamente como hijos.\n * El componente gestiona la navegación, animación y accesibilidad.\n *\n * Modos:\n * - slide : transform translateX (default)\n * - fade  : crossfade por opacidad\n *\n * @slot (default)   — slides del carousel\n * @slot thumbnail   — tira de miniaturas (opcional, modo fade)\n *\n * @fires ui-lib-slide-change — `{ current: number, total: number }`\n *\n * @example — slide default (1 visible)\n * <lib-carousel dots counter>\n *   <div>Slide 1</div>\n *   <div>Slide 2</div>\n * </lib-carousel>\n *\n * @example — cards (3 visibles)\n * <lib-carousel peek=\"3\" counter>\n *   <div class=\"mi-card\">...</div>\n *   ...\n * </lib-carousel>\n *\n * @example — fade con thumbnails\n * <lib-carousel mode=\"fade\" dots arrows=\"false\">\n *   <div>Slide 1</div>\n *   <img slot=\"thumbnail\" src=\"...\" alt=\"\">\n * </lib-carousel>\n */\n@customElement('lib-carousel')\nexport class LibCarousel extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(carouselCss)}`,\n  ];\n\n  /**\n   * Mecanismo de transición.\n   * - slide : desplazamiento horizontal (transform)\n   * - fade  : crossfade por opacidad\n   */\n  @property({ type: String, reflect: true })\n  mode: LibCarouselMode = 'slide';\n\n  /**\n   * Número de slides visibles simultáneamente.\n   * peek=1 (default): carousel estándar.\n   * peek=3: card carousel con tres columnas.\n   */\n  @property({ type: Number, reflect: true })\n  peek = 1;\n\n  /** Muestra flechas de navegación prev/next (solo en modo slide). */\n  @property({ type: Boolean, reflect: true })\n  arrows = true;\n\n  /** Muestra dots de navegación. */\n  @property({ type: Boolean, reflect: true })\n  dots = true;\n\n  /** Muestra contador numérico. */\n  @property({ type: Boolean, reflect: true })\n  counter = false;\n\n  /** Navegación circular (el último slide vuelve al primero). */\n  @property({ type: Boolean, reflect: true })\n  loop = false;\n\n  /**\n   * Intervalo de autoplay en milisegundos.\n   * 0 = desactivado (default).\n   */\n  @property({ type: Number })\n  autoplay = 0;\n\n  /* ── Internal state ─────────────────────────────────── */\n  private _current = 0;\n  private _total   = 0;\n  private _autoplayTimer: ReturnType<typeof setInterval> | undefined;\n\n  @query('.cr-track')\n  private _trackEl!: HTMLElement;\n\n  @queryAssignedElements()\n  private _slides!: Array<HTMLElement>;\n\n  @queryAssignedElements({ slot: 'thumbnail' })\n  private _thumbs!: Array<HTMLElement>;\n\n  /* ── Lifecycle ──────────────────────────────────────── */\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearAutoplay();\n  }\n\n  override render(): TemplateResult {\n    return carouselTemplate({\n      mode:        this.mode,\n      current:     this._current,\n      total:       this._total,\n      peek:        this.peek,\n      arrows:      this.arrows,\n      dots:        this.dots,\n      counter:     this.counter,\n      loop:        this.loop,\n      handlePrev:  this._prev.bind(this),\n      handleNext:  this._next.bind(this),\n      handleDot:   this._goTo.bind(this),\n      handleSlot:  this._onSlotChange.bind(this),\n      handleThumb: this._onThumbSlotChange.bind(this),\n      handleKey:   this._onKeyDown.bind(this),\n    });\n  }\n\n  /* ── Slot handlers ──────────────────────────────────── */\n  private _onSlotChange(): void {\n    this._total = this._slides.length;\n    this._applyState(this._current, false);   // sin animación en init\n    this._syncThumbs();\n    this.requestUpdate();\n    this._clearAutoplay();\n    this._startAutoplay();\n  }\n\n  private _onThumbSlotChange(): void {\n    this._syncThumbs();\n  }\n\n  /* ── Navigation ─────────────────────────────────────── */\n  private _prev(): void {\n    if (this._current === 0) {\n      if (this.loop) this._goTo(this._total - 1);\n    } else {\n      this._goTo(this._current - 1);\n    }\n  }\n\n  private _next(): void {\n    if (this._current === this._total - 1) {\n      if (this.loop) this._goTo(0);\n    } else {\n      this._goTo(this._current + 1);\n    }\n  }\n\n  private _goTo(index: number): void {\n    if (!this._total) return;\n    const clamped = Math.max(0, Math.min(index, this._total - 1));\n    this._applyState(clamped, true);\n    this._syncThumbs();\n    this.requestUpdate();\n\n    this.dispatchEvent(\n      new CustomEvent<{ current: number; total: number }>('ui-lib-slide-change', {\n        detail:   { current: this._current, total: this._total },\n        bubbles:  true,\n        composed: true,\n      })\n    );\n  }\n\n  /* ── Apply visual state ─────────────────────────────── */\n  private _applyState(index: number, animate: boolean): void {\n    this._current = index;\n\n    if (this.mode === 'fade') {\n      this._applyFade();\n    } else {\n      this._applySlide(animate);\n    }\n  }\n\n  private _applySlide(animate: boolean): void {\n    if (!this._trackEl) return;\n\n    if (!animate) {\n      this._trackEl.style.transition = 'none';\n      // Forzar reflow para que se aplique sin transición\n      void this._trackEl.offsetHeight;\n    } else {\n      this._trackEl.style.transition = '';\n    }\n\n    if (this.peek === 1) {\n      this._trackEl.style.transform = `translateX(-${this._current * 100}%)`;\n    } else {\n      const slide = this._slides[0];\n      if (!slide) return;\n      const slideW = slide.offsetWidth;\n      const gap    = parseFloat(getComputedStyle(this._trackEl).gap) || 16;\n      this._trackEl.style.transform =\n        `translateX(-${this._current * (slideW + gap)}px)`;\n    }\n  }\n\n  private _applyFade(): void {\n    this._slides.forEach((s, i) => {\n      s.classList.toggle('is-active', i === this._current);\n    });\n  }\n\n  /* ── Thumbnails ─────────────────────────────────────── */\n  private _syncThumbs(): void {\n    this._thumbs.forEach((t, i) => {\n      t.classList.toggle('is-active', i === this._current);\n      t.addEventListener('click', () => this._goTo(i), { once: false });\n    });\n  }\n\n  /* ── Autoplay ───────────────────────────────────────── */\n  private _startAutoplay(): void {\n    if (!this.autoplay || this.autoplay <= 0) return;\n    this._autoplayTimer = setInterval(() => {\n      if (this._current === this._total - 1) {\n        if (this.loop) this._goTo(0);\n      } else {\n        this._goTo(this._current + 1);\n      }\n    }, this.autoplay);\n  }\n\n  private _clearAutoplay(): void {\n    if (this._autoplayTimer !== undefined) {\n      clearInterval(this._autoplayTimer);\n      this._autoplayTimer = undefined;\n    }\n  }\n\n  /* ── Keyboard ───────────────────────────────────────── */\n  private _onKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'ArrowLeft')  { e.preventDefault(); this._prev(); }\n    if (e.key === 'ArrowRight') { e.preventDefault(); this._next(); }\n    if (e.key === 'Home')       { e.preventDefault(); this._goTo(0); }\n    if (e.key === 'End')        { e.preventDefault(); this._goTo(this._total - 1); }\n  }\n\n  /* ── Public API ─────────────────────────────────────── */\n  /** Ir a un slide concreto por índice (0-based). */\n  public goTo(index: number): void {\n    this._goTo(index);\n  }\n\n  /** Ir al siguiente slide. */\n  public next(): void {\n    this._next();\n  }\n\n  /** Ir al anterior slide. */\n  public prev(): void {\n    this._prev();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-carousel': LibCarousel;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index80.js","sources":["../src/components/organisms/stagger/lib-stagger-container.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { staggerTemplate } from './lib-stagger-container.html';\nimport staggerCss from './lib-stagger.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { StaggerDirection, StaggerEasing } from './lib-stagger-container.types';\n\n/** Mapeo dirección → valor CSS de transform inicial */\nconst DIRECTION_MAP: Record<StaggerDirection, string> = {\n  up:    'translateY(var(--lib-space-lg))',\n  down:  'translateY(calc(-1 * var(--lib-space-lg)))',\n  left:  'translateX(var(--lib-space-lg))',\n  right: 'translateX(calc(-1 * var(--lib-space-lg)))',\n  fade:  'none',\n};\n\n/** Mapeo easing → token CSS */\nconst EASING_MAP: Record<StaggerEasing, string> = {\n  default: 'var(--ease-default)',\n  out:     'var(--ease-out)',\n  bounce:  'var(--ease-bounce)',\n};\n\n/**\n * lib-stagger-container\n *\n * Anima los hijos directos en cascada al entrar en el viewport.\n * Usa IntersectionObserver para activar y CSS custom properties\n * individuales para los delays de cada item.\n *\n * @prop delay      — ms entre cada item (default 100)\n * @prop duration   — duración de la animación en ms (default 600)\n * @prop direction  — 'up' | 'down' | 'left' | 'right' | 'fade'\n * @prop easing     — 'default' | 'out' | 'bounce'\n * @prop threshold  — fracción del elemento visible para disparar (default 0.15)\n * @prop once       — animar solo la primera vez (default true)\n *\n * @fires ui-lib-stagger-visible — cuando el contenedor entra en viewport\n * @fires ui-lib-stagger-hidden  — cuando vuelve a salir (si once=false)\n *\n * @slot — Items a animar (cada hijo directo recibe su propio delay)\n */\n@customElement('lib-stagger-container')\nexport class LibStaggerContainer extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(staggerCss)}`,\n  ];\n\n  @property({ type: Number })\n  delay = 100;\n\n  @property({ type: Number })\n  duration = 600;\n\n  @property({ type: String, reflect: true })\n  direction: StaggerDirection = 'up';\n\n  @property({ type: String })\n  easing: StaggerEasing = 'out';\n\n  @property({ type: Number })\n  threshold = 0.15;\n\n  @property({ type: Boolean })\n  once = true;\n\n  @queryAssignedElements({ flatten: true })\n  declare private _items: HTMLElement[];\n\n  private _observer: IntersectionObserver | null = null;\n\n  /* ── Lifecycle ── */\n\n  /**\n   * firstUpdated: el DOM ya está renderizado y el slot poblado.\n   * Es el momento correcto para iniciar el observer,\n   * a diferencia de connectedCallback que dispara antes del render.\n   */\n  override firstUpdated(): void {\n    this._applyCssVars();\n    this._setupObserver();\n\n    // Escuchar cambios en el slot (items añadidos dinámicamente)\n    const slot = this.shadowRoot?.querySelector('slot');\n    slot?.addEventListener('slotchange', (): void => {\n      this._applyCssVars();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  /* ── Props → CSS custom properties en :host ── */\n  override updated(): void {\n    this.style.setProperty('--_stagger-from',     DIRECTION_MAP[this.direction]);\n    this.style.setProperty('--_stagger-ease',     EASING_MAP[this.easing]);\n    this.style.setProperty('--_stagger-duration', `${this.duration}ms`);\n  }\n\n  /* ── Asigna --_stagger-delay individual a cada item ── */\n  private _applyCssVars(): void {\n    this._items.forEach((el, i): void => {\n      el.style.setProperty('--_stagger-delay', `${i * this.delay}ms`);\n    });\n  }\n\n  /* ── IntersectionObserver ── */\n  private _setupObserver(): void {\n    this._observer = new IntersectionObserver(\n      (entries: IntersectionObserverEntry[]): void => {\n        entries.forEach((entry): void => {\n          if (entry.isIntersecting) {\n            this.setAttribute('visible', '');\n            this.dispatchEvent(new CustomEvent('ui-lib-stagger-visible', {\n              bubbles: true, composed: true,\n            }));\n            if (this.once) {\n              this._observer?.disconnect();\n              this._observer = null;\n            }\n          } else if (!this.once) {\n            this.removeAttribute('visible');\n            this.dispatchEvent(new CustomEvent('ui-lib-stagger-hidden', {\n              bubbles: true, composed: true,\n            }));\n          }\n        });\n      },\n      {\n        threshold: this.threshold,\n        rootMargin: '0px 0px -40px 0px', // Dispara un poco antes de llegar al borde\n      },\n    );\n    this._observer.observe(this);\n  }\n\n  protected override render(): TemplateResult {\n    return staggerTemplate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-stagger-container': LibStaggerContainer;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index81.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { bentoGridTemplate } from "./index344.js";
-import gridCss from "./index345.js";
+import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { stepperTemplate } from "./index259.js";
+import stepperCss from "./index260.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,34 +13,73 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibBentoGrid = class extends LitElement {
+let LibStepper = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.columns = 4;
-    this.gap = "md";
-    this.rowHeight = "150px";
+    this.current = 1;
+    this.orientation = "horizontal";
+    this.variant = "default";
+    this.size = "md";
+  }
+  updated(changed) {
+    if (changed.has("current") || changed.has("orientation") || changed.has("variant") || changed.has("size")) {
+      this._syncSteps();
+    }
+  }
+  /**
+   * Propaga index, status, last, orientation, variant y size a cada lib-step hijo.
+   * Llamado en slotchange y cada vez que cambian las props relevantes.
+   */
+  _syncSteps() {
+    const steps = this._steps;
+    if (!(steps == null ? void 0 : steps.length)) return;
+    steps.forEach((step, i) => {
+      const pos = i + 1;
+      step.index = pos;
+      step.orientation = this.orientation;
+      step.variant = this.variant;
+      step.size = this.size;
+      step.last = pos === steps.length;
+      if (step.status !== "error") {
+        if (pos < this.current) step.status = "completed";
+        else if (pos === this.current) step.status = "active";
+        else step.status = "pending";
+      }
+    });
+  }
+  _handleSlotChange() {
+    this._syncSteps();
   }
   render() {
-    return bentoGridTemplate(this);
+    return stepperTemplate({
+      orientation: this.orientation,
+      handleSlotChange: this._handleSlotChange.bind(this)
+    });
   }
 };
-LibBentoGrid.styles = [
+LibStepper.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(gridCss)}`
+  css`${unsafeCSS(stepperCss)}`
 ];
 __decorateClass([
-  property({ type: Number })
-], LibBentoGrid.prototype, "columns", 2);
+  property({ type: Number, reflect: true })
+], LibStepper.prototype, "current", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibStepper.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibStepper.prototype, "variant", 2);
 __decorateClass([
-  property({ type: String })
-], LibBentoGrid.prototype, "gap", 2);
+  property({ type: String, reflect: true })
+], LibStepper.prototype, "size", 2);
 __decorateClass([
-  property({ type: String, attribute: "row-height" })
-], LibBentoGrid.prototype, "rowHeight", 2);
-LibBentoGrid = __decorateClass([
-  customElement("lib-bento-grid")
-], LibBentoGrid);
+  queryAssignedElements({ selector: "lib-step" })
+], LibStepper.prototype, "_steps", 2);
+LibStepper = __decorateClass([
+  customElement("lib-stepper")
+], LibStepper);
 export {
-  LibBentoGrid
+  LibStepper
 };
 //# sourceMappingURL=index81.js.map

package/dist/index81.js.map

@@ -1 +1 @@
-{"version":3,"file":"index81.js","sources":["../src/components/organisms/bento-grid/lib-bento-grid.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { bentoGridTemplate } from './lib-bento-grid.html';\nimport gridCss from './lib-bento-grid.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { BentoGapSize } from './lib-bento-grid.types';\n\n/**\n * lib-bento-grid — Contenedor de rejilla tipo bento\n *\n * @prop columns    — Número de columnas (default 4)\n * @prop gap        — Espacio entre celdas: 'xs'|'sm'|'md'(default)|'lg'|'xl'\n * @prop row-height — Altura base de cada fila (default '150px')\n *\n * @slot — lib-bento-item elements\n */\n@customElement('lib-bento-grid')\nexport class LibBentoGrid extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(gridCss)}`,\n  ];\n\n  @property({ type: Number })\n  columns = 4;\n\n  @property({ type: String })\n  gap: BentoGapSize = 'md';\n\n  @property({ type: String, attribute: 'row-height' })\n  rowHeight = '150px';\n\n  protected override render(): TemplateResult {\n    return bentoGridTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-bento-grid': LibBentoGrid;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiBO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,UAAU;AAGV,SAAA,MAAoB;AAGpB,SAAA,YAAY;AAAA,EAAA;AAAA,EAEO,SAAyB;AAC1C,WAAO,kBAAkB,IAAI;AAAA,EAC/B;AACF;AAlBa,aACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,OAAO,CAAC;AAC1B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,aAOX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATf,aAUX,WAAA,OAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAZxC,aAaX,WAAA,aAAA,CAAA;AAbW,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}
+{"version":3,"file":"index81.js","sources":["../src/components/organisms/stepper/lib-stepper.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport type { LibStepperOrientation, LibStepperVariant, LibStepperSize } from './lib-stepper.html';\nimport { stepperTemplate } from './lib-stepper.html';\nimport stepperCss from './lib-stepper.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { LibStep } from '../../atoms/step/lib-step.component';\n\n/**\n * @element lib-stepper\n *\n * Contenedor que coordina un flujo de pasos `<lib-step>`.\n * Calcula y propaga automáticamente a cada hijo:\n *   - index       : posición ordinal (1-based)\n *   - status      : pending | active | completed (derivado de `current`)\n *   - last        : true en el último paso\n *   - orientation : refleja la prop del stepper\n *   - variant     : refleja la prop del stepper\n *   - size        : refleja la prop del stepper\n *\n * El estado `error` no se gestiona automáticamente — se asigna desde fuera\n * con `stepEl.status = 'error'` cuando el formulario valida.\n *\n * @fires ui-lib-step-change — Emitido al cambiar `current` con `{ current: number, total: number }`\n *\n * @example — horizontal default\n * <lib-stepper current=\"2\">\n *   <lib-step label=\"Información\" sub=\"Datos personales\"></lib-step>\n *   <lib-step label=\"Pago\"        sub=\"Método de pago\"></lib-step>\n *   <lib-step label=\"Confirmación\"></lib-step>\n * </lib-stepper>\n *\n * @example — vertical\n * <lib-stepper orientation=\"vertical\" current=\"1\">\n *   <lib-step label=\"Crea tu cuenta\">\n *     Registro completado. Tu correo ha sido verificado.\n *   </lib-step>\n *   <lib-step label=\"Elige un plan\">\n *     Selecciona el plan que mejor se adapte a tus necesidades.\n *   </lib-step>\n * </lib-stepper>\n *\n * @example — minimal kaki\n * <lib-stepper variant=\"minimal\" current=\"3\">...</lib-stepper>\n *\n * @example — kintsugi oscuro\n * <lib-stepper variant=\"kintsugi\" current=\"2\">...</lib-stepper>\n */\n@customElement('lib-stepper')\nexport class LibStepper extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(stepperCss)}`,\n  ];\n\n  /**\n   * Paso activo actual (1-based).\n   * Los pasos anteriores quedan como `completed`, los posteriores como `pending`.\n   */\n  @property({ type: Number, reflect: true })\n  current = 1;\n\n  /**\n   * Dirección del flujo.\n   * - horizontal : barra horizontal con conectores (default)\n   * - vertical   : lista vertical con contenido expandido por paso\n   */\n  @property({ type: String, reflect: true })\n  orientation: LibStepperOrientation = 'horizontal';\n\n  /**\n   * Variante visual. Se propaga a todos los lib-step hijos.\n   * - default  : nodo circular washi\n   * - minimal  : nodo cuadrado, acento kaki\n   * - kintsugi : venas doradas, pensado para superficies oscuras\n   */\n  @property({ type: String, reflect: true })\n  variant: LibStepperVariant = 'default';\n\n  /**\n   * Tamaño de los nodos. Se propaga a todos los lib-step hijos.\n   * - sm : 24px · md : 32px (default) · lg : 40px\n   */\n  @property({ type: String, reflect: true })\n  size: LibStepperSize = 'md';\n\n  @queryAssignedElements({ selector: 'lib-step' })\n  private _steps!: Array<LibStep>;\n\n  override updated(changed: PropertyValues<this>): void {\n    if (\n      changed.has('current') ||\n      changed.has('orientation') ||\n      changed.has('variant') ||\n      changed.has('size')\n    ) {\n      this._syncSteps();\n    }\n  }\n\n  /**\n   * Propaga index, status, last, orientation, variant y size a cada lib-step hijo.\n   * Llamado en slotchange y cada vez que cambian las props relevantes.\n   */\n  private _syncSteps(): void {\n    const steps = this._steps;\n    if (!steps?.length) return;\n\n    steps.forEach((step, i) => {\n      const pos = i + 1;\n      step.index       = pos;\n      step.orientation = this.orientation;\n      step.variant     = this.variant;\n      step.size        = this.size;\n      step.last        = pos === steps.length;\n\n      // No sobreescribir 'error' si ya fue asignado externamente\n      if (step.status !== 'error') {\n        if (pos < this.current)      step.status = 'completed';\n        else if (pos === this.current) step.status = 'active';\n        else                          step.status = 'pending';\n      }\n    });\n  }\n\n  private _handleSlotChange(): void {\n    this._syncSteps();\n  }\n\n  override render(): TemplateResult {\n    return stepperTemplate({\n      orientation:     this.orientation,\n      handleSlotChange: this._handleSlotChange.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-stepper': LibStepper;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiDO,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AAWL,SAAA,UAAU;AAQV,SAAA,cAAqC;AASrC,SAAA,UAA6B;AAO7B,SAAA,OAAuB;AAAA,EAAA;AAAA,EAKd,QAAQ,SAAqC;AACpD,QACE,QAAQ,IAAI,SAAS,KACrB,QAAQ,IAAI,aAAa,KACzB,QAAQ,IAAI,SAAS,KACrB,QAAQ,IAAI,MAAM,GAClB;AACA,WAAK,WAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,aAAmB;AACzB,UAAM,QAAQ,KAAK;AACnB,QAAI,EAAC,+BAAO,QAAQ;AAEpB,UAAM,QAAQ,CAAC,MAAM,MAAM;AACzB,YAAM,MAAM,IAAI;AAChB,WAAK,QAAc;AACnB,WAAK,cAAc,KAAK;AACxB,WAAK,UAAc,KAAK;AACxB,WAAK,OAAc,KAAK;AACxB,WAAK,OAAc,QAAQ,MAAM;AAGjC,UAAI,KAAK,WAAW,SAAS;AAC3B,YAAI,MAAM,KAAK,QAAc,MAAK,SAAS;AAAA,iBAClC,QAAQ,KAAK,QAAS,MAAK,SAAS;AAAA,kBACV,SAAS;AAAA,MAC9C;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,oBAA0B;AAChC,SAAK,WAAA;AAAA,EACP;AAAA,EAES,SAAyB;AAChC,WAAO,gBAAgB;AAAA,MACrB,aAAiB,KAAK;AAAA,MACtB,kBAAkB,KAAK,kBAAkB,KAAK,IAAI;AAAA,IAAA,CACnD;AAAA,EACH;AACF;AAtFa,WACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,UAAU,CAAC;AAC7B;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAV9B,WAWX,WAAA,WAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlB9B,WAmBX,WAAA,eAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA3B9B,WA4BX,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlC9B,WAmCX,WAAA,QAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,sBAAsB,EAAE,UAAU,WAAA,CAAY;AAAA,GArCpC,WAsCH,WAAA,UAAA,CAAA;AAtCG,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}