voa-ds-core 1.0.3

package/dist/types/Stories/SaasDashboard.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './styles/saas-dashboard.css';
+import './styles/voa-button.external.css';
+import './styles/voa-input.external.css';
+import './styles/voa-select.external.css';
+import './styles/voa-pagination.external.css';
+import './styles/voa-badge.external.css';
+import './styles/voa-avatar.external.css';
+import './styles/voa-breadcrumbs.external.css';
+import './styles/voa-tab.external.css';
+import './styles/voa-switch.external.css';
+import './styles/voa-tooltip.external.css';
+import './styles/voa-checkbox.external.css';
+import './styles/voa-radio.external.css';
+import './styles/voa-tag.external.css';
+import './styles/voa-text-area.external.css';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Dashboard: Story;
+export declare const CompactView: Story;
+export declare const DataEntryForm: Story;

package/dist/types/Stories/styles/voa-radio.styles.d.ts

@@ -0,0 +1 @@
+export declare const voaRadioStyles: import("lit").CSSResult;

package/dist/types/components/GetStarted/AddingNewBrand.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/GetStarted/ComoUsar.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/GetStarted/GetStarted.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/SaasDashboard/SaasDashboard.stories.d.ts

@@ -0,0 +1,17 @@
+import '../../Stories/styles/voa-button.external.css';
+import '../../Stories/styles/voa-input.external.css';
+import '../../Stories/styles/voa-avatar.external.css';
+import '../../Stories/styles/voa-badge.external.css';
+import '../../Stories/styles/voa-pagination.external.css';
+import '../../Stories/styles/voa-tag.external.css';
+import '../../Stories/styles/voa-breadcrumbs.external.css';
+import '../../Stories/styles/voa-switch.external.css';
+import '../../Stories/styles/voa-tooltip.external.css';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Dashboard: () => import("lit-html").TemplateResult<1>;

package/dist/types/components/Theme/ThemeProvider.d.ts

@@ -0,0 +1,26 @@
+import { Theme } from "../../token/branding/type";
+type ThemeMode = 'light' | 'dark';
+type Brand = 'Devops' | 'Coi' | 'Godrive';
+type ThemeChangeCallback = () => void;
+declare class ThemeProvider {
+    private static instance;
+    private observers;
+    private theme;
+    private brand;
+    private styleSheet;
+    private constructor();
+    private initializeStyleSheet;
+    static getInstance(): ThemeProvider;
+    setTheme(theme: ThemeMode): void;
+    setBrand(brand: Brand): void;
+    getTheme(): ThemeMode;
+    getBrand(): Brand;
+    getCurrentTokens(): Theme;
+    private updateTheme;
+    registerObserver(callback: ThemeChangeCallback): void;
+    unregisterObserver(callback: ThemeChangeCallback): void;
+    private notifyObservers;
+    destroy(): void;
+}
+export declare const themeProvider: ThemeProvider;
+export {};

package/dist/types/components/Theme/generate-css-variables.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from "../../token/branding/type";
+export declare function generateCSSVariables(tokens: Theme, theme: 'light' | 'dark'): string;

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

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class VoaAccordion {
+    host: HTMLVoaAccordionElement;
+    private componentId;
+    /**
+     * If true, the accordion is expanded.
+     */
+    open: boolean;
+    /**
+     * Size variant.
+     */
+    size: 'md' | 'lg';
+    /**
+     * Shows the top divider.
+     */
+    divider: boolean;
+    /**
+     * Emitted when the user interacts with the header.
+     * Payload: the requested new state (boolean).
+     */
+    voaToggle: EventEmitter<boolean>;
+    isExpanded: boolean;
+    watchOpenHandler(newValue: boolean): void;
+    componentWillLoad(): void;
+    private handleToggle;
+    private handleKeyDown;
+    setFocus(): Promise<void>;
+    render(): any;
+}

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

