@shibui-ui/ui 1.24.1 → 1.25.1

package/dist/index48.js

@@ -1,96 +1,25 @@
 import { unsafeCSS, css, LitElement } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
-import "./index22.js";
-import { breadcrumbTemplate } from "./index281.js";
-import componentCss from "./index282.js";
-import sharedTokens from "./index196.js";
-var __defProp = Object.defineProperty;
+import { customElement } from "lit/decorators.js";
+import { visuallyHiddenTemplate } from "./index350.js";
+import styles from "./index351.js";
 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);
+      result = decorator(result) || result;
   return result;
 };
-let LibBreadcrumb = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.items = [];
-    this.separator = "slash";
-    this.size = "md";
-    this.surface = "default";
-    this.accent = "none";
-    this.dark = false;
-    this.maxVisible = 0;
-    this._expanded = false;
-  }
-  /* ── Render ──────────────────────────────────────────── */
+let LibVisuallyHidden = class extends LitElement {
   render() {
-    return breadcrumbTemplate({
-      items: this.items,
-      separator: this.separator,
-      size: this.size,
-      surface: this.surface,
-      accent: this.accent,
-      dark: this.dark,
-      maxVisible: this.maxVisible,
-      expanded: this._expanded,
-      onExpand: this._handleExpand.bind(this),
-      onNavigate: this._handleNavigate.bind(this)
-    });
-  }
-  /* ── Handlers ────────────────────────────────────────── */
-  _handleExpand() {
-    this._expanded = true;
-  }
-  _handleNavigate(item, index) {
-    this.dispatchEvent(
-      new CustomEvent("ui-lib-navigate", {
-        detail: { item, index },
-        bubbles: true,
-        composed: true
-      })
-    );
+    return visuallyHiddenTemplate();
   }
 };
-LibBreadcrumb.styles = [
-  css`
-      ${unsafeCSS(sharedTokens)}
-    `,
-  css`
-      ${unsafeCSS(componentCss)}
-    `
-];
-__decorateClass([
-  property({ type: Array })
-], LibBreadcrumb.prototype, "items", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibBreadcrumb.prototype, "separator", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibBreadcrumb.prototype, "size", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibBreadcrumb.prototype, "surface", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibBreadcrumb.prototype, "accent", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibBreadcrumb.prototype, "dark", 2);
-__decorateClass([
-  property({ type: Number, attribute: "max-visible" })
-], LibBreadcrumb.prototype, "maxVisible", 2);
-__decorateClass([
-  state()
-], LibBreadcrumb.prototype, "_expanded", 2);
-LibBreadcrumb = __decorateClass([
-  customElement("lib-breadcrumb")
-], LibBreadcrumb);
+LibVisuallyHidden.styles = [css`${unsafeCSS(styles)}`];
+LibVisuallyHidden = __decorateClass([
+  customElement("lib-visually-hidden")
+], LibVisuallyHidden);
 export {
-  LibBreadcrumb
+  LibVisuallyHidden
 };
 //# sourceMappingURL=index48.js.map

package/dist/index48.js.map

