voa-ds-core 1.0.4

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

@@ -0,0 +1,124 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../tokens/global.css';
+import '../../Stories/styles/voa-switch.external.css';
+/**
+ * Componente Switch do 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.
+ */
+interface SwitchArgs {
+    checked: boolean;
+    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: SwitchArgs) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        checked: {
+            control: "boolean";
+            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: {
+        checked: false;
+        disabled: false;
+        showLabel: false;
+        label: string;
+    };
+};
+export default meta;
+type Story = StoryObj<SwitchArgs>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelChecked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const WithLabelDisabled: Story;
+export declare const WithNameAndValue: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class VoaTab {
+    host: HTMLVoaTabElement;
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Controlled mode active index.
+     */
+    activeIndex: number;
+    /**
+     * Event emitted when the active tab changes.
+     */
+    dsTabChange: EventEmitter<{
+        index: number;
+    }>;
+    /**
+     * Internal state for uncontrolled mode.
+     */
+    internalIndex: number;
+    handleActiveIndexChange(newValue: number): void;
+    componentDidLoad(): void;
+    /**
+     * Listens for children being added/removed from the slot.
+     */
+    private handleSlotChange;
+    /**
+     * Listens for the child emitting its click event.
+     */
+    handleTabSelected(event: CustomEvent): void;
+    private getTabs;
+    /**
+     * Updates the `state` prop of all children based on current selection.
+     * Handles the 'active' | 'default' | 'disabled' string logic.
+     */
+    private syncChildren;
+    private activateTab;
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,81 @@
+import type { StoryObj } from "@storybook/web-components";
+import '../../Stories/styles/voa-tab.external.css';
+/**
+ * Componente Tab do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=545-553
+ *
+ * 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: {
+        direction: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        itemCount: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        activeIndex: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        showBadge: {
+            control: "boolean";
+            description: string;
+        };
+        badgeCount: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        hasDisabled: {
+            control: "boolean";
+            description: string;
+        };
+        position: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+    args: {
+        direction: string;
+        itemCount: number;
+        showBadge: boolean;
+        badgeCount: number;
+        hasDisabled: boolean;
+        position: string;
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const WithNavigation: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,66 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Item individual de tab do Voa Design System.
+ * * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=366-1545
+ * * 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 item de tab
+ * @part label - Container do texto do item
+ * @part badge - Container do badge (quando showBadge=true)
+ */
+export declare class VoaTabItem {
+    host: HTMLVoaTabItemElement;
+    /**
+     * Estado do item de tab.
+     * Mapeia os estados do Figma: Active, Default, Disabled.
+     */
+    state: 'active' | 'default' | 'disabled';
+    /**
+     * Posição do indicador de ativo (borda).
+     * Mapeia as posições do Figma: Default (bottom), Top, Right, Left.
+     */
+    position: 'default' | 'top' | 'right' | 'left';
+    /**
+     * Se verdadeiro, exibe um badge no item.
+     */
+    showBadge: boolean;
+    /**
+     * Número a ser exibido no badge (opcional).
+     * Se não fornecido e showBadge=true, exibe "0".
+     */
+    badgeCount?: number;
+    /**
+     * Se verdadeiro, o item estará desabilitado.
+     * Alias para state="disabled".
+     */
+    disabled: boolean;
+    /**
+     * Índice do item (gerenciado pelo componente pai voa-tab).
+     * Usado internamente para identificação.
+     */
+    itemIndex?: number;
+    /**
+     * Evento emitido quando o tab é clicado.
+     * O pai (voa-tab) escuta isso para gerenciar a seleção.
+     */
+    tabClick: EventEmitter<void>;
+    /**
+     * Handler interno de clique.
+     */
+    private handleClick;
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Determina o estado efetivo do componente.
+     * Se disabled=true, força state="disabled".
+     */
+    private getEffectiveState;
+    /**
+     * Determina o valor do badge a ser exibido.
+     */
+    private getBadgeValue;
+    render(): any;
+}

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

@@ -0,0 +1,5 @@
+export declare class Table {
+    data: any[];
+    columns: string[];
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+/**
+ * Tag component para exibir labels categorizadores, status ou metadados.
+ * Baseado no design do Figma (node-id: 1436-769).
+ *
+ * O componente segue o padrão "headless/unstyled" - apenas estrutura e lógica.
+ * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.
+ *
+ * @part base - O container principal do tag
+ * @part label - O wrapper do texto
+ * @part icon-start - Container do ícone à esquerda (slot para variante icons)
+ * @part icon-end - Container do ícone à direita (slot para variante icons)
+ */
+export declare class VoaTag {
+    host: HTMLElement;
+    /**
+     * O texto a ser exibido no tag
+     */
+    label?: string;
+    /**
+     * A variante do tag
+     */
+    variant: 'plain' | 'icons';
+    /**
+     * Forma do tag
+     */
+    shape: 'default' | 'pill';
+    /**
+     * Tamanho do tag
+     */
+    size: 'sm' | 'md';
+    /**
+     * Exibe o ícone à esquerda (apenas se variant="icons")
+     */
+    iconLeft: boolean;
+    /**
+     * Exibe o ícone à direita (apenas se variant="icons")
+     */
+    iconRight: boolean;
+    render(): any;
+}

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

@@ -0,0 +1,66 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-tag.external.css';
+/**
+ * **VoaTag**
+ * A static component for categorization labels and status indicators.
+ *
+ * CSS Parts:
+ * - `base`: The main container
+ * - `label`: Text wrapper
+ * - `icon-start`: Left icon wrapper
+ * - `icon-end`: Right icon wrapper
+ */
+declare const meta: {
+    title: string;
+    component: string;
+    tags: string[];
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        variant: {
+            control: "radio";
+            options: string[];
+            description: string;
+        };
+        shape: {
+            control: "radio";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "radio";
+            options: string[];
+        };
+        iconLeft: {
+            control: "boolean";
+        };
+        iconRight: {
+            control: "boolean";
+        };
+    };
+    args: {
+        label: string;
+        variant: string;
+        shape: string;
+        size: string;
+        iconLeft: boolean;
+        iconRight: boolean;
+    };
+    render: (args: import("@storybook/web-components").Args) => import("lit-html").TemplateResult<1>;
+};
+export default meta;
+export declare const Default: StoryObj;
+export declare const PillShape: StoryObj;
+export declare const WithStartIcon: StoryObj;
+export declare const WithEndIcon: StoryObj;
+export declare const WithBothIcons: StoryObj;
+export declare const Small: StoryObj;
+export declare const AllVariants: StoryObj;
+export declare const Usage: StoryObj;

package/dist/types/components/voa-text-area/voa-text-area.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Componente de área de texto para entrada de textos longos
+ * @part base - The root host element
+ * @part container - The resizable wrapper
+ * @part textarea - The native textarea
+ */
+export declare class VoaTextArea {
+    host: HTMLVoaTextAreaElement;
+    internals: ElementInternals;
+    textareaId?: string;
+    name?: string;
+    label?: string;
+    info?: boolean;
+    infoText?: string;
+    placeholder?: string;
+    value?: string;
+    maxLength?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    rows?: number;
+    cols?: number;
+    errorMessage?: string;
+    hasError?: boolean;
+    internalValue: string;
+    isFocused: boolean;
+    characterCount: number;
+    private uniqueId;
+    private containerRef?;
+    voaChange: EventEmitter<string>;
+    voaInput: EventEmitter<string>;
+    voaFocus: EventEmitter<FocusEvent>;
+    voaBlur: EventEmitter<FocusEvent>;
+    componentWillLoad(): void;
+    valueChanged(newValue: string): void;
+    private updateFormInternals;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    setFocus(): Promise<void>;
+    private startResize;
+    private renderInfoIcon;
+    private renderResizeIcon;
+    render(): any;
+}

package/dist/types/components/voa-text-area/voa-text-area.stories.d.ts

@@ -0,0 +1,74 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-text-area.external.css';
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        placeholder: {
+            control: "text";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        readonly: {
+            control: "boolean";
+        };
+        required: {
+            control: "boolean";
+        };
+        hasError: {
+            control: "boolean";
+        };
+        errorMessage: {
+            control: "text";
+        };
+        maxLength: {
+            control: "number";
+        };
+        info: {
+            control: "boolean";
+        };
+        infoText: {
+            control: "text";
+        };
+        value: {
+            control: "text";
+        };
+        rows: {
+            control: "number";
+        };
+        cols: {
+            control: "number";
+        };
+    };
+    args: {
+        label: string;
+        placeholder: string;
+        disabled: boolean;
+        readonly: boolean;
+        required: boolean;
+        hasError: boolean;
+        errorMessage: string;
+        maxLength: number;
+        info: boolean;
+        infoText: string;
+        value: string;
+        rows: number;
+        cols: number;
+    };
+    component: string;
+};
+export default meta;
+export declare const Default: StoryObj;
+export declare const Filled: StoryObj;
+export declare const WithMaxLength: StoryObj;
+export declare const WithInfoAndMaxLength: StoryObj;
+export declare const Disabled: StoryObj;
+export declare const ReadOnly: StoryObj;
+export declare const Required: StoryObj;
+export declare const WithError: StoryObj;
+export declare const CustomSized: StoryObj;
+export declare const Usage: StoryObj;

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

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

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

