@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index60.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { paginationTemplate } from "./index305.js";
-import paginationCss from "./index306.js";
 import sharedTokens from "./index196.js";
+import modalCss from "./index219.js";
+import { modalTemplate } from "./index220.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,99 +13,135 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibPagination = class extends LitElement {
+let LibModal = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.totalItems = 0;
-    this.itemsPerPage = 10;
-    this.currentPage = 1;
-    this.siblings = 1;
+    this.open = false;
     this.size = "md";
     this.variant = "default";
+    this._animate = "scale";
     this.dark = false;
-    this.showInfo = false;
-    this.ariaLabel = "Paginación";
-    this._onKeyDown = (e) => {
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        this._changePage(this.currentPage - 1);
-      }
-      if (e.key === "ArrowRight") {
-        e.preventDefault();
-        this._changePage(this.currentPage + 1);
-      }
-      if (e.key === "Home") {
-        e.preventDefault();
-        this._changePage(1);
-      }
-      if (e.key === "End") {
-        e.preventDefault();
-        this._changePage(this.totalPages);
+    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");
       }
     };
   }
-  /* ── Computed ── */
-  get totalPages() {
-    return Math.max(1, Math.ceil(this.totalItems / this.itemsPerPage));
-  }
-  /* ── Cambio de página ── */
-  _changePage(page) {
-    if (page < 1 || page > this.totalPages || page === this.currentPage) return;
-    const prev = this.currentPage;
-    this.currentPage = page;
-    this.dispatchEvent(new CustomEvent("ui-lib-page-change", {
-      detail: { page: this.currentPage, prev },
-      bubbles: true,
-      composed: true
-    }));
-  }
+  /* ── Lifecycle ──────────────────────────────────────────── */
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("keydown", this._onKeyDown);
+    document.addEventListener("keydown", this._onKeydown, true);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("keydown", this._onKeyDown);
+    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 paginationTemplate(this);
+    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)
+    });
   }
 };
