@po-ui/ng-components 21.33.0 → 21.34.1

package/types/po-ui-ng-components.d.ts

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, TemplateRef, OnInit, OnDestroy, Renderer2, QueryList, OnChanges, ChangeDetectorRef, SimpleChanges, AfterViewInit, Type, ViewContainerRef, DoCheck, AfterViewChecked, IterableDiffers, ComponentFactoryResolver, ApplicationRef, Injector, ComponentRef, PipeTransform, WritableSignal, InjectionToken, ModuleWithProviders, RendererFactory2, AfterContentInit, AnimationCallbackEvent, SimpleChange } from '@angular/core';
+import { EventEmitter, ElementRef, TemplateRef, OnInit, OnDestroy, Renderer2, QueryList, OnChanges, ChangeDetectorRef, SimpleChanges, AfterViewInit, WritableSignal, Type, ViewContainerRef, DoCheck, AfterViewChecked, IterableDiffers, ComponentFactoryResolver, ApplicationRef, Injector, ComponentRef, PipeTransform, InjectionToken, ModuleWithProviders, RendererFactory2, AfterContentInit, AnimationCallbackEvent, SimpleChange } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DecimalPipe, TitleCasePipe, CurrencyPipe, DatePipe } from '@angular/common';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import * as i9 from '@angular/cdk/listbox';
+import * as i11 from '@angular/cdk/listbox';
 import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
 import * as rxjs from 'rxjs';
 import { Observable, Subject, Subscription } from 'rxjs';
@@ -1929,6 +1929,12 @@ interface PoListBoxLiterals {
     /** Texto do checkbox para selecionar todos os itens. */
     selectAll?: string;
     footerActionListbox?: string;
+    /** Mensagem exibida quando o carregamento assíncrono de um subnível falha. */
+    subItemsErrorMessage?: string;
+    /** Texto acessível anunciado durante o carregamento assíncrono de um subnível. */
+    subItemsLoading?: string;
+    /** Texto do botão para tentar novamente o carregamento de um subnível. */
+    retry?: string;
 }
 
 /**
@@ -2038,12 +2044,13 @@ declare class PoListBoxBaseComponent {
     clickTab: EventEmitter<any>;
     changeStateTabs: EventEmitter<any>;
     clickItem: EventEmitter<any>;
+    subItemsLoad: EventEmitter<any>;
     footerActionListboxEvent: EventEmitter<any>;
     constructor(languageService: PoLanguageService);
     protected onThemeChange(): void;
     private applySizeBasedOnA11y;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoListBoxBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoListBoxBaseComponent, never, never, { "listboxSubitems": { "alias": "p-listbox-subitems"; "required": false; }; "visible": { "alias": "p-visible"; "required": false; "isSignal": true; }; "type": { "alias": "p-type"; "required": false; }; "items": { "alias": "p-items"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "isTabs": { "alias": "p-is-tabs"; "required": false; }; "param": { "alias": "p-param"; "required": false; }; "checkboxAllValue": { "alias": "p-checkboxAllValue"; "required": false; }; "selectedOptions": { "alias": "p-selected-options"; "required": false; }; "selectedOption": { "alias": "p-selected-option"; "required": false; }; "fieldValue": { "alias": "p-field-value"; "required": false; }; "fieldLabel": { "alias": "p-field-label"; "required": false; }; "literalSearch": { "alias": "p-literal-search"; "required": false; }; "fieldValueSearch": { "alias": "p-field-value-search"; "required": false; }; "hideSearch": { "alias": "p-hide-search"; "required": false; }; "hideSelectAll": { "alias": "p-hide-select-all"; "required": false; }; "multiselectTemplate": { "alias": "p-multiselect-template"; "required": false; }; "template": { "alias": "p-template"; "required": false; }; "placeholderSearch": { "alias": "p-placeholder-search"; "required": false; }; "searchValue": { "alias": "p-search-value"; "required": false; }; "isServerSearching": { "alias": "p-is-searching"; "required": false; }; "infiniteLoading": { "alias": "p-infinite-loading"; "required": false; }; "infiniteScroll": { "alias": "p-infinite-scroll"; "required": false; }; "cache": { "alias": "p-cache"; "required": false; }; "infiniteScrollDistance": { "alias": "p-infinite-scroll-distance"; "required": false; }; "filterMode": { "alias": "p-filter-mode"; "required": false; }; "isFiltering": { "alias": "p-filtering"; "required": false; }; "shouldMarkLetters": { "alias": "p-should-mark-letter"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "compareCache": { "alias": "p-compare-cache"; "required": false; }; "comboService": { "alias": "p-combo-service"; "required": false; }; "containerWidth": { "alias": "p-container-width"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; "footerActionListbox": { "alias": "p-footer-action-listbox"; "required": false; }; "placeholderListbox": { "alias": "p-placeholder-listbox"; "required": false; }; "separator": { "alias": "p-separator"; "required": false; }; }, { "changeSearch": "p-change-search"; "selectItem": "p-select-item"; "closeEvent": "p-close"; "change": "p-change"; "selectCombo": "p-selectcombo-item"; "changeAll": "p-change-all"; "UpdateInfiniteScroll": "p-update-infinite-scroll"; "activatedTab": "p-activated-tabs"; "clickTab": "p-click-tabs"; "changeStateTabs": "p-change-state-tabs"; "clickItem": "p-click-item"; "footerActionListboxEvent": "p-footer-action-listbox-event"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoListBoxBaseComponent, never, never, { "listboxSubitems": { "alias": "p-listbox-subitems"; "required": false; }; "visible": { "alias": "p-visible"; "required": false; "isSignal": true; }; "type": { "alias": "p-type"; "required": false; }; "items": { "alias": "p-items"; "required": false; }; "literals": { "alias": "p-literals"; "required": false; }; "isTabs": { "alias": "p-is-tabs"; "required": false; }; "param": { "alias": "p-param"; "required": false; }; "checkboxAllValue": { "alias": "p-checkboxAllValue"; "required": false; }; "selectedOptions": { "alias": "p-selected-options"; "required": false; }; "selectedOption": { "alias": "p-selected-option"; "required": false; }; "fieldValue": { "alias": "p-field-value"; "required": false; }; "fieldLabel": { "alias": "p-field-label"; "required": false; }; "literalSearch": { "alias": "p-literal-search"; "required": false; }; "fieldValueSearch": { "alias": "p-field-value-search"; "required": false; }; "hideSearch": { "alias": "p-hide-search"; "required": false; }; "hideSelectAll": { "alias": "p-hide-select-all"; "required": false; }; "multiselectTemplate": { "alias": "p-multiselect-template"; "required": false; }; "template": { "alias": "p-template"; "required": false; }; "placeholderSearch": { "alias": "p-placeholder-search"; "required": false; }; "searchValue": { "alias": "p-search-value"; "required": false; }; "isServerSearching": { "alias": "p-is-searching"; "required": false; }; "infiniteLoading": { "alias": "p-infinite-loading"; "required": false; }; "infiniteScroll": { "alias": "p-infinite-scroll"; "required": false; }; "cache": { "alias": "p-cache"; "required": false; }; "infiniteScrollDistance": { "alias": "p-infinite-scroll-distance"; "required": false; }; "filterMode": { "alias": "p-filter-mode"; "required": false; }; "isFiltering": { "alias": "p-filtering"; "required": false; }; "shouldMarkLetters": { "alias": "p-should-mark-letter"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "compareCache": { "alias": "p-compare-cache"; "required": false; }; "comboService": { "alias": "p-combo-service"; "required": false; }; "containerWidth": { "alias": "p-container-width"; "required": false; }; "keysLabel": { "alias": "p-keys-label"; "required": false; }; "footerActionListbox": { "alias": "p-footer-action-listbox"; "required": false; }; "placeholderListbox": { "alias": "p-placeholder-listbox"; "required": false; }; "separator": { "alias": "p-separator"; "required": false; }; }, { "changeSearch": "p-change-search"; "selectItem": "p-select-item"; "closeEvent": "p-close"; "change": "p-change"; "selectCombo": "p-selectcombo-item"; "changeAll": "p-change-all"; "UpdateInfiniteScroll": "p-update-infinite-scroll"; "activatedTab": "p-activated-tabs"; "clickTab": "p-click-tabs"; "changeStateTabs": "p-change-state-tabs"; "clickItem": "p-click-item"; "subItemsLoad": "p-sub-items-load"; "footerActionListboxEvent": "p-footer-action-listbox-event"; }, never, never, true, never>;
     static ngAcceptInputType_isTabs: any;
     static ngAcceptInputType_isServerSearching: any;
     static ngAcceptInputType_infiniteLoading: any;
@@ -2163,6 +2170,10 @@ interface PoPopupAction {
      *
      * Define uma lista de subitens para criação de menus aninhados.
      *
+     * ```
+     * { label: 'Relatórios', subItems: [{ label: 'Mensal' }, { label: 'Anual' }] }
+     * ```
+     *
      * Ao definir esta propriedade, o item exibirá um ícone indicador de subnível.
      * Recomenda-se utilizar no máximo três níveis hierárquicos para garantir a usabilidade.
      *
@@ -2173,6 +2184,30 @@ interface PoPopupAction {
      * > Em subníveis aninhados, o `icon` do agrupador é substituído pelo indicador de navegação (seta).
      */
     subItems?: Array<PoPopupAction>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o carregamento assíncrono (lazy loading) dos subitens de um agrupador.
