@moni-labs/moni-ui 0.4.13 → 0.4.14

package/dist/components/moni-select.js

@@ -10,15 +10,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, css, nothing } from 'lit';
-import { customElement, property, state, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
-import { emitMoniEvent } from '../utils/event-emitter.js';
-import './moni-icon.js';
-import './moni-progress.js';
-import './moni-select-option.js';
+import { html, css, nothing } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+import { MoniElement, sharedStyles, fieldStyles } from "./_base/index.js";
+import { emitMoniEvent } from "../utils/event-emitter.js";
+import "./moni-icon.js";
+import "./moni-progress.js";
+import "./moni-select-option.js";
 /**
  * Componente Material Design 3 Select (Menú Desplegable).
  *
@@ -82,30 +82,30 @@ let MoniSelect = class MoniSelect extends MoniElement {
          * Nombre del campo select, usado para el envío del formulario.
          * @type {string}
          */
-        this.name = '';
+        this.name = "";
         /**
          * Texto de la etiqueta flotante.
          * @type {string}
          */
-        this.label = '';
+        this.label = "";
         /**
          * Variante visual del campo select.
          * @type {'filled' | 'outlined'}
          * @default 'filled'
          */
-        this.variant = 'filled';
+        this.variant = "filled";
         /**
          * Define las dimensiones del campo select.
          * @type {'small' | 'medium' | 'large' | 'extra'}
          * @default 'medium'
          */
-        this.size = 'medium';
+        this.size = "medium";
         /**
          * Forma (radio de borde) del campo.
          * @type {'round' | 'small-round' | 'square' | 'no-round'}
          * @default 'no-round'
          */
-        this.shape = 'no-round';
+        this.shape = "no-round";
         /**
          * Deshabilita el campo select.
          * @type {boolean}
@@ -128,13 +128,13 @@ let MoniSelect = class MoniSelect extends MoniElement {
          * Texto de ayuda mostrado debajo del campo.
          * @type {string}
          */
-        this.helper = '';
+        this.helper = "";
         /**
          * Texto de error mostrado debajo del campo cuando `error` es true.
          * Reemplaza al texto de ayuda.
          * @type {string}
          */
-        this.errorText = '';
+        this.errorText = "";
         /**
          * Si es verdadero, establece el campo en un estado de error.
          * @type {boolean}
@@ -144,18 +144,18 @@ let MoniSelect = class MoniSelect extends MoniElement {
          * El valor actual del select.
          * @type {string}
          */
-        this.value = '';
+        this.value = "";
         /**
          * Nombre del icono principal (leading icon, Material Symbols).
          * @type {string}
          */
-        this.icon = '';
+        this.icon = "";
         /**
          * Nombre del icono final (trailing icon, Material Symbols) que indica el estado del menú desplegable.
          * @type {string}
          * @default 'arrow_drop_down'
          */
-        this.trailingIcon = 'arrow_drop_down';
+        this.trailingIcon = "arrow_drop_down";
         /**
          * Habilita un campo de búsqueda en la parte superior del menú desplegable para filtrar opciones.
          * @type {boolean}
@@ -175,7 +175,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
          * Texto de marcador de posición (placeholder) mostrado cuando no hay ningún valor seleccionado.
          * @type {string}
          */
-        this.placeholder = '';
+        this.placeholder = "";
         /**
          * Estrategia de posicionamiento para el menú desplegable.
          *
@@ -187,13 +187,13 @@ let MoniSelect = class MoniSelect extends MoniElement {
          * @type {'absolute' | 'fixed' | 'body'}
          * @default 'absolute'
          */
-        this.positioning = 'absolute';
+        this.positioning = "absolute";
         /**
          * Ubicación preferida del menú desplegable con respecto al disparador (trigger).
          * @type {'top' | 'bottom' | 'left' | 'right' | 'auto'}
          * @default 'auto'
          */
-        this.placement = 'auto';
+        this.placement = "auto";
         /**
          * Restricción de ancho del menú desplegable.
          * - `'trigger'`: Coincide con el ancho del campo de entrada.
@@ -202,7 +202,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
          * @type {string}
          * @default 'trigger'
          */
-        this.dropdownWidth = 'trigger';
+        this.dropdownWidth = "trigger";
         /**
          * Límite manual opcional para la altura del menú.
          *
@@ -213,14 +213,14 @@ let MoniSelect = class MoniSelect extends MoniElement {
          *
          * @default ''
          */
-        this.dropdownMaxHeight = '';
+        this.dropdownMaxHeight = "";
         this._open = false;
-        this._searchQuery = '';
-        this._actualPlacement = 'bottom';
+        this._searchQuery = "";
+        this._actualPlacement = "bottom";
         this._parsedOptions = [];
         this._activeIndex = -1;
-        this._menuStyle = '';
-        this._menuMaxHeight = '75vh';
+        this._menuStyle = "";
+        this._menuMaxHeight = "75vh";
         this._useInlineCategories = false;
         this._drilldownPath = [];
         /**
@@ -273,12 +273,12 @@ let MoniSelect = class MoniSelect extends MoniElement {
      * mensaje y a dónde llevar el foco.
      */
     /**
-         * API de validación equivalente a la de un control nativo.
-         *
-         * Los elementos form-associated participan en la validación del formulario,
-         * pero no reciben estos miembros automáticamente: hay que exponerlos para que
-         * un `moni-select` se pueda interrogar igual que un `<input>`.
-         */
+     * API de validación equivalente a la de un control nativo.
+     *
+     * Los elementos form-associated participan en la validación del formulario,
+     * pero no reciben estos miembros automáticamente: hay que exponerlos para que
+     * un `moni-select` se pueda interrogar igual que un `<input>`.
+     */
     get validity() {
         return this._internals.validity;
     }
@@ -295,7 +295,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
         if (!this._internals?.setValidity)
             return;
         if (this.required && !this.value) {
-            this._internals.setValidity({ valueMissing: true }, 'Selecciona una opción.', this._input ?? undefined);
+            this._internals.setValidity({ valueMissing: true }, "Selecciona una opción.", this._input ?? undefined);
             return;
         }
         this._internals.setValidity({});
@@ -303,339 +303,343 @@ let MoniSelect = class MoniSelect extends MoniElement {
     static { this.styles = [
         sharedStyles,
         fieldStyles,
-        css `
-			:host {
-				position: relative;
-				display: block;
-			}
-
-			.field {
-				cursor: pointer;
-			}
-
-			input[type='text'] {
-				cursor: pointer;
-				width: 100%;
-			}
-
-			input[type='text'][readonly] {
-				caret-color: transparent;
-				user-select: none;
-			}
-
-			/* Dropdown menu overlay */
-			.dropdown-menu {
-				position: absolute;
-				top: 100%;
-				left: 0;
-				right: 0;
-				z-index: 100;
-				background-color: var(--surface-container);
-				box-shadow: var(--elevate3);
-				border-radius: 0.5rem;
-				margin-top: 4px;
-				padding: 4px 0;
-				list-style: none;
-				opacity: 0;
-				visibility: hidden;
-				transform: scale(0.95) translateY(-8px);
-				transform-origin: top;
-				transition: 
-					opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1), 
-					transform var(--speed3) cubic-bezier(0.34, 1.56, 0.64, 1), 
-					visibility var(--speed3);
-			}
-
-			.dropdown-menu.open {
-				opacity: 1;
-				visibility: visible;
-				transform: scale(1) translateY(0);
-			}
-
-			/* positioning="body" promotes the menu to the browser's top layer.
-			   Reset the Popover UA box while retaining Shadow DOM styles. */
-			.dropdown-menu[popover] {
-				margin: 0;
-				border: 0;
-			}
-
-			.dropdown-menu.placement-top {
-				top: auto;
-				bottom: 100%;
-				margin-top: 0;
-				margin-bottom: 4px;
-				transform-origin: bottom;
-				transform: scale(0.95) translateY(8px);
-			}
-
-			.dropdown-menu.placement-top.open {
-				transform: scale(1) translateY(0);
-			}
-
-			.dropdown-menu.placement-left {
-				top: 0;
-				left: auto;
-				right: 100%;
-				margin-top: 0;
-				margin-right: 4px;
-				transform-origin: right center;
-				transform: scale(0.95) translateX(8px);
-			}
-
-			.dropdown-menu.placement-left.open {
-				transform: scale(1) translateX(0);
-			}
-
-			.dropdown-menu.placement-right {
-				top: 0;
-				left: 100%;
-				right: auto;
-				margin-top: 0;
-				margin-left: 4px;
-				transform-origin: left center;
-				transform: scale(0.95) translateX(-8px);
-			}
-
-			.dropdown-menu.placement-right.open {
-				transform: scale(1) translateX(0);
-			}
-
-			.dropdown-menu.open.scrollable {
-				overflow-x: hidden;
-				overflow-y: auto;
-				overscroll-behavior: contain;
-			}
-
-			/* Desktop category flyouts need visible overflow. If the root list no
-			   longer fits, the component switches to the inline drilldown layout. */
-			.dropdown-menu.open:not(.scrollable) {
-				overflow: visible;
-			}
-
-			/* Bottom sheet drawer styles */
-			.sheet-backdrop {
-				position: fixed;
-				inset: 0;
-				z-index: 1000;
-				background-color: rgba(0, 0, 0, 0.4);
-				opacity: 0;
-				visibility: hidden;
-				transition: opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1), visibility var(--speed3);
-				display: flex;
-				flex-direction: column;
-				justify-content: flex-end;
-			}
-
-			.sheet-backdrop.open {
-				opacity: 1;
-				visibility: visible;
-			}
-
-			.sheet-drawer {
-				background-color: var(--surface-container);
-				border-radius: 1.75rem 1.75rem 0 0;
-				box-shadow: var(--elevate3);
-				max-height: 70vh;
-				display: flex;
-				flex-direction: column;
-				transform: translateY(100%);
-				transition: transform var(--speed3) cubic-bezier(0.16, 1, 0.3, 1);
-				padding: 16px 0;
-			}
-
-			.sheet-drawer.open {
-				transform: translateY(0);
-			}
-
-			.sheet-handle {
-				width: 40px;
-				height: 4px;
-				background-color: var(--outline-variant);
-				border-radius: 2px;
-				margin: 0 auto 16px;
-			}
-
-			.sheet-title {
-				padding: 0 24px 8px;
-				font-size: 1.125rem;
-				font-weight: 700;
-				color: var(--on-surface);
-			}
-
-			.sheet-search-wrapper {
-				padding: 0 16px 12px;
-			}
-
-			.sheet-search-input {
-				width: 100%;
-				box-sizing: border-box;
-				padding: 10px 16px;
-				border: 1px solid var(--outline);
-				border-radius: 9999px;
-				background: var(--surface-container-high);
-				color: var(--on-surface);
-				font-size: 1rem;
-				outline: none;
-			}
-
-			.sheet-search-input:focus {
-				border-color: var(--primary);
-			}
-
-			.sheet-options-list {
-				list-style: none;
-				padding: 0;
-				margin: 0;
-				overflow-y: auto;
-				flex: 1;
-			}
-
-			/* Animated Drilldown Slide Layout */
-			.drilldown-wrapper {
-				width: 100%;
-				overflow: hidden;
-				position: relative;
-				transition: height var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
-			}
-
-			.drilldown-track {
-				display: flex;
-				width: 200%;
-				transition: transform var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
-			}
-
-			.drilldown-track.slide-active {
-				transform: translateX(-50%);
-			}
-
-			.drilldown-panel {
-				width: 50%;
-				box-sizing: border-box;
-				list-style: none;
-				padding: 0;
-				margin: 0;
-				flex-shrink: 0;
-			}
-
-			.drilldown-panel.panel-active {
-				max-height: none;
-			}
-
-			.drilldown-panel.panel-inactive {
-				max-height: 0;
-				overflow: hidden;
-			}
-
-			/* Group / Subcategory header (Browsing mode - acts as a hover trigger for submenus) */
-			.group-header {
-				padding: 8px 16px;
-				font-size: 0.875rem;
-				font-weight: 500;
-				color: var(--on-surface);
-				cursor: pointer;
-				display: flex;
-				align-items: center;
-				position: relative;
-				user-select: none;
-				transition: background-color var(--speed2) ease, color var(--speed2) ease;
-			}
-
-			.group-header:hover,
-			.group-header.active {
-				background-color: var(--surface-container-high);
-				color: var(--primary);
-			}
-
-			/* Inline header (Searching mode & Sheet mode - flat layout) */
-			.group-header-flat {
-				padding: 6px 16px;
-				font-size: 0.75rem;
-				font-weight: 700;
-				text-transform: uppercase;
-				color: var(--primary);
-				letter-spacing: 0.05em;
-				background-color: var(--surface-container-low);
-				user-select: none;
-			}
-
-			/* Hierarchical sub-menu with premium flyout animation */
-			.submenu {
-				display: block;
-				opacity: 0;
-				visibility: hidden;
-				position: absolute;
-				top: 0;
-				/* Intermediate flyouts must keep overflow visible so deeper
-				   subcategories are never clipped. Oversized trees switch to the
-				   scrollable inline drilldown layout before rendering. */
-				overflow: visible;
-				background-color: var(--surface-container-highest);
-				box-shadow: var(--elevate3);
-				border-radius: 0.5rem;
-				padding: 4px 0;
-				list-style: none;
-				min-width: 160px;
-				z-index: 110;
-				transition: 
-					opacity var(--speed2) cubic-bezier(0.2, 0.8, 0.2, 1), 
-					transform var(--speed2) cubic-bezier(0.34, 1.56, 0.64, 1), 
-					visibility var(--speed2);
-			}
-
-			.submenu.open-right {
-				left: 100%;
-				margin-left: 2px;
-				transform: scale(0.9) translateX(-10px);
-				transform-origin: top left;
-			}
-
-			.submenu.open-left {
-				right: 100%;
-				margin-right: 2px;
-				transform: scale(0.9) translateX(10px);
-				transform-origin: top right;
-			}
-
-			.group-header:hover > .submenu.active,
-			.group-header.active > .submenu.active {
-				opacity: 1;
-				visibility: visible;
-				transform: scale(1) translateX(0);
-			}
-
-			.option-item {
-				cursor: pointer;
-				padding: 8px 16px;
-				font-size: 0.875rem;
-				color: var(--on-surface);
-				display: flex;
-				align-items: center;
-				transition: background-color var(--speed2) ease;
-			}
-
-			.option-item:hover,
-			.option-item.active-nav {
-				background-color: var(--surface-container-high);
-			}
-
-			.option-item.selected {
-				background-color: var(--tertiary-container);
-				color: var(--on-tertiary-container);
-				font-weight: 500;
-			}
-
-			.option-item.disabled {
-				opacity: 0.5;
-				pointer-events: none;
-			}
-
-			.no-options {
-				padding: 12px 16px;
-				font-size: 0.875rem;
-				color: var(--outline);
-				text-align: center;
-			}
-		`
+        css `
+      :host {
+        position: relative;
+        display: block;
+      }
+
+      .field {
+        cursor: pointer;
+      }
+
+      input[type="text"] {
+        cursor: pointer;
+        width: 100%;
+      }
+
+      input[type="text"][readonly] {
+        caret-color: transparent;
+        user-select: none;
+      }
+
+      /* Dropdown menu overlay */
+      .dropdown-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background-color: var(--surface-container);
+        box-shadow: var(--elevate3);
+        border-radius: 0.5rem;
+        margin-top: 4px;
+        padding: 4px 0;
+        list-style: none;
+        opacity: 0;
+        visibility: hidden;
+        transform: scale(0.95) translateY(-8px);
+        transform-origin: top;
+        transition:
+          opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1),
+          transform var(--speed3) cubic-bezier(0.34, 1.56, 0.64, 1),
+          visibility var(--speed3);
+      }
+
+      .dropdown-menu.open {
+        opacity: 1;
+        visibility: visible;
+        transform: scale(1) translateY(0);
+      }
+
+      /* positioning="body" promotes the menu to the browser's top layer.
+			   Reset the Popover UA box while retaining Shadow DOM styles. */
+      .dropdown-menu[popover] {
+        margin: 0;
+        border: 0;
+      }
+
+      .dropdown-menu.placement-top {
+        top: auto;
+        bottom: 100%;
+        margin-top: 0;
+        margin-bottom: 4px;
+        transform-origin: bottom;
+        transform: scale(0.95) translateY(8px);
+      }
+
+      .dropdown-menu.placement-top.open {
+        transform: scale(1) translateY(0);
+      }
+
+      .dropdown-menu.placement-left {
+        top: 0;
+        left: auto;
+        right: 100%;
+        margin-top: 0;
+        margin-right: 4px;
+        transform-origin: right center;
+        transform: scale(0.95) translateX(8px);
+      }
+
+      .dropdown-menu.placement-left.open {
+        transform: scale(1) translateX(0);
+      }
+
+      .dropdown-menu.placement-right {
+        top: 0;
+        left: 100%;
+        right: auto;
+        margin-top: 0;
+        margin-left: 4px;
+        transform-origin: left center;
+        transform: scale(0.95) translateX(-8px);
+      }
+
+      .dropdown-menu.placement-right.open {
+        transform: scale(1) translateX(0);
+      }
+
+      .dropdown-menu.open.scrollable {
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+      }
+
+      /* Desktop category flyouts need visible overflow. If the root list no
+			   longer fits, the component switches to the inline drilldown layout. */
+      .dropdown-menu.open:not(.scrollable) {
+        overflow: visible;
+      }
+
+      /* Bottom sheet drawer styles */
+      .sheet-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 1000;
+        background-color: rgba(0, 0, 0, 0.4);
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1),
+          visibility var(--speed3);
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+
+      .sheet-backdrop.open {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .sheet-drawer {
+        background-color: var(--surface-container);
+        border-radius: 1.75rem 1.75rem 0 0;
+        box-shadow: var(--elevate3);
+        max-height: 70vh;
+        display: flex;
+        flex-direction: column;
+        transform: translateY(100%);
+        transition: transform var(--speed3) cubic-bezier(0.16, 1, 0.3, 1);
+        padding: 16px 0;
+      }
+
+      .sheet-drawer.open {
+        transform: translateY(0);
+      }
+
+      .sheet-handle {
+        width: 40px;
+        height: 4px;
+        background-color: var(--outline-variant);
+        border-radius: 2px;
+        margin: 0 auto 16px;
+      }
+
+      .sheet-title {
+        padding: 0 24px 8px;
+        font-size: 1.125rem;
+        font-weight: 700;
+        color: var(--on-surface);
+      }
+
+      .sheet-search-wrapper {
+        padding: 0 16px 12px;
+      }
+
+      .sheet-search-input {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 16px;
+        border: 1px solid var(--outline);
+        border-radius: 9999px;
+        background: var(--surface-container-high);
+        color: var(--on-surface);
+        font-size: 1rem;
+        outline: none;
+      }
+
+      .sheet-search-input:focus {
+        border-color: var(--primary);
+      }
+
+      .sheet-options-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      /* Animated Drilldown Slide Layout */
+      .drilldown-wrapper {
+        width: 100%;
+        overflow: hidden;
+        position: relative;
+        transition: height var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
+      }
+
+      .drilldown-track {
+        display: flex;
+        width: 200%;
+        transition: transform var(--speed3) cubic-bezier(0.2, 0.8, 0.2, 1);
+      }
+
+      .drilldown-track.slide-active {
+        transform: translateX(-50%);
+      }
+
+      .drilldown-panel {
+        width: 50%;
+        box-sizing: border-box;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        flex-shrink: 0;
+      }
+
+      .drilldown-panel.panel-active {
+        max-height: none;
+      }
+
+      .drilldown-panel.panel-inactive {
+        max-height: 0;
+        overflow: hidden;
+      }
+
+      /* Group / Subcategory header (Browsing mode - acts as a hover trigger for submenus) */
+      .group-header {
+        padding: 8px 16px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--on-surface);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        position: relative;
+        user-select: none;
+        transition:
+          background-color var(--speed2) ease,
+          color var(--speed2) ease;
+      }
+
+      .group-header:hover,
+      .group-header.active {
+        background-color: var(--surface-container-high);
+        color: var(--primary);
+      }
+
+      /* Inline header (Searching mode & Sheet mode - flat layout) */
+      .group-header-flat {
+        padding: 6px 16px;
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: var(--primary);
+        letter-spacing: 0.05em;
+        background-color: var(--surface-container-low);
+        user-select: none;
+      }
+
+      /* Hierarchical sub-menu with premium flyout animation */
+      .submenu {
+        display: block;
+        opacity: 0;
+        visibility: hidden;
+        position: absolute;
+        top: 0;
+        /* Intermediate flyouts must keep overflow visible so deeper
+				   subcategories are never clipped. Oversized trees switch to the
+				   scrollable inline drilldown layout before rendering. */
+        overflow: visible;
+        background-color: var(--surface-container-highest);
+        box-shadow: var(--elevate3);
+        border-radius: 0.5rem;
+        padding: 4px 0;
+        list-style: none;
+        min-width: 160px;
+        z-index: 110;
+        transition:
+          opacity var(--speed2) cubic-bezier(0.2, 0.8, 0.2, 1),
+          transform var(--speed2) cubic-bezier(0.34, 1.56, 0.64, 1),
+          visibility var(--speed2);
+      }
+
+      .submenu.open-right {
+        left: 100%;
+        margin-left: 2px;
+        transform: scale(0.9) translateX(-10px);
+        transform-origin: top left;
+      }
+
+      .submenu.open-left {
+        right: 100%;
+        margin-right: 2px;
+        transform: scale(0.9) translateX(10px);
+        transform-origin: top right;
+      }
+
+      .group-header:hover > .submenu.active,
+      .group-header.active > .submenu.active {
+        opacity: 1;
+        visibility: visible;
+        transform: scale(1) translateX(0);
+      }
+
+      .option-item {
+        cursor: pointer;
+        padding: 8px 16px;
+        font-size: 0.875rem;
+        color: var(--on-surface);
+        display: flex;
+        align-items: center;
+        transition: background-color var(--speed2) ease;
+      }
+
+      .option-item:hover,
+      .option-item.active-nav {
+        background-color: var(--surface-container-high);
+      }
+
+      .option-item.selected {
+        background-color: var(--tertiary-container);
+        color: var(--on-tertiary-container);
+        font-weight: 500;
+      }
+
+      .option-item.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      .no-options {
+        padding: 12px 16px;
+        font-size: 0.875rem;
+        color: var(--outline);
+        text-align: center;
+      }
+    `,
     ]; }
     /**
      * Hook del ciclo de vida (Lit).
@@ -645,12 +649,12 @@ let MoniSelect = class MoniSelect extends MoniElement {
      */
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('click', this._handleOutsideClick);
-        document.addEventListener('moni-select-open', this._handlePeerOpen);
-        window.addEventListener('scroll', this._handleScroll, { capture: true });
-        window.addEventListener('resize', this._handleResize);
-        window.visualViewport?.addEventListener('scroll', this._handleScroll);
-        window.visualViewport?.addEventListener('resize', this._handleResize);
+        document.addEventListener("click", this._handleOutsideClick);
+        document.addEventListener("moni-select-open", this._handlePeerOpen);
+        window.addEventListener("scroll", this._handleScroll, { capture: true });
+        window.addEventListener("resize", this._handleResize);
+        window.visualViewport?.addEventListener("scroll", this._handleScroll);
+        window.visualViewport?.addEventListener("resize", this._handleResize);
     }
     /**
      * Hook del ciclo de vida (Lit).
@@ -660,12 +664,12 @@ let MoniSelect = class MoniSelect extends MoniElement {
     disconnectedCallback() {
         this._hideBodyPopover();
         super.disconnectedCallback();
-        document.removeEventListener('click', this._handleOutsideClick);
-        document.removeEventListener('moni-select-open', this._handlePeerOpen);
-        window.removeEventListener('scroll', this._handleScroll, { capture: true });
-        window.removeEventListener('resize', this._handleResize);
-        window.visualViewport?.removeEventListener('scroll', this._handleScroll);
-        window.visualViewport?.removeEventListener('resize', this._handleResize);
+        document.removeEventListener("click", this._handleOutsideClick);
+        document.removeEventListener("moni-select-open", this._handlePeerOpen);
+        window.removeEventListener("scroll", this._handleScroll, { capture: true });
+        window.removeEventListener("resize", this._handleResize);
+        window.visualViewport?.removeEventListener("scroll", this._handleScroll);
+        window.visualViewport?.removeEventListener("resize", this._handleResize);
     }
     /**
      * Hook de actualización reactiva (Lit).
@@ -675,27 +679,27 @@ let MoniSelect = class MoniSelect extends MoniElement {
      */
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('value')) {
+        if (changedProperties.has("value")) {
             this._internals?.setFormValue?.(this.value);
         }
         this._syncValidity();
-        if (changedProperties.has('_open') ||
-            changedProperties.has('_drilldownPath') ||
-            changedProperties.has('_searchQuery') ||
-            changedProperties.has('_useInlineCategories') ||
-            changedProperties.has('_parsedOptions')) {
+        if (changedProperties.has("_open") ||
+            changedProperties.has("_drilldownPath") ||
+            changedProperties.has("_searchQuery") ||
+            changedProperties.has("_useInlineCategories") ||
+            changedProperties.has("_parsedOptions")) {
             this._updateWrapperHeight();
         }
         if (this._open &&
-            (changedProperties.has('positioning') ||
-                changedProperties.has('placement') ||
-                changedProperties.has('dropdownWidth') ||
-                changedProperties.has('dropdownMaxHeight'))) {
+            (changedProperties.has("positioning") ||
+                changedProperties.has("placement") ||
+                changedProperties.has("dropdownWidth") ||
+                changedProperties.has("dropdownMaxHeight"))) {
             this._updateMenuPosition();
         }
-        if (changedProperties.has('_open') ||
-            changedProperties.has('positioning') ||
-            changedProperties.has('sheet')) {
+        if (changedProperties.has("_open") ||
+            changedProperties.has("positioning") ||
+            changedProperties.has("sheet")) {
             this._syncBodyPopover();
         }
     }
@@ -706,21 +710,21 @@ let MoniSelect = class MoniSelect extends MoniElement {
      * imperativamente al `wrapper` para disparar una transición CSS suave en la altura del dropdown.
      */
     _updateWrapperHeight() {
-        const wrapper = this.shadowRoot?.querySelector('.drilldown-wrapper');
+        const wrapper = this.shadowRoot?.querySelector(".drilldown-wrapper");
         if (!wrapper)
             return;
         if (!this._open || this.sheet) {
-            wrapper.style.height = '';
+            wrapper.style.height = "";
             return;
         }
         // Wait for Lit render and styles to apply
         requestAnimationFrame(() => {
-            const activePanel = this.shadowRoot?.querySelector('.drilldown-panel.panel-active');
+            const activePanel = this.shadowRoot?.querySelector(".drilldown-panel.panel-active");
             if (activePanel) {
                 wrapper.style.height = `${activePanel.scrollHeight}px`;
             }
             else {
-                wrapper.style.height = '';
+                wrapper.style.height = "";
             }
         });
     }
@@ -731,11 +735,11 @@ let MoniSelect = class MoniSelect extends MoniElement {
      */
     _syncBodyPopover() {
         const menu = this._menu;
-        if (!menu || typeof menu.showPopover !== 'function')
+        if (!menu || typeof menu.showPopover !== "function")
             return;
-        const shouldBeOpen = this._open && !this.sheet && this.positioning === 'body';
+        const shouldBeOpen = this._open && !this.sheet && this.positioning === "body";
         try {
-            const isOpen = menu.matches(':popover-open');
+            const isOpen = menu.matches(":popover-open");
             if (shouldBeOpen && !isOpen) {
                 menu.showPopover();
             }
@@ -749,10 +753,10 @@ let MoniSelect = class MoniSelect extends MoniElement {
     }
     _hideBodyPopover() {
         const menu = this._menu;
-        if (!menu || typeof menu.hidePopover !== 'function')
+        if (!menu || typeof menu.hidePopover !== "function")
             return;
         try {
-            if (menu.matches(':popover-open'))
+            if (menu.matches(":popover-open"))
                 menu.hidePopover();
         }
         catch {
@@ -776,7 +780,14 @@ let MoniSelect = class MoniSelect extends MoniElement {
         const left = viewport?.offsetLeft ?? 0;
         const height = viewport?.height ?? window.innerHeight;
         const width = viewport?.width ?? window.innerWidth;
-        return { top, left, height, width, bottom: top + height, right: left + width };
+        return {
+            top,
+            left,
+            height,
+            width,
+            bottom: top + height,
+            right: left + width,
+        };
     }
     /**
      * Calcula el espacio vertical en una dirección. Además del espacio físico,
@@ -787,7 +798,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
         const viewport = this._getViewportMetrics();
         const gap = 8;
         const viewportCap = viewport.height * 0.75;
-        if (direction === 'bottom') {
+        if (direction === "bottom") {
             const physicalSpace = viewport.bottom - rect.bottom - gap;
             const triggerOffset = rect.bottom - viewport.top + gap;
             return Math.max(0, Math.floor(Math.min(viewportCap, physicalSpace, viewportCap - triggerOffset)));
@@ -799,12 +810,12 @@ let MoniSelect = class MoniSelect extends MoniElement {
     _normalizeManualMaxHeight() {
         const raw = this.dropdownMaxHeight.trim();
         if (!raw)
-            return '';
+            return "";
         const normalized = /^\d+(?:\.\d+)?$/.test(raw) ? `${raw}px` : raw;
-        if (typeof CSS !== 'undefined' &&
-            typeof CSS.supports === 'function' &&
-            !CSS.supports('max-height', normalized)) {
-            return '';
+        if (typeof CSS !== "undefined" &&
+            typeof CSS.supports === "function" &&
+            !CSS.supports("max-height", normalized)) {
+            return "";
         }
         return normalized;
     }
@@ -815,9 +826,9 @@ let MoniSelect = class MoniSelect extends MoniElement {
             return null;
         const amount = Number(match[1]);
         const unit = match[2].toLowerCase();
-        if (unit === 'px')
+        if (unit === "px")
             return amount;
-        if (unit === 'rem') {
+        if (unit === "rem") {
             const rootSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
             return amount * rootSize;
         }
@@ -825,7 +836,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
     }
     _getMenuHeightConstraint(rect, placement = this._actualPlacement) {
         const viewport = this._getViewportMetrics();
-        const automatic = placement === 'top' || placement === 'bottom'
+        const automatic = placement === "top" || placement === "bottom"
             ? this._getDirectionalAvailableHeight(placement, rect)
             : Math.max(0, Math.floor(Math.min(viewport.height * 0.75, viewport.height - 16)));
         const manualCss = this._normalizeManualMaxHeight();
@@ -835,7 +846,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
         const px = manualPx === null ? automatic : Math.min(automatic, manualPx);
         return {
             css: manualCss ? `min(${automatic}px, ${manualCss})` : `${automatic}px`,
-            px: Math.max(0, px)
+            px: Math.max(0, px),
         };
     }
     _estimateDesiredMenuHeight() {
@@ -855,18 +866,19 @@ let MoniSelect = class MoniSelect extends MoniElement {
     /** Profundidad máxima de flyouts necesaria para representar el árbol. */
     _getGroupDepth(nodes) {
         return nodes.reduce((depth, node) => {
-            if (node.type === 'option')
+            if (node.type === "option")
                 return depth;
             return Math.max(depth, 1 + this._getGroupDepth(node.children));
         }, 0);
     }
     /** Detecta cualquier nivel cuya lista directa necesitaría scroll propio. */
     _hasOversizedGroupPanel(nodes, maxHeight) {
-        return nodes.some(node => {
-            if (node.type === 'option')
+        return nodes.some((node) => {
+            if (node.type === "option")
                 return false;
             const panelHeight = node.children.length * 40 + 8;
-            return panelHeight > maxHeight || this._hasOversizedGroupPanel(node.children, maxHeight);
+            return (panelHeight > maxHeight ||
+                this._hasOversizedGroupPanel(node.children, maxHeight));
         });
     }
     /**
@@ -879,7 +891,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
         const viewport = this._getViewportMetrics();
         let boundaryLeft = viewport.left;
         let boundaryRight = viewport.right;
-        if (this.positioning !== 'body') {
+        if (this.positioning !== "body") {
             let current = this;
             while (current) {
                 const parent = current.parentNode instanceof ShadowRoot
@@ -900,42 +912,41 @@ let MoniSelect = class MoniSelect extends MoniElement {
     }
     _determineActualPlacement() {
         if (this.sheet) {
-            this._actualPlacement = 'bottom';
+            this._actualPlacement = "bottom";
             return;
         }
         const rect = this.getBoundingClientRect();
         const viewport = this._getViewportMetrics();
-        const spaceBelow = this._getDirectionalAvailableHeight('bottom', rect);
-        const spaceAbove = this._getDirectionalAvailableHeight('top', rect);
+        const spaceBelow = this._getDirectionalAvailableHeight("bottom", rect);
+        const spaceAbove = this._getDirectionalAvailableHeight("top", rect);
         const spaceRight = viewport.right - rect.right;
         const spaceLeft = rect.left - viewport.left;
         const menuHeight = this._estimateDesiredMenuHeight();
         const menuWidth = 180;
         let preferred = this.placement;
-        if (preferred === 'auto') {
-            preferred = spaceBelow >= menuHeight
-                ? 'bottom'
-                : (spaceAbove > spaceBelow ? 'top' : 'bottom');
+        if (preferred === "auto") {
+            preferred =
+                spaceBelow >= menuHeight
+                    ? "bottom"
+                    : spaceAbove > spaceBelow
+                        ? "top"
+                        : "bottom";
         }
-        if (preferred === 'top') {
-            this._actualPlacement = spaceAbove < menuHeight && spaceBelow > spaceAbove
-                ? 'bottom'
-                : 'top';
+        if (preferred === "top") {
+            this._actualPlacement =
+                spaceAbove < menuHeight && spaceBelow > spaceAbove ? "bottom" : "top";
         }
-        else if (preferred === 'bottom') {
-            this._actualPlacement = spaceBelow < menuHeight && spaceAbove > spaceBelow
-                ? 'top'
-                : 'bottom';
+        else if (preferred === "bottom") {
+            this._actualPlacement =
+                spaceBelow < menuHeight && spaceAbove > spaceBelow ? "top" : "bottom";
         }
-        else if (preferred === 'left') {
-            this._actualPlacement = spaceLeft < menuWidth && spaceRight > spaceLeft
-                ? 'right'
-                : 'left';
+        else if (preferred === "left") {
+            this._actualPlacement =
+                spaceLeft < menuWidth && spaceRight > spaceLeft ? "right" : "left";
         }
-        else if (preferred === 'right') {
-            this._actualPlacement = spaceRight < menuWidth && spaceLeft > spaceRight
-                ? 'left'
-                : 'right';
+        else if (preferred === "right") {
+            this._actualPlacement =
+                spaceRight < menuWidth && spaceLeft > spaceRight ? "left" : "right";
         }
     }
     /**
@@ -952,70 +963,71 @@ let MoniSelect = class MoniSelect extends MoniElement {
         const viewport = this._getViewportMetrics();
         const constraint = this._getMenuHeightConstraint(rect);
         this._menuMaxHeight = constraint.css;
-        const hasGroups = this._parsedOptions.some(node => node.type === 'group');
+        const hasGroups = this._parsedOptions.some((node) => node.type === "group");
         const estimatedRootHeight = this._parsedOptions.length * 40 + 8;
         const groupDepth = this._getGroupDepth(this._parsedOptions);
         const requiredFlyoutWidth = groupDepth * 160;
         const availableFlyoutWidth = this._getAvailableFlyoutWidth(rect);
         const lacksFlyoutSpace = viewport.width < 600 ||
             (hasGroups && availableFlyoutWidth < requiredFlyoutWidth);
-        const needsVerticalDrilldown = hasGroups && (estimatedRootHeight > constraint.px ||
-            this._hasOversizedGroupPanel(this._parsedOptions, constraint.px));
+        const needsVerticalDrilldown = hasGroups &&
+            (estimatedRootHeight > constraint.px ||
+                this._hasOversizedGroupPanel(this._parsedOptions, constraint.px));
         this._useInlineCategories = lacksFlyoutSpace || needsVerticalDrilldown;
-        if (this.positioning !== 'fixed' && this.positioning !== 'body') {
-            this._menuStyle = '';
+        if (this.positioning !== "fixed" && this.positioning !== "body") {
+            this._menuStyle = "";
             return;
         }
-        let widthStyle = '';
-        if (this.dropdownWidth === 'trigger') {
+        let widthStyle = "";
+        if (this.dropdownWidth === "trigger") {
             widthStyle = `width: ${rect.width}px;`;
         }
-        else if (this.dropdownWidth === 'auto') {
-            widthStyle = 'width: auto; min-width: 160px; max-width: 320px;';
+        else if (this.dropdownWidth === "auto") {
+            widthStyle = "width: auto; min-width: 160px; max-width: 320px;";
         }
         else {
             widthStyle = `width: ${this.dropdownWidth};`;
         }
-        if (this._actualPlacement === 'top') {
-            this._menuStyle = `
-				position: fixed;
-				bottom: ${window.innerHeight - rect.top}px;
-				left: ${rect.left}px;
-				${widthStyle}
-				top: auto;
-				right: auto;
+        if (this._actualPlacement === "top") {
+            this._menuStyle = `
+				position: fixed;
+				bottom: ${window.innerHeight - rect.top}px;
+				left: ${rect.left}px;
+				${widthStyle}
+				top: auto;
+				right: auto;
 			`;
         }
-        else if (this._actualPlacement === 'bottom') {
-            this._menuStyle = `
-				position: fixed;
-				top: ${rect.bottom}px;
-				left: ${rect.left}px;
-				${widthStyle}
-				bottom: auto;
-				right: auto;
+        else if (this._actualPlacement === "bottom") {
+            this._menuStyle = `
+				position: fixed;
+				top: ${rect.bottom}px;
+				left: ${rect.left}px;
+				${widthStyle}
+				bottom: auto;
+				right: auto;
 			`;
         }
         else {
             const sideTop = Math.max(viewport.top + 8, Math.min(rect.top, viewport.bottom - constraint.px - 8));
-            if (this._actualPlacement === 'left') {
-                this._menuStyle = `
-					position: fixed;
-					top: ${sideTop}px;
-					right: ${window.innerWidth - rect.left + 4}px;
-					${widthStyle}
-					left: auto;
-					bottom: auto;
+            if (this._actualPlacement === "left") {
+                this._menuStyle = `
+					position: fixed;
+					top: ${sideTop}px;
+					right: ${window.innerWidth - rect.left + 4}px;
+					${widthStyle}
+					left: auto;
+					bottom: auto;
 				`;
             }
             else {
-                this._menuStyle = `
-					position: fixed;
-					top: ${sideTop}px;
-					left: ${rect.right + 4}px;
-					${widthStyle}
-					right: auto;
-					bottom: auto;
+                this._menuStyle = `
+					position: fixed;
+					top: ${sideTop}px;
+					left: ${rect.right + 4}px;
+					${widthStyle}
+					right: auto;
+					bottom: auto;
 				`;
             }
         }
@@ -1026,13 +1038,13 @@ let MoniSelect = class MoniSelect extends MoniElement {
      */
     _getMenuStyle() {
         const constraintStyle = `max-height: ${this._menuMaxHeight}; --_select-menu-max-height: ${this._menuMaxHeight};`;
-        if (this.positioning === 'fixed' || this.positioning === 'body') {
+        if (this.positioning === "fixed" || this.positioning === "body") {
             return `${this._menuStyle} ${constraintStyle}`;
         }
-        if (this.dropdownWidth === 'auto') {
+        if (this.dropdownWidth === "auto") {
             return `width: max-content; min-width: 160px; max-width: 320px; ${constraintStyle}`;
         }
-        else if (this.dropdownWidth !== 'trigger') {
+        else if (this.dropdownWidth !== "trigger") {
             return `width: ${this.dropdownWidth}; ${constraintStyle}`;
         }
         return constraintStyle;
@@ -1055,9 +1067,9 @@ let MoniSelect = class MoniSelect extends MoniElement {
         const assigned = this._slot.assignedElements({ flatten: true });
         const tree = [];
         const findOrCreateGroup = (nodes, label) => {
-            let group = nodes.find(n => n.type === 'group' && n.label === label);
+            let group = nodes.find((n) => n.type === "group" && n.label === label);
             if (!group) {
-                group = { type: 'group', label, children: [] };
+                group = { type: "group", label, children: [] };
                 nodes.push(group);
             }
             return group;
@@ -1065,9 +1077,9 @@ let MoniSelect = class MoniSelect extends MoniElement {
         const insertOption = (targetTree, opt, groupPath) => {
             let currentLevel = targetTree;
             if (groupPath.length > 0) {
-                opt.group = groupPath.join(' / ');
+                opt.group = groupPath.join(" / ");
             }
-            groupPath.forEach(part => {
+            groupPath.forEach((part) => {
                 const group = findOrCreateGroup(currentLevel, part);
                 currentLevel = group.children;
             });
@@ -1075,26 +1087,34 @@ let MoniSelect = class MoniSelect extends MoniElement {
         };
         const parseElement = (el, parentGroupPath) => {
             const tag = el.tagName.toLowerCase();
-            if (tag === 'option' || tag === 'moni-select-option') {
+            if (tag === "option" || tag === "moni-select-option") {
                 const opt = {
-                    type: 'option',
-                    value: el.getAttribute('value') || '',
-                    label: el.textContent?.trim() || el.getAttribute('label') || el.getAttribute('value') || '',
-                    disabled: el.hasAttribute('disabled'),
-                    element: el
+                    type: "option",
+                    value: el.getAttribute("value") || "",
+                    label: el.textContent?.trim() ||
+                        el.getAttribute("label") ||
+                        el.getAttribute("value") ||
+                        "",
+                    disabled: el.hasAttribute("disabled"),
+                    element: el,
                 };
-                const groupAttr = el.getAttribute('group');
-                const localPath = groupAttr ? groupAttr.split('/').map(s => s.trim()).filter(Boolean) : [];
+                const groupAttr = el.getAttribute("group");
+                const localPath = groupAttr
+                    ? groupAttr
+                        .split("/")
+                        .map((s) => s.trim())
+                        .filter(Boolean)
+                    : [];
                 const finalPath = [...parentGroupPath, ...localPath];
                 insertOption(tree, opt, finalPath);
             }
-            else if (tag === 'optgroup') {
-                const label = el.getAttribute('label') || '';
+            else if (tag === "optgroup") {
+                const label = el.getAttribute("label") || "";
                 const localPath = [...parentGroupPath, label];
-                Array.from(el.children).forEach(child => parseElement(child, localPath));
+                Array.from(el.children).forEach((child) => parseElement(child, localPath));
             }
         };
-        assigned.forEach(el => parseElement(el, []));
+        assigned.forEach((el) => parseElement(el, []));
         this._parsedOptions = tree;
         this.requestUpdate();
     }
@@ -1142,10 +1162,10 @@ let MoniSelect = class MoniSelect extends MoniElement {
         this._activeIndex = -1;
         this._drilldownPath = [];
         // La búsqueda siempre comienza limpia, aunque exista un valor seleccionado.
-        this._searchQuery = '';
+        this._searchQuery = "";
         // El evento global permite que cualquier otro select abierto se cierre,
         // incluso cuando la apertura vino del teclado o del icono trailing.
-        emitMoniEvent(this, 'moni-select-open', { detail: { item: this } });
+        emitMoniEvent(this, "moni-select-open", { detail: { item: this } });
         this._updateMenuPosition();
         if (this.searchable) {
             // Esperamos un tick para que el input o sheet esté renderizado antes de enfocarlo.
@@ -1156,7 +1176,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
                     this._input.focus();
                 }
                 else if (this.sheet) {
-                    const sheetInput = this.shadowRoot?.querySelector('.sheet-search-input');
+                    const sheetInput = this.shadowRoot?.querySelector(".sheet-search-input");
                     sheetInput?.focus();
                 }
             }, 50);
@@ -1170,11 +1190,11 @@ let MoniSelect = class MoniSelect extends MoniElement {
         if (!this._open)
             return;
         this._open = false;
-        this._searchQuery = '';
+        this._searchQuery = "";
         this._hideBodyPopover();
     }
     _findOptionByValue(value) {
-        return this._getFlatOptions(this._parsedOptions).find(opt => opt.value === value);
+        return this._getFlatOptions(this._parsedOptions).find((opt) => opt.value === value);
     }
     /**
      * Evento de input (tecleo) en la barra de búsqueda.
@@ -1191,13 +1211,15 @@ let MoniSelect = class MoniSelect extends MoniElement {
             this._openDropdown();
         this._searchQuery = query;
         this._activeIndex = -1;
-        if (this.clearable && query.trim() === '') {
-            this.value = '';
-            emitMoniEvent(this, 'moni-change', { detail: { value: this.value, originalEvent: e } });
+        if (this.clearable && query.trim() === "") {
+            this.value = "";
+            emitMoniEvent(this, "moni-change", {
+                detail: { value: this.value, originalEvent: e },
+            });
             return;
         }
         const flat = this._getFlatOptions(this._parsedOptions);
-        const exactMatch = flat.find(opt => opt.label.toLowerCase() === query.trim().toLowerCase());
+        const exactMatch = flat.find((opt) => opt.label.toLowerCase() === query.trim().toLowerCase());
         if (exactMatch && !exactMatch.disabled) {
             this._selectOption(exactMatch);
         }
@@ -1212,9 +1234,9 @@ let MoniSelect = class MoniSelect extends MoniElement {
             return;
         this.value = option.value;
         this._closeDropdown();
-        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-        emitMoniEvent(this, 'moni-change', { detail: { value: this.value } });
+        this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        emitMoniEvent(this, "moni-change", { detail: { value: this.value } });
     }
     /**
      * Maneja el Hover sobre categorías en modo Desktop (Submenús emergentes).
@@ -1224,7 +1246,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
      */
     _onSubmenuMouseEnter(e) {
         const headerEl = e.currentTarget;
-        const submenu = headerEl.querySelector(':scope > .submenu');
+        const submenu = headerEl.querySelector(":scope > .submenu");
         if (!submenu)
             return;
         const rect = headerEl.getBoundingClientRect();
@@ -1232,12 +1254,12 @@ let MoniSelect = class MoniSelect extends MoniElement {
         const spaceOnLeft = rect.left;
         const submenuWidth = 160;
         if (spaceOnRight < submenuWidth && spaceOnLeft > spaceOnRight) {
-            submenu.classList.remove('open-right');
-            submenu.classList.add('open-left');
+            submenu.classList.remove("open-right");
+            submenu.classList.add("open-left");
         }
         else {
-            submenu.classList.remove('open-left');
-            submenu.classList.add('open-right');
+            submenu.classList.remove("open-left");
+            submenu.classList.add("open-right");
         }
     }
     /**
@@ -1249,7 +1271,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
             return;
         // Obtenemos solo las opciones que están visualmente disponibles en la jerarquía actual
         const visible = this._getVisibleOptions();
-        if (e.key === 'ArrowDown') {
+        if (e.key === "ArrowDown") {
             e.preventDefault();
             if (!this._open) {
                 // Si está cerrado, ArrowDown lo abre (comportamiento estándar nativo)
@@ -1261,15 +1283,16 @@ let MoniSelect = class MoniSelect extends MoniElement {
                 this._scrollToActive();
             }
         }
-        else if (e.key === 'ArrowUp') {
+        else if (e.key === "ArrowUp") {
             e.preventDefault();
             if (this._open && visible.length > 0) {
                 // Navegamos circularmente hacia arriba (+visible.length evita valores negativos en JS)
-                this._activeIndex = (this._activeIndex - 1 + visible.length) % visible.length;
+                this._activeIndex =
+                    (this._activeIndex - 1 + visible.length) % visible.length;
                 this._scrollToActive();
             }
         }
-        else if (e.key === 'Enter') {
+        else if (e.key === "Enter") {
             e.preventDefault();
             if (this._open) {
                 // Si está abierto y hay una opción resaltada, simulamos el click para seleccionarla
@@ -1282,7 +1305,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
                 this._openDropdown();
             }
         }
-        else if (e.key === 'Escape') {
+        else if (e.key === "Escape") {
             e.preventDefault();
             // Escapa el menú sin hacer ninguna selección
             this._closeDropdown();
@@ -1294,9 +1317,9 @@ let MoniSelect = class MoniSelect extends MoniElement {
     _scrollToActive() {
         // Se requiere setTimeout para darle tiempo a Lit a renderizar la clase 'active-nav'
         setTimeout(() => {
-            const activeEl = this.shadowRoot?.querySelector('.option-item.active-nav');
+            const activeEl = this.shadowRoot?.querySelector(".option-item.active-nav");
             if (activeEl) {
-                activeEl.scrollIntoView({ block: 'nearest' });
+                activeEl.scrollIntoView({ block: "nearest" });
             }
         }, 0);
     }
@@ -1307,7 +1330,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
     _getFlatOptions(nodes) {
         const flat = [];
         const traverse = (n) => {
-            if (n.type === 'option') {
+            if (n.type === "option") {
                 flat.push(n);
             }
             else {
@@ -1322,7 +1345,8 @@ let MoniSelect = class MoniSelect extends MoniElement {
         if (!this._searchQuery)
             return flat;
         const query = this._searchQuery.toLowerCase();
-        return flat.filter(opt => opt.label.toLowerCase().includes(query) || opt.value.toLowerCase().includes(query));
+        return flat.filter((opt) => opt.label.toLowerCase().includes(query) ||
+            opt.value.toLowerCase().includes(query));
     }
     _getVisibleOptions() {
         const filtered = this._getFilteredOptions();
@@ -1331,9 +1355,9 @@ let MoniSelect = class MoniSelect extends MoniElement {
         if (this.sheet || this._useInlineCategories) {
             if (this._drilldownPath.length > 0) {
                 const activeGroup = this._drilldownPath[this._drilldownPath.length - 1];
-                return activeGroup.children.filter(n => n.type === 'option');
+                return activeGroup.children.filter((n) => n.type === "option");
             }
-            return this._parsedOptions.filter(n => n.type === 'option');
+            return this._parsedOptions.filter((n) => n.type === "option");
         }
         return filtered;
     }
@@ -1346,26 +1370,35 @@ let MoniSelect = class MoniSelect extends MoniElement {
      */
     _renderRootList() {
         let visibleIndex = 0;
-        return this._parsedOptions.map(node => {
-            if (node.type === 'option') {
+        return this._parsedOptions.map((node) => {
+            if (node.type === "option") {
                 const currentIdx = visibleIndex++;
                 const isSelected = node.value === this.value;
                 const isActiveNav = this._drilldownPath.length === 0 && currentIdx === this._activeIndex;
-                return html `
-					<li
-						class="option-item ${isSelected ? 'selected' : ''} ${isActiveNav ? 'active-nav' : ''} ${node.disabled ? 'disabled' : ''}"
-						@click=${() => this._selectOption(node)}
-					>
-						${node.label}
-					</li>
-				`;
+                return html `
+          <li
+            class="option-item ${isSelected ? "selected" : ""} ${isActiveNav ? "active-nav" : ""} ${node.disabled ? "disabled" : ""}"
+            @click=${() => this._selectOption(node)}
+          >
+            ${node.label}
+          </li>
+        `;
             }
-            return html `
-				<li class="group-header" @click=${(e) => { e.stopPropagation(); this._drilldownPath = [...this._drilldownPath, node]; }}>
-					<span>${node.label}</span>
-					<moni-icon name="chevron_right" style="margin-inline-start: auto; font-size: 1.125rem;"></moni-icon>
-				</li>
-			`;
+            return html `
+        <li
+          class="group-header"
+          @click=${(e) => {
+                e.stopPropagation();
+                this._drilldownPath = [...this._drilldownPath, node];
+            }}
+        >
+          <span>${node.label}</span>
+          <moni-icon
+            name="chevron_right"
+            style="margin-inline-start: auto; font-size: 1.125rem;"
+          ></moni-icon>
+        </li>
+      `;
         });
     }
     /**
@@ -1380,63 +1413,84 @@ let MoniSelect = class MoniSelect extends MoniElement {
             return nothing;
         const activeGroup = this._drilldownPath[this._drilldownPath.length - 1];
         let visibleIndex = 0;
-        return html `
-			<li class="group-header" @click=${(e) => { e.stopPropagation(); this._drilldownPath = this._drilldownPath.slice(0, -1); }}>
-				<moni-icon name="arrow_back" style="font-size: 1.25rem; margin-inline-end: 8px;"></moni-icon>
-				<span>Regresar</span>
-			</li>
-			<li class="group-header-flat">${activeGroup.label}</li>
-			${activeGroup.children.map(node => {
-            if (node.type === 'option') {
+        return html `
+      <li
+        class="group-header"
+        @click=${(e) => {
+            e.stopPropagation();
+            this._drilldownPath = this._drilldownPath.slice(0, -1);
+        }}
+      >
+        <moni-icon
+          name="arrow_back"
+          style="font-size: 1.25rem; margin-inline-end: 8px;"
+        ></moni-icon>
+        <span>Regresar</span>
+      </li>
+      <li class="group-header-flat">${activeGroup.label}</li>
+      ${activeGroup.children.map((node) => {
+            if (node.type === "option") {
                 const currentIdx = visibleIndex++;
                 const isSelected = node.value === this.value;
                 const isActiveNav = this._drilldownPath.length > 0 && currentIdx === this._activeIndex;
-                return html `
-						<li
-							class="option-item ${isSelected ? 'selected' : ''} ${isActiveNav ? 'active-nav' : ''} ${node.disabled ? 'disabled' : ''}"
-							@click=${() => this._selectOption(node)}
-						>
-							${node.label}
-						</li>
-					`;
+                return html `
+            <li
+              class="option-item ${isSelected ? "selected" : ""} ${isActiveNav ? "active-nav" : ""} ${node.disabled ? "disabled" : ""}"
+              @click=${() => this._selectOption(node)}
+            >
+              ${node.label}
+            </li>
+          `;
             }
-            return html `
-					<li class="group-header" @click=${(e) => { e.stopPropagation(); this._drilldownPath = [...this._drilldownPath, node]; }}>
-						<span>${node.label}</span>
-						<moni-icon name="chevron_right" style="margin-inline-start: auto; font-size: 1.125rem;"></moni-icon>
-					</li>
-				`;
-        })}
-		`;
+            return html `
+          <li
+            class="group-header"
+            @click=${(e) => {
+                e.stopPropagation();
+                this._drilldownPath = [...this._drilldownPath, node];
+            }}
+          >
+            <span>${node.label}</span>
+            <moni-icon
+              name="chevron_right"
+              style="margin-inline-start: auto; font-size: 1.125rem;"
+            ></moni-icon>
+          </li>
+        `;
+        })}
+    `;
     }
     _renderDesktopNode(node, flatIndexRef) {
-        if (node.type === 'option') {
+        if (node.type === "option") {
             const currentIdx = flatIndexRef.value++;
             const isSelected = node.value === this.value;
             const isActiveNav = currentIdx === this._activeIndex;
-            return html `
-				<li
-					class="option-item ${isSelected ? 'selected' : ''} ${isActiveNav ? 'active-nav' : ''} ${node.disabled ? 'disabled' : ''}"
-					@click=${() => this._selectOption(node)}
-				>
-					${node.label}
-				</li>
-			`;
+            return html `
+        <li
+          class="option-item ${isSelected ? "selected" : ""} ${isActiveNav ? "active-nav" : ""} ${node.disabled ? "disabled" : ""}"
+          @click=${() => this._selectOption(node)}
+        >
+          ${node.label}
+        </li>
+      `;
         }
-        return html `
-			<li 
-				class="group-header"
-				@mouseenter=${this._onSubmenuMouseEnter}
-				@click=${(e) => e.stopPropagation()}
-			>
-				<span>${node.label}</span>
-				<moni-icon name="chevron_right" style="margin-inline-start: auto; font-size: 1.125rem;"></moni-icon>
-				
-				<ul class="submenu active open-right">
-					${node.children.map(child => this._renderDesktopNode(child, flatIndexRef))}
-				</ul>
-			</li>
-		`;
+        return html `
+      <li
+        class="group-header"
+        @mouseenter=${this._onSubmenuMouseEnter}
+        @click=${(e) => e.stopPropagation()}
+      >
+        <span>${node.label}</span>
+        <moni-icon
+          name="chevron_right"
+          style="margin-inline-start: auto; font-size: 1.125rem;"
+        ></moni-icon>
+
+        <ul class="submenu active open-right">
+          ${node.children.map((child) => this._renderDesktopNode(child, flatIndexRef))}
+        </ul>
+      </li>
+    `;
     }
     /**
      * Orquestador principal de renderizado de la lista de opciones.
@@ -1452,48 +1506,54 @@ let MoniSelect = class MoniSelect extends MoniElement {
         }
         if (this._searchQuery) {
             const groups = {};
-            filtered.forEach(opt => {
-                const gName = opt.group || '';
+            filtered.forEach((opt) => {
+                const gName = opt.group || "";
                 if (!groups[gName])
                     groups[gName] = [];
                 groups[gName].push(opt);
             });
             let flatIndex = 0;
-            return Object.entries(groups).map(([groupName, groupOpts]) => html `
-				${groupName ? html `<li class="group-header-flat">${groupName}</li>` : nothing}
-				${groupOpts.map(opt => {
+            return Object.entries(groups).map(([groupName, groupOpts]) => html `
+          ${groupName ? html `<li class="group-header-flat">${groupName}</li>` : nothing}
+          ${groupOpts.map((opt) => {
                 const currentIdx = flatIndex++;
                 const isSelected = opt.value === this.value;
                 const isActiveNav = currentIdx === this._activeIndex;
-                return html `
-						<li
-							class="option-item ${isSelected ? 'selected' : ''} ${isActiveNav ? 'active-nav' : ''} ${opt.disabled ? 'disabled' : ''}"
-							@click=${() => this._selectOption(opt)}
-						>
-							${opt.label}
-						</li>
-					`;
-            })}
-			`);
+                return html `
+              <li
+                class="option-item ${isSelected ? "selected" : ""} ${isActiveNav ? "active-nav" : ""} ${opt.disabled ? "disabled" : ""}"
+                @click=${() => this._selectOption(opt)}
+              >
+                ${opt.label}
+              </li>
+            `;
+            })}
+        `);
         }
         if (this.sheet || this._useInlineCategories) {
             const isRootActive = this._drilldownPath.length === 0;
             const isSubActive = !isRootActive;
-            return html `
-				<div class="drilldown-wrapper">
-					<div class="drilldown-track ${this._drilldownPath.length > 0 ? 'slide-active' : ''}">
-						<ul class="drilldown-panel ${isRootActive ? 'panel-active' : 'panel-inactive'}">
-							${this._renderRootList()}
-						</ul>
-						<ul class="drilldown-panel ${isSubActive ? 'panel-active' : 'panel-inactive'}">
-							${this._renderSubcategoryList()}
-						</ul>
-					</div>
-				</div>
-			`;
+            return html `
+        <div class="drilldown-wrapper">
+          <div
+            class="drilldown-track ${this._drilldownPath.length > 0 ? "slide-active" : ""}"
+          >
+            <ul
+              class="drilldown-panel ${isRootActive ? "panel-active" : "panel-inactive"}"
+            >
+              ${this._renderRootList()}
+            </ul>
+            <ul
+              class="drilldown-panel ${isSubActive ? "panel-active" : "panel-inactive"}"
+            >
+              ${this._renderSubcategoryList()}
+            </ul>
+          </div>
+        </div>
+      `;
         }
         const flatIndexRef = { value: 0 };
-        return this._parsedOptions.map(node => this._renderDesktopNode(node, flatIndexRef));
+        return this._parsedOptions.map((node) => this._renderDesktopNode(node, flatIndexRef));
     }
     /**
      * Ensambla el Shadow DOM del campo select, coordinando dos modos de interfaz de usuario distintos.
@@ -1531,125 +1591,135 @@ let MoniSelect = class MoniSelect extends MoniElement {
         const selectedOpt = this._findOptionByValue(this.value);
         const displayValue = this._open && this.searchable && !this.sheet
             ? this._searchQuery
-            : (selectedOpt ? selectedOpt.label : '');
+            : selectedOpt
+                ? selectedOpt.label
+                : "";
         const isActive = Boolean(displayValue || this.placeholder);
         const fieldClasses = {
             field: true,
             label: Boolean(this.label),
-            fill: this.variant === 'filled',
-            border: this.variant === 'outlined',
-            small: this.size === 'small',
-            large: this.size === 'large',
-            extra: this.size === 'extra',
+            fill: this.variant === "filled",
+            border: this.variant === "outlined",
+            small: this.size === "small",
+            large: this.size === "large",
+            extra: this.size === "extra",
             prefix: hasLeading,
             suffix: true,
             invalid: this.error,
-            round: this.shape === 'round',
-            'small-round': this.shape === 'small-round',
-            square: this.shape === 'no-round'
+            round: this.shape === "round",
+            "small-round": this.shape === "small-round",
+            square: this.shape === "no-round",
         };
         const leading = this.icon
-            ? html `<i class="leading-icon" part="leading-icon"
-					><moni-icon name="${this.icon}"></moni-icon
-				></i>`
+            ? html `<i class="leading-icon" part="leading-icon"
+          ><moni-icon name="${this.icon}"></moni-icon
+        ></i>`
             : nothing;
         const trailing = this.loading
-            ? html `<i class="trailing-icon" part="trailing-icon"
-					><moni-progress
-						variant="circular"
-						indeterminate
-						size="small"
-						style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
-					></moni-progress
-				></i>`
-            : html `<i class="trailing-icon" part="trailing-icon" @click=${this._toggleDropdown}
-					><moni-icon name="${this.trailingIcon}"></moni-icon
-				></i>`;
-        const hasGroups = this._parsedOptions.some(node => node.type === 'group');
+            ? html `<i class="trailing-icon" part="trailing-icon"
+          ><moni-progress
+            variant="circular"
+            indeterminate
+            size="small"
+            style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
+          ></moni-progress
+        ></i>`
+            : html `<i
+          class="trailing-icon"
+          part="trailing-icon"
+          @click=${this._toggleDropdown}
+          ><moni-icon name="${this.trailingIcon}"></moni-icon
+        ></i>`;
+        const hasGroups = this._parsedOptions.some((node) => node.type === "group");
         const usesFlyoutSubmenus = hasGroups && !this._searchQuery && !this._useInlineCategories;
         const menuClasses = {
-            'dropdown-menu': true,
+            "dropdown-menu": true,
             open: this._open,
             scrollable: !usesFlyoutSubmenus,
             searching: Boolean(this._searchQuery),
-            'inline-categories': this._useInlineCategories,
-            'placement-top': this._actualPlacement === 'top',
-            'placement-bottom': this._actualPlacement === 'bottom',
-            'placement-left': this._actualPlacement === 'left',
-            'placement-right': this._actualPlacement === 'right'
+            "inline-categories": this._useInlineCategories,
+            "placement-top": this._actualPlacement === "top",
+            "placement-bottom": this._actualPlacement === "bottom",
+            "placement-left": this._actualPlacement === "left",
+            "placement-right": this._actualPlacement === "right",
         };
-        return html `<div class=${classMap(fieldClasses)} part="field">
-			${leading}
-			<input
-				id="input"
-				type="text"
-				part="input"
-				.value=${displayValue}
-				?readonly=${!this.searchable || this.sheet}
-				?disabled=${this.disabled}
-				inputmode=${ifDefined(!this.searchable || this.sheet ? 'none' : undefined)}
-				placeholder=${this.placeholder || ''}
-				class=${isActive ? 'active' : ''}
-				@click=${this._onInputClick}
-				@input=${this._onSearchInput}
-				@keydown=${this._onKeyDown}
-			/>
-			${this.label
-            ? html `<label
-						for="input"
-						part="label"
-						class=${classMap({ active: isActive })}
-						>${this.label}</label
-					>`
-            : nothing}
-			${trailing}
-			
-			${this.sheet
-            ? html `
-					<div class="sheet-backdrop ${this._open ? 'open' : ''}" @click=${this._closeDropdown}>
-						<div class="sheet-drawer ${this._open ? 'open' : ''}" @click=${(e) => e.stopPropagation()}>
-							<div class="sheet-handle"></div>
-							${this.label ? html `<div class="sheet-title">${this.label}</div>` : nothing}
-							${this.searchable
-                ? html `
-									<div class="sheet-search-wrapper">
-										<input
-											type="text"
-											class="sheet-search-input"
-											.value=${this._searchQuery}
-											placeholder="Buscar..."
-											@input=${this._onSearchInput}
-										/>
-									</div>
-								`
-                : nothing}
-							<ul class="sheet-options-list">
-								${this._renderOptionsList(filtered)}
-							</ul>
-						</div>
-					</div>
-				`
-            : html `
-					<ul
-						class=${classMap(menuClasses)}
-						part="menu"
-						popover=${this.positioning === 'body' ? 'manual' : nothing}
-						style=${this._getMenuStyle()}
-					>
-						${this._renderOptionsList(filtered)}
-					</ul>
-				`}
-
-			<slot style="display: none;" @slotchange=${this._onSlotChange}></slot>
-
-			${this.error
-            ? html `<output part="helper" class="invalid"
-						>${this.errorText || this.helper}</output
-					>`
+        return html `<div class=${classMap(fieldClasses)} part="field">
+      ${leading}
+      <input
+        id="input"
+        type="text"
+        part="input"
+        .value=${displayValue}
+        ?readonly=${!this.searchable || this.sheet}
+        ?disabled=${this.disabled}
+        inputmode=${ifDefined(!this.searchable || this.sheet ? "none" : undefined)}
+        placeholder=${this.placeholder || ""}
+        class=${isActive ? "active" : ""}
+        @click=${this._onInputClick}
+        @input=${this._onSearchInput}
+        @keydown=${this._onKeyDown}
+      />
+      ${this.label
+            ? html `<label
+              for="input"
+              part="label"
+              class=${classMap({ active: isActive })}
+              >${this.label}</label
+            >`
+            : nothing}
+      ${trailing}
+      ${this.sheet
+            ? html `
+              <div
+                class="sheet-backdrop ${this._open ? "open" : ""}"
+                @click=${this._closeDropdown}
+              >
+                <div
+                  class="sheet-drawer ${this._open ? "open" : ""}"
+                  @click=${(e) => e.stopPropagation()}
+                >
+                  <div class="sheet-handle"></div>
+                  ${this.label ? html `<div class="sheet-title">${this.label}</div>` : nothing}
+                  ${this.searchable
+                ? html `
+                          <div class="sheet-search-wrapper">
+                            <input
+                              type="text"
+                              class="sheet-search-input"
+                              .value=${this._searchQuery}
+                              placeholder="Buscar..."
+                              @input=${this._onSearchInput}
+                            />
+                          </div>
+                        `
+                : nothing}
+                  <ul class="sheet-options-list">
+                    ${this._renderOptionsList(filtered)}
+                  </ul>
+                </div>
+              </div>
+            `
+            : html `
+              <ul
+                class=${classMap(menuClasses)}
+                part="menu"
+                popover=${this.positioning === "body" ? "manual" : nothing}
+                style=${this._getMenuStyle()}
+              >
+                ${this._renderOptionsList(filtered)}
+              </ul>
+            `}
+
+      <slot style="display: none;" @slotchange=${this._onSlotChange}></slot>
+
+      ${this.error
+            ? html `<output part="helper" class="invalid"
+              >${this.errorText || this.helper}</output
+            >`
             : this.helper
                 ? html `<output part="helper">${this.helper}</output>`
-                : nothing}
-		</div>`;
+                : nothing}
+    </div>`;
     }
 };
 __decorate([
@@ -1680,7 +1750,7 @@ __decorate([
     property({ reflect: true })
 ], MoniSelect.prototype, "helper", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'error-text' })
+    property({ reflect: true, attribute: "error-text" })
 ], MoniSelect.prototype, "errorText", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -1692,7 +1762,7 @@ __decorate([
     property({ reflect: true })
 ], MoniSelect.prototype, "icon", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'trailing-icon' })
+    property({ reflect: true, attribute: "trailing-icon" })
 ], MoniSelect.prototype, "trailingIcon", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -1713,10 +1783,10 @@ __decorate([
     property({ reflect: true })
 ], MoniSelect.prototype, "placement", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'dropdown-width' })
+    property({ reflect: true, attribute: "dropdown-width" })
 ], MoniSelect.prototype, "dropdownWidth", void 0);
 __decorate([
-    property({ reflect: true, attribute: 'dropdown-max-height' })
+    property({ reflect: true, attribute: "dropdown-max-height" })
 ], MoniSelect.prototype, "dropdownMaxHeight", void 0);
 __decorate([
     state()
@@ -1746,16 +1816,16 @@ __decorate([
     state()
 ], MoniSelect.prototype, "_drilldownPath", void 0);
 __decorate([
-    query('slot')
+    query("slot")
 ], MoniSelect.prototype, "_slot", void 0);
 __decorate([
-    query('input')
+    query("input")
 ], MoniSelect.prototype, "_input", void 0);
 __decorate([
-    query('.dropdown-menu')
+    query(".dropdown-menu")
 ], MoniSelect.prototype, "_menu", void 0);
 MoniSelect = __decorate([
-    customElement('moni-select')
+    customElement("moni-select")
 ], MoniSelect);
 export { MoniSelect };
 export default MoniSelect;