-LibPagination.styles = [
+LibModal.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(paginationCss)}`
+  css`${unsafeCSS(modalCss)}`
 ];
 __decorateClass([
-  property({ type: Number, attribute: "total-items" })
-], LibPagination.prototype, "totalItems", 2);
-__decorateClass([
-  property({ type: Number, attribute: "items-per-page" })
-], LibPagination.prototype, "itemsPerPage", 2);
-__decorateClass([
-  property({ type: Number, attribute: "current-page", reflect: true })
-], LibPagination.prototype, "currentPage", 2);
+  property({ type: Boolean, reflect: true })
+], LibModal.prototype, "open", 2);
 __decorateClass([
-  property({ type: Number })
-], LibPagination.prototype, "siblings", 2);
+  property({ type: String, reflect: true })
+], LibModal.prototype, "size", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibPagination.prototype, "size", 2);
+], LibModal.prototype, "variant", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibPagination.prototype, "variant", 2);
+], LibModal.prototype, "_animate", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibPagination.prototype, "dark", 2);
+], 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: Boolean, attribute: "show-info" })
-], LibPagination.prototype, "showInfo", 2);
+  property({ type: String, attribute: "footer-info" })
+], LibModal.prototype, "footerInfo", 2);
 __decorateClass([
-  property({ type: String, attribute: "aria-label" })
-], LibPagination.prototype, "ariaLabel", 2);
-LibPagination = __decorateClass([
-  customElement("lib-pagination")
-], LibPagination);
+  property({ type: Boolean, attribute: "no-backdrop-close" })
+], LibModal.prototype, "noBackdropClose", 2);
+LibModal = __decorateClass([
+  customElement("lib-modal")
+], LibModal);
 export {
-  LibPagination
+  LibModal
 };
 //# sourceMappingURL=index60.js.map

package/dist/index60.js.map

@@ -1 +1 @@
-{"version":3,"file":"index60.js","sources":["../src/components/molecules/pagination/lib-pagination.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { paginationTemplate } from './lib-pagination.html';\nimport paginationCss from './lib-pagination.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { PaginationSize, PaginationVariant } from './lib-pagination.types';\n\n/**\n * lib-pagination — Paginación Shibui\n *\n * @prop total-items    — Total de registros\n * @prop items-per-page — Registros por página (default 10)\n * @prop current-page   — Página activa (1-indexed, default 1)\n * @prop siblings       — Páginas visibles a cada lado de la actual (default 1)\n * @prop size           — 'sm' | 'md' | 'lg' (default 'md')\n * @prop variant        — 'default' | 'outline' | 'ghost'\n * @prop dark           — Tema oscuro\n * @prop show-info      — Muestra \"X–Y de Z resultados\"\n * @prop aria-label     — Etiqueta accesible del nav (default 'Paginación')\n *\n * @fires ui-lib-page-change — { detail: { page: number, prev: number } }\n *\n * @readonly totalPages — Número total de páginas calculado\n */\n@customElement('lib-pagination')\nexport class LibPagination extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(paginationCss)}`,\n  ];\n\n  @property({ type: Number, attribute: 'total-items' })\n  totalItems = 0;\n\n  @property({ type: Number, attribute: 'items-per-page' })\n  itemsPerPage = 10;\n\n  @property({ type: Number, attribute: 'current-page', reflect: true })\n  currentPage = 1;\n\n  /** Páginas visibles a cada lado de la página actual antes de los ellipsis */\n  @property({ type: Number })\n  siblings = 1;\n\n  @property({ type: String, reflect: true })\n  size: PaginationSize = 'md';\n\n  @property({ type: String, reflect: true })\n  variant: PaginationVariant = 'default';\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, attribute: 'show-info' })\n  showInfo = false;\n\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel = 'Paginación';\n\n  /* ── Computed ── */\n  get totalPages(): number {\n    return Math.max(1, Math.ceil(this.totalItems / this.itemsPerPage));\n  }\n\n  /* ── Cambio de página ── */\n  _changePage(page: number): void {\n    if (page < 1 || page > this.totalPages || page === this.currentPage) return;\n    const prev = this.currentPage;\n    this.currentPage = page;\n    this.dispatchEvent(new CustomEvent('ui-lib-page-change', {\n      detail: { page: this.currentPage, prev },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ── Teclado en el nav ── */\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowLeft')  { e.preventDefault(); this._changePage(this.currentPage - 1); }\n    if (e.key === 'ArrowRight') { e.preventDefault(); this._changePage(this.currentPage + 1); }\n    if (e.key === 'Home')       { e.preventDefault(); this._changePage(1); }\n    if (e.key === 'End')        { e.preventDefault(); this._changePage(this.totalPages); }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  protected override render(): TemplateResult {\n    return paginationTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-pagination': LibPagination;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index60.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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"}

package/dist/index61.js

@@ -1,7 +1,7 @@
-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 { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { paginationTemplate } from "./index221.js";
+import paginationCss from "./index222.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,205 +13,99 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibTabs = class extends LitElement {
+let LibPagination = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.variant = "underline";
-    this.color = "";
-    this.size = "";
+    this.totalItems = 0;
+    this.itemsPerPage = 10;
+    this.currentPage = 1;
+    this.siblings = 1;
+    this.size = "md";
+    this.variant = "default";
     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;
+    this.showInfo = false;
+    this.ariaLabel = "Paginación";
+    this._onKeyDown = (e) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        this._changePage(this.currentPage - 1);
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        this._changePage(this.currentPage + 1);
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        this._changePage(1);
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        this._changePage(this.totalPages);
+      }
+    };
   }
-  /* ── Lifecycle ── */
-  firstUpdated() {
-    this._setupResizeObserver();
-    requestAnimationFrame(() => this._positionInk());
+  /* ── Computed ── */
+  get totalPages() {
+    return Math.max(1, Math.ceil(this.totalItems / this.itemsPerPage));
   }
-  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());
-    }
+  /* ── Cambio de página ── */
+  _changePage(page) {
+    if (page < 1 || page > this.totalPages || page === this.currentPage) return;
+    const prev = this.currentPage;
+    this.currentPage = page;
+    this.dispatchEvent(new CustomEvent("ui-lib-page-change", {
+      detail: { page: this.currentPage, prev },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onKeyDown);
   }
   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);
+    this.removeEventListener("keydown", this._onKeyDown);
   }
-  /* ── 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);
+    return paginationTemplate(this);
   }
 };
-LibTabs.styles = [
-  css`
-      ${unsafeCSS(sharedTokens)}
-    `,
-  css`
-      ${unsafeCSS(tabsCss)}
-    `
+LibPagination.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(paginationCss)}`
 ];
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibTabs.prototype, "variant", 2);
+  property({ type: Number, attribute: "total-items" })
+], LibPagination.prototype, "totalItems", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibTabs.prototype, "color", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibTabs.prototype, "size", 2);
+  property({ type: Number, attribute: "items-per-page" })
+], LibPagination.prototype, "itemsPerPage", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibTabs.prototype, "dark", 2);
+  property({ type: Number, attribute: "current-page", reflect: true })
+], LibPagination.prototype, "currentPage", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibTabs.prototype, "kintsugi", 2);
+  property({ type: Number })
+], LibPagination.prototype, "siblings", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibTabs.prototype, "glitch", 2);
+  property({ type: String, reflect: true })
+], LibPagination.prototype, "size", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "scroll" })
-], LibTabs.prototype, "scrollable", 2);
+  property({ type: String, reflect: true })
+], LibPagination.prototype, "variant", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibTabs.prototype, "full", 2);
+], LibPagination.prototype, "dark", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibTabs.prototype, "active", 2);
+  property({ type: Boolean, attribute: "show-info" })
+], LibPagination.prototype, "showInfo", 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);
+], LibPagination.prototype, "ariaLabel", 2);
+LibPagination = __decorateClass([
+  customElement("lib-pagination")
+], LibPagination);
 export {
-  LibTabs
+  LibPagination
 };
 //# sourceMappingURL=index61.js.map

package/dist/index61.js.map

@@ -1 +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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"}
+{"version":3,"file":"index61.js","sources":["../src/components/molecules/pagination/lib-pagination.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { paginationTemplate } from './lib-pagination.html';\nimport paginationCss from './lib-pagination.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { PaginationSize, PaginationVariant } from './lib-pagination.types';\n\n/**\n * lib-pagination — Paginación Shibui\n *\n * @prop total-items    — Total de registros\n * @prop items-per-page — Registros por página (default 10)\n * @prop current-page   — Página activa (1-indexed, default 1)\n * @prop siblings       — Páginas visibles a cada lado de la actual (default 1)\n * @prop size           — 'sm' | 'md' | 'lg' (default 'md')\n * @prop variant        — 'default' | 'outline' | 'ghost'\n * @prop dark           — Tema oscuro\n * @prop show-info      — Muestra \"X–Y de Z resultados\"\n * @prop aria-label     — Etiqueta accesible del nav (default 'Paginación')\n *\n * @fires ui-lib-page-change — { detail: { page: number, prev: number } }\n *\n * @readonly totalPages — Número total de páginas calculado\n */\n@customElement('lib-pagination')\nexport class LibPagination extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(paginationCss)}`,\n  ];\n\n  @property({ type: Number, attribute: 'total-items' })\n  totalItems = 0;\n\n  @property({ type: Number, attribute: 'items-per-page' })\n  itemsPerPage = 10;\n\n  @property({ type: Number, attribute: 'current-page', reflect: true })\n  currentPage = 1;\n\n  /** Páginas visibles a cada lado de la página actual antes de los ellipsis */\n  @property({ type: Number })\n  siblings = 1;\n\n  @property({ type: String, reflect: true })\n  size: PaginationSize = 'md';\n\n  @property({ type: String, reflect: true })\n  variant: PaginationVariant = 'default';\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, attribute: 'show-info' })\n  showInfo = false;\n\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel = 'Paginación';\n\n  /* ── Computed ── */\n  get totalPages(): number {\n    return Math.max(1, Math.ceil(this.totalItems / this.itemsPerPage));\n  }\n\n  /* ── Cambio de página ── */\n  _changePage(page: number): void {\n    if (page < 1 || page > this.totalPages || page === this.currentPage) return;\n    const prev = this.currentPage;\n    this.currentPage = page;\n    this.dispatchEvent(new CustomEvent('ui-lib-page-change', {\n      detail: { page: this.currentPage, prev },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ── Teclado en el nav ── */\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowLeft')  { e.preventDefault(); this._changePage(this.currentPage - 1); }\n    if (e.key === 'ArrowRight') { e.preventDefault(); this._changePage(this.currentPage + 1); }\n    if (e.key === 'Home')       { e.preventDefault(); this._changePage(1); }\n    if (e.key === 'End')        { e.preventDefault(); this._changePage(this.totalPages); }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  protected override render(): TemplateResult {\n    return paginationTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-pagination': LibPagination;\n  }\n}"],"names":[],"mappings":"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"}