@po-ui/ng-components 21.5.0 → 21.7.0

package/lib/components/po-field/po-textarea/po-textarea.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import { AfterViewInit, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { PoTextareaBaseComponent } from './po-textarea-base.component';
 import { PoHelperComponent } from '../../po-helper';
 /**
@@ -27,13 +27,16 @@ import { PoHelperComponent } from '../../po-helper';
  * </example>
  *
  */
-export declare class PoTextareaComponent extends PoTextareaBaseComponent implements AfterViewInit, OnChanges {
+export declare class PoTextareaComponent extends PoTextareaBaseComponent implements AfterViewInit, OnChanges, OnDestroy {
     private el;
     inputEl: ElementRef;
     helperEl?: PoHelperComponent;
     id: string;
     valueBeforeChange: any;
     fireChange: boolean;
+    hasScroll: boolean;
+    hasValue: boolean;
+    private resizeObserver;
     constructor();
     emitAdditionalHelp(): void;
     /**
@@ -55,7 +58,9 @@ export declare class PoTextareaComponent extends PoTextareaBaseComponent impleme
      */
     focus(): void;
     ngAfterViewInit(): void;
+    protected onAfterThemeChange(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
     getAdditionalHelpTooltip(): string;
     getErrorPattern(): string;
     hasInvalidClass(): boolean;
@@ -97,4 +102,8 @@ export declare class PoTextareaComponent extends PoTextareaBaseComponent impleme
         hideAdditionalHelp: boolean;
         helperSettings?: any;
     };
+    private readonly onWindowResize;
+    private checkScrollState;
+    private calculateTextareaHeight;
+    private initResizeObserver;
 }

package/lib/components/po-field/po-upload/po-upload-base.component.d.ts

@@ -500,8 +500,10 @@ export declare abstract class PoUploadBaseComponent implements ControlValueAcces
     private _hideSendButton?;
     private _isMultiple?;
     private _literals?;
+    private _loading;
     private _required?;
     private _size?;
+    private _initialSize?;
     private language;
     private validatorChange;
     /**
@@ -633,6 +635,19 @@ export declare abstract class PoUploadBaseComponent implements ControlValueAcces
      */
     set disabled(value: boolean);
     get disabled(): boolean;
+    /**
+     * @optional
+     *
+     * @description
+     * Exibe um ícone de carregamento no botão `Selecionar arquivo`, à esquerda do texto, sinalizando que uma operação está em andamento.
+     *
+     * > Incompatível com `p-drag-drop` e `p-hide-select-button`, pois o estado de loading depende da exibição do botão `Selecionar arquivo`.
+     *
+     * @default `false`
+     */
+    set loading(value: boolean);
+    get loading(): boolean;
+    get isDisabled(): boolean;
     /**
      * @optional
      *
@@ -679,6 +694,7 @@ export declare abstract class PoUploadBaseComponent implements ControlValueAcces
     set size(value: string);
     get size(): string;
     constructor(uploadService: PoUploadService, languageService: PoLanguageService, cd: ChangeDetectorRef);
+    protected onThemeChange(): void;
     setDisabledState(isDisabled: boolean): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
@@ -698,6 +714,7 @@ export declare abstract class PoUploadBaseComponent implements ControlValueAcces
     private setAllowedExtensions;
     private initRestrictions;
     private updateExistsFileInFiles;
+    private applySizeBasedOnA11y;
     abstract sendFeedback(file?: any): void;
     abstract setDirectoryAttribute(value: boolean): any;
 }

package/lib/components/po-field/po-upload/po-upload.component.d.ts

@@ -76,6 +76,8 @@ export declare class PoUploadComponent extends PoUploadBaseComponent implements
     get hasMultipleFiles(): boolean;
     get hasFileNotUploaded(): boolean;
     get isDisabled(): boolean;
+    get isSelectButtonDisabled(): boolean;
+    get isFieldDisabled(): boolean;
     get maxFiles(): number;
     cancel(file: PoUploadFile, keydown?: KeyboardEvent): void;
     ngOnChanges(changes: SimpleChanges): void;

package/lib/components/po-header/interfaces/po-header-action-tool.interface.d.ts

@@ -103,12 +103,20 @@ export interface PoHeaderActionTool {
  */
 export interface PoHeaderActionPopoverAction {
     /**
-     *
      * @description
      *
-     * Template que será renderizado dentro do popover
+     * Template que será renderizado dentro do popover.
      */
     content: TemplateRef<any>;
+    /**
+     * @description
+     *
+     * Largura, em pixels, do template renderizado dentro do popover.
+     *
+     * Valores permitidos: de 240 a 800.
+     *
+     */
+    width?: number;
 }
 /**
  * @usedBy PoHeaderComponent

package/lib/components/po-helper/po-helper-base.component.d.ts

@@ -93,6 +93,7 @@ export declare class PoHelperBaseComponent {
      * @default `medium`
      */
     size: import("@angular/core").InputSignal<string>;
+    get hostSize(): string;
     /**
      * @Input
      *

package/lib/components/po-info/po-info-base.component.d.ts

@@ -16,6 +16,7 @@ export declare class PoInfoBaseComponent {
     private _labelSize;
     private _orientation;
     private _size?;
+    private _initialSize?;
     /**
      * @optional
      *
@@ -58,4 +59,6 @@ export declare class PoInfoBaseComponent {
      */
     set size(value: string);
     get size(): string;
+    protected onThemeChange(): void;
+    private applySizeBasedOnA11y;
 }

package/lib/components/po-list-view/po-list-view-base.component.d.ts

@@ -59,6 +59,7 @@ export declare class PoListViewBaseComponent {
     showHeader: boolean;
     private _actions;
     private _componentsSize;
+    private _initialComponentsSize;
     private _height;
     private _hideSelectAll;
     private _items;
@@ -186,6 +187,8 @@ export declare class PoListViewBaseComponent {
     runTitleAction(listItem: any): void;
     selectAllListItems(): void;
     selectListItem(row: any): void;
+    protected onThemeChange(): void;
+    private applySizeBasedOnA11y;
     private deleteInternalAttrs;
     private checkIfItemsAreSelected;
     private showMainHeader;

package/lib/components/po-listbox/po-listbox-base.component.d.ts

@@ -22,6 +22,7 @@ export declare class PoListBoxBaseComponent {
     private _literals;
     private language;
     private _size?;
+    private _initialSize?;
     listboxSubitems: boolean;
     visible: boolean;
     set type(value: string);
@@ -76,4 +77,6 @@ export declare class PoListBoxBaseComponent {
     clickItem: EventEmitter<any>;
     footerActionListboxEvent: EventEmitter<any>;
     constructor(languageService: PoLanguageService);
+    protected onThemeChange(): void;
+    private applySizeBasedOnA11y;
 }

package/lib/components/po-menu/po-menu-base.component.d.ts

@@ -90,6 +90,7 @@ export declare abstract class PoMenuBaseComponent {
     readonly literals: any;
     private _collapsed;
     private _componentsSize;
+    private _initialComponentsSize;
     private _filter;
     private _searchTreeItems;
     private _level;
@@ -287,6 +288,7 @@ export declare abstract class PoMenuBaseComponent {
     set logoLink(value: boolean | string);
     get logoLink(): boolean | string;
     constructor(menuGlobalService: PoMenuGlobalService, menuService: PoMenuService, languageService: PoLanguageService);
+    protected onThemeChange(): void;
     protected setMenuExtraProperties(): void;
     protected setMenuItemProperties(menuItem: PoMenuItem): void;
     protected validateMenus(menus: any): void;
@@ -296,6 +298,7 @@ export declare abstract class PoMenuBaseComponent {
     private removeBadgeAlert;
     private setMenuBadgeAlert;
     private validateMenu;
+    private applySizeBasedOnA11y;
     protected abstract checkActiveMenuByUrl(urlRouter: any): any;
     protected abstract checkingRouterChildrenFragments(): any;
     protected abstract validateCollapseClass(): any;

package/lib/components/po-modal/po-modal-base.component.d.ts

@@ -56,6 +56,7 @@ export declare class PoModalBaseComponent {
     isHidden: boolean;
     onXClosed: EventEmitter<boolean>;
     private _componentsSize?;
+    private _initialComponentsSize?;
     private _hideClose?;
     private _size?;
     /**
@@ -139,4 +140,6 @@ export declare class PoModalBaseComponent {
     /** Função para abrir a modal. */
     open(): void;
     validPrimaryAction(): void;
+    protected onThemeChange(): void;
+    private applySizeBasedOnA11y;
 }

package/lib/components/po-page/po-page-default/po-page-default-base.component.d.ts

@@ -36,6 +36,7 @@ export declare abstract class PoPageDefaultBaseComponent {
     protected language: string;
     private _actions?;
     private _componentsSize?;
+    private _initialComponentsSize?;
     private _literals;
     private _title;
     /**
@@ -110,6 +111,8 @@ export declare abstract class PoPageDefaultBaseComponent {
      */
     subtitle: string;
     constructor(languageService: PoLanguageService);
+    protected onThemeChange(): void;
+    private applySizeBasedOnA11y;
     abstract setDropdownActions(): any;
     abstract getVisibleActions(): any;
 }

package/lib/components/po-page/po-page-detail/po-page-detail-base.component.d.ts

@@ -67,6 +67,7 @@ export declare class PoPageDetailBaseComponent {
      */
     remove: EventEmitter<any>;
     private _componentsSize?;
+    private _initialComponentsSize?;
     private _literals;
     private _title;
     private language;
@@ -136,4 +137,6 @@ export declare class PoPageDetailBaseComponent {
      */
     subtitle: string;
     constructor(languageService: PoLanguageService);
+    protected onThemeChange(): void;
+    private applySizeBasedOnA11y;
 }

package/lib/components/po-page/po-page-edit/po-page-edit-base.component.d.ts

@@ -73,6 +73,7 @@ export declare class PoPageEditBaseComponent {
      */
     saveNew: EventEmitter<any>;
     private _componentsSize?;
+    private _initialComponentsSize?;
     private _literals;
     private _title;
     private language;
@@ -142,4 +143,6 @@ export declare class PoPageEditBaseComponent {
      */
     subtitle: string;
     constructor(languageService: PoLanguageService);
+    protected onThemeChange(): void;
+    private applySizeBasedOnA11y;
 }

package/lib/components/po-page/po-page-list/po-page-list-base.component.d.ts

@@ -69,6 +69,7 @@ export declare abstract class PoPageListBaseComponent {
     private _actions?;
     private _disclaimerGroup?;
     private _componentsSize?;
+    private _initialComponentsSize?;
     private _literals;
     private _title;
     /**
@@ -152,5 +153,7 @@ export declare abstract class PoPageListBaseComponent {
      */
     subtitle: string;
     constructor(languageService: PoLanguageService);
+    protected onThemeChange(): void;
+    private applySizeBasedOnA11y;
     abstract setDropdownActions(): any;
 }

package/lib/components/po-page/po-page-slide/po-page-slide-base.component.d.ts

@@ -138,6 +138,7 @@ export declare class PoPageSlideBaseComponent {
     closePageSlide: EventEmitter<any>;
     hidden: boolean;
     private _componentsSize?;
+    private _initialComponentsSize?;
     private _size;
     /**
      * @optional
@@ -175,6 +176,8 @@ export declare class PoPageSlideBaseComponent {
      */
     set componentsSize(value: string);
     get componentsSize(): string;
+    protected onThemeChange(): void;
+    private applySizeBasedOnA11y;
     /**
      * Ativa a visualização da página.
      *

package/lib/components/po-popover/po-popover-base.component.d.ts

@@ -31,6 +31,7 @@ export declare class PoPopoverBaseComponent {
      * @default `false`
      */
     appendBox: boolean;
+    cornerAligned: boolean;
     /**
      * @description
      *
@@ -77,6 +78,7 @@ export declare class PoPopoverBaseComponent {
     target: ElementRef | HTMLElement;
     /** Título do popover. */
     title?: string;
+    width?: number;
     /** Evento disparado ao fechar o popover. */
     closePopover: EventEmitter<any>;
     /** Evento disparado ao abrir o popover. */

package/lib/components/po-popover/po-popover.component.d.ts

@@ -31,8 +31,10 @@ export declare class PoPopoverComponent extends PoPopoverBaseComponent implement
     timeoutResize: any;
     targetElement: any;
     afterViewInitWasCalled: boolean;
+    widthPopover: number;
     private keydownTargetListener?;
     private keydownPopoverListener?;
+    private resizeObserver;
     eventListenerFunction: () => void;
     private readonly tabbableSelector;
     constructor(renderer: Renderer2, poControlPosition: PoControlPositionService, cd: ChangeDetectorRef);
@@ -60,4 +62,6 @@ export declare class PoPopoverComponent extends PoPopoverBaseComponent implement
     private getDocumentTabbables;
     private focusNextAfterTarget;
     private focusPrevBeforeTarget;
+    private observeContentResize;
+    private disconnectResizeObserver;
 }

package/lib/components/po-progress/po-progress-base.component.d.ts

@@ -185,6 +185,7 @@ export declare class PoProgressBaseComponent {
     private _value?;
     private _size;
     private _sizeActions;
+    private _initialSizeActions;
     /**
      * @optional
      *
@@ -254,5 +255,7 @@ export declare class PoProgressBaseComponent {
      * @default `false`
      */
     showPercentage: boolean;
+    protected onThemeChange(): void;
+    private applySizeActionsBasedOnA11y;
     private isProgressRangeValue;
 }

package/lib/components/po-search/po-search-base.component.d.ts

@@ -80,6 +80,7 @@ export declare class PoSearchBaseComponent {
     private _ariaLabel?;
     private _filterSelect?;
     private _size?;
+    private _initialSize?;
     private _keysLabel?;
     private _disabled?;
     private _loading;
@@ -419,6 +420,8 @@ export declare class PoSearchBaseComponent {
      */
     footerAction: EventEmitter<any>;
     constructor(languageService: PoLanguageService);
+    protected onThemeChange(): void;
     ensureFilterSelectOption(values: any): any[];
     mapSizeToIcon(size: string): string;
+    private applySizeBasedOnA11y;
 }

package/lib/components/po-skeleton/enums/po-skeleton-animation.enum.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define os tipos de animação do componente `po-skeleton`.
+ */
+export declare enum PoSkeletonAnimation {
+    /** Sem animação */
+    none = "none",
+    /** Animação de pulsação */
+    pulse = "pulse",
+    /** Animação de brilho deslizante */
+    shimmer = "shimmer"
+}

package/lib/components/po-skeleton/enums/po-skeleton-size.enum.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define os tamanhos disponíveis para o componente `po-skeleton`.
+ */
+export 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"
+}

package/lib/components/po-skeleton/enums/po-skeleton-type.enum.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define os tipos visuais disponíveis para o componente `po-skeleton`.
+ */
+export 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"
+}

package/lib/components/po-skeleton/enums/po-skeleton-variant.enum.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @usedBy PoSkeletonComponent
+ *
+ * @description
+ *
+ * Define as variantes visuais do componente `po-skeleton`.
+ */
+export 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"
+}

package/lib/components/po-skeleton/index.d.ts

@@ -0,0 +1,6 @@
+export * from './enums/po-skeleton-animation.enum';
+export * from './enums/po-skeleton-size.enum';
+export * from './enums/po-skeleton-type.enum';
+export * from './enums/po-skeleton-variant.enum';
+export * from './po-skeleton.component';
+export * from './po-skeleton.module';

package/lib/components/po-skeleton/po-skeleton-base.component.d.ts

@@ -0,0 +1,208 @@
+import { PoSkeletonAnimation } from './enums/po-skeleton-animation.enum';
+import { PoSkeletonSize } from './enums/po-skeleton-size.enum';
+import { PoSkeletonType } from './enums/po-skeleton-type.enum';
+import { PoSkeletonVariant } from './enums/po-skeleton-variant.enum';
+/**
+ * @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)`    |
+ *
+ */
+export declare class PoSkeletonBaseComponent {
+    /**
+     *
+     * @Input
+     *
+     * @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: import("@angular/core").InputSignal<PoSkeletonVariant>;
+    /**
+     *
+     * @Input
+     *
+     * @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: import("@angular/core").InputSignal<PoSkeletonType>;
+    /**
+     *
+     * @Input
+     *
+     * @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: import("@angular/core").InputSignal<PoSkeletonAnimation>;
+    /**
+     *
+     * @Input
+     *
+     * @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: import("@angular/core").InputSignal<PoSkeletonSize>;
+    /**
+     *
+     * @Input
+     *
+     * @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: import("@angular/core").InputSignal<string>;
+    /**
+     * @Input
+     *
+     * @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: import("@angular/core").InputSignal<string>;
+    /**
+     *
+     * @Input
+     *
+     * @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: import("@angular/core").InputSignal<string>;
+    /**
+     *
+     * @Input
+     *
+     * @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: import("@angular/core").InputSignal<string>;
+}