@shibui-ui/ui 1.6.0 → 1.7.0

package/dist/index76.js

@@ -0,0 +1,112 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { parallaxTextStackTemplate } from "./index336.js";
+import stackCss from "./index337.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 LibParallaxTextStack = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.lines = [];
+    this.speed = 0.15;
+    this.size = "lg";
+    this.color = "default";
+    this._ticking = false;
+    this._reducedMotion = false;
+    this._onMotionChange = (e) => {
+      this._reducedMotion = e.matches;
+      if (this._reducedMotion) this._resetLayers();
+    };
+    this._onScroll = () => {
+      if (this._ticking) return;
+      this._ticking = true;
+      requestAnimationFrame(() => {
+        this._applyParallax();
+        this._ticking = false;
+      });
+    };
+  }
+  /* ════════════════════════════════════════
+     Ciclo de vida
+     ════════════════════════════════════════ */
+  connectedCallback() {
+    super.connectedCallback();
+    this._motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this._reducedMotion = this._motionQuery.matches;
+    this._motionQuery.addEventListener("change", this._onMotionChange);
+    window.addEventListener("scroll", this._onScroll, { passive: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    window.removeEventListener("scroll", this._onScroll);
+    (_a = this._motionQuery) == null ? void 0 : _a.removeEventListener("change", this._onMotionChange);
+  }
+  /**
+   * firstUpdated: primer render completado → shadow DOM listo.
+   * connectedCallback se dispara ANTES de que Lit renderice,
+   * por lo que querySelectorAll('.pts-layer') devuelve vacío ahí.
+   */
+  firstUpdated() {
+    this._applyParallax();
+  }
+  /* ════════════════════════════════════════
+     Lógica del efecto
+     ════════════════════════════════════════ */
+  _applyParallax() {
+    var _a;
+    if (this._reducedMotion) return;
+    const layers = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".pts-layer");
+    if (!(layers == null ? void 0 : layers.length)) return;
+    const rect = this.getBoundingClientRect();
+    const centerEl = rect.top + rect.height / 2;
+    const centerVp = window.innerHeight / 2;
+    const offset = centerVp - centerEl;
+    layers.forEach((layer, i) => {
+      const direction = i % 2 === 0 ? 1 : -1;
+      const factor = (i + 1) * this.speed;
+      layer.style.transform = `translateX(${offset * factor * direction}px)`;
+    });
+  }
+  _resetLayers() {
+    var _a;
+    (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".pts-layer").forEach((l) => {
+      l.style.transform = "";
+    });
+  }
+  render() {
+    return parallaxTextStackTemplate(this);
+  }
+};
+LibParallaxTextStack.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(stackCss)}`
+];
+__decorateClass([
+  property({ type: Array })
+], LibParallaxTextStack.prototype, "lines", 2);
+__decorateClass([
+  property({ type: Number })
+], LibParallaxTextStack.prototype, "speed", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibParallaxTextStack.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibParallaxTextStack.prototype, "color", 2);
+LibParallaxTextStack = __decorateClass([
+  customElement("lib-parallax-text-stack")
+], LibParallaxTextStack);
+export {
+  LibParallaxTextStack
+};
+//# sourceMappingURL=index76.js.map

package/dist/index76.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index76.js","sources":["../src/components/organisms/parallax-text/lib-parallax-text-stack.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { parallaxTextStackTemplate } from './lib-parallax-text-stack.html';\nimport stackCss from './lib-parallax-text-stack.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { ParallaxTextSize, ParallaxTextColor } from './lib-parallax-text-stack.types';\n\n/**\n * lib-parallax-text-stack — Shibui UI\n *\n * Apila líneas tipográficas con parallax horizontal al hacer scroll.\n * Capas pares  → outline (trazo, sin relleno).\n * Capas impares → italic serif (relleno).\n *\n * @prop lines  — Array de strings, una por capa\n * @prop speed  — Factor de velocidad (default 0.15)\n * @prop size   — 'sm' | 'md' | 'lg'(default) | 'xl' | '2xl'\n * @prop color  — 'default' | 'muted' | 'kaki' | 'celadon'\n *\n * IMPORTANTE: el padre debe llevar overflow-x:hidden.\n * El componente NO lo aplica en :host — si lo hiciera, el\n * translateX quedaría clipado y el efecto sería invisible.\n */\n@customElement('lib-parallax-text-stack')\nexport class LibParallaxTextStack extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(stackCss)}`,\n  ];\n\n  @property({ type: Array })\n  lines: string[] = [];\n\n  @property({ type: Number })\n  speed = 0.15;\n\n  @property({ type: String, reflect: true })\n  size: ParallaxTextSize = 'lg';\n\n  @property({ type: String, reflect: true })\n  color: ParallaxTextColor = 'default';\n\n  /* ── Estado interno ── */\n  private _ticking = false;\n  private _reducedMotion = false;\n  private _motionQuery!: MediaQueryList;\n\n  /* ════════════════════════════════════════\n     Ciclo de vida\n     ════════════════════════════════════════ */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this._motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._reducedMotion = this._motionQuery.matches;\n    this._motionQuery.addEventListener('change', this._onMotionChange);\n\n    // { passive: true } — no bloquea el hilo principal\n    window.addEventListener('scroll', this._onScroll, { passive: true });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('scroll', this._onScroll);\n    this._motionQuery?.removeEventListener('change', this._onMotionChange);\n  }\n\n  /**\n   * firstUpdated: primer render completado → shadow DOM listo.\n   * connectedCallback se dispara ANTES de que Lit renderice,\n   * por lo que querySelectorAll('.pts-layer') devuelve vacío ahí.\n   */\n  override firstUpdated(): void {\n    this._applyParallax();\n  }\n\n  /* ════════════════════════════════════════\n     Manejadores\n     ════════════════════════════════════════ */\n\n  private _onMotionChange = (e: MediaQueryListEvent): void => {\n    this._reducedMotion = e.matches;\n    if (this._reducedMotion) this._resetLayers();\n  };\n\n  private _onScroll = (): void => {\n    if (this._ticking) return;\n    this._ticking = true;\n    requestAnimationFrame(() => {\n      this._applyParallax();\n      this._ticking = false;\n    });\n  };\n\n  /* ════════════════════════════════════════\n     Lógica del efecto\n     ════════════════════════════════════════ */\n\n  private _applyParallax(): void {\n    if (this._reducedMotion) return;\n\n    // Clase correcta: pts-layer (no parallax-layer del original)\n    const layers = this.shadowRoot?.querySelectorAll<HTMLElement>('.pts-layer');\n    if (!layers?.length) return;\n\n    const rect     = this.getBoundingClientRect();\n    const centerEl = rect.top + rect.height / 2;\n    const centerVp = window.innerHeight / 2;\n    // offset > 0: componente bajo el centro → capas se separan\n    // offset < 0: componente sobre el centro → capas se contraen\n    const offset   = centerVp - centerEl;\n\n    layers.forEach((layer, i) => {\n      // Capas alternas en direcciones opuestas — efecto acordeón\n      const direction = i % 2 === 0 ? 1 : -1;\n      const factor    = (i + 1) * this.speed;\n      layer.style.transform = `translateX(${offset * factor * direction}px)`;\n    });\n  }\n\n  private _resetLayers(): void {\n    this.shadowRoot\n      ?.querySelectorAll<HTMLElement>('.pts-layer')\n      .forEach(l => { l.style.transform = ''; });\n  }\n\n  protected override render(): TemplateResult {\n    return parallaxTextStackTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-parallax-text-stack': LibParallaxTextStack;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,IAAM,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,QAAkB,CAAA;AAGlB,SAAA,QAAQ;AAGR,SAAA,OAAyB;AAGzB,SAAA,QAA2B;AAG3B,SAAQ,WAAW;AACnB,SAAQ,iBAAiB;AAqCzB,SAAQ,kBAAkB,CAAC,MAAiC;AAC1D,WAAK,iBAAiB,EAAE;AACxB,UAAI,KAAK,eAAgB,MAAK,aAAA;AAAA,IAChC;AAEA,SAAQ,YAAY,MAAY;AAC9B,UAAI,KAAK,SAAU;AACnB,WAAK,WAAW;AAChB,4BAAsB,MAAM;AAC1B,aAAK,eAAA;AACL,aAAK,WAAW;AAAA,MAClB,CAAC;AAAA,IACH;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EA1CS,oBAA0B;AACjC,UAAM,kBAAA;AAEN,SAAK,eAAe,OAAO,WAAW,kCAAkC;AACxE,SAAK,iBAAiB,KAAK,aAAa;AACxC,SAAK,aAAa,iBAAiB,UAAU,KAAK,eAAe;AAGjE,WAAO,iBAAiB,UAAU,KAAK,WAAW,EAAE,SAAS,MAAM;AAAA,EACrE;AAAA,EAES,uBAA6B;;AACpC,UAAM,qBAAA;AACN,WAAO,oBAAoB,UAAU,KAAK,SAAS;AACnD,eAAK,iBAAL,mBAAmB,oBAAoB,UAAU,KAAK;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOS,eAAqB;AAC5B,SAAK,eAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA,EAwBQ,iBAAuB;;AAC7B,QAAI,KAAK,eAAgB;AAGzB,UAAM,UAAS,UAAK,eAAL,mBAAiB,iBAA8B;AAC9D,QAAI,EAAC,iCAAQ,QAAQ;AAErB,UAAM,OAAW,KAAK,sBAAA;AACtB,UAAM,WAAW,KAAK,MAAM,KAAK,SAAS;AAC1C,UAAM,WAAW,OAAO,cAAc;AAGtC,UAAM,SAAW,WAAW;AAE5B,WAAO,QAAQ,CAAC,OAAO,MAAM;AAE3B,YAAM,YAAY,IAAI,MAAM,IAAI,IAAI;AACpC,YAAM,UAAa,IAAI,KAAK,KAAK;AACjC,YAAM,MAAM,YAAY,cAAc,SAAS,SAAS,SAAS;AAAA,IACnE,CAAC;AAAA,EACH;AAAA,EAEQ,eAAqB;;AAC3B,eAAK,eAAL,mBACI,iBAA8B,cAC/B,QAAQ,CAAA,MAAK;AAAE,QAAE,MAAM,YAAY;AAAA,IAAI;AAAA,EAC5C;AAAA,EAEmB,SAAyB;AAC1C,WAAO,0BAA0B,IAAI;AAAA,EACvC;AACF;AA1Ga,qBACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,QAAQ,CAAC;AAC3B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GANd,qBAOX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATf,qBAUX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAZ9B,qBAaX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAf9B,qBAgBX,WAAA,SAAA,CAAA;AAhBW,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;"}