+     *
+     * Recebe o item agrupador e retorna um `Observable<Array<PoPopupAction>>`. A requisição é disparada
+     * **apenas** no momento da expansão (clique ou atalho de teclado), exibindo placeholders com `po-skeleton`
+     * enquanto os dados são carregados:
+     *
+     * ```
+     * {
+     *   label: 'Relatórios',
+     *   subItemsLazy: (item) => this.reportService.getReports(item)
+     * }
+     * ```
+     *
+     * > O resultado é armazenado em cache após o primeiro carregamento bem-sucedido.
+     * Em caso de falha, é exibida uma mensagem com a opção de tentar novamente.
+     *
+     * Ao definir esta propriedade, o item exibirá um ícone indicador de subnível.
+     */
+    subItemsLazy?: (item: PoPopupAction) => Observable<Array<PoPopupAction>>;
     $subItemTemplate?: TemplateRef<any>;
 }
 
@@ -2194,6 +2229,16 @@ declare class PoListBoxComponent extends PoListBoxBaseComponent implements OnIni
     element: ElementRef<any>;
     currentItems: Array<PoDropdownAction>;
     currentGroup: PoDropdownAction | null;
+    readonly subItemsLoading: WritableSignal<Record<string, boolean>>;
+    readonly subItemsError: WritableSignal<Record<string, boolean>>;
+    readonly subItemsSkeletonPlaceholders: number[];
+    rootLazyLoad?: () => Observable<Array<PoDropdownAction>>;
+    rootItemsLoad: EventEmitter<void>;
+    contentChange: EventEmitter<void>;
+    private readonly loadedSubItems;
+    private lastLoadedGroup;
+    private rootLoaded;
+    private readonly destroySubItems$;
     private readonly navigationStack;
     private readonly renderer;
     private readonly router;
@@ -2214,12 +2259,30 @@ declare class PoListBoxComponent extends PoListBoxBaseComponent implements OnIni
     ngOnChanges(changes?: SimpleChanges): void;
     ngOnDestroy(): void;
     openGroup(group: PoDropdownAction, event?: MouseEvent | KeyboardEvent): void;
+    private loadSubItemsAsync;
+    onRetryKeydown(event: KeyboardEvent, scope: 'root' | 'subItems'): void;
+    retrySubItems(event?: MouseEvent | KeyboardEvent): void;
+    loadRootItemsAsync(): void;
+    retryRootItems(event?: MouseEvent | KeyboardEvent): void;
+    isRootLoading(): boolean;
+    isRootError(): boolean;
+    isSubItemsLoading(group: PoDropdownAction | null): boolean;
+    isSubItemsError(group: PoDropdownAction | null): boolean;
+    isFunction(value: unknown): boolean;
+    isGroupItem(item: PoDropdownAction): boolean;
+    private hasSubItems;
+    private getGroupKey;
+    private setSubItemsState;
+    private clearSubItemsState;
+    private focusGroupHeader;
     goBack(event: MouseEvent | KeyboardEvent): void;
     onKeydownGoBack(event: KeyboardEvent, currentGroup?: PoDropdownAction): void;
     protected onKeydownTemplate(event: KeyboardEvent): void;
