@shibui-ui/ui 1.5.5

package/dist/index69.js

@@ -0,0 +1,187 @@
+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 sharedTokens from "./index196.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibSidebar = 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;
+  }
+  /* ── 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);
+  }
+};
+LibSidebar.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(componentCss)}`
+];
+__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);
+__decorateClass([
+  query(".sb-indicator")
+], LibSidebar.prototype, "_indicator", 2);
+__decorateClass([
+  query(".sb-nav")
+], LibSidebar.prototype, "_nav", 2);
+LibSidebar = __decorateClass([
+  customElement("lib-sidebar")
+], LibSidebar);
+export {
+  LibSidebar
+};
+//# sourceMappingURL=index69.js.map

package/dist/index69.js.map

@@ -0,0 +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":"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"}

package/dist/index7.js

@@ -0,0 +1,60 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { skeletonTemplate } from "./index201.js";
+import skeletonCss from "./index202.js";
+import sharedTokens from "./index196.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibSkeleton = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.shape = "rect";
+    this.animation = "shimmer";
+    this.surface = "light";
+    this.width = "100%";
+    this.height = "";
+  }
+  render() {
+    return skeletonTemplate({
+      shape: this.shape,
+      animation: this.animation,
+      surface: this.surface,
+      width: this.width,
+      height: this.height
+    });
+  }
+};
+LibSkeleton.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(skeletonCss)}`
+];
+__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);
+__decorateClass([
+  property({ type: String })
+], LibSkeleton.prototype, "width", 2);
+__decorateClass([
+  property({ type: String })
+], LibSkeleton.prototype, "height", 2);
+LibSkeleton = __decorateClass([
+  customElement("lib-skeleton")
+], LibSkeleton);
+export {
+  LibSkeleton
+};
+//# sourceMappingURL=index7.js.map

package/dist/index7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index7.js","sources":["../src/components/atoms/skeleton/lib-skeleton.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibSkeletonShape, LibSkeletonAnimation, LibSkeletonSurface } from './lib-skeleton.html';\nimport { skeletonTemplate } from './lib-skeleton.html';\nimport skeletonCss from './lib-skeleton.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-skeleton\n *\n * Bloque de carga que replica la arquitectura del contenido real.\n * Tres animaciones, tres superficies, diez formas semánticas.\n *\n * @slot — (vacío) El componente es puramente visual, sin contenido.\n *\n * @example — línea de texto\n * <lib-skeleton shape=\"line\" width=\"80%\"></lib-skeleton>\n *\n * @example — avatar 40px\n * <lib-skeleton shape=\"avatar\" width=\"40px\" height=\"40px\"></lib-skeleton>\n *\n * @example — dark + wave\n * <lib-skeleton shape=\"title\" surface=\"dark\" animation=\"wave\" width=\"60%\"></lib-skeleton>\n *\n * @example — kaki + pulse\n * <lib-skeleton shape=\"img\" surface=\"kaki\" animation=\"pulse\"></lib-skeleton>\n */\n@customElement('lib-skeleton')\nexport class LibSkeleton extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(skeletonCss)}`,\n  ];\n\n  /**\n   * Forma semántica del bloque.\n   * Cada shape tiene una altura por defecto en CSS:\n   * - line   : 13px\n   * - title  : 22px\n   * - h1     : 36px\n   * - avatar : border-radius full (width/height obligatorio)\n   * - icon   : border-radius sm  (width/height obligatorio)\n   * - btn    : 36px\n   * - badge  : 20px\n   * - pill   : 22px, border-radius full\n   * - img    : 160px\n   * - rect   : sin altura — usar `height` prop\n   */\n  @property({ type: String, reflect: true })\n  shape: LibSkeletonShape = 'rect';\n\n  /**\n   * Tipo de animación.\n   * - shimmer : barrido de luz lateral (default)\n   * - wave    : barrido más lento y orgánico\n   * - pulse   : opacidad, sin movimiento\n   */\n  @property({ type: String, reflect: true })\n  animation: LibSkeletonAnimation = 'shimmer';\n\n  /**\n   * Superficie de color.\n   * - light : washi-200 → washi-100 (default)\n   * - dark  : washi-800 → washi-700\n   * - kaki  : kaki-200  → kaki-100\n   */\n  @property({ type: String, reflect: true })\n  surface: LibSkeletonSurface = 'light';\n\n  /** Anchura del bloque. Default: 100% */\n  @property({ type: String })\n  width = '100%';\n\n  /**\n   * Altura del bloque.\n   * Si no se especifica, el CSS usa la altura propia de cada `shape`.\n   * Obligatorio para `avatar`, `icon` y `rect`.\n   */\n  @property({ type: String })\n  height = '';\n\n  override render(): TemplateResult {\n    return skeletonTemplate({\n      shape:     this.shape,\n      animation: this.animation,\n      surface:   this.surface,\n      width:     this.width,\n      height:    this.height,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-skeleton': LibSkeleton;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA4BO,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAqBL,SAAA,QAA0B;AAS1B,SAAA,YAAkC;AASlC,SAAA,UAA8B;AAI9B,SAAA,QAAQ;AAQR,SAAA,SAAS;AAAA,EAAA;AAAA,EAEA,SAAyB;AAChC,WAAO,iBAAiB;AAAA,MACtB,OAAW,KAAK;AAAA,MAChB,WAAW,KAAK;AAAA,MAChB,SAAW,KAAK;AAAA,MAChB,OAAW,KAAK;AAAA,MAChB,QAAW,KAAK;AAAA,IAAA,CACjB;AAAA,EACH;AACF;AA9Da,YACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,WAAW,CAAC;AAC9B;AAiBA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,YAqBX,WAAA,SAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA7B9B,YA8BX,WAAA,aAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtC9B,YAuCX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Cf,YA2CX,WAAA,SAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlDf,YAmDX,WAAA,UAAA,CAAA;AAnDW,cAAN,gBAAA;AAAA,EADN,cAAc,cAAc;AAAA,GAChB,WAAA;"}

package/dist/index70.js

@@ -0,0 +1,85 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { stepperTemplate } from "./index324.js";
+import stepperCss from "./index325.js";
+import sharedTokens from "./index196.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibStepper = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.current = 1;
+    this.orientation = "horizontal";
+    this.variant = "default";
+    this.size = "md";
+  }
+  updated(changed) {
+    if (changed.has("current") || changed.has("orientation") || changed.has("variant") || changed.has("size")) {
+      this._syncSteps();
+    }
+  }
+  /**
+   * Propaga index, status, last, orientation, variant y size a cada lib-step hijo.
+   * Llamado en slotchange y cada vez que cambian las props relevantes.
+   */
+  _syncSteps() {
+    const steps = this._steps;
+    if (!(steps == null ? void 0 : steps.length)) return;
+    steps.forEach((step, i) => {
+      const pos = i + 1;
+      step.index = pos;
+      step.orientation = this.orientation;
+      step.variant = this.variant;
+      step.size = this.size;
+      step.last = pos === steps.length;
+      if (step.status !== "error") {
+        if (pos < this.current) step.status = "completed";
+        else if (pos === this.current) step.status = "active";
+        else step.status = "pending";
+      }
+    });
+  }
+  _handleSlotChange() {
+    this._syncSteps();
+  }
+  render() {
+    return stepperTemplate({
+      orientation: this.orientation,
+      handleSlotChange: this._handleSlotChange.bind(this)
+    });
+  }
+};
+LibStepper.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(stepperCss)}`
+];
+__decorateClass([
+  property({ type: Number, reflect: true })
+], LibStepper.prototype, "current", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibStepper.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibStepper.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibStepper.prototype, "size", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "lib-step" })
+], LibStepper.prototype, "_steps", 2);
+LibStepper = __decorateClass([
+  customElement("lib-stepper")
+], LibStepper);
+export {
+  LibStepper
+};
+//# sourceMappingURL=index70.js.map