@@ -1 +1 @@
-{"version":3,"file":"index48.js","sources":["../src/components/molecules/breadcrumb/lib-breadcrumb.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport \"../../atoms/icon/lib-icon.component\";\nimport type {\n  BreadcrumbItem,\n  BreadcrumbSeparator,\n  BreadcrumbSize,\n  BreadcrumbSurface,\n  BreadcrumbAccent,\n} from \"./lib-breadcrumb.types\";\nimport { breadcrumbTemplate } from \"./lib-breadcrumb.html\";\nimport componentCss from \"./lib-breadcrumb.css?inline\";\nimport sharedTokens from \"../../../styles/shared/tokens.css?inline\";\n\nexport interface UiNavigateEventDetail {\n  item: BreadcrumbItem;\n  index: number;\n}\n\n/**\n * @element lib-breadcrumb\n * @fires ui-lib-navigate - Disparado al hacer clic en un crumb con href.\n *\n * @attr {BreadcrumbSeparator} separator - Tipo de separador: slash · chevron · dot · line\n * @attr {BreadcrumbSize}      size      - Tamaño: sm · md · lg\n * @attr {BreadcrumbSurface}   surface   - Superficie: default · filled · pill\n * @attr {BreadcrumbAccent}    accent    - Acento en ítem activo: none · kaki · celadon · bold\n * @attr {boolean}             dark      - Modo superficie oscura\n * @attr {number}              max-visible - Si > 0, colapsa ítems intermedios cuando items.length > N\n */\n@customElement(\"lib-breadcrumb\")\nexport class LibBreadcrumb extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(componentCss)}\n    `,\n  ];\n\n  /* ── Props públicas ──────────────────────────────────── */\n\n  @property({ type: Array })\n  items: BreadcrumbItem[] = [];\n\n  @property({ type: String, reflect: true })\n  separator: BreadcrumbSeparator = \"slash\";\n\n  @property({ type: String, reflect: true })\n  size: BreadcrumbSize = \"md\";\n\n  @property({ type: String, reflect: true })\n  surface: BreadcrumbSurface = \"default\";\n\n  @property({ type: String, reflect: true })\n  accent: BreadcrumbAccent = \"none\";\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Number, attribute: \"max-visible\" })\n  maxVisible = 0;\n\n  /* ── Estado interno ──────────────────────────────────── */\n\n  @state()\n  private _expanded = false;\n\n  /* ── Render ──────────────────────────────────────────── */\n\n  override render(): TemplateResult {\n    return breadcrumbTemplate({\n      items: this.items,\n      separator: this.separator,\n      size: this.size,\n      surface: this.surface,\n      accent: this.accent,\n      dark: this.dark,\n      maxVisible: this.maxVisible,\n      expanded: this._expanded,\n      onExpand: this._handleExpand.bind(this),\n      onNavigate: this._handleNavigate.bind(this),\n    });\n  }\n\n  /* ── Handlers ────────────────────────────────────────── */\n\n  private _handleExpand(): void {\n    this._expanded = true;\n  }\n\n  private _handleNavigate(item: BreadcrumbItem, index: number): void {\n    this.dispatchEvent(\n      new CustomEvent<UiNavigateEventDetail>(\"ui-lib-navigate\", {\n        detail: { item, index },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"lib-breadcrumb\": LibBreadcrumb;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BO,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAaL,SAAA,QAA0B,CAAA;AAG1B,SAAA,YAAiC;AAGjC,SAAA,OAAuB;AAGvB,SAAA,UAA6B;AAG7B,SAAA,SAA2B;AAG3B,SAAA,OAAO;AAGP,SAAA,aAAa;AAKb,SAAQ,YAAY;AAAA,EAAA;AAAA;AAAA,EAIX,SAAyB;AAChC,WAAO,mBAAmB;AAAA,MACxB,OAAO,KAAK;AAAA,MACZ,WAAW,KAAK;AAAA,MAChB,MAAM,KAAK;AAAA,MACX,SAAS,KAAK;AAAA,MACd,QAAQ,KAAK;AAAA,MACb,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,UAAU,KAAK;AAAA,MACf,UAAU,KAAK,cAAc,KAAK,IAAI;AAAA,MACtC,YAAY,KAAK,gBAAgB,KAAK,IAAI;AAAA,IAAA,CAC3C;AAAA,EACH;AAAA;AAAA,EAIQ,gBAAsB;AAC5B,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,gBAAgB,MAAsB,OAAqB;AACjE,SAAK;AAAA,MACH,IAAI,YAAmC,mBAAmB;AAAA,QACxD,QAAQ,EAAE,MAAM,MAAA;AAAA,QAChB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AAtEa,cACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAE7B;AAKA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAZd,cAaX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAf9B,cAgBX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlB9B,cAmBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GArB9B,cAsBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAxB9B,cAyBX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA3B/B,cA4BX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GA9BzC,cA+BX,WAAA,cAAA,CAAA;AAKQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAnCI,cAoCH,WAAA,aAAA,CAAA;AApCG,gBAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,aAAA;"}
+{"version":3,"file":"index48.js","sources":["../src/components/atoms/visually-hidden/lib-visually-hidden.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, css, unsafeCSS } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { visuallyHiddenTemplate } from './lib-visually-hidden.html';\nimport styles from './lib-visually-hidden.css?inline';\n\n@customElement('lib-visually-hidden')\nexport class LibVisuallyHidden extends LitElement {\n  static override styles = [css`${unsafeCSS(styles)}`];\n\n  protected override render(): TemplateResult {\n    return visuallyHiddenTemplate();\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;AAMO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAG7B,SAAyB;AAC1C,WAAO,uBAAA;AAAA,EACT;AACF;AANa,kBACK,SAAS,CAAC,MAAM,UAAU,MAAM,CAAC,EAAE;AADxC,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}

package/dist/index49.js

@@ -1,7 +1,8 @@
 import { unsafeCSS, css, LitElement } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
-import { selectTemplate } from "./index283.js";
-import selectCss from "./index284.js";
+import "./index25.js";
+import { breadcrumbTemplate } from "./index194.js";
+import componentCss from "./index195.js";
 import sharedTokens from "./index196.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,307 +14,83 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibSelect = class extends LitElement {
+let LibBreadcrumb = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.label = "";
-    this.placeholder = "Selecciona una opción";
-    this.hint = "";
-    this.errorMessage = "";
-    this.required = false;
-    this.optional = false;
-    this.open = false;
-    this.disabled = false;
-    this.error = false;
-    this.dark = false;
+    this.items = [];
+    this.separator = "slash";
     this.size = "md";
-    this.variant = "default";
-    this.value = "";
-    this.multi = false;
-    this.searchable = false;
-    this._selectedLabel = "";
-    this._selectedValues = [];
-    this._selectedLabels = [];
-    this._searchQuery = "";
-    this._visibleCount = 0;
-    this._handleOutsideClick = (e) => {
-      if (this.open && !e.composedPath().includes(this)) {
-        this._close();
-      }
-    };
-    this._handleKeyDown = (e) => {
-      if (e.key === "Escape" && this.open) {
-        this._close();
-      }
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this._handleOutsideClick);
-    document.addEventListener("keydown", this._handleKeyDown, true);
-    this.addEventListener("option-selected", this._handleOptionSelected);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this._handleOutsideClick);
-    document.removeEventListener("keydown", this._handleKeyDown, true);
-  }
-  /**
-   * Reacts to external value changes.
-   * Syncs _selectedLabel by inspecting slotted options.
-   */
-  updated(changed) {
-    super.updated(changed);
-    if (changed.has("value") && this.value) {
-      this._syncSingleFromValue();
-    }
-  }
-  /* ─────────────────────────────────────────────────────────
-     PUBLIC API
-  ───────────────────────────────────────────────────────── */
-  /** Opens the dropdown panel. */
-  openPanel() {
-    if (!this.disabled) this._open();
-  }
-  /** Closes the dropdown panel. */
-  closePanel() {
-    this._close();
-  }
-  /** Clears current selection. */
-  clear() {
-    this.value = "";
-    this._selectedLabel = "";
-    this._selectedValues = [];
-    this._selectedLabels = [];
-    this._syncOptionStates();
+    this.surface = "default";
+    this.accent = "none";
+    this.dark = false;
+    this.maxVisible = 0;
+    this._expanded = false;
   }
-  /* ─────────────────────────────────────────────────────────
-     RENDER
-  ───────────────────────────────────────────────────────── */
+  /* ── Render ──────────────────────────────────────────── */
   render() {
-    return selectTemplate({
-      label: this.label,
-      placeholder: this.placeholder,
-      hint: this.hint,
-      errorMessage: this.errorMessage,
-      required: this.required,
-      optional: this.optional,
-      open: this.open,
-      disabled: this.disabled,
-      error: this.error,
-      dark: this.dark,
+    return breadcrumbTemplate({
+      items: this.items,
+      separator: this.separator,
       size: this.size,
-      variant: this.variant,
-      selectedLabel: this._selectedLabel,
-      hasSelection: !!this._selectedLabel,
-      multi: this.multi,
-      selectedCount: this._selectedValues.length,
-      searchable: this.searchable,
-      searchQuery: this._searchQuery,
-      visibleCount: this._visibleCount,
-      onTriggerClick: this._handleTriggerClick.bind(this),
-      onSearchInput: this._handleSearchInput.bind(this),
-      onConfirm: this._handleConfirm.bind(this)
+      surface: this.surface,
+      accent: this.accent,
+      dark: this.dark,
+      maxVisible: this.maxVisible,
+      expanded: this._expanded,
+      onExpand: this._handleExpand.bind(this),
+      onNavigate: this._handleNavigate.bind(this)
     });
   }
-  /* ─────────────────────────────────────────────────────────
-     PRIVATE METHODS
-  ───────────────────────────────────────────────────────── */
-  _open() {
-    this.open = true;
-    this._updateVisibleCount();
-    this.dispatchEvent(new CustomEvent("ui-lib-select-open", {
-      bubbles: true,
-      composed: true
-    }));
-  }
-  _close() {
-    this.open = false;
-    this._searchQuery = "";
-    this._showAllOptions();
-    this.dispatchEvent(new CustomEvent("ui-lib-select-close", {
-      bubbles: true,
-      composed: true
-    }));
-  }
-  _handleTriggerClick(e) {
-    e.stopPropagation();
-    if (this.disabled) return;
-    if (this.open) {
-      this._close();
-    } else {
-      this._open();
-    }
-  }
-  _handleOptionSelected(e) {
-    const custom = e;
-    const { value, label } = custom.detail;
-    if (this.multi) {
-      this._toggleMultiValue(value, label);
-    } else {
-      this._selectSingle(value, label);
-      this._close();
-    }
-  }
-  _selectSingle(value, label) {
-    this.value = value;
-    this._selectedLabel = label;
-    this._syncOptionStates();
-    this.dispatchEvent(new CustomEvent("ui-lib-select-change", {
-      detail: { value, label },
-      bubbles: true,
-      composed: true
-    }));
-  }
-  _toggleMultiValue(value, label) {
-    const idx = this._selectedValues.indexOf(value);
-    if (idx === -1) {
-      this._selectedValues = [...this._selectedValues, value];
-      this._selectedLabels = [...this._selectedLabels, label];
-    } else {
-      this._selectedValues = this._selectedValues.filter((_, i) => i !== idx);
-      this._selectedLabels = this._selectedLabels.filter((_, i) => i !== idx);
-    }
-    this._syncOptionStates();
-  }
-  _handleConfirm() {
-    this.dispatchEvent(new CustomEvent("ui-lib-select-multi-change", {
-      detail: {
-        values: [...this._selectedValues],
-        labels: [...this._selectedLabels]
-      },
-      bubbles: true,
-      composed: true
-    }));
-    this._close();
-  }
-  _handleSearchInput(e) {
-    const input = e.target;
-    this._searchQuery = input.value;
-    this._filterOptions(this._searchQuery);
-  }
-  /** Filters slotted lib-select-option elements by text match. */
-  _filterOptions(query) {
-    const options = Array.from(
-      this.querySelectorAll("lib-select-option")
+  /* ── Handlers ────────────────────────────────────────── */
+  _handleExpand() {
+    this._expanded = true;
+  }
+  _handleNavigate(item, index) {
+    this.dispatchEvent(
+      new CustomEvent("ui-lib-navigate", {
+        detail: { item, index },
+        bubbles: true,
+        composed: true
+      })
     );
-    const q = query.toLowerCase().trim();
-    let visible = 0;
-    options.forEach((opt) => {
-      const text = (opt.textContent ?? "").toLowerCase();
-      const match = !q || text.includes(q);
-      opt.toggleAttribute("search-hidden", !match);
-      if (match) visible++;
-    });
-    this._visibleCount = visible;
-  }
-  _showAllOptions() {
-    const options = Array.from(this.querySelectorAll("lib-select-option"));
-    options.forEach((opt) => opt.removeAttribute("search-hidden"));
-    this._updateVisibleCount();
-  }
-  _updateVisibleCount() {
-    const options = this.querySelectorAll("lib-select-option:not([search-hidden])");
-    this._visibleCount = options.length;
-  }
-  /** Syncs selected/unselected state on all slotted option elements. */
-  _syncOptionStates() {
-    const options = Array.from(this.querySelectorAll("lib-select-option"));
-    if (this.multi) {
-      options.forEach((opt) => {
-        opt.selected = this._selectedValues.includes(opt.value ?? "");
-      });
-    } else {
-      options.forEach((opt) => {
-        opt.selected = opt.value === this.value;
-      });
-    }
-  }
-  /** Called when `value` prop changes externally — syncs label from slotted options. */
-  _syncSingleFromValue() {
-    setTimeout(() => {
-      var _a;
-      const options = Array.from(
-        this.querySelectorAll("lib-select-option")
-      );
-      const match = options.find((opt) => opt.value === this.value);
-      if (match) {
-        this._selectedLabel = ((_a = match.textContent) == null ? void 0 : _a.trim()) ?? "";
-        options.forEach((opt) => {
-          opt.selected = opt === match;
-        });
-      }
-    }, 0);
   }
 };
-LibSelect.styles = [
-  css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(selectCss)}`
+LibBreadcrumb.styles = [
+  css`
+      ${unsafeCSS(sharedTokens)}
+    `,
+  css`
+      ${unsafeCSS(componentCss)}
+    `
 ];
 __decorateClass([
-  property({ type: String })
-], LibSelect.prototype, "label", 2);
-__decorateClass([
-  property({ type: String })
-], LibSelect.prototype, "placeholder", 2);
-__decorateClass([
-  property({ type: String })
-], LibSelect.prototype, "hint", 2);
-__decorateClass([
-  property({ type: String, attribute: "error-message" })
-], LibSelect.prototype, "errorMessage", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSelect.prototype, "required", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSelect.prototype, "optional", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSelect.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSelect.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSelect.prototype, "error", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSelect.prototype, "dark", 2);
+  property({ type: Array })
+], LibBreadcrumb.prototype, "items", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibSelect.prototype, "size", 2);
+], LibBreadcrumb.prototype, "separator", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], LibSelect.prototype, "variant", 2);
+], LibBreadcrumb.prototype, "size", 2);
 __decorateClass([
-  property({ type: String })
-], LibSelect.prototype, "value", 2);
+  property({ type: String, reflect: true })
+], LibBreadcrumb.prototype, "surface", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibSelect.prototype, "multi", 2);
+  property({ type: String, reflect: true })
+], LibBreadcrumb.prototype, "accent", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], LibSelect.prototype, "searchable", 2);
-__decorateClass([
-  state()
-], LibSelect.prototype, "_selectedLabel", 2);
-__decorateClass([
-  state()
-], LibSelect.prototype, "_selectedValues", 2);
+], LibBreadcrumb.prototype, "dark", 2);
 __decorateClass([
-  state()
-], LibSelect.prototype, "_selectedLabels", 2);
-__decorateClass([
-  state()
-], LibSelect.prototype, "_searchQuery", 2);
+  property({ type: Number, attribute: "max-visible" })
+], LibBreadcrumb.prototype, "maxVisible", 2);
 __decorateClass([
   state()
-], LibSelect.prototype, "_visibleCount", 2);
-LibSelect = __decorateClass([
-  customElement("lib-select")
-], LibSelect);
+], LibBreadcrumb.prototype, "_expanded", 2);
+LibBreadcrumb = __decorateClass([
+  customElement("lib-breadcrumb")
+], LibBreadcrumb);
 export {
-  LibSelect
+  LibBreadcrumb
 };
 //# sourceMappingURL=index49.js.map

package/dist/index49.js.map

@@ -1 +1 @@
-{"version":3,"file":"index49.js","sources":["../src/components/molecules/select/lib-select.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { selectTemplate } from './lib-select.html';\nimport selectCss from './lib-select.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type { SelectSize, SelectVariant, SelectChangeDetail, SelectMultiChangeDetail } from './lib-select.types';\n\n/**\n * @element lib-select\n *\n * @fires ui-lib-select-change       — Single: { value, label }\n * @fires ui-lib-select-multi-change — Multi:  { values, labels }\n * @fires ui-lib-select-open         — Panel abierto\n * @fires ui-lib-select-close        — Panel cerrado\n *\n * @slot — lib-select-option children\n */\n@customElement('lib-select')\nexport class LibSelect extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(selectCss)}`,\n  ];\n\n  /* ── Field meta ── */\n  @property({ type: String }) label        = '';\n  @property({ type: String }) placeholder  = 'Selecciona una opción';\n  @property({ type: String }) hint         = '';\n  @property({ type: String, attribute: 'error-message' }) errorMessage = '';\n  @property({ type: Boolean, reflect: true }) required = false;\n  @property({ type: Boolean, reflect: true }) optional = false;\n\n  /* ── State ── */\n  @property({ type: Boolean, reflect: true }) open     = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error    = false;\n  @property({ type: Boolean, reflect: true }) dark     = false;\n\n  /* ── Appearance ── */\n  @property({ type: String, reflect: true }) size:    SelectSize    = 'md';\n  @property({ type: String, reflect: true }) variant: SelectVariant = 'default';\n\n  /* ── Single value ── */\n  @property({ type: String }) value = '';\n\n  /* ── Multi values (JSON array string or space-separated) ── */\n  @property({ type: Boolean, reflect: true }) multi = false;\n\n  /* ── Searchable ── */\n  @property({ type: Boolean, reflect: true }) searchable = false;\n\n  /* ── Internal state ── */\n  @state() private _selectedLabel  = '';\n  @state() private _selectedValues: string[] = [];\n  @state() private _selectedLabels: string[] = [];\n  @state() private _searchQuery    = '';\n  @state() private _visibleCount   = 0;\n\n  /* ── Outside click handler (arrow fn for remove ref) ── */\n  private readonly _handleOutsideClick = (e: MouseEvent): void => {\n    if (this.open && !e.composedPath().includes(this)) {\n      this._close();\n    }\n  };\n\n  /* ── Escape key handler ── */\n  private readonly _handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      this._close();\n    }\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    document.addEventListener('keydown', this._handleKeyDown, true);\n\n    /* Listen for option-selected events bubbled from slotted lib-select-option */\n    this.addEventListener('option-selected', this._handleOptionSelected as EventListener);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    document.removeEventListener('keydown', this._handleKeyDown, true);\n  }\n\n  /**\n   * Reacts to external value changes.\n   * Syncs _selectedLabel by inspecting slotted options.\n   */\n  protected override updated(changed: PropertyValues<this>): void {\n    super.updated(changed);\n\n    if (changed.has('value') && this.value) {\n      this._syncSingleFromValue();\n    }\n  }\n\n  /* ─────────────────────────────────────────────────────────\n     PUBLIC API\n  ───────────────────────────────────────────────────────── */\n\n  /** Opens the dropdown panel. */\n  public openPanel(): void {\n    if (!this.disabled) this._open();\n  }\n\n  /** Closes the dropdown panel. */\n  public closePanel(): void {\n    this._close();\n  }\n\n  /** Clears current selection. */\n  public clear(): void {\n    this.value          = '';\n    this._selectedLabel = '';\n    this._selectedValues = [];\n    this._selectedLabels = [];\n    this._syncOptionStates();\n  }\n\n  /* ─────────────────────────────────────────────────────────\n     RENDER\n  ───────────────────────────────────────────────────────── */\n\n  override render(): TemplateResult {\n    return selectTemplate({\n      label:        this.label,\n      placeholder:  this.placeholder,\n      hint:         this.hint,\n      errorMessage: this.errorMessage,\n      required:     this.required,\n      optional:     this.optional,\n\n      open:     this.open,\n      disabled: this.disabled,\n      error:    this.error,\n      dark:     this.dark,\n\n      size:    this.size,\n      variant: this.variant,\n\n      selectedLabel: this._selectedLabel,\n      hasSelection:  !!this._selectedLabel,\n\n      multi:         this.multi,\n      selectedCount: this._selectedValues.length,\n\n      searchable:   this.searchable,\n      searchQuery:  this._searchQuery,\n      visibleCount: this._visibleCount,\n\n      onTriggerClick: this._handleTriggerClick.bind(this),\n      onSearchInput:  this._handleSearchInput.bind(this),\n      onConfirm:      this._handleConfirm.bind(this),\n    });\n  }\n\n  /* ─────────────────────────────────────────────────────────\n     PRIVATE METHODS\n  ───────────────────────────────────────────────────────── */\n\n  private _open(): void {\n    this.open = true;\n    this._updateVisibleCount();\n    this.dispatchEvent(new CustomEvent('ui-lib-select-open', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _close(): void {\n    this.open = false;\n    this._searchQuery = '';\n    this._showAllOptions();\n    this.dispatchEvent(new CustomEvent('ui-lib-select-close', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleTriggerClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled) return;\n    if (this.open) {\n      this._close();\n    } else {\n      this._open();\n    }\n  }\n\n  private _handleOptionSelected(e: Event): void {\n    const custom = e as CustomEvent<{ value: string; label: string }>;\n    const { value, label } = custom.detail;\n\n    if (this.multi) {\n      this._toggleMultiValue(value, label);\n    } else {\n      this._selectSingle(value, label);\n      this._close();\n    }\n  }\n\n  private _selectSingle(value: string, label: string): void {\n    this.value          = value;\n    this._selectedLabel = label;\n    this._syncOptionStates();\n\n    this.dispatchEvent(new CustomEvent<SelectChangeDetail>('ui-lib-select-change', {\n      detail: { value, label },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _toggleMultiValue(value: string, label: string): void {\n    const idx = this._selectedValues.indexOf(value);\n\n    if (idx === -1) {\n      this._selectedValues = [...this._selectedValues, value];\n      this._selectedLabels = [...this._selectedLabels, label];\n    } else {\n      this._selectedValues = this._selectedValues.filter((_, i) => i !== idx);\n      this._selectedLabels = this._selectedLabels.filter((_, i) => i !== idx);\n    }\n\n    this._syncOptionStates();\n  }\n\n  private _handleConfirm(): void {\n    this.dispatchEvent(new CustomEvent<SelectMultiChangeDetail>('ui-lib-select-multi-change', {\n      detail: {\n        values: [...this._selectedValues],\n        labels: [...this._selectedLabels],\n      },\n      bubbles: true,\n      composed: true,\n    }));\n    this._close();\n  }\n\n  private _handleSearchInput(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this._searchQuery = input.value;\n    this._filterOptions(this._searchQuery);\n  }\n\n  /** Filters slotted lib-select-option elements by text match. */\n  private _filterOptions(query: string): void {\n    const options = Array.from(\n      this.querySelectorAll('lib-select-option')\n    ) as HTMLElement[];\n\n    const q = query.toLowerCase().trim();\n    let visible = 0;\n\n    options.forEach(opt => {\n      const text = (opt.textContent ?? '').toLowerCase();\n      const match = !q || text.includes(q);\n      opt.toggleAttribute('search-hidden', !match);\n      if (match) visible++;\n    });\n\n    this._visibleCount = visible;\n  }\n\n  private _showAllOptions(): void {\n    const options = Array.from(this.querySelectorAll('lib-select-option'));\n    options.forEach(opt => opt.removeAttribute('search-hidden'));\n    this._updateVisibleCount();\n  }\n\n  private _updateVisibleCount(): void {\n    const options = this.querySelectorAll('lib-select-option:not([search-hidden])');\n    this._visibleCount = options.length;\n  }\n\n  /** Syncs selected/unselected state on all slotted option elements. */\n  private _syncOptionStates(): void {\n    const options = Array.from(this.querySelectorAll('lib-select-option')) as Array<\n      HTMLElement & { selected?: boolean; value?: string }\n    >;\n\n    if (this.multi) {\n      options.forEach(opt => {\n        opt.selected = this._selectedValues.includes(opt.value ?? '');\n      });\n    } else {\n      options.forEach(opt => {\n        opt.selected = opt.value === this.value;\n      });\n    }\n  }\n\n  /** Called when `value` prop changes externally — syncs label from slotted options. */\n  private _syncSingleFromValue(): void {\n    // Use setTimeout to allow slotted children to upgrade after hydration\n    setTimeout(() => {\n      const options = Array.from(\n        this.querySelectorAll('lib-select-option')\n      ) as Array<HTMLElement & { value?: string; selected?: boolean }>;\n\n      const match = options.find(opt => opt.value === this.value);\n      if (match) {\n        this._selectedLabel = match.textContent?.trim() ?? '';\n        options.forEach(opt => { opt.selected = opt === match; });\n      }\n    }, 0);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-select': LibSelect;\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"index49.js","sources":["../src/components/molecules/breadcrumb/lib-breadcrumb.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport \"../../atoms/icon/lib-icon.component\";\nimport type {\n  BreadcrumbItem,\n  BreadcrumbSeparator,\n  BreadcrumbSize,\n  BreadcrumbSurface,\n  BreadcrumbAccent,\n} from \"./lib-breadcrumb.types\";\nimport { breadcrumbTemplate } from \"./lib-breadcrumb.html\";\nimport componentCss from \"./lib-breadcrumb.css?inline\";\nimport sharedTokens from \"../../../styles/shared/tokens.css?inline\";\n\nexport interface UiNavigateEventDetail {\n  item: BreadcrumbItem;\n  index: number;\n}\n\n/**\n * @element lib-breadcrumb\n * @fires ui-lib-navigate - Disparado al hacer clic en un crumb con href.\n *\n * @attr {BreadcrumbSeparator} separator - Tipo de separador: slash · chevron · dot · line\n * @attr {BreadcrumbSize}      size      - Tamaño: sm · md · lg\n * @attr {BreadcrumbSurface}   surface   - Superficie: default · filled · pill\n * @attr {BreadcrumbAccent}    accent    - Acento en ítem activo: none · kaki · celadon · bold\n * @attr {boolean}             dark      - Modo superficie oscura\n * @attr {number}              max-visible - Si > 0, colapsa ítems intermedios cuando items.length > N\n */\n@customElement(\"lib-breadcrumb\")\nexport class LibBreadcrumb extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(componentCss)}\n    `,\n  ];\n\n  /* ── Props públicas ──────────────────────────────────── */\n\n  @property({ type: Array })\n  items: BreadcrumbItem[] = [];\n\n  @property({ type: String, reflect: true })\n  separator: BreadcrumbSeparator = \"slash\";\n\n  @property({ type: String, reflect: true })\n  size: BreadcrumbSize = \"md\";\n\n  @property({ type: String, reflect: true })\n  surface: BreadcrumbSurface = \"default\";\n\n  @property({ type: String, reflect: true })\n  accent: BreadcrumbAccent = \"none\";\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Number, attribute: \"max-visible\" })\n  maxVisible = 0;\n\n  /* ── Estado interno ──────────────────────────────────── */\n\n  @state()\n  private _expanded = false;\n\n  /* ── Render ──────────────────────────────────────────── */\n\n  override render(): TemplateResult {\n    return breadcrumbTemplate({\n      items: this.items,\n      separator: this.separator,\n      size: this.size,\n      surface: this.surface,\n      accent: this.accent,\n      dark: this.dark,\n      maxVisible: this.maxVisible,\n      expanded: this._expanded,\n      onExpand: this._handleExpand.bind(this),\n      onNavigate: this._handleNavigate.bind(this),\n    });\n  }\n\n  /* ── Handlers ────────────────────────────────────────── */\n\n  private _handleExpand(): void {\n    this._expanded = true;\n  }\n\n  private _handleNavigate(item: BreadcrumbItem, index: number): void {\n    this.dispatchEvent(\n      new CustomEvent<UiNavigateEventDetail>(\"ui-lib-navigate\", {\n        detail: { item, index },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"lib-breadcrumb\": LibBreadcrumb;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BO,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAaL,SAAA,QAA0B,CAAA;AAG1B,SAAA,YAAiC;AAGjC,SAAA,OAAuB;AAGvB,SAAA,UAA6B;AAG7B,SAAA,SAA2B;AAG3B,SAAA,OAAO;AAGP,SAAA,aAAa;AAKb,SAAQ,YAAY;AAAA,EAAA;AAAA;AAAA,EAIX,SAAyB;AAChC,WAAO,mBAAmB;AAAA,MACxB,OAAO,KAAK;AAAA,MACZ,WAAW,KAAK;AAAA,MAChB,MAAM,KAAK;AAAA,MACX,SAAS,KAAK;AAAA,MACd,QAAQ,KAAK;AAAA,MACb,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,UAAU,KAAK;AAAA,MACf,UAAU,KAAK,cAAc,KAAK,IAAI;AAAA,MACtC,YAAY,KAAK,gBAAgB,KAAK,IAAI;AAAA,IAAA,CAC3C;AAAA,EACH;AAAA;AAAA,EAIQ,gBAAsB;AAC5B,SAAK,YAAY;AAAA,EACnB;AAAA,EAEQ,gBAAgB,MAAsB,OAAqB;AACjE,SAAK;AAAA,MACH,IAAI,YAAmC,mBAAmB;AAAA,QACxD,QAAQ,EAAE,MAAM,MAAA;AAAA,QAChB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AAtEa,cACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAE7B;AAKA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAZd,cAaX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAf9B,cAgBX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlB9B,cAmBX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GArB9B,cAsBX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAxB9B,cAyBX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA3B/B,cA4BX,WAAA,QAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GA9BzC,cA+BX,WAAA,cAAA,CAAA;AAKQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAnCI,cAoCH,WAAA,aAAA,CAAA;AApCG,gBAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,aAAA;"}

package/dist/index5.js

@@ -1,8 +1,8 @@
-import { unsafeCSS, css, LitElement } from "lit";
+import { unsafeCSS, css, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { statusDotTemplate } from "./index197.js";
-import statusDotCss from "./index198.js";
-import sharedTokens from "./index196.js";
+import { styleMap as o } from "./index267.js";
+import { aspectRatioTemplate } from "./index268.js";
+import styles from "./index269.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,43 +13,30 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let LibStatusDot = class extends LitElement {
+let LibAspectRatio = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.status = "offline";
-    this.size = "md";
-    this.bordered = false;
-    this.label = false;
+    this.ratio = "1/1";
   }
   render() {
-    return statusDotTemplate({
-      status: this.status,
-      size: this.size,
-      bordered: this.bordered,
-      label: this.label
-    });
+    const hostStyles = {
+      "--lib-aspect-ratio": this.ratio
+    };
+    return html`
+      <div style=${o(hostStyles)}>
+        ${aspectRatioTemplate()}
+      </div>
+    `;
   }
 };
-LibStatusDot.styles = [
-  css`${unsafeCSS(sharedTokens)}`,
-  css`${unsafeCSS(statusDotCss)}`
-];
+LibAspectRatio.styles = [css`${unsafeCSS(styles)}`];
 __decorateClass([
-  property({ type: String, reflect: true })
-], LibStatusDot.prototype, "status", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], LibStatusDot.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibStatusDot.prototype, "bordered", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LibStatusDot.prototype, "label", 2);
-LibStatusDot = __decorateClass([
-  customElement("lib-status-dot")
-], LibStatusDot);
+  property({ type: String })
+], LibAspectRatio.prototype, "ratio", 2);
+LibAspectRatio = __decorateClass([
+  customElement("lib-aspect-ratio")
+], LibAspectRatio);
 export {
-  LibStatusDot
+  LibAspectRatio
 };
 //# sourceMappingURL=index5.js.map

package/dist/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":["../src/components/atoms/status-dot/lib-status-dot.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { LibStatusDotStatus, LibStatusDotSize } from './lib-status-dot.html';\nimport { statusDotTemplate } from './lib-status-dot.html';\nimport statusDotCss from './lib-status-dot.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-status-dot\n *\n * Indicador de presencia con animación semántica por estado.\n * Cada estado tiene su propio ritmo extraído de conceptos japoneses:\n *   - 水 mizu   : online  — doble onda concéntrica (2.6s)\n *   - 息 iki    : away    — respiración scale+opacity (3s)\n *   - 速い hayai : busy    — parpadeo asimétrico (1.1s)\n *   - 間 ma     : offline — quietud total, sin movimiento\n *\n * @example — uso básico\n * <lib-status-dot status=\"online\"></lib-status-dot>\n *\n * @example — con label inline\n * <lib-status-dot status=\"away\" label></lib-status-dot>\n *\n * @example — sobre avatar (borde blanco)\n * <lib-status-dot status=\"busy\" size=\"md\" bordered></lib-status-dot>\n *\n * @example — tamaño grande en dashboard\n * <lib-status-dot status=\"online\" size=\"lg\"></lib-status-dot>\n */\n@customElement('lib-status-dot')\nexport class LibStatusDot extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(statusDotCss)}`,\n  ];\n\n  /**\n   * Estado de presencia.\n   * - online  : celadón · onda mizu\n   * - away    : kaki · respiración iki\n   * - busy    : error · parpadeo hayai\n   * - offline : washi-400 · quietud ma\n   */\n  @property({ type: String, reflect: true })\n  status: LibStatusDotStatus = 'offline';\n\n  /**\n   * Tamaño del punto.\n   * - sm : 6px  — tablas y listas densas\n   * - md : 10px — uso general (default)\n   * - lg : 14px — alta visibilidad\n   */\n  @property({ type: String, reflect: true })\n  size: LibStatusDotSize = 'md';\n\n  /**\n   * Añade un halo blanco (`box-shadow: 0 0 0 2px --bg-elevated`)\n   * para separar el punto visualmente cuando se posiciona sobre un avatar.\n   */\n  @property({ type: Boolean, reflect: true })\n  bordered = false;\n\n  /**\n   * Muestra el texto del estado (Online / Away / Busy / Offline)\n   * en línea con el punto. El color hereda el estado activo.\n   */\n  @property({ type: Boolean, reflect: true })\n  label = false;\n\n  override render(): TemplateResult {\n    return statusDotTemplate({\n      status:   this.status,\n      size:     this.size,\n      bordered: this.bordered,\n      label:    this.label,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-status-dot': LibStatusDot;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BO,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAcL,SAAA,SAA6B;AAS7B,SAAA,OAAyB;AAOzB,SAAA,WAAW;AAOX,SAAA,QAAQ;AAAA,EAAA;AAAA,EAEC,SAAyB;AAChC,WAAO,kBAAkB;AAAA,MACvB,QAAU,KAAK;AAAA,MACf,MAAU,KAAK;AAAA,MACf,UAAU,KAAK;AAAA,MACf,OAAU,KAAK;AAAA,IAAA,CAChB;AAAA,EACH;AACF;AA/Ca,aACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,YAAY,CAAC;AAC/B;AAUA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAb9B,aAcX,WAAA,UAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtB9B,aAuBX,WAAA,QAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA7B/B,aA8BX,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApC/B,aAqCX,WAAA,SAAA,CAAA;AArCW,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}
+{"version":3,"file":"index5.js","sources":["../src/components/atoms/aspect-ratio/lib-aspect-ratio.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { aspectRatioTemplate } from './lib-aspect-ratio.html';\nimport styles from './lib-aspect-ratio.css?inline';\n\n@customElement('lib-aspect-ratio')\nexport class LibAspectRatio extends LitElement {\n  static override styles = [css`${unsafeCSS(styles)}`];\n\n  /**\n   * El ratio deseado. Ejemplos: \"16/9\", \"4/3\", \"1/1\", \"21/9\"\n   * @type {string}\n   */\n  @property({ type: String }) ratio = '1/1';\n\n  protected override render(): TemplateResult {\n    // Inyectamos el ratio directamente en el estilo del host\n    const hostStyles = {\n      '--lib-aspect-ratio': this.ratio\n    };\n\n    return html`\n      <div style=${styleMap(hostStyles)}>\n        ${aspectRatioTemplate()}\n      </div>\n    `;\n  }\n}"],"names":["styleMap"],"mappings":";;;;;;;;;;;;;;;AAOO,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOuB,SAAA,QAAQ;AAAA,EAAA;AAAA,EAEjB,SAAyB;AAE1C,UAAM,aAAa;AAAA,MACjB,sBAAsB,KAAK;AAAA,IAAA;AAG7B,WAAO;AAAA,mBACQA,EAAS,UAAU,CAAC;AAAA,UAC7B,qBAAqB;AAAA;AAAA;AAAA,EAG7B;AACF;AArBa,eACK,SAAS,CAAC,MAAM,UAAU,MAAM,CAAC,EAAE;AAMvB,gBAAA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,eAOiB,WAAA,SAAA,CAAA;AAPjB,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}