@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index69.js

@@ -1,8 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, state, query, customElement } from "lit/decorators.js";
-import "./index22.js";
-import { sidebarTemplate } from "./index322.js";
-import componentCss from "./index323.js";
+import { property, customElement } from "lit/decorators.js";
+import { bentoGridTemplate } from "./index235.js";
+import gridCss from "./index236.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,174 +13,34 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibSidebar = class extends LitElement {
+let LibBentoGrid = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.logoMark = "渋";
-    this.brandName = "shibui";
-    this.showSearch = false;
-    this.searchPlaceholder = "Buscar…";
-    this.links = [];
-    this.active = "";
-    this.userName = "";
-    this.userRole = "";
-    this.userAvatar = "";
-    this.userInitials = "";
-    this.showUserAction = false;
-    this.variant = "dark";
-    this.collapsed = false;
-    this._mobileOpen = false;
+    this.columns = 4;
+    this.gap = "md";
+    this.rowHeight = "150px";
   }
-  /* ── Lifecycle ── */
-  updated(changed) {
-    if (changed.has("active") || changed.has("links")) {
-      this._moveIndicator();
-    }
-  }
-  /* ── Render ── */
   render() {
-    return sidebarTemplate({
-      logoMark: this.logoMark,
-      brandName: this.brandName,
-      showSearch: this.showSearch,
-      searchPlaceholder: this.searchPlaceholder,
-      links: this.links,
-      active: this.active,
-      userName: this.userName,
-      userRole: this.userRole,
-      userAvatar: this.userAvatar,
-      userInitials: this.userInitials,
-      showUserAction: this.showUserAction,
-      variant: this.variant,
-      collapsed: this.collapsed,
-      mobileOpen: this._mobileOpen,
-      onLinkClick: this._handleLink.bind(this),
-      onUserAction: this._handleUserAction.bind(this),
-      onSearchInput: this._handleSearch.bind(this),
-      onOverlayClick: () => {
-        this._mobileOpen = false;
-      },
-      onToggleClick: () => {
-        this._mobileOpen = !this._mobileOpen;
-      }
-    });
-  }
-  /* ── Sliding indicator ── */
-  _moveIndicator() {
-    requestAnimationFrame(() => {
-      const nav = this._nav;
-      const ind = this._indicator;
-      if (!nav || !ind) return;
-      const btn = nav.querySelector(".sb-link.is-active");
-      if (!btn) {
-        ind.classList.remove("visible");
-        return;
-      }
-      const navTop = nav.getBoundingClientRect().top;
-      const btnRect = btn.getBoundingClientRect();
-      ind.style.top = `${btnRect.top - navTop + nav.scrollTop}px`;
-      ind.style.height = `${btnRect.height}px`;
-      ind.classList.add("visible");
-    });
-  }
-  /* ── Handlers ── */
-  _handleLink(id) {
-    const previous = this.active;
-    this.active = id;
-    this.dispatchEvent(new CustomEvent("ui-lib-navigate", {
-      detail: { id, previous },
-      bubbles: true,
-      composed: true
-    }));
-    if (this._mobileOpen) this._mobileOpen = false;
-  }
-  _handleUserAction() {
-    this.dispatchEvent(new CustomEvent("ui-lib-user-action", {
-      bubbles: true,
-      composed: true
-    }));
-  }
-  _handleSearch(query2) {
-    this.dispatchEvent(new CustomEvent("ui-lib-search", {
-      detail: { query: query2 },
-      bubbles: true,
-      composed: true
-    }));
-  }
-  /* ── Public API ── */
-  /** Alterna collapsed ↔ expanded. Llamar desde el botón hamburger de la topbar. */
-  toggle() {
-    this.collapsed = !this.collapsed;
-  }
-  /** Expande el sidebar */
-  expand() {
-    this.collapsed = false;
-  }
-  /** Colapsa el sidebar a icon rail */
-  collapse() {
-    this.collapsed = true;
-  }
-  /** Navega programáticamente */
-  navigateTo(id) {
-    this._handleLink(id);
+    return bentoGridTemplate(this);
   }
 };
