@shibui-ui/ui 1.6.0 → 1.7.0

package/dist/index58.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index58.js","sources":["../src/components/molecules/tree-select/lib-tree-select.component.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport { map } from 'lit/directives/map.js';\nimport type {\n  TreeNode,\n  TreeNodeState,\n  TreeSelectTemplateProps,\n  RenderNodeCtx,\n} from './lib-tree-node.types';\n\n/* ──────────────────────────────────────────────────────────────\n   HELPERS\n────────────────────────────────────────────────────────────── */\n\nfunction nodeMatchesSearch(node: TreeNode, term: string): boolean {\n  if (!term) return true;\n  const t = term.toLowerCase();\n  if (node.label.toLowerCase().includes(t)) return true;\n  return node.children?.some(c => nodeMatchesSearch(c, term)) ?? false;\n}\n\nfunction highlightLabel(label: string, term: string): TemplateResult {\n  if (!term) return html`${label}`;\n  const idx = label.toLowerCase().indexOf(term.toLowerCase());\n  if (idx === -1) return html`${label}`;\n  return html`${label.slice(0, idx)}<mark>${label.slice(idx, idx + term.length)}</mark>${label.slice(idx + term.length)}`;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   RENDERIZADO RECURSIVO DE NODO\n────────────────────────────────────────────────────────────── */\n\nfunction renderNode(\n  node: TreeNode,\n  ctx: RenderNodeCtx,\n  depth: number,\n  ancestorIsLast: boolean[],\n  isLast: boolean,\n): TemplateResult | typeof nothing {\n\n  if (ctx.searchValue && !nodeMatchesSearch(node, ctx.searchValue)) return nothing;\n\n  const st: TreeNodeState = ctx.nodeStates.get(node.id)\n    ?? { selected: false, indeterminate: false, expanded: false };\n\n  const hasKids    = (node.children?.length ?? 0) > 0;\n  const isExpanded = ctx.searchValue ? hasKids : st.expanded;\n\n  /* ── Líneas de indentación (estética bambú) ── */\n  const indent: TemplateResult | typeof nothing = depth > 0\n    ? html`<div class=\"ts-indent\">${\n        Array.from({ length: depth }, (_, i) => {\n          const isLastUnit      = i === depth - 1;\n          const ancestorWasLast = ancestorIsLast[i] ?? false;\n          const cls = [\n            'ts-indent-unit',\n            ancestorWasLast              ? 'ts-indent-no-line'   : '',\n            isLastUnit                   ? 'ts-indent-last'       : '',\n            isLastUnit && isLast         ? 'ts-indent-last-child' : '',\n          ].filter(Boolean).join(' ');\n          return html`<div class=\"${cls}\"></div>`;\n        })\n      }</div>`\n    : nothing;\n\n  /* ── Toggle expand/collapse ── */\n  const toggle: TemplateResult = hasKids\n    ? html`\n      <div\n        class=\"ts-toggle\"\n        @click=\"${(e: Event): void => { e.stopPropagation(); ctx.onToggle(node.id); }}\"\n        aria-label=\"${isExpanded ? 'Colapsar' : 'Expandir'}\"\n      >\n        <svg class=\"ts-toggle-icon\" viewBox=\"0 0 8 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n          <path d=\"M2 1.5l3 2.5-3 2.5\"/>\n        </svg>\n      </div>`\n    : html`<div class=\"ts-toggle-spacer\"></div>`;\n\n  /* ── Checkbox (solo en modo multi) ── */\n  const checkbox: TemplateResult | typeof nothing = ctx.multi\n    ? html`\n      <div class=\"ts-checkbox\">\n        <svg class=\"ts-checkbox-check\" viewBox=\"0 0 10 10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M1.5 5l2.5 2.5L8.5 2\"/>\n        </svg>\n        <div class=\"ts-checkbox-dash\"></div>\n      </div>`\n    : nothing;\n\n  /* ── Row classes ── */\n  const rowCls = [\n    'ts-node-row',\n    st.selected && !st.indeterminate ? 'is-selected'     : '',\n    st.indeterminate                  ? 'is-indeterminate' : '',\n  ].filter(Boolean).join(' ');\n\n  /* ── Badge (número de hijos directos) ── */\n  const badge: TemplateResult | typeof nothing = hasKids\n    ? html`<span class=\"ts-node-badge\">${node.children!.length}</span>`\n    : nothing;\n\n  /* ── Hijos (siempre en DOM, animados con grid-template-rows) ── */\n  const childAncestors = [...ancestorIsLast, isLast];\n  const children: TemplateResult | typeof nothing = hasKids\n    ? html`\n      <div class=\"ts-children\">\n        <div class=\"ts-children-inner\">\n          ${map(node.children!, (child, ci) =>\n            renderNode(child, ctx, depth + 1, childAncestors, ci === node.children!.length - 1)\n          )}\n        </div>\n      </div>`\n    : nothing;\n\n  return html`\n    <div class=\"ts-node ${isExpanded ? 'is-expanded' : ''}\">\n      <div class=\"${rowCls}\" @click=\"${(): void => ctx.onSelect(node)}\">\n        ${indent}\n        ${toggle}\n        ${checkbox}\n        <span class=\"ts-node-label\">${highlightLabel(node.label, ctx.searchValue)}</span>\n        ${badge}\n      </div>\n      ${children}\n    </div>\n  `;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   ÁRBOL COMPLETO\n────────────────────────────────────────────────────────────── */\nfunction renderTree(props: TreeSelectTemplateProps): TemplateResult {\n  const ctx: RenderNodeCtx = {\n    nodeStates:  props.nodeStates,\n    multi:       props.multi,\n    searchValue: props.searchValue,\n    onToggle:    props.onToggle,\n    onSelect:    props.onSelect,\n  };\n\n  const visibleNodes = props.nodes.filter(n =>\n    !props.searchValue || nodeMatchesSearch(n, props.searchValue)\n  );\n\n  if (visibleNodes.length === 0) {\n    return html`<div class=\"ts-empty\">${props.emptyText}</div>`;\n  }\n\n  return html`${map(visibleNodes, (node, i) =>\n    renderNode(node, ctx, 0, [], i === visibleNodes.length - 1)\n  )}`;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   BÚSQUEDA\n────────────────────────────────────────────────────────────── */\nfunction renderSearch(props: TreeSelectTemplateProps): TemplateResult | typeof nothing {\n  if (!props.searchable) return nothing;\n  return html`\n    <div class=\"ts-search-wrap\">\n      <svg class=\"ts-search-icon\" width=\"13\" height=\"13\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n        <circle cx=\"7\" cy=\"7\" r=\"5\"/><path d=\"M12 12l2.5 2.5\"/>\n      </svg>\n      <input\n        class=\"ts-search\"\n        type=\"text\"\n        placeholder=\"Buscar…\"\n        .value=\"${props.searchValue}\"\n        autocomplete=\"off\"\n        @input=\"${(e: Event): void => props.onSearch((e.target as HTMLInputElement).value)}\"\n      >\n    </div>\n  `;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   FOOTER (solo en multi)\n────────────────────────────────────────────────────────────── */\nfunction renderFooter(props: TreeSelectTemplateProps): TemplateResult | typeof nothing {\n  if (!props.multi) return nothing;\n  return html`\n    <div class=\"ts-footer\">\n      <span class=\"ts-footer-info\">${props.footerInfo}</span>\n      <div class=\"ts-footer-actions\">\n        <button class=\"ts-btn\" @click=\"${props.onClear}\">Limpiar</button>\n        ${props.inline\n          ? nothing\n          : html`<button class=\"ts-btn ts-btn-confirm\" @click=\"${props.onConfirm}\">Aplicar</button>`}\n      </div>\n    </div>\n  `;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   TAGS (multi dropdown — debajo del trigger)\n────────────────────────────────────────────────────────────── */\nfunction renderTags(props: TreeSelectTemplateProps): TemplateResult | typeof nothing {\n  if (!props.multi || props.inline) return nothing;\n  return html`\n    <div class=\"ts-tags\">\n      ${map(props.tags, tag => html`\n        <div class=\"ts-tag\">\n          ${tag.label}\n          <span class=\"ts-tag-remove\" @click=\"${(): void => props.onTagRemove(tag.id)}\">×</span>\n        </div>\n      `)}\n    </div>\n  `;\n}\n\n/* ──────────────────────────────────────────────────────────────\n   TEMPLATE PRINCIPAL\n────────────────────────────────────────────────────────────── */\nexport function treeSelectTemplate(props: TreeSelectTemplateProps): TemplateResult {\n\n  /* ── Modo INLINE ── */\n  if (props.inline) {\n    return html`\n      <div class=\"ts-inline\">\n        ${renderSearch(props)}\n        <div class=\"ts-tree\">${renderTree(props)}</div>\n        ${renderFooter(props)}\n      </div>\n    `;\n  }\n\n  /* ── Modo DROPDOWN ── */\n  return html`\n    <div class=\"ts-wrap\">\n\n      <div\n        class=\"ts-trigger\"\n        @click=\"${props.onTriggerClick}\"\n        aria-haspopup=\"listbox\"\n        aria-expanded=\"${props.open}\"\n      >\n        <span class=\"ts-trigger-label ${props.isPlaceholder ? 'is-placeholder' : ''}\">\n          ${props.isPlaceholder ? props.placeholder : props.triggerLabel}\n        </span>\n\n        ${props.multi && props.selectionCount > 0\n          ? html`<span class=\"ts-trigger-count\">${props.selectionCount}</span>`\n          : nothing}\n\n        <svg class=\"ts-trigger-chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n          <path d=\"M3 6l5 5 5-5\"/>\n        </svg>\n      </div>\n\n      <div class=\"ts-dropdown\" role=\"listbox\">\n        ${renderSearch(props)}\n        <div class=\"ts-tree\">${renderTree(props)}</div>\n        ${renderFooter(props)}\n      </div>\n\n    </div>\n\n    ${renderTags(props)}\n  `;\n}"],"names":["map"],"mappings":"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"}

