voa-ds-core 1.0.4

package/dist/types/components/voa-pagination/voa-pagination.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-pagination.external.css';
+declare const meta: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        currentPage: {
+            control: "number";
+        };
+        totalPages: {
+            control: "number";
+        };
+        siblingCount: {
+            control: "number";
+        };
+    };
+    args: {
+        currentPage: number;
+        totalPages: number;
+        siblingCount: number;
+    };
+};
+export default meta;
+export declare const Default: StoryObj;
+export declare const SmallRange: StoryObj;
+export declare const MiddleRange: StoryObj;
+export declare const Usage: StoryObj;

package/dist/types/components/voa-progress/progress.d.ts

@@ -0,0 +1,4 @@
+export declare class Progress {
+    value: number;
+    render(): any;
+}

package/dist/types/components/voa-progress/progress.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;

package/dist/types/components/voa-radio/voa-radio.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Componente Radio Button do Voa Design System, baseado no design do Figma.
+ * Permite seleção única dentro de um grupo de opções.
+ * Este é o componente base do radio (apenas o indicador visual).
+ * Para opções com label, use o componente voa-option.
+ *
+ * @part base - The root label element
+ * @part input - The native radio input element
+ * @part indicator - The visual radio indicator circle (20px)
+ * @part dot - The inner dot when checked (8px)
+ */
+export declare class VoaRadio {
+    host: HTMLVoaRadioElement;
+    /**
+     * Se verdadeiro, o radio button estará selecionado.
+     */
+    checked: boolean;
+    /**
+     * Se verdadeiro, o radio button estará desabilitado.
+     */
+    disabled: boolean;
+    /**
+     * Nome do grupo de radio buttons (usado para agrupamento).
+     */
+    name: string;
+    /**
+     * Valor do radio button quando selecionado.
+     */
+    value: string;
+    /**
+     * Evento emitido quando o estado do radio button muda.
+     */
+    radioChange: EventEmitter<{
+        checked: boolean;
+        value: string;
+        name: string;
+    }>;
+    /**
+     * Evento emitido quando o radio button recebe foco.
+     */
+    radioFocus: EventEmitter<void>;
+    /**
+     * Evento emitido quando o radio button perde foco.
+     */
+    radioBlur: EventEmitter<void>;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    /**
+     * Método para delegar foco ao elemento interno do radio.
+     * Requerido para acessibilidade WCAG 2.2 AA.
+     */
+    setFocus(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/voa-radio/voa-radio.stories.d.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { VoaRadio } from './voa-radio';
+import '../../Stories/styles/voa-radio.external.css';
+/**
+ * Componente Radio Button do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1182-56
+ *
+ * Este é o componente base do radio (apenas o indicador visual, 20px).
+ * Para opções com label, use o componente voa-option.
+ *
+ * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais são aplicados externamente via CSS Parts API usando design tokens.
+ */
+declare const meta: Meta<VoaRadio>;
+export default meta;
+type Story = StoryObj<VoaRadio>;
+/**
+ * Estado padrão do radio (não selecionado, habilitado)
+ */
+export declare const Default: Story;
+/**
+ * Radio selecionado
+ */
+export declare const Checked: Story;
+/**
+ * Radio desabilitado (não selecionado)
+ */
+export declare const Disabled: Story;
+/**
+ * Radio desabilitado e selecionado
+ */
+export declare const DisabledChecked: Story;
+/**
+ * Todos os estados do radio conforme Figma
+ */
+export declare const AllStates: Story;
+/**
+ * Grupo de radios interativos
+ */
+export declare const Group: Story;
+export declare const Usage: Story;

package/dist/types/components/voa-select/voa-container-multi-select.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.
+ * Permite selecionar múltiplos itens dentro de um contêiner.
+ *
+ * @part base - The root container element
+ * @part inner - The inner container wrapper
+ * @part items - The items container wrapper
+ * @part item - Individual selectable item
+ * @part placeholder - The placeholder text element
+ */
+export declare class VoaContainerMultiSelect {
+    /**
+     * Lista de itens para seleção
+     */
+    items: Array<{
+        id: string;
+        label: string;
+        selected?: boolean;
+    }>;
+    /**
+     * Se verdadeiro, o contêiner estará desabilitado.
+     */
+    disabled: boolean;
+    /**
+     * Texto de placeholder quando não há itens selecionados
+     */
+    placeholder: string;
+    /**
+     * Estado interno dos itens selecionados
+     */
+    selectedItems: string[];
+    /**
+     * Evento emitido quando a seleção é alterada
+     */
+    voaSelectionChange: EventEmitter<string[]>;
+    componentWillLoad(): void;
+    componentDidUpdate(): void;
+    /**
+     * Sincroniza selectedItems quando items prop muda
+     * Usa componentDidUpdate porque @Watch pode não detectar mudanças em arrays por referência
+     */
+    private syncSelectedItems;
+    /**
+     * Verifica se um item está selecionado
+     */
+    private isItemSelected;
+    /**
+     * Manipula o clique no badge (remove o item da seleção quando clicado)
+     */
+    private handleBadgeClick;
+    render(): any;
+}

package/dist/types/components/voa-select/voa-container-multi-select.stories.d.ts

@@ -0,0 +1,33 @@
+import '../../Stories/styles/voa-select.external.css';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        disabled: {
+            control: string;
+            description: string;
+            defaultValue: boolean;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+            defaultValue: string;
+        };
+        items: {
+            control: string;
+            description: string;
+            defaultValue: {
+                id: string;
+                label: string;
+            }[];
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithPreselectedItems: any;
+export declare const Disabled: any;
+export declare const Empty: any;
+export declare const Usage: () => HTMLDivElement;

package/dist/types/components/voa-select/voa-select-base.d.ts

@@ -0,0 +1,76 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Componente Base para Select do Voa Design System, baseado no design do Figma.
+ *
+ * @part base - The root select element
+ * @part control - The select control button
+ * @part value - The displayed value text
+ * @part indicator - The dropdown indicator icon
+ * @part dropdown - The dropdown menu container
+ * @part option - Individual option element
+ */
+export declare class VoaSelectBase {
+    host: HTMLElement;
+    /**
+     * Lista de opções para seleção
+     */
+    options: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+    /**
+     * Texto de placeholder quando não há item selecionado
+     */
+    placeholder: string;
+    /**
+     * Se verdadeiro, o select estará desabilitado.
+     */
+    disabled: boolean;
+    /**
+     * Se verdadeiro, o select terá estado de erro.
+     */
+    error: boolean;
+    /**
+     * THE TRUTH. Read-only from parent.
+     */
+    value?: string;
+    /**
+     * Internal Reality.
+     */
+    innerValue?: string;
+    /**
+     * Se verdadeiro, o select mostrará as opções.
+     */
+    isOpen: boolean;
+    /**
+     * Track which option is currently "highlighted" by the keyboard
+     * (Not necessarily selected yet).
+     */
+    activeIndex: number;
+    /**
+     * Evento emitido quando o valor é alterado
+     */
+    voaChange: EventEmitter<string>;
+    private listboxId;
+    componentWillLoad(): void;
+    syncValue(val: string): void;
+    handleOutsideClick(ev: MouseEvent): void;
+    private toggleDropdown;
+    private openDropdown;
+    private closeDropdown;
+    private handleSelect;
+    /**
+     * THE KEYBOARD BRAIN
+     * This is what makes a Select a Select.
+     */
+    private handleKeyDown;
+    private scrollToActive;
+    private getDisplayText;
+    /**
+     * Método para delegar foco ao elemento interno do select.
+     * Requerido para acessibilidade WCAG 2.2 AA.
+     */
+    setFocus(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/voa-select/voa-select.d.ts

@@ -0,0 +1,115 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Componente Select principal do Voa Design System, baseado no design do Figma.
+ *
+ * Este componente orquestra os subcomponentes voa-select-base e voa-container-multi-select,
+ * adicionando funcionalidades de label, info, ícone e mensagem de erro.
+ *
+ * @part base - O elemento raiz do componente
+ * @part header - Container do header (label + info)
+ * @part label - Texto do label
+ * @part info - Container de informação
+ * @part input-wrapper - Wrapper do input field
+ * @part input - Container do input (com borda)
+ * @part error-message - Mensagem de erro
+ */
+export declare class VoaSelect {
+    host: HTMLVoaSelectElement;
+    /**
+     * Tipo de seleção: 'simple' para seleção única
+     * NOTA: 'multi' está temporariamente desabilitado até implementação correta
+     */
+    type: 'simple';
+    /**
+     * Texto do label exibido acima do input
+     */
+    label?: string;
+    /**
+     * Se verdadeiro, o label será exibido
+     */
+    showLabel: boolean;
+    /**
+     * Se verdadeiro, a informação adicional será exibida
+     */
+    info: boolean;
+    /**
+     * Mensagem de informação adicional
+     */
+    infoMessage?: string;
+    /**
+     * Se verdadeiro, o select terá estado de erro
+     */
+    error: boolean;
+    /**
+     * Mensagem de erro exibida abaixo do input
+     */
+    errorMessage?: string;
+    /**
+     * Texto de placeholder
+     */
+    placeholder: string;
+    /**
+     * THE TRUTH. Read-only from parent.
+     */
+    value?: string;
+    /**
+     * Internal Reality.
+     */
+    innerValue?: string;
+    /**
+     * Lista de opções para seleção
+     */
+    options: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+    /**
+     * Se verdadeiro, o select estará desabilitado
+     */
+    disabled: boolean;
+    /**
+     * Estado interno para controlar o foco
+     */
+    isFocused: boolean;
+    /**
+     * Estado interno calculado (default, selected, focused, filled, disabled)
+     */
+    private currentState;
+    /**
+     * Evento emitido quando o valor é alterado
+     */
+    voaSelectChange: EventEmitter<string>;
+    componentWillLoad(): void;
+    syncValue(val: string): void;
+    /**
+     * Atualiza o estado interno baseado nas props
+     */
+    updateState(): void;
+    /**
+     * Verifica se há valor selecionado
+     */
+    private hasValue;
+    /**
+     * Verifica se há valor selecionado (para estado selected)
+     */
+    private hasSelectedValue;
+    /**
+     * Manipula mudança de valor no select-base
+     */
+    private handleChange;
+    /**
+     * Listen to focus event on the internal button
+     */
+    handleFocus(): void;
+    /**
+     * Listen to blur event on the internal button
+     */
+    handleBlur(): void;
+    /**
+     * Método para delegar foco ao elemento interno do select.
+     * Requerido para acessibilidade WCAG 2.2 AA.
+     */
+    setFocus(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/voa-select/voa-select.stories.d.ts

@@ -0,0 +1,100 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-select.external.css';
+/**
+ * Componente Select do Voa Design System.
+ * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=607-1011&m=dev
+ * * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais são aplicados externamente via CSS Parts API usando design tokens.
+ */
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+        actions: {
+            handles: string[];
+        };
+    };
+    render: (args: any) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        type: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        onDsChange: {
+            action: string;
+        };
+        label: {
+            control: "text";
+        };
+        showLabel: {
+            control: "boolean";
+        };
+        info: {
+            control: "boolean";
+        };
+        infoMessage: {
+            control: "text";
+        };
+        error: {
+            control: "boolean";
+        };
+        errorMessage: {
+            control: "text";
+        };
+        placeholder: {
+            control: "text";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        hasIcon: {
+            control: "boolean";
+        };
+        value: {
+            control: "object";
+        };
+        options: {
+            control: "object";
+        };
+    };
+    args: {
+        type: string;
+        label: string;
+        showLabel: boolean;
+        info: boolean;
+        infoMessage: string;
+        error: boolean;
+        errorMessage: string;
+        placeholder: string;
+        disabled: boolean;
+        hasIcon: boolean;
+        options: {
+            value: string;
+            label: string;
+        }[];
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const SimpleDefault: Story;
+export declare const SimpleSelected: Story;
+export declare const SimpleFilled: Story;
+export declare const SimpleFocused: Story;
+export declare const SimpleDisabled: Story;
+export declare const MultiDefault: Story;
+export declare const MultiSelected: Story;
+export declare const MultiFilled: Story;
+export declare const MultiFocused: Story;
+export declare const MultiDisabled: Story;
+export declare const WithIcon: Story;
+export declare const MultiWithIcon: Story;
+export declare const WithInfo: Story;
+export declare const WithError: Story;
+export declare const MultiWithError: Story;
+export declare const AllStates: Story;
+export declare const Usage: Story;

package/dist/types/components/voa-skeleton/skeleton.d.ts

@@ -0,0 +1,7 @@
+export declare class Skeleton {
+    width: string;
+    height: string;
+    variant: "text" | "circle";
+    handleClass(): string;
+    render(): any;
+}

package/dist/types/components/voa-skeleton/skeleton.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const Circle: any;
+export declare const Exemple: any;

package/dist/types/components/voa-stepper/stepper.d.ts

@@ -0,0 +1,9 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+export declare class Stepper {
+    steps: string[];
+    currentStep: number;
+    activeStep: number;
+    stepChanged: EventEmitter<number>;
+    goToStep(step: number): void;
+    render(): any;
+}

package/dist/types/components/voa-stepper/stepper.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from "@storybook/web-components";
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;

package/dist/types/components/voa-switch/voa-switch.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class VoaSwitch {
+    host: HTMLVoaSwitchElement;
+    internals: ElementInternals;
+    /**
+     * Internal state to handle "uncontrolled" usage while keeping props immutable
+     */
+    internalChecked: boolean;
+    checked: boolean;
+    disabled: boolean;
+    showLabel: boolean;
+    name: string;
+    value: string;
+    dsChange: EventEmitter<boolean>;
+    componentWillLoad(): void;
+    checkedChanged(newValue: boolean): void;
+    /**
+     * Reflects the current state to the Host element for CSS attribute selectors
+     */
+    private reflectStateToHost;
+    /**
+     * Syncs with the native Form API
+     */
+    private updateFormValue;
+    private handleClick;
+    private handleKeyDown;
+    render(): any;
+}