@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index45.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { rendercontentPillar } from "./index275.js";
-import componentCss from "./index276.js";
 import sharedTokens from "./index196.js";
+import glitchCss from "./index344.js";
+import { textGlitchTemplate } from "./index345.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,38 +13,155 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibContentPillar = class extends LitElement {
+const KANA = "ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヲ ン ガ ギ グ ゲ ゴ " + "ザ ジ ズ ゼ ゾ ダ ヂ ヅ デ ド バ ビ ブ ベ ボ 渋 液 美 乱 進 間 静 陰 影 黒 白 墨 和 侘".split(" ");
+let LibTextGlitch = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.kanji = "";
-    this.label = "";
-    this.description = "";
-    this.surface = "dark";
+    this.text = "";
+    this.variant = "slice";
+    this.trigger = "hover";
+    this.active = false;
+    this._running = false;
+    this._boundMouseEnter = () => {
+      this._decodePlay();
+    };
+  }
+  /* ── Lifecycle ──────────────────────────────────────────── */
+  connectedCallback() {
+    super.connectedCallback();
+    this._setupDecode();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mouseenter", this._boundMouseEnter);
+    clearTimeout(this._alwaysTimer);
+  }
+  updated(changed) {
+    const reInit = changed.has("variant") || changed.has("trigger") || changed.has("text");
+    if (reInit) {
+      this.removeEventListener("mouseenter", this._boundMouseEnter);
+      clearTimeout(this._alwaysTimer);
+      this._running = false;
+      this._setupDecode();
+    }
   }
   render() {
-    return rendercontentPillar(this);
+    return textGlitchTemplate({ text: this.text, variant: this.variant });
+  }
+  /* ── API pública ────────────────────────────────────────── */
+  /**
+   * Reproduce el efecto manualmente una vez.
+   * - Para `decode`: lanza el scramble de kanji.
+   * - Para `scan` / `redact`: activa [active] y lo retira al terminar.
+   * - Para `slice` / `shift` / `noise`: activa [active] (CSS bucle).
+   */
+  play() {
+    if (this.variant === "decode") {
+      this._decodePlay();
+      return;
+    }
+    this.active = true;
+    if (this.variant === "scan" || this.variant === "redact") {
+      const dur = this.variant === "scan" ? 620 : 720;
+      setTimeout(() => {
+        this.active = false;
+      }, dur);
+    }
+  }
+  /** Detiene el bucle `trigger="always"` y desactiva [active]. */
+  stop() {
+    clearTimeout(this._alwaysTimer);
+    this._running = false;
+    this.active = false;
+  }
+  /* ── Decode engine ──────────────────────────────────────── */
+  _setupDecode() {
+    if (this.variant !== "decode") return;
+    if (this.trigger === "hover") {
+      this.addEventListener("mouseenter", this._boundMouseEnter);
+    } else {
+      this.updateComplete.then(() => {
+        this._scheduleAlwaysDecode();
+      });
+    }
+  }
+  _scheduleAlwaysDecode() {
+    this._decodePlay();
+    const pause = Math.max([...this.text].length * 55 * 1.5, 400) + 2e3;
+    this._alwaysTimer = setTimeout(() => {
+      this._scheduleAlwaysDecode();
+    }, pause);
+  }
+  /**
+   * Motor de decodificación kanji.
+   *
+   * Cada char span se sustituye por un katakana/kanji aleatorio
+   * durante un número variable de frames, y luego se resuelve al
+   * carácter original. El orden de resolución es estocástico.
+   */
+  _decodePlay() {
+    if (this._running) return;
+    this._running = true;
+    const chars = Array.from(
+      this.renderRoot.querySelectorAll(".char")
+    );
+    if (chars.length === 0) {
+      this._running = false;
+      return;
+    }
+    const SCRAMBLE_CYCLES = 6;
+    const FRAME_MS = 55;
+    const delays = chars.map(
+      () => Math.floor(Math.random() * chars.length * SCRAMBLE_CYCLES * 0.6) + SCRAMBLE_CYCLES
+    );
+    let frame = 0;
+    const total = Math.max(...delays) + 2;
+    const tick = () => {
+      chars.forEach((span, i) => {
+        const orig = span.dataset["original"] ?? "";
+        if (frame < (delays[i] ?? 0)) {
+          if (orig.trim() === "" || orig === "·" || orig === "-") return;
+          span.textContent = KANA[Math.floor(Math.random() * KANA.length)] ?? orig;
+          span.classList.add("is-scrambling");
+        } else {
+          span.textContent = orig;
+          span.classList.remove("is-scrambling");
+        }
+      });
+      frame++;
+      if (frame < total) {
+        setTimeout(tick, FRAME_MS);
+      } else {
+        chars.forEach((span) => {
+          span.textContent = span.dataset["original"] ?? "";
+          span.classList.remove("is-scrambling");
+        });
+        this._running = false;
+      }
+    };
+    tick();
   }
 };
