voa-ds-core 1.0.3

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

@@ -0,0 +1,140 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-input.external.css';
+import '../../Stories/styles/voa-input-addon.external.css';
+interface InputArgs {
+    inputId?: string;
+    type?: string;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    helperText?: string;
+    error?: boolean;
+    valid?: boolean;
+    warning?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    fill?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    showInfoIcon?: boolean;
+    infoContent?: string;
+    prefixContent?: string;
+    suffixContent?: string;
+    onDsChange?: (e: CustomEvent) => void;
+    onDsInput?: (e: CustomEvent) => void;
+    onDsFocus?: (e: CustomEvent) => void;
+    onDsBlur?: (e: CustomEvent) => void;
+}
+/**
+ * Componente Input do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=437-2006
+ *
+ * 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: InputArgs) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        inputId: {
+            control: "text";
+        };
+        type: {
+            control: "select";
+            options: string[];
+        };
+        name: {
+            control: "text";
+        };
+        value: {
+            control: "text";
+        };
+        placeholder: {
+            control: "text";
+        };
+        label: {
+            control: "text";
+        };
+        helperText: {
+            control: "text";
+        };
+        error: {
+            control: "boolean";
+        };
+        valid: {
+            control: "boolean";
+        };
+        warning: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        readonly: {
+            control: "boolean";
+        };
+        required: {
+            control: "boolean";
+        };
+        fill: {
+            control: "boolean";
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        showInfoIcon: {
+            control: "boolean";
+        };
+        infoContent: {
+            control: "text";
+            description: string;
+        };
+        onDsChange: {
+            action: string;
+        };
+        onDsInput: {
+            action: string;
+        };
+        onDsFocus: {
+            action: string;
+        };
+        onDsBlur: {
+            action: string;
+        };
+    };
+    args: {
+        type: string;
+        placeholder: string;
+        value: string;
+        disabled: false;
+        readonly: false;
+        required: false;
+        error: false;
+        valid: false;
+        warning: false;
+        fill: true;
+        size: "md";
+        showInfoIcon: true;
+    };
+};
+export default meta;
+type Story = StoryObj<InputArgs>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Sizes: Story;
+export declare const ValidationStates: Story;
+export declare const InputFieldDefault: Story;
+export declare const WithInfoText: Story;
+export declare const WithPrefixAndSuffix: Story;
+export declare const IntegrationWithAddon: Story;
+export declare const Usage: Story;

package/dist/types/components/voa-input-addon/voa-input-addon.d.ts

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Componente Input-Addon para elementos auxiliares em inputs.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
+ *
+ * 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 addon
+ * @part content - O conteúdo do addon
+ * @part icon - O ícone (quando aplicável)
+ * @part text - O texto do addon
+ * @part dropdown-icon - O ícone de dropdown (quando aplicável)
+ */
+export declare class VoaInputAddon {
+    host: HTMLElement;
+    /**
+     * Variante do addon
+     */
+    variant: 'label' | 'select' | 'flags' | 'button' | 'clear' | 'shortcut' | 'currency-pre' | 'currency-post';
+    /**
+     * Texto do label/prepend (para variantes label, select)
+     */
+    prependContent?: string;
+    /**
+     * Código do país (para variante flags)
+     */
+    countryCode?: string;
+    /**
+     * Texto do botão (para variante button)
+     */
+    buttonLabel?: string;
+    /**
+     * Símbolo da moeda (para variante currency-pre)
+     */
+    currency?: string;
+    /**
+     * Nome da moeda (para variante currency-post)
+     */
+    currencyName?: string;
+    /**
+     * Tecla do atalho (para variante shortcut)
+     */
+    shortcut?: string;
+    /**
+     * Plataforma do atalho (para variante shortcut)
+     */
+    platform?: 'mac' | 'win';
+    /**
+     * Evento emitido quando o addon é clicado (para variantes interativas)
+     */
+    dsClick: EventEmitter<void>;
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno nativo.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Handler para clique no addon
+     */
+    private handleClick;
+    /**
+     * Handler para navegação por teclado (WCAG 2.2 AA).
+     */
+    private handleKeyDown;
+    render(): any;
+    private getAriaLabel;
+    private renderContent;
+}

package/dist/types/components/voa-input-addon/voa-input-addon.stories.d.ts