@@ -0,0 +1,70 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../tokens/global.css';
+import '../../Stories/styles/voa-accordion.external.css';
+interface AccordionArgs {
+    open?: boolean;
+    size?: 'md' | 'lg';
+    divider?: boolean;
+    header?: string;
+    children?: string;
+    onAccordionToggle?: (e: CustomEvent<boolean>) => void;
+}
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    render: (args: AccordionArgs) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        open: {
+            control: "boolean";
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        divider: {
+            control: "boolean";
+            description: string;
+        };
+        header: {
+            control: "text";
+            description: string;
+        };
+        children: {
+            control: "text";
+            description: string;
+        };
+        onAccordionToggle: {
+            action: string;
+            description: string;
+        };
+    };
+    args: {
+        open: false;
+        size: "md";
+        divider: true;
+        header: string;
+        children: string;
+        onAccordionToggle: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<AccordionArgs>;
+export declare const Playground: Story;
+export declare const MediumClosedWithDivider: Story;
+export declare const MediumOpenWithDivider: Story;
+export declare const LargeClosedWithDivider: Story;
+export declare const LargeOpenWithDivider: Story;
+export declare const MediumClosedNoDivider: Story;
+export declare const MediumOpenNoDivider: Story;
+export declare const LargeClosedNoDivider: Story;
+export declare const LargeOpenNoDivider: Story;
+export declare const AllVariants: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,82 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * O componente voa-alert é usado para exibir mensagens importantes para o usuário.
+ * Pode ser de diferentes tipos (success, warning, error, info, basic) e opcionalmente dispensável.
+ * Suporta variantes default (layout vertical) e inline (layout horizontal).
+ *
+ * @part base - O elemento raiz do alerta
+ * @part content-wrapper - Wrapper do conteúdo principal
+ * @part icon - Container do ícone
+ * @part content - Container do conteúdo (slot padrão)
+ * @part title - Container do título
+ * @part description - Container da descrição
+ * @part close-button - Botão de fechar
+ * @part actions - Container dos botões de ação
+ * @part primary-btn-base - Expõe o part "base" do botão primário para estilização externa
+ * @part secondary-btn-base - Expõe o part "base" do botão secundário para estilização externa
+ */
+export declare class VoaAlert {
+    host: HTMLVoaAlertElement;
+    /**
+     * Variante do alerta: 'default' (layout vertical) ou 'inline' (layout horizontal).
+     * Padrão é 'default'.
+     */
+    variant: 'default' | 'inline';
+    /**
+     * O tipo de alerta a ser exibido. Influencia a cor e o ícone.
+     * Padrão é 'info'.
+     */
+    type: 'basic' | 'success' | 'warning' | 'warning-inline' | 'error' | 'info';
+    /**
+     * Determina se o alerta pode ser fechado pelo usuário.
+     */
+    closable: boolean;
+    /**
+     * Texto do rótulo para o botão de fechar, para acessibilidade.
+     * Padrão é "Fechar alerta".
+     */
+    closeButtonLabel: string;
+    /**
+     * Título do alerta. Quando fornecido, será exibido como título principal.
+     * Para variant inline, apenas o título é exibido.
+     */
+    alertTitle?: string;
+    /**
+     * Descrição do alerta. Apenas exibida na variante default.
+     */
+    description?: string;
+    /**
+     * Determina se os botões devem ser exibidos.
+     * Se true, os botões serão exibidos (desde que pelo menos primaryButtonText seja fornecido).
+     * Se false, os botões não serão exibidos, independente das outras props.
+     */
+    showButtons: boolean;
+    /**
+     * Texto do botão primário. Só será exibido se showButtons for true.
+     */
+    primaryButtonText?: string;
+    /**
+     * Texto do botão secundário. Só será exibido se showButtons for true e primaryButtonText também for fornecido.
+     */
+    secondaryButtonText?: string;
+    /**
+     * Evento emitido quando o alerta é dispensado (fechado).
+     */
+    voaDismiss: EventEmitter<void>;
+    /**
+     * Evento emitido quando o botão primário é clicado.
+     */
+    voaPrimaryClick: EventEmitter<void>;
+    /**
+     * Evento emitido quando o botão secundário é clicado.
+     */
+    voaSecondaryClick: EventEmitter<void>;
+    /**
+     * Método para acessibilidade WCAG 2.2 AA
+     * Delega foco ao botão de fechar se existir
+     */
+    setFocus(): Promise<void>;
+    private handleClose;
+    private renderIcon;
+    render(): any;
+}

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

@@ -0,0 +1,88 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-alert.external.css';
+/**
+ * Componente Alert do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=397-2706
+ *
+ * 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: {
+        variant: {
+            control: "radio";
+            options: string[];
+            description: string;
+        };
+        type: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        closable: {
+            control: "boolean";
+            description: string;
+        };
+        showButtons: {
+            control: "boolean";
+            description: string;
+        };
+        alertTitle: {
+            control: "text";
+            description: string;
+        };
+        description: {
+            control: "text";
+            description: string;
+        };
+        primaryButtonText: {
+            control: "text";
+            description: string;
+        };
+        secondaryButtonText: {
+            control: "text";
+            description: string;
+        };
+    };
+    args: {
+        variant: string;
+        type: string;
+        closable: boolean;
+        showButtons: boolean;
+        alertTitle: string;
+        description: string;
+        primaryButtonText: string;
+        secondaryButtonText: string;
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Basic: Story;
+export declare const Success: Story;
+export declare const Info: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const InlineBasic: Story;
+export declare const InlineSuccess: Story;
+export declare const InlineInfo: Story;
+export declare const InlineWarning: Story;
+export declare const InlineError: Story;
+export declare const Closable: Story;
+export declare const NotClosable: Story;
+export declare const WithButtons: Story;
+export declare const WithPrimaryButtonOnly: Story;
+export declare const Complete: Story;
+export declare const AllTypes: Story;
+export declare const AllTypesInline: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,48 @@
+/**
+ * Componente Avatar do Voa Design System, baseado no design do Figma.
+ * Suporta exibição de ícone, iniciais ou imagem de perfil.
+ *
+ * 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 elemento raiz do avatar (container circular)
+ * @part image - O elemento de imagem (quando type="photo" e src é fornecido)
+ * @part initials - O wrapper do texto de iniciais (quando type="initials")
+ * @part icon - O wrapper do ícone SVG padrão (quando type="icon")
+ */
+export declare class VoaAvatar {
+    host: HTMLVoaAvatarElement;
+    /**
+     * Tipo de avatar a ser exibido.
+     * - 'icon': Exibe um ícone de usuário padrão
+     * - 'photo': Exibe uma imagem (requer prop src)
+     * - 'initials': Exibe iniciais de texto (requer prop initials)
+     */
+    type: 'icon' | 'photo' | 'initials';
+    /**
+     * Tamanho do avatar.
+     * Mapeado do Figma: xs (16px), sm (24px), md (32px), lg (48px), xl (56px)
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * As iniciais a serem exibidas quando type="initials".
+     */
+    initials?: string;
+    /**
+     * URL da imagem do avatar quando type="photo".
+     */
+    src?: string;
+    /**
+     * Texto alternativo para a imagem do avatar.
+     */
+    alt?: string;
+    /**
+     * Método para acessibilidade WCAG 2.2 AA.
+     * Delega foco ao elemento interno do avatar.
+     */
+    setFocus(): Promise<void>;
+    private getAriaLabel;
+    private renderContent;
+    private renderIcon;
+    render(): any;
+}

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

@@ -0,0 +1,73 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-avatar.external.css';
+interface AvatarArgs {
+    type?: 'icon' | 'photo' | 'initials';
+    initials?: string;
+    src?: string;
+    alt?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    render: (args: AvatarArgs) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        type: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        initials: {
+            control: "text";
+            description: string;
+        };
+        src: {
+            control: "text";
+            description: string;
+        };
+        alt: {
+            control: "text";
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+    args: {
+        type: "icon";
+        size: "md";
+    };
+};
+export default meta;
+type Story = StoryObj<AvatarArgs>;
+export declare const Playground: Story;
+export declare const Icon: Story;
+export declare const Initials: Story;
+export declare const Photo: Story;
+export declare const IconExtraSmall: Story;
+export declare const IconSmall: Story;
+export declare const IconMedium: Story;
+export declare const IconLarge: Story;
+export declare const IconExtraLarge: Story;
+export declare const InitialsExtraSmall: Story;
+export declare const InitialsSmall: Story;
+export declare const InitialsMedium: Story;
+export declare const InitialsLarge: Story;
+export declare const InitialsExtraLarge: Story;
+export declare const PhotoExtraSmall: Story;
+export declare const PhotoSmall: Story;
+export declare const PhotoMedium: Story;
+export declare const PhotoLarge: Story;
+export declare const PhotoExtraLarge: Story;
+export declare const SizeGalleryWithPhotos: Story;
+export declare const SizeGalleryWithInitials: Story;
+export declare const SizeGalleryWithIcons: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,91 @@
+export interface VoaBadge {
+    /**
+     * O texto a ser exibido no badge (mapeado do Figma como "label")
+     */
+    label?: string;
+    /**
+     * O número a ser exibido como contador (para variantes indicator e indicator-overlay)
+     */
+    count?: number;
+    /**
+     * O nome do ícone a ser exibido (para variantes icon-only e icons)
+     */
+    icon?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';
+    /**
+     * A variante do badge conforme design do Figma
+     * - plain: Badge com texto apenas
+     * - icons: Badge com texto e ícones (leading/trailing)
+     * - icon-only: Badge apenas com ícone
+     * - indicator: Badge numérico (contador)
+     * - indicator-overlay: Badge numérico com fundo vermelho (danger)
+     * - indicator-only: Badge apenas indicador (ponto vermelho)
+     */
+    variant?: 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only';
+    /**
+     * Forma do badge conforme design do Figma
+     * - default: Forma retangular com bordas arredondadas
+     * - pill: Forma completamente arredondada (pill-shaped)
+     */
+    shape?: 'default' | 'pill';
+    /**
+     * Tamanho do badge conforme design do Figma
+     * - sm: Tamanho pequeno
+     * - md: Tamanho médio (padrão)
+     */
+    size?: 'sm' | 'md';
+}
+/**
+ * Badge component para exibir indicadores visuais como texto, contadores ou status.
+ * Baseado no design do Figma (node-id: 397-3352).
+ *
+ * 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 badge (onde as classes são aplicadas)
+ * @part label - O wrapper do texto (para variantes plain e icons)
+ * @part counter - O wrapper do número (para variantes indicator e indicator-overlay)
+ * @part icon-leading - Container do ícone à esquerda (para variante icons)
+ * @part icon-trailing - Container do ícone à direita (para variante icons)
+ * @part icon - Container do ícone (para variante icon-only)
+ * @part indicator - O indicador numérico ou ponto (para variantes indicator, indicator-overlay, indicator-only)
+ *
+ * @slot start - Slot para ícone no início do badge (usado em variante icons)
+ * @slot end - Slot para ícone no final do badge (usado em variante icons)
+ */
+export declare class VoaBadgeComponent implements VoaBadge {
+    host: HTMLVoaBadgeElement;
+    /**
+     * O texto a ser exibido no badge (mapeado do Figma como "label")
+     */
+    label?: string;
+    /**
+     * O número a ser exibido como contador (para variantes indicator e indicator-overlay)
+     */
+    count?: number;
+    /**
+     * O nome do ícone a ser exibido (para variantes icon-only e icons)
+     */
+    icon?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';
+    /**
+     * A variante do badge conforme design do Figma
+     */
+    variant: 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only';
+    /**
+     * Forma do badge conforme design do Figma
+     */
+    shape: 'default' | 'pill';
+    /**
+     * Tamanho do badge conforme design do Figma
+     */
+    size: 'sm' | 'md';
+    /**
+     * Método para acessibilidade WCAG 2.2 AA
+     * Delega foco ao elemento interno nativo
+     */
+    setFocus(): Promise<void>;
+    private renderIcon;
+    private getAriaLabel;
+    private getRole;
+    private getAriaLive;
+    render(): any;
+}

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import type { VoaBadge } from './voa-badge';
+import '../../Stories/styles/voa-badge.external.css';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<VoaBadge>;
+export declare const Playground: Story;
+export declare const IconOnly: Story;
+export declare const IconOnlyPill: Story;
+export declare const IconOnlySmall: Story;
+export declare const Indicator: Story;
+export declare const IndicatorPill: Story;
+export declare const IndicatorSmall: Story;
+export declare const IndicatorOverlay: Story;
+export declare const IndicatorOverlayPill: Story;
+export declare const IndicatorOverlaySmall: Story;
+export declare const IndicatorOnly: Story;
+export declare const Plain: Story;
+export declare const WithIcons: Story;
+export declare const Pill: Story;
+export declare const Usage: Story;

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

@@ -0,0 +1,13 @@
+/**
+ * Componente de breadcrumbs (navegação estrutural).
+ * Baseado no design do Figma (node-id: 443-10022).
+ * * @slot default - Items do breadcrumb (voa-breadcrumbs-item)
+ */
+export declare class VoaBreadcrumbs {
+    host: HTMLVoaBreadcrumbsElement;
+    /**
+     * Variante visual do breadcrumb.
+     */
+    type: 'default' | 'round' | 'outline';
+    render(): any;
+}

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

@@ -0,0 +1,57 @@
+import type { StoryObj } from '@storybook/web-components';
+import '../../Stories/styles/voa-breadcrumbs.external.css';
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    argTypes: {
+        type: {
+            control: "radio";
+            options: string[];
+        };
+    };
+    args: {
+        type: string;
+    };
+};
+export default meta;
+type Story = StoryObj;
+/**
+ * All Variants - Grid layout matching Figma design (node-id: 443-10022)
+ *
+ * Shows all 8 combinations:
+ * - Type: default / round
+ * - Icon-first: false / true (home icon)
+ * - Long: false / true (collapsed with "...")
+ */
+export declare const AllVariants: Story;
+/**
+ * Default variant - Standard breadcrumbs with white background
+ */
+export declare const Default: Story;
+/**
+ * Round variant - Pill-shaped container with dark background
+ */
+export declare const Round: Story;
+/**
+ * Outline variant - Bordered container with transparent background
+ */
+export declare const Outline: Story;
+/**
+ * With Home Icon - Using home icon as first item
+ */
+export declare const WithHomeIcon: Story;
+/**
+ * Collapsed (Long) - Using "..." to indicate hidden items
+ */
+export declare const Collapsed: Story;
+/**
+ * Custom Separator - Using a custom separator via slot
+ */
+export declare const CustomSeparator: Story;
+export declare const Usage: Story;