package/dist/index70.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index70.js","sources":["../src/components/organisms/stepper/lib-stepper.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport type { LibStepperOrientation, LibStepperVariant, LibStepperSize } from './lib-stepper.html';\nimport { stepperTemplate } from './lib-stepper.html';\nimport stepperCss from './lib-stepper.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { LibStep } from '../../atoms/step/lib-step.component';\n\n/**\n * @element lib-stepper\n *\n * Contenedor que coordina un flujo de pasos `<lib-step>`.\n * Calcula y propaga automáticamente a cada hijo:\n *   - index       : posición ordinal (1-based)\n *   - status      : pending | active | completed (derivado de `current`)\n *   - last        : true en el último paso\n *   - orientation : refleja la prop del stepper\n *   - variant     : refleja la prop del stepper\n *   - size        : refleja la prop del stepper\n *\n * El estado `error` no se gestiona automáticamente — se asigna desde fuera\n * con `stepEl.status = 'error'` cuando el formulario valida.\n *\n * @fires ui-lib-step-change — Emitido al cambiar `current` con `{ current: number, total: number }`\n *\n * @example — horizontal default\n * <lib-stepper current=\"2\">\n *   <lib-step label=\"Información\" sub=\"Datos personales\"></lib-step>\n *   <lib-step label=\"Pago\"        sub=\"Método de pago\"></lib-step>\n *   <lib-step label=\"Confirmación\"></lib-step>\n * </lib-stepper>\n *\n * @example — vertical\n * <lib-stepper orientation=\"vertical\" current=\"1\">\n *   <lib-step label=\"Crea tu cuenta\">\n *     Registro completado. Tu correo ha sido verificado.\n *   </lib-step>\n *   <lib-step label=\"Elige un plan\">\n *     Selecciona el plan que mejor se adapte a tus necesidades.\n *   </lib-step>\n * </lib-stepper>\n *\n * @example — minimal kaki\n * <lib-stepper variant=\"minimal\" current=\"3\">...</lib-stepper>\n *\n * @example — kintsugi oscuro\n * <lib-stepper variant=\"kintsugi\" current=\"2\">...</lib-stepper>\n */\n@customElement('lib-stepper')\nexport class LibStepper extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(stepperCss)}`,\n  ];\n\n  /**\n   * Paso activo actual (1-based).\n   * Los pasos anteriores quedan como `completed`, los posteriores como `pending`.\n   */\n  @property({ type: Number, reflect: true })\n  current = 1;\n\n  /**\n   * Dirección del flujo.\n   * - horizontal : barra horizontal con conectores (default)\n   * - vertical   : lista vertical con contenido expandido por paso\n   */\n  @property({ type: String, reflect: true })\n  orientation: LibStepperOrientation = 'horizontal';\n\n  /**\n   * Variante visual. Se propaga a todos los lib-step hijos.\n   * - default  : nodo circular washi\n   * - minimal  : nodo cuadrado, acento kaki\n   * - kintsugi : venas doradas, pensado para superficies oscuras\n   */\n  @property({ type: String, reflect: true })\n  variant: LibStepperVariant = 'default';\n\n  /**\n   * Tamaño de los nodos. Se propaga a todos los lib-step hijos.\n   * - sm : 24px · md : 32px (default) · lg : 40px\n   */\n  @property({ type: String, reflect: true })\n  size: LibStepperSize = 'md';\n\n  @queryAssignedElements({ selector: 'lib-step' })\n  private _steps!: Array<LibStep>;\n\n  override updated(changed: PropertyValues<this>): void {\n    if (\n      changed.has('current') ||\n      changed.has('orientation') ||\n      changed.has('variant') ||\n      changed.has('size')\n    ) {\n      this._syncSteps();\n    }\n  }\n\n  /**\n   * Propaga index, status, last, orientation, variant y size a cada lib-step hijo.\n   * Llamado en slotchange y cada vez que cambian las props relevantes.\n   */\n  private _syncSteps(): void {\n    const steps = this._steps;\n    if (!steps?.length) return;\n\n    steps.forEach((step, i) => {\n      const pos = i + 1;\n      step.index       = pos;\n      step.orientation = this.orientation;\n      step.variant     = this.variant;\n      step.size        = this.size;\n      step.last        = pos === steps.length;\n\n      // No sobreescribir 'error' si ya fue asignado externamente\n      if (step.status !== 'error') {\n        if (pos < this.current)      step.status = 'completed';\n        else if (pos === this.current) step.status = 'active';\n        else                          step.status = 'pending';\n      }\n    });\n  }\n\n  private _handleSlotChange(): void {\n    this._syncSteps();\n  }\n\n  override render(): TemplateResult {\n    return stepperTemplate({\n      orientation:     this.orientation,\n      handleSlotChange: this._handleSlotChange.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-stepper': LibStepper;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiDO,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AAWL,SAAA,UAAU;AAQV,SAAA,cAAqC;AASrC,SAAA,UAA6B;AAO7B,SAAA,OAAuB;AAAA,EAAA;AAAA,EAKd,QAAQ,SAAqC;AACpD,QACE,QAAQ,IAAI,SAAS,KACrB,QAAQ,IAAI,aAAa,KACzB,QAAQ,IAAI,SAAS,KACrB,QAAQ,IAAI,MAAM,GAClB;AACA,WAAK,WAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,aAAmB;AACzB,UAAM,QAAQ,KAAK;AACnB,QAAI,EAAC,+BAAO,QAAQ;AAEpB,UAAM,QAAQ,CAAC,MAAM,MAAM;AACzB,YAAM,MAAM,IAAI;AAChB,WAAK,QAAc;AACnB,WAAK,cAAc,KAAK;AACxB,WAAK,UAAc,KAAK;AACxB,WAAK,OAAc,KAAK;AACxB,WAAK,OAAc,QAAQ,MAAM;AAGjC,UAAI,KAAK,WAAW,SAAS;AAC3B,YAAI,MAAM,KAAK,QAAc,MAAK,SAAS;AAAA,iBAClC,QAAQ,KAAK,QAAS,MAAK,SAAS;AAAA,kBACV,SAAS;AAAA,MAC9C;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,oBAA0B;AAChC,SAAK,WAAA;AAAA,EACP;AAAA,EAES,SAAyB;AAChC,WAAO,gBAAgB;AAAA,MACrB,aAAiB,KAAK;AAAA,MACtB,kBAAkB,KAAK,kBAAkB,KAAK,IAAI;AAAA,IAAA,CACnD;AAAA,EACH;AACF;AAtFa,WACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,UAAU,CAAC;AAC7B;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAV9B,WAWX,WAAA,WAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlB9B,WAmBX,WAAA,eAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA3B9B,WA4BX,WAAA,WAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlC9B,WAmCX,WAAA,QAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,sBAAsB,EAAE,UAAU,WAAA,CAAY;AAAA,GArCpC,WAsCH,WAAA,UAAA,CAAA;AAtCG,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}

