@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index57.js

@@ -1,7 +1,7 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { rangeSliderTemplate } from "./index299.js";
-import sliderCss from "./index300.js";
+import { property, state, customElement } from "lit/decorators.js";
+import { headerTemplate } from "./index213.js";
+import headerCss from "./index214.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,155 +13,184 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibRangeSlider = class extends LitElement {
+let LibHeader = 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 = "";
+    this.variant = "classic";
+    this.logoMark = "渋";
+    this.brandName = "shibui";
+    this.brandTagline = "";
+    this.logoHref = "#";
+    this.version = "";
+    this.links = [];
+    this.actions = [];
+    this.loginLabel = "";
+    this.loginHref = "";
+    this.contactLabel = "";
+    this.contactHref = "";
+    this.announcement = "";
+    this.announcementHref = "";
+    this.megaColumns = [];
+    this.megaCta = null;
+    this.breadcrumbs = [];
+    this.showSearch = false;
+    this.searchPlaceholder = "Buscar…";
+    this.notifications = false;
+    this.userName = "";
+    this.userInitials = "";
+    this.compact = false;
+    this.shrunk = false;
+    this.scrolled = false;
+    this._megaOpen = false;
+    this._mobileOpen = false;
+    this._onScroll = () => {
+      const y = window.scrollY;
+      if (this.variant === "transparent") this.scrolled = y > 20;
+      if (this.variant === "shrink") this.shrunk = y > 60;
+    };
   }
-  /* ── 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 [];
+  /* ── Lifecycle ── */
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.variant === "transparent" || this.variant === "shrink") {
+      window.addEventListener("scroll", this._onScroll, { passive: true });
     }
   }
-  /* ── Handlers ────────────────────────────────────────── */
-  _onInput(e) {
-    this.value = parseFloat(e.target.value);
-    this._dispatchChange();
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("scroll", this._onScroll);
+  }
+  /* ── Mega-nav ── */
+  _openMega() {
+    this._megaOpen = true;
+  }
+  _closeMega() {
+    this._megaOpen = false;
+  }
+  /* ── Mobile drawer ── */
+  _toggleMobile() {
+    this._mobileOpen = !this._mobileOpen;
   }