@@ -0,0 +1,139 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-input-addon.external.css';
+/**
+ * Componente Input-Addon do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=438-2157
+ *
+ * Usado como elemento auxiliar em inputs, podendo ser inserido nos slots prefix ou suffix.
+ */
+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: {
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        prependContent: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        countryCode: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        buttonLabel: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        currency: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        currencyName: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        shortcut: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        platform: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        variant: string;
+        prependContent: string;
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Playground: Story;
+export declare const Label: Story;
+export declare const Select: Story;
+export declare const Flags: Story;
+export declare const Button: Story;
+export declare const Clear: Story;
+export declare const Shortcut: Story;
+export declare const CurrencyPre: Story;
+export declare const CurrencyPost: Story;
+export declare const LabelVariations: Story;
+export declare const CountryCodes: Story;
+export declare const Shortcuts: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,22 @@
+/**
+ * Componente Keybinding para exibir atalhos de teclado.
+ *
+ * Baseado no design do Figma, usado como subcomponente do input-addon.
+ * Segue o padrão "unstyled" (headless), fornecendo apenas estrutura e lógica.
+ *
+ * @part base - O elemento raiz do keybinding
+ * @part key-icon - O ícone da tecla modificadora (⌘ ou Ctrl)
+ * @part key-text - O texto da tecla
+ */
+export declare class VoaKeybinding {
+    host: HTMLElement;
+    /**
+     * A tecla do atalho (ex: "S", "K", "Enter")
+     */
+    shortcut: string;
+    /**
+     * Plataforma do atalho (mac ou win)
+     */
+    platform: 'mac' | 'win';
+    render(): any;
+}

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

@@ -0,0 +1,58 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-keybinding.external.css';
+/**
+ * Componente Keybinding do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=439-2322
+ *
+ * Subcomponente usado pelo input-addon para exibir atalhos de teclado.
+ */
+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: {
+        shortcut: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        platform: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        shortcut: string;
+        platform: string;
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Playground: Story;
+export declare const Mac: Story;
+export declare const Windows: Story;
+export declare const DifferentKeys: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,5 @@
+export declare class Link {
+    href: string;
+    target: string;
+    render(): any;
+}

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

@@ -0,0 +1,4 @@
+export declare class List {
+    items: string[];
+    render(): any;
+}

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

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

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

@@ -0,0 +1,58 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Componente Option do Voa Design System - Radio Button Pattern
+ *
+ * Acts as a standalone radio option that can be used in a radio group.
+ * Manages internal checked state and syncs with Native Form API via ElementInternals.
+ *
+ * @part base - Root container with flex layout
+ * @part indicator - Outer radio circle container
+ * @part indicator-dot - Inner dot (visible when checked)
+ * @part label - Label text wrapper
+ *
+ * CSS Parts allow external styling via ::part() selectors using design tokens.
+ * Supports delegated focus for better accessibility.
+ */
+export declare class VoaOption {
+    host: HTMLVoaOptionElement;
+    internals: ElementInternals;
+    /**
+     * Internal state for the checked status.
+     * Synced from the checked prop via @Watch.
+     */
+    internalChecked: boolean;
+    /**
+     * If true, this option is selected.
+     */
+    checked: boolean;
+    /**
+     * If true, this option is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The label text displayed next to the radio indicator.
+     * If not provided, only the indicator is shown.
+     */
+    label?: string;
+    /**
+     * The name attribute for the radio group.
+     */
+    name: string;
+    /**
+     * The value returned when this option is selected.
+     */
+    value: string;
+    /**
+     * Emitted when the user selects this option.
+     */
+    dsChange: EventEmitter<string>;
+    componentWillLoad(): void;
+    checkedChanged(newValue: boolean): void;
+    /**
+     * Syncs with Native Form API
+     */
+    private updateFormInternals;
+    private handleClick;
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,114 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-option.external.css';
+interface OptionArgs {
+    checked: boolean;
+    disabled: boolean;
+    label: string;
+    name: string;
+    value: string;
+    onDsChange?: (e: CustomEvent) => void;
+}
+/**
+ * **Option Component**
+ *
+ * Acts as a Radio Button. Should be used within a group logic.
+ *
+ * This is a standalone radio option component that manages its own checked state
+ * and syncs with the Native Form API via ElementInternals.
+ *
+ * Baseado no design do Figma:
+ * https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=442-9725
+ */
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    render: (args: OptionArgs) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        checked: {
+            control: "boolean";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        label: {
+            control: "text";
+            description: string;
+        };
+        name: {
+            control: "text";
+            description: string;
+        };
+        value: {
+            control: "text";
+            description: string;
+        };
+        onDsChange: {
+            action: string;
+            description: string;
+        };
+    };
+    args: {
+        checked: false;
+        disabled: false;
+        label: string;
+        name: string;
+        value: string;
+    };
+};
+export default meta;
+type Story = StoryObj<OptionArgs>;
+/**
+ * Default unchecked option with label
+ */
+export declare const Default: Story;
+/**
+ * Checked option
+ */
+export declare const Checked: Story;
+/**
+ * Disabled option
+ */
+export declare const Disabled: Story;
+/**
+ * Disabled and checked
+ */
+export declare const DisabledChecked: Story;
+/**
+ * Without label
+ */
+export declare const WithoutLabel: Story;
+/**
+ * Interactive radio group demo
+ */
+export declare const RadioGroupDemo: Story;
+/**
+ * All visual states grid
+ */
+export declare const AllStates: Story;
+/**
+ * Todas as variantes do Figma organizadas em grid
+ * Estados: default, hover, focused, disabled × Active: checked/unchecked × Label: com/sem
+ */
+export declare const AllVariants: Story;
+/**
+ * Grupo de opções interativas
+ */
+export declare const Group: Story;
+/**
+ * Estados visuais organizados
+ */
+export declare const VisualStates: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,23 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class VoaPaginationItem {
+    host: HTMLElement;
+    /**
+     * The type of item to render.
+     * - page: A standard page number
+     * - ellipsis: The "..." separator
+     * - prev/next: Navigation arrows
+     */
+    type: 'page' | 'ellipsis' | 'prev' | 'next';
+    /**
+     * Is this the current active page?
+     */
+    active: boolean;
+    /**
+     * Is this item disabled?
+     */
+    disabled: boolean;
+    itemClick: EventEmitter<void>;
+    private handleClick;
+    private renderIcon;
+    render(): any;
+}

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

@@ -0,0 +1,21 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+export declare class VoaPagination {
+    currentPage: number;
+    totalPages: number;
+    /**
+     * How many siblings to show around the current page.
+     * E.g., siblingCount=1 means: ... 4 [5] 6 ...
+     */
+    siblingCount: number;
+    voaPageChange: EventEmitter<number>;
+    internalPage: number;
+    handlePageChange(val: number): void;
+    componentWillLoad(): void;
+    private onPageClick;
+    /**
+     * THE ALGORITHM:
+     * Generates the range of numbers to display.
+     */
+    private getPaginationRange;
+    render(): any;
+}