voa-ds-core 1.0.3

package/dist/types/components/voa-breadcrumbs-divider/voa-breadcrumbs-divider.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Componente de divisor para breadcrumbs.
+ * Baseado no design do Figma (node-id: 443-9825).
+ *
+ * O componente segue o padrão "unstyled" - apenas estrutura e lógica.
+ * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O container interno do divisor
+ * @part icon - O container do ícone SVG
+ */
+export declare class VoaBreadcrumbsDivider {
+    /**
+     * Tipo de ícone a ser exibido como divisor.
+     * Mapeia as variantes do Figma: chevron, arrow, arrow-alt.
+     */
+    icon: 'chevron' | 'arrow' | 'arrow-alt';
+    private getIconComponent;
+    render(): any;
+}

package/dist/types/components/voa-breadcrumbs-item/voa-breadcrumbs-item.d.ts

@@ -0,0 +1,17 @@
+export declare class VoaBreadcrumbsItem {
+    host: HTMLElement;
+    /**
+     * HREF destination. If provided, renders an anchor tag.
+     * If missing, renders a span (current page or static item).
+     */
+    href?: string;
+    /**
+     * Target for the link (e.g., _blank)
+     */
+    target?: string;
+    /**
+     * Is this the current/active page?
+     */
+    active: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,69 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Botão principal do Voa Design System, baseado no design do Figma.
+ *
+ * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O elemento raiz do botão (elemento <button>)
+ * @part label - O wrapper do texto do botão
+ * @part icon-leading - Container do slot para ícone à esquerda
+ * @part icon-trailing - Container do slot para ícone à direita
+ */
+export declare class VoaButton {
+    host: HTMLVoaButtonElement;
+    /**
+     * Variante visual do botão.
+     * Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.
+     */
+    variant: 'primary' | 'secondary' | 'tonal' | 'ghost' | 'link';
+    /**
+     * Tamanho do botão.
+     * Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Se verdadeiro, o botão estará desabilitado.
+     */
+    disabled: boolean;
+    /**
+     * Se verdadeiro, o botão exibe um estado de carregamento (spinner)
+     * e desabilita interações.
+     */
+    loading: boolean;
+    /**
+     * O texto exibido no botão.
+     * Pode ser fornecido via prop ou via slot padrão.
+     */
+    label?: string;
+    /**
+     * Rótulo ARIA para acessibilidade.
+     * Usado quando o botão não tem texto visível (apenas ícone).
+     */
+    ariaLabel: string;
+    /**
+     * Tipo do botão HTML.
+     * Padrão é 'button' para evitar submissão de formulários.
+     */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * Evento emitido ao clicar no botão.
+     * Segue o padrão kebab-case: dsClick.
+     */
+    dsClick: EventEmitter<void>;
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno nativo.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Handler para clique no botão.
+     */
+    private handleClick;
+    /**
+     * Handler para navegação por teclado (WCAG 2.2 AA).
+     * Suporta Enter, Space para ativar, e Escape para cancelar (se aplicável).
+     */
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,78 @@
+import type { StoryObj } from "@storybook/web-components";
+import '../../Stories/styles/voa-button.external.css';
+/**
+ * Componente Button do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=515-327
+ *
+ * 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;
+        };
+    };
+    render: (args: import("@storybook/web-components").Args) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+        };
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        loading: {
+            control: "boolean";
+            description: string;
+        };
+        ariaLabel: {
+            control: "text";
+            description: string;
+        };
+    };
+    args: {
+        label: string;
+        variant: string;
+        size: string;
+        disabled: boolean;
+        loading: boolean;
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tonal: Story;
+export declare const Ghost: Story;
+export declare const Link: Story;
+export declare const Large: Story;
+export declare const Medium: Story;
+export declare const Small: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const DisabledSecondary: Story;
+export declare const DisabledTonal: Story;
+export declare const DisabledGhost: Story;
+export declare const DisabledLink: Story;
+export declare const WithLeadingIcon: Story;
+export declare const WithTrailingIcon: Story;
+export declare const WithBothIcons: Story;
+export declare const IconOnly: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,3 @@
+export declare class VoaCard {
+    render(): any;
+}

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-card.external.css';
+/**
+ * Componente Card do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System
+ *
+ * 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.
+ *
+ * ## Slots
+ * - \`header\`: Conteúdo do cabeçalho do card.
+ * - \`default\`: Conteúdo principal do card.
+ * - \`footer\`: Conteúdo do rodapé do card.
+ *
+ * ## CSS Parts
+ * - \`base\`: Container principal.
+ * - \`header\`: Container do cabeçalho.
+ * - \`body\`: Container do corpo.
+ * - \`footer\`: Container do rodapé.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Simple: Story;
+export declare const WithHeaderOnly: Story;
+export declare const WithFooterOnly: Story;
+export declare const RichContent: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type CheckboxState = 'active' | 'inactive' | 'indeterminate';
+/**
+ * Componente de checkbox que segue o design system VOA.
+ *
+ * O componente segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O elemento raiz do checkbox (elemento <div> no container)
+ * @part indicator - O indicador visual do checkbox (caixa customizada)
+ * @part label - O wrapper do texto do label
+ *
+ * @slot default - Conteúdo do label do checkbox
+ */
+export declare class VoaCheckbox {
+    host: HTMLVoaCheckboxElement;
+    internals: ElementInternals;
+    /**
+     * Internal state to handle "uncontrolled" usage while keeping props immutable
+     */
+    internalState: CheckboxState;
+    /**
+     * State of the checkbox.
+     * active = checked
+     * inactive = unchecked
+     * indeterminate = partial/mixed
+     */
+    state: CheckboxState;
+    /**
+     * Se o checkbox está desabilitado.
+     */
+    disabled: boolean;
+    /**
+     * Se o label deve ser exibido.
+     */
+    showLabel: boolean;
+    /**
+     * Nome do checkbox para formulários.
+     */
+    name: string;
+    /**
+     * Valor do checkbox para formulários.
+     */
+    value: string;
+    /**
+     * Emitido quando o estado do checkbox muda.
+     * Segue o padrão kebab-case: dsChange.
+     */
+    dsChange: EventEmitter<CheckboxState>;
+    componentWillLoad(): void;
+    /**
+     * Atualiza o estado interno e sincroniza com o Form Internals API
+     */
+    stateChanged(newValue: CheckboxState): void;
+    /**
+     * Watch changes to internal state and update the reflected prop for CSS selectors
+     */
+    internalStateChanged(): void;
+    /**
+     * Syncs with the native Form API and Accessibility Tree
+     */
+    private updateFormInternals;
+    /**
+     * Handler para clique no checkbox.
+     */
+    private handleClick;
+    /**
+     * Handler para navegação por teclado (WCAG 2.2 AA).
+     * Suporta Space para alternar estado.
+     */
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,126 @@
+import type { StoryObj } from '@storybook/web-components';
+import './voa-checkbox.default-theme.css';
+import '../../Stories/styles/voa-checkbox.external.css';
+/**
+ * Componente Checkbox do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=429-677
+ *
+ * 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.
+ */
+interface CheckboxArgs {
+    state: 'active' | 'inactive' | 'indeterminate';
+    disabled: boolean;
+    showLabel: boolean;
+    name?: string;
+    value?: string;
+    label?: string;
+    onDsChange?: (e: CustomEvent) => void;
+}
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    render: (args: CheckboxArgs) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        state: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        showLabel: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        name: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        label: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onDsChange: {
+            action: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        state: "inactive";
+        disabled: false;
+        showLabel: true;
+        label: string;
+    };
+};
+export default meta;
+type Story = StoryObj<CheckboxArgs>;
+export declare const Default: Story;
+export declare const Active: Story;
+export declare const Indeterminate: Story;
+export declare const Disabled: Story;
+export declare const WithoutLabel: Story;
+export declare const WithNameAndValue: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,6 @@
+export declare class DatePicker {
+    value: string;
+    selectedDate: string;
+    private handleDateChange;
+    render(): any;
+}

package/dist/types/components/voa-datepicker/datepicker.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-drawer/drawer.d.ts

@@ -0,0 +1,6 @@
+export declare class Drawer {
+    open: boolean;
+    isOpen: boolean;
+    toggleDrawer: () => void;
+    render(): any;
+}

package/dist/types/components/voa-drawer/drawer.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-dropdown/dropdown.d.ts

@@ -0,0 +1,8 @@
+export declare class Dropdown {
+    options: string[];
+    isOpen: boolean;
+    selected: string;
+    toggleDropdown: () => void;
+    selectOption: (option: string) => void;
+    render(): any;
+}

package/dist/types/components/voa-dropdown/dropdown.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-input/voa-input.d.ts

@@ -0,0 +1,153 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Componente de input para entrada de dados do Voa Design System.
+ *
+ * Baseado no design do Figma, seguindo o padrão "unstyled" (headless).
+ * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O elemento raiz do componente
+ * @part title-row - Container do titulo (label + info)
+ * @part label - O elemento de label
+ * @part info - Container da informacao adicional
+ * @part info-icon - O ícone de informação
+ * @part container - O wrapper do input (border, background)
+ * @part input - O elemento input nativo
+ * @part prefix - O wrapper do slot prefix
+ * @part suffix - O wrapper do slot suffix
+ * @part helper-text - O elemento de texto auxiliar/erro
+ */
+export declare class VoaInput {
+    host: HTMLVoaInputElement;
+    /**
+     * ID do elemento input
+     */
+    inputId?: string;
+    /**
+     * Tipo do input (text, password, email, search, tel, etc.)
+     */
+    type: string;
+    /**
+     * Nome do elemento input
+     */
+    name?: string;
+    /**
+     * Valor do input
+     */
+    value?: string;
+    /**
+     * Texto de placeholder
+     */
+    placeholder?: string;
+    /**
+     * Texto do label
+     */
+    label?: string;
+    /**
+     * Texto auxiliar ou mensagem de erro
+     */
+    helperText?: string;
+    /**
+     * Indica se o campo está em estado de erro
+     */
+    error: boolean;
+    /**
+     * Indica se o campo está em estado de sucesso
+     */
+    valid: boolean;
+    /**
+     * Indica se o campo está em estado de aviso
+     */
+    warning: boolean;
+    /**
+     * Indica se o campo está desabilitado
+     */
+    disabled: boolean;
+    /**
+     * Indica se o campo é somente leitura
+     */
+    readonly: boolean;
+    /**
+     * Indica se o campo é obrigatório
+     */
+    required: boolean;
+    /**
+     * Variante de preenchimento (filled vs unfilled)
+     */
+    fill: boolean;
+    /**
+     * Tamanho do input
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Mostrar ícone de informação na área de info
+     */
+    showInfoIcon: boolean;
+    /**
+     * Estado interno que controla se o campo está em foco
+     */
+    isFocused: boolean;
+    hasPrefix: boolean;
+    hasSuffix: boolean;
+    hasInfo: boolean;
+    /**
+     * Valor interno do input
+     */
+    internalValue: string;
+    valueChanged(newValue: string): void;
+    /**
+     * Referência ao elemento input nativo
+     */
+    private inputRef?;
+    /**
+     * Evento emitido quando o valor é alterado
+     */
+    dsChange: EventEmitter<string>;
+    /**
+     * Evento emitido durante a digitação
+     */
+    dsInput: EventEmitter<string>;
+    /**
+     * Evento emitido quando o campo ganha foco
+     */
+    dsFocus: EventEmitter<FocusEvent>;
+    /**
+     * Evento emitido quando o campo perde foco
+     */
+    dsBlur: EventEmitter<FocusEvent>;
+    /**
+     * Gera um ID único se não fornecido
+     */
+    private generateId;
+    /**
+     * ID do input gerado ou fornecido
+     */
+    private inputIdValue;
+    componentWillLoad(): void;
+    private checkSlots;
+    /**
+     * Gerenciador de evento de input
+     */
+    private handleInput;
+    /**
+     * Gerenciador de evento de change
+     */
+    private handleChange;
+    /**
+     * Gerenciador de evento de focus
+     */
+    private handleFocus;
+    /**
+     * Gerenciador de evento de blur
+     */
+    private handleBlur;
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno nativo.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Handler para navegação por teclado (WCAG 2.2 AA).
+     */
+    private handleKeyDown;
+    render(): any;
+}