@dropi/ui 0.1.16 → 0.1.17

package/dist/types/components.d.ts

@@ -8,18 +8,57 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BadgeState } from "./components/dropi-badge/dropi-badge";
 import { ButtonSeverity, ButtonSize, ButtonState, ButtonType } from "./components/dropi-button/dropi-button";
 import { InputMode } from "./components/dropi-input/dropi-input";
+import { ModalPosition, ModalSize } from "./components/dropi-modal/dropi-modal";
 import { Event } from "./stencil-public-runtime";
 import { SelectOption, SelectOptionGroup } from "./components/dropi-select/select.types";
+import { SkeletonVariant } from "./components/dropi-skeleton/dropi-skeleton";
+import { TabItem } from "./components/dropi-tabs/dropi-tabs";
 import { TagState, TagType } from "./components/dropi-tag/dropi-tag";
 import { ResizeMode } from "./components/dropi-text-area/dropi-text-area";
+import { ToastMessage } from "./components/dropi-toast/dropi-toast";
+import { TooltipPosition } from "./components/dropi-tooltip/dropi-tooltip";
 export { BadgeState } from "./components/dropi-badge/dropi-badge";
 export { ButtonSeverity, ButtonSize, ButtonState, ButtonType } from "./components/dropi-button/dropi-button";
 export { InputMode } from "./components/dropi-input/dropi-input";
+export { ModalPosition, ModalSize } from "./components/dropi-modal/dropi-modal";
 export { Event } from "./stencil-public-runtime";
 export { SelectOption, SelectOptionGroup } from "./components/dropi-select/select.types";
+export { SkeletonVariant } from "./components/dropi-skeleton/dropi-skeleton";
+export { TabItem } from "./components/dropi-tabs/dropi-tabs";
 export { TagState, TagType } from "./components/dropi-tag/dropi-tag";
 export { ResizeMode } from "./components/dropi-text-area/dropi-text-area";
+export { ToastMessage } from "./components/dropi-toast/dropi-toast";
+export { TooltipPosition } from "./components/dropi-tooltip/dropi-tooltip";
 export namespace Components {
+    /**
+     * @component dropi-accordion
+     * Collapsible section with animated expand/collapse.
+     * @example <dropi-accordion header="¿Cómo funciona?">
+     *   <p>Contenido del acordeón aquí.</p>
+     * </dropi-accordion>
+     */
+    interface DropiAccordion {
+        /**
+          * Disable toggling
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Title shown in the header button
+          * @default ''
+         */
+        "header": string;
+        /**
+          * Whether the section is expanded
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Icon name from dropi-icon sprite (shown before title)
+          * @default ''
+         */
+        "preIcon": string;
+    }
     /**
      * @component dropi-badge
      * Status badge for user/account states.
@@ -90,6 +129,42 @@ export namespace Components {
          */
         "disabled": boolean;
     }
+    /**
+     * @component dropi-empty-state
+     * Empty state illustration with title, description and optional action button.
+     */
+    interface DropiEmptyState {
+        /**
+          * Primary action button label (empty = hidden)
+          * @default ''
+         */
+        "actionLabel": string;
+        /**
+          * Description text
+          * @default ''
+         */
+        "description": string;
+        /**
+          * Title text
+          * @default ''
+         */
+        "header": string;
+        /**
+          * Alt text for the image
+          * @default 'Sin resultados'
+         */
+        "imageAlt": string;
+        /**
+          * URL of the illustration image
+          * @default ''
+         */
+        "imageUrl": string;
+        /**
+          * Secondary action button label (empty = hidden)
+          * @default ''
+         */
+        "secondaryLabel": string;
+    }
     /**
      * @component dropi-icon
      * Renders an SVG icon from the Dropi sprite sheet.
@@ -241,6 +316,87 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @component dropi-modal
+     * Modal/dialog with backdrop, close button, and header/content/footer slots.
+     * Slots: (default) body, "header" custom header, "footer" actions.
+     */
+    interface DropiModal {
+        /**
+          * @default true
+         */
+        "closeOnEscape": boolean;
+        /**
+          * @default true
+         */
+        "dismissable": boolean;
+        /**
+          * @default ''
+         */
+        "header": string;
+        "hide": () => Promise<void>;
+        /**
+          * @default true
+         */
+        "modal": boolean;
+        /**
+          * @default 'center'
+         */
+        "position": ModalPosition;
+        "show": () => Promise<void>;
+        /**
+          * @default true
+         */
+        "showCloseIcon": boolean;
+        /**
+          * @default true
+         */
+        "showHeader": boolean;
+        /**
+          * @default 'm'
+         */
+        "size": ModalSize;
+        /**
+          * @default false
+         */
+        "visible": boolean;
+    }
+    /**
+     * @component dropi-paginator
+     * Pagination control with page numbers, prev/next buttons and items-per-page selector.
+     */
+    interface DropiPaginator {
+        /**
+          * Max page buttons to show at once
+          * @default 5
+         */
+        "maxPages": number;
+        /**
+          * Current page (1-based)
+          * @default 1
+         */
+        "page": number;
+        /**
+          * Items per page
+          * @default 10
+         */
+        "pageSize": number;
+        /**
+          * Options for items per page
+          * @default [10, 25, 50, 100]
+         */
+        "pageSizeOptions": number[] | string;
+        /**
+          * Whether to show the items-per-page selector
+          * @default false
+         */
+        "showPageSizeSelector": boolean;
+        /**
+          * Total number of items
+          * @default 0
+         */
+        "total": number;
+    }
     /**
      * @component dropi-radio-button
      * Styled radio button with label.
@@ -391,6 +547,37 @@ export namespace Components {
          */
         "value": SelectOption | null;
     }