-LibContentPillar.styles = [
+LibTextGlitch.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(componentCss)}`
+  css`${unsafeCSS(glitchCss)}`
 ];
 __decorateClass([
   property({ type: String })
-], LibContentPillar.prototype, "kanji", 2);
-__decorateClass([
-  property({ type: String })
-], LibContentPillar.prototype, "label", 2);
+], LibTextGlitch.prototype, "text", 2);
 __decorateClass([
-  property({ type: String })
-], LibContentPillar.prototype, "description", 2);
+  property({ type: String, reflect: true })
+], LibTextGlitch.prototype, "variant", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibContentPillar.prototype, "surface", 2);
-LibContentPillar = __decorateClass([
-  customElement("lib-content-pillar")
-], LibContentPillar);
+], LibTextGlitch.prototype, "trigger", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTextGlitch.prototype, "active", 2);
+LibTextGlitch = __decorateClass([
+  customElement("lib-text-glitch")
+], LibTextGlitch);
 export {
-  LibContentPillar
+  LibTextGlitch
 };
 //# sourceMappingURL=index45.js.map

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/components/atoms/content-pillar/content-pillar.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { rendercontentPillar } from './content-pillar.html';\nimport componentCss from './content-pillar.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * `<lib-content-pillar>` — Pilar filosófico con kanji, label y descripción.\n *\n * Patrón recurrente del sistema Shibui: kanji decorativo a la izquierda +\n * etiqueta en DM Mono + cuerpo de texto en Shippori Mincho.\n *\n * @tag lib-content-pillar\n *\n * @attr {string}           kanji       - Carácter kanji decorativo (ej: \"侘\", \"金\", \"間\").\n * @attr {string}           label       - Etiqueta en mono uppercase (ej: \"Wabi · Imperfección\").\n * @attr {string}           description - Texto de descripción inline.\n * @attr {'dark'|'light'}   surface     - Superficie sobre la que se muestra. Default: `dark`.\n *\n * @slot - Descripción como rich content (alternativa al atributo `description`).\n *\n * @csspart pillar      - Wrapper flex externo.\n * @csspart kanji       - El carácter kanji.\n * @csspart body        - Columna derecha (label + descripción).\n * @csspart label       - La etiqueta mono.\n * @csspart description - El párrafo de descripción.\n *\n * @example\n * <lib-content-pillar\n *   kanji=\"金\"\n *   label=\"Kintsugi · Cicatrices de oro\"\n *   description=\"Reparar con oro en lugar de ocultar.\"\n * ></lib-content-pillar>\n *\n * <!-- Con rich content -->\n * <lib-content-pillar kanji=\"間\" label=\"Ma · El espacio\">\n *   El silencio entre notas. El espacio vacío <em>es</em> presencia.\n * </lib-content-pillar>\n */\n@customElement('lib-content-pillar')\nexport class LibContentPillar extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /** Carácter kanji decorativo */\n  @property({ type: String })\n  kanji = '';\n\n  /** Etiqueta en DM Mono uppercase */\n  @property({ type: String })\n  label = '';\n\n  /** Descripción inline (alternativa al slot) */\n  @property({ type: String })\n  description = '';\n\n  /** Superficie de fondo */\n  @property({ type: String, reflect: true })\n  surface: 'dark' | 'light' = 'dark';\n\n  protected override render(): TemplateResult {\n    return rendercontentPillar(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-content-pillar': LibContentPillar;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwCO,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,QAAQ;AAIR,SAAA,QAAQ;AAIR,SAAA,cAAc;AAId,SAAA,UAA4B;AAAA,EAAA;AAAA,EAET,SAAyB;AAC1C,WAAO,oBAAoB,IAAI;AAAA,EACjC;AACF;AA1Ba,iBAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,iBASX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAZf,iBAaX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,iBAiBX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,iBAqBX,WAAA,WAAA,CAAA;AArBW,mBAAN,gBAAA;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB,gBAAA;"}
+{"version":3,"file":"index45.js","sources":["../src/components/atoms/text-glitch/lib-text-glitch.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport glitchCss from './lib-text-glitch.css?inline';\nimport { textGlitchTemplate } from './lib-text-glitch.html';\n\n/* ── Tipos públicos ─────────────────────────────────────────── */\n\n/** Variante visual del efecto de glitch. */\nexport type TextGlitchVariant = 'slice' | 'scan' | 'shift' | 'decode' | 'redact' | 'noise';\n\n/**\n * Modo de activación del efecto.\n * - `hover`  → se activa al pasar el cursor (default).\n * - `always` → se activa de forma continua al montar el componente.\n */\nexport type TextGlitchTrigger = 'hover' | 'always';\n\n/* ── Pool de caracteres para el decode ──────────────────────── */\n\nconst KANA =\n  'ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ' +\n  'ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ヲ ン ガ ギ グ ゲ ゴ ' +\n  'ザ ジ ズ ゼ ゾ ダ ヂ ヅ デ ド バ ビ ブ ベ ボ 渋 液 美 乱 進 間 静 陰 影 黒 白 墨 和 侘'.split(' ');\n\n/**\n * @element lib-text-glitch\n *\n * @prop {string}              text    - Texto a renderizar y distorsionar.\n * @prop {TextGlitchVariant}   variant - Efecto visual: slice | scan | shift | decode | redact | noise.\n * @prop {TextGlitchTrigger}   trigger - Modo de activación: hover | always.\n * @prop {boolean}             active  - Activa el efecto programáticamente (reflectado en atributo).\n *\n * @method play()  - Reproduce el efecto una vez (scan / redact / decode).\n * @method stop()  - Detiene el bucle `trigger=\"always\"`.\n */\n@customElement('lib-text-glitch')\nexport class LibTextGlitch extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(glitchCss)}`,\n  ];\n\n  /* ── Props ──────────────────────────────────────────────── */\n\n  @property({ type: String })\n  text: string = '';\n\n  @property({ type: String, reflect: true })\n  variant: TextGlitchVariant = 'slice';\n\n  @property({ type: String, reflect: true })\n  trigger: TextGlitchTrigger = 'hover';\n\n  /** Activa el efecto desde el exterior (CSS reacciona a [active]). */\n  @property({ type: Boolean, reflect: true })\n  active: boolean = false;\n\n  /* ── Estado interno ─────────────────────────────────────── */\n\n  private _running = false;\n  private _alwaysTimer?: ReturnType<typeof setTimeout>;\n\n  /* Bound handler reutilizable para poder hacer removeEventListener */\n  private readonly _boundMouseEnter = (): void => { this._decodePlay(); };\n\n  /* ── Lifecycle ──────────────────────────────────────────── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._setupDecode();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('mouseenter', this._boundMouseEnter);\n    clearTimeout(this._alwaysTimer);\n  }\n\n  override updated(changed: PropertyValues): void {\n    const reInit =\n      changed.has('variant') ||\n      changed.has('trigger') ||\n      changed.has('text');\n\n    if (reInit) {\n      /* Limpieza del ciclo anterior */\n      this.removeEventListener('mouseenter', this._boundMouseEnter);\n      clearTimeout(this._alwaysTimer);\n      this._running = false;\n      this._setupDecode();\n    }\n  }\n\n  override render(): TemplateResult {\n    return textGlitchTemplate({ text: this.text, variant: this.variant });\n  }\n\n  /* ── API pública ────────────────────────────────────────── */\n\n  /**\n   * Reproduce el efecto manualmente una vez.\n   * - Para `decode`: lanza el scramble de kanji.\n   * - Para `scan` / `redact`: activa [active] y lo retira al terminar.\n   * - Para `slice` / `shift` / `noise`: activa [active] (CSS bucle).\n   */\n  play(): void {\n    if (this.variant === 'decode') {\n      this._decodePlay();\n      return;\n    }\n    this.active = true;\n    if (this.variant === 'scan' || this.variant === 'redact') {\n      const dur = this.variant === 'scan' ? 620 : 720;\n      setTimeout(() => { this.active = false; }, dur);\n    }\n  }\n\n  /** Detiene el bucle `trigger=\"always\"` y desactiva [active]. */\n  stop(): void {\n    clearTimeout(this._alwaysTimer);\n    this._running = false;\n    this.active = false;\n  }\n\n  /* ── Decode engine ──────────────────────────────────────── */\n\n  private _setupDecode(): void {\n    if (this.variant !== 'decode') return;\n\n    if (this.trigger === 'hover') {\n      this.addEventListener('mouseenter', this._boundMouseEnter);\n    } else {\n      /* always: esperamos el primer render completo para tener los .char */\n      this.updateComplete.then(() => { this._scheduleAlwaysDecode(); });\n    }\n  }\n\n  private _scheduleAlwaysDecode(): void {\n    this._decodePlay();\n    /* Pausa entre repeticiones: proporcional a la longitud del texto */\n    const pause = Math.max([...this.text].length * 55 * 1.5, 400) + 2000;\n    this._alwaysTimer = setTimeout(() => { this._scheduleAlwaysDecode(); }, pause);\n  }\n\n  /**\n   * Motor de decodificación kanji.\n   *\n   * Cada char span se sustituye por un katakana/kanji aleatorio\n   * durante un número variable de frames, y luego se resuelve al\n   * carácter original. El orden de resolución es estocástico.\n   */\n  private _decodePlay(): void {\n    if (this._running) return;\n    this._running = true;\n\n    const chars = Array.from(\n      this.renderRoot.querySelectorAll<HTMLElement>('.char')\n    );\n\n    if (chars.length === 0) {\n      this._running = false;\n      return;\n    }\n\n    const SCRAMBLE_CYCLES = 6;\n    const FRAME_MS        = 55;\n\n    /* Delay estocástico por carácter — no resuelven de izquierda a derecha */\n    const delays = chars.map(() =>\n      Math.floor(Math.random() * chars.length * SCRAMBLE_CYCLES * 0.6) + SCRAMBLE_CYCLES\n    );\n\n    let frame = 0;\n    const total = Math.max(...delays) + 2;\n\n    const tick = (): void => {\n      chars.forEach((span, i) => {\n        const orig = span.dataset['original'] ?? '';\n\n        if (frame < (delays[i] ?? 0)) {\n          /* Espacios y puntuación — no se scramblea */\n          if (orig.trim() === '' || orig === '·' || orig === '-') return;\n          span.textContent = KANA[Math.floor(Math.random() * KANA.length)] ?? orig;\n          span.classList.add('is-scrambling');\n        } else {\n          span.textContent = orig;\n          span.classList.remove('is-scrambling');\n        }\n      });\n\n      frame++;\n\n      if (frame < total) {\n        setTimeout(tick, FRAME_MS);\n      } else {\n        /* Garantía final — todos al original */\n        chars.forEach(span => {\n          span.textContent = span.dataset['original'] ?? '';\n          span.classList.remove('is-scrambling');\n        });\n        this._running = false;\n      }\n    };\n\n    tick();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-text-glitch': LibTextGlitch;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index46.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { renderQuote } from "./index277.js";
-import componentCss from "./index278.js";
+import textListCss from "./index346.js";
 import sharedTokens from "./index196.js";