package/dist/index77.js

@@ -0,0 +1,118 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import timelineCss from "./index338.js";
+import sharedTokens from "./index196.js";
+import { timelineItemTemplate } from "./index339.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 LibTimelineItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.nKind = "dot";
+    this.nodeColor = "default";
+    this.icon = "circle";
+    this.avatar = "";
+    this.status = "default";
+    this.lineVariant = "solid";
+    this.lineProgress = 0;
+    this.hideLine = false;
+    this.timestamp = "";
+    this.title = "";
+    this.body = "";
+    this.card = false;
+    this.collapsible = false;
+    this._collapsed = false;
+  }
+  /* ── API pública ── */
+  /** Expande el ítem si es collapsible */
+  expand() {
+    this._collapsed = false;
+  }
+  /** Contrae el ítem si es collapsible */
+  collapse() {
+    this._collapsed = true;
+  }
+  /* ── Render ── */
+  render() {
+    return timelineItemTemplate({
+      nodeType: this.nKind,
+      nodeColor: this.nodeColor,
+      icon: this.icon,
+      avatar: this.avatar,
+      status: this.status,
+      lineVariant: this.lineVariant,
+      lineProgress: this.lineProgress,
+      hideLine: this.hideLine,
+      timestamp: this.timestamp,
+      title: this.title,
+      body: this.body,
+      card: this.card,
+      collapsed: this._collapsed,
+      collapsible: this.collapsible,
+      onToggleCollapse: () => {
+        this._collapsed = !this._collapsed;
+      }
+    });
+  }
+};
+LibTimelineItem.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(timelineCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "node-type" })
+], LibTimelineItem.prototype, "nKind", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "node-color" })
+], LibTimelineItem.prototype, "nodeColor", 2);
+__decorateClass([
+  property({ type: String })
+], LibTimelineItem.prototype, "icon", 2);
+__decorateClass([
+  property({ type: String })
+], LibTimelineItem.prototype, "avatar", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTimelineItem.prototype, "status", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "line-variant" })
+], LibTimelineItem.prototype, "lineVariant", 2);
+__decorateClass([
+  property({ type: Number, attribute: "line-progress" })
+], LibTimelineItem.prototype, "lineProgress", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-line" })
+], LibTimelineItem.prototype, "hideLine", 2);
+__decorateClass([
+  property({ type: String })
+], LibTimelineItem.prototype, "timestamp", 2);
+__decorateClass([
+  property({ type: String })
+], LibTimelineItem.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], LibTimelineItem.prototype, "body", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTimelineItem.prototype, "card", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTimelineItem.prototype, "collapsible", 2);
+__decorateClass([
+  state()
+], LibTimelineItem.prototype, "_collapsed", 2);
+LibTimelineItem = __decorateClass([
+  customElement("lib-timeline-item")
+], LibTimelineItem);
+export {
+  LibTimelineItem
+};
+//# sourceMappingURL=index77.js.map