-LibSidebar.styles = [
+LibBentoGrid.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(componentCss)}`
+  css`${unsafeCSS(gridCss)}`
 ];
 __decorateClass([
-  property({ type: String, attribute: "logo-mark" })
-], LibSidebar.prototype, "logoMark", 2);
-__decorateClass([
-  property({ type: String, attribute: "brand-name" })
-], LibSidebar.prototype, "brandName", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-search", reflect: true })
-], LibSidebar.prototype, "showSearch", 2);
-__decorateClass([
-  property({ type: String, attribute: "search-placeholder" })
-], LibSidebar.prototype, "searchPlaceholder", 2);
-__decorateClass([
-  property({ type: Array })
-], LibSidebar.prototype, "links", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibSidebar.prototype, "active", 2);
-__decorateClass([
-  property({ type: String, attribute: "user-name" })
-], LibSidebar.prototype, "userName", 2);
-__decorateClass([
-  property({ type: String, attribute: "user-role" })
-], LibSidebar.prototype, "userRole", 2);
-__decorateClass([
-  property({ type: String, attribute: "user-avatar" })
-], LibSidebar.prototype, "userAvatar", 2);
-__decorateClass([
-  property({ type: String, attribute: "user-initials" })
-], LibSidebar.prototype, "userInitials", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-user-action" })
-], LibSidebar.prototype, "showUserAction", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibSidebar.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSidebar.prototype, "collapsed", 2);
-__decorateClass([
-  state()
-], LibSidebar.prototype, "_mobileOpen", 2);
+  property({ type: Number })
+], LibBentoGrid.prototype, "columns", 2);
 __decorateClass([
-  query(".sb-indicator")
-], LibSidebar.prototype, "_indicator", 2);
+  property({ type: String })
+], LibBentoGrid.prototype, "gap", 2);
 __decorateClass([
-  query(".sb-nav")
-], LibSidebar.prototype, "_nav", 2);
-LibSidebar = __decorateClass([
-  customElement("lib-sidebar")
-], LibSidebar);
+  property({ type: String, attribute: "row-height" })
+], LibBentoGrid.prototype, "rowHeight", 2);
+LibBentoGrid = __decorateClass([
+  customElement("lib-bento-grid")
+], LibBentoGrid);
 export {
-  LibSidebar
+  LibBentoGrid
 };
 //# sourceMappingURL=index69.js.map

package/dist/index69.js.map

@@ -1 +1 @@
-{"version":3,"file":"index69.js","sources":["../src/components/organisms/sidebar/lib-sidebar.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport '../../atoms/icon/lib-icon.component';\nimport type { SidebarLink }     from '../../../types';\nimport { sidebarTemplate }      from './lib-sidebar.html';\nimport componentCss              from './lib-sidebar.css?inline';\nimport sharedTokens              from '../../../styles/shared/tokens.css?inline';\nimport { SidebarVariant } from './lib-sidebar.types';\n\nexport interface UiSidebarNavigateDetail {\n  id: string;\n  previous: string;\n}\n\n/**\n * lib-sidebar — Shibui UI · SG-65\n *\n * Estructura: Header(56px logo) · [Search] · Nav · User footer\n *\n * @prop logo-mark         — Carácter del logo mark (default '渋')\n * @prop brand-name        — Nombre de marca (default 'shibui')\n * @prop show-search       — Muestra la barra de búsqueda\n * @prop search-placeholder — Placeholder del input de búsqueda\n * @prop links             — Array de SidebarLink[]\n * @prop active            — ID del link activo\n * @prop user-name         — Nombre del usuario en el footer\n * @prop user-role         — Rol/plan del usuario\n * @prop user-avatar       — URL de imagen del avatar\n * @prop user-initials     — Iniciales de fallback\n * @prop show-user-action  — Muestra el botón de acción (logout icon)\n * @prop variant           — 'dark'(default) | 'light' | 'kintsugi' | 'glitch'\n * @prop collapsed         — Estado inicial colapsado\n *\n * @method toggle()     — Alterna collapsed/expanded (llamar desde topbar)\n * @method navigateTo() — Navega programáticamente a un id\n *\n * @fires ui-lib-navigate    — { id, previous }\n * @fires ui-lib-user-action — void (clic en botón de acción)\n * @fires ui-lib-search      — { query: string }\n */\n@customElement('lib-sidebar')\nexport class LibSidebar extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(componentCss)}`,\n  ];\n\n  /* ── Header ── */\n  @property({ type: String, attribute: 'logo-mark' })\n  logoMark = '渋';\n\n  @property({ type: String, attribute: 'brand-name' })\n  brandName = 'shibui';\n\n  /* ── Search ── */\n  @property({ type: Boolean, attribute: 'show-search', reflect: true })\n  showSearch = false;\n\n  @property({ type: String, attribute: 'search-placeholder' })\n  searchPlaceholder = 'Buscar…';\n\n  /* ── Nav ── */\n  @property({ type: Array })\n  links: SidebarLink[] = [];\n\n  @property({ type: String, reflect: true })\n  active = '';\n\n  /* ── User footer ── */\n  @property({ type: String, attribute: 'user-name' })\n  userName = '';\n\n  @property({ type: String, attribute: 'user-role' })\n  userRole = '';\n\n  @property({ type: String, attribute: 'user-avatar' })\n  userAvatar = '';\n\n  @property({ type: String, attribute: 'user-initials' })\n  userInitials = '';\n\n  @property({ type: Boolean, attribute: 'show-user-action' })\n  showUserAction = false;\n\n  /* ── Variant & behavior ── */\n  @property({ type: String, reflect: true })\n  variant: SidebarVariant = 'dark';\n\n  @property({ type: Boolean, reflect: true })\n  collapsed = false;\n\n  /* ── Internal state ── */\n  @state() private _mobileOpen = false;\n\n  /* ── Queries ── */\n  @query('.sb-indicator') declare private _indicator: HTMLElement;\n  @query('.sb-nav')       declare private _nav: HTMLElement;\n\n  /* ── Lifecycle ── */\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('active') || changed.has('links')) {\n      this._moveIndicator();\n    }\n  }\n\n  /* ── Render ── */\n  override render(): TemplateResult {\n    return sidebarTemplate({\n      logoMark:          this.logoMark,\n      brandName:         this.brandName,\n      showSearch:        this.showSearch,\n      searchPlaceholder: this.searchPlaceholder,\n      links:             this.links,\n      active:            this.active,\n      userName:          this.userName,\n      userRole:          this.userRole,\n      userAvatar:        this.userAvatar,\n      userInitials:      this.userInitials,\n      showUserAction:    this.showUserAction,\n      variant:           this.variant,\n      collapsed:         this.collapsed,\n      mobileOpen:        this._mobileOpen,\n      onLinkClick:       this._handleLink.bind(this),\n      onUserAction:      this._handleUserAction.bind(this),\n      onSearchInput:     this._handleSearch.bind(this),\n      onOverlayClick:    () => { this._mobileOpen = false; },\n      onToggleClick:     () => { this._mobileOpen = !this._mobileOpen; },\n    });\n  }\n\n  /* ── Sliding indicator ── */\n  private _moveIndicator(): void {\n    requestAnimationFrame(() => {\n      const nav = this._nav;\n      const ind = this._indicator;\n      if (!nav || !ind) return;\n\n      const btn = nav.querySelector<HTMLElement>('.sb-link.is-active');\n      if (!btn) { ind.classList.remove('visible'); return; }\n\n      const navTop  = nav.getBoundingClientRect().top;\n      const btnRect = btn.getBoundingClientRect();\n\n      ind.style.top    = `${btnRect.top - navTop + nav.scrollTop}px`;\n      ind.style.height = `${btnRect.height}px`;\n      ind.classList.add('visible');\n    });\n  }\n\n  /* ── Handlers ── */\n  private _handleLink(id: string): void {\n    const previous = this.active;\n    this.active = id;\n    this.dispatchEvent(new CustomEvent<UiSidebarNavigateDetail>('ui-lib-navigate', {\n      detail: { id, previous },\n      bubbles: true, composed: true,\n    }));\n    if (this._mobileOpen) this._mobileOpen = false;\n  }\n\n  private _handleUserAction(): void {\n    this.dispatchEvent(new CustomEvent('ui-lib-user-action', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleSearch(query: string): void {\n    this.dispatchEvent(new CustomEvent('ui-lib-search', {\n      detail: { query },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  /* ── Public API ── */\n\n  /** Alterna collapsed ↔ expanded. Llamar desde el botón hamburger de la topbar. */\n  toggle(): void { this.collapsed = !this.collapsed; }\n\n  /** Expande el sidebar */\n  expand(): void { this.collapsed = false; }\n\n  /** Colapsa el sidebar a icon rail */\n  collapse(): void { this.collapsed = true; }\n\n  /** Navega programáticamente */\n  navigateTo(id: string): void { this._handleLink(id); }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-sidebar': LibSidebar;\n  }\n}"],"names":["query"],"mappings":";;;;;;;;;;;;;;;;AAyCO,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,WAAW;AAGX,SAAA,YAAY;AAIZ,SAAA,aAAa;AAGb,SAAA,oBAAoB;AAIpB,SAAA,QAAuB,CAAA;AAGvB,SAAA,SAAS;AAIT,SAAA,WAAW;AAGX,SAAA,WAAW;AAGX,SAAA,aAAa;AAGb,SAAA,eAAe;AAGf,SAAA,iBAAiB;AAIjB,SAAA,UAA0B;AAG1B,SAAA,YAAY;AAGH,SAAQ,cAAc;AAAA,EAAA;AAAA;AAAA,EAOtB,QAAQ,SAAqC;AACpD,QAAI,QAAQ,IAAI,QAAQ,KAAK,QAAQ,IAAI,OAAO,GAAG;AACjD,WAAK,eAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA,EAGS,SAAyB;AAChC,WAAO,gBAAgB;AAAA,MACrB,UAAmB,KAAK;AAAA,MACxB,WAAmB,KAAK;AAAA,MACxB,YAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,MACxB,OAAmB,KAAK;AAAA,MACxB,QAAmB,KAAK;AAAA,MACxB,UAAmB,KAAK;AAAA,MACxB,UAAmB,KAAK;AAAA,MACxB,YAAmB,KAAK;AAAA,MACxB,cAAmB,KAAK;AAAA,MACxB,gBAAmB,KAAK;AAAA,MACxB,SAAmB,KAAK;AAAA,MACxB,WAAmB,KAAK;AAAA,MACxB,YAAmB,KAAK;AAAA,MACxB,aAAmB,KAAK,YAAY,KAAK,IAAI;AAAA,MAC7C,cAAmB,KAAK,kBAAkB,KAAK,IAAI;AAAA,MACnD,eAAmB,KAAK,cAAc,KAAK,IAAI;AAAA,MAC/C,gBAAmB,MAAM;AAAE,aAAK,cAAc;AAAA,MAAO;AAAA,MACrD,eAAmB,MAAM;AAAE,aAAK,cAAc,CAAC,KAAK;AAAA,MAAa;AAAA,IAAA,CAClE;AAAA,EACH;AAAA;AAAA,EAGQ,iBAAuB;AAC7B,0BAAsB,MAAM;AAC1B,YAAM,MAAM,KAAK;AACjB,YAAM,MAAM,KAAK;AACjB,UAAI,CAAC,OAAO,CAAC,IAAK;AAElB,YAAM,MAAM,IAAI,cAA2B,oBAAoB;AAC/D,UAAI,CAAC,KAAK;AAAE,YAAI,UAAU,OAAO,SAAS;AAAG;AAAA,MAAQ;AAErD,YAAM,SAAU,IAAI,sBAAA,EAAwB;AAC5C,YAAM,UAAU,IAAI,sBAAA;AAEpB,UAAI,MAAM,MAAS,GAAG,QAAQ,MAAM,SAAS,IAAI,SAAS;AAC1D,UAAI,MAAM,SAAS,GAAG,QAAQ,MAAM;AACpC,UAAI,UAAU,IAAI,SAAS;AAAA,IAC7B,CAAC;AAAA,EACH;AAAA;AAAA,EAGQ,YAAY,IAAkB;AACpC,UAAM,WAAW,KAAK;AACtB,SAAK,SAAS;AACd,SAAK,cAAc,IAAI,YAAqC,mBAAmB;AAAA,MAC7E,QAAQ,EAAE,IAAI,SAAA;AAAA,MACd,SAAS;AAAA,MAAM,UAAU;AAAA,IAAA,CAC1B,CAAC;AACF,QAAI,KAAK,YAAa,MAAK,cAAc;AAAA,EAC3C;AAAA,EAEQ,oBAA0B;AAChC,SAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,MACvD,SAAS;AAAA,MAAM,UAAU;AAAA,IAAA,CAC1B,CAAC;AAAA,EACJ;AAAA,EAEQ,cAAcA,QAAqB;AACzC,SAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,QAAQ,EAAE,OAAAA,OAAAA;AAAAA,MACV,SAAS;AAAA,MAAM,UAAU;AAAA,IAAA,CAC1B,CAAC;AAAA,EACJ;AAAA;AAAA;AAAA,EAKA,SAAe;AAAE,SAAK,YAAY,CAAC,KAAK;AAAA,EAAW;AAAA;AAAA,EAGnD,SAAe;AAAE,SAAK,YAAY;AAAA,EAAO;AAAA;AAAA,EAGzC,WAAiB;AAAE,SAAK,YAAY;AAAA,EAAM;AAAA;AAAA,EAG1C,WAAW,IAAkB;AAAE,SAAK,YAAY,EAAE;AAAA,EAAG;AACvD;AAjJa,WACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAPvC,WAQX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAVxC,WAWX,WAAA,aAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,eAAe,SAAS,MAAM;AAAA,GAdzD,WAeX,WAAA,cAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,sBAAsB;AAAA,GAjBhD,WAkBX,WAAA,qBAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GArBd,WAsBX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAxB9B,WAyBX,WAAA,UAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA5BvC,WA6BX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA/BvC,WAgCX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GAlCzC,WAmCX,WAAA,cAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GArC3C,WAsCX,WAAA,gBAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,oBAAoB;AAAA,GAxC/C,WAyCX,WAAA,kBAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA5C9B,WA6CX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA/C/B,WAgDX,WAAA,aAAA,CAAA;AAGiB,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAnDI,WAmDM,WAAA,eAAA,CAAA;AAGuB,gBAAA;AAAA,EAAvC,MAAM,eAAe;AAAA,GAtDX,WAsD6B,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAAvC,MAAM,SAAS;AAAA,GAvDL,WAuD6B,WAAA,QAAA,CAAA;AAvD7B,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}
+{"version":3,"file":"index69.js","sources":["../src/components/organisms/bento-grid/lib-bento-grid.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { bentoGridTemplate } from './lib-bento-grid.html';\nimport gridCss from './lib-bento-grid.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { BentoGapSize } from './lib-bento-grid.types';\n\n/**\n * lib-bento-grid — Contenedor de rejilla tipo bento\n *\n * @prop columns    — Número de columnas (default 4)\n * @prop gap        — Espacio entre celdas: 'xs'|'sm'|'md'(default)|'lg'|'xl'\n * @prop row-height — Altura base de cada fila (default '150px')\n *\n * @slot — lib-bento-item elements\n */\n@customElement('lib-bento-grid')\nexport class LibBentoGrid extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(gridCss)}`,\n  ];\n\n  @property({ type: Number })\n  columns = 4;\n\n  @property({ type: String })\n  gap: BentoGapSize = 'md';\n\n  @property({ type: String, attribute: 'row-height' })\n  rowHeight = '150px';\n\n  protected override render(): TemplateResult {\n    return bentoGridTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-bento-grid': LibBentoGrid;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiBO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,UAAU;AAGV,SAAA,MAAoB;AAGpB,SAAA,YAAY;AAAA,EAAA;AAAA,EAEO,SAAyB;AAC1C,WAAO,kBAAkB,IAAI;AAAA,EAC/B;AACF;AAlBa,aACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,OAAO,CAAC;AAC1B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,aAOX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATf,aAUX,WAAA,OAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAZxC,aAaX,WAAA,aAAA,CAAA;AAbW,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

package/dist/index7.js

@@ -1,8 +1,9 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { skeletonTemplate } from "./index201.js";
-import skeletonCss from "./index202.js";
+import { property, query, customElement } from "lit/decorators.js";
+import backgroundCss from "./index272.js";
 import sharedTokens from "./index196.js";
+import { backgroundTemplate } from "./index273.js";
+import { BG_CANVAS_VARIANTS } from "./index274.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,48 +14,409 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibSkeleton = class extends LitElement {
+let LibBackground = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.shape = "rect";
-    this.animation = "shimmer";
-    this.surface = "light";
-    this.width = "100%";
-    this.height = "";
+    this.variant = "washi";
+    this.paused = false;
+    this._raf = 0;
+    this._ro = null;
   }
+  /* ── Ciclo de vida ── */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopCanvas();
+  }
+  updated(changed) {
+    if (changed.has("variant")) {
+      this._stopCanvas();
+      if (BG_CANVAS_VARIANTS.has(this.variant)) {
+        requestAnimationFrame(() => this._startCanvas());
+      }
+    }
+  }
+  /* ── Canvas lifecycle ── */
+  _stopCanvas() {
+    if (this._raf) {
+      cancelAnimationFrame(this._raf);
+      this._raf = 0;
+    }
+    if (this._ro) {
+      this._ro.disconnect();
+      this._ro = null;
+    }
+  }
+  _startCanvas() {
+    const canvas = this._canvas;
+    if (!canvas) return;
+    switch (this.variant) {
+      case "particles":
+        this._initParticles(canvas);
+        break;
+      case "rain":
+        this._initRain(canvas);
+        break;
+      case "wave-mesh":
+        this._initWaveMesh(canvas);
+        break;
+      case "constellation":
+        this._initConstellation(canvas);
+        break;
+      case "fireflies":
+        this._initFireflies(canvas);
+        break;
+      case "ink-wash":
+        this._initInkWash(canvas);
+        break;
+    }
+  }
+  /* ── Canvas: Particle Field ── */
+  _initParticles(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0;
+    const COUNT = 55;
+    const COLORS = ["rgba(217,114,52,", "rgba(78,148,130,", "rgba(250,247,244,"];
+    let pts = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      pts = Array.from({ length: COUNT }, () => ({
+        x: Math.random() * W,
+        y: Math.random() * H,
+        r: Math.random() * 1.5 + 0.3,
+        vx: (Math.random() - 0.5) * 0.25,
+        vy: (Math.random() - 0.5) * 0.25,
+        a: Math.random() * 0.4 + 0.15,
+        // ✅ Fix: COLORS es string[] → el acceso ya no devuelve undefined
+        c: COLORS[Math.floor(Math.random() * COLORS.length)] ?? "rgba(250,247,244,"
+      }));
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, W, H);
+      for (let i = 0; i < pts.length; i++) {
+        for (let j = i + 1; j < pts.length; j++) {
+          const pi = pts[i];
+          const pj = pts[j];
+          const dx = pi.x - pj.x;
+          const dy = pi.y - pj.y;
+          const d = Math.sqrt(dx * dx + dy * dy);
+          if (d < 90) {
+            ctx.beginPath();
+            ctx.moveTo(pi.x, pi.y);
+            ctx.lineTo(pj.x, pj.y);
+            ctx.strokeStyle = `rgba(250,247,244,${0.04 * (1 - d / 90)})`;
+            ctx.lineWidth = 0.5;
+            ctx.stroke();
+          }
+        }
+      }
+      pts.forEach((p) => {
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+        ctx.fillStyle = `${p.c}${p.a})`;
+        ctx.fill();
+        p.x += p.vx;
+        p.y += p.vy;
+        if (p.x < 0 || p.x > W) p.vx *= -1;
+        if (p.y < 0 || p.y > H) p.vy *= -1;
+      });
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  _initFireflies(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0;
+    const COUNT = 32;
+    const COLORS = [
+      "rgba(250,247,244,",
+      "rgba(250,247,244,",
+      "rgba(217,114,52,",
+      "rgba(78,148,130,"
+    ];
+    let flies = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      flies = Array.from({ length: COUNT }, () => ({
+        x: Math.random() * W,
+        y: Math.random() * H,
+        r: Math.random() * 2 + 0.8,
+        a: Math.random(),
+        da: (Math.random() * 8e-3 + 3e-3) * (Math.random() > 0.5 ? 1 : -1),
+        dx: (Math.random() - 0.5) * 0.18,
+        dy: -(Math.random() * 0.25 + 0.08),
+        phase: Math.random() * Math.PI * 2,
+        col: COLORS[Math.floor(Math.random() * COLORS.length)] ?? "rgba(250,247,244,"
+      }));
+    };
+    const draw = () => {
+      ctx.fillStyle = "rgba(8,6,4,0.14)";
+      ctx.fillRect(0, 0, W, H);
+      flies.forEach((f) => {
+        f.phase += 0.018;
+        f.a += f.da;
+        if (f.a > 1 || f.a < 0) {
+          f.da *= -1;
+          f.a = Math.max(0, Math.min(1, f.a));
+        }
+        f.x += f.dx + Math.sin(f.phase) * 0.28;
+        f.y += f.dy;
+        if (f.y < -10) {
+          f.y = H + 10;
+          f.x = Math.random() * W;
+        }
+        if (f.x < -10) f.x = W + 10;
+        if (f.x > W + 10) f.x = -10;
+        const grd = ctx.createRadialGradient(f.x, f.y, 0, f.x, f.y, f.r * 5);
+        grd.addColorStop(0, `${f.col}${f.a * 0.85})`);
+        grd.addColorStop(1, `${f.col}0)`);
+        ctx.beginPath();
+        ctx.arc(f.x, f.y, f.r * 5, 0, Math.PI * 2);
+        ctx.fillStyle = grd;
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
+        ctx.fillStyle = `${f.col}${f.a})`;
+        ctx.fill();
+      });
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  _initInkWash(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0, t = 0;
+    let blobs = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      const base = Math.min(W, H);
+      blobs = [
+        { cx: 0.28, cy: 0.42, r: base * 0.24, speed: 1, offset: 0, color: "rgba(175,150,120,0.07)" },
+        { cx: 0.68, cy: 0.58, r: base * 0.2, speed: 1.3, offset: 1.2, color: "rgba(155,135,108,0.06)" },
+        { cx: 0.5, cy: 0.28, r: base * 0.17, speed: 0.7, offset: 2.5, color: "rgba(184,90,30,0.04)" },
+        { cx: 0.18, cy: 0.72, r: base * 0.15, speed: 1.1, offset: 3.8, color: "rgba(78,148,130,0.04)" },
+        { cx: 0.82, cy: 0.32, r: base * 0.13, speed: 0.85, offset: 5, color: "rgba(175,150,120,0.05)" }
+      ];
+    };
+    const drawBlob = (b) => {
+      const pts = 44;
+      const phase = t * b.speed + b.offset;
+      ctx.beginPath();
+      for (let i = 0; i <= pts; i++) {
+        const angle = i / pts * Math.PI * 2;
+        const noise = Math.sin(angle * 3 + phase) * b.r * 0.14 + Math.cos(angle * 2 - phase * 0.8) * b.r * 0.09 + Math.sin(angle * 5 + phase * 1.4) * b.r * 0.05;
+        const x = b.cx * W + (b.r + noise) * Math.cos(angle);
+        const y = b.cy * H + (b.r + noise) * Math.sin(angle);
+        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+      }
+      ctx.closePath();
+      ctx.fillStyle = b.color;
+      ctx.fill();
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, W, H);
+      ctx.fillStyle = "#FAF7F4";
+      ctx.fillRect(0, 0, W, H);
+      blobs.forEach(drawBlob);
+      t += 28e-4;
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  /* ── Canvas: Rain Lines ── */
+  _initRain(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0;
+    const COUNT = 40;
+    let drops = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      drops = Array.from({ length: COUNT }, () => ({
+        x: Math.random() * W,
+        y: Math.random() * H - H,
+        len: Math.random() * 22 + 8,
+        v: Math.random() * 1.8 + 0.8,
+        a: Math.random() * 0.2 + 0.04,
+        col: Math.random() > 0.85 ? "rgba(217,114,52," : "rgba(250,247,244,"
+      }));
+    };
+    const draw = () => {
+      ctx.fillStyle = "rgba(14,10,7,0.18)";
+      ctx.fillRect(0, 0, W, H);
+      drops.forEach((d) => {
+        ctx.beginPath();
+        ctx.moveTo(d.x, d.y);
+        ctx.lineTo(d.x - d.len * 0.1, d.y + d.len);
+        const g = ctx.createLinearGradient(d.x, d.y, d.x, d.y + d.len);
+        g.addColorStop(0, `${d.col}0)`);
+        g.addColorStop(0.5, `${d.col}${d.a})`);
+        g.addColorStop(1, `${d.col}0)`);
+        ctx.strokeStyle = g;
+        ctx.lineWidth = 0.8;
+        ctx.stroke();
+        d.y += d.v;
+        if (d.y > H + d.len) {
+          d.y = -d.len;
+          d.x = Math.random() * W;
+        }
+      });
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  /* ── Canvas: Wave Mesh ── */
+  _initWaveMesh(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0, t = 0;
+    const COLS = 16, ROWS = 10;
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, W, H);
+      ctx.fillStyle = "#FAF7F4";
+      ctx.fillRect(0, 0, W, H);
+      const cw = W / (COLS - 1);
+      const ch = H / (ROWS - 1);
+      for (let r = 0; r < ROWS; r++) {
+        ctx.beginPath();
+        for (let c = 0; c < COLS; c++) {
+          const wave = Math.sin((c / COLS + t) * Math.PI * 2) * 12 + Math.cos((r / ROWS + t * 0.7) * Math.PI * 2) * 8;
+          const x = c * cw;
+          const y = r * ch + wave;
+          c === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+        }
+        ctx.strokeStyle = `rgba(160,140,118,${0.08 + Math.sin(r / ROWS * Math.PI) * 0.06})`;
+        ctx.lineWidth = 0.8;
+        ctx.stroke();
+      }
+      for (let c = 0; c < COLS; c++) {
+        ctx.beginPath();
+        for (let r = 0; r < ROWS; r++) {
+          const wave = Math.sin((c / COLS + t) * Math.PI * 2) * 12 + Math.cos((r / ROWS + t * 0.7) * Math.PI * 2) * 8;
+          const x = c * cw;
+          const y = r * ch + wave;
+          r === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+        }
+        ctx.strokeStyle = `rgba(160,140,118,${0.06 + Math.sin(c / COLS * Math.PI) * 0.04})`;
+        ctx.lineWidth = 0.8;
+        ctx.stroke();
+      }
+      t += 3e-3;
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  /* ── Canvas: Constellation ── */
+  _initConstellation(canvas) {
+    const ctx = canvas.getContext("2d");
+    const host = this.renderRoot.host;
+    let W = 0, H = 0;
+    const COUNT = 70;
+    let stars = [];
+    const resize = () => {
+      W = canvas.width = host.clientWidth;
+      H = canvas.height = host.clientHeight;
+      stars = Array.from({ length: COUNT }, () => ({
+        x: Math.random() * W,
+        y: Math.random() * H,
+        r: Math.random() * 1.2 + 0.2,
+        a: Math.random() * 0.5 + 0.1,
+        pa: Math.random() * Math.PI * 2,
+        ps: Math.random() * 8e-3 + 2e-3,
+        col: Math.random() > 0.9 ? [217, 114, 52] : Math.random() > 0.85 ? [78, 148, 130] : [250, 247, 244]
+      }));
+    };
+    const draw = () => {
+      ctx.fillStyle = "rgba(10,8,6,0.22)";
+      ctx.fillRect(0, 0, W, H);
+      for (let i = 0; i < stars.length; i++) {
+        for (let j = i + 1; j < stars.length; j++) {
+          const si = stars[i];
+          const sj = stars[j];
+          const dx = si.x - sj.x;
+          const dy = si.y - sj.y;
+          const d = Math.sqrt(dx * dx + dy * dy);
+          if (d < 110) {
+            ctx.beginPath();
+            ctx.moveTo(si.x, si.y);
+            ctx.lineTo(sj.x, sj.y);
+            ctx.strokeStyle = `rgba(250,247,244,${(1 - d / 110) * 0.07})`;
+            ctx.lineWidth = 0.6;
+            ctx.stroke();
+          }
+        }
+      }
+      stars.forEach((s) => {
+        s.pa += s.ps;
+        const pulse = Math.sin(s.pa) * 0.3 + 0.7;
+        ctx.beginPath();
+        ctx.arc(s.x, s.y, s.r * pulse, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${s.col.join(",")},${s.a * pulse})`;
+        ctx.fill();
+        if (s.a > 0.4) {
+          ctx.beginPath();
+          ctx.arc(s.x, s.y, s.r * 3 * pulse, 0, Math.PI * 2);
+          ctx.fillStyle = `rgba(${s.col.join(",")},${s.a * 0.06 * pulse})`;
+          ctx.fill();
+        }
+      });
+      this._raf = requestAnimationFrame(draw);
+    };
+    this._ro = new ResizeObserver(resize);
+    this._ro.observe(host);
+    resize();
+    draw();
+  }
+  /* ── Render ── */
   render() {
-    return skeletonTemplate({
-      shape: this.shape,
-      animation: this.animation,
-      surface: this.surface,
-      width: this.width,
-      height: this.height
+    return backgroundTemplate({
+      variant: this.variant,
+      isCanvas: BG_CANVAS_VARIANTS.has(this.variant)
     });
   }
 };
-LibSkeleton.styles = [
+LibBackground.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(skeletonCss)}`
+  css`${unsafeCSS(backgroundCss)}`
 ];
 __decorateClass([
   property({ type: String, reflect: true })
-], LibSkeleton.prototype, "shape", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibSkeleton.prototype, "animation", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibSkeleton.prototype, "surface", 2);
+], LibBackground.prototype, "variant", 2);
 __decorateClass([
-  property({ type: String })
-], LibSkeleton.prototype, "width", 2);
+  property({ type: Boolean, reflect: true })
+], LibBackground.prototype, "paused", 2);
 __decorateClass([
-  property({ type: String })
-], LibSkeleton.prototype, "height", 2);
-LibSkeleton = __decorateClass([
-  customElement("lib-skeleton")
-], LibSkeleton);
+  query(".bg-canvas")
+], LibBackground.prototype, "_canvas", 2);
+LibBackground = __decorateClass([
+  customElement("lib-background")
+], LibBackground);
 export {
-  LibSkeleton
+  LibBackground
 };
 //# sourceMappingURL=index7.js.map