@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index65.js

@@ -1,7 +1,7 @@
-import { unsafeCSS, css, LitElement } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
-import { checkboxCardTemplate } from "./index314.js";
-import checkboxCardCss from "./index315.js";
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { tabsTemplate } from "./index229.js";
+import tabsCss from "./index230.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,107 +13,205 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibCheckboxCard = class extends LitElement {
+let LibTabs = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.checked = false;
-    this.inputType = "checkbox";
-    this.name = "";
-    this.value = "";
-    this.color = "kaki";
-    this.layout = "vertical";
-    this.cardTitle = "";
-    this.desc = "";
-    this.checkShape = "square";
+    this.variant = "underline";
+    this.color = "";
+    this.size = "";
     this.dark = false;
-    this.disabled = false;
-    this.error = false;
-    this.image = false;
+    this.kintsugi = false;
+    this.glitch = false;
+    this.scrollable = false;
+    this.full = false;
+    this.active = "";
+    this.ariaLabel = "";
+    this.items = [];
+    this._inkLeft = 0;
+    this._inkWidth = 0;
+    this._ro = null;
   }
-  /* ── Ripple en click ── */
-  _handleClick(e) {
-    if (this.disabled) return;
-    this._spawnRipple(e);
+  /* ── Lifecycle ── */
+  firstUpdated() {
+    this._setupResizeObserver();
+    requestAnimationFrame(() => this._positionInk());
+  }
+  updated(changed) {
+    var _a;
+    (_a = super.updated) == null ? void 0 : _a.call(this, changed);
+    if (changed.has("active") || changed.has("items") || changed.has("variant")) {
+      requestAnimationFrame(() => this._positionInk());
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this._ro) == null ? void 0 : _a.disconnect();
+    this._ro = null;
   }
-  _spawnRipple(e) {
-    const ripple = this._rippleEl;
-    if (!ripple) return;
-    const rect = ripple.getBoundingClientRect();
-    const dot = document.createElement("span");
-    dot.className = "cc-ripple-dot";
-    dot.style.left = `${e.clientX - rect.left - 2}px`;
-    dot.style.top = `${e.clientY - rect.top - 2}px`;
-    ripple.appendChild(dot);
-    dot.addEventListener("animationend", () => dot.remove(), { once: true });
+  /* ── Ink bar ── */
+  _positionInk() {
+    var _a, _b;
+    const noInkVariants = [
+      "pill",
+      "card",
+      "outline",
+      "vertical"
+    ];
+    if (noInkVariants.includes(this.variant)) return;
+    const list = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".tb-list");
+    const activeTab = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector(".tb-tab.is-active");
+    if (!list || !activeTab) return;
+    const listRect = list.getBoundingClientRect();
+    const tabRect = activeTab.getBoundingClientRect();
+    this._inkLeft = tabRect.left - listRect.left;
+    this._inkWidth = tabRect.width;
   }
-  /* ── Cambio de estado ── */
-  _handleChange(e) {
-    const input = e.target;
-    this.checked = input.checked;
-    this.dispatchEvent(new CustomEvent("ui-lib-checkbox-card-change", {
-      detail: { checked: this.checked, value: this.value },
-      bubbles: true,
-      composed: true
-    }));
+  _setupResizeObserver() {
+    var _a;
+    const list = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".tb-list");
+    if (!list) return;
+    this._ro = new ResizeObserver(() => this._positionInk());
+    this._ro.observe(list);
+  }
+  /* ── Tab activation ── */
+  _activateTab(id) {
+    var _a;
+    if (id === this.active) return;
+    const prev = this.active;
+    this.active = id;
+    if (this.scrollable) {
+      const tab = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+        `[data-id="${id}"]`
+      );
+      tab == null ? void 0 : tab.scrollIntoView({
+        inline: "nearest",
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-tab-change", {
+        detail: { id, prev },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleClick(e) {
+    var _a;
+    const targetId = e.target.id;
+    console.log("target:", e.target.id);
+    const tabs = Array.from(
+      ((_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(
+        ".tb-tab:not(.is-disabled)"
+      )) ?? []
+    );
+    const selectedTab = tabs.find((tab) => tab.id === targetId);
+    console.log(selectedTab);
+    if (!selectedTab) return;
+    this._activateTab((selectedTab == null ? void 0 : selectedTab.dataset["id"]) ?? "");
+    selectedTab.focus();
   }
-  /* Helper para detectar slots con contenido */
-  _hasSlot(name) {
-    return !!this.querySelector(`[slot="${name}"]`);
+  /* ── Keyboard navigation ── */
+  _handleKey(e) {
+    var _a;
+    const isVertical = this.variant === "vertical";
+    const tabs = Array.from(
+      ((_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(
+        ".tb-tab:not(.is-disabled)"
+      )) ?? []
+    );
+    const current = tabs.findIndex((t) => t.dataset["id"] === this.active);
+    let next = -1;
+    if (e.key === "ArrowRight" && !isVertical || e.key === "ArrowDown" && isVertical) {
+      e.preventDefault();
+      next = (current + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft" && !isVertical || e.key === "ArrowUp" && isVertical) {
+      e.preventDefault();
+      next = (current - 1 + tabs.length) % tabs.length;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      next = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      next = tabs.length - 1;
+    }
+    if (next >= 0) {
+      const target = tabs[next];
+      if (target == null ? void 0 : target.dataset["id"]) {
+        this._activateTab(target.dataset["id"]);
+        target.focus();
+      }
+    }
   }
+  /* ── renderItem (LibListModel) — fallback para modo loading ── */
+  renderItem(item) {
+    return html`<button class="tb-tab">${item.label}</button>`;
+  }
+  /* ── Render principal ── */
   render() {
-    return checkboxCardTemplate(this);
+    var _a;
+    console.log(
+      "lib-tabs render, items:",
+      (_a = this.items) == null ? void 0 : _a.length,
+      "active:",
+      this.active
+    );
+    return tabsTemplate(this);
   }
 };
-LibCheckboxCard.styles = [
-  css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(checkboxCardCss)}`
+LibTabs.styles = [
+  css`
+      ${unsafeCSS(sharedTokens)}
+    `,
+  css`
+      ${unsafeCSS(tabsCss)}
+    `
 ];
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibCheckboxCard.prototype, "checked", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "input-type" })
-], LibCheckboxCard.prototype, "inputType", 2);
-__decorateClass([
-  property({ type: String })
-], LibCheckboxCard.prototype, "name", 2);
-__decorateClass([
-  property({ type: String })
-], LibCheckboxCard.prototype, "value", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibCheckboxCard.prototype, "color", 2);
+], LibTabs.prototype, "variant", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibCheckboxCard.prototype, "layout", 2);
-__decorateClass([
-  property({ type: String, attribute: "card-title" })
-], LibCheckboxCard.prototype, "cardTitle", 2);
-__decorateClass([
-  property({ type: String })
-], LibCheckboxCard.prototype, "desc", 2);
+], LibTabs.prototype, "color", 2);
 __decorateClass([
-  property({ type: String, attribute: "check-shape" })
-], LibCheckboxCard.prototype, "checkShape", 2);
+  property({ type: String, reflect: true })
+], LibTabs.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibCheckboxCard.prototype, "dark", 2);
+], LibTabs.prototype, "dark", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibCheckboxCard.prototype, "disabled", 2);
+], LibTabs.prototype, "kintsugi", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibCheckboxCard.prototype, "error", 2);
+], LibTabs.prototype, "glitch", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "scroll" })
+], LibTabs.prototype, "scrollable", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibCheckboxCard.prototype, "image", 2);
+], LibTabs.prototype, "full", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibTabs.prototype, "active", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], LibTabs.prototype, "ariaLabel", 2);
+__decorateClass([
+  property({ type: Array, hasChanged: () => true })
+], LibTabs.prototype, "items", 2);
+__decorateClass([
+  state()
+], LibTabs.prototype, "_inkLeft", 2);
 __decorateClass([
-  query(".cc-ripple")
-], LibCheckboxCard.prototype, "_rippleEl", 2);
-LibCheckboxCard = __decorateClass([
-  customElement("lib-checkbox-card")
-], LibCheckboxCard);
+  state()
+], LibTabs.prototype, "_inkWidth", 2);
+LibTabs = __decorateClass([
+  customElement("lib-tabs")
+], LibTabs);
 export {
-  LibCheckboxCard
+  LibTabs
 };
 //# sourceMappingURL=index65.js.map

package/dist/index65.js.map

@@ -1 +1 @@
-{"version":3,"file":"index65.js","sources":["../src/components/molecules/checkbox-card/lib-checkbox-card.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { checkboxCardTemplate } from './lib-checkbox-card.html';\nimport checkboxCardCss from './lib-checkbox-card.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type {\n  CheckboxCardColor,\n  CheckboxCardLayout,\n  CheckboxCardInputType,\n} from './lib-checkbox-card.types';\n\n/**\n * lib-checkbox-card — Tarjeta seleccionable Shibui (SG-57)\n *\n * La mecánica de checked se gestiona con CSS puro vía\n * `input:checked ~ .cc-body`. El componente solo gestiona\n * el estado, el ripple y los eventos.\n *\n * @prop checked      — Estado checked (refleja en atributo)\n * @prop input-type   — 'checkbox' | 'radio'\n * @prop name         — Nombre del grupo (requerido en radio)\n * @prop value        — Valor del input\n * @prop color        — 'kaki' | 'celadon'\n * @prop layout       — 'vertical' | 'horizontal' | 'compact'\n * @prop card-title   — Título (alternativa a slot)\n * @prop desc         — Descripción (alternativa a slot)\n * @prop check-shape  — 'square' | 'pill'\n * @prop dark         — Surface oscura\n * @prop disabled     — Estado deshabilitado\n * @prop error        — Estado de error\n * @prop image        — Modo imagen (sin padding en .cc-body)\n *\n * @fires ui-lib-checkbox-card-change — { detail: { checked: boolean, value: string } }\n *\n * @slot icon     — Icono SVG o imagen\n * @slot badge    — Badge/etiqueta\n * @slot title    — Título (sobreescribe card-title prop)\n * @slot desc     — Descripción (sobreescribe desc prop)\n * @slot price    — Bloque de precio\n * @slot divider  — Línea divisoria\n * @slot features — Lista de características\n * @slot image    — Imagen con aspect-ratio 16/9\n * @slot          — Contenido libre\n */\n@customElement('lib-checkbox-card')\nexport class LibCheckboxCard extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(checkboxCardCss)}`,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: String, reflect: true, attribute: 'input-type' })\n  inputType: CheckboxCardInputType = 'checkbox';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String, reflect: true })\n  color: CheckboxCardColor = 'kaki';\n\n  @property({ type: String, reflect: true })\n  layout: CheckboxCardLayout = 'vertical';\n\n  @property({ type: String, attribute: 'card-title' })\n  cardTitle = '';\n\n  @property({ type: String })\n  desc = '';\n\n  @property({ type: String, attribute: 'check-shape' })\n  checkShape: 'square' | 'pill' = 'square';\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: Boolean, reflect: true })\n  image = false;\n\n  @query('.cc-ripple')\n  declare private _rippleEl: HTMLElement | null;\n\n  /* ── Ripple en click ── */\n  _handleClick(e: MouseEvent): void {\n    if (this.disabled) return;\n    this._spawnRipple(e);\n  }\n\n  private _spawnRipple(e: MouseEvent): void {\n    const ripple = this._rippleEl;\n    if (!ripple) return;\n\n    const rect = ripple.getBoundingClientRect();\n    const dot = document.createElement('span');\n    dot.className = 'cc-ripple-dot';\n    dot.style.left = `${e.clientX - rect.left - 2}px`;\n    dot.style.top  = `${e.clientY - rect.top  - 2}px`;\n    ripple.appendChild(dot);\n    dot.addEventListener('animationend', (): void => dot.remove(), { once: true });\n  }\n\n  /* ── Cambio de estado ── */\n  _handleChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.dispatchEvent(new CustomEvent('ui-lib-checkbox-card-change', {\n      detail: { checked: this.checked, value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* Helper para detectar slots con contenido */\n  _hasSlot(name: string): boolean {\n    return !!this.querySelector(`[slot=\"${name}\"]`);\n  }\n\n  protected override render(): TemplateResult {\n    return checkboxCardTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-checkbox-card': LibCheckboxCard;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index65.js","sources":["../src/components/molecules/tabs/lib-tabs.component.ts"],"sourcesContent":["import { html, css, unsafeCSS, TemplateResult, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { tabsTemplate } from \"./lib-tabs.html\";\nimport tabsCss from \"./lib-tabs.css?inline\";\nimport sharedTokens from \"../../../styles/shared/tokens.css?inline\";\nimport type {\n  TabItem,\n  TabsVariant,\n  TabsColor,\n  TabsSize,\n} from \"./lib-tabs.types\";\n\n/**\n * lib-tabs — Componente de pestañas Shibui (SG-60)\n *\n * @prop variant  — 'underline' | 'pill' | 'card' | 'outline' | 'vertical'\n * @prop color    — 'kaki' | 'celadon'\n * @prop size     — 'sm' | 'md' | 'lg'\n * @prop dark     — surface oscura\n * @prop kintsugi — ink bar animada dorada\n * @prop glitch   — efecto RGB split en tab activo\n * @prop scroll   — overflow-x scroll en la lista\n * @prop full     — tabs en grid de columnas iguales\n * @prop active   — id del tab activo\n * @prop items    — array de TabItem\n *\n * Panels: cada TabItem con id=\"X\" se muestra via <slot name=\"X\">.\n * El usuario añade <div slot=\"X\">contenido</div> como hijo de lib-tabs.\n *\n * @fires ui-lib-tab-change — {detail: { id: string; prev: string }}\n */\n@customElement(\"lib-tabs\")\nexport class LibTabs extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(tabsCss)}\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: TabsVariant = \"underline\";\n\n  @property({ type: String, reflect: true })\n  color: TabsColor | \"\" = \"\";\n\n  @property({ type: String, reflect: true })\n  size: TabsSize | \"\" = \"\";\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  kintsugi = false;\n\n  @property({ type: Boolean, reflect: true })\n  glitch = false;\n\n  @property({ type: Boolean, reflect: true, attribute: \"scroll\" })\n  scrollable = false;\n\n  @property({ type: Boolean, reflect: true })\n  full = false;\n\n  @property({ type: String, reflect: true })\n  active = \"\";\n\n  /** aria-label para el tablist */\n  @property({ type: String, attribute: \"aria-label\" })\n  override ariaLabel = \"\";\n\n  @property({ type: Array, hasChanged: () => true })\n  items: TabItem[] = [];\n\n  /* ── Internal state para la ink bar ── */\n  @state() _inkLeft = 0;\n  @state() _inkWidth = 0;\n\n  private _ro: ResizeObserver | null = null;\n\n  /* ── Lifecycle ── */\n\n  override firstUpdated(): void {\n    this._setupResizeObserver();\n    // Aseguramos que el primer tab activo tiene ink bar correcta\n    requestAnimationFrame((): void => this._positionInk());\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    super.updated?.(changed);\n    if (\n      changed.has(\"active\") ||\n      changed.has(\"items\") ||\n      changed.has(\"variant\")\n    ) {\n      requestAnimationFrame((): void => this._positionInk());\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  /* ── Ink bar ── */\n\n  private _positionInk(): void {\n    /* Solo aplica a variantes con ink bar */\n    const noInkVariants: TabsVariant[] = [\n      \"pill\",\n      \"card\",\n      \"outline\",\n      \"vertical\",\n    ];\n    if (noInkVariants.includes(this.variant)) return;\n\n    const list = this.shadowRoot?.querySelector<HTMLElement>(\".tb-list\");\n    const activeTab =\n      this.shadowRoot?.querySelector<HTMLElement>(\".tb-tab.is-active\");\n    if (!list || !activeTab) return;\n\n    const listRect = list.getBoundingClientRect();\n    const tabRect = activeTab.getBoundingClientRect();\n    this._inkLeft = tabRect.left - listRect.left;\n    this._inkWidth = tabRect.width;\n  }\n\n  private _setupResizeObserver(): void {\n    const list = this.shadowRoot?.querySelector<HTMLElement>(\".tb-list\");\n    if (!list) return;\n    this._ro = new ResizeObserver((): void => this._positionInk());\n    this._ro.observe(list);\n  }\n\n  /* ── Tab activation ── */\n\n  private _activateTab(id: string): void {\n    if (id === this.active) return;\n    const prev = this.active;\n    this.active = id;\n\n    /* Scroll tab into view si está en modo scrollable */\n    if (this.scrollable) {\n      const tab = this.shadowRoot?.querySelector<HTMLElement>(\n        `[data-id=\"${id}\"]`,\n      );\n      tab?.scrollIntoView({\n        inline: \"nearest\",\n        block: \"nearest\",\n        behavior: \"smooth\",\n      });\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"ui-lib-tab-change\", {\n        detail: { id, prev },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  _handleClick(e: CustomEvent): void {\n    const targetId = (e.target as HTMLElement).id;\n    console.log(\"target:\", (e.target as HTMLElement).id);\n\n    const tabs = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>(\n        \".tb-tab:not(.is-disabled)\",\n      ) ?? [],\n    );\n\n    const selectedTab = tabs.find((tab) => tab.id === targetId);\n    console.log(selectedTab);\n\n    if (!selectedTab) return; // Si no lo encuentra, abortamos la función\n\n    this._activateTab(selectedTab?.dataset[\"id\"] ?? \"\");\n    selectedTab.focus();\n  }\n\n  /* ── Keyboard navigation ── */\n\n  _handleKey(e: KeyboardEvent): void {\n    const isVertical = this.variant === \"vertical\";\n    const tabs = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>(\n        \".tb-tab:not(.is-disabled)\",\n      ) ?? [],\n    );\n    const current = tabs.findIndex((t) => t.dataset[\"id\"] === this.active);\n\n    let next = -1;\n\n    if (\n      (e.key === \"ArrowRight\" && !isVertical) ||\n      (e.key === \"ArrowDown\" && isVertical)\n    ) {\n      e.preventDefault();\n      next = (current + 1) % tabs.length;\n    } else if (\n      (e.key === \"ArrowLeft\" && !isVertical) ||\n      (e.key === \"ArrowUp\" && isVertical)\n    ) {\n      e.preventDefault();\n      next = (current - 1 + tabs.length) % tabs.length;\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      next = 0;\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      next = tabs.length - 1;\n    }\n\n    if (next >= 0) {\n      const target = tabs[next];\n      if (target?.dataset[\"id\"]) {\n        this._activateTab(target.dataset[\"id\"]);\n        target.focus();\n      }\n    }\n  }\n\n  /* ── renderItem (LibListModel) — fallback para modo loading ── */\n  protected renderItem(item: TabItem): TemplateResult {\n    return html`<button class=\"tb-tab\">${item.label}</button>`;\n  }\n\n  /* ── Render principal ── */\n  protected override render(): TemplateResult {\n    console.log(\n      \"lib-tabs render, items:\",\n      this.items?.length,\n      \"active:\",\n      this.active,\n    );\n\n    return tabsTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"lib-tabs\": LibTabs;\n  }\n}\n"],"names":[],"mappings":"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"}