+    /**
+     * @component dropi-skeleton
+     * Loading placeholder with shimmer animation.
+     */
+    interface DropiSkeleton {
+        /**
+          * Border radius override
+          * @default ''
+         */
+        "borderRadius": string;
+        /**
+          * Height (CSS value, e.g. "16px", "48px")
+          * @default '16px'
+         */
+        "height": string;
+        /**
+          * Number of lines to repeat (text variant only)
+          * @default 1
+         */
+        "lines": number;
+        /**
+          * Shape variant: 'text' | 'circle' | 'rect'
+          * @default 'text'
+         */
+        "variant": SkeletonVariant;
+        /**
+          * Width (CSS value, e.g. "100%", "200px")
+          * @default '100%'
+         */
+        "width": string;
+    }
     /**
      * @component dropi-switch
      * Toggle switch component. Emits dropiChange on toggle.
@@ -407,6 +594,31 @@ export namespace Components {
          */
         "isChecked": boolean;
     }
+    /**
+     * @component dropi-tabs
+     * Horizontal tab navigation with optional counter badges and completed state icons.
+     * @example <dropi-tabs
+     *   tabs='[{"id":1,"label":"Activos"},{"id":2,"label":"Histórico","counter":5}]'
+     *   active-tab="1"
+     * />
+     */
+    interface DropiTabs {
+        /**
+          * Id of the active tab
+          * @default 0
+         */
+        "activeTab": string | number;
+        /**
+          * Whether to show a check/pending icon per tab
+          * @default false
+         */
+        "showIcon": boolean;
+        /**
+          * Array of TabItem or JSON string
+          * @default []
+         */
+        "tabs": TabItem[] | string;
+    }
     /**
      * @component dropi-tag
      * Colored tag/chip for statuses, categories, and labels.
@@ -514,6 +726,65 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @component dropi-toast
+     * Global toast notification stack. Place once in the app root, call show() from JS.
+     * @example const t = document.querySelector('dropi-toast');
+     * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });
+     */
+    interface DropiToast {
+        /**
+          * Remove all toasts
+         */
+        "clear": () => Promise<void>;
+        /**
+          * Default auto-close ms (0 = manual)
+          * @default 4000
+         */
+        "life": number;
+        /**
+          * Toast position
+          * @default 'top-right'
+         */
+        "position": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+        /**
+          * Show a toast
+         */
+        "show": (msg: ToastMessage) => Promise<void>;
+    }
+    /**
+     * @component dropi-tooltip
+     * Wraps content and shows a tooltip bubble on hover/focus.
+     * @example <dropi-tooltip text="Más información" position="top">
+     *   <dropi-button text="Hover" />
+     * </dropi-tooltip>
+     */
+    interface DropiTooltip {
+        /**
+          * Max CSS width of the bubble
+          * @default '280px'
+         */
+        "maxWidth": string;
+        /**
+          * Position: top | bottom | left | right
+          * @default 'top'
+         */
+        "position": TooltipPosition;
+        /**
+          * Delay in ms before showing
+          * @default 0
+         */
+        "showDelay": number;
+        /**
+          * Tooltip text
+          * @default ''
+         */
+        "text": string;
+    }
+}
+export interface DropiAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiAccordionElement;
 }
 export interface DropiButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -523,10 +794,22 @@ export interface DropiCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDropiCheckboxElement;
 }
+export interface DropiEmptyStateCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiEmptyStateElement;
+}
 export interface DropiInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDropiInputElement;
 }
+export interface DropiModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiModalElement;
+}
+export interface DropiPaginatorCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiPaginatorElement;
+}
 export interface DropiRadioButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDropiRadioButtonElement;
@@ -539,11 +822,39 @@ export interface DropiSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDropiSwitchElement;
 }