package/dist/index77.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index77.js","sources":["../src/components/organisms/timeline/lib-timeline-item.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport timelineCss from './lib-timeline.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { timelineItemTemplate } from './lib-timeline-item.html';\nimport type {\n  TimelineNodeType,\n  TimelineNodeColor,\n  TimelineItemStatus,\n  TimelineLineVariant,\n} from './lib-timeline-item.types';\n\n/**\n * @element lib-timeline-item\n *\n * Ítem de timeline. Debe usarse dentro de `<lib-timeline>`.\n *\n * @prop {TimelineNodeType}    node-type     — Tipo de nodo: dot · icon · avatar (default: 'dot')\n * @prop {TimelineNodeColor}   node-color    — Color del nodo: default · kaki · celadon · error · muted\n * @prop {string}              icon          — Nombre de icono Phosphor (node-type='icon')\n * @prop {string}              avatar        — Iniciales (node-type='avatar')\n * @prop {TimelineItemStatus}  status        — Estado: default · active · done · error · pending\n * @prop {TimelineLineVariant} line-variant  — Estilo de línea: solid · dashed · progress\n * @prop {number}              line-progress — Progreso de la línea 0–100 (line-variant='progress')\n * @prop {boolean}             hide-line     — Oculta la línea (útil en el último ítem)\n * @prop {string}              timestamp     — Texto de fecha/hora\n * @prop {string}              title         — Título del evento\n * @prop {string}              body          — Texto descriptivo (alternativa al slot)\n * @prop {boolean}             card          — Envuelve el contenido en una tarjeta con borde\n * @prop {boolean}             collapsible   — Muestra botón de expandir/contraer\n *\n * @slot         — Contenido libre (body del evento)\n * @slot meta    — Badges, avatares y metadatos en fila\n * @slot media   — Imágenes o bloques adjuntos (solo dentro de card)\n */\n@customElement('lib-timeline-item')\nexport class LibTimelineItem extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(timelineCss)}`,\n  ];\n\n  /* ── Nodo ── */\n\n  @property({ type: String, reflect: true, attribute: 'node-type' })\n  nKind: TimelineNodeType = 'dot';\n\n  @property({ type: String, reflect: true, attribute: 'node-color' })\n  nodeColor: TimelineNodeColor = 'default';\n\n  @property({ type: String })\n  icon = 'circle';\n\n  @property({ type: String })\n  avatar = '';\n\n  /* ── Estado ── */\n\n  @property({ type: String, reflect: true })\n  status: TimelineItemStatus = 'default';\n\n  /* ── Línea ── */\n\n  @property({ type: String, reflect: true, attribute: 'line-variant' })\n  lineVariant: TimelineLineVariant = 'solid';\n\n  @property({ type: Number, attribute: 'line-progress' })\n  lineProgress = 0;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-line' })\n  hideLine = false;\n\n  /* ── Contenido ── */\n\n  @property({ type: String })\n  timestamp = '';\n\n  @property({ type: String })\n  override title = '';\n\n  @property({ type: String })\n  body = '';\n\n  @property({ type: Boolean, reflect: true })\n  card = false;\n\n  /* ── Collapsible ── */\n\n  @property({ type: Boolean, reflect: true })\n  collapsible = false;\n\n  @state() private _collapsed = false;\n\n  /* ── API pública ── */\n\n  /** Expande el ítem si es collapsible */\n  public expand(): void {\n    this._collapsed = false;\n  }\n\n  /** Contrae el ítem si es collapsible */\n  public collapse(): void {\n    this._collapsed = true;\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    return timelineItemTemplate({\n      nodeType:    this.nKind,\n      nodeColor:   this.nodeColor,\n      icon:        this.icon,\n      avatar:      this.avatar,\n      status:      this.status,\n      lineVariant: this.lineVariant,\n      lineProgress: this.lineProgress,\n      hideLine:    this.hideLine,\n      timestamp:   this.timestamp,\n      title:       this.title,\n      body:        this.body,\n      card:        this.card,\n      collapsed:   this._collapsed,\n      collapsible: this.collapsible,\n      onToggleCollapse: (): void => { this._collapsed = !this._collapsed; },\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-timeline-item': LibTimelineItem;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index78.js

@@ -0,0 +1,41 @@
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import timelineCss from "./index338.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 LibTimeline = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+  }
+  render() {
+    return html`
+      <div class="tl" role="list">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+LibTimeline.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(timelineCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTimeline.prototype, "size", 2);
+LibTimeline = __decorateClass([
+  customElement("lib-timeline")
+], LibTimeline);
+export {
+  LibTimeline
+};
+//# sourceMappingURL=index78.js.map

package/dist/index78.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index78.js","sources":["../src/components/organisms/timeline/lib-timeline.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport timelineCss from './lib-timeline.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { TimelineSize } from './lib-timeline-item.types';\n\n/**\n * @element lib-timeline\n *\n * Contenedor de timeline. Acepta `<lib-timeline-item>` en su slot.\n *\n * @prop {TimelineSize} size — Tamaño global: sm · md · lg (default: 'md')\n *\n * @slot — Ítems del timeline (lib-timeline-item)\n */\n@customElement('lib-timeline')\nexport class LibTimeline extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(timelineCss)}`,\n  ];\n\n  @property({ type: String, reflect: true })\n  size: TimelineSize = 'md';\n\n  protected override render(): TemplateResult {\n    return html`\n      <div class=\"tl\" role=\"list\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-timeline': LibTimeline;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;AAgBO,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,OAAqB;AAAA,EAAA;AAAA,EAEF,SAAyB;AAC1C,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAhBa,YACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,WAAW,CAAC;AAC9B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAN9B,YAOX,WAAA,QAAA,CAAA;AAPW,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;"}

package/dist/index79.js

@@ -0,0 +1,115 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import { horizontalScrollTemplate } from "./index340.js";
+import sectionCss from "./index341.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 LibHorizontalScrollSection = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.scrollDuration = 3;
+    this.paddingInline = 10;
+    this.showProgress = true;
+    this._ticking = false;
+    this._ro = null;
+    this._onScroll = () => {
+      if (this._ticking) return;
+      this._ticking = true;
+      requestAnimationFrame(() => {
+        this._calculate();
+        this._ticking = false;
+      });
+    };
+  }
+  /* ── Lifecycle ── */
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("scroll", this._onScroll, { passive: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    window.removeEventListener("scroll", this._onScroll);
+    (_a = this._ro) == null ? void 0 : _a.disconnect();
+  }
+  firstUpdated() {
+    this._ro = new ResizeObserver(() => {
+      if (!this._ticking) {
+        requestAnimationFrame(() => {
+          this._calculate();
+          this._ticking = false;
+        });
+        this._ticking = true;
+      }
+    });
+    this._ro.observe(this);
+  }
+  /* ── Props → CSS custom properties ── */
+  updated() {
+    this.style.setProperty("--_scroll-height", `${this.scrollDuration * 100}vh`);
+    this.style.setProperty("--_padding-inline", String(this.paddingInline));
+  }
+  /* ── Cálculo core ── */
+  _calculate() {
+    if (!this._content || !this._progressFill || !this._counter) return;
+    const rect = this.getBoundingClientRect();
+    const scrollable = rect.height - window.innerHeight;
+    if (rect.top > 0 || rect.bottom < window.innerHeight) return;
+    const scrolled = -rect.top;
+    const progress = Math.min(Math.max(scrolled / scrollable, 0), 1);
+    const paddingRight = window.innerWidth * (this.paddingInline / 100);
+    const maxMove = this._content.scrollWidth - window.innerWidth + paddingRight;
+    this._content.style.transform = `translateX(-${progress * maxMove}px)`;
+    this._progressFill.style.width = `${progress * 100}%`;
+    this._counter.textContent = `${Math.round(progress * 100)}%`;
+    this.dispatchEvent(new CustomEvent(
+      "ui-lib-scroll-progress",
+      {
+        detail: { progress, percent: Math.round(progress * 100) },
+        bubbles: true,
+        composed: true
+      }
+    ));
+  }
+  render() {
+    return horizontalScrollTemplate(this);
+  }
+};
+LibHorizontalScrollSection.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(sectionCss)}`
+];
+__decorateClass([
+  property({ type: Number, attribute: "scroll-duration" })
+], LibHorizontalScrollSection.prototype, "scrollDuration", 2);
+__decorateClass([
+  property({ type: Number, attribute: "padding-inline" })
+], LibHorizontalScrollSection.prototype, "paddingInline", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-progress" })
+], LibHorizontalScrollSection.prototype, "showProgress", 2);
+__decorateClass([
+  query(".horizontal-content")
+], LibHorizontalScrollSection.prototype, "_content", 2);
+__decorateClass([
+  query(".progress-fill")
+], LibHorizontalScrollSection.prototype, "_progressFill", 2);
+__decorateClass([
+  query(".counter")
+], LibHorizontalScrollSection.prototype, "_counter", 2);
+LibHorizontalScrollSection = __decorateClass([
+  customElement("lib-horizontal-scroll-section")
+], LibHorizontalScrollSection);
+export {
+  LibHorizontalScrollSection
+};
+//# sourceMappingURL=index79.js.map

package/dist/index79.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index79.js","sources":["../src/components/organisms/horizontal-scroll-section/lib-horizontal-scroll-section.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { horizontalScrollTemplate } from './lib-horizontal-scroll-section.html';\nimport sectionCss from './lib-horizontal-scroll-section.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { HorizontalScrollProgressEvent } from './lib-horizontal-scroll-section.types';\n\n/**\n * lib-horizontal-scroll-section\n *\n * Convierte scroll vertical en desplazamiento horizontal sticky.\n * El bloque ocupa `scrollDuration` vh de altura — esa \"duración\"\n * determina cuánto debe bajar el usuario para ver todo el contenido.\n *\n * @prop scroll-duration  — Multiplicador de vh (default 3 → 300vh)\n * @prop padding-inline   — Padding lateral en vw (default 10 → 10vw)\n * @prop show-progress    — Muestra barra de progreso y contador (default true)\n *\n * @fires ui-lib-scroll-progress — { detail: HorizontalScrollProgressEvent }\n *\n * @slot — Items del carrusel horizontal (flex-shrink: 0 automático)\n *\n * @cssvar --_scroll-height   — Sobreescribe la altura total del bloque\n * @cssvar --_gap             — Gap entre items (default: calc(--lib-space-xl * 2))\n * @cssvar --_padding-inline  — Padding lateral en vw (sincronizado con el prop)\n */\n@customElement('lib-horizontal-scroll-section')\nexport class LibHorizontalScrollSection extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(sectionCss)}`,\n  ];\n\n  /** Cuántas veces la altura del viewport dura el efecto (default: 3 → 300vh) */\n  @property({ type: Number, attribute: 'scroll-duration' })\n  scrollDuration = 3;\n\n  /** Padding lateral en vw aplicado a ambos lados del track (default: 10) */\n  @property({ type: Number, attribute: 'padding-inline' })\n  paddingInline = 10;\n\n  /** Muestra la barra de progreso y el contador de porcentaje */\n  @property({ type: Boolean, attribute: 'show-progress' })\n  showProgress = true;\n\n  @query('.horizontal-content') declare private _content: HTMLElement;\n  @query('.progress-fill')      declare private _progressFill: HTMLElement;\n  @query('.counter')            declare private _counter: HTMLElement;\n\n  private _ticking = false;\n  private _ro: ResizeObserver | null = null;\n\n  /* ── Lifecycle ── */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('scroll', this._onScroll, { passive: true });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('scroll', this._onScroll);\n    this._ro?.disconnect();\n  }\n\n  override firstUpdated(): void {\n    // ResizeObserver: recalcula si cambia el viewport o el contenido\n    this._ro = new ResizeObserver((): void => {\n      // Forzar recálculo en el siguiente frame\n      if (!this._ticking) {\n        requestAnimationFrame((): void => {\n          this._calculate();\n          this._ticking = false;\n        });\n        this._ticking = true;\n      }\n    });\n    this._ro.observe(this);\n  }\n\n  /* ── Props → CSS custom properties ── */\n  override updated(): void {\n    this.style.setProperty('--_scroll-height', `${this.scrollDuration * 100}vh`);\n    this.style.setProperty('--_padding-inline', String(this.paddingInline));\n  }\n\n  /* ── Scroll handler — con rAF throttle ── */\n  private _onScroll = (): void => {\n    if (this._ticking) return;\n    this._ticking = true;\n    requestAnimationFrame((): void => {\n      this._calculate();\n      this._ticking = false;\n    });\n  };\n\n  /* ── Cálculo core ── */\n  private _calculate(): void {\n    if (!this._content || !this._progressFill || !this._counter) return;\n\n    const rect          = this.getBoundingClientRect();\n    const scrollable    = rect.height - window.innerHeight;\n\n    // Solo actualiza mientras el bloque está sticky en pantalla\n    if (rect.top > 0 || rect.bottom < window.innerHeight) return;\n\n    const scrolled  = -rect.top;\n    const progress  = Math.min(Math.max(scrolled / scrollable, 0), 1);\n\n    // maxMove: cuántos px debe desplazarse el track.\n    // scrollWidth incluye el padding-left; el padding-right se añade manualmente\n    // porque CSS no lo suma al scrollWidth del flex container.\n    const paddingRight = window.innerWidth * (this.paddingInline / 100);\n    const maxMove = this._content.scrollWidth - window.innerWidth + paddingRight;\n\n    // Mutar el DOM directamente — sin Lit reactivity para mantener 60fps\n    this._content.style.transform      = `translateX(-${progress * maxMove}px)`;\n    this._progressFill.style.width     = `${progress * 100}%`;\n    this._counter.textContent          = `${Math.round(progress * 100)}%`;\n\n    // Emitir evento solo cuando hay cambio real (evita flooding)\n    this.dispatchEvent(new CustomEvent<HorizontalScrollProgressEvent>(\n      'ui-lib-scroll-progress',\n      {\n        detail: { progress, percent: Math.round(progress * 100) },\n        bubbles: true,\n        composed: true,\n      },\n    ));\n  }\n\n  protected override render(): TemplateResult {\n    return horizontalScrollTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-horizontal-scroll-section': LibHorizontalScrollSection;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index8.js

@@ -0,0 +1,161 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import textListCss from "./index203.js";
+import sharedTokens from "./index196.js";
+import { textListTemplate } from "./index204.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 LibTextList = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.family = "ul";
+    this.items = [];
+    this.marker = "default";
+    this.counter = "decimal";
+    this.size = "md";
+    this.uiItems = [];
+    this.divided = false;
+    this.bordered = false;
+    this.inset = false;
+    this.interactive = false;
+    this.dlItems = [];
+    this.dlLayout = "inline";
+    this.dlDivided = false;
+    this.dark = false;
+    this.loading = false;
+    this.skeletonCount = 4;
+  }
+  /* ── Handlers ── */
+  _handleRowClick(item) {
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-row-click", {
+        detail: { key: item.key, item },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleToggle(item, value) {
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-toggle", {
+        detail: { key: item.key, value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /* ── Render ── */
+  render() {
+    if (this.loading && (this.family === "ul" || this.family === "ol")) {
+      const skeletons = Array.from(
+        { length: this.skeletonCount },
+        (_, i) => ({ label: `skeleton-${i}` })
+      );
+      return textListTemplate({
+        family: this.family,
+        contentItems: skeletons,
+        marker: "default",
+        counter: this.counter,
+        size: this.size,
+        uiItems: [],
+        divided: this.divided,
+        bordered: this.bordered,
+        inset: this.inset,
+        interactive: this.interactive,
+        dark: this.dark,
+        dlItems: [],
+        dlLayout: this.dlLayout,
+        dlDivided: this.dlDivided,
+        onRowClick: () => {
+        },
+        onToggle: () => {
+        }
+      });
+    }
+    return textListTemplate({
+      family: this.family,
+      contentItems: this.items,
+      marker: this.marker,
+      counter: this.counter,
+      size: this.size,
+      uiItems: this.uiItems,
+      divided: this.divided,
+      bordered: this.bordered,
+      inset: this.inset,
+      interactive: this.interactive,
+      dark: this.dark,
+      dlItems: this.dlItems,
+      dlLayout: this.dlLayout,
+      dlDivided: this.dlDivided,
+      onRowClick: (item) => this._handleRowClick(item),
+      onToggle: (item, v) => this._handleToggle(item, v)
+    });
+  }
+};
+LibTextList.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(textListCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTextList.prototype, "family", 2);
+__decorateClass([
+  property({ type: Array })
+], LibTextList.prototype, "items", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTextList.prototype, "marker", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTextList.prototype, "counter", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTextList.prototype, "size", 2);
+__decorateClass([
+  property({ type: Array, attribute: "ui-items" })
+], LibTextList.prototype, "uiItems", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTextList.prototype, "divided", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTextList.prototype, "bordered", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTextList.prototype, "inset", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTextList.prototype, "interactive", 2);
+__decorateClass([
+  property({ type: Array, attribute: "dl-items" })
+], LibTextList.prototype, "dlItems", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "dl-layout" })
+], LibTextList.prototype, "dlLayout", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "dl-divided" })
+], LibTextList.prototype, "dlDivided", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTextList.prototype, "dark", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTextList.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Number, attribute: "skeleton-count" })
+], LibTextList.prototype, "skeletonCount", 2);
+LibTextList = __decorateClass([
+  customElement("lib-text-list")
+], LibTextList);
+export {
+  LibTextList
+};
+//# sourceMappingURL=index8.js.map

package/dist/index8.js.map

@@ -0,0 +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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"}