-  _onInputMin(e) {
-    const v = parseFloat(e.target.value);
-    this.valueMin = Math.min(v, this.valueMax - this.step);
-    this._dispatchChange();
+  _closeMobile() {
+    this._mobileOpen = false;
+  }
+  /* ── Event dispatchers ── */
+  _onLinkClick(id) {
+    this._closeMobile();
+    this.dispatchEvent(new CustomEvent("ui-lib-header-link", {
+      detail: { id },
+      bubbles: true,
+      composed: true
+    }));
   }
-  _onInputMax(e) {
-    const v = parseFloat(e.target.value);
-    this.valueMax = Math.max(v, this.valueMin + this.step);
-    this._dispatchChange();
+  _onActionClick(action) {
+    this._closeMobile();
+    this.dispatchEvent(new CustomEvent("ui-lib-header-action", {
+      detail: { label: action.label, href: action.href },
+      bubbles: true,
+      composed: true
+    }));
   }
-  _dispatchChange() {
-    const detail = this.dual ? { valueMin: this.valueMin, valueMax: this.valueMax } : { value: this.value };
-    this.dispatchEvent(new CustomEvent("ui-lib-change", {
-      detail,
+  _onSearch(query) {
+    this.dispatchEvent(new CustomEvent("ui-lib-header-search", {
+      detail: { query },
       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)
-    });
+    return headerTemplate(this);
   }
 };
-LibRangeSlider.styles = [
+LibHeader.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(sliderCss)}`
+  css`${unsafeCSS(headerCss)}`
 ];
 __decorateClass([
-  property({ type: Number })
-], LibRangeSlider.prototype, "min", 2);
+  property({ type: String, reflect: true })
+], LibHeader.prototype, "variant", 2);
 __decorateClass([
-  property({ type: Number })
-], LibRangeSlider.prototype, "max", 2);
+  property({ type: String, attribute: "logo-mark" })
+], LibHeader.prototype, "logoMark", 2);
 __decorateClass([
-  property({ type: Number })
-], LibRangeSlider.prototype, "step", 2);
+  property({ type: String, attribute: "brand-name" })
+], LibHeader.prototype, "brandName", 2);
 __decorateClass([
-  property({ type: Number })
-], LibRangeSlider.prototype, "value", 2);
+  property({ type: String, attribute: "brand-tagline" })
+], LibHeader.prototype, "brandTagline", 2);
 __decorateClass([
-  property({ type: Number, attribute: "value-min" })
-], LibRangeSlider.prototype, "valueMin", 2);
+  property({ type: String, attribute: "logo-href" })
+], LibHeader.prototype, "logoHref", 2);
 __decorateClass([
-  property({ type: Number, attribute: "value-max" })
-], LibRangeSlider.prototype, "valueMax", 2);
+  property({ type: String })
+], LibHeader.prototype, "version", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibRangeSlider.prototype, "dual", 2);
+  property({ type: Array })
+], LibHeader.prototype, "links", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibRangeSlider.prototype, "vertical", 2);
+  property({ type: Array })
+], LibHeader.prototype, "actions", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibRangeSlider.prototype, "size", 2);
+  property({ type: String, attribute: "login-label" })
+], LibHeader.prototype, "loginLabel", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibRangeSlider.prototype, "tone", 2);
+  property({ type: String, attribute: "login-href" })
+], LibHeader.prototype, "loginHref", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibRangeSlider.prototype, "disabled", 2);
+  property({ type: String, attribute: "contact-label" })
+], LibHeader.prototype, "contactLabel", 2);
 __decorateClass([
-  property({ type: String })
-], LibRangeSlider.prototype, "label", 2);
+  property({ type: String, attribute: "contact-href" })
+], LibHeader.prototype, "contactHref", 2);
 __decorateClass([
   property({ type: String })
-], LibRangeSlider.prototype, "unit", 2);
+], LibHeader.prototype, "announcement", 2);
+__decorateClass([
+  property({ type: String, attribute: "announcement-href" })
+], LibHeader.prototype, "announcementHref", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "show-limits" })
-], LibRangeSlider.prototype, "showLimits", 2);
+  property({ type: Array, attribute: "mega-columns" })
+], LibHeader.prototype, "megaColumns", 2);
 __decorateClass([
-  property({ type: String, attribute: "limit-min" })
-], LibRangeSlider.prototype, "limitMin", 2);
+  property({ type: Object, attribute: "mega-cta" })
+], LibHeader.prototype, "megaCta", 2);
 __decorateClass([
-  property({ type: String, attribute: "limit-max" })
-], LibRangeSlider.prototype, "limitMax", 2);
+  property({ type: Array })
+], LibHeader.prototype, "breadcrumbs", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-search" })
+], LibHeader.prototype, "showSearch", 2);
+__decorateClass([
+  property({ type: String, attribute: "search-placeholder" })
+], LibHeader.prototype, "searchPlaceholder", 2);
 __decorateClass([
   property({ type: Boolean })
-], LibRangeSlider.prototype, "tooltip", 2);
+], LibHeader.prototype, "notifications", 2);
 __decorateClass([
-  property({ type: String })
-], LibRangeSlider.prototype, "marks", 2);
-LibRangeSlider = __decorateClass([
-  customElement("lib-range-slider")
-], LibRangeSlider);
+  property({ type: String, attribute: "user-name" })
+], LibHeader.prototype, "userName", 2);
+__decorateClass([
+  property({ type: String, attribute: "user-initials" })
+], LibHeader.prototype, "userInitials", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibHeader.prototype, "compact", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibHeader.prototype, "shrunk", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibHeader.prototype, "scrolled", 2);
+__decorateClass([
+  state()
+], LibHeader.prototype, "_megaOpen", 2);
+__decorateClass([
+  state()
+], LibHeader.prototype, "_mobileOpen", 2);
+LibHeader = __decorateClass([
+  customElement("lib-header")
+], LibHeader);
 export {
-  LibRangeSlider
+  LibHeader
 };
 //# sourceMappingURL=index57.js.map

package/dist/index57.js.map

@@ -1 +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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"}
+{"version":3,"file":"index57.js","sources":["../src/components/molecules/header/lib-header.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { headerTemplate }   from './lib-header.html';\nimport headerCss             from './lib-header.css?inline';\nimport sharedTokens          from '../../../styles/shared/tokens.css?inline';\nimport type {\n  HeaderVariant, NavLink, HeaderAction, BreadcrumbItem,\n} from './lib-header.types';\n\nexport interface MegaColumn {\n  title: string;\n  items: { label: string; href?: string }[];\n}\n\nexport interface MegaCta {\n  label: string; title: string; desc: string;\n  href?: string; cta: string;\n}\n\n/**\n * lib-header — Shibui UI · SG-66\n *\n * 10 variantes: classic · dark · centered · transparent · kintsugi ·\n *               glitch · mega · minimal · shrink · app-bar\n *\n * Mobile: breakpoint 640px — drawer vertical compartido por todas las variantes.\n */\n@customElement('lib-header')\nexport class LibHeader extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(headerCss)}`,\n  ];\n\n  /* ── Variant ── */\n  @property({ type: String, reflect: true })\n  variant: HeaderVariant = 'classic';\n\n  /* ── Logo ── */\n  @property({ type: String, attribute: 'logo-mark' })\n  logoMark = '渋';\n\n  @property({ type: String, attribute: 'brand-name' })\n  brandName = 'shibui';\n\n  @property({ type: String, attribute: 'brand-tagline' })\n  brandTagline = '';\n\n  @property({ type: String, attribute: 'logo-href' })\n  logoHref = '#';\n\n  @property({ type: String })\n  version = '';\n\n  /* ── Nav ── */\n  @property({ type: Array })\n  links: NavLink[] = [];\n\n  @property({ type: Array })\n  actions: HeaderAction[] = [];\n\n  @property({ type: String, attribute: 'login-label' })\n  loginLabel = '';\n\n  @property({ type: String, attribute: 'login-href' })\n  loginHref = '';\n\n  @property({ type: String, attribute: 'contact-label' })\n  contactLabel = '';\n\n  @property({ type: String, attribute: 'contact-href' })\n  contactHref = '';\n\n  /* ── Centered announcement ── */\n  @property({ type: String })\n  announcement = '';\n\n  @property({ type: String, attribute: 'announcement-href' })\n  announcementHref = '';\n\n  /* ── Mega-nav ── */\n  @property({ type: Array, attribute: 'mega-columns' })\n  megaColumns: MegaColumn[] = [];\n\n  @property({ type: Object, attribute: 'mega-cta' })\n  megaCta: MegaCta | null = null;\n\n  /* ── App-bar ── */\n  @property({ type: Array })\n  breadcrumbs: BreadcrumbItem[] = [];\n\n  @property({ type: Boolean, attribute: 'show-search' })\n  showSearch = false;\n\n  @property({ type: String, attribute: 'search-placeholder' })\n  searchPlaceholder = 'Buscar…';\n\n  @property({ type: Boolean })\n  notifications = false;\n\n  @property({ type: String, attribute: 'user-name' })\n  userName = '';\n\n  @property({ type: String, attribute: 'user-initials' })\n  userInitials = '';\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /* ── Scroll states ── */\n  @property({ type: Boolean, reflect: true })\n  shrunk = false;\n\n  @property({ type: Boolean, reflect: true })\n  scrolled = false;\n\n  /* ── Internal ── */\n  @state() _megaOpen    = false;\n  @state() _mobileOpen  = false;\n\n  /* ── Lifecycle ── */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.variant === 'transparent' || this.variant === 'shrink') {\n      window.addEventListener('scroll', this._onScroll, { passive: true });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('scroll', this._onScroll);\n  }\n\n  /* ── Scroll handler ── */\n  private _onScroll = (): void => {\n    const y = window.scrollY;\n    if (this.variant === 'transparent') this.scrolled = y > 20;\n    if (this.variant === 'shrink')      this.shrunk   = y > 60;\n  };\n\n  /* ── Mega-nav ── */\n  _openMega():  void { this._megaOpen = true; }\n  _closeMega(): void { this._megaOpen = false; }\n\n  /* ── Mobile drawer ── */\n  _toggleMobile(): void {\n    this._mobileOpen = !this._mobileOpen;\n  }\n\n  _closeMobile(): void {\n    this._mobileOpen = false;\n  }\n\n  /* ── Event dispatchers ── */\n  _onLinkClick(id: string): void {\n    this._closeMobile();\n    this.dispatchEvent(new CustomEvent('ui-lib-header-link', {\n      detail: { id }, bubbles: true, composed: true,\n    }));\n  }\n\n  _onActionClick(action: HeaderAction): void {\n    this._closeMobile();\n    this.dispatchEvent(new CustomEvent('ui-lib-header-action', {\n      detail: { label: action.label, href: action.href },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  _onSearch(query: string): void {\n    this.dispatchEvent(new CustomEvent('ui-lib-header-search', {\n      detail: { query }, bubbles: true, composed: true,\n    }));\n  }\n\n  protected override render(): TemplateResult {\n    return headerTemplate(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-header': LibHeader;\n  }\n}"],"names":[],"mappings":"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"}

package/dist/index58.js

@@ -1,188 +1,98 @@
-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>`;
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import sharedTokens from "./index196.js";
+import inputStyles from "./index215.js";
+import { inputTemplate } from "./index216.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)
+    });
   }
-  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>
-    `;
+  _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
+      })
+    );
   }
-  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)}
-  `;
-}
+  _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 {
-  treeSelectTemplate
+  LibInput
 };
 //# sourceMappingURL=index58.js.map