package/dist/index59.js

@@ -0,0 +1,371 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import pickerCss from "./index302.js";
+import sharedTokens from "./index196.js";
+import { colorPickerTemplate, swatchGridTemplate } from "./index303.js";
+import { SHIBUI_SWATCHES } from "./index304.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;
+};
+function hslToHex(h, s, l) {
+  const sl = s / 100;
+  const ll = l / 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = sl * Math.min(ll, 1 - ll);
+  const f = (n) => ll - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return "#" + [f(0), f(8), f(4)].map((x) => Math.round(x * 255).toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+function hexToRgb(hex) {
+  const clean = hex.replace("#", "");
+  return {
+    r: parseInt(clean.slice(0, 2), 16),
+    g: parseInt(clean.slice(2, 4), 16),
+    b: parseInt(clean.slice(4, 6), 16)
+  };
+}
+function hexToHsl(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+    else if (max === gn) h = ((bn - rn) / d + 2) / 6;
+    else h = ((rn - gn) / d + 4) / 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function isValidHex(v) {
+  return /^#[0-9A-Fa-f]{6}$/.test(v);
+}
+let LibColorPicker = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "#B85A1E";
+    this.variant = "inline";
+    this.showAlpha = false;
+    this.dark = false;
+    this.disabled = false;
+    this.label = "";
+    this.saved = "";
+    this._cs = { h: 25, s: 70, l: 36, alpha: 100 };
+    this._inputMode = "hex";
+    this._open = false;
+    this._savedColors = [];
+    this._prevCs = { ...this._cs };
+    this._dragging = false;
+    this._onDocMouseMove = (e) => {
+      if (!this._dragging) return;
+      this._updateFromCanvasEvent(e);
+    };
+    this._onDocMouseUp = () => {
+      this._dragging = false;
+    };
+    this._onDocClick = (e) => {
+      var _a;
+      if (this.variant !== "trigger" || !this._open) return;
+      if (!this.contains(e.target) && !(((_a = this.shadowRoot) == null ? void 0 : _a.contains(e.target)) ?? false)) {
+        this._cancel();
+      }
+    };
+    this._onKeyDown = (e) => {
+      if (e.key === "Escape" && this._open) this._cancel();
+    };
+  }
+  /* ── Lifecycle ── */
+  connectedCallback() {
+    super.connectedCallback();
+    this._initFromValue(this.value);
+    if (this.saved) {
+      try {
+        this._savedColors = JSON.parse(this.saved);
+      } catch {
+      }
+    }
+    document.addEventListener("mouseup", this._onDocMouseUp);
+    document.addEventListener("mousemove", this._onDocMouseMove);
+    document.addEventListener("click", this._onDocClick);
+    document.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("mouseup", this._onDocMouseUp);
+    document.removeEventListener("mousemove", this._onDocMouseMove);
+    document.removeEventListener("click", this._onDocClick);
+    document.removeEventListener("keydown", this._onKeyDown);
+  }
+  /* ── API pública ── */
+  /** Devuelve el color actual en todos los formatos */
+  getValue() {
+    return this._buildColorResult();
+  }
+  /** Establece el color desde hex */
+  setValue(hex) {
+    this._initFromValue(hex);
+    this.requestUpdate();
+  }
+  /* ── Render ── */
+  render() {
+    const res = this._buildColorResult();
+    return colorPickerTemplate({
+      variant: this.variant,
+      label: this.label || res.hex,
+      panelOpen: this._open,
+      hex: res.hex,
+      r: res.r,
+      g: res.g,
+      b: res.b,
+      h: res.h,
+      s: res.s,
+      l: res.l,
+      alpha: res.alpha,
+      inputMode: this._inputMode,
+      savedColors: this._savedColors,
+      showAlpha: this.showAlpha,
+      onTriggerClick: () => this._togglePanel(),
+      onCanvasMousedown: (e) => this._startCanvasDrag(e),
+      onHueInput: (e) => this._onHueInput(e),
+      onAlphaInput: (e) => this._onAlphaSliderInput(e),
+      onModeToggle: () => this._cycleMode(),
+      onHexInput: (e) => this._onHexInput(e),
+      onRgbInput: (idx, e) => this._onRgbInput(idx, e),
+      onHslInput: (idx, e) => this._onHslInput(idx, e),
+      onAlphaNumInput: (e) => this._onAlphaNumInput(e),
+      onSaveColor: () => this._saveCurrentColor(),
+      onSavedClick: (hex) => this._applySavedColor(hex),
+      onCancel: () => this._cancel(),
+      onApply: () => this._apply()
+    });
+  }
+  /* ── Canvas drag ── */
+  _startCanvasDrag(e) {
+    this._dragging = true;
+    this._updateFromCanvasEvent(e);
+  }
+  _updateFromCanvasEvent(e) {
+    var _a;
+    const canvas = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".cp-canvas");
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+    this._cs = {
+      ...this._cs,
+      s: Math.round(x * 100),
+      l: Math.round((1 - y) * 100)
+    };
+    this._emitChange();
+  }
+  /* ── Sliders ── */
+  _onHueInput(e) {
+    this._cs = { ...this._cs, h: parseInt(e.target.value) };
+    this._emitChange();
+  }
+  _onAlphaSliderInput(e) {
+    this._cs = { ...this._cs, alpha: parseInt(e.target.value) };
+    this._emitChange();
+  }
+  /* ── Input mode ── */
+  _cycleMode() {
+    const modes = ["hex", "rgb", "hsl"];
+    const i = modes.indexOf(this._inputMode);
+    this._inputMode = modes[(i + 1) % modes.length];
+  }
+  /* ── Text inputs ── */
+  _onHexInput(e) {
+    const v = e.target.value;
+    if (isValidHex(v)) {
+      const hsl = hexToHsl(v);
+      this._cs = { ...this._cs, ...hsl };
+      this._emitChange();
+    }
+  }
+  _onRgbInput(idx, e) {
+    const val = parseInt(e.target.value) || 0;
+    const clamped = Math.max(0, Math.min(255, val));
+    const { r, g, b } = hexToRgb(this._buildHex());
+    const rgb = [r, g, b];
+    rgb[idx] = clamped;
+    const hex = "#" + rgb.map((x) => x.toString(16).padStart(2, "0")).join("").toUpperCase();
+    const hsl = hexToHsl(hex);
+    this._cs = { ...this._cs, ...hsl };
+    this._emitChange();
+  }
+  _onHslInput(idx, e) {
+    const val = parseInt(e.target.value) || 0;
+    const maxes = [360, 100, 100];
+    const clamped = Math.max(0, Math.min(maxes[idx], val));
+    const next = { ...this._cs };
+    if (idx === 0) next.h = clamped;
+    else if (idx === 1) next.s = clamped;
+    else next.l = clamped;
+    this._cs = next;
+    this._emitChange();
+  }
+  _onAlphaNumInput(e) {
+    const val = parseInt(e.target.value) || 0;
+    this._cs = { ...this._cs, alpha: Math.max(0, Math.min(100, val)) };
+    this._emitChange();
+  }
+  /* ── Saved colors ── */
+  _saveCurrentColor() {
+    const hex = this._buildHex();
+    if (!this._savedColors.includes(hex)) {
+      this._savedColors = [...this._savedColors, hex];
+    }
+  }
+  _applySavedColor(hex) {
+    this._initFromValue(hex);
+    this._emitChange();
+  }
+  /* ── Panel (trigger mode) ── */
+  _togglePanel() {
+    if (this._open) {
+      this._cancel();
+    } else {
+      this._prevCs = { ...this._cs };
+      this._open = true;
+    }
+  }
+  _cancel() {
+    this._cs = { ...this._prevCs };
+    this._open = false;
+  }
+  _apply() {
+    this._open = false;
+    this.dispatchEvent(new CustomEvent("ui-lib-apply", {
+      detail: this._buildColorResult(),
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /* ── Helpers ── */
+  _initFromValue(hex) {
+    if (!isValidHex(hex)) return;
+    const hsl = hexToHsl(hex);
+    this._cs = { ...this._cs, ...hsl };
+  }
+  _buildHex() {
+    return hslToHex(this._cs.h, this._cs.s, this._cs.l);
+  }
+  _buildColorResult() {
+    const hex = this._buildHex();
+    const { r, g, b } = hexToRgb(hex);
+    return { hex, r, g, b, ...this._cs };
+  }
+  _emitChange() {
+    this.dispatchEvent(new CustomEvent("ui-lib-change", {
+      detail: this._buildColorResult(),
+      bubbles: true,
+      composed: true
+    }));
+  }
+};
+LibColorPicker.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(pickerCss)}`
+];
+__decorateClass([
+  property({ type: String })
+], LibColorPicker.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibColorPicker.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "show-alpha" })
+], LibColorPicker.prototype, "showAlpha", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibColorPicker.prototype, "dark", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibColorPicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String })
+], LibColorPicker.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], LibColorPicker.prototype, "saved", 2);
+__decorateClass([
+  state()
+], LibColorPicker.prototype, "_cs", 2);
+__decorateClass([
+  state()
+], LibColorPicker.prototype, "_inputMode", 2);
+__decorateClass([
+  state()
+], LibColorPicker.prototype, "_open", 2);
+__decorateClass([
+  state()
+], LibColorPicker.prototype, "_savedColors", 2);
+LibColorPicker = __decorateClass([
+  customElement("lib-color-picker")
+], LibColorPicker);
+let LibColorSwatches = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.dark = false;
+    this.value = "";
+    this.rowsJson = "";
+  }
+  render() {
+    let rows = SHIBUI_SWATCHES;
+    if (this.rowsJson) {
+      try {
+        rows = JSON.parse(this.rowsJson);
+      } catch {
+      }
+    }
+    return swatchGridTemplate({
+      rows,
+      selected: this.value,
+      onSelect: (c) => {
+        this.value = c.value;
+        this.dispatchEvent(new CustomEvent("ui-lib-swatch-click", {
+          detail: c,
+          bubbles: true,
+          composed: true
+        }));
+      }
+    });
+  }
+};
+LibColorSwatches.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(pickerCss)}`
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibColorSwatches.prototype, "dark", 2);
+__decorateClass([
+  property({ type: String })
+], LibColorSwatches.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], LibColorSwatches.prototype, "rowsJson", 2);
+LibColorSwatches = __decorateClass([
+  customElement("lib-color-swatches")
+], LibColorSwatches);
+export {
+  LibColorPicker,
+  LibColorSwatches
+};
+//# sourceMappingURL=index59.js.map

package/dist/index59.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index59.js","sources":["../src/components/molecules/color-picker/lib-color-picker.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport pickerCss from './lib-color-picker.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { colorPickerTemplate, swatchGridTemplate } from './lib-color-picker.html';\nimport { SHIBUI_SWATCHES } from './lib-color-picker.types';\nimport type {\n  ColorPickerVariant,\n  ColorInputMode,\n  SwatchRow,\n  SwatchColor,\n  ColorState,\n} from './lib-color-picker.types';\n\n/* ──────────────────────────────────────\n   Color conversion utilities\n   ────────────────────────────────────── */\nfunction hslToHex(h: number, s: number, l: number): string {\n  const sl = s / 100;\n  const ll = l / 100;\n  const k  = (n: number): number => (n + h / 30) % 12;\n  const a  = sl * Math.min(ll, 1 - ll);\n  const f  = (n: number): number =>\n    ll - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));\n  return '#' + ([f(0), f(8), f(4)] as number[])\n    .map(x => Math.round(x * 255).toString(16).padStart(2, '0'))\n    .join('')\n    .toUpperCase();\n}\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } {\n  const clean = hex.replace('#', '');\n  return {\n    r: parseInt(clean.slice(0, 2), 16),\n    g: parseInt(clean.slice(2, 4), 16),\n    b: parseInt(clean.slice(4, 6), 16),\n  };\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } {\n  const { r, g, b } = hexToRgb(hex);\n  const rn = r / 255; const gn = g / 255; const bn = b / 255;\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  let h = 0; let s = 0;\n  const l = (max + min) / 2;\n\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    if (max === rn)      h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;\n    else if (max === gn) h = ((bn - rn) / d + 2) / 6;\n    else                 h = ((rn - gn) / d + 4) / 6;\n  }\n  return {\n    h: Math.round(h * 360),\n    s: Math.round(s * 100),\n    l: Math.round(l * 100),\n  };\n}\n\nfunction isValidHex(v: string): boolean {\n  return /^#[0-9A-Fa-f]{6}$/.test(v);\n}\n\n/**\n * @element lib-color-picker\n *\n * Selector de color con canvas 2D (saturación/luminosidad), slider de tono,\n * slider de opacidad, inputs HEX/RGB/HSL intercambiables y colores guardados.\n *\n * @prop {string}             value     — Color inicial en HEX (#RRGGBB)\n * @prop {ColorPickerVariant} variant   — inline · trigger (default: inline)\n * @prop {boolean}            show-alpha— Mostrar slider y campo de opacidad\n * @prop {boolean}            dark      — Modo oscuro\n * @prop {boolean}            disabled  — Desactivado\n * @prop {string}             label     — Texto del trigger (variant=trigger)\n * @prop {string}             saved     — Colores guardados iniciales (JSON array)\n *\n * @fires ui-lib-change       — {detail: {value: string, hex: string, r, g, b, h, s, l, alpha}}\n * @fires ui-lib-apply        — Igual a change pero solo al pulsar \"Aplicar\"\n * @fires ui-lib-swatch-click — {detail: {value: string, name?: string}} al clickar un swatch\n *\n * @method getValue()   — Devuelve el color actual como {hex, r, g, b, h, s, l, alpha}\n * @method setValue(hex)— Establece el color programáticamente\n */\n@customElement('lib-color-picker')\nexport class LibColorPicker extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(pickerCss)}`,\n  ];\n\n  /* ── Props ── */\n\n  @property({ type: String })\n  value = '#B85A1E';\n\n  @property({ type: String, reflect: true })\n  variant: ColorPickerVariant = 'inline';\n\n  @property({ type: Boolean, reflect: true, attribute: 'show-alpha' })\n  showAlpha = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  label = '';\n\n  /** Colores guardados iniciales — JSON array, e.g. '[\"#B85A1E\",\"#357164\"]' */\n  @property({ type: String })\n  saved = '';\n\n  /* ── Internal state ── */\n\n  @state() private _cs: ColorState = { h: 25, s: 70, l: 36, alpha: 100 };\n  @state() private _inputMode: ColorInputMode = 'hex';\n  @state() private _open = false;\n  @state() private _savedColors: string[] = [];\n\n  /** Color anterior al abrir, para cancelar */\n  private _prevCs: ColorState = { ...this._cs };\n\n  /** Dragging en el canvas */\n  private _dragging = false;\n\n  /* ── Lifecycle ── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._initFromValue(this.value);\n\n    if (this.saved) {\n      try { this._savedColors = JSON.parse(this.saved) as string[]; }\n      catch { /* ignore */ }\n    }\n\n    document.addEventListener('mouseup',   this._onDocMouseUp);\n    document.addEventListener('mousemove', this._onDocMouseMove);\n    document.addEventListener('click',     this._onDocClick);\n    document.addEventListener('keydown',   this._onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('mouseup',   this._onDocMouseUp);\n    document.removeEventListener('mousemove', this._onDocMouseMove);\n    document.removeEventListener('click',     this._onDocClick);\n    document.removeEventListener('keydown',   this._onKeyDown);\n  }\n\n  /* ── API pública ── */\n\n  /** Devuelve el color actual en todos los formatos */\n  public getValue(): { hex: string; r: number; g: number; b: number; h: number; s: number; l: number; alpha: number } {\n    return this._buildColorResult();\n  }\n\n  /** Establece el color desde hex */\n  public setValue(hex: string): void {\n    this._initFromValue(hex);\n    this.requestUpdate();\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    const res = this._buildColorResult();\n\n    return colorPickerTemplate({\n      variant:   this.variant,\n      label:     this.label || res.hex,\n      panelOpen: this._open,\n      hex: res.hex, r: res.r, g: res.g, b: res.b,\n      h: res.h, s: res.s, l: res.l,\n      alpha: res.alpha,\n      inputMode:   this._inputMode,\n      savedColors: this._savedColors,\n      showAlpha:   this.showAlpha,\n\n      onTriggerClick:    (): void                        => this._togglePanel(),\n      onCanvasMousedown: (e: MouseEvent): void           => this._startCanvasDrag(e),\n      onHueInput:        (e: Event): void                => this._onHueInput(e),\n      onAlphaInput:      (e: Event): void                => this._onAlphaSliderInput(e),\n      onModeToggle:      (): void                        => this._cycleMode(),\n      onHexInput:        (e: Event): void                => this._onHexInput(e),\n      onRgbInput:        (idx: 0|1|2, e: Event): void   => this._onRgbInput(idx, e),\n      onHslInput:        (idx: 0|1|2, e: Event): void   => this._onHslInput(idx, e),\n      onAlphaNumInput:   (e: Event): void                => this._onAlphaNumInput(e),\n      onSaveColor:       (): void                        => this._saveCurrentColor(),\n      onSavedClick:      (hex: string): void             => this._applySavedColor(hex),\n      onCancel:          (): void                        => this._cancel(),\n      onApply:           (): void                        => this._apply(),\n    });\n  }\n\n  /* ── Canvas drag ── */\n\n  private _startCanvasDrag(e: MouseEvent): void {\n    this._dragging = true;\n    this._updateFromCanvasEvent(e);\n  }\n\n  private _onDocMouseMove = (e: MouseEvent): void => {\n    if (!this._dragging) return;\n    this._updateFromCanvasEvent(e);\n  };\n\n  private _onDocMouseUp = (): void => { this._dragging = false; };\n\n  private _updateFromCanvasEvent(e: MouseEvent): void {\n    const canvas = this.shadowRoot?.querySelector('.cp-canvas');\n    if (!canvas) return;\n    const rect = canvas.getBoundingClientRect();\n    const x = Math.max(0, Math.min(1, (e.clientX - rect.left)  / rect.width));\n    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n    this._cs = {\n      ...this._cs,\n      s: Math.round(x * 100),\n      l: Math.round((1 - y) * 100),\n    };\n    this._emitChange();\n  }\n\n  /* ── Sliders ── */\n\n  private _onHueInput(e: Event): void {\n    this._cs = { ...this._cs, h: parseInt((e.target as HTMLInputElement).value) };\n    this._emitChange();\n  }\n\n  private _onAlphaSliderInput(e: Event): void {\n    this._cs = { ...this._cs, alpha: parseInt((e.target as HTMLInputElement).value) };\n    this._emitChange();\n  }\n\n  /* ── Input mode ── */\n\n  private _cycleMode(): void {\n    const modes: ColorInputMode[] = ['hex', 'rgb', 'hsl'];\n    const i = modes.indexOf(this._inputMode);\n    this._inputMode = modes[(i + 1) % modes.length]!;\n  }\n\n  /* ── Text inputs ── */\n\n  private _onHexInput(e: Event): void {\n    const v = (e.target as HTMLInputElement).value;\n    if (isValidHex(v)) {\n      const hsl = hexToHsl(v);\n      this._cs = { ...this._cs, ...hsl };\n      this._emitChange();\n    }\n  }\n\n  private _onRgbInput(idx: 0|1|2, e: Event): void {\n    const val = parseInt((e.target as HTMLInputElement).value) || 0;\n    const clamped = Math.max(0, Math.min(255, val));\n    const { r, g, b } = hexToRgb(this._buildHex());\n    const rgb: [number, number, number] = [r, g, b];\n    rgb[idx] = clamped;\n    const hex = '#' + (rgb as number[]).map(x => x.toString(16).padStart(2, '0')).join('').toUpperCase();\n    const hsl = hexToHsl(hex);\n    this._cs = { ...this._cs, ...hsl };\n    this._emitChange();\n  }\n\n  private _onHslInput(idx: 0|1|2, e: Event): void {\n    const val = parseInt((e.target as HTMLInputElement).value) || 0;\n    const maxes: [number, number, number] = [360, 100, 100];\n    const clamped = Math.max(0, Math.min(maxes[idx]!, val));\n    const next = { ...this._cs };\n    if (idx === 0) next.h = clamped;\n    else if (idx === 1) next.s = clamped;\n    else next.l = clamped;\n    this._cs = next;\n    this._emitChange();\n  }\n\n  private _onAlphaNumInput(e: Event): void {\n    const val = parseInt((e.target as HTMLInputElement).value) || 0;\n    this._cs = { ...this._cs, alpha: Math.max(0, Math.min(100, val)) };\n    this._emitChange();\n  }\n\n  /* ── Saved colors ── */\n\n  private _saveCurrentColor(): void {\n    const hex = this._buildHex();\n    if (!this._savedColors.includes(hex)) {\n      this._savedColors = [...this._savedColors, hex];\n    }\n  }\n\n  private _applySavedColor(hex: string): void {\n    this._initFromValue(hex);\n    this._emitChange();\n  }\n\n  /* ── Panel (trigger mode) ── */\n\n  private _togglePanel(): void {\n    if (this._open) {\n      this._cancel();\n    } else {\n      this._prevCs = { ...this._cs };\n      this._open = true;\n    }\n  }\n\n  private _cancel(): void {\n    this._cs = { ...this._prevCs };\n    this._open = false;\n  }\n\n  private _apply(): void {\n    this._open = false;\n    this.dispatchEvent(new CustomEvent('ui-lib-apply', {\n      detail: this._buildColorResult(),\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ── Close on outside click / Escape ── */\n\n  private _onDocClick = (e: MouseEvent): void => {\n    if (this.variant !== 'trigger' || !this._open) return;\n    if (!this.contains(e.target as Node) && !(this.shadowRoot?.contains(e.target as Node) ?? false)) {\n      this._cancel();\n    }\n  };\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this._open) this._cancel();\n  };\n\n  /* ── Helpers ── */\n\n  private _initFromValue(hex: string): void {\n    if (!isValidHex(hex)) return;\n    const hsl = hexToHsl(hex);\n    this._cs = { ...this._cs, ...hsl };\n  }\n\n  private _buildHex(): string {\n    return hslToHex(this._cs.h, this._cs.s, this._cs.l);\n  }\n\n  private _buildColorResult(): { hex: string; r: number; g: number; b: number; h: number; s: number; l: number; alpha: number } {\n    const hex = this._buildHex();\n    const { r, g, b } = hexToRgb(hex);\n    return { hex, r, g, b, ...this._cs };\n  }\n\n  private _emitChange(): void {\n    this.dispatchEvent(new CustomEvent('ui-lib-change', {\n      detail: this._buildColorResult(),\n      bubbles: true,\n      composed: true,\n    }));\n  }\n}\n\n/* ──────────────────────────────────────\n   Swatch-only component\n   ────────────────────────────────────── */\n\n/**\n * @element lib-color-swatches\n *\n * Cuadrícula de swatches de color. Puede usarse de forma independiente o\n * para mostrar la paleta del design system.\n *\n * @prop {boolean} dark\n * @prop {string}  value — Color seleccionado (hex)\n *\n * @fires ui-lib-swatch-click — {detail: {value, name}}\n */\n@customElement('lib-color-swatches')\nexport class LibColorSwatches extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(pickerCss)}`,\n  ];\n\n  @property({ type: Boolean, reflect: true }) dark     = false;\n  @property({ type: String })                 value    = '';\n  @property({ type: String })                 rowsJson = '';\n\n  protected override render(): TemplateResult {\n    let rows: SwatchRow[] = SHIBUI_SWATCHES;\n    if (this.rowsJson) {\n      try { rows = JSON.parse(this.rowsJson) as SwatchRow[]; } catch { /* ignore */ }\n    }\n    return swatchGridTemplate({\n      rows,\n      selected: this.value,\n      onSelect: (c: SwatchColor): void => {\n        this.value = c.value;\n        this.dispatchEvent(new CustomEvent('ui-lib-swatch-click', {\n          detail: c, bubbles: true, composed: true,\n        }));\n      },\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-color-picker':  LibColorPicker;\n    'lib-color-swatches': LibColorSwatches;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index6.js

@@ -0,0 +1,75 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { avatarTemplate } from "./index199.js";
+import avatarCss from "./index200.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 LibAvatar = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.name = "";
+    this.size = "md";
+    this.shape = "circle";
+    this.color = "washi";
+    this._hasError = false;
+  }
+  _getInitials(name) {
+    if (!name.trim()) return "";
+    return name.split(" ").map((p) => p[0]).join("").toUpperCase().substring(0, 2);
+  }
+  render() {
+    const initials = this._getInitials(this.name);
+    const showImage = !!this.src && !this._hasError;
+    return avatarTemplate({
+      src: this.src,
+      name: this.name,
+      size: this.size,
+      shape: this.shape,
+      color: this.color,
+      showImage,
+      initials,
+      onError: () => {
+        this._hasError = true;
+      }
+    });
+  }
+};
+LibAvatar.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(avatarCss)}`
+];
+__decorateClass([
+  property({ type: String })
+], LibAvatar.prototype, "src", 2);
+__decorateClass([
+  property({ type: String })
+], LibAvatar.prototype, "name", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibAvatar.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibAvatar.prototype, "shape", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibAvatar.prototype, "color", 2);
+__decorateClass([
+  state()
+], LibAvatar.prototype, "_hasError", 2);
+LibAvatar = __decorateClass([
+  customElement("lib-avatar")
+], LibAvatar);
+export {
+  LibAvatar
+};
+//# sourceMappingURL=index6.js.map

package/dist/index6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index6.js","sources":["../src/components/atoms/avatar/lib-avatar.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { LibAvatarSize, LibAvatarShape, LibAvatarColor } from './lib-avatar.html';\nimport { avatarTemplate } from './lib-avatar.html';\nimport avatarCss from './lib-avatar.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-avatar\n *\n * Avatar con tres modos de contenido: imagen, iniciales e icono.\n * Jerarquia: si src falla -> iniciales -> slot default (icono).\n *\n * @slot          - Icono de fallback cuando no hay imagen ni iniciales\n * @slot status   - Indicador de estado (lib-status-dot)\n *\n * @example\n * <lib-avatar src=\"...\" name=\"Ana Bel\" size=\"lg\" color=\"kaki\"></lib-avatar>\n * <lib-avatar name=\"Ana Bel\" shape=\"squircle\">\n *   <lib-status-dot slot=\"status\" variant=\"success\" pulse></lib-status-dot>\n * </lib-avatar>\n */\n@customElement('lib-avatar')\nexport class LibAvatar extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(avatarCss)}`,\n  ];\n\n  /** URL de la imagen */\n  @property({ type: String })\n  src = '';\n\n  /** Nombre completo — genera las iniciales automáticamente */\n  @property({ type: String })\n  name = '';\n\n  /** Escala de tamaño */\n  @property({ type: String, reflect: true })\n  size: LibAvatarSize = 'md';\n\n  /** Forma del avatar */\n  @property({ type: String, reflect: true })\n  shape: LibAvatarShape = 'circle';\n\n  /** Paleta de color para el fondo de iniciales/icono */\n  @property({ type: String, reflect: true })\n  color: LibAvatarColor = 'washi';\n\n  @state() private _hasError = false;\n\n  private _getInitials(name: string): string {\n    if (!name.trim()) return '';\n    return name\n      .split(' ')\n      .map(p => p[0])\n      .join('')\n      .toUpperCase()\n      .substring(0, 2);\n  }\n\n  override render(): TemplateResult {\n    const initials  = this._getInitials(this.name);\n    const showImage = !!this.src && !this._hasError;\n\n    return avatarTemplate({\n      src: this.src,\n      name: this.name,\n      size: this.size,\n      shape: this.shape,\n      color: this.color,\n      showImage,\n      initials,\n      onError: () => { this._hasError = true; },\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-avatar': LibAvatar;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,MAAM;AAIN,SAAA,OAAO;AAIP,SAAA,OAAsB;AAItB,SAAA,QAAwB;AAIxB,SAAA,QAAwB;AAEf,SAAQ,YAAY;AAAA,EAAA;AAAA,EAErB,aAAa,MAAsB;AACzC,QAAI,CAAC,KAAK,KAAA,EAAQ,QAAO;AACzB,WAAO,KACJ,MAAM,GAAG,EACT,IAAI,OAAK,EAAE,CAAC,CAAC,EACb,KAAK,EAAE,EACP,cACA,UAAU,GAAG,CAAC;AAAA,EACnB;AAAA,EAES,SAAyB;AAChC,UAAM,WAAY,KAAK,aAAa,KAAK,IAAI;AAC7C,UAAM,YAAY,CAAC,CAAC,KAAK,OAAO,CAAC,KAAK;AAEtC,WAAO,eAAe;AAAA,MACpB,KAAK,KAAK;AAAA,MACV,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,OAAO,KAAK;AAAA,MACZ;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAE,aAAK,YAAY;AAAA,MAAM;AAAA,IAAA,CACzC;AAAA,EACH;AACF;AArDa,UACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,SAAS,CAAC;AAC5B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,UAQX,WAAA,OAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAXf,UAYX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAf9B,UAgBX,WAAA,QAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAnB9B,UAoBX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAvB9B,UAwBX,WAAA,SAAA,CAAA;AAEiB,gBAAA;AAAA,EAAhB,MAAA;AAAM,GA1BI,UA0BM,WAAA,aAAA,CAAA;AA1BN,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}

package/dist/index60.js

@@ -0,0 +1,111 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { paginationTemplate } from "./index305.js";
+import paginationCss from "./index306.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 LibPagination = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.totalItems = 0;
+    this.itemsPerPage = 10;
+    this.currentPage = 1;
+    this.siblings = 1;
+    this.size = "md";
+    this.variant = "default";
+    this.dark = false;
+    this.showInfo = false;
+    this.ariaLabel = "Paginación";
+    this._onKeyDown = (e) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        this._changePage(this.currentPage - 1);
+      }
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        this._changePage(this.currentPage + 1);
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        this._changePage(1);
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        this._changePage(this.totalPages);
+      }
+    };
+  }
+  /* ── Computed ── */
+  get totalPages() {
+    return Math.max(1, Math.ceil(this.totalItems / this.itemsPerPage));
+  }
+  /* ── Cambio de página ── */
+  _changePage(page) {
+    if (page < 1 || page > this.totalPages || page === this.currentPage) return;
+    const prev = this.currentPage;
+    this.currentPage = page;
+    this.dispatchEvent(new CustomEvent("ui-lib-page-change", {
+      detail: { page: this.currentPage, prev },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onKeyDown);
+  }
+  render() {
+    return paginationTemplate(this);
+  }
+};
+LibPagination.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(paginationCss)}`
+];
+__decorateClass([
+  property({ type: Number, attribute: "total-items" })
+], LibPagination.prototype, "totalItems", 2);
+__decorateClass([
+  property({ type: Number, attribute: "items-per-page" })
+], LibPagination.prototype, "itemsPerPage", 2);
+__decorateClass([
+  property({ type: Number, attribute: "current-page", reflect: true })
+], LibPagination.prototype, "currentPage", 2);
+__decorateClass([
+  property({ type: Number })
+], LibPagination.prototype, "siblings", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibPagination.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibPagination.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibPagination.prototype, "dark", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-info" })
+], LibPagination.prototype, "showInfo", 2);
+__decorateClass([
+  property({ type: String, attribute: "aria-label" })
+], LibPagination.prototype, "ariaLabel", 2);
+LibPagination = __decorateClass([
+  customElement("lib-pagination")
+], LibPagination);
+export {
+  LibPagination
+};
+//# sourceMappingURL=index60.js.map

package/dist/index60.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index60.js","sources":["../src/components/molecules/pagination/lib-pagination.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { paginationTemplate } from './lib-pagination.html';\nimport paginationCss from './lib-pagination.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { PaginationSize, PaginationVariant } from './lib-pagination.types';\n\n/**\n * lib-pagination — Paginación Shibui\n *\n * @prop total-items    — Total de registros\n * @prop items-per-page — Registros por página (default 10)\n * @prop current-page   — Página activa (1-indexed, default 1)\n * @prop siblings       — Páginas visibles a cada lado de la actual (default 1)\n * @prop size           — 'sm' | 'md' | 'lg' (default 'md')\n * @prop variant        — 'default' | 'outline' | 'ghost'\n * @prop dark           — Tema oscuro\n * @prop show-info      — Muestra \"X–Y de Z resultados\"\n * @prop aria-label     — Etiqueta accesible del nav (default 'Paginación')\n *\n * @fires ui-lib-page-change — { detail: { page: number, prev: number } }\n *\n * @readonly totalPages — Número total de páginas calculado\n */\n@customElement('lib-pagination')\nexport class LibPagination extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(paginationCss)}`,\n  ];\n\n  @property({ type: Number, attribute: 'total-items' })\n  totalItems = 0;\n\n  @property({ type: Number, attribute: 'items-per-page' })\n  itemsPerPage = 10;\n\n  @property({ type: Number, attribute: 'current-page', reflect: true })\n  currentPage = 1;\n\n  /** Páginas visibles a cada lado de la página actual antes de los ellipsis */\n  @property({ type: Number })\n  siblings = 1;\n\n  @property({ type: String, reflect: true })\n  size: PaginationSize = 'md';\n\n  @property({ type: String, reflect: true })\n  variant: PaginationVariant = 'default';\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, attribute: 'show-info' })\n  showInfo = false;\n\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel = 'Paginación';\n\n  /* ── Computed ── */\n  get totalPages(): number {\n    return Math.max(1, Math.ceil(this.totalItems / this.itemsPerPage));\n  }\n\n  /* ── Cambio de página ── */\n  _changePage(page: number): void {\n    if (page < 1 || page > this.totalPages || page === this.currentPage) return;\n    const prev = this.currentPage;\n    this.currentPage = page;\n    this.dispatchEvent(new CustomEvent('ui-lib-page-change', {\n      detail: { page: this.currentPage, prev },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /* ── Teclado en el nav ── */\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'ArrowLeft')  { e.preventDefault(); this._changePage(this.currentPage - 1); }\n    if (e.key === 'ArrowRight') { e.preventDefault(); this._changePage(this.currentPage + 1); }\n    if (e.key === 'Home')       { e.preventDefault(); this._changePage(1); }\n    if (e.key === 'End')        { e.preventDefault(); this._changePage(this.totalPages); }\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  }\n\n  protected override render(): TemplateResult {\n    return paginationTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-pagination': LibPagination;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAyBO,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,aAAa;AAGb,SAAA,eAAe;AAGf,SAAA,cAAc;AAId,SAAA,WAAW;AAGX,SAAA,OAAuB;AAGvB,SAAA,UAA6B;AAG7B,SAAA,OAAO;AAGP,SAAA,WAAW;AAGX,SAAS,YAAY;AAoBrB,SAAQ,aAAa,CAAC,MAA2B;AAC/C,UAAI,EAAE,QAAQ,aAAc;AAAE,UAAE,eAAA;AAAkB,aAAK,YAAY,KAAK,cAAc,CAAC;AAAA,MAAG;AAC1F,UAAI,EAAE,QAAQ,cAAc;AAAE,UAAE,eAAA;AAAkB,aAAK,YAAY,KAAK,cAAc,CAAC;AAAA,MAAG;AAC1F,UAAI,EAAE,QAAQ,QAAc;AAAE,UAAE,eAAA;AAAkB,aAAK,YAAY,CAAC;AAAA,MAAG;AACvE,UAAI,EAAE,QAAQ,OAAc;AAAE,UAAE,eAAA;AAAkB,aAAK,YAAY,KAAK,UAAU;AAAA,MAAG;AAAA,IACvF;AAAA,EAAA;AAAA;AAAA,EAtBA,IAAI,aAAqB;AACvB,WAAO,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,aAAa,KAAK,YAAY,CAAC;AAAA,EACnE;AAAA;AAAA,EAGA,YAAY,MAAoB;AAC9B,QAAI,OAAO,KAAK,OAAO,KAAK,cAAc,SAAS,KAAK,YAAa;AACrE,UAAM,OAAO,KAAK;AAClB,SAAK,cAAc;AACnB,SAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,MACvD,QAAQ,EAAE,MAAM,KAAK,aAAa,KAAA;AAAA,MAClC,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAUS,oBAA0B;AACjC,UAAM,kBAAA;AACN,SAAK,iBAAiB,WAAW,KAAK,UAAU;AAAA,EAClD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,SAAK,oBAAoB,WAAW,KAAK,UAAU;AAAA,EACrD;AAAA,EAEmB,SAAyB;AAC1C,WAAO,mBAAmB,IAAI;AAAA,EAChC;AACF;AAxEa,cACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,aAAa,CAAC;AAChC;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GANzC,cAOX,WAAA,cAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB;AAAA,GAT5C,cAUX,WAAA,gBAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,SAAS,MAAM;AAAA,GAZzD,cAaX,WAAA,eAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,cAiBX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAnB9B,cAoBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtB9B,cAuBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAzB/B,cA0BX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GA5BxC,cA6BX,WAAA,YAAA,CAAA;AAGS,gBAAA;AAAA,EADR,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GA/BxC,cAgCF,WAAA,aAAA,CAAA;AAhCE,gBAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,aAAA;"}