@shibui-ui/ui 1.6.0 → 1.7.0

package/dist/index61.js

@@ -0,0 +1,217 @@
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { tabsTemplate } from "./index307.js";
+import tabsCss from "./index308.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 LibTabs = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "underline";
+    this.color = "";
+    this.size = "";
+    this.dark = false;
+    this.kintsugi = false;
+    this.glitch = false;
+    this.scrollable = false;
+    this.full = false;
+    this.active = "";
+    this.ariaLabel = "";
+    this.items = [];
+    this._inkLeft = 0;
+    this._inkWidth = 0;
+    this._ro = null;
+  }
+  /* ── Lifecycle ── */
+  firstUpdated() {
+    this._setupResizeObserver();
+    requestAnimationFrame(() => this._positionInk());
+  }
+  updated(changed) {
+    var _a;
+    (_a = super.updated) == null ? void 0 : _a.call(this, changed);
+    if (changed.has("active") || changed.has("items") || changed.has("variant")) {
+      requestAnimationFrame(() => this._positionInk());
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this._ro) == null ? void 0 : _a.disconnect();
+    this._ro = null;
+  }
+  /* ── Ink bar ── */
+  _positionInk() {
+    var _a, _b;
+    const noInkVariants = [
+      "pill",
+      "card",
+      "outline",
+      "vertical"
+    ];
+    if (noInkVariants.includes(this.variant)) return;
+    const list = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".tb-list");
+    const activeTab = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector(".tb-tab.is-active");
+    if (!list || !activeTab) return;
+    const listRect = list.getBoundingClientRect();
+    const tabRect = activeTab.getBoundingClientRect();
+    this._inkLeft = tabRect.left - listRect.left;
+    this._inkWidth = tabRect.width;
+  }
+  _setupResizeObserver() {
+    var _a;
+    const list = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".tb-list");
+    if (!list) return;
+    this._ro = new ResizeObserver(() => this._positionInk());
+    this._ro.observe(list);
+  }
+  /* ── Tab activation ── */
+  _activateTab(id) {
+    var _a;
+    if (id === this.active) return;
+    const prev = this.active;
+    this.active = id;
+    if (this.scrollable) {
+      const tab = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+        `[data-id="${id}"]`
+      );
+      tab == null ? void 0 : tab.scrollIntoView({
+        inline: "nearest",
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-tab-change", {
+        detail: { id, prev },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleClick(e) {
+    var _a;
+    const targetId = e.target.id;
+    console.log("target:", e.target.id);
+    const tabs = Array.from(
+      ((_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(
+        ".tb-tab:not(.is-disabled)"
+      )) ?? []
+    );
+    const selectedTab = tabs.find((tab) => tab.id === targetId);
+    console.log(selectedTab);
+    if (!selectedTab) return;
+    this._activateTab((selectedTab == null ? void 0 : selectedTab.dataset["id"]) ?? "");
+    selectedTab.focus();
+  }
+  /* ── Keyboard navigation ── */
+  _handleKey(e) {
+    var _a;
+    const isVertical = this.variant === "vertical";
+    const tabs = Array.from(
+      ((_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(
+        ".tb-tab:not(.is-disabled)"
+      )) ?? []
+    );
+    const current = tabs.findIndex((t) => t.dataset["id"] === this.active);
+    let next = -1;
+    if (e.key === "ArrowRight" && !isVertical || e.key === "ArrowDown" && isVertical) {
+      e.preventDefault();
+      next = (current + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft" && !isVertical || e.key === "ArrowUp" && isVertical) {
+      e.preventDefault();
+      next = (current - 1 + tabs.length) % tabs.length;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      next = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      next = tabs.length - 1;
+    }
+    if (next >= 0) {
+      const target = tabs[next];
+      if (target == null ? void 0 : target.dataset["id"]) {
+        this._activateTab(target.dataset["id"]);
+        target.focus();
+      }
+    }
+  }
+  /* ── renderItem (LibListModel) — fallback para modo loading ── */
+  renderItem(item) {
+    return html`<button class="tb-tab">${item.label}</button>`;
+  }
+  /* ── Render principal ── */
+  render() {
+    var _a;
+    console.log(
+      "lib-tabs render, items:",
+      (_a = this.items) == null ? void 0 : _a.length,
+      "active:",
+      this.active
+    );
+    return tabsTemplate(this);
+  }
+};
+LibTabs.styles = [
+  css`
+      ${unsafeCSS(sharedTokens)}
+    `,
+  css`
+      ${unsafeCSS(tabsCss)}
+    `
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTabs.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTabs.prototype, "color", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTabs.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTabs.prototype, "dark", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTabs.prototype, "kintsugi", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTabs.prototype, "glitch", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "scroll" })
+], LibTabs.prototype, "scrollable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTabs.prototype, "full", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTabs.prototype, "active", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], LibTabs.prototype, "ariaLabel", 2);
+__decorateClass([
+  property({ type: Array, hasChanged: () => true })
+], LibTabs.prototype, "items", 2);
+__decorateClass([
+  state()
+], LibTabs.prototype, "_inkLeft", 2);
+__decorateClass([
+  state()
+], LibTabs.prototype, "_inkWidth", 2);
+LibTabs = __decorateClass([
+  customElement("lib-tabs")
+], LibTabs);
+export {
+  LibTabs
+};
+//# sourceMappingURL=index61.js.map

package/dist/index61.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index61.js","sources":["../src/components/molecules/tabs/lib-tabs.component.ts"],"sourcesContent":["import { html, css, unsafeCSS, TemplateResult, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { tabsTemplate } from \"./lib-tabs.html\";\nimport tabsCss from \"./lib-tabs.css?inline\";\nimport sharedTokens from \"../../../styles/shared/tokens.css?inline\";\nimport type {\n  TabItem,\n  TabsVariant,\n  TabsColor,\n  TabsSize,\n} from \"./lib-tabs.types\";\n\n/**\n * lib-tabs — Componente de pestañas Shibui (SG-60)\n *\n * @prop variant  — 'underline' | 'pill' | 'card' | 'outline' | 'vertical'\n * @prop color    — 'kaki' | 'celadon'\n * @prop size     — 'sm' | 'md' | 'lg'\n * @prop dark     — surface oscura\n * @prop kintsugi — ink bar animada dorada\n * @prop glitch   — efecto RGB split en tab activo\n * @prop scroll   — overflow-x scroll en la lista\n * @prop full     — tabs en grid de columnas iguales\n * @prop active   — id del tab activo\n * @prop items    — array de TabItem\n *\n * Panels: cada TabItem con id=\"X\" se muestra via <slot name=\"X\">.\n * El usuario añade <div slot=\"X\">contenido</div> como hijo de lib-tabs.\n *\n * @fires ui-lib-tab-change — {detail: { id: string; prev: string }}\n */\n@customElement(\"lib-tabs\")\nexport class LibTabs extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(tabsCss)}\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: TabsVariant = \"underline\";\n\n  @property({ type: String, reflect: true })\n  color: TabsColor | \"\" = \"\";\n\n  @property({ type: String, reflect: true })\n  size: TabsSize | \"\" = \"\";\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  kintsugi = false;\n\n  @property({ type: Boolean, reflect: true })\n  glitch = false;\n\n  @property({ type: Boolean, reflect: true, attribute: \"scroll\" })\n  scrollable = false;\n\n  @property({ type: Boolean, reflect: true })\n  full = false;\n\n  @property({ type: String, reflect: true })\n  active = \"\";\n\n  /** aria-label para el tablist */\n  @property({ type: String, attribute: \"aria-label\" })\n  override ariaLabel = \"\";\n\n  @property({ type: Array, hasChanged: () => true })\n  items: TabItem[] = [];\n\n  /* ── Internal state para la ink bar ── */\n  @state() _inkLeft = 0;\n  @state() _inkWidth = 0;\n\n  private _ro: ResizeObserver | null = null;\n\n  /* ── Lifecycle ── */\n\n  override firstUpdated(): void {\n    this._setupResizeObserver();\n    // Aseguramos que el primer tab activo tiene ink bar correcta\n    requestAnimationFrame((): void => this._positionInk());\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    super.updated?.(changed);\n    if (\n      changed.has(\"active\") ||\n      changed.has(\"items\") ||\n      changed.has(\"variant\")\n    ) {\n      requestAnimationFrame((): void => this._positionInk());\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  /* ── Ink bar ── */\n\n  private _positionInk(): void {\n    /* Solo aplica a variantes con ink bar */\n    const noInkVariants: TabsVariant[] = [\n      \"pill\",\n      \"card\",\n      \"outline\",\n      \"vertical\",\n    ];\n    if (noInkVariants.includes(this.variant)) return;\n\n    const list = this.shadowRoot?.querySelector<HTMLElement>(\".tb-list\");\n    const activeTab =\n      this.shadowRoot?.querySelector<HTMLElement>(\".tb-tab.is-active\");\n    if (!list || !activeTab) return;\n\n    const listRect = list.getBoundingClientRect();\n    const tabRect = activeTab.getBoundingClientRect();\n    this._inkLeft = tabRect.left - listRect.left;\n    this._inkWidth = tabRect.width;\n  }\n\n  private _setupResizeObserver(): void {\n    const list = this.shadowRoot?.querySelector<HTMLElement>(\".tb-list\");\n    if (!list) return;\n    this._ro = new ResizeObserver((): void => this._positionInk());\n    this._ro.observe(list);\n  }\n\n  /* ── Tab activation ── */\n\n  private _activateTab(id: string): void {\n    if (id === this.active) return;\n    const prev = this.active;\n    this.active = id;\n\n    /* Scroll tab into view si está en modo scrollable */\n    if (this.scrollable) {\n      const tab = this.shadowRoot?.querySelector<HTMLElement>(\n        `[data-id=\"${id}\"]`,\n      );\n      tab?.scrollIntoView({\n        inline: \"nearest\",\n        block: \"nearest\",\n        behavior: \"smooth\",\n      });\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"ui-lib-tab-change\", {\n        detail: { id, prev },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  _handleClick(e: CustomEvent): void {\n    const targetId = (e.target as HTMLElement).id;\n    console.log(\"target:\", (e.target as HTMLElement).id);\n\n    const tabs = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>(\n        \".tb-tab:not(.is-disabled)\",\n      ) ?? [],\n    );\n\n    const selectedTab = tabs.find((tab) => tab.id === targetId);\n    console.log(selectedTab);\n\n    if (!selectedTab) return; // Si no lo encuentra, abortamos la función\n\n    this._activateTab(selectedTab?.dataset[\"id\"] ?? \"\");\n    selectedTab.focus();\n  }\n\n  /* ── Keyboard navigation ── */\n\n  _handleKey(e: KeyboardEvent): void {\n    const isVertical = this.variant === \"vertical\";\n    const tabs = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>(\n        \".tb-tab:not(.is-disabled)\",\n      ) ?? [],\n    );\n    const current = tabs.findIndex((t) => t.dataset[\"id\"] === this.active);\n\n    let next = -1;\n\n    if (\n      (e.key === \"ArrowRight\" && !isVertical) ||\n      (e.key === \"ArrowDown\" && isVertical)\n    ) {\n      e.preventDefault();\n      next = (current + 1) % tabs.length;\n    } else if (\n      (e.key === \"ArrowLeft\" && !isVertical) ||\n      (e.key === \"ArrowUp\" && isVertical)\n    ) {\n      e.preventDefault();\n      next = (current - 1 + tabs.length) % tabs.length;\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      next = 0;\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      next = tabs.length - 1;\n    }\n\n    if (next >= 0) {\n      const target = tabs[next];\n      if (target?.dataset[\"id\"]) {\n        this._activateTab(target.dataset[\"id\"]);\n        target.focus();\n      }\n    }\n  }\n\n  /* ── renderItem (LibListModel) — fallback para modo loading ── */\n  protected renderItem(item: TabItem): TemplateResult {\n    return html`<button class=\"tb-tab\">${item.label}</button>`;\n  }\n\n  /* ── Render principal ── */\n  protected override render(): TemplateResult {\n    console.log(\n      \"lib-tabs render, items:\",\n      this.items?.length,\n      \"active:\",\n      this.active,\n    );\n\n    return tabsTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"lib-tabs\": LibTabs;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/index62.js

@@ -0,0 +1,147 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import sharedTokens from "./index196.js";
+import modalCss from "./index309.js";
+import { modalTemplate } from "./index310.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 LibModal = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.size = "md";
+    this.variant = "default";
+    this._animate = "scale";
+    this.dark = false;
+    this.heading = "";
+    this.subtitle = "";
+    this.iconTone = null;
+    this.footerInfo = "";
+    this.noBackdropClose = false;
+    this._prevFocus = null;
+    this._onKeydown = (e) => {
+      if (e.key === "Escape" && this.open) {
+        e.stopPropagation();
+        this._close("escape");
+      }
+    };
+  }
+  /* ── Lifecycle ──────────────────────────────────────────── */
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("keydown", this._onKeydown, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("keydown", this._onKeydown, true);
+    if (this.open) document.body.style.overflow = "";
+  }
+  updated(changed) {
+    if (!changed.has("open")) return;
+    if (this.open) {
+      this._prevFocus = document.activeElement;
+      document.body.style.overflow = "hidden";
+      requestAnimationFrame(() => this._focusFirst());
+    } else {
+      document.body.style.overflow = "";
+      if (this._prevFocus instanceof HTMLElement) {
+        this._prevFocus.focus();
+      }
+      this._prevFocus = null;
+    }
+  }
+  /* ── API pública ────────────────────────────────────────── */
+  /** Cierra el modal programáticamente. */
+  close() {
+    this._close("button");
+  }
+  /* ── Helpers privados ───────────────────────────────────── */
+  _close(reason) {
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-modal-close", {
+        detail: { reason },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _onBackdropClick(e) {
+    if (!this.noBackdropClose && e.target === e.currentTarget) {
+      this._close("backdrop");
+    }
+  }
+  _focusFirst() {
+    const panel = this.renderRoot.querySelector(".mo-panel");
+    if (!panel) return;
+    const focusable = panel.querySelector(
+      'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    focusable == null ? void 0 : focusable.focus();
+  }
+  /* ── Render ─────────────────────────────────────────────── */
+  render() {
+    return modalTemplate({
+      open: this.open,
+      size: this.size,
+      variant: this.variant,
+      _animate: this._animate,
+      dark: this.dark,
+      heading: this.heading,
+      subtitle: this.subtitle,
+      iconTone: this.iconTone,
+      footerInfo: this.footerInfo,
+      onClose: () => this._close("button"),
+      onBackdropClick: (e) => this._onBackdropClick(e)
+    });
+  }
+};
+LibModal.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(modalCss)}`
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibModal.prototype, "open", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibModal.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibModal.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibModal.prototype, "_animate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibModal.prototype, "dark", 2);
+__decorateClass([
+  property({ type: String })
+], LibModal.prototype, "heading", 2);
+__decorateClass([
+  property({ type: String })
+], LibModal.prototype, "subtitle", 2);
+__decorateClass([
+  property({ type: String, attribute: "icon-tone" })
+], LibModal.prototype, "iconTone", 2);
+__decorateClass([
+  property({ type: String, attribute: "footer-info" })
+], LibModal.prototype, "footerInfo", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-backdrop-close" })
+], LibModal.prototype, "noBackdropClose", 2);
+LibModal = __decorateClass([
+  customElement("lib-modal")
+], LibModal);
+export {
+  LibModal
+};
+//# sourceMappingURL=index62.js.map

package/dist/index62.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index62.js","sources":["../src/components/molecules/modal/lib-modal.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 modalCss from './lib-modal.css?inline';\nimport { modalTemplate } from './lib-modal.html';\nimport { ModalAnimate, ModalCloseEventDetail, ModalIconTone, ModalSize, ModalVariant } from './lib-modal.types';\n\n\n/**\n * @element lib-modal\n *\n * Diálogo bloqueante con backdrop difuminado. Seis tamaños, tres variantes\n * de panel, tres animaciones de entrada y soporte de surface oscura.\n *\n * ## Uso básico\n * ```html\n * <lib-modal heading=\"Editar componente\" open>\n *   <p>Contenido del cuerpo.</p>\n *   <div slot=\"footer\">\n *     <button class=\"mo-btn mo-btn-ghost\">Cancelar</button>\n *     <button class=\"mo-btn mo-btn-primary\">Guardar</button>\n *   </div>\n * </lib-modal>\n * ```\n *\n * ## Con ícono y subtítulo\n * ```html\n * <lib-modal heading=\"Nuevo componente\" subtitle=\"Shibui DS · añadir\" icon-tone=\"kaki\">\n *   <ph-plus slot=\"icon\" weight=\"bold\"></ph-plus>\n *   ...\n * </lib-modal>\n * ```\n *\n * ## Control de apertura\n * ```ts\n * modal.open = true;\n * modal.addEventListener('ui-lib-modal-close', e => {\n *   console.log(e.detail.reason); // 'button' | 'backdrop' | 'escape'\n *   modal.open = false;\n * });\n * ```\n *\n * @prop {boolean}        open              — Abre el modal. Reflected.\n * @prop {ModalSize}      size              — xs · sm · md · lg · xl · full (default md).\n * @prop {ModalVariant}   variant           — default · editorial · danger.\n * @prop {ModalAnimate}   _animate           — scale · slide-up · slide-down.\n * @prop {boolean}        dark              — Surface oscura.\n * @prop {string}         heading           — Título del modal (requerido para a11y).\n * @prop {string}         subtitle          — Subtítulo mono debajo del título.\n * @prop {ModalIconTone|null} icon-tone     — Tono del ícono. Si es null no se renderiza el wrapper.\n * @prop {string}         footer-info       — Texto secundario izquierda en el footer.\n * @prop {boolean}        no-backdrop-close — Desactiva el cierre al hacer click en el backdrop.\n *\n * @slot             — Cuerpo del modal (secciones, formularios, contenido libre).\n * @slot icon        — Contenido del ícono del header (visible solo si icon-tone no es null).\n * @slot footer      — Acciones del footer (botones).\n *\n * @csspart backdrop  — Capa de fondo difuminada.\n * @csspart panel-wrap — Contenedor animado (tamaño + animación).\n * @csspart panel     — El panel blanco real.\n * @csspart header    — Zona del header.\n * @csspart icon      — Wrapper del ícono.\n * @csspart close-btn — Botón ×.\n * @csspart body      — Zona scrollable del cuerpo.\n * @csspart footer    — Zona del footer.\n *\n * @fires ui-lib-modal-close — Emitido cuando el modal se cierra. Detail: { reason }.\n */\n@customElement('lib-modal')\nexport class LibModal extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(modalCss)}`,\n  ];\n\n  /* ── Props ─────────────────────────────────────────────── */\n\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  @property({ type: String, reflect: true })\n  size: ModalSize = 'md';\n\n  @property({ type: String, reflect: true })\n  variant: ModalVariant = 'default';\n\n  @property({ type: String, reflect: true })\n  _animate: ModalAnimate = 'scale';\n\n  @property({ type: Boolean, reflect: true })\n  dark: boolean = false;\n\n  /** Título del modal — requerido para accesibilidad (aria-labelledby). */\n  @property({ type: String })\n  heading: string = '';\n\n  @property({ type: String })\n  subtitle: string = '';\n\n  /**\n   * Tono del ícono del header.\n   * Acepta: 'default' | 'kaki' | 'celadon' | 'error' | 'info' | null.\n   * Cuando es null no se renderiza el wrapper del ícono.\n   */\n  @property({ type: String, attribute: 'icon-tone' })\n  iconTone: ModalIconTone | null = null;\n\n  @property({ type: String, attribute: 'footer-info' })\n  footerInfo: string = '';\n\n  /** Desactiva el cierre al hacer click fuera del panel. */\n  @property({ type: Boolean, attribute: 'no-backdrop-close' })\n  noBackdropClose: boolean = false;\n\n  /* ── Estado interno ─────────────────────────────────────── */\n\n  /** Elemento con foco antes de abrir — se restaura al cerrar. */\n  private _prevFocus: Element | null = null;\n\n  /** Handler de Escape vinculado para poder desregistrarlo. */\n  private readonly _onKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this._close('escape');\n    }\n  };\n\n  /* ── Lifecycle ──────────────────────────────────────────── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('keydown', this._onKeydown, true);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('keydown', this._onKeydown, true);\n    // Restaurar scroll si el componente se desmonta mientras está abierto\n    if (this.open) document.body.style.overflow = '';\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (!changed.has('open')) return;\n\n    if (this.open) {\n      this._prevFocus = document.activeElement;\n      document.body.style.overflow = 'hidden';\n      // Foco al primer elemento interactivo tras el render\n      requestAnimationFrame(() => this._focusFirst());\n    } else {\n      document.body.style.overflow = '';\n      // Restaurar foco al trigger original\n      if (this._prevFocus instanceof HTMLElement) {\n        this._prevFocus.focus();\n      }\n      this._prevFocus = null;\n    }\n  }\n\n  /* ── API pública ────────────────────────────────────────── */\n\n  /** Cierra el modal programáticamente. */\n  close(): void {\n    this._close('button');\n  }\n\n  /* ── Helpers privados ───────────────────────────────────── */\n\n  private _close(reason: ModalCloseEventDetail['reason']): void {\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent<ModalCloseEventDetail>('ui-lib-modal-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onBackdropClick(e: MouseEvent): void {\n    // Solo cierra si el click es directamente sobre el backdrop\n    if (!this.noBackdropClose && e.target === e.currentTarget) {\n      this._close('backdrop');\n    }\n  }\n\n  private _focusFirst(): void {\n    const panel = this.renderRoot.querySelector('.mo-panel');\n    if (!panel) return;\n    const focusable = panel.querySelector<HTMLElement>(\n      'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n    );\n    focusable?.focus();\n  }\n\n  /* ── Render ─────────────────────────────────────────────── */\n\n  override render(): TemplateResult {\n    return modalTemplate({\n      open:            this.open,\n      size:            this.size,\n      variant:         this.variant,\n      _animate:         this._animate,\n      dark:            this.dark,\n      heading:         this.heading,\n      subtitle:        this.subtitle,\n      iconTone:        this.iconTone,\n      footerInfo:      this.footerInfo,\n      onClose:         () => this._close('button'),\n      onBackdropClick: (e) => this._onBackdropClick(e),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-modal': LibModal;\n  }\n}\n\n"],"names":[],"mappings":"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"}