+import { textListTemplate } from "./index347.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,42 +13,149 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibQuote = class extends LitElement {
+let LibTextList = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.text = "";
-    this.accent = "";
-    this.cite = "";
-    this.surface = "dark";
+    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() {
-    return renderQuote(this);
+    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)
+    });
   }
 };
-LibQuote.styles = [
+LibTextList.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(componentCss)}`
+  css`${unsafeCSS(textListCss)}`
 ];
 __decorateClass([
-  property({ type: String })
-], LibQuote.prototype, "text", 2);
+  property({ type: String, reflect: true })
+], LibTextList.prototype, "family", 2);
 __decorateClass([
-  property({ type: String })
-], LibQuote.prototype, "accent", 2);
+  property({ type: Array })
+], LibTextList.prototype, "items", 2);
 __decorateClass([
-  property({ type: String })
-], LibQuote.prototype, "cite", 2);
+  property({ type: String, reflect: true })
+], LibTextList.prototype, "marker", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibQuote.prototype, "surface", 2);
+], LibTextList.prototype, "counter", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibQuote.prototype, "size", 2);
-LibQuote = __decorateClass([
-  customElement("lib-quote")
-], LibQuote);
+], 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 {
-  LibQuote
+  LibTextList
 };
 //# sourceMappingURL=index46.js.map

package/dist/index46.js.map

@@ -1 +1 @@
-{"version":3,"file":"index46.js","sources":["../src/components/atoms/quote/lib-quote.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { renderQuote } from './lib-quote.html';\nimport componentCss from './lib-quote.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * `<lib-quote>` — Cita display editorial.\n *\n * Blockquote en Cormorant Garamond con acento itálico en kaki y\n * atribución en DM Mono. Patrón recurrente en hero sections, CTAs\n * y secciones de filosofía del sistema Shibui.\n *\n * @tag lib-quote\n *\n * @attr {string}                  text    - Primera línea de la cita (alternativa al slot).\n * @attr {string}                  accent  - Segunda línea en itálica kaki.\n * @attr {string}                  cite    - Atribución (ej: \"— Principio Shibui · 渋い\").\n * @attr {'dark'|'light'|'washi'}  surface - Superficie de fondo. Default: `dark`.\n * @attr {'sm'|'md'|'lg'}          size    - Tamaño tipográfico fluido. Default: `md`.\n *\n * @slot - Primera línea de la cita como rich content (alternativa al atributo `text`).\n *\n * @csspart blockquote - El elemento blockquote raíz.\n * @csspart text       - El párrafo de la cita.\n * @csspart accent     - El em de la segunda línea.\n * @csspart cite       - El elemento cite de atribución.\n *\n * @cssprop --q-text-color   - Color del texto principal.\n * @cssprop --q-accent-color - Color del acento itálico.\n * @cssprop --q-cite-color   - Color de la atribución.\n * @cssprop --q-size         - Tamaño de fuente (sobreescribe el atributo `size`).\n *\n * @example\n * <lib-quote\n *   text=\"Lo bello no se anuncia.\"\n *   accent=\"Se descubre con pausa.\"\n *   cite=\"— Principio Shibui · 渋い\"\n *   surface=\"dark\"\n * ></lib-quote>\n *\n * <!-- Con slot -->\n * <lib-quote accent=\"Se descubre con pausa.\" cite=\"— Principio Shibui\">\n *   Lo bello no se anuncia.\n * </lib-quote>\n */\n@customElement('lib-quote')\nexport class LibQuote extends LitElement {\n\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /** Primera línea de la cita */\n  @property({ type: String })\n  text = '';\n\n  /** Segunda línea en itálica kaki */\n  @property({ type: String })\n  accent = '';\n\n  /** Atribución */\n  @property({ type: String })\n  cite = '';\n\n  /** Superficie de fondo */\n  @property({ type: String, reflect: true })\n  surface: 'dark' | 'light' | 'washi' = 'dark';\n\n  /** Tamaño tipográfico fluido */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  protected override render(): TemplateResult {\n    return renderQuote(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-quote': LibQuote;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+CO,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AASL,SAAA,OAAO;AAIP,SAAA,SAAS;AAIT,SAAA,OAAO;AAIP,SAAA,UAAsC;AAItC,SAAA,OAA2B;AAAA,EAAA;AAAA,EAER,SAAyB;AAC1C,WAAO,YAAY,IAAI;AAAA,EACzB;AACF;AA9Ba,SAEK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,SASX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAZf,SAaX,WAAA,UAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,SAiBX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,SAqBX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAxB9B,SAyBX,WAAA,QAAA,CAAA;AAzBW,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}
+{"version":3,"file":"index46.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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"}

package/dist/index47.js

@@ -1,8 +1,9 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
+import { generateUniqueId } from "./index210.js";
 import sharedTokens from "./index196.js";
-import colorScaleStyles from "./index279.js";
-import { colorScaleTemplate } from "./index280.js";
+import tooltipCss from "./index348.js";
+import { tooltipTemplate } from "./index349.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,34 +14,55 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibColorScale = class extends LitElement {
+let LibTooltip = class extends LitElement {
   constructor() {
-    super(...arguments);
-    this.name = "scale";
-    this.steps = [];
-    this.showLabels = true;
+    super();
+    this.position = "top";
+    this.variant = "dark";
+    this.size = "md";
+    this.content = "";
+    this.instant = false;
+    this.open = false;
+    this._tipId = generateUniqueId("tip-");
   }
   render() {
-    return colorScaleTemplate(this);
+    return tooltipTemplate({
+      position: this.position,
+      variant: this.variant,
+      size: this.size,
+      content: this.content,
+      instant: this.instant,
+      open: this.open,
+      tipId: this._tipId
+    });
   }
 };
-LibColorScale.styles = [
+LibTooltip.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(colorScaleStyles)}`
+  css`${unsafeCSS(tooltipCss)}`
 ];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTooltip.prototype, "position", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTooltip.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTooltip.prototype, "size", 2);
 __decorateClass([
   property({ type: String })
-], LibColorScale.prototype, "name", 2);
+], LibTooltip.prototype, "content", 2);
 __decorateClass([
-  property({ type: Array })
-], LibColorScale.prototype, "steps", 2);
+  property({ type: Boolean, reflect: true })
+], LibTooltip.prototype, "instant", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "show-labels" })
-], LibColorScale.prototype, "showLabels", 2);
-LibColorScale = __decorateClass([
-  customElement("lib-color-scale")
-], LibColorScale);
+  property({ type: Boolean, reflect: true })
+], LibTooltip.prototype, "open", 2);
+LibTooltip = __decorateClass([
+  customElement("lib-tooltip")
+], LibTooltip);
 export {
-  LibColorScale
+  LibTooltip
 };
 //# sourceMappingURL=index47.js.map