package/dist/index71.js

@@ -0,0 +1,154 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { drawerTemplate } from "./index326.js";
+import drawerCss from "./index327.js";
+import sharedTokens from "./index196.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibDrawer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._uid = Math.random().toString(36).slice(2, 7);
+    this.open = false;
+    this.placement = "right";
+    this.size = "md";
+    this.variant = "default";
+    this.label = "";
+    this.eyebrow = "";
+    this.subtitle = "";
+    this.drawerLabel = "";
+    this._onKeyDown = (e) => {
+      var _a;
+      if (!this.open) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this._close();
+        return;
+      }
+      if (e.key === "Tab") {
+        const focusable = this._getFocusable();
+        if (!focusable.length) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = (_a = this.shadowRoot) == null ? void 0 : _a.activeElement;
+        if (e.shiftKey) {
+          if (active === first) {
+            e.preventDefault();
+            last == null ? void 0 : last.focus();
+          }
+        } else {
+          if (active === last) {
+            e.preventDefault();
+            first == null ? void 0 : first.focus();
+          }
+        }
+      }
+    };
+  }
+  /* ════════════════════════════════════════
+     Ciclo de vida
+     ════════════════════════════════════════ */
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onKeyDown);
+    document.body.style.overflow = "";
+  }
+  updated(changed) {
+    if (!changed.has("open")) return;
+    if (this.open) {
+      document.body.style.overflow = "hidden";
+      requestAnimationFrame(() => {
+        var _a;
+        const panel = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".dr");
+        panel == null ? void 0 : panel.focus();
+      });
+    } else {
+      document.body.style.overflow = "";
+    }
+    if (!this.drawerLabel) {
+      this.drawerLabel = this.label || "Panel";
+    }
+  }
+  /* ════════════════════════════════════════
+     API pública
+     ════════════════════════════════════════ */
+  /** Cierra el drawer y emite el evento */
+  _close() {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("ui-lib-drawer-close", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /* ════════════════════════════════════════
+     Focus trap
+     ════════════════════════════════════════ */
+  _getFocusable() {
+    var _a;
+    const selector = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(",");
+    return Array.from(
+      ((_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(selector)) ?? []
+    );
+  }
+  /* ════════════════════════════════════════
+     Render
+     ════════════════════════════════════════ */
+  render() {
+    return drawerTemplate(this);
+  }
+};
+LibDrawer.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(drawerCss)}`
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibDrawer.prototype, "open", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibDrawer.prototype, "placement", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibDrawer.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibDrawer.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], LibDrawer.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], LibDrawer.prototype, "eyebrow", 2);
+__decorateClass([
+  property({ type: String })
+], LibDrawer.prototype, "subtitle", 2);
+__decorateClass([
+  property({ type: String, attribute: "drawer-label" })
+], LibDrawer.prototype, "drawerLabel", 2);
+LibDrawer = __decorateClass([
+  customElement("lib-drawer")
+], LibDrawer);
+export {
+  LibDrawer
+};
+//# sourceMappingURL=index71.js.map

package/dist/index71.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index71.js","sources":["../src/components/organisms/drawer/lib-drawer.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { drawerTemplate } from './lib-drawer.html';\nimport drawerCss from './lib-drawer.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { DrawerPlacement, DrawerSize, DrawerVariant } from './lib-drawer.types';\n\n/**\n * lib-drawer — Shibui UI · SG-59\n *\n * @prop open         — Abre / cierra el drawer\n * @prop placement    — 'right'(default) | 'left' | 'top' | 'bottom'\n * @prop size         — 'sm' | 'md'(default) | 'lg' | 'xl' | 'full'\n * @prop variant      — 'default' | 'dark' | 'kintsugi' | 'kintsugi-dark' | 'glitch' | 'glitch-dark'\n * @prop label        — Texto del título (también rellenable via slot[name=\"title\"])\n * @prop eyebrow      — Texto del eyebrow (también via slot[name=\"eyebrow\"])\n * @prop subtitle     — Texto del subtítulo (también via slot[name=\"subtitle\"])\n * @prop drawer-label — Aria-label del dialog (default = label)\n *\n * @slot              — Contenido del body\n * @slot title        — Reemplaza el título\n * @slot eyebrow      — Reemplaza el eyebrow\n * @slot subtitle     — Reemplaza el subtítulo\n * @slot footer       — Botones de pie (oculto si vacío)\n *\n * @fires ui-lib-drawer-close — Cuando el drawer se cierra (backdrop, Escape, botón X)\n */\n@customElement('lib-drawer')\nexport class LibDrawer extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(drawerCss)}`,\n  ];\n\n  /* ── Identificador único para aria ── */\n  readonly _uid = Math.random().toString(36).slice(2, 7);\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  placement: DrawerPlacement = 'right';\n\n  @property({ type: String, reflect: true })\n  size: DrawerSize = 'md';\n\n  @property({ type: String, reflect: true })\n  variant: DrawerVariant = 'default';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: String, attribute: 'drawer-label' })\n  drawerLabel = '';\n\n  /* ════════════════════════════════════════\n     Ciclo de vida\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    // Restaurar scroll por si se destruye mientras está abierto\n    document.body.style.overflow = '';\n  }\n\n  override updated(changed: Map<PropertyKey, unknown>): void {\n    if (!changed.has('open')) return;\n\n    if (this.open) {\n      document.body.style.overflow = 'hidden';\n      // Dar foco al panel para que los eventos de teclado funcionen\n      requestAnimationFrame(() => {\n        const panel = this.shadowRoot?.querySelector<HTMLElement>('.dr');\n        panel?.focus();\n      });\n    } else {\n      document.body.style.overflow = '';\n    }\n\n    // Sync aria-label si no se pasó drawer-label explícito\n    if (!this.drawerLabel) {\n      this.drawerLabel = this.label || 'Panel';\n    }\n  }\n\n  /* ════════════════════════════════════════\n     API pública\n     ════════════════════════════════════════ */\n\n  /** Cierra el drawer y emite el evento */\n  _close(): void {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(new CustomEvent('ui-lib-drawer-close', {\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ════════════════════════════════════════\n     Focus trap\n     ════════════════════════════════════════ */\n\n  private _getFocusable(): HTMLElement[] {\n    const selector = [\n      'a[href]', 'button:not([disabled])', 'input:not([disabled])',\n      'select:not([disabled])', 'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ].join(',');\n\n    return Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLElement>(selector) ?? []\n    );\n  }\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (!this.open) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this._close();\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      const focusable = this._getFocusable();\n      if (!focusable.length) return;\n\n      const first = focusable[0];\n      const last  = focusable[focusable.length - 1];\n      const active = this.shadowRoot?.activeElement as HTMLElement;\n\n      if (e.shiftKey) {\n        if (active === first) { e.preventDefault(); last?.focus(); }\n      } else {\n        if (active === last)  { e.preventDefault(); first?.focus(); }\n      }\n    }\n  };\n\n  /* ════════════════════════════════════════\n     Render\n     ════════════════════════════════════════ */\n  protected override render(): TemplateResult {\n    return drawerTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-drawer': LibDrawer;\n  }\n}"],"names":[],"mappings":"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"}