@shibui-ui/ui 1.6.0 → 1.7.0

package/dist/index55.js

@@ -0,0 +1,167 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, queryAll, customElement } from "lit/decorators.js";
+import segmentedCss from "./index295.js";
+import sharedTokens from "./index196.js";
+import { segmentedTemplate } from "./index296.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 LibSegmentedControl = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+    this.value = "";
+    this.variant = "outline";
+    this.size = "md";
+    this.full = false;
+    this.iconOnly = false;
+    this.disabled = false;
+    this.glitch = false;
+    this._thumbStyle = "";
+  }
+  /* ── Ciclo de vida ── */
+  firstUpdated() {
+    this._updateThumb();
+  }
+  updated(changed) {
+    if (changed.has("value") || changed.has("variant") || changed.has("options")) {
+      Promise.resolve().then(() => this._updateThumb());
+    }
+  }
+  /* ── Thumb engine ── */
+  _updateThumb() {
+    const idx = this.options.findIndex((o) => o.value === this.value);
+    if (idx === -1) return;
+    const el = this._optionEls[idx];
+    if (!el) return;
+    const isUnderline = this.variant === "underline" || this.variant === "dark-underline";
+    const w = el.offsetWidth;
+    const x = isUnderline ? el.offsetLeft : el.offsetLeft - this._getTrackPadding();
+    this._thumbStyle = `width:${w}px;transform:translateX(${x}px)`;
+  }
+  _getTrackPadding() {
+    const track = this.renderRoot.querySelector(".seg");
+    if (!track) return 3;
+    return parseInt(getComputedStyle(track).paddingLeft, 10) || 3;
+  }
+  /* ── Selección ── */
+  _handleSelect(option, evt) {
+    if (this.disabled || option.disabled) return;
+    const previousValue = this.value;
+    if (option.value === previousValue) return;
+    this.value = option.value;
+    if (this.glitch) {
+      const idx = this.options.findIndex((o) => o.value === this.value);
+      const node = this._optionEls[idx];
+      if (node) {
+        node.classList.add("glitch-on");
+        setTimeout(() => node.classList.remove("glitch-on"), 340);
+      }
+    }
+    this._triggerRipple(evt);
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-change", {
+        detail: { value: this.value, previousValue },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _triggerRipple(evt) {
+    const target = evt.currentTarget;
+    if (!target) return;
+    let wrap = target.querySelector(".seg-ripple");
+    if (!wrap) {
+      wrap = document.createElement("div");
+      wrap.className = "seg-ripple";
+      target.appendChild(wrap);
+    }
+    const dot = document.createElement("div");
+    dot.className = "seg-ripple-dot";
+    dot.style.left = "50%";
+    dot.style.top = "50%";
+    dot.style.marginLeft = "-2px";
+    dot.style.marginTop = "-2px";
+    wrap.appendChild(dot);
+    setTimeout(() => dot.remove(), 400);
+  }
+  /* ── API pública ── */
+  /** Selecciona un valor programáticamente */
+  select(value) {
+    const opt = this.options.find((o) => o.value === value);
+    if (opt && !opt.disabled) {
+      const prev = this.value;
+      this.value = value;
+      this.dispatchEvent(
+        new CustomEvent("ui-lib-change", {
+          detail: { value, previousValue: prev },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  /* ── Render ── */
+  render() {
+    return segmentedTemplate({
+      options: this.options,
+      value: this.value,
+      variant: this.variant,
+      size: this.size,
+      full: this.full,
+      iconOnly: this.iconOnly,
+      disabled: this.disabled,
+      glitch: this.glitch,
+      thumbStyle: this._thumbStyle,
+      onSelect: (opt, evt) => this._handleSelect(opt, evt)
+    });
+  }
+};
+LibSegmentedControl.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(segmentedCss)}`
+];
+__decorateClass([
+  property({ type: Array })
+], LibSegmentedControl.prototype, "options", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibSegmentedControl.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibSegmentedControl.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibSegmentedControl.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibSegmentedControl.prototype, "full", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "icon-only" })
+], LibSegmentedControl.prototype, "iconOnly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibSegmentedControl.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibSegmentedControl.prototype, "glitch", 2);
+__decorateClass([
+  state()
+], LibSegmentedControl.prototype, "_thumbStyle", 2);
+__decorateClass([
+  queryAll(".seg-option")
+], LibSegmentedControl.prototype, "_optionEls", 2);
+LibSegmentedControl = __decorateClass([
+  customElement("lib-segmented-control")
+], LibSegmentedControl);
+export {
+  LibSegmentedControl
+};
+//# sourceMappingURL=index55.js.map

package/dist/index55.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index55.js","sources":["../src/components/molecules/segmented-control/lib-segmented-control.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state, queryAll } from 'lit/decorators.js';\nimport segmentedCss from './lib-segmented-control.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { segmentedTemplate } from './lib-segmented-control.html';\nimport type {\n  SegmentedOption,\n  SegmentedVariant,\n  SegmentedSize,\n  SegmentedChangeDetail,\n} from './lib-segmented-control.types';\n\n/**\n * @element lib-segmented-control\n *\n * Control de selección exclusiva entre N opciones.\n * El thumb se desplaza con `transform: translateX` calculado sobre\n * el `offsetLeft` / `offsetWidth` del option activo.\n *\n * @prop {SegmentedOption[]} options  — Array de opciones\n * @prop {string}            value    — Valor activo (reflected)\n * @prop {SegmentedVariant}  variant  — Superficie visual (reflected)\n * @prop {SegmentedSize}     size     — Tamaño (reflected)\n * @prop {boolean}           full     — Ocupa el 100% del ancho (reflected)\n * @prop {boolean}           icon-only — Solo iconos, sin texto (reflected)\n * @prop {boolean}           disabled — Deshabilitado (reflected)\n * @prop {boolean}           glitch   — Efecto de corrupción al cambiar (reflected)\n *\n * @fires ui-lib-change — Al cambiar la selección\n *   Detail: { value: string, previousValue: string }\n *\n * @slot — No usa slots; las opciones se pasan vía `.options`\n */\n@customElement('lib-segmented-control')\nexport class LibSegmentedControl extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(segmentedCss)}`,\n  ];\n\n  /* ── Props públicas ── */\n\n  @property({ type: Array })\n  options: SegmentedOption[] = [];\n\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: String, reflect: true })\n  variant: SegmentedVariant = 'outline';\n\n  @property({ type: String, reflect: true })\n  size: SegmentedSize = 'md';\n\n  @property({ type: Boolean, reflect: true })\n  full = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'icon-only' })\n  iconOnly = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  glitch = false;\n\n  /* ── Estado interno ── */\n\n  @state() private _thumbStyle = '';\n\n  /** Referencia a los nodos .seg-option en el Shadow DOM */\n  @queryAll('.seg-option')\n  private declare _optionEls: NodeListOf<HTMLElement>;\n\n  /* ── Ciclo de vida ── */\n\n  protected override firstUpdated(): void {\n    this._updateThumb();\n  }\n\n  protected override updated(changed: Map<PropertyKey, unknown>): void {\n    if (changed.has('value') || changed.has('variant') || changed.has('options')) {\n      // next microtask — el DOM ya refleja el nuevo estado\n      Promise.resolve().then((): void => this._updateThumb());\n    }\n  }\n\n  /* ── Thumb engine ── */\n\n  private _updateThumb(): void {\n    const idx = this.options.findIndex(o => o.value === this.value);\n    if (idx === -1) return;\n\n    // Acceso seguro con ! — el índice está dentro de los límites de options\n    const el = this._optionEls[idx];\n    if (!el) return;\n\n    const isUnderline =\n      this.variant === 'underline' || this.variant === 'dark-underline';\n\n    const w = el.offsetWidth;\n    // Para underline el offset no necesita corrección de padding del track\n    const x = isUnderline\n      ? el.offsetLeft\n      : el.offsetLeft - this._getTrackPadding();\n\n    this._thumbStyle = `width:${w}px;transform:translateX(${x}px)`;\n  }\n\n  private _getTrackPadding(): number {\n    const track = this.renderRoot.querySelector<HTMLElement>('.seg');\n    if (!track) return 3;\n    return parseInt(getComputedStyle(track).paddingLeft, 10) || 3;\n  }\n\n  /* ── Selección ── */\n\n  private _handleSelect(option: SegmentedOption, evt: MouseEvent): void {\n    if (this.disabled || option.disabled) return;\n    const previousValue = this.value;\n    if (option.value === previousValue) return;\n\n    this.value = option.value;\n\n    // Glitch flash\n    if (this.glitch) {\n      const idx  = this.options.findIndex(o => o.value === this.value);\n      const node = this._optionEls[idx];\n      if (node) {\n        node.classList.add('glitch-on');\n        setTimeout((): void => node.classList.remove('glitch-on'), 340);\n      }\n    }\n\n    // Ripple\n    this._triggerRipple(evt);\n\n    this.dispatchEvent(\n      new CustomEvent<SegmentedChangeDetail>('ui-lib-change', {\n        detail: { value: this.value, previousValue },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _triggerRipple(evt: MouseEvent): void {\n    const target = evt.currentTarget as HTMLElement | null;\n    if (!target) return;\n\n    let wrap = target.querySelector<HTMLElement>('.seg-ripple');\n    if (!wrap) {\n      wrap = document.createElement('div');\n      wrap.className = 'seg-ripple';\n      target.appendChild(wrap);\n    }\n\n    const dot = document.createElement('div');\n    dot.className = 'seg-ripple-dot';\n    dot.style.left      = '50%';\n    dot.style.top       = '50%';\n    dot.style.marginLeft = '-2px';\n    dot.style.marginTop  = '-2px';\n    wrap.appendChild(dot);\n    setTimeout((): void => dot.remove(), 400);\n  }\n\n  /* ── API pública ── */\n\n  /** Selecciona un valor programáticamente */\n  public select(value: string): void {\n    const opt = this.options.find(o => o.value === value);\n    if (opt && !opt.disabled) {\n      const prev = this.value;\n      this.value = value;\n      this.dispatchEvent(\n        new CustomEvent<SegmentedChangeDetail>('ui-lib-change', {\n          detail: { value, previousValue: prev },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    return segmentedTemplate({\n      options:    this.options,\n      value:      this.value,\n      variant:    this.variant,\n      size:       this.size,\n      full:       this.full,\n      iconOnly:   this.iconOnly,\n      disabled:   this.disabled,\n      glitch:     this.glitch,\n      thumbStyle: this._thumbStyle,\n      onSelect:   (opt, evt): void => this._handleSelect(opt, evt),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-segmented-control': LibSegmentedControl;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index56.js

@@ -0,0 +1,98 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import sharedTokens from "./index196.js";
+import inputStyles from "./index297.js";
+import { inputTemplate } from "./index298.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 LibInput = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.placeholder = "";
+    this.type = "text";
+    this.required = false;
+    this.disabled = false;
+    this.error = false;
+    this.errorMessage = "";
+    this.value = "";
+    this._showPassword = false;
+    this._uuid = `lib-input-${Math.random().toString(36).slice(2, 9)}`;
+  }
+  render() {
+    return inputTemplate({
+      uuid: this._uuid,
+      type: this.type,
+      label: this.label,
+      placeholder: this.placeholder,
+      required: this.required,
+      disabled: this.disabled,
+      error: this.error,
+      errorMessage: this.errorMessage,
+      value: this.value,
+      showPassword: this._showPassword,
+      handleInput: this._handleInput.bind(this),
+      handleTogglePassword: this._handleTogglePassword.bind(this)
+    });
+  }
+  _handleInput(e) {
+    const target = e.target;
+    this.value = target.value;
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-input", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _handleTogglePassword() {
+    this._showPassword = !this._showPassword;
+  }
+};
+LibInput.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(inputStyles)}`
+];
+__decorateClass([
+  property({ type: String })
+], LibInput.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], LibInput.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: String })
+], LibInput.prototype, "type", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibInput.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibInput.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibInput.prototype, "error", 2);
+__decorateClass([
+  property({ type: String })
+], LibInput.prototype, "errorMessage", 2);
+__decorateClass([
+  property({ type: String })
+], LibInput.prototype, "value", 2);
+__decorateClass([
+  state()
+], LibInput.prototype, "_showPassword", 2);
+LibInput = __decorateClass([
+  customElement("lib-input")
+], LibInput);
+export {
+  LibInput
+};
+//# sourceMappingURL=index56.js.map

package/dist/index56.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index56.js","sources":["../src/components/molecules/input/lib-input.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport inputStyles from './lib-input.css?inline';\nimport { inputTemplate } from './lib-input.html';\n\nexport interface LibInputEventDetail {\n  value: string;\n}\n\n/**\n * @element lib-input\n * @fires ui-lib-input - Evento disparado al cambiar el valor del input.\n * @slot prefix - Icono o elemento antes del input.\n * @slot suffix - Icono o elemento después del input.\n */\n@customElement('lib-input')\nexport class LibInput extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(inputStyles)}`,\n  ];\n\n  @property({ type: String }) label = '';\n  @property({ type: String }) placeholder = '';\n  @property({ type: String }) type: 'text' | 'email' | 'password' = 'text';\n  @property({ type: Boolean, reflect: true }) required = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: String }) errorMessage = '';\n  @property({ type: String }) value = '';\n\n  @state() private _showPassword = false;\n\n  private readonly _uuid = `lib-input-${Math.random().toString(36).slice(2, 9)}`;\n\n  override render(): TemplateResult {\n    return inputTemplate({\n      uuid: this._uuid,\n      type: this.type,\n      label: this.label,\n      placeholder: this.placeholder,\n      required: this.required,\n      disabled: this.disabled,\n      error: this.error,\n      errorMessage: this.errorMessage,\n      value: this.value,\n      showPassword: this._showPassword,\n      handleInput: this._handleInput.bind(this),\n      handleTogglePassword: this._handleTogglePassword.bind(this),\n    });\n  }\n\n  private _handleInput(e: InputEvent): void {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n\n    this.dispatchEvent(\n      new CustomEvent<LibInputEventDetail>('ui-lib-input', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _handleTogglePassword(): void {\n    this._showPassword = !this._showPassword;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-input': LibInput;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiBO,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AAMuB,SAAA,QAAQ;AACR,SAAA,cAAc;AACd,SAAA,OAAsC;AACtB,SAAA,WAAW;AACX,SAAA,WAAW;AACX,SAAA,QAAQ;AACxB,SAAA,eAAe;AACf,SAAA,QAAQ;AAE3B,SAAQ,gBAAgB;AAEjC,SAAiB,QAAQ,aAAa,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAAA,EAAA;AAAA,EAEnE,SAAyB;AAChC,WAAO,cAAc;AAAA,MACnB,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,aAAa,KAAK;AAAA,MAClB,UAAU,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,MACZ,cAAc,KAAK;AAAA,MACnB,OAAO,KAAK;AAAA,MACZ,cAAc,KAAK;AAAA,MACnB,aAAa,KAAK,aAAa,KAAK,IAAI;AAAA,MACxC,sBAAsB,KAAK,sBAAsB,KAAK,IAAI;AAAA,IAAA,CAC3D;AAAA,EACH;AAAA,EAEQ,aAAa,GAAqB;AACxC,UAAM,SAAS,EAAE;AACjB,SAAK,QAAQ,OAAO;AAEpB,SAAK;AAAA,MACH,IAAI,YAAiC,gBAAgB;AAAA,QACnD,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,wBAA8B;AACpC,SAAK,gBAAgB,CAAC,KAAK;AAAA,EAC7B;AACF;AApDa,SACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,WAAW,CAAC;AAC9B;AAE4B,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,SAMiB,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,SAOiB,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,SAQiB,WAAA,QAAA,CAAA;AACgB,gBAAA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAT/B,SASiC,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAV/B,SAUiC,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAX/B,SAWiC,WAAA,SAAA,CAAA;AAChB,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAZf,SAYiB,WAAA,gBAAA,CAAA;AACA,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbf,SAaiB,WAAA,SAAA,CAAA;AAEX,gBAAA;AAAA,EAAhB,MAAA;AAAM,GAfI,SAeM,WAAA,iBAAA,CAAA;AAfN,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}

package/dist/index57.js

@@ -0,0 +1,167 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { rangeSliderTemplate } from "./index299.js";
+import sliderCss from "./index300.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 LibRangeSlider = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.value = 50;
+    this.valueMin = 25;
+    this.valueMax = 75;
+    this.dual = false;
+    this.vertical = false;
+    this.size = "md";
+    this.tone = "default";
+    this.disabled = false;
+    this.label = "";
+    this.unit = "";
+    this.showLimits = false;
+    this.limitMin = "";
+    this.limitMax = "";
+    this.tooltip = false;
+    this.marks = "";
+  }
+  /* ── Computed ────────────────────────────────────────── */
+  _pct(v) {
+    const clamped = Math.min(Math.max(v, this.min), this.max);
+    return (clamped - this.min) / (this.max - this.min) * 100;
+  }
+  get _parsedMarks() {
+    if (!this.marks) return [];
+    try {
+      return JSON.parse(this.marks);
+    } catch {
+      return [];
+    }
+  }
+  /* ── Handlers ────────────────────────────────────────── */
+  _onInput(e) {
+    this.value = parseFloat(e.target.value);
+    this._dispatchChange();
+  }
+  _onInputMin(e) {
+    const v = parseFloat(e.target.value);
+    this.valueMin = Math.min(v, this.valueMax - this.step);
+    this._dispatchChange();
+  }
+  _onInputMax(e) {
+    const v = parseFloat(e.target.value);
+    this.valueMax = Math.max(v, this.valueMin + this.step);
+    this._dispatchChange();
+  }
+  _dispatchChange() {
+    const detail = this.dual ? { valueMin: this.valueMin, valueMax: this.valueMax } : { value: this.value };
+    this.dispatchEvent(new CustomEvent("ui-lib-change", {
+      detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+  render() {
+    return rangeSliderTemplate({
+      size: this.size,
+      tone: this.tone,
+      dual: this.dual,
+      vertical: this.vertical,
+      disabled: this.disabled,
+      tooltip: this.tooltip,
+      min: this.min,
+      max: this.max,
+      step: this.step,
+      value: this.value,
+      valueMin: this.valueMin,
+      valueMax: this.valueMax,
+      pct: this._pct(this.value),
+      minPct: this._pct(this.valueMin),
+      maxPct: this._pct(this.valueMax),
+      label: this.label,
+      unit: this.unit,
+      showLimits: this.showLimits,
+      limitMinText: this.limitMin || String(this.min),
+      limitMaxText: this.limitMax || String(this.max),
+      marks: this._parsedMarks,
+      onInput: this._onInput.bind(this),
+      onInputMin: this._onInputMin.bind(this),
+      onInputMax: this._onInputMax.bind(this)
+    });
+  }
+};
+LibRangeSlider.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(sliderCss)}`
+];
+__decorateClass([
+  property({ type: Number })
+], LibRangeSlider.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], LibRangeSlider.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], LibRangeSlider.prototype, "step", 2);
+__decorateClass([
+  property({ type: Number })
+], LibRangeSlider.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number, attribute: "value-min" })
+], LibRangeSlider.prototype, "valueMin", 2);
+__decorateClass([
+  property({ type: Number, attribute: "value-max" })
+], LibRangeSlider.prototype, "valueMax", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibRangeSlider.prototype, "dual", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibRangeSlider.prototype, "vertical", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibRangeSlider.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibRangeSlider.prototype, "tone", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibRangeSlider.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String })
+], LibRangeSlider.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], LibRangeSlider.prototype, "unit", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-limits" })
+], LibRangeSlider.prototype, "showLimits", 2);
+__decorateClass([
+  property({ type: String, attribute: "limit-min" })
+], LibRangeSlider.prototype, "limitMin", 2);
+__decorateClass([
+  property({ type: String, attribute: "limit-max" })
+], LibRangeSlider.prototype, "limitMax", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LibRangeSlider.prototype, "tooltip", 2);
+__decorateClass([
+  property({ type: String })
+], LibRangeSlider.prototype, "marks", 2);
+LibRangeSlider = __decorateClass([
+  customElement("lib-range-slider")
+], LibRangeSlider);
+export {
+  LibRangeSlider
+};
+//# sourceMappingURL=index57.js.map

package/dist/index57.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index57.js","sources":["../src/components/molecules/range-slider/lib-range-slider.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { rangeSliderTemplate } from './lib-range-slider.html';\nimport sliderCss from './lib-range-slider.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\nexport type RsSize = 'sm' | 'md' | 'lg';\nexport type RsTone = 'default' | 'kaki' | 'celadon' | 'error' | 'washi' | 'dark';\n\nexport interface RsMark {\n  /** Posición 0–100 sobre el track */\n  pct: number;\n  /** Etiqueta opcional bajo la marca */\n  label?: string;\n}\n\n/**\n * @element lib-range-slider\n *\n * Control de selección de valor numérico — single, dual y vertical.\n *\n * @prop value      — valor actual (modo single)\n * @prop value-min  — valor inferior (modo dual)\n * @prop value-max  — valor superior (modo dual)\n * @prop dual       — activa dos thumbs para rango min/max\n * @prop vertical   — orientación vertical\n * @prop tooltip    — globito flotante sobre el thumb (solo single horizontal)\n * @prop marks      — JSON string de marcas: '[{\"pct\":0,\"label\":\"XS\"},...]'\n * @prop show-limits — muestra min/max labels bajo el track\n * @prop limit-min / limit-max — texto personalizado de los extremos\n *\n * @fires ui-lib-change — { value } (single) | { valueMin, valueMax } (dual)\n *\n * @example single\n * <lib-range-slider label=\"Volumen\" value=\"48\" unit=\"%\" show-limits></lib-range-slider>\n *\n * @example dual\n * <lib-range-slider dual label=\"Precio\" value-min=\"120\" value-max=\"480\"\n *   unit=\"€\" show-limits limit-min=\"0 €\" limit-max=\"500 €\" tone=\"kaki\">\n * </lib-range-slider>\n *\n * @example vertical\n * <lib-range-slider vertical tone=\"kaki\" value=\"80\" label=\"Bajo\"\n *   style=\"height:220px\"></lib-range-slider>\n */\n@customElement('lib-range-slider')\nexport class LibRangeSlider extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(sliderCss)}`,\n  ];\n\n  /* ── Range attrs ─────────────────────────────────────── */\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  @property({ type: Number })\n  step = 1;\n\n  /* ── Values ──────────────────────────────────────────── */\n  /** Valor actual — modo single. */\n  @property({ type: Number })\n  value = 50;\n\n  /** Límite inferior — modo dual. */\n  @property({ type: Number, attribute: 'value-min' })\n  valueMin = 25;\n\n  /** Límite superior — modo dual. */\n  @property({ type: Number, attribute: 'value-max' })\n  valueMax = 75;\n\n  /* ── Modes ───────────────────────────────────────────── */\n  @property({ type: Boolean, reflect: true })\n  dual = false;\n\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /* ── Appearance ──────────────────────────────────────── */\n  @property({ type: String, reflect: true })\n  size: RsSize = 'md';\n\n  @property({ type: String, reflect: true })\n  tone: RsTone = 'default';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /* ── Display ─────────────────────────────────────────── */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  unit = '';\n\n  @property({ type: Boolean, attribute: 'show-limits' })\n  showLimits = false;\n\n  /** Texto personalizado extremo izquierdo/abajo. Por defecto: `min`. */\n  @property({ type: String, attribute: 'limit-min' })\n  limitMin = '';\n\n  /** Texto personalizado extremo derecho/arriba. Por defecto: `max`. */\n  @property({ type: String, attribute: 'limit-max' })\n  limitMax = '';\n\n  /* ── Extras ──────────────────────────────────────────── */\n  /** Globito flotante sobre el thumb (solo modo single horizontal). */\n  @property({ type: Boolean })\n  tooltip = false;\n\n  /**\n   * Marcas de paso como JSON string.\n   * Formato: '[{\"pct\":0,\"label\":\"XS\"},{\"pct\":25,\"label\":\"S\"},...]'\n   * `pct` = posición 0–100 sobre el track. `label` es opcional.\n   */\n  @property({ type: String })\n  marks = '';\n\n  /* ── Computed ────────────────────────────────────────── */\n  private _pct(v: number): number {\n    const clamped = Math.min(Math.max(v, this.min), this.max);\n    return ((clamped - this.min) / (this.max - this.min)) * 100;\n  }\n\n  private get _parsedMarks(): RsMark[] {\n    if (!this.marks) return [];\n    try { return JSON.parse(this.marks) as RsMark[]; }\n    catch { return []; }\n  }\n\n  /* ── Handlers ────────────────────────────────────────── */\n  private _onInput(e: Event): void {\n    this.value = parseFloat((e.target as HTMLInputElement).value);\n    this._dispatchChange();\n  }\n\n  private _onInputMin(e: Event): void {\n    const v = parseFloat((e.target as HTMLInputElement).value);\n    this.valueMin = Math.min(v, this.valueMax - this.step);\n    this._dispatchChange();\n  }\n\n  private _onInputMax(e: Event): void {\n    const v = parseFloat((e.target as HTMLInputElement).value);\n    this.valueMax = Math.max(v, this.valueMin + this.step);\n    this._dispatchChange();\n  }\n\n  private _dispatchChange(): void {\n    const detail = this.dual\n      ? { valueMin: this.valueMin, valueMax: this.valueMax }\n      : { value: this.value };\n\n    this.dispatchEvent(new CustomEvent('ui-lib-change', {\n      detail,\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render(): TemplateResult {\n    return rangeSliderTemplate({\n      size:     this.size,\n      tone:     this.tone,\n      dual:     this.dual,\n      vertical: this.vertical,\n      disabled: this.disabled,\n      tooltip:  this.tooltip,\n      min:      this.min,\n      max:      this.max,\n      step:     this.step,\n      value:    this.value,\n      valueMin: this.valueMin,\n      valueMax: this.valueMax,\n      pct:      this._pct(this.value),\n      minPct:   this._pct(this.valueMin),\n      maxPct:   this._pct(this.valueMax),\n      label:        this.label,\n      unit:         this.unit,\n      showLimits:   this.showLimits,\n      limitMinText: this.limitMin  || String(this.min),\n      limitMaxText: this.limitMax  || String(this.max),\n      marks:        this._parsedMarks,\n      onInput:    this._onInput.bind(this),\n      onInputMin: this._onInputMin.bind(this),\n      onInputMax: this._onInputMax.bind(this),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-range-slider': LibRangeSlider;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index58.js

@@ -0,0 +1,188 @@
+import { html, nothing } from "lit";
+import { map as o } from "./index301.js";
+function nodeMatchesSearch(node, term) {
+  var _a;
+  if (!term) return true;
+  const t = term.toLowerCase();
+  if (node.label.toLowerCase().includes(t)) return true;
+  return ((_a = node.children) == null ? void 0 : _a.some((c) => nodeMatchesSearch(c, term))) ?? false;
+}
+function highlightLabel(label, term) {
+  if (!term) return html`${label}`;
+  const idx = label.toLowerCase().indexOf(term.toLowerCase());
+  if (idx === -1) return html`${label}`;
+  return html`${label.slice(0, idx)}<mark>${label.slice(idx, idx + term.length)}</mark>${label.slice(idx + term.length)}`;
+}
+function renderNode(node, ctx, depth, ancestorIsLast, isLast) {
+  var _a;
+  if (ctx.searchValue && !nodeMatchesSearch(node, ctx.searchValue)) return nothing;
+  const st = ctx.nodeStates.get(node.id) ?? { selected: false, indeterminate: false, expanded: false };
+  const hasKids = (((_a = node.children) == null ? void 0 : _a.length) ?? 0) > 0;
+  const isExpanded = ctx.searchValue ? hasKids : st.expanded;
+  const indent = depth > 0 ? html`<div class="ts-indent">${Array.from({ length: depth }, (_, i) => {
+    const isLastUnit = i === depth - 1;
+    const ancestorWasLast = ancestorIsLast[i] ?? false;
+    const cls = [
+      "ts-indent-unit",
+      ancestorWasLast ? "ts-indent-no-line" : "",
+      isLastUnit ? "ts-indent-last" : "",
+      isLastUnit && isLast ? "ts-indent-last-child" : ""
+    ].filter(Boolean).join(" ");
+    return html`<div class="${cls}"></div>`;
+  })}</div>` : nothing;
+  const toggle = hasKids ? html`
+      <div
+        class="ts-toggle"
+        @click="${(e) => {
+    e.stopPropagation();
+    ctx.onToggle(node.id);
+  }}"
+        aria-label="${isExpanded ? "Colapsar" : "Expandir"}"
+      >
+        <svg class="ts-toggle-icon" viewBox="0 0 8 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+          <path d="M2 1.5l3 2.5-3 2.5"/>
+        </svg>
+      </div>` : html`<div class="ts-toggle-spacer"></div>`;
+  const checkbox = ctx.multi ? html`
+      <div class="ts-checkbox">
+        <svg class="ts-checkbox-check" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M1.5 5l2.5 2.5L8.5 2"/>
+        </svg>
+        <div class="ts-checkbox-dash"></div>
+      </div>` : nothing;
+  const rowCls = [
+    "ts-node-row",
+    st.selected && !st.indeterminate ? "is-selected" : "",
+    st.indeterminate ? "is-indeterminate" : ""
+  ].filter(Boolean).join(" ");
+  const badge = hasKids ? html`<span class="ts-node-badge">${node.children.length}</span>` : nothing;
+  const childAncestors = [...ancestorIsLast, isLast];
+  const children = hasKids ? html`
+      <div class="ts-children">
+        <div class="ts-children-inner">
+          ${o(
+    node.children,
+    (child, ci) => renderNode(child, ctx, depth + 1, childAncestors, ci === node.children.length - 1)
+  )}
+        </div>
+      </div>` : nothing;
+  return html`
+    <div class="ts-node ${isExpanded ? "is-expanded" : ""}">
+      <div class="${rowCls}" @click="${() => ctx.onSelect(node)}">
+        ${indent}
+        ${toggle}
+        ${checkbox}
+        <span class="ts-node-label">${highlightLabel(node.label, ctx.searchValue)}</span>
+        ${badge}
+      </div>
+      ${children}
+    </div>
+  `;
+}
+function renderTree(props) {
+  const ctx = {
+    nodeStates: props.nodeStates,
+    multi: props.multi,
+    searchValue: props.searchValue,
+    onToggle: props.onToggle,
+    onSelect: props.onSelect
+  };
+  const visibleNodes = props.nodes.filter(
+    (n) => !props.searchValue || nodeMatchesSearch(n, props.searchValue)
+  );
+  if (visibleNodes.length === 0) {
+    return html`<div class="ts-empty">${props.emptyText}</div>`;
+  }
+  return html`${o(
+    visibleNodes,
+    (node, i) => renderNode(node, ctx, 0, [], i === visibleNodes.length - 1)
+  )}`;
+}
+function renderSearch(props) {
+  if (!props.searchable) return nothing;
+  return html`
+    <div class="ts-search-wrap">
+      <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">
+        <circle cx="7" cy="7" r="5"/><path d="M12 12l2.5 2.5"/>
+      </svg>
+      <input
+        class="ts-search"
+        type="text"
+        placeholder="Buscar…"
+        .value="${props.searchValue}"
+        autocomplete="off"
+        @input="${(e) => props.onSearch(e.target.value)}"
+      >
+    </div>
+  `;
+}
+function renderFooter(props) {
+  if (!props.multi) return nothing;
+  return html`
+    <div class="ts-footer">
+      <span class="ts-footer-info">${props.footerInfo}</span>
+      <div class="ts-footer-actions">
+        <button class="ts-btn" @click="${props.onClear}">Limpiar</button>
+        ${props.inline ? nothing : html`<button class="ts-btn ts-btn-confirm" @click="${props.onConfirm}">Aplicar</button>`}
+      </div>
+    </div>
+  `;
+}
+function renderTags(props) {
+  if (!props.multi || props.inline) return nothing;
+  return html`
+    <div class="ts-tags">
+      ${o(props.tags, (tag) => html`
+        <div class="ts-tag">
+          ${tag.label}
+          <span class="ts-tag-remove" @click="${() => props.onTagRemove(tag.id)}">×</span>
+        </div>
+      `)}
+    </div>
+  `;
+}
+function treeSelectTemplate(props) {
+  if (props.inline) {
+    return html`
+      <div class="ts-inline">
+        ${renderSearch(props)}
+        <div class="ts-tree">${renderTree(props)}</div>
+        ${renderFooter(props)}
+      </div>
+    `;
+  }
+  return html`
+    <div class="ts-wrap">
+
+      <div
+        class="ts-trigger"
+        @click="${props.onTriggerClick}"
+        aria-haspopup="listbox"
+        aria-expanded="${props.open}"
+      >
+        <span class="ts-trigger-label ${props.isPlaceholder ? "is-placeholder" : ""}">
+          ${props.isPlaceholder ? props.placeholder : props.triggerLabel}
+        </span>
+
+        ${props.multi && props.selectionCount > 0 ? html`<span class="ts-trigger-count">${props.selectionCount}</span>` : nothing}
+
+        <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">
+          <path d="M3 6l5 5 5-5"/>
+        </svg>
+      </div>
+
+      <div class="ts-dropdown" role="listbox">
+        ${renderSearch(props)}
+        <div class="ts-tree">${renderTree(props)}</div>
+        ${renderFooter(props)}
+      </div>
+
+    </div>
+
+    ${renderTags(props)}
+  `;
+}
+export {
+  treeSelectTemplate
+};
+//# sourceMappingURL=index58.js.map