@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index62.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
+import { rangeSliderTemplate } from "./index223.js";
+import sliderCss from "./index224.js";
 import sharedTokens from "./index196.js";
-import modalCss from "./index309.js";
-import { modalTemplate } from "./index310.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,135 +13,155 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibModal = class extends LitElement {
+let LibRangeSlider = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.open = false;
+    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.variant = "default";
-    this._animate = "scale";
-    this.dark = false;
-    this.heading = "";
-    this.subtitle = "";
-    this.iconTone = null;
-    this.footerInfo = "";
-    this.noBackdropClose = false;
-    this._prevFocus = null;
-    this._onKeydown = (e) => {
-      if (e.key === "Escape" && this.open) {
-        e.stopPropagation();
-        this._close("escape");
-      }
-    };
+    this.tone = "default";
+    this.disabled = false;
+    this.label = "";
+    this.unit = "";
+    this.showLimits = false;
+    this.limitMin = "";
+    this.limitMax = "";
+    this.tooltip = false;
+    this.marks = "";
   }
-  /* ── Lifecycle ──────────────────────────────────────────── */
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("keydown", this._onKeydown, true);
+  /* ── Computed ────────────────────────────────────────── */
+  _pct(v) {
+    const clamped = Math.min(Math.max(v, this.min), this.max);
+    return (clamped - this.min) / (this.max - this.min) * 100;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("keydown", this._onKeydown, true);
-    if (this.open) document.body.style.overflow = "";
-  }
-  updated(changed) {
-    if (!changed.has("open")) return;
-    if (this.open) {
-      this._prevFocus = document.activeElement;
-      document.body.style.overflow = "hidden";
-      requestAnimationFrame(() => this._focusFirst());
-    } else {
-      document.body.style.overflow = "";
-      if (this._prevFocus instanceof HTMLElement) {
-        this._prevFocus.focus();
-      }
-      this._prevFocus = null;
+  get _parsedMarks() {
+    if (!this.marks) return [];
+    try {
+      return JSON.parse(this.marks);
+    } catch {
+      return [];
     }
   }
-  /* ── API pública ────────────────────────────────────────── */
-  /** Cierra el modal programáticamente. */
-  close() {
-    this._close("button");
+  /* ── Handlers ────────────────────────────────────────── */
+  _onInput(e) {
+    this.value = parseFloat(e.target.value);
+    this._dispatchChange();
   }
-  /* ── Helpers privados ───────────────────────────────────── */
-  _close(reason) {
-    this.open = false;
-    this.dispatchEvent(
-      new CustomEvent("ui-lib-modal-close", {
-        detail: { reason },
-        bubbles: true,
-        composed: true
-      })
-    );
+  _onInputMin(e) {
+    const v = parseFloat(e.target.value);
+    this.valueMin = Math.min(v, this.valueMax - this.step);
+    this._dispatchChange();
   }
-  _onBackdropClick(e) {
-    if (!this.noBackdropClose && e.target === e.currentTarget) {
-      this._close("backdrop");
-    }
+  _onInputMax(e) {
+    const v = parseFloat(e.target.value);
+    this.valueMax = Math.max(v, this.valueMin + this.step);
+    this._dispatchChange();
   }
-  _focusFirst() {
-    const panel = this.renderRoot.querySelector(".mo-panel");
-    if (!panel) return;
-    const focusable = panel.querySelector(
-      'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    );
-    focusable == null ? void 0 : focusable.focus();
+  _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 ─────────────────────────────────────────────── */
   render() {
-    return modalTemplate({
-      open: this.open,
+    return rangeSliderTemplate({
       size: this.size,
-      variant: this.variant,
-      _animate: this._animate,
-      dark: this.dark,
-      heading: this.heading,
-      subtitle: this.subtitle,
-      iconTone: this.iconTone,
-      footerInfo: this.footerInfo,
-      onClose: () => this._close("button"),
-      onBackdropClick: (e) => this._onBackdropClick(e)
+      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)
     });
   }
 };
-LibModal.styles = [
+LibRangeSlider.styles = [
   css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(modalCss)}`
+  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 })
-], LibModal.prototype, "open", 2);
+], LibRangeSlider.prototype, "dual", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibModal.prototype, "size", 2);
+  property({ type: Boolean, reflect: true })
+], LibRangeSlider.prototype, "vertical", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibModal.prototype, "variant", 2);
+], LibRangeSlider.prototype, "size", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibModal.prototype, "_animate", 2);
+], LibRangeSlider.prototype, "tone", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibModal.prototype, "dark", 2);
+], LibRangeSlider.prototype, "disabled", 2);
 __decorateClass([
   property({ type: String })
-], LibModal.prototype, "heading", 2);
+], LibRangeSlider.prototype, "label", 2);
 __decorateClass([
   property({ type: String })
-], LibModal.prototype, "subtitle", 2);
+], LibRangeSlider.prototype, "unit", 2);
 __decorateClass([
-  property({ type: String, attribute: "icon-tone" })
-], LibModal.prototype, "iconTone", 2);
+  property({ type: Boolean, attribute: "show-limits" })
+], LibRangeSlider.prototype, "showLimits", 2);
 __decorateClass([
-  property({ type: String, attribute: "footer-info" })
-], LibModal.prototype, "footerInfo", 2);
+  property({ type: String, attribute: "limit-min" })
+], LibRangeSlider.prototype, "limitMin", 2);
 __decorateClass([
-  property({ type: Boolean, attribute: "no-backdrop-close" })
-], LibModal.prototype, "noBackdropClose", 2);
-LibModal = __decorateClass([
-  customElement("lib-modal")
-], LibModal);
+  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 {
-  LibModal
+  LibRangeSlider
 };
 //# sourceMappingURL=index62.js.map

package/dist/index62.js.map

@@ -1 +1 @@
-{"version":3,"file":"index62.js","sources":["../src/components/molecules/modal/lib-modal.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport modalCss from './lib-modal.css?inline';\nimport { modalTemplate } from './lib-modal.html';\nimport { ModalAnimate, ModalCloseEventDetail, ModalIconTone, ModalSize, ModalVariant } from './lib-modal.types';\n\n\n/**\n * @element lib-modal\n *\n * Diálogo bloqueante con backdrop difuminado. Seis tamaños, tres variantes\n * de panel, tres animaciones de entrada y soporte de surface oscura.\n *\n * ## Uso básico\n * ```html\n * <lib-modal heading=\"Editar componente\" open>\n *   <p>Contenido del cuerpo.</p>\n *   <div slot=\"footer\">\n *     <button class=\"mo-btn mo-btn-ghost\">Cancelar</button>\n *     <button class=\"mo-btn mo-btn-primary\">Guardar</button>\n *   </div>\n * </lib-modal>\n * ```\n *\n * ## Con ícono y subtítulo\n * ```html\n * <lib-modal heading=\"Nuevo componente\" subtitle=\"Shibui DS · añadir\" icon-tone=\"kaki\">\n *   <ph-plus slot=\"icon\" weight=\"bold\"></ph-plus>\n *   ...\n * </lib-modal>\n * ```\n *\n * ## Control de apertura\n * ```ts\n * modal.open = true;\n * modal.addEventListener('ui-lib-modal-close', e => {\n *   console.log(e.detail.reason); // 'button' | 'backdrop' | 'escape'\n *   modal.open = false;\n * });\n * ```\n *\n * @prop {boolean}        open              — Abre el modal. Reflected.\n * @prop {ModalSize}      size              — xs · sm · md · lg · xl · full (default md).\n * @prop {ModalVariant}   variant           — default · editorial · danger.\n * @prop {ModalAnimate}   _animate           — scale · slide-up · slide-down.\n * @prop {boolean}        dark              — Surface oscura.\n * @prop {string}         heading           — Título del modal (requerido para a11y).\n * @prop {string}         subtitle          — Subtítulo mono debajo del título.\n * @prop {ModalIconTone|null} icon-tone     — Tono del ícono. Si es null no se renderiza el wrapper.\n * @prop {string}         footer-info       — Texto secundario izquierda en el footer.\n * @prop {boolean}        no-backdrop-close — Desactiva el cierre al hacer click en el backdrop.\n *\n * @slot             — Cuerpo del modal (secciones, formularios, contenido libre).\n * @slot icon        — Contenido del ícono del header (visible solo si icon-tone no es null).\n * @slot footer      — Acciones del footer (botones).\n *\n * @csspart backdrop  — Capa de fondo difuminada.\n * @csspart panel-wrap — Contenedor animado (tamaño + animación).\n * @csspart panel     — El panel blanco real.\n * @csspart header    — Zona del header.\n * @csspart icon      — Wrapper del ícono.\n * @csspart close-btn — Botón ×.\n * @csspart body      — Zona scrollable del cuerpo.\n * @csspart footer    — Zona del footer.\n *\n * @fires ui-lib-modal-close — Emitido cuando el modal se cierra. Detail: { reason }.\n */\n@customElement('lib-modal')\nexport class LibModal extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(modalCss)}`,\n  ];\n\n  /* ── Props ─────────────────────────────────────────────── */\n\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  @property({ type: String, reflect: true })\n  size: ModalSize = 'md';\n\n  @property({ type: String, reflect: true })\n  variant: ModalVariant = 'default';\n\n  @property({ type: String, reflect: true })\n  _animate: ModalAnimate = 'scale';\n\n  @property({ type: Boolean, reflect: true })\n  dark: boolean = false;\n\n  /** Título del modal — requerido para accesibilidad (aria-labelledby). */\n  @property({ type: String })\n  heading: string = '';\n\n  @property({ type: String })\n  subtitle: string = '';\n\n  /**\n   * Tono del ícono del header.\n   * Acepta: 'default' | 'kaki' | 'celadon' | 'error' | 'info' | null.\n   * Cuando es null no se renderiza el wrapper del ícono.\n   */\n  @property({ type: String, attribute: 'icon-tone' })\n  iconTone: ModalIconTone | null = null;\n\n  @property({ type: String, attribute: 'footer-info' })\n  footerInfo: string = '';\n\n  /** Desactiva el cierre al hacer click fuera del panel. */\n  @property({ type: Boolean, attribute: 'no-backdrop-close' })\n  noBackdropClose: boolean = false;\n\n  /* ── Estado interno ─────────────────────────────────────── */\n\n  /** Elemento con foco antes de abrir — se restaura al cerrar. */\n  private _prevFocus: Element | null = null;\n\n  /** Handler de Escape vinculado para poder desregistrarlo. */\n  private readonly _onKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this._close('escape');\n    }\n  };\n\n  /* ── Lifecycle ──────────────────────────────────────────── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('keydown', this._onKeydown, true);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('keydown', this._onKeydown, true);\n    // Restaurar scroll si el componente se desmonta mientras está abierto\n    if (this.open) document.body.style.overflow = '';\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (!changed.has('open')) return;\n\n    if (this.open) {\n      this._prevFocus = document.activeElement;\n      document.body.style.overflow = 'hidden';\n      // Foco al primer elemento interactivo tras el render\n      requestAnimationFrame(() => this._focusFirst());\n    } else {\n      document.body.style.overflow = '';\n      // Restaurar foco al trigger original\n      if (this._prevFocus instanceof HTMLElement) {\n        this._prevFocus.focus();\n      }\n      this._prevFocus = null;\n    }\n  }\n\n  /* ── API pública ────────────────────────────────────────── */\n\n  /** Cierra el modal programáticamente. */\n  close(): void {\n    this._close('button');\n  }\n\n  /* ── Helpers privados ───────────────────────────────────── */\n\n  private _close(reason: ModalCloseEventDetail['reason']): void {\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent<ModalCloseEventDetail>('ui-lib-modal-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onBackdropClick(e: MouseEvent): void {\n    // Solo cierra si el click es directamente sobre el backdrop\n    if (!this.noBackdropClose && e.target === e.currentTarget) {\n      this._close('backdrop');\n    }\n  }\n\n  private _focusFirst(): void {\n    const panel = this.renderRoot.querySelector('.mo-panel');\n    if (!panel) return;\n    const focusable = panel.querySelector<HTMLElement>(\n      'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n    );\n    focusable?.focus();\n  }\n\n  /* ── Render ─────────────────────────────────────────────── */\n\n  override render(): TemplateResult {\n    return modalTemplate({\n      open:            this.open,\n      size:            this.size,\n      variant:         this.variant,\n      _animate:         this._animate,\n      dark:            this.dark,\n      heading:         this.heading,\n      subtitle:        this.subtitle,\n      iconTone:        this.iconTone,\n      footerInfo:      this.footerInfo,\n      onClose:         () => this._close('button'),\n      onBackdropClick: (e) => this._onBackdropClick(e),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-modal': LibModal;\n  }\n}\n\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index62.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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"}