@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index78.js

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

package/dist/index78.js.map

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

package/dist/index79.js

@@ -1,7 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
-import { horizontalScrollTemplate } from "./index340.js";
-import sectionCss from "./index341.js";
+import { property, state, query, customElement } from "lit/decorators.js";
+import "./index25.js";
+import { sidebarTemplate } from "./index255.js";
+import componentCss from "./index256.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,103 +14,174 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibHorizontalScrollSection = class extends LitElement {
+let LibSidebar = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.scrollDuration = 3;
-    this.paddingInline = 10;
-    this.showProgress = true;
-    this._ticking = false;
-    this._ro = null;
-    this._onScroll = () => {
-      if (this._ticking) return;
-      this._ticking = true;
-      requestAnimationFrame(() => {
-        this._calculate();
-        this._ticking = false;
-      });
-    };
+    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;
   }
   /* ── Lifecycle ── */
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("scroll", this._onScroll, { passive: true });
+  updated(changed) {
+    if (changed.has("active") || changed.has("links")) {
+      this._moveIndicator();
+    }
   }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    window.removeEventListener("scroll", this._onScroll);
-    (_a = this._ro) == null ? void 0 : _a.disconnect();
+  /* ── 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;
+      }
+    });
   }
-  firstUpdated() {
-    this._ro = new ResizeObserver(() => {
-      if (!this._ticking) {
-        requestAnimationFrame(() => {
-          this._calculate();
-          this._ticking = false;
-        });
-        this._ticking = true;
+  /* ── 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");
     });
-    this._ro.observe(this);
   }
-  /* ── Props → CSS custom properties ── */
-  updated() {
-    this.style.setProperty("--_scroll-height", `${this.scrollDuration * 100}vh`);
-    this.style.setProperty("--_padding-inline", String(this.paddingInline));
+  /* ── 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;
   }
-  /* ── Cálculo core ── */
-  _calculate() {
-    if (!this._content || !this._progressFill || !this._counter) return;
-    const rect = this.getBoundingClientRect();
-    const scrollable = rect.height - window.innerHeight;
-    if (rect.top > 0 || rect.bottom < window.innerHeight) return;
-    const scrolled = -rect.top;
-    const progress = Math.min(Math.max(scrolled / scrollable, 0), 1);
-    const paddingRight = window.innerWidth * (this.paddingInline / 100);
-    const maxMove = this._content.scrollWidth - window.innerWidth + paddingRight;
-    this._content.style.transform = `translateX(-${progress * maxMove}px)`;
-    this._progressFill.style.width = `${progress * 100}%`;
-    this._counter.textContent = `${Math.round(progress * 100)}%`;
-    this.dispatchEvent(new CustomEvent(
-      "ui-lib-scroll-progress",
-      {
-        detail: { progress, percent: Math.round(progress * 100) },
-        bubbles: true,
-        composed: true
-      }
-    ));
+  _handleUserAction() {
+    this.dispatchEvent(new CustomEvent("ui-lib-user-action", {
+      bubbles: true,
+      composed: true
+    }));
   }
-  render() {
-    return horizontalScrollTemplate(this);
+  _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);
   }
 };
-LibHorizontalScrollSection.styles = [
+LibSidebar.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(sectionCss)}`
+  css`${unsafeCSS(componentCss)}`
 ];
 __decorateClass([
-  property({ type: Number, attribute: "scroll-duration" })
-], LibHorizontalScrollSection.prototype, "scrollDuration", 2);
+  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: Number, attribute: "padding-inline" })
-], LibHorizontalScrollSection.prototype, "paddingInline", 2);
+  property({ type: String, reflect: true })
+], LibSidebar.prototype, "variant", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "show-progress" })
-], LibHorizontalScrollSection.prototype, "showProgress", 2);
+  property({ type: Boolean, reflect: true })
+], LibSidebar.prototype, "collapsed", 2);
 __decorateClass([
-  query(".horizontal-content")
-], LibHorizontalScrollSection.prototype, "_content", 2);
+  state()
+], LibSidebar.prototype, "_mobileOpen", 2);
 __decorateClass([
-  query(".progress-fill")
-], LibHorizontalScrollSection.prototype, "_progressFill", 2);
+  query(".sb-indicator")
+], LibSidebar.prototype, "_indicator", 2);
 __decorateClass([
-  query(".counter")
-], LibHorizontalScrollSection.prototype, "_counter", 2);
-LibHorizontalScrollSection = __decorateClass([
-  customElement("lib-horizontal-scroll-section")
-], LibHorizontalScrollSection);
+  query(".sb-nav")
+], LibSidebar.prototype, "_nav", 2);
+LibSidebar = __decorateClass([
+  customElement("lib-sidebar")
+], LibSidebar);
 export {
-  LibHorizontalScrollSection
+  LibSidebar
 };
 //# sourceMappingURL=index79.js.map

package/dist/index79.js.map

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

package/dist/index8.js

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