package/dist/index47.js.map

@@ -1 +1 @@
-{"version":3,"file":"index47.js","sources":["../src/components/atoms/color-scale/lib-color-scale.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport sharedTokens          from '../../../styles/shared/tokens.css?inline';\nimport colorScaleStyles      from './lib-color-scale.css?inline';\nimport { colorScaleTemplate } from './lib-color-scale.html';\nimport type { ColorStep }    from './lib-color-scale.types';\n\n/**\n * lib-color-scale — Shibui UI\n *\n * Escala de color horizontal con 11 pasos (50 → 950).\n * Cada swatch expande en hover y revela el número del paso.\n * Los extremos muestran el nombre y el valor hex.\n *\n * @prop {string}       name        — Nombre de la paleta (ej: \"washi\", \"kaki\").\n * @prop {ColorStep[]}  steps       — Array de pasos de la escala. Orden de izquierda a derecha.\n * @prop {boolean}      show-labels — Muestra las etiquetas de los extremos (activo por defecto).\n *\n * @csspart track   — El contenedor de los swatches.\n * @cssprop --lib-color-scale-height — Altura de la pista (default: 56px).\n */\n@customElement('lib-color-scale')\nexport class LibColorScale extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(colorScaleStyles)}`,\n  ];\n\n  @property({ type: String })\n  name = 'scale';\n\n  @property({ type: Array })\n  steps: ColorStep[] = [];\n\n  @property({ type: Boolean, attribute: 'show-labels' })\n  showLabels = true;\n\n  protected override render(): TemplateResult {\n    return colorScaleTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-color-scale': LibColorScale;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsBO,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,OAAO;AAGP,SAAA,QAAqB,CAAA;AAGrB,SAAA,aAAa;AAAA,EAAA;AAAA,EAEM,SAAyB;AAC1C,WAAO,mBAAmB,IAAI;AAAA,EAChC;AACF;AAlBa,cACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,gBAAgB,CAAC;AACnC;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,cAOX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GATd,cAUX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,eAAe;AAAA,GAZ1C,cAaX,WAAA,cAAA,CAAA;AAbW,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
+{"version":3,"file":"index47.js","sources":["../src/components/atoms/tooltip/lib-tooltip.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport tooltipCss from './lib-tooltip.css?inline';\nimport { tooltipTemplate } from './lib-tooltip.html';\n\n/* ── Tipos públicos ─────────────────────────────────────────── */\n\n/**\n * Posición de la burbuja respecto al trigger.\n * Las cuatro cardinales centran la burbuja.\n * Las variantes -start/-end alinean al extremo — útiles\n * cuando el trigger está junto al borde de pantalla.\n */\nexport type TooltipPosition =\n  | 'top' | 'bottom' | 'left' | 'right'\n  | 'top-start' | 'top-end'\n  | 'bottom-start' | 'bottom-end';\n\n/**\n * Variante de color.\n * - `dark`    — washi-900, máximo contraste (default).\n * - `light`   — fondo blanco con borde, para superficies oscuras\n *               o cuando el contenido necesita estructura visible.\n * - `kaki`    — acento naranja terracota.\n * - `celadon` — estado positivo / informativo.\n * - `error`   — validación fallida o acción destructiva.\n */\nexport type TooltipVariant = 'dark' | 'light' | 'kaki' | 'celadon' | 'error';\n\n/** Tamaño de la burbuja. */\nexport type TooltipSize = 'sm' | 'md' | 'lg';\n\n/**\n * @element lib-tooltip\n *\n * Wrapper que envuelve cualquier trigger y muestra una burbuja\n * flotante en hover / focus. Sin JS para el caso base —\n * todo mediante CSS :hover + :focus-within.\n *\n * ## Uso simple\n * ```html\n * <lib-tooltip content=\"Guardar cambios\">\n *   <button>...</button>\n * </lib-tooltip>\n * ```\n *\n * ## Contenido rico (slot=\"content\")\n * ```html\n * <lib-tooltip position=\"top\" variant=\"light\" size=\"lg\">\n *   <button>...</button>\n *   <span slot=\"content\">\n *     <span class=\"tip-title\">Tokens de color</span>\n *     <span class=\"tip-body\">Paleta completa en CSS variables.</span>\n *     <div class=\"tip-sep\"></div>\n *     <div class=\"tip-kbd\"><kbd>⌘</kbd><kbd>K</kbd></div>\n *   </span>\n * </lib-tooltip>\n * ```\n *\n * @prop {TooltipPosition} position - Posición de la burbuja (default: top).\n * @prop {TooltipVariant}  variant  - Variante de color (default: dark).\n * @prop {TooltipSize}     size     - Tamaño sm | md | lg (default: md).\n * @prop {string}          content  - Texto simple. Para contenido rico usa slot=\"content\".\n * @prop {boolean}         instant  - Elimina el delay de entrada de 300ms.\n * @prop {boolean}         open     - Abre la burbuja programáticamente.\n *\n * @slot          - El trigger (cualquier elemento interactivo).\n * @slot content  - Contenido rico de la burbuja (tip-title, tip-body, tip-kbd, tip-sep).\n *\n * @csspart wrapper - El div posicionador interno.\n * @csspart bubble  - El span de la burbuja flotante.\n */\n@customElement('lib-tooltip')\nexport class LibTooltip extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(tooltipCss)}`,\n  ];\n\n  private _tipId: string;\n\n  constructor() {\n    super();\n    this._tipId = generateUniqueId('tip-');\n  }\n\n  @property({ type: String, reflect: true })\n  position: TooltipPosition = 'top';\n\n  @property({ type: String, reflect: true })\n  variant: TooltipVariant = 'dark';\n\n  @property({ type: String, reflect: true })\n  size: TooltipSize = 'md';\n\n  @property({ type: String })\n  content: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  instant: boolean = false;\n\n  /** Abre la burbuja programáticamente (equivale a `.is-open`). */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  override render(): TemplateResult {\n    return tooltipTemplate({\n      position: this.position,\n      variant:  this.variant,\n      size:     this.size,\n      content:  this.content,\n      instant:  this.instant,\n      open:     this.open,\n      tipId:    this._tipId,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-tooltip': LibTooltip;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA2EO,IAAM,aAAN,cAAyB,WAAW;AAAA,EAQzC,cAAc;AACZ,UAAA;AAKF,SAAA,WAA4B;AAG5B,SAAA,UAA0B;AAG1B,SAAA,OAAoB;AAGpB,SAAA,UAAkB;AAGlB,SAAA,UAAmB;AAInB,SAAA,OAAgB;AApBd,SAAK,SAAS,iBAAiB,MAAM;AAAA,EACvC;AAAA,EAqBS,SAAyB;AAChC,WAAO,gBAAgB;AAAA,MACrB,UAAU,KAAK;AAAA,MACf,SAAU,KAAK;AAAA,MACf,MAAU,KAAK;AAAA,MACf,SAAU,KAAK;AAAA,MACf,SAAU,KAAK;AAAA,MACf,MAAU,KAAK;AAAA,MACf,OAAU,KAAK;AAAA,IAAA,CAChB;AAAA,EACH;AACF;AA3Ca,WACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,UAAU,CAAC;AAC7B;AAUA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAb9B,WAcX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAhB9B,WAiBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAnB9B,WAoBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBf,WAuBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAzB/B,WA0BX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA7B/B,WA8BX,WAAA,QAAA,CAAA;AA9BW,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}