@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index51.js.map

@@ -1 +1 @@
-{"version":3,"file":"index51.js","sources":["../src/components/molecules/dropdown/lib-dropdown.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { dropdownTemplate } from './lib-dropdown.html';\nimport dropdownCss from './lib-dropdown.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { DropdownTriggerVariant, DropdownAlign } from './lib-dropdown.types';\n\n/**\n * lib-dropdown — Menú contextual flotante Shibui (SG-25)\n *\n * @prop label          — Texto del trigger (si no hay slot \"trigger\")\n * @prop variant        — 'default' | 'ghost' | 'filled' | 'kaki'\n * @prop align          — 'left' (default) | 'right'\n * @prop open           — Estado abierto (refleja en atributo)\n * @prop dark           — Menú con tema oscuro\n * @prop min-width      — Ancho mínimo del panel (e.g. '240px')\n * @prop aria-label     — aria-label del trigger (fallback: label)\n *\n * @fires ui-lib-dropdown-toggle — { detail: { open: boolean } }\n * @fires ui-lib-dropdown-item   — { detail: { target: HTMLElement } }  al activar un item\n *\n * @slot trigger  — Contenido personalizado del botón (reemplaza `label`)\n * @slot header   — Cabecera del panel (búsqueda, título)\n * @slot          — Items del menú (.dd-item, .dd-sep, .dd-group-label)\n * @slot footer   — Pie del panel (acciones de confirmación)\n *\n * ─── Clases de item (light DOM, sin shadow) ─────────────────\n * .dd-item           — fila de acción (button o a)\n * .dd-item.is-active — seleccionado\n * .dd-item.is-danger — acción destructiva\n * .dd-item.is-disabled — no interactivo\n * .dd-sep            — separador horizontal (div o hr)\n * .dd-group-label    — etiqueta de sección (div o span)\n *\n * ─── Clases internas de item (requieren CSS global) ─────────\n * .dd-item-icon      — icono a la izquierda\n * .dd-item-body      — wrapper para label + desc de dos líneas\n * .dd-item-label     — primera línea del body\n * .dd-item-desc      — segunda línea (mono, muted)\n * .dd-item-hint      — shortcut a la derecha (margin-left:auto)\n * .dd-item-check     — check de selección (opacity:0 por defecto)\n */\n@customElement('lib-dropdown')\nexport class LibDropdown extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(dropdownCss)}`,\n  ];\n\n  @property({ type: String })\n  label = 'Opciones';\n\n  @property({ type: String, reflect: true })\n  variant: DropdownTriggerVariant = 'default';\n\n  @property({ type: String, reflect: true })\n  align: DropdownAlign = 'left';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: String, attribute: 'min-width' })\n  minWidth = '';\n\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel = '';\n\n  /* ── Lifecycle ── */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('click', this._onOutsideClick);\n    window.addEventListener('keydown', this._onWindowKey);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('click', this._onOutsideClick);\n    window.removeEventListener('keydown', this._onWindowKey);\n  }\n\n  /* ── Toggle ── */\n  _toggle(): void {\n    this.open = !this.open;\n    this.dispatchEvent(new CustomEvent('ui-lib-dropdown-toggle', {\n      detail: { open: this.open },\n      bubbles: true,\n      composed: true,\n    }));\n    if (this.open) {\n      // Foco al primer item al abrir con teclado\n      requestAnimationFrame((): void => {\n        const first = this._getItems()[0];\n        first?.focus();\n      });\n    }\n  }\n\n  /* ── Outside click ── */\n  private _onOutsideClick = (e: Event): void => {\n    if (this.open && !e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  };\n\n  /* ── Global Escape ── */\n  private _onWindowKey = (e: KeyboardEvent): void => {\n    if (this.open && e.key === 'Escape') {\n      this.open = false;\n      // Devolver foco al trigger\n      const trigger = this.shadowRoot?.querySelector<HTMLButtonElement>('.dd-trigger');\n      trigger?.focus();\n    }\n  };\n\n  /* ── Trigger keydown (Arrow Down abre el menú) ── */\n  _handleTriggerKey(e: KeyboardEvent): void {\n    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (!this.open) this._toggle();\n    }\n  }\n\n  /* ── Menu keydown (Arrow Up/Down navega entre items) ── */\n  _handleMenuKey(e: KeyboardEvent): void {\n    const items = this._getItems();\n    if (!items.length) return;\n\n    const current = document.activeElement as HTMLElement;\n    const idx = items.indexOf(current);\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      const next = items[(idx + 1) % items.length];\n      next?.focus();\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      const prev = items[(idx - 1 + items.length) % items.length];\n      prev?.focus();\n    } else if (e.key === 'Tab') {\n      this.open = false;\n    }\n  }\n\n  /* ── Obtiene los items focusables del slot default ── */\n  private _getItems(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!slot) return [];\n    return slot.assignedElements({ flatten: true })\n      .filter(el =>\n        el.classList.contains('dd-item') &&\n        !el.classList.contains('is-disabled')\n      ) as HTMLElement[];\n  }\n\n  /* ── Detecta si un slot con nombre tiene contenido ── */\n  _hasSlot(name: string): boolean {\n    return !!this.querySelector(`[slot=\"${name}\"]`);\n  }\n\n  protected override render(): TemplateResult {\n    return dropdownTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-dropdown': LibDropdown;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index51.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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"}

package/dist/index52.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { emptyStateTemplate } from "./index289.js";
-import emptyStateCss from "./index290.js";
+import { property, query, customElement } from "lit/decorators.js";
+import { chipTemplate } from "./index201.js";
+import chipCss from "./index202.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,63 +13,88 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibEmptyState = class extends LitElement {
+let LibChip = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.heading = "";
-    this.description = "";
-    this.kanji = "";
-    this.tone = "neutral";
-    this.layout = "default";
+    this.kind = "static";
     this.size = "md";
-    this.bordered = false;
-    this.ghost = false;
+    this.color = "default";
+    this.selected = false;
+    this.dot = false;
+    this.ariaLabel = "";
+  }
+  /* ── Toggle ── */
+  _handleToggle() {
+    this.selected = !this.selected;
+    this.dispatchEvent(new CustomEvent("ui-lib-chip-toggle", {
+      detail: { selected: this.selected },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /* ── Remove con animación de salida ── */
+  _handleRemove(e) {
+    e.stopPropagation();
+    const el = this._inputEl;
+    if (!el) {
+      this._emitRemove();
+      return;
+    }
+    el.classList.add("is-removing");
+    el.addEventListener("animationend", () => {
+      this._emitRemove();
+    }, { once: true });
+  }
+  _emitRemove() {
+    this.dispatchEvent(new CustomEvent("ui-lib-chip-remove", {
+      detail: {},
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /* ── Animación de entrada (llamar desde fuera si se crea dinámicamente) ── */
+  animateIn() {
+    var _a;
+    const el = this._inputEl ?? ((_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".chip, .chip-toggle"));
+    if (!el) return;
+    el.classList.remove("is-entering");
+    void el.offsetWidth;
+    el.classList.add("is-entering");
+    el.addEventListener("animationend", () => el.classList.remove("is-entering"), { once: true });
   }
   render() {
-    return emptyStateTemplate({
-      heading: this.heading,
-      description: this.description,
-      kanji: this.kanji,
-      tone: this.tone,
-      layout: this.layout,
-      size: this.size,
-      bordered: this.bordered,
-      ghost: this.ghost
-    });
+    return chipTemplate(this);
   }
 };
-LibEmptyState.styles = [
+LibChip.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(emptyStateCss)}`
+  css`${unsafeCSS(chipCss)}`
 ];
-__decorateClass([
-  property({ type: String })
-], LibEmptyState.prototype, "heading", 2);
-__decorateClass([
-  property({ type: String })
-], LibEmptyState.prototype, "description", 2);
-__decorateClass([
-  property({ type: String })
-], LibEmptyState.prototype, "kanji", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibEmptyState.prototype, "tone", 2);
+], LibChip.prototype, "kind", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibEmptyState.prototype, "layout", 2);
+], LibChip.prototype, "size", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibEmptyState.prototype, "size", 2);
+], LibChip.prototype, "color", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibEmptyState.prototype, "bordered", 2);
+], LibChip.prototype, "selected", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibEmptyState.prototype, "ghost", 2);
-LibEmptyState = __decorateClass([
-  customElement("lib-empty-state")
-], LibEmptyState);
+], LibChip.prototype, "dot", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], LibChip.prototype, "ariaLabel", 2);
+__decorateClass([
+  query(".chip-input")
+], LibChip.prototype, "_inputEl", 2);
+LibChip = __decorateClass([
+  customElement("lib-chip")
+], LibChip);
 export {
-  LibEmptyState
+  LibChip
 };
 //# sourceMappingURL=index52.js.map

package/dist/index52.js.map

@@ -1 +1 @@
-{"version":3,"file":"index52.js","sources":["../src/components/molecules/empty-state/lib-empty-state.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emptyStateTemplate } from './lib-empty-state.html';\nimport type { LibEmptyStateTone, LibEmptyStateLayout, LibEmptyStateSize } from './lib-empty-state.html';\nimport emptyStateCss from './lib-empty-state.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type { LibEmptyStateTone, LibEmptyStateLayout, LibEmptyStateSize };\n\n/**\n * @element lib-empty-state\n *\n * Tres zonas: ilustración (icono Phosphor o kanji), copy, acciones.\n * Todas las zonas son opcionales — la mínima expresión es solo `heading`.\n *\n * @slot illustration — Icono Phosphor (o cualquier elemento visual)\n * @slot actions      — Botones de acción (lib-button u otros)\n *\n * @example — default con icono\n * <lib-empty-state heading=\"Carpeta vacía\" description=\"Sube tu primer archivo.\">\n *   <ph-folder-open slot=\"illustration\" weight=\"regular\"></ph-folder-open>\n *   <lib-button slot=\"actions\" variant=\"primary\">Subir</lib-button>\n * </lib-empty-state>\n *\n * @example — kanji como ilustración\n * <lib-empty-state kanji=\"無\" heading=\"Sin resultados\" description=\"Prueba otros términos.\">\n *   <lib-button slot=\"actions\" variant=\"ghost\">Limpiar filtros</lib-button>\n * </lib-empty-state>\n *\n * @example — inline con tone\n * <lib-empty-state layout=\"inline\" tone=\"kaki\" heading=\"Empieza aquí\" size=\"sm\">\n *   <ph-sparkle slot=\"illustration\" weight=\"regular\"></ph-sparkle>\n *   <lib-button slot=\"actions\" variant=\"accent\">Crear</lib-button>\n * </lib-empty-state>\n *\n * @example — bordered (dropzone)\n * <lib-empty-state bordered heading=\"Arrastra aquí tus archivos\">\n *   <ph-plus slot=\"illustration\" weight=\"regular\"></ph-plus>\n * </lib-empty-state>\n */\n@customElement('lib-empty-state')\nexport class LibEmptyState extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(emptyStateCss)}`,\n  ];\n\n  /**\n   * Título principal del estado vacío.\n   * Se usa `heading` en lugar de `title` para evitar colisión con `HTMLElement.title`.\n   */\n  @property({ type: String })\n  heading = '';\n\n  /** Texto descriptivo secundario bajo el título. */\n  @property({ type: String })\n  description = '';\n\n  /**\n   * Carácter kanji como ilustración tipográfica (ej: 無, 空, 迷).\n   * Cuando se especifica, sustituye al slot `illustration`.\n   */\n  @property({ type: String })\n  kanji = '';\n\n  /**\n   * Tono cromático del icono.\n   * - neutral (default): washi\n   * - kaki: cálido, primer uso, atención\n   * - celadon: completado, éxito\n   * - error: fallo, acceso denegado\n   */\n  @property({ type: String, reflect: true })\n  tone: LibEmptyStateTone = 'neutral';\n\n  /**\n   * Disposición del componente.\n   * - default: columna centrada (pantallas, modales, paneles)\n   * - inline: fila con icono a la izquierda (tablas, banners)\n   */\n  @property({ type: String, reflect: true })\n  layout: LibEmptyStateLayout = 'default';\n\n  /**\n   * Tamaño del componente.\n   * - md (default): padding generoso, icono 72px\n   * - sm: compacto para sidebars y paneles secundarios\n   */\n  @property({ type: String, reflect: true })\n  size: LibEmptyStateSize = 'md';\n\n  /** Borde punteado + fondo `bg-surface`. Para zonas drop o sin contenido explícito. */\n  @property({ type: Boolean, reflect: true })\n  bordered = false;\n\n  /** Elimina el fondo y borde del icono. Para contextos de mínimo ruido visual. */\n  @property({ type: Boolean, reflect: true })\n  ghost = false;\n\n  override render(): TemplateResult {\n    return emptyStateTemplate({\n      heading:     this.heading,\n      description: this.description,\n      kanji:       this.kanji,\n      tone:        this.tone,\n      layout:      this.layout,\n      size:        this.size,\n      bordered:    this.bordered,\n      ghost:       this.ghost,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-empty-state': LibEmptyState;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyCO,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAWL,SAAA,UAAU;AAIV,SAAA,cAAc;AAOd,SAAA,QAAQ;AAUR,SAAA,OAA0B;AAQ1B,SAAA,SAA8B;AAQ9B,SAAA,OAA0B;AAI1B,SAAA,WAAW;AAIX,SAAA,QAAQ;AAAA,EAAA;AAAA,EAEC,SAAyB;AAChC,WAAO,mBAAmB;AAAA,MACxB,SAAa,KAAK;AAAA,MAClB,aAAa,KAAK;AAAA,MAClB,OAAa,KAAK;AAAA,MAClB,MAAa,KAAK;AAAA,MAClB,QAAa,KAAK;AAAA,MAClB,MAAa,KAAK;AAAA,MAClB,UAAa,KAAK;AAAA,MAClB,OAAa,KAAK;AAAA,IAAA,CACnB;AAAA,EACH;AACF;AAtEa,cACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,aAAa,CAAC;AAChC;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVf,cAWX,WAAA,WAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAdf,cAeX,WAAA,eAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBf,cAsBX,WAAA,SAAA,CAAA;AAUA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA/B9B,cAgCX,WAAA,QAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAvC9B,cAwCX,WAAA,UAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA/C9B,cAgDX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAnD/B,cAoDX,WAAA,YAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAvD/B,cAwDX,WAAA,SAAA,CAAA;AAxDW,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
+{"version":3,"file":"index52.js","sources":["../src/components/molecules/chip/lib-chip.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { chipTemplate } from './lib-chip.html';\nimport chipCss from './lib-chip.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { ChipKind, ChipSize, ChipColor } from './lib-chip.types';\n\n/**\n * lib-chip — Chip Shibui (SG-26)\n *\n * Tres familias semánticas controladas por `kind`:\n *   - static  → etiqueta read-only, taxonomía\n *   - toggle  → filtro seleccionable (aria-checkbox)\n *   - input   → tag removible con botón ×\n *\n * @prop kind       — 'static' | 'toggle' | 'input'\n * @prop size       — 'xs' | 'sm' | 'md' | 'lg'\n * @prop color      — 'default' | 'kaki' | 'celadon' | 'error' | 'info' | 'dark'\n * @prop selected   — Estado seleccionado (solo kind=toggle)\n * @prop dot        — Dot de color antes del texto\n * @prop aria-label — Texto accesible del chip\n *\n * @fires ui-lib-chip-toggle  — { detail: { selected: boolean } }  (kind=toggle)\n * @fires ui-lib-chip-remove  — { detail: {} }                     (kind=input)\n *\n * @slot         — Texto/label del chip\n * @slot icon    — Icono a la izquierda del texto\n * @slot avatar  — Avatar circular (solo kind=input, opcionalmente static)\n */\n@customElement('lib-chip')\nexport class LibChip extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(chipCss)}`,\n  ];\n\n  @property({ type: String, reflect: true })\n  kind: ChipKind = 'static';\n\n  @property({ type: String, reflect: true })\n  size: ChipSize = 'md';\n\n  @property({ type: String, reflect: true })\n  color: ChipColor = 'default';\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  dot = false;\n\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel = '';\n\n  @query('.chip-input')\n  declare private _inputEl: HTMLElement | null;\n\n  /* ── Toggle ── */\n  _handleToggle(): void {\n    this.selected = !this.selected;\n    this.dispatchEvent(new CustomEvent('ui-lib-chip-toggle', {\n      detail: { selected: this.selected },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ── Remove con animación de salida ── */\n  _handleRemove(e: MouseEvent): void {\n    e.stopPropagation();\n    const el = this._inputEl;\n    if (!el) {\n      this._emitRemove();\n      return;\n    }\n    el.classList.add('is-removing');\n    el.addEventListener('animationend', (): void => {\n      this._emitRemove();\n    }, { once: true });\n  }\n\n  private _emitRemove(): void {\n    this.dispatchEvent(new CustomEvent('ui-lib-chip-remove', {\n      detail: {},\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ── Animación de entrada (llamar desde fuera si se crea dinámicamente) ── */\n  animateIn(): void {\n    const el = this._inputEl ?? this.shadowRoot?.querySelector('.chip, .chip-toggle') as HTMLElement | null;\n    if (!el) return;\n    el.classList.remove('is-entering');\n    void el.offsetWidth; // reflow\n    el.classList.add('is-entering');\n    el.addEventListener('animationend', (): void => el.classList.remove('is-entering'), { once: true });\n  }\n\n  protected override render(): TemplateResult {\n    return chipTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-chip': LibChip;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BO,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,OAAiB;AAGjB,SAAA,OAAiB;AAGjB,SAAA,QAAmB;AAGnB,SAAA,WAAW;AAGX,SAAA,MAAM;AAGN,SAAS,YAAY;AAAA,EAAA;AAAA;AAAA,EAMrB,gBAAsB;AACpB,SAAK,WAAW,CAAC,KAAK;AACtB,SAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,MACvD,QAAQ,EAAE,UAAU,KAAK,SAAA;AAAA,MACzB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA;AAAA,EAGA,cAAc,GAAqB;AACjC,MAAE,gBAAA;AACF,UAAM,KAAK,KAAK;AAChB,QAAI,CAAC,IAAI;AACP,WAAK,YAAA;AACL;AAAA,IACF;AACA,OAAG,UAAU,IAAI,aAAa;AAC9B,OAAG,iBAAiB,gBAAgB,MAAY;AAC9C,WAAK,YAAA;AAAA,IACP,GAAG,EAAE,MAAM,MAAM;AAAA,EACnB;AAAA,EAEQ,cAAoB;AAC1B,SAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,MACvD,QAAQ,CAAA;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA;AAAA,EAGA,YAAkB;;AAChB,UAAM,KAAK,KAAK,cAAY,UAAK,eAAL,mBAAiB,cAAc;AAC3D,QAAI,CAAC,GAAI;AACT,OAAG,UAAU,OAAO,aAAa;AACjC,SAAK,GAAG;AACR,OAAG,UAAU,IAAI,aAAa;AAC9B,OAAG,iBAAiB,gBAAgB,MAAY,GAAG,UAAU,OAAO,aAAa,GAAG,EAAE,MAAM,KAAA,CAAM;AAAA,EACpG;AAAA,EAEmB,SAAyB;AAC1C,WAAO,aAAa,IAAI;AAAA,EAC1B;AACF;AAxEa,QACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,OAAO,CAAC;AAC1B;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAN9B,QAOX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAT9B,QAUX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAZ9B,QAaX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAf/B,QAgBX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,QAmBX,WAAA,OAAA,CAAA;AAGS,gBAAA;AAAA,EADR,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GArBxC,QAsBF,WAAA,aAAA,CAAA;AAGO,gBAAA;AAAA,EADf,MAAM,aAAa;AAAA,GAxBT,QAyBK,WAAA,YAAA,CAAA;AAzBL,UAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,OAAA;"}