@@ -0,0 +1,54 @@
+/**
+ * Tooltip component 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 tooltip
+ * @part body - Container do conteúdo (background, border, padding). O triângulo é criado via pseudo-elementos ::before e ::after
+ * @part icon-slot - Container do ícone opcional
+ * @part content - Container do texto
+ *
+ * @example
+ * <voa-tooltip position="top" theme="spot" text="Hello World">
+ *   <span slot="icon">⚠️</span>
+ * </voa-tooltip>
+ */
+export declare class VoaTooltip {
+    host: HTMLVoaTooltipElement;
+    isVisible: boolean;
+    /**
+     * Posição da seta do tooltip.
+     * Mapeia as posições do Figma: top, bottom, left, right.
+     */
+    position: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Tema de cor do tooltip.
+     * Mapeia os temas do Figma: default, spot, pink, grape, violet, indigo, blue, cyan, teal, lime, orange.
+     */
+    theme: 'default' | 'spot' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'teal' | 'lime' | 'orange';
+    /**
+     * Se verdadeiro, exibe o slot de ícone.
+     * Baseado na prop `icon` do design do Figma.
+     */
+    icon: boolean;
+    /**
+     * Texto do tooltip.
+     * Pode ser fornecido via prop ou via slot padrão.
+     */
+    text: string;
+    /**
+     * Rótulo ARIA para acessibilidade.
+     * Usado para descrever o tooltip para leitores de tela.
+     */
+    ariaLabel: string;
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno.
+     */
+    setFocus(): Promise<void>;
+    private showTooltip;
+    private hideTooltip;
+    componentDidLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-tooltip.external.css';
+import type { VoaTooltip } from './voa-tooltip';
+declare const meta: Meta<VoaTooltip>;
+export default meta;
+type Story = StoryObj<VoaTooltip>;
+export declare const Playground: Story;
+export declare const BottomDefault: Story;
+export declare const BottomSpot: Story;
+export declare const BottomPink: Story;
+export declare const BottomGrape: Story;
+export declare const BottomViolet: Story;
+export declare const BottomIndigo: Story;
+export declare const BottomBlue: Story;
+export declare const BottomCyan: Story;
+export declare const BottomTeal: Story;
+export declare const BottomLime: Story;
+export declare const BottomOrange: Story;
+export declare const TopDefault: Story;
+export declare const TopSpot: Story;
+export declare const TopPink: Story;
+export declare const LeftDefault: Story;
+export declare const LeftSpot: Story;
+export declare const RightDefault: Story;
+export declare const RightSpot: Story;
+export declare const WithoutIcon: Story;
+export declare const CustomText: Story;
+/**
+ * ## Theming (CSS Parts)
+ *
+ * Este componente é "unstyled" e pode ser estilizado usando CSS Custom Properties
+ * (de `@voa-ds/tokens`) direcionando os seguintes seletores CSS `::part()`:
+ *
+ * | Part Name | Description |
+ * | :--- | :--- |
+ * | `base` | O elemento raiz do tooltip |
+ * | `body` | Container do conteúdo (background, border, padding) |
+ * | `icon-slot` | Container do ícone opcional |
+ * | `content` | Container do texto |
+ * | `arrow` | Elemento da seta (subcomponente voa-tooltip-arrow) |
+ *
+ * **Exemplo de estilização:**
+ *
+ * \`\`\`css
+ * voa-tooltip::part(body) {
+ *   background-color: var(--tooltip-default-bg);
+ *   border: 1.5px solid var(--tooltip-default-border);
+ *   border-radius: var(--radius-sm);
+ *   padding: var(--spacing-spacing-sm) var(--spacing-spacing-rg);
+ * }
+ *
+ * voa-tooltip[theme="spot"]::part(body) {
+ *   background-color: var(--tooltip-spot-bg);
+ *   border-color: var(--tooltip-spot-border);
+ * }
+ *
+ * voa-tooltip::part(content) {
+ *   color: var(--tooltip-default-text);
+ *   font-family: var(--font-family-sans);
+ *   font-size: 14px;
+ *   line-height: 16px;
+ * }
+ *
+ * voa-tooltip::part(arrow) {
+ *   --arrow-color: var(--tooltip-default-bg);
+ * }
+ * \`\`\`
+ */
+export declare const Usage: Story;