-    onSelectItem(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: MouseEvent | KeyboardEvent): void | Promise<boolean>;
+    onSelectItem(itemListAction: any, event?: MouseEvent | KeyboardEvent): void | Promise<boolean>;
     onSelectAllCheckboxKeyDown(event: KeyboardEvent): void;
-    onKeyDown(itemListAction: PoItemListOption | PoItemListOptionGroup | any, event?: KeyboardEvent): void;
+    onKeyDown(itemListAction: any, event?: KeyboardEvent): void;
+    private handleArrowRightKey;
+    private handleEnterOrSpaceKey;
     checkboxClicked({ option, selected }: {
         option: any;
         selected: any;
@@ -2253,7 +2316,7 @@ declare class PoListBoxComponent extends PoListBoxBaseComponent implements OnIni
     formatItemList(item: any): string;
     handleFooterActionListbox(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoListBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PoListBoxComponent, "po-listbox", never, {}, {}, never, ["[p-popup-header-template]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PoListBoxComponent, "po-listbox", never, { "rootLazyLoad": { "alias": "p-root-lazy-load"; "required": false; }; }, { "rootItemsLoad": "p-root-items-load"; "contentChange": "p-content-change"; }, never, ["[p-popup-header-template]"], false, never>;
 }
 
 /**
@@ -4406,9 +4469,337 @@ declare class PoCheckboxModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<PoCheckboxModule>;
 }
 
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define os tipos de animação do componente `po-skeleton`.
+ */
+declare enum PoSkeletonAnimation {
+    /** Sem animação */
+    none = "none",
+    /** Animação de pulsação */
+    pulse = "pulse",
+    /** Animação de brilho deslizante */
+    shimmer = "shimmer"
+}
+
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define os tamanhos disponíveis para o componente `po-skeleton`.
+ */
+declare enum PoSkeletonSize {
+    /** Tamanho extra pequeno */
+    xs = "xs",
+    /** Tamanho pequeno */
+    sm = "sm",
+    /** Tamanho médio */
+    md = "md",
+    /** Tamanho grande */
+    lg = "lg",
+    /** Tamanho extra grande */
+    xl = "xl",
+    /** Tamanho extra extra grande */
+    xxl = "2xl"
+}
+
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define os tipos visuais disponíveis para o componente `po-skeleton`.
+ */
+declare enum PoSkeletonType {
+    /** Tipo padrão com cor neutra clara */
+    normal = "normal",
+    /** Tipo primário com cor neutra média */
+    primary = "primary",
+    /** Tipo de conteúdo com fundo branco */
+    content = "content"
+}
+
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define as variantes visuais do componente `po-skeleton`.
+ */
+declare enum PoSkeletonVariant {
+    /** Variante para simular texto */
+    text = "text",
+    /** Variante retangular (largura maior que altura) */
+    rectangle = "rectangle",
+    /** Variante quadrada (largura igual à altura) */
+    square = "square",
+    /** Variante circular */
+    circle = "circle"
+}
+
+/**
+ * @description
+ *
+ * O componente `po-skeleton` é utilizado para exibir placeholders durante o carregamento de conteúdo,
+ * melhorando a experiência do usuário ao indicar que a informação está sendo processada.
+ *
+ * Ele oferece diferentes variantes visuais (texto, retângulo, círculo) e animações (pulse, shimmer)
+ * para simular diversos tipos de conteúdo em estado de carregamento.
+ *
+ * #### Tokens customizáveis
+ *
+ * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade                            | Descrição                                            | Valor Padrão                    |
+ * |----------------------------------------|------------------------------------------------------|---------------------------------|
+ * | **Cores**                              |                                                      |                                 |
+ * | `--color`                              | Cor de fundo do skeleton (tipo normal)               | `var(--color-neutral-light-20)` |
+ * | `--color-primary`                      | Cor de fundo do skeleton (tipo primary)              | `var(--color-neutral-mid-40)`   |
+ * | `--color-content`                      | Cor de fundo do skeleton (tipo content)              | `var(--color-neutral-light-00)` |
+ * | `--shimmer-highlight`                  | Cor de destaque do shimmer (tipo normal)             | `var(--color-neutral-light-30)` |
+ * | `--shimmer-highlight-primary`          | Cor de destaque do shimmer (tipo primary)            | `var(--color-neutral-light-20)` |
+ * | `--shimmer-highlight-content`          | Cor de destaque do shimmer (tipo content)            | `var(--color-neutral-light-05)` |
+ * | **Espaçamento**                        |                                                      |                                 |
+ * | `--margin-bottom`                      | Margem inferior do skeleton                          | `var(--spacing-xs)`             |
+ * | **Bordas**                             |                                                      |                                 |
+ * | `--border-radius`                      | Raio da borda do skeleton                            | `var(--border-radius-md)`       |
+ * | `--border-radius-text`                 | Raio da borda para a variante text                   | `var(--border-radius-md)`       |
+ * | `--border-radius-primary`              | Raio da borda do skeleton (tipo primary)             | `var(--border-radius-md)`       |
+ * | `--border-radius-content`              | Raio da borda do skeleton (tipo content)             | `var(--border-radius-lg)`       |
+ * | **Transições**                         |                                                      |                                 |
+ * | `--transition-property`                | Propriedade CSS da transição                         | `all`                           |
+ * | `--transition-duration`                | Duração da transição de cor                          | `var(--duration-moderate)`      |
+ * | `--transition-timing`                  | Função de temporização da transição/animação         | `var(--timing-continuous)`      |
+ * | **Animações**                          |                                                      |                                 |
+ * | `--animation-duration-pulse`           | Duração da animação de pulsação                      | `var(--duration-very-slow)`     |
+ * | `--animation-duration-shimmer`         | Duração da animação de brilho deslizante             | `var(--duration-ultra-slow)`    |
+ *
+ */
+declare class PoSkeletonBaseComponent {
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a variante visual do skeleton.
+     *
+     * Valores válidos:
+     * - `text`: Simula uma linha de texto (altura padrão: 1em)
+     * - `rectangle`: Forma retangular (proporção 3:1 por padrão)
+     * - `square`: Forma quadrada (largura e altura iguais)
+     * - `circle`: Forma circular (largura e altura iguais)
+     *
+     * @default `text`
+     */
+    variant: i0.InputSignal<PoSkeletonVariant>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tipo visual do skeleton, alterando sua cor de fundo.
+     *
+     * Valores válidos:
+     * - `normal`: Cor neutra clara (padrão)
+     * - `primary`: Cor neutra média
+     * - `content`: Fundo branco
+     *
+     * @default `normal`
+     */
+    type: i0.InputSignal<PoSkeletonType>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tipo de animação do skeleton.
+     *
+     * Valores válidos:
+     * - `none`: Sem animação
+     * - `pulse`: Animação de pulsação
+     * - `shimmer`: Animação de brilho deslizante
+     *
+     * @default `shimmer`
+     */
+    animation: i0.InputSignal<PoSkeletonAnimation>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o tamanho do skeleton para as variantes pré-definidas (`rectangle`, `square`, `circle`).
+     *
+     * Valores válidos:
+     * - `xs`: Extra pequeno (24px para square/circle, 72px x 24px para rectangle)
+     * - `sm`: Pequeno (32px para square/circle, 96px x 32px para rectangle)
+     * - `md`: Médio (48px para square/circle, 144px x 48px para rectangle)
+     * - `lg`: Grande (64px para square/circle, 192px x 64px para rectangle)
+     * - `xl`: Extra grande (96px para square/circle, 288px x 96px para rectangle)
+     * - `2xl`: Extra extra grande (144px para square/circle, 432px x 144px para rectangle)
+     *
+     * Esta propriedade é ignorada quando `p-width` ou `p-height` são definidos explicitamente.
+     *
+     * @default `md`
+     */
+    size: i0.InputSignal<PoSkeletonSize>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a largura do skeleton.
+     * Aceita valores CSS válidos (px, %, em, rem).
+     *
+     * Quando definido, sobrescreve a largura padrão da variante.
+     *
+     * @default `100%` para variante `text`, tamanho baseado em `p-size` para outras variantes
+     */
+    width: i0.InputSignal<string>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a altura do skeleton.
+     * Aceita valores CSS válidos (px, %, em, rem).
+     *
+     * Quando definido, sobrescreve a altura padrão da variante.
+     */
+    height: i0.InputSignal<string>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define o raio da borda do skeleton.
+     * Aceita valores CSS válidos (px, %, em, rem).
+     *
+     * Esta propriedade sobrescreve o border-radius padrão de cada variante.
+     */
+    borderRadius: i0.InputSignal<string>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Define a descrição acessível do conteúdo que está sendo carregado.
+     *
+     * Este texto será anunciado por leitores de tela, garantindo que usuários de tecnologias assistivas
+     * sejam informados sobre o estado de carregamento.
+     *
+     * **Quando usar:**
+     * - Use em **skeletons únicos** ou no **primeiro skeleton de um grupo** com descrição contextual
+     * - Evite usar em múltiplos skeletons dentro da mesma área sem contexto, para não causar repetição excessiva
+     *
+     * **Exemplos de uso:**
+     *
+     * ```html
+     * <!-- ✅ BOM: Skeleton único com contexto -->
+     * <po-skeleton p-aria-label="Carregando perfil do usuário"></po-skeleton>
+     *
+     * <!-- ✅ BOM: Grupo de skeletons - apenas o primeiro anuncia -->
+     * <po-skeleton p-aria-label="Carregando lista de produtos"></po-skeleton>
+     * <po-skeleton p-type="primary"></po-skeleton>
+     * <po-skeleton p-variant="circle"></po-skeleton>
+     *
+     * <!-- ❌ EVITE: Múltiplos skeletons com a mesma label -->
+     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" -->
+     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" -->
+     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" (repetitivo!) -->
+     * ```
+     *
+     * > **Boas práticas de acessibilidade:**
+     * > - Forneça contexto específico na label para que os usuários entendam o que está carregando
+     *
+     * > - Em casos complexos, considere usar um único `<div role="status">` para todo o grupo
+     * >   de skeletons, ao invés de múltiplas labels idênticas, para evitar repetição excessiva de anúncios
+     */
+    ariaLabel: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PoSkeletonBaseComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoSkeletonBaseComponent, never, never, { "variant": { "alias": "p-variant"; "required": false; "isSignal": true; }; "type": { "alias": "p-type"; "required": false; "isSignal": true; }; "animation": { "alias": "p-animation"; "required": false; "isSignal": true; }; "size": { "alias": "p-size"; "required": false; "isSignal": true; }; "width": { "alias": "p-width"; "required": false; "isSignal": true; }; "height": { "alias": "p-height"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "p-border-radius"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "p-aria-label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @docsExtends PoSkeletonBaseComponent
+ *
+ * @example
+ *
+ * <example name="po-skeleton-basic" title="PO Skeleton Basic">
+ *  <file name="sample-po-skeleton-basic/sample-po-skeleton-basic.component.html"> </file>
+ *  <file name="sample-po-skeleton-basic/sample-po-skeleton-basic.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-labs" title="PO Skeleton Labs">
+ *  <file name="sample-po-skeleton-labs/sample-po-skeleton-labs.component.html"> </file>
+ *  <file name="sample-po-skeleton-labs/sample-po-skeleton-labs.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-credit-card" title="PO Skeleton - Credit Card">
+ *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.html"> </file>
+ *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.ts"> </file>
+ *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.css"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-widget-card" title="PO Skeleton - Widget Card">
+ *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.html"> </file>
+ *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.ts"> </file>
+ *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.css"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-user-profile" title="PO Skeleton - User Profile">
+ *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.html"> </file>
+ *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.ts"> </file>
+ *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.css"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-social-post" title="PO Skeleton - Social Post">
+ *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.html"> </file>
+ *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.ts"> </file>
+ *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.css"> </file>
+ * </example>
+ *
+ * <example name="po-skeleton-article" title="PO Skeleton - Article">
+ *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.html"> </file>
+ *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.ts"> </file>
+ *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.css"> </file>
+ * </example>
+ */
+declare class PoSkeletonComponent extends PoSkeletonBaseComponent {
+    private readonly sizeMap;
+    private readonly defaultTextDimensions;
+    private readonly defaultBorderRadius;
+    computedStyles: i0.Signal<{
+        [key: string]: string;
+    }>;
+    computedClasses: i0.Signal<{
+        [x: string]: boolean;
+        'po-skeleton': boolean;
+    }>;
+    private getDimensions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PoSkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PoSkeletonComponent, "po-skeleton", never, {}, {}, never, never, false, never>;
+}
+
+/**
+ * @description
+ *
+ * Módulo do componente po-skeleton.
+ */
+declare class PoSkeletonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PoSkeletonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoSkeletonModule, [typeof PoSkeletonComponent], [typeof i2.CommonModule], [typeof PoSkeletonComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PoSkeletonModule>;
+}
+
 declare class PoListBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PoListBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PoListBoxModule, [typeof PoListBoxComponent, typeof PoItemListComponent, typeof PoSearchListComponent], [typeof i2.CommonModule, typeof PoCheckboxModule, typeof PoIconModule, typeof PoLoadingModule, typeof PoTagModule, typeof i9.CdkListboxModule], [typeof PoListBoxComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PoListBoxModule, [typeof PoListBoxComponent, typeof PoItemListComponent, typeof PoSearchListComponent], [typeof i2.CommonModule, typeof PoButtonModule, typeof PoCheckboxModule, typeof PoIconModule, typeof PoLoadingModule, typeof PoSkeletonModule, typeof PoTagModule, typeof i11.CdkListboxModule], [typeof PoListBoxComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PoListBoxModule>;
 }
 
@@ -4490,10 +4881,14 @@ declare class PoPopupBaseComponent {
     private _position?;
     private _size?;
     private _target;
+    rootLazyLoad?: () => Observable<Array<PoPopupAction>>;
     get computedListboxSubitems(): boolean;
     templateIcon: boolean;
-    /** Lista de ações que serão exibidas no componente. */
-    set actions(value: Array<PoPopupAction>);
+    /**
+     * Lista de ações que serão exibidas no componente.
+     * Aceita um *array* de `PoPopupAction`.
+     */
+    set actions(value: Array<PoPopupAction> | (() => Observable<Array<PoPopupAction>>));
     get actions(): Array<PoPopupAction>;
     /**
      * @optional
@@ -4621,10 +5016,41 @@ declare class PoPopupBaseComponent {
     set target(value: any);
     get target(): any;
     closeEvent: EventEmitter<any>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado a cada clique em um item do menu.
+     * Retorna o item clicado (`PoDropdownAction`).
+     *
+     * > Não é disparado para a ação interna de voltar (`goBack`).
+     */
     clickItem: EventEmitter<any>;
     openEvent: EventEmitter<any>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado no momento em que a requisição assíncrona de um subnível é iniciada.
+     * Retorna o item agrupador (`PoPopupAction`) que originou o carregamento.
+     *
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
+     */
+    subItemsLoad: EventEmitter<PoPopupAction>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado no momento em que a requisição assíncrona do nível raiz é iniciada
+     *
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
+     */
+    rootItemsLoad: EventEmitter<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoPopupBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoPopupBaseComponent, never, never, { "templateIcon": { "alias": "p-template-icon"; "required": false; }; "actions": { "alias": "p-actions"; "required": false; }; "hideArrow": { "alias": "p-hide-arrow"; "required": false; }; "isCornerAlign": { "alias": "p-is-corner-align"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; "customPositions": { "alias": "p-custom-positions"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "target": { "alias": "p-target"; "required": false; }; }, { "closeEvent": "p-close"; "clickItem": "p-click-item"; "openEvent": "p-open"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoPopupBaseComponent, never, never, { "templateIcon": { "alias": "p-template-icon"; "required": false; }; "actions": { "alias": "p-actions"; "required": false; }; "hideArrow": { "alias": "p-hide-arrow"; "required": false; }; "isCornerAlign": { "alias": "p-is-corner-align"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; "customPositions": { "alias": "p-custom-positions"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "target": { "alias": "p-target"; "required": false; }; }, { "closeEvent": "p-close"; "clickItem": "p-click-item"; "openEvent": "p-open"; "subItemsLoad": "p-sub-items-load"; "rootItemsLoad": "p-root-items-load"; }, never, never, true, never>;
 }
 
 /**
@@ -4659,6 +5085,8 @@ declare class PoPopupComponent extends PoPopupBaseComponent implements AfterView
     changeDetector: ChangeDetectorRef;
     popupRef: ElementRef;
     listbox: ElementRef;
+    private readonly popupOffset;
+    private readonly viewportMargin;
     poListBoxRef: PoListBoxComponent;
     ngAfterViewInit(): void;
     /**
@@ -4666,7 +5094,10 @@ declare class PoPopupComponent extends PoPopupBaseComponent implements AfterView
      *
      * > Por padrão, este comportamento é acionado somente ao clicar fora do componente ou em determinada ação / url.
      */
-    close(): void;
+    close(closeEvent?: {
+        reason?: string;
+        origin?: string;
+    }): void;
     onActionClick(popupAction: PoPopupAction): void | Promise<boolean>;
     /**
      * Abre o componente *popup*.
@@ -4684,10 +5115,13 @@ declare class PoPopupComponent extends PoPopupBaseComponent implements AfterView
      */
     toggle(param?: any): void;
     onClickItem(item: any): void;
+    onContentChange(): void;
     protected checkAllActionIsInvisible(): boolean;
     private clickedOutDisabledItem;
     private clickedOutHeaderTemplate;
+    private isEventInsideElement;
     private clickedOutTarget;
+    private clickedOutPopup;
     private closePopupOnClickout;
     private elementContains;
     private hasContentToShow;
@@ -4696,7 +5130,14 @@ declare class PoPopupComponent extends PoPopupBaseComponent implements AfterView
     private openUrl;
     private removeListeners;
     private setPosition;
+    private resolvePositions;
+    private getVerticalFirstPositions;
+    private clampHeightToViewport;
+    private getScrollableListboxElement;
+    private isOpeningUp;
+    private getStickyPositions;
     private validateInitialContent;
+    private focusTarget;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoPopupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PoPopupComponent, "po-popup", never, {}, {}, never, ["[p-popup-header-template]"], false, never>;
 }
@@ -14007,13 +14448,18 @@ declare class PoDropdownBaseComponent {
     icon: string;
     open: boolean;
     private _actions;
+    private _rootLazyLoad?;
     private _disabled;
     private _size?;
     private _initialSize?;
     private _position;
-    /** Lista de ações que serão exibidas no componente. */
-    set actions(value: Array<PoDropdownAction>);
+    /**
+     * Lista de ações que serão exibidas no componente.
+     * Aceita um *array* de `PoDropdownAction`.
+     */
+    set actions(value: Array<PoDropdownAction> | (() => Observable<Array<PoDropdownAction>>));
     get actions(): Array<PoDropdownAction>;
+    get popupActions(): Array<PoDropdownAction> | (() => Observable<Array<PoDropdownAction>>);
     /**
      * @optional
      *
@@ -14068,11 +14514,43 @@ declare class PoDropdownBaseComponent {
      */
     set position(value: string);
     get position(): string;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado a cada clique em um item do menu.
+     * Retorna o item clicado (`PoDropdownAction`).
+     *
+     * > Não é disparado para a ação interna de voltar (`goBack`).
+     */
+    clickItem: EventEmitter<PoDropdownAction>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado no momento em que a requisição assíncrona de um subnível é iniciada.
+     * Retorna o item agrupador (`PoDropdownAction`) que originou o carregamento.
+     *
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
+     */
+    subItemsLoad: EventEmitter<PoDropdownAction>;
+    /**
+     * @optional
+     *
+     * @description
+     *
+     * Evento disparado no momento em que a requisição assíncrona do nível raiz é iniciada
+     *
+     * > Compatível com a propriedade PoPopupAction.subItemsLazy
+     */
+    rootItemsLoad: EventEmitter<void>;
     get popupCustomPositions(): Array<string>;
     protected onThemeChange(): void;
     private applySizeBasedOnA11y;
     static ɵfac: i0.ɵɵFactoryDeclaration<PoDropdownBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoDropdownBaseComponent, never, never, { "label": { "alias": "p-label"; "required": false; }; "actions": { "alias": "p-actions"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PoDropdownBaseComponent, never, never, { "label": { "alias": "p-label"; "required": false; }; "actions": { "alias": "p-actions"; "required": false; }; "disabled": { "alias": "p-disabled"; "required": false; }; "size": { "alias": "p-size"; "required": false; }; "position": { "alias": "p-position"; "required": false; }; }, { "clickItem": "p-click-item"; "subItemsLoad": "p-sub-items-load"; "rootItemsLoad": "p-root-items-load"; }, never, never, true, never>;
 }
 
 /**
@@ -14085,11 +14563,6 @@ declare class PoDropdownBaseComponent {
  *  <file name="sample-po-dropdown-basic/sample-po-dropdown-basic.component.ts"> </file>
  * </example>
  *
- * <example name="po-dropdown-subitems" title="PO Dropdown Subitems" >
- *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.html"> </file>
- *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.ts"> </file>
- * </example>
- *
  * <example name="po-dropdown-labs" title="PO Dropdown Labs" >
  *  <file name="sample-po-dropdown-labs/sample-po-dropdown-labs.component.html"> </file>
  *  <file name="sample-po-dropdown-labs/sample-po-dropdown-labs.component.ts"> </file>
@@ -14099,6 +14572,16 @@ declare class PoDropdownBaseComponent {
  *  <file name="sample-po-dropdown-social-network/sample-po-dropdown-social-network.component.html"> </file>
  *  <file name="sample-po-dropdown-social-network/sample-po-dropdown-social-network.component.ts"> </file>
  * </example>
+ *
+ * <example name="po-dropdown-subitems" title="PO Dropdown Subitems" >
+ *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.html"> </file>
+ *  <file name="sample-po-dropdown-subitems/sample-po-dropdown-subitems.component.ts"> </file>
+ * </example>
+ *
+ * <example name="po-dropdown-lazy-subitems" title="PO Dropdown Lazy Subitems" >
+ *  <file name="sample-po-dropdown-lazy-subitems/sample-po-dropdown-lazy-subitems.component.html"> </file>
+ *  <file name="sample-po-dropdown-lazy-subitems/sample-po-dropdown-lazy-subitems.component.ts"> </file>
+ * </example>
  */
 declare class PoDropdownComponent extends PoDropdownBaseComponent {
     private readonly renderer;
@@ -14109,10 +14592,13 @@ declare class PoDropdownComponent extends PoDropdownBaseComponent {
     private resizeListener;
     onKeyDown(event: any): void;
     toggleDropdown(): void;
+    onPopupClose(): void;
+    private isEventInsideElement;
     private checkClickArea;
     private hideDropdown;
     private initializeListeners;
     private readonly onScroll;
+    private isScrollInsidePopup;
     private isDropdownClosed;
     private removeListeners;
     private showDropdown;
@@ -15799,7 +16285,7 @@ declare abstract class PoChartBaseComponent implements OnInit {
      * - Os marcadores (*bullets*) terão seu estilo ajustado.
      * - As outras séries ficarão com opacidade reduzida ao passar o mouse sobre a série ativa.
      *
-     * > Disponível para gráficos do tipo `line` e `radar`.
+     * > Disponível para gráficos do tipo `line`, `area`, `column`, `bar` e `radar`.
      *
      * #### Exemplo de utilização:
      * ```typescript
@@ -39863,334 +40349,6 @@ declare class PoTreeViewModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<PoTreeViewModule>;
 }
 
-/**
- * @usedBy PoSkeletonComponent
- *
- * @description
- *
- * Define os tipos de animação do componente `po-skeleton`.
- */
-declare enum PoSkeletonAnimation {
-    /** Sem animação */
-    none = "none",
-    /** Animação de pulsação */
-    pulse = "pulse",
-    /** Animação de brilho deslizante */
-    shimmer = "shimmer"
-}
-
-/**
- * @usedBy PoSkeletonComponent
- *
- * @description
- *
- * Define os tamanhos disponíveis para o componente `po-skeleton`.
- */
-declare enum PoSkeletonSize {
-    /** Tamanho extra pequeno */
-    xs = "xs",
-    /** Tamanho pequeno */
-    sm = "sm",
-    /** Tamanho médio */
-    md = "md",
-    /** Tamanho grande */
-    lg = "lg",
-    /** Tamanho extra grande */
-    xl = "xl",
-    /** Tamanho extra extra grande */
-    xxl = "2xl"
-}
-
-/**
- * @usedBy PoSkeletonComponent
- *
- * @description
- *
- * Define os tipos visuais disponíveis para o componente `po-skeleton`.
- */
-declare enum PoSkeletonType {
-    /** Tipo padrão com cor neutra clara */
-    normal = "normal",
-    /** Tipo primário com cor neutra média */
-    primary = "primary",
-    /** Tipo de conteúdo com fundo branco */
-    content = "content"
-}
-
-/**
- * @usedBy PoSkeletonComponent
- *
- * @description
- *
- * Define as variantes visuais do componente `po-skeleton`.
- */
-declare enum PoSkeletonVariant {
-    /** Variante para simular texto */
-    text = "text",
-    /** Variante retangular (largura maior que altura) */
-    rectangle = "rectangle",
-    /** Variante quadrada (largura igual à altura) */
-    square = "square",
-    /** Variante circular */
-    circle = "circle"
-}
-
-/**
- * @description
- *
- * O componente `po-skeleton` é utilizado para exibir placeholders durante o carregamento de conteúdo,
- * melhorando a experiência do usuário ao indicar que a informação está sendo processada.
- *
- * Ele oferece diferentes variantes visuais (texto, retângulo, círculo) e animações (pulse, shimmer)
- * para simular diversos tipos de conteúdo em estado de carregamento.
- *
- * #### Tokens customizáveis
- *
- * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
- *
- * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
- *
- * | Propriedade                            | Descrição                                            | Valor Padrão                    |
- * |----------------------------------------|------------------------------------------------------|---------------------------------|
- * | **Cores**                              |                                                      |                                 |
- * | `--color`                              | Cor de fundo do skeleton (tipo normal)               | `var(--color-neutral-light-20)` |
- * | `--color-primary`                      | Cor de fundo do skeleton (tipo primary)              | `var(--color-neutral-mid-40)`   |
- * | `--color-content`                      | Cor de fundo do skeleton (tipo content)              | `var(--color-neutral-light-00)` |
- * | `--shimmer-highlight`                  | Cor de destaque do shimmer (tipo normal)             | `var(--color-neutral-light-30)` |
- * | `--shimmer-highlight-primary`          | Cor de destaque do shimmer (tipo primary)            | `var(--color-neutral-light-20)` |
- * | `--shimmer-highlight-content`          | Cor de destaque do shimmer (tipo content)            | `var(--color-neutral-light-05)` |
- * | **Espaçamento**                        |                                                      |                                 |
- * | `--margin-bottom`                      | Margem inferior do skeleton                          | `var(--spacing-xs)`             |
- * | **Bordas**                             |                                                      |                                 |
- * | `--border-radius`                      | Raio da borda do skeleton                            | `var(--border-radius-md)`       |
- * | `--border-radius-text`                 | Raio da borda para a variante text                   | `var(--border-radius-md)`       |
- * | `--border-radius-primary`              | Raio da borda do skeleton (tipo primary)             | `var(--border-radius-md)`       |
- * | `--border-radius-content`              | Raio da borda do skeleton (tipo content)             | `var(--border-radius-lg)`       |
- * | **Transições**                         |                                                      |                                 |
- * | `--transition-property`                | Propriedade CSS da transição                         | `all`                           |
- * | `--transition-duration`                | Duração da transição de cor                          | `var(--duration-moderate)`      |
- * | `--transition-timing`                  | Função de temporização da transição/animação         | `var(--timing-continuous)`      |
- * | **Animações**                          |                                                      |                                 |
- * | `--animation-duration-pulse`           | Duração da animação de pulsação                      | `var(--duration-very-slow)`     |
- * | `--animation-duration-shimmer`         | Duração da animação de brilho deslizante             | `var(--duration-ultra-slow)`    |
- *
- */
-declare class PoSkeletonBaseComponent {
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define a variante visual do skeleton.
-     *
-     * Valores válidos:
-     * - `text`: Simula uma linha de texto (altura padrão: 1em)
-     * - `rectangle`: Forma retangular (proporção 3:1 por padrão)
-     * - `square`: Forma quadrada (largura e altura iguais)
-     * - `circle`: Forma circular (largura e altura iguais)
-     *
-     * @default `text`
-     */
-    variant: i0.InputSignal<PoSkeletonVariant>;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o tipo visual do skeleton, alterando sua cor de fundo.
-     *
-     * Valores válidos:
-     * - `normal`: Cor neutra clara (padrão)
-     * - `primary`: Cor neutra média
-     * - `content`: Fundo branco
-     *
-     * @default `normal`
-     */
-    type: i0.InputSignal<PoSkeletonType>;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o tipo de animação do skeleton.
-     *
-     * Valores válidos:
-     * - `none`: Sem animação
-     * - `pulse`: Animação de pulsação
-     * - `shimmer`: Animação de brilho deslizante
-     *
-     * @default `shimmer`
-     */
-    animation: i0.InputSignal<PoSkeletonAnimation>;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o tamanho do skeleton para as variantes pré-definidas (`rectangle`, `square`, `circle`).
-     *
-     * Valores válidos:
-     * - `xs`: Extra pequeno (24px para square/circle, 72px x 24px para rectangle)
-     * - `sm`: Pequeno (32px para square/circle, 96px x 32px para rectangle)
-     * - `md`: Médio (48px para square/circle, 144px x 48px para rectangle)
-     * - `lg`: Grande (64px para square/circle, 192px x 64px para rectangle)
-     * - `xl`: Extra grande (96px para square/circle, 288px x 96px para rectangle)
-     * - `2xl`: Extra extra grande (144px para square/circle, 432px x 144px para rectangle)
-     *
-     * Esta propriedade é ignorada quando `p-width` ou `p-height` são definidos explicitamente.
-     *
-     * @default `md`
-     */
-    size: i0.InputSignal<PoSkeletonSize>;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define a largura do skeleton.
-     * Aceita valores CSS válidos (px, %, em, rem).
-     *
-     * Quando definido, sobrescreve a largura padrão da variante.
-     *
-     * @default `100%` para variante `text`, tamanho baseado em `p-size` para outras variantes
-     */
-    width: i0.InputSignal<string>;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define a altura do skeleton.
-     * Aceita valores CSS válidos (px, %, em, rem).
-     *
-     * Quando definido, sobrescreve a altura padrão da variante.
-     */
-    height: i0.InputSignal<string>;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define o raio da borda do skeleton.
-     * Aceita valores CSS válidos (px, %, em, rem).
-     *
-     * Esta propriedade sobrescreve o border-radius padrão de cada variante.
-     */
-    borderRadius: i0.InputSignal<string>;
-    /**
-     * @optional
-     *
-     * @description
-     *
-     * Define a descrição acessível do conteúdo que está sendo carregado.
-     *
-     * Este texto será anunciado por leitores de tela, garantindo que usuários de tecnologias assistivas
-     * sejam informados sobre o estado de carregamento.
-     *
-     * **Quando usar:**
-     * - Use em **skeletons únicos** ou no **primeiro skeleton de um grupo** com descrição contextual
-     * - Evite usar em múltiplos skeletons dentro da mesma área sem contexto, para não causar repetição excessiva
-     *
-     * **Exemplos de uso:**
-     *
-     * ```html
-     * <!-- ✅ BOM: Skeleton único com contexto -->
-     * <po-skeleton p-aria-label="Carregando perfil do usuário"></po-skeleton>
-     *
-     * <!-- ✅ BOM: Grupo de skeletons - apenas o primeiro anuncia -->
-     * <po-skeleton p-aria-label="Carregando lista de produtos"></po-skeleton>
-     * <po-skeleton p-type="primary"></po-skeleton>
-     * <po-skeleton p-variant="circle"></po-skeleton>
-     *
-     * <!-- ❌ EVITE: Múltiplos skeletons com a mesma label -->
-     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" -->
-     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" -->
-     * <po-skeleton p-aria-label="Carregando"></po-skeleton>  <!-- "Carregando" (repetitivo!) -->
-     * ```
-     *
-     * > **Boas práticas de acessibilidade:**
-     * > - Forneça contexto específico na label para que os usuários entendam o que está carregando
-     *
-     * > - Em casos complexos, considere usar um único `<div role="status">` para todo o grupo
-     * >   de skeletons, ao invés de múltiplas labels idênticas, para evitar repetição excessiva de anúncios
-     */
-    ariaLabel: i0.InputSignal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PoSkeletonBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PoSkeletonBaseComponent, never, never, { "variant": { "alias": "p-variant"; "required": false; "isSignal": true; }; "type": { "alias": "p-type"; "required": false; "isSignal": true; }; "animation": { "alias": "p-animation"; "required": false; "isSignal": true; }; "size": { "alias": "p-size"; "required": false; "isSignal": true; }; "width": { "alias": "p-width"; "required": false; "isSignal": true; }; "height": { "alias": "p-height"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "p-border-radius"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "p-aria-label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
-/**
- * @docsExtends PoSkeletonBaseComponent
- *
- * @example
- *
- * <example name="po-skeleton-basic" title="PO Skeleton Basic">
- *  <file name="sample-po-skeleton-basic/sample-po-skeleton-basic.component.html"> </file>
- *  <file name="sample-po-skeleton-basic/sample-po-skeleton-basic.component.ts"> </file>
- * </example>
- *
- * <example name="po-skeleton-labs" title="PO Skeleton Labs">
- *  <file name="sample-po-skeleton-labs/sample-po-skeleton-labs.component.html"> </file>
- *  <file name="sample-po-skeleton-labs/sample-po-skeleton-labs.component.ts"> </file>
- * </example>
- *
- * <example name="po-skeleton-credit-card" title="PO Skeleton - Credit Card">
- *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.html"> </file>
- *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.ts"> </file>
- *  <file name="sample-po-skeleton-credit-card/sample-po-skeleton-credit-card.component.css"> </file>
- * </example>
- *
- * <example name="po-skeleton-widget-card" title="PO Skeleton - Widget Card">
- *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.html"> </file>
- *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.ts"> </file>
- *  <file name="sample-po-skeleton-widget-card/sample-po-skeleton-widget-card.component.css"> </file>
- * </example>
- *
- * <example name="po-skeleton-user-profile" title="PO Skeleton - User Profile">
- *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.html"> </file>
- *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.ts"> </file>
- *  <file name="sample-po-skeleton-user-profile/sample-po-skeleton-user-profile.component.css"> </file>
- * </example>
- *
- * <example name="po-skeleton-social-post" title="PO Skeleton - Social Post">
- *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.html"> </file>
- *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.ts"> </file>
- *  <file name="sample-po-skeleton-social-post/sample-po-skeleton-social-post.component.css"> </file>
- * </example>
- *
- * <example name="po-skeleton-article" title="PO Skeleton - Article">
- *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.html"> </file>
- *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.ts"> </file>
- *  <file name="sample-po-skeleton-article/sample-po-skeleton-article.component.css"> </file>
- * </example>
- */
-declare class PoSkeletonComponent extends PoSkeletonBaseComponent {
-    private readonly sizeMap;
-    private readonly defaultTextDimensions;
-    private readonly defaultBorderRadius;
-    computedStyles: i0.Signal<{
-        [key: string]: string;
-    }>;
-    computedClasses: i0.Signal<{
-        [x: string]: boolean;
-        'po-skeleton': boolean;
-    }>;
-    private getDimensions;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PoSkeletonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PoSkeletonComponent, "po-skeleton", never, {}, {}, never, never, false, never>;
-}
-
-/**
- * @description
- *
- * Módulo do componente po-skeleton.
- */
-declare class PoSkeletonModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<PoSkeletonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PoSkeletonModule, [typeof PoSkeletonComponent], [typeof i2.CommonModule], [typeof PoSkeletonComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<PoSkeletonModule>;
-}
-
 /**
  * @usedBy PoHeaderComponent
  *