+export interface DropiTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDropiTabsElement;
+}
 export interface DropiTextAreaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDropiTextAreaElement;
 }
 declare global {
+    interface HTMLDropiAccordionElementEventMap {
+        "dropiToggle": boolean;
+    }
+    /**
+     * @component dropi-accordion
+     * Collapsible section with animated expand/collapse.
+     * @example <dropi-accordion header="¿Cómo funciona?">
+     *   <p>Contenido del acordeón aquí.</p>
+     * </dropi-accordion>
+     */
+    interface HTMLDropiAccordionElement extends Components.DropiAccordion, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiAccordionElementEventMap>(type: K, listener: (this: HTMLDropiAccordionElement, ev: DropiAccordionCustomEvent<HTMLDropiAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiAccordionElementEventMap>(type: K, listener: (this: HTMLDropiAccordionElement, ev: DropiAccordionCustomEvent<HTMLDropiAccordionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiAccordionElement: {
+        prototype: HTMLDropiAccordionElement;
+        new (): HTMLDropiAccordionElement;
+    };
     /**
      * @component dropi-badge
      * Status badge for user/account states.
@@ -598,6 +909,28 @@ declare global {
         prototype: HTMLDropiCheckboxElement;
         new (): HTMLDropiCheckboxElement;
     };
+    interface HTMLDropiEmptyStateElementEventMap {
+        "dropiAction": void;
+        "dropiSecondaryAction": void;
+    }
+    /**
+     * @component dropi-empty-state
+     * Empty state illustration with title, description and optional action button.
+     */
+    interface HTMLDropiEmptyStateElement extends Components.DropiEmptyState, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiEmptyStateElementEventMap>(type: K, listener: (this: HTMLDropiEmptyStateElement, ev: DropiEmptyStateCustomEvent<HTMLDropiEmptyStateElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiEmptyStateElementEventMap>(type: K, listener: (this: HTMLDropiEmptyStateElement, ev: DropiEmptyStateCustomEvent<HTMLDropiEmptyStateElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiEmptyStateElement: {
+        prototype: HTMLDropiEmptyStateElement;
+        new (): HTMLDropiEmptyStateElement;
+    };
     /**
      * @component dropi-icon
      * Renders an SVG icon from the Dropi sprite sheet.
@@ -642,6 +975,51 @@ declare global {
         prototype: HTMLDropiInputElement;
         new (): HTMLDropiInputElement;
     };
+    interface HTMLDropiModalElementEventMap {
+        "dropiShow": void;
+        "dropiHide": void;
+        "visibleChange": boolean;
+    }
+    /**
+     * @component dropi-modal
+     * Modal/dialog with backdrop, close button, and header/content/footer slots.
+     * Slots: (default) body, "header" custom header, "footer" actions.
+     */
+    interface HTMLDropiModalElement extends Components.DropiModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiModalElementEventMap>(type: K, listener: (this: HTMLDropiModalElement, ev: DropiModalCustomEvent<HTMLDropiModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiModalElementEventMap>(type: K, listener: (this: HTMLDropiModalElement, ev: DropiModalCustomEvent<HTMLDropiModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiModalElement: {
+        prototype: HTMLDropiModalElement;
+        new (): HTMLDropiModalElement;
+    };
+    interface HTMLDropiPaginatorElementEventMap {
+        "dropiPageChange": { page: number; pageSize: number };
+    }
+    /**
+     * @component dropi-paginator
+     * Pagination control with page numbers, prev/next buttons and items-per-page selector.
+     */
+    interface HTMLDropiPaginatorElement extends Components.DropiPaginator, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiPaginatorElementEventMap>(type: K, listener: (this: HTMLDropiPaginatorElement, ev: DropiPaginatorCustomEvent<HTMLDropiPaginatorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiPaginatorElementEventMap>(type: K, listener: (this: HTMLDropiPaginatorElement, ev: DropiPaginatorCustomEvent<HTMLDropiPaginatorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiPaginatorElement: {
+        prototype: HTMLDropiPaginatorElement;
+        new (): HTMLDropiPaginatorElement;
+    };
     interface HTMLDropiRadioButtonElementEventMap {
         "dropiChange": Event;
     }
@@ -703,6 +1081,16 @@ declare global {
         prototype: HTMLDropiSelectElement;
         new (): HTMLDropiSelectElement;
     };
+    /**
+     * @component dropi-skeleton
+     * Loading placeholder with shimmer animation.
+     */
+    interface HTMLDropiSkeletonElement extends Components.DropiSkeleton, HTMLStencilElement {
+    }
+    var HTMLDropiSkeletonElement: {
+        prototype: HTMLDropiSkeletonElement;
+        new (): HTMLDropiSkeletonElement;
+    };
     interface HTMLDropiSwitchElementEventMap {
         "dropiChange": boolean;
     }
@@ -724,6 +1112,31 @@ declare global {
         prototype: HTMLDropiSwitchElement;
         new (): HTMLDropiSwitchElement;
     };
+    interface HTMLDropiTabsElementEventMap {
+        "dropiTabChange": TabItem;
+    }
+    /**
+     * @component dropi-tabs
+     * Horizontal tab navigation with optional counter badges and completed state icons.
+     * @example <dropi-tabs
+     *   tabs='[{"id":1,"label":"Activos"},{"id":2,"label":"Histórico","counter":5}]'
+     *   active-tab="1"
+     * />
+     */
+    interface HTMLDropiTabsElement extends Components.DropiTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDropiTabsElementEventMap>(type: K, listener: (this: HTMLDropiTabsElement, ev: DropiTabsCustomEvent<HTMLDropiTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDropiTabsElementEventMap>(type: K, listener: (this: HTMLDropiTabsElement, ev: DropiTabsCustomEvent<HTMLDropiTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDropiTabsElement: {
+        prototype: HTMLDropiTabsElement;
+        new (): HTMLDropiTabsElement;
+    };
     /**
      * @component dropi-tag
      * Colored tag/chip for statuses, categories, and labels.
@@ -759,20 +1172,86 @@ declare global {
         prototype: HTMLDropiTextAreaElement;
         new (): HTMLDropiTextAreaElement;
     };
+    /**
+     * @component dropi-toast
+     * Global toast notification stack. Place once in the app root, call show() from JS.
+     * @example const t = document.querySelector('dropi-toast');
+     * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });
+     */
+    interface HTMLDropiToastElement extends Components.DropiToast, HTMLStencilElement {
+    }
+    var HTMLDropiToastElement: {
+        prototype: HTMLDropiToastElement;
+        new (): HTMLDropiToastElement;
+    };
+    /**
+     * @component dropi-tooltip
+     * Wraps content and shows a tooltip bubble on hover/focus.
+     * @example <dropi-tooltip text="Más información" position="top">
+     *   <dropi-button text="Hover" />
+     * </dropi-tooltip>
+     */
+    interface HTMLDropiTooltipElement extends Components.DropiTooltip, HTMLStencilElement {
+    }
+    var HTMLDropiTooltipElement: {
+        prototype: HTMLDropiTooltipElement;
+        new (): HTMLDropiTooltipElement;
+    };
     interface HTMLElementTagNameMap {
+        "dropi-accordion": HTMLDropiAccordionElement;
         "dropi-badge": HTMLDropiBadgeElement;
         "dropi-button": HTMLDropiButtonElement;
         "dropi-checkbox": HTMLDropiCheckboxElement;
+        "dropi-empty-state": HTMLDropiEmptyStateElement;
         "dropi-icon": HTMLDropiIconElement;
         "dropi-input": HTMLDropiInputElement;
+        "dropi-modal": HTMLDropiModalElement;
+        "dropi-paginator": HTMLDropiPaginatorElement;
         "dropi-radio-button": HTMLDropiRadioButtonElement;
         "dropi-select": HTMLDropiSelectElement;
+        "dropi-skeleton": HTMLDropiSkeletonElement;
         "dropi-switch": HTMLDropiSwitchElement;
+        "dropi-tabs": HTMLDropiTabsElement;
         "dropi-tag": HTMLDropiTagElement;
         "dropi-text-area": HTMLDropiTextAreaElement;
+        "dropi-toast": HTMLDropiToastElement;
+        "dropi-tooltip": HTMLDropiTooltipElement;
     }
 }
 declare namespace LocalJSX {
+    /**
+     * @component dropi-accordion
+     * Collapsible section with animated expand/collapse.
+     * @example <dropi-accordion header="¿Cómo funciona?">
+     *   <p>Contenido del acordeón aquí.</p>
+     * </dropi-accordion>
+     */
+    interface DropiAccordion {
+        /**
+          * Disable toggling
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Title shown in the header button
+          * @default ''
+         */
+        "header"?: string;
+        /**
+          * Emitted when toggled. e.detail = new open state
+         */
+        "onDropiToggle"?: (event: DropiAccordionCustomEvent<boolean>) => void;
+        /**
+          * Whether the section is expanded
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Icon name from dropi-icon sprite (shown before title)
+          * @default ''
+         */
+        "preIcon"?: string;
+    }
     /**
      * @component dropi-badge
      * Status badge for user/account states.
@@ -859,6 +1338,50 @@ declare namespace LocalJSX {
          */
         "onDropiChange"?: (event: DropiCheckboxCustomEvent<boolean>) => void;
     }
+    /**
+     * @component dropi-empty-state
+     * Empty state illustration with title, description and optional action button.
+     */
+    interface DropiEmptyState {
+        /**
+          * Primary action button label (empty = hidden)
+          * @default ''
+         */
+        "actionLabel"?: string;
+        /**
+          * Description text
+          * @default ''
+         */
+        "description"?: string;
+        /**
+          * Title text
+          * @default ''
+         */
+        "header"?: string;
+        /**
+          * Alt text for the image
+          * @default 'Sin resultados'
+         */
+        "imageAlt"?: string;
+        /**
+          * URL of the illustration image
+          * @default ''
+         */
+        "imageUrl"?: string;
+        /**
+          * Emitted when primary action button is clicked
+         */
+        "onDropiAction"?: (event: DropiEmptyStateCustomEvent<void>) => void;
+        /**
+          * Emitted when secondary action button is clicked
+         */
+        "onDropiSecondaryAction"?: (event: DropiEmptyStateCustomEvent<void>) => void;
+        /**
+          * Secondary action button label (empty = hidden)
+          * @default ''
+         */
+        "secondaryLabel"?: string;
+    }
     /**
      * @component dropi-icon
      * Renders an SVG icon from the Dropi sprite sheet.
@@ -1030,6 +1553,92 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @component dropi-modal
+     * Modal/dialog with backdrop, close button, and header/content/footer slots.
+     * Slots: (default) body, "header" custom header, "footer" actions.
+     */
+    interface DropiModal {
+        /**
+          * @default true
+         */
+        "closeOnEscape"?: boolean;
+        /**
+          * @default true
+         */
+        "dismissable"?: boolean;
+        /**
+          * @default ''
+         */
+        "header"?: string;
+        /**
+          * @default true
+         */
+        "modal"?: boolean;
+        "onDropiHide"?: (event: DropiModalCustomEvent<void>) => void;
+        "onDropiShow"?: (event: DropiModalCustomEvent<void>) => void;
+        "onVisibleChange"?: (event: DropiModalCustomEvent<boolean>) => void;
+        /**
+          * @default 'center'
+         */
+        "position"?: ModalPosition;
+        /**
+          * @default true
+         */
+        "showCloseIcon"?: boolean;
+        /**
+          * @default true
+         */
+        "showHeader"?: boolean;
+        /**
+          * @default 'm'
+         */
+        "size"?: ModalSize;
+        /**
+          * @default false
+         */
+        "visible"?: boolean;
+    }
+    /**
+     * @component dropi-paginator
+     * Pagination control with page numbers, prev/next buttons and items-per-page selector.
+     */
+    interface DropiPaginator {
+        /**
+          * Max page buttons to show at once
+          * @default 5
+         */
+        "maxPages"?: number;
+        /**
+          * Emitted when page changes. e.detail = { page, pageSize }
+         */
+        "onDropiPageChange"?: (event: DropiPaginatorCustomEvent<{ page: number; pageSize: number }>) => void;
+        /**
+          * Current page (1-based)
+          * @default 1
+         */
+        "page"?: number;
+        /**
+          * Items per page
+          * @default 10
+         */
+        "pageSize"?: number;
+        /**
+          * Options for items per page
+          * @default [10, 25, 50, 100]
+         */
+        "pageSizeOptions"?: number[] | string;
+        /**
+          * Whether to show the items-per-page selector
+          * @default false
+         */
+        "showPageSizeSelector"?: boolean;
+        /**
+          * Total number of items
+          * @default 0
+         */
+        "total"?: number;
+    }
     /**
      * @component dropi-radio-button
      * Styled radio button with label.
@@ -1200,6 +1809,37 @@ declare namespace LocalJSX {
          */
         "value"?: SelectOption | null;
     }
+    /**
+     * @component dropi-skeleton
+     * Loading placeholder with shimmer animation.
+     */
+    interface DropiSkeleton {
+        /**
+          * Border radius override
+          * @default ''
+         */
+        "borderRadius"?: string;
+        /**
+          * Height (CSS value, e.g. "16px", "48px")
+          * @default '16px'
+         */
+        "height"?: string;
+        /**
+          * Number of lines to repeat (text variant only)
+          * @default 1
+         */
+        "lines"?: number;
+        /**
+          * Shape variant: 'text' | 'circle' | 'rect'
+          * @default 'text'
+         */
+        "variant"?: SkeletonVariant;
+        /**
+          * Width (CSS value, e.g. "100%", "200px")
+          * @default '100%'
+         */
+        "width"?: string;
+    }
     /**
      * @component dropi-switch
      * Toggle switch component. Emits dropiChange on toggle.
@@ -1228,6 +1868,35 @@ declare namespace LocalJSX {
          */
         "onDropiChange"?: (event: DropiSwitchCustomEvent<boolean>) => void;
     }
+    /**
+     * @component dropi-tabs
+     * Horizontal tab navigation with optional counter badges and completed state icons.
+     * @example <dropi-tabs
+     *   tabs='[{"id":1,"label":"Activos"},{"id":2,"label":"Histórico","counter":5}]'
+     *   active-tab="1"
+     * />
+     */
+    interface DropiTabs {
+        /**
+          * Id of the active tab
+          * @default 0
+         */
+        "activeTab"?: string | number;
+        /**
+          * Emitted on tab click. e.detail = TabItem
+         */
+        "onDropiTabChange"?: (event: DropiTabsCustomEvent<TabItem>) => void;
+        /**
+          * Whether to show a check/pending icon per tab
+          * @default false
+         */
+        "showIcon"?: boolean;
+        /**
+          * Array of TabItem or JSON string
+          * @default []
+         */
+        "tabs"?: TabItem[] | string;
+    }
     /**
      * @component dropi-tag
      * Colored tag/chip for statuses, categories, and labels.
@@ -1349,7 +2018,60 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @component dropi-toast
+     * Global toast notification stack. Place once in the app root, call show() from JS.
+     * @example const t = document.querySelector('dropi-toast');
+     * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });
+     */
+    interface DropiToast {
+        /**
+          * Default auto-close ms (0 = manual)
+          * @default 4000
+         */
+        "life"?: number;
+        /**
+          * Toast position
+          * @default 'top-right'
+         */
+        "position"?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    }
+    /**
+     * @component dropi-tooltip
+     * Wraps content and shows a tooltip bubble on hover/focus.
+     * @example <dropi-tooltip text="Más información" position="top">
+     *   <dropi-button text="Hover" />
+     * </dropi-tooltip>
+     */
+    interface DropiTooltip {
+        /**
+          * Max CSS width of the bubble
+          * @default '280px'
+         */
+        "maxWidth"?: string;
+        /**
+          * Position: top | bottom | left | right
+          * @default 'top'
+         */
+        "position"?: TooltipPosition;
+        /**
+          * Delay in ms before showing
+          * @default 0
+         */
+        "showDelay"?: number;
+        /**
+          * Tooltip text
+          * @default ''
+         */
+        "text"?: string;
+    }
 
+    interface DropiAccordionAttributes {
+        "header": string;
+        "open": boolean;
+        "disabled": boolean;
+        "preIcon": string;
+    }
     interface DropiBadgeAttributes {
         "state": BadgeState;
     }
@@ -1366,6 +2088,14 @@ declare namespace LocalJSX {
         "checked": boolean;
         "disabled": boolean;
     }
+    interface DropiEmptyStateAttributes {
+        "header": string;
+        "description": string;
+        "imageUrl": string;
+        "imageAlt": string;
+        "actionLabel": string;
+        "secondaryLabel": string;
+    }
     interface DropiIconAttributes {
         "name": string;
         "width": string;
@@ -1396,6 +2126,25 @@ declare namespace LocalJSX {
         "helperText": string;
         "showHelperOnlyOnError": boolean;
     }
+    interface DropiModalAttributes {
+        "visible": boolean;
+        "header": string;
+        "showCloseIcon": boolean;
+        "dismissable": boolean;
+        "closeOnEscape": boolean;
+        "modal": boolean;
+        "showHeader": boolean;
+        "position": ModalPosition;
+        "size": ModalSize;
+    }
+    interface DropiPaginatorAttributes {
+        "total": number;
+        "pageSize": number;
+        "page": number;
+        "maxPages": number;
+        "showPageSizeSelector": boolean;
+        "pageSizeOptions": number[] | string;
+    }
     interface DropiRadioButtonAttributes {
         "label": string;
         "name": string;
@@ -1421,10 +2170,22 @@ declare namespace LocalJSX {
         "preIcon": string;
         "defaultSelectedId": string;
     }
+    interface DropiSkeletonAttributes {
+        "variant": SkeletonVariant;
+        "width": string;
+        "height": string;
+        "borderRadius": string;
+        "lines": number;
+    }
     interface DropiSwitchAttributes {
         "isChecked": boolean;
         "disabled": boolean;
     }
+    interface DropiTabsAttributes {
+        "tabs": TabItem[] | string;
+        "activeTab": string;
+        "showIcon": boolean;
+    }
     interface DropiTagAttributes {
         "type": TagType;
         "state": TagState;
@@ -1448,24 +2209,50 @@ declare namespace LocalJSX {
         "helperText": string;
         "invalid": boolean;
     }
+    interface DropiToastAttributes {
+        "position": 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+        "life": number;
+    }
+    interface DropiTooltipAttributes {
+        "text": string;
+        "position": TooltipPosition;
+        "maxWidth": string;
+        "showDelay": number;
+    }
 
     interface IntrinsicElements {
+        "dropi-accordion": Omit<DropiAccordion, keyof DropiAccordionAttributes> & { [K in keyof DropiAccordion & keyof DropiAccordionAttributes]?: DropiAccordion[K] } & { [K in keyof DropiAccordion & keyof DropiAccordionAttributes as `attr:${K}`]?: DropiAccordionAttributes[K] } & { [K in keyof DropiAccordion & keyof DropiAccordionAttributes as `prop:${K}`]?: DropiAccordion[K] };
         "dropi-badge": Omit<DropiBadge, keyof DropiBadgeAttributes> & { [K in keyof DropiBadge & keyof DropiBadgeAttributes]?: DropiBadge[K] } & { [K in keyof DropiBadge & keyof DropiBadgeAttributes as `attr:${K}`]?: DropiBadgeAttributes[K] } & { [K in keyof DropiBadge & keyof DropiBadgeAttributes as `prop:${K}`]?: DropiBadge[K] };
         "dropi-button": Omit<DropiButton, keyof DropiButtonAttributes> & { [K in keyof DropiButton & keyof DropiButtonAttributes]?: DropiButton[K] } & { [K in keyof DropiButton & keyof DropiButtonAttributes as `attr:${K}`]?: DropiButtonAttributes[K] } & { [K in keyof DropiButton & keyof DropiButtonAttributes as `prop:${K}`]?: DropiButton[K] };
         "dropi-checkbox": Omit<DropiCheckbox, keyof DropiCheckboxAttributes> & { [K in keyof DropiCheckbox & keyof DropiCheckboxAttributes]?: DropiCheckbox[K] } & { [K in keyof DropiCheckbox & keyof DropiCheckboxAttributes as `attr:${K}`]?: DropiCheckboxAttributes[K] } & { [K in keyof DropiCheckbox & keyof DropiCheckboxAttributes as `prop:${K}`]?: DropiCheckbox[K] };
+        "dropi-empty-state": Omit<DropiEmptyState, keyof DropiEmptyStateAttributes> & { [K in keyof DropiEmptyState & keyof DropiEmptyStateAttributes]?: DropiEmptyState[K] } & { [K in keyof DropiEmptyState & keyof DropiEmptyStateAttributes as `attr:${K}`]?: DropiEmptyStateAttributes[K] } & { [K in keyof DropiEmptyState & keyof DropiEmptyStateAttributes as `prop:${K}`]?: DropiEmptyState[K] };
         "dropi-icon": Omit<DropiIcon, keyof DropiIconAttributes> & { [K in keyof DropiIcon & keyof DropiIconAttributes]?: DropiIcon[K] } & { [K in keyof DropiIcon & keyof DropiIconAttributes as `attr:${K}`]?: DropiIconAttributes[K] } & { [K in keyof DropiIcon & keyof DropiIconAttributes as `prop:${K}`]?: DropiIcon[K] };
         "dropi-input": Omit<DropiInput, keyof DropiInputAttributes> & { [K in keyof DropiInput & keyof DropiInputAttributes]?: DropiInput[K] } & { [K in keyof DropiInput & keyof DropiInputAttributes as `attr:${K}`]?: DropiInputAttributes[K] } & { [K in keyof DropiInput & keyof DropiInputAttributes as `prop:${K}`]?: DropiInput[K] };
+        "dropi-modal": Omit<DropiModal, keyof DropiModalAttributes> & { [K in keyof DropiModal & keyof DropiModalAttributes]?: DropiModal[K] } & { [K in keyof DropiModal & keyof DropiModalAttributes as `attr:${K}`]?: DropiModalAttributes[K] } & { [K in keyof DropiModal & keyof DropiModalAttributes as `prop:${K}`]?: DropiModal[K] };
+        "dropi-paginator": Omit<DropiPaginator, keyof DropiPaginatorAttributes> & { [K in keyof DropiPaginator & keyof DropiPaginatorAttributes]?: DropiPaginator[K] } & { [K in keyof DropiPaginator & keyof DropiPaginatorAttributes as `attr:${K}`]?: DropiPaginatorAttributes[K] } & { [K in keyof DropiPaginator & keyof DropiPaginatorAttributes as `prop:${K}`]?: DropiPaginator[K] };
         "dropi-radio-button": Omit<DropiRadioButton, keyof DropiRadioButtonAttributes> & { [K in keyof DropiRadioButton & keyof DropiRadioButtonAttributes]?: DropiRadioButton[K] } & { [K in keyof DropiRadioButton & keyof DropiRadioButtonAttributes as `attr:${K}`]?: DropiRadioButtonAttributes[K] } & { [K in keyof DropiRadioButton & keyof DropiRadioButtonAttributes as `prop:${K}`]?: DropiRadioButton[K] };
         "dropi-select": Omit<DropiSelect, keyof DropiSelectAttributes> & { [K in keyof DropiSelect & keyof DropiSelectAttributes]?: DropiSelect[K] } & { [K in keyof DropiSelect & keyof DropiSelectAttributes as `attr:${K}`]?: DropiSelectAttributes[K] } & { [K in keyof DropiSelect & keyof DropiSelectAttributes as `prop:${K}`]?: DropiSelect[K] };
+        "dropi-skeleton": Omit<DropiSkeleton, keyof DropiSkeletonAttributes> & { [K in keyof DropiSkeleton & keyof DropiSkeletonAttributes]?: DropiSkeleton[K] } & { [K in keyof DropiSkeleton & keyof DropiSkeletonAttributes as `attr:${K}`]?: DropiSkeletonAttributes[K] } & { [K in keyof DropiSkeleton & keyof DropiSkeletonAttributes as `prop:${K}`]?: DropiSkeleton[K] };
         "dropi-switch": Omit<DropiSwitch, keyof DropiSwitchAttributes> & { [K in keyof DropiSwitch & keyof DropiSwitchAttributes]?: DropiSwitch[K] } & { [K in keyof DropiSwitch & keyof DropiSwitchAttributes as `attr:${K}`]?: DropiSwitchAttributes[K] } & { [K in keyof DropiSwitch & keyof DropiSwitchAttributes as `prop:${K}`]?: DropiSwitch[K] };
+        "dropi-tabs": Omit<DropiTabs, keyof DropiTabsAttributes> & { [K in keyof DropiTabs & keyof DropiTabsAttributes]?: DropiTabs[K] } & { [K in keyof DropiTabs & keyof DropiTabsAttributes as `attr:${K}`]?: DropiTabsAttributes[K] } & { [K in keyof DropiTabs & keyof DropiTabsAttributes as `prop:${K}`]?: DropiTabs[K] };
         "dropi-tag": Omit<DropiTag, keyof DropiTagAttributes> & { [K in keyof DropiTag & keyof DropiTagAttributes]?: DropiTag[K] } & { [K in keyof DropiTag & keyof DropiTagAttributes as `attr:${K}`]?: DropiTagAttributes[K] } & { [K in keyof DropiTag & keyof DropiTagAttributes as `prop:${K}`]?: DropiTag[K] };
         "dropi-text-area": Omit<DropiTextArea, keyof DropiTextAreaAttributes> & { [K in keyof DropiTextArea & keyof DropiTextAreaAttributes]?: DropiTextArea[K] } & { [K in keyof DropiTextArea & keyof DropiTextAreaAttributes as `attr:${K}`]?: DropiTextAreaAttributes[K] } & { [K in keyof DropiTextArea & keyof DropiTextAreaAttributes as `prop:${K}`]?: DropiTextArea[K] };
+        "dropi-toast": Omit<DropiToast, keyof DropiToastAttributes> & { [K in keyof DropiToast & keyof DropiToastAttributes]?: DropiToast[K] } & { [K in keyof DropiToast & keyof DropiToastAttributes as `attr:${K}`]?: DropiToastAttributes[K] } & { [K in keyof DropiToast & keyof DropiToastAttributes as `prop:${K}`]?: DropiToast[K] };
+        "dropi-tooltip": Omit<DropiTooltip, keyof DropiTooltipAttributes> & { [K in keyof DropiTooltip & keyof DropiTooltipAttributes]?: DropiTooltip[K] } & { [K in keyof DropiTooltip & keyof DropiTooltipAttributes as `attr:${K}`]?: DropiTooltipAttributes[K] } & { [K in keyof DropiTooltip & keyof DropiTooltipAttributes as `prop:${K}`]?: DropiTooltip[K] };
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * @component dropi-accordion
+             * Collapsible section with animated expand/collapse.
+             * @example <dropi-accordion header="¿Cómo funciona?">
+             *   <p>Contenido del acordeón aquí.</p>
+             * </dropi-accordion>
+             */
+            "dropi-accordion": LocalJSX.IntrinsicElements["dropi-accordion"] & JSXBase.HTMLAttributes<HTMLDropiAccordionElement>;
             /**
              * @component dropi-badge
              * Status badge for user/account states.
@@ -1483,6 +2270,11 @@ declare module "@stencil/core" {
              * Supports form association via native `<input type="checkbox">` internals.
              */
             "dropi-checkbox": LocalJSX.IntrinsicElements["dropi-checkbox"] & JSXBase.HTMLAttributes<HTMLDropiCheckboxElement>;
+            /**
+             * @component dropi-empty-state
+             * Empty state illustration with title, description and optional action button.
+             */
+            "dropi-empty-state": LocalJSX.IntrinsicElements["dropi-empty-state"] & JSXBase.HTMLAttributes<HTMLDropiEmptyStateElement>;
             /**
              * @component dropi-icon
              * Renders an SVG icon from the Dropi sprite sheet.
@@ -1503,6 +2295,17 @@ declare module "@stencil/core" {
              * Pass `value` and listen to `dropiInput` to update.
              */
             "dropi-input": LocalJSX.IntrinsicElements["dropi-input"] & JSXBase.HTMLAttributes<HTMLDropiInputElement>;
+            /**
+             * @component dropi-modal
+             * Modal/dialog with backdrop, close button, and header/content/footer slots.
+             * Slots: (default) body, "header" custom header, "footer" actions.
+             */
+            "dropi-modal": LocalJSX.IntrinsicElements["dropi-modal"] & JSXBase.HTMLAttributes<HTMLDropiModalElement>;
+            /**
+             * @component dropi-paginator
+             * Pagination control with page numbers, prev/next buttons and items-per-page selector.
+             */
+            "dropi-paginator": LocalJSX.IntrinsicElements["dropi-paginator"] & JSXBase.HTMLAttributes<HTMLDropiPaginatorElement>;
             /**
              * @component dropi-radio-button
              * Styled radio button with label.
@@ -1528,11 +2331,25 @@ declare module "@stencil/core" {
              * ```
              */
             "dropi-select": LocalJSX.IntrinsicElements["dropi-select"] & JSXBase.HTMLAttributes<HTMLDropiSelectElement>;
+            /**
+             * @component dropi-skeleton
+             * Loading placeholder with shimmer animation.
+             */
+            "dropi-skeleton": LocalJSX.IntrinsicElements["dropi-skeleton"] & JSXBase.HTMLAttributes<HTMLDropiSkeletonElement>;
             /**
              * @component dropi-switch
              * Toggle switch component. Emits dropiChange on toggle.
              */
             "dropi-switch": LocalJSX.IntrinsicElements["dropi-switch"] & JSXBase.HTMLAttributes<HTMLDropiSwitchElement>;
+            /**
+             * @component dropi-tabs
+             * Horizontal tab navigation with optional counter badges and completed state icons.
+             * @example <dropi-tabs
+             *   tabs='[{"id":1,"label":"Activos"},{"id":2,"label":"Histórico","counter":5}]'
+             *   active-tab="1"
+             * />
+             */
+            "dropi-tabs": LocalJSX.IntrinsicElements["dropi-tabs"] & JSXBase.HTMLAttributes<HTMLDropiTabsElement>;
             /**
              * @component dropi-tag
              * Colored tag/chip for statuses, categories, and labels.
@@ -1544,6 +2361,21 @@ declare module "@stencil/core" {
              * helper text, and native form association.
              */
             "dropi-text-area": LocalJSX.IntrinsicElements["dropi-text-area"] & JSXBase.HTMLAttributes<HTMLDropiTextAreaElement>;
+            /**
+             * @component dropi-toast
+             * Global toast notification stack. Place once in the app root, call show() from JS.
+             * @example const t = document.querySelector('dropi-toast');
+             * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });
+             */
+            "dropi-toast": LocalJSX.IntrinsicElements["dropi-toast"] & JSXBase.HTMLAttributes<HTMLDropiToastElement>;
+            /**
+             * @component dropi-tooltip
+             * Wraps content and shows a tooltip bubble on hover/focus.
+             * @example <dropi-tooltip text="Más información" position="top">
+             *   <dropi-button text="Hover" />
+             * </dropi-tooltip>
+             */
+            "dropi-tooltip": LocalJSX.IntrinsicElements["dropi-tooltip"] & JSXBase.HTMLAttributes<HTMLDropiTooltipElement>;
         }
     }
 }