voa-ds-core 1.0.4

package/dist/collection/components/voa-input/voa-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-input.js","sourceRoot":"","sources":["../../../src/components/voa-input/voa-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Method, Watch } from '@stencil/core';\r\n\r\n/**\r\n * Componente de input para entrada de dados do Voa Design System.\r\n * \r\n * Baseado no design do Figma, seguindo o padrão \"unstyled\" (headless).\r\n * Todos os estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O elemento raiz do componente\r\n * @part title-row - Container do titulo (label + info)\r\n * @part label - O elemento de label\r\n * @part info - Container da informacao adicional\r\n * @part info-icon - O ícone de informação\r\n * @part container - O wrapper do input (border, background)\r\n * @part input - O elemento input nativo\r\n * @part prefix - O wrapper do slot prefix\r\n * @part suffix - O wrapper do slot suffix\r\n * @part helper-text - O elemento de texto auxiliar/erro\r\n */\r\n@Component({\r\n  tag: 'voa-input',\r\n  styleUrl: 'voa-input.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaInput {\r\n  @Element() host: HTMLVoaInputElement;\r\n\r\n  /**\r\n   * ID do elemento input\r\n   */\r\n  @Prop() inputId?: string;\r\n\r\n  /**\r\n   * Tipo do input (text, password, email, search, tel, etc.)\r\n   */\r\n  @Prop() type: string = 'text';\r\n\r\n  /**\r\n   * Nome do elemento input\r\n   */\r\n  @Prop() name?: string;\r\n\r\n  /**\r\n   * Valor do input\r\n   */\r\n  @Prop() value?: string = '';\r\n\r\n  /**\r\n   * Texto de placeholder\r\n   */\r\n  @Prop() placeholder?: string;\r\n\r\n  /**\r\n   * Texto do label\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * Texto auxiliar ou mensagem de erro\r\n   */\r\n  @Prop() helperText?: string;\r\n\r\n  /**\r\n   * Indica se o campo está em estado de erro\r\n   */\r\n  @Prop({ reflect: true }) error: boolean = false;\r\n\r\n  /**\r\n   * Indica se o campo está em estado de sucesso\r\n   */\r\n  @Prop({ reflect: true }) valid: boolean = false;\r\n\r\n  /**\r\n   * Indica se o campo está em estado de aviso\r\n   */\r\n  @Prop({ reflect: true }) warning: boolean = false;\r\n\r\n  /**\r\n   * Indica se o campo está desabilitado\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Indica se o campo é somente leitura\r\n   */\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n\r\n  /**\r\n   * Indica se o campo é obrigatório\r\n   */\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n\r\n  /**\r\n   * Variante de preenchimento (filled vs unfilled)\r\n   */\r\n  @Prop({ reflect: true }) fill: boolean = true;\r\n\r\n  /**\r\n   * Tamanho do input\r\n   */\r\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\r\n\r\n  /**\r\n   * Mostrar ícone de informação na área de info\r\n   */\r\n  @Prop() showInfoIcon: boolean = true;\r\n\r\n  /**\r\n   * Estado interno que controla se o campo está em foco\r\n   */\r\n  @State() isFocused: boolean = false;\r\n\r\n  @State() hasPrefix: boolean = false;\r\n  @State() hasSuffix: boolean = false;\r\n  @State() hasInfo: boolean = false;\r\n\r\n  /**\r\n   * Valor interno do input\r\n   */\r\n  @State() internalValue: string = '';\r\n\r\n  @Watch('value')\r\n  valueChanged(newValue: string) {\r\n    this.internalValue = newValue;\r\n  }\r\n\r\n  /**\r\n   * Referência ao elemento input nativo\r\n   */\r\n  private inputRef?: HTMLInputElement;\r\n\r\n  /**\r\n   * Evento emitido quando o valor é alterado\r\n   */\r\n  @Event() dsChange: EventEmitter<string>;\r\n\r\n  /**\r\n   * Evento emitido durante a digitação\r\n   */\r\n  @Event() dsInput: EventEmitter<string>;\r\n\r\n  /**\r\n   * Evento emitido quando o campo ganha foco\r\n   */\r\n  @Event() dsFocus: EventEmitter<FocusEvent>;\r\n\r\n  /**\r\n   * Evento emitido quando o campo perde foco\r\n   */\r\n  @Event() dsBlur: EventEmitter<FocusEvent>;\r\n\r\n  /**\r\n   * Gera um ID único se não fornecido\r\n   */\r\n  private generateId(): string {\r\n    if (this.inputId) {\r\n      return this.inputId;\r\n    }\r\n    return `voa-input-${Math.random().toString(36).substr(2, 9)}`;\r\n  }\r\n\r\n  /**\r\n   * ID do input gerado ou fornecido\r\n   */\r\n  private inputIdValue: string = '';\r\n\r\n  componentWillLoad() {\r\n    this.inputIdValue = this.generateId();\r\n    this.internalValue = this.value || '';\r\n    this.checkSlots();\r\n  }\r\n\r\n  private checkSlots = () => {\r\n    this.hasPrefix = !!this.host.querySelector('[slot=\"prefix\"]');\r\n    this.hasSuffix = !!this.host.querySelector('[slot=\"suffix\"]');\r\n    this.hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n  };\r\n\r\n  /**\r\n   * Gerenciador de evento de input\r\n   */\r\n  private handleInput = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.internalValue = input.value;\r\n    this.dsInput.emit(this.internalValue);\r\n  };\r\n\r\n  /**\r\n   * Gerenciador de evento de change\r\n   */\r\n  private handleChange = (event: Event) => {\r\n    const input = event.target as HTMLInputElement;\r\n    this.internalValue = input.value;\r\n    this.dsChange.emit(this.internalValue);\r\n  };\r\n\r\n  /**\r\n   * Gerenciador de evento de focus\r\n   */\r\n  private handleFocus = (event: FocusEvent) => {\r\n    this.isFocused = true;\r\n    this.dsFocus.emit(event);\r\n  };\r\n\r\n  /**\r\n   * Gerenciador de evento de blur\r\n   */\r\n  private handleBlur = (event: FocusEvent) => {\r\n    this.isFocused = false;\r\n    this.dsBlur.emit(event);\r\n  };\r\n\r\n  /**\r\n   * Método para acessibilidade WCAG 2.2 AA.\r\n   * Delega foco ao elemento interno nativo.\r\n   */\r\n  @Method()\r\n  async setFocus(): Promise<void> {\r\n    if (this.inputRef) {\r\n      this.inputRef.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler para navegação por teclado (WCAG 2.2 AA).\r\n   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled || this.readonly) {\r\n      return;\r\n    }\r\n\r\n    // Permitir navegação normal por teclado\r\n    // Enter e Space já são tratados pelo input nativo\r\n    switch (event.key) {\r\n      case 'Escape':\r\n        // Se o input tiver valor, limpar pode ser útil\r\n        // Mas não implementamos isso por padrão para não quebrar UX\r\n        break;\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const helperTextId = `${this.inputIdValue}-helper`;\r\n    const hasTitleRow = !!this.label || this.hasInfo;\r\n\r\n    return (\r\n      <Host\r\n        part=\"base\"\r\n        class={{\r\n          'voa-input': true,\r\n          [`voa-input--${this.size}`]: true,\r\n          'voa-input--filled': this.fill,\r\n          'voa-input--unfilled': !this.fill,\r\n          'voa-input--focused': this.isFocused,\r\n          'voa-input--error': this.error,\r\n          'voa-input--valid': this.valid,\r\n          'voa-input--warning': this.warning,\r\n          'voa-input--disabled': this.disabled,\r\n          'voa-input--readonly': this.readonly,\r\n          'voa-input--has-prefix': this.hasPrefix,\r\n          'voa-input--has-suffix': this.hasSuffix,\r\n        }}\r\n        data-has-prefix={this.hasPrefix ? 'true' : undefined}\r\n        data-has-suffix={this.hasSuffix ? 'true' : undefined}\r\n      >\r\n        {hasTitleRow && (\r\n          <div part=\"title-row\" class=\"voa-input__title-row\">\r\n            <label part=\"label\" htmlFor={this.inputIdValue} class=\"voa-input__label\">\r\n              <slot name=\"label\">{this.label}</slot>\r\n              {this.required && <span class=\"voa-input__required-indicator\" aria-label=\"obrigatório\">*</span>}\r\n            </label>\r\n            \r\n            <div \r\n              part=\"info\" \r\n              class={{\r\n                'voa-input__info': true,\r\n                'is-hidden': !this.hasInfo\r\n              }}\r\n            >\r\n              <slot name=\"info\" onSlotchange={this.checkSlots}></slot>\r\n              {this.showInfoIcon && this.hasInfo && (\r\n                <span part=\"info-icon\" class=\"voa-input__info-icon\">\r\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path d=\"M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    <path d=\"M8 8V11\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    <path d=\"M8 5H8.008\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                  </svg>\r\n                </span>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n\r\n        <div\r\n          part=\"container\"\r\n          class={{\r\n            'voa-input__container': true,\r\n            'is-focused': this.isFocused,\r\n            'has-error': this.error,\r\n            'has-valid': this.valid,\r\n            'has-warning': this.warning,\r\n            'is-disabled': this.disabled,\r\n            'is-readonly': this.readonly,\r\n          }}\r\n        >\r\n          <div \r\n            part=\"prefix\" \r\n            class={{\r\n              'voa-input__prefix': true,\r\n              'is-hidden': !this.hasPrefix\r\n            }}\r\n          >\r\n            <slot name=\"prefix\" onSlotchange={this.checkSlots}></slot>\r\n          </div>\r\n\r\n          <input\r\n            part=\"input\"\r\n            ref={(el) => (this.inputRef = el)}\r\n            id={this.inputIdValue}\r\n            type={this.type}\r\n            name={this.name}\r\n            value={this.internalValue}\r\n            placeholder={this.placeholder}\r\n            disabled={this.disabled}\r\n            readonly={this.readonly}\r\n            required={this.required}\r\n            onInput={this.handleInput}\r\n            onChange={this.handleChange}\r\n            onFocus={this.handleFocus}\r\n            onBlur={this.handleBlur}\r\n            onKeyDown={this.handleKeyDown}\r\n            aria-invalid={this.error ? 'true' : undefined}\r\n            aria-describedby={this.helperText ? helperTextId : undefined}\r\n            aria-disabled={this.disabled ? 'true' : undefined}\r\n            class=\"voa-input__input\"\r\n          />\r\n\r\n          <div \r\n            part=\"suffix\" \r\n            class={{\r\n              'voa-input__suffix': true,\r\n              'is-hidden': !this.hasSuffix\r\n            }}\r\n          >\r\n            <slot name=\"suffix\" onSlotchange={this.checkSlots}></slot>\r\n          </div>\r\n        </div>\r\n\r\n        {this.helperText && (\r\n          <div\r\n            part=\"helper-text\"\r\n            id={helperTextId}\r\n            class={{\r\n              'voa-input__helper-text': true,\r\n              'voa-input__helper-text--error': this.error,\r\n              'voa-input__helper-text--valid': this.valid,\r\n              'voa-input__helper-text--warning': this.warning,\r\n            }}\r\n            role={this.error ? 'alert' : undefined}\r\n          >\r\n            <slot name=\"helper-text\">{this.helperText}</slot>\r\n          </div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/voa-input/voa-input.stories.js

@@ -0,0 +1,448 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../Stories/styles/voa-input.external.css";
+import "../../Stories/styles/voa-input-addon.external.css";
+/**
+ * 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.
+ */
+const meta = {
+    title: "Componentes/Formulários/Input",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=437-2006&t=eEPGXVkQRijr3FMg-4',
+        },
+    },
+    render: (args) => html `
+    <voa-input
+      input-id=${ifDefined(args.inputId)}
+      type=${ifDefined(args.type)}
+      name=${ifDefined(args.name)}
+      value=${ifDefined(args.value)}
+      placeholder=${ifDefined(args.placeholder)}
+      label=${ifDefined(args.label)}
+      helper-text=${ifDefined(args.helperText)}
+      ?error=${args.error}
+      ?valid=${args.valid}
+      ?warning=${args.warning}
+      ?disabled=${args.disabled}
+      ?readonly=${args.readonly}
+      ?required=${args.required}
+      ?fill=${args.fill}
+      size=${ifDefined(args.size)}
+      ?showInfoIcon=${args.showInfoIcon}
+      /* Event handlers are provided via Storybook actions (argTypes). Avoid
+        binding the same event listeners here to prevent duplicate attribute
+        bindings when Storybook injects action handlers. */
+    >
+      ${args.infoContent ? html `<span slot="info">${args.infoContent}</span>` : ''}
+      ${args.prefixContent ? html `<span slot="prefix" .innerHTML=${args.prefixContent}></span>` : ''}
+      ${args.suffixContent ? html `<span slot="suffix" .innerHTML=${args.suffixContent}></span>` : ''}
+    </voa-input>
+  `,
+    argTypes: {
+        inputId: { control: 'text' },
+        type: {
+            control: 'select',
+            options: ['text', 'password', 'email', 'search', 'tel', 'url', 'number', 'date'],
+        },
+        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: ['sm', 'md', 'lg'],
+        },
+        showInfoIcon: { control: 'boolean' },
+        infoContent: { control: 'text', description: 'Conteúdo para o slot info' },
+        onDsChange: { action: 'dsChange' },
+        onDsInput: { action: 'dsInput' },
+        onDsFocus: { action: 'dsFocus' },
+        onDsBlur: { action: 'dsBlur' },
+    },
+    args: {
+        type: 'text',
+        placeholder: 'Digite aqui',
+        value: '',
+        disabled: false,
+        readonly: false,
+        required: false,
+        error: false,
+        valid: false,
+        warning: false,
+        fill: true,
+        size: 'md',
+        showInfoIcon: true,
+    },
+};
+export default meta;
+// Story padrão
+export const Default = {
+    args: {
+        label: 'Nome do campo',
+        placeholder: 'Digite seu nome',
+    },
+};
+// Com valor inicial
+export const WithValue = {
+    args: {
+        label: 'Email',
+        value: 'usuario@exemplo.com',
+        placeholder: 'Digite seu email',
+    },
+};
+// Tamanhos
+export const Sizes = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <voa-input label="Small" size="sm" placeholder="Input pequeno"></voa-input>
+      <voa-input label="Medium" size="md" placeholder="Input médio"></voa-input>
+      <voa-input label="Large" size="lg" placeholder="Input grande"></voa-input>
+    </div>
+  `,
+};
+// Estados de Validação (Novo no Figma)
+export const ValidationStates = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      <voa-input 
+        label="Estado Normal" 
+        placeholder="Normal"
+      ></voa-input>
+      
+      <voa-input 
+        label="Estado de Erro" 
+        placeholder="Erro"
+        error
+        helper-text="Mensagem de erro aqui"
+      ></voa-input>
+      
+      <voa-input 
+        label="Estado Válido" 
+        placeholder="Válido"
+        valid
+        helper-text="Mensagem de sucesso"
+      ></voa-input>
+      
+      <voa-input 
+        label="Estado de Aviso" 
+        placeholder="Aviso"
+        warning
+        helper-text="Mensagem de aviso"
+      ></voa-input>
+    </div>
+  `,
+};
+// Campo Completo (Input Field - Figma)
+export const InputFieldDefault = {
+    args: {
+        label: 'Nome do campo',
+        infoContent: 'Informação adicional',
+        placeholder: 'Text',
+        helperText: 'Mensagem',
+    },
+};
+// Com ícone de info
+export const WithInfoText = {
+    args: {
+        label: 'Campo com info',
+        infoContent: 'Informação sobre o campo',
+        showInfoIcon: true,
+        placeholder: 'Digite aqui',
+    },
+};
+// Com Prefix e Suffix (Addons)
+export const WithPrefixAndSuffix = {
+    render: (args) => html `
+<voa-input 
+      type="search" 
+      placeholder="Buscar..."
+      size=${ifDefined(args.size)}
+      ?disabled=${args.disabled}
+      ?readonly=${args.readonly}
+      ?error=${args.error}
+      ?valid=${args.valid}
+      ?warning=${args.warning}
+      ?fill=${args.fill}
+    >
+      <span slot="prefix" style="display: flex; align-items: center; padding: 0 8px; box-sizing: border-box;">🔍</span>
+      <div slot="suffix" style="display: flex; align-items: center; gap: 4px; padding: 4px; margin-right: 8px; border: 1px solid var(--palette-gray-gray-2, #e9ecef); border-radius: 8px; font-size: 14px; color: var(--palette-gray-gray-6, #868e96); box-sizing: border-box;">
+        ⌘ S
+      </div>
+    </voa-input>
+  `,
+};
+// Integração com voa-input-addon
+export const IntegrationWithAddon = {
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 24px;">
+      <!-- URL Input -->
+      <voa-input label="URL" placeholder="exemplo.com" value="https://exemplo.com">
+        <voa-input-addon 
+          slot="prefix" 
+          variant="label" 
+          prepend-content="http://">
+        </voa-input-addon>
+        <voa-input-addon 
+          slot="suffix" 
+          variant="clear">
+        </voa-input-addon>
+      </voa-input>
+
+      <!-- Phone Input -->
+      <voa-input type="tel" placeholder="(00) 0000 - 0000">
+        <voa-input-addon 
+          slot="prefix" 
+          variant="flags" 
+          country-code="BR +55">
+        </voa-input-addon>
+      </voa-input>
+
+      <!-- Attachment Input -->
+      <voa-input placeholder="Anexar arquivo">
+        <span slot="prefix" style="display: flex; align-items: center; padding: 0 8px;">📎</span>
+        <voa-input-addon 
+          slot="suffix" 
+          variant="button" 
+          button-label="Procurar...">
+        </voa-input-addon>
+      </voa-input>
+  </div>
+  `,
+};
+// ============================================
+// Usage - Exemplos de Código
+// ============================================
+export const Usage = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## Uso do Componente
+
+Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:
+
+### HTML (Web Components)
+
+\`\`\`html
+<!-- Input básico -->
+<voa-input
+  type="text"
+  placeholder="Digite aqui"
+  label="Nome"
+></voa-input>
+
+<!-- Input com validação -->
+<voa-input
+  type="email"
+  placeholder="seu@email.com"
+  label="Email"
+  valid
+></voa-input>
+
+<!-- Input com erro -->
+<voa-input
+  type="text"
+  placeholder="Campo obrigatório"
+  label="Campo de texto"
+  error
+  helper-text="Este campo é obrigatório"
+></voa-input>
+
+<!-- Input com prefix/suffix -->
+<voa-input
+  type="search"
+  placeholder="Buscar..."
+>
+  <span slot="prefix">🔍</span>
+</voa-input>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaInput } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Input básico */}
+      <VoaInput
+        type="text"
+        placeholder="Digite aqui"
+        label="Nome"
+      />
+
+      {/* Input com validação */}
+      <VoaInput
+        type="email"
+        placeholder="seu@email.com"
+        label="Email"
+        valid
+      />
+
+      {/* Input com erro */}
+      <VoaInput
+        type="text"
+        placeholder="Campo obrigatório"
+        label="Campo de texto"
+        error
+        helperText="Este campo é obrigatório"
+      />
+
+      {/* Input com prefix/suffix */}
+      <VoaInput
+        type="search"
+        placeholder="Buscar..."
+      >
+        <span slot="prefix">🔍</span>
+      </VoaInput>
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaInput } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Input básico -->
+    <voa-input
+      type="text"
+      placeholder="Digite aqui"
+      label="Nome"
+    ></voa-input>
+
+    <!-- Input com validação -->
+    <voa-input
+      type="email"
+      placeholder="seu@email.com"
+      label="Email"
+      [valid]="true"
+    ></voa-input>
+
+    <!-- Input com erro -->
+    <voa-input
+      type="text"
+      placeholder="Campo obrigatório"
+      label="Campo de texto"
+      [error]="true"
+      helper-text="Este campo é obrigatório"
+    ></voa-input>
+
+    <!-- Input com prefix/suffix -->
+    <voa-input
+      type="search"
+      placeholder="Buscar..."
+    >
+      <span slot="prefix">🔍</span>
+    </voa-input>
+  \`
+})
+export class ExampleComponent {}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <!-- Input básico -->
+  <VoaInput
+    type="text"
+    placeholder="Digite aqui"
+    label="Nome"
+  />
+
+  <!-- Input com validação -->
+  <VoaInput
+    type="email"
+    placeholder="seu@email.com"
+    label="Email"
+    :valid="true"
+  />
+
+  <!-- Input com erro -->
+  <VoaInput
+    type="text"
+    placeholder="Campo obrigatório"
+    label="Campo de texto"
+    :error="true"
+    helper-text="Este campo é obrigatório"
+  />
+
+  <!-- Input com prefix/suffix -->
+  <VoaInput
+    type="search"
+    placeholder="Buscar..."
+  >
+    <span slot="prefix">🔍</span>
+  </VoaInput>
+</template>
+
+<script setup lang="ts">
+import { VoaInput } from '@voa-ds/vue';
+</script>
+\`\`\`
+
+## Instalação
+
+### HTML
+\`\`\`bash
+# NPM
+npm install @voa-ds/components
+
+# Importar no HTML
+<script type="module" src="https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js"></script>
+\`\`\`
+
+### React
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/react
+\`\`\`
+
+### Angular
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/angular
+\`\`\`
+
+### Vue
+\`\`\`bash
+npm install @voa-ds/components @voa-ds/vue
+\`\`\`
+        `
+            }
+        }
+    },
+    render: () => html `
+    <div style="padding: 2rem; max-width: 100%;">
+      <h2 style="margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;">Uso do Componente</h2>
+      <p style="margin-bottom: 2rem; color: #666;">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>
+      <h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;">Exemplo Interativo</h3>
+      <voa-input type="text" placeholder="Digite aqui" label="Exemplo" style="margin-bottom: 2rem;"></voa-input>
+      <div style="margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;">
+        <p style="margin: 0; font-weight: 600; margin-bottom: 0.5rem;">📚 Documentação Completa</p>
+        <p style="margin: 0; color: #666; font-size: 0.9rem;">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href="?path=/docs/components-voainput--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-input.stories.js.map

package/dist/collection/components/voa-input/voa-input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-input.stories.js","sourceRoot":"","sources":["../../../src/components/voa-input/voa-input.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport '../../Stories/styles/voa-input.external.css';\r\nimport '../../Stories/styles/voa-input-addon.external.css';\r\n\r\n// Interface estendida para incluir as props do componente\r\ninterface InputArgs {\r\n  inputId?: string;\r\n  type?: string;\r\n  name?: string;\r\n  value?: string;\r\n  placeholder?: string;\r\n  label?: string;\r\n  helperText?: string;\r\n  error?: boolean;\r\n  valid?: boolean;\r\n  warning?: boolean;\r\n  disabled?: boolean;\r\n  readonly?: boolean;\r\n  required?: boolean;\r\n  fill?: boolean;\r\n  size?: 'sm' | 'md' | 'lg';\r\n  showInfoIcon?: boolean;\r\n  infoContent?: string;\r\n  prefixContent?: string;\r\n  suffixContent?: string;\r\n  onDsChange?: (e: CustomEvent) => void;\r\n  onDsInput?: (e: CustomEvent) => void;\r\n  onDsFocus?: (e: CustomEvent) => void;\r\n  onDsBlur?: (e: CustomEvent) => void;\r\n}\r\n\r\n/**\r\n * Componente Input do Voa Design System.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=437-2006\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\r\n * Todos os estilos visuais são aplicados externamente via CSS Parts API usando design tokens.\r\n */\r\nconst meta = {\r\n  title: \"Componentes/Formulários/Input\",\r\n  tags: ['autodocs'],\r\n  parameters: {\r\n    design: {\r\n      type: 'figma',\r\n      url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=437-2006&t=eEPGXVkQRijr3FMg-4',\r\n    },\r\n  },\r\n  render: (args: InputArgs) => html`\r\n    <voa-input\r\n      input-id=${ifDefined(args.inputId)}\r\n      type=${ifDefined(args.type)}\r\n      name=${ifDefined(args.name)}\r\n      value=${ifDefined(args.value)}\r\n      placeholder=${ifDefined(args.placeholder)}\r\n      label=${ifDefined(args.label)}\r\n      helper-text=${ifDefined(args.helperText)}\r\n      ?error=${args.error}\r\n      ?valid=${args.valid}\r\n      ?warning=${args.warning}\r\n      ?disabled=${args.disabled}\r\n      ?readonly=${args.readonly}\r\n      ?required=${args.required}\r\n      ?fill=${args.fill}\r\n      size=${ifDefined(args.size)}\r\n      ?showInfoIcon=${args.showInfoIcon}\r\n      /* Event handlers are provided via Storybook actions (argTypes). Avoid\r\n        binding the same event listeners here to prevent duplicate attribute\r\n        bindings when Storybook injects action handlers. */\r\n    >\r\n      ${args.infoContent ? html`<span slot=\"info\">${args.infoContent}</span>` : ''}\r\n      ${args.prefixContent ? html`<span slot=\"prefix\" .innerHTML=${args.prefixContent}></span>` : ''}\r\n      ${args.suffixContent ? html`<span slot=\"suffix\" .innerHTML=${args.suffixContent}></span>` : ''}\r\n    </voa-input>\r\n  `,\r\n  argTypes: {\r\n    inputId: { control: 'text' },\r\n    type: {\r\n      control: 'select',\r\n      options: ['text', 'password', 'email', 'search', 'tel', 'url', 'number', 'date'],\r\n    },\r\n    name: { control: 'text' },\r\n    value: { control: 'text' },\r\n    placeholder: { control: 'text' },\r\n    label: { control: 'text' },\r\n    helperText: { control: 'text' },\r\n    error: { control: 'boolean' },\r\n    valid: { control: 'boolean' },\r\n    warning: { control: 'boolean' },\r\n    disabled: { control: 'boolean' },\r\n    readonly: { control: 'boolean' },\r\n    required: { control: 'boolean' },\r\n    fill: { control: 'boolean' },\r\n    size: {\r\n      control: 'select',\r\n      options: ['sm', 'md', 'lg'],\r\n    },\r\n    showInfoIcon: { control: 'boolean' },\r\n    infoContent: { control: 'text', description: 'Conteúdo para o slot info' },\r\n    onDsChange: { action: 'dsChange' },\r\n    onDsInput: { action: 'dsInput' },\r\n    onDsFocus: { action: 'dsFocus' },\r\n    onDsBlur: { action: 'dsBlur' },\r\n  },\r\n  args: {\r\n    type: 'text',\r\n    placeholder: 'Digite aqui',\r\n    value: '',\r\n    disabled: false,\r\n    readonly: false,\r\n    required: false,\r\n    error: false,\r\n    valid: false,\r\n    warning: false,\r\n    fill: true,\r\n    size: 'md',\r\n    showInfoIcon: true,\r\n  },\r\n} satisfies Meta<InputArgs>;\r\n\r\nexport default meta;\r\ntype Story = StoryObj<InputArgs>;\r\n\r\n// Story padrão\r\nexport const Default: Story = {\r\n  args: {\r\n    label: 'Nome do campo',\r\n    placeholder: 'Digite seu nome',\r\n  },\r\n};\r\n\r\n// Com valor inicial\r\nexport const WithValue: Story = {\r\n  args: {\r\n    label: 'Email',\r\n    value: 'usuario@exemplo.com',\r\n    placeholder: 'Digite seu email',\r\n  },\r\n};\r\n\r\n// Tamanhos\r\nexport const Sizes: Story = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n      <voa-input label=\"Small\" size=\"sm\" placeholder=\"Input pequeno\"></voa-input>\r\n      <voa-input label=\"Medium\" size=\"md\" placeholder=\"Input médio\"></voa-input>\r\n      <voa-input label=\"Large\" size=\"lg\" placeholder=\"Input grande\"></voa-input>\r\n    </div>\r\n  `,\r\n};\r\n\r\n// Estados de Validação (Novo no Figma)\r\nexport const ValidationStates: Story = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 16px;\">\r\n      <voa-input \r\n        label=\"Estado Normal\" \r\n        placeholder=\"Normal\"\r\n      ></voa-input>\r\n      \r\n      <voa-input \r\n        label=\"Estado de Erro\" \r\n        placeholder=\"Erro\"\r\n        error\r\n        helper-text=\"Mensagem de erro aqui\"\r\n      ></voa-input>\r\n      \r\n      <voa-input \r\n        label=\"Estado Válido\" \r\n        placeholder=\"Válido\"\r\n        valid\r\n        helper-text=\"Mensagem de sucesso\"\r\n      ></voa-input>\r\n      \r\n      <voa-input \r\n        label=\"Estado de Aviso\" \r\n        placeholder=\"Aviso\"\r\n        warning\r\n        helper-text=\"Mensagem de aviso\"\r\n      ></voa-input>\r\n    </div>\r\n  `,\r\n};\r\n\r\n// Campo Completo (Input Field - Figma)\r\nexport const InputFieldDefault: Story = {\r\n  args: {\r\n    label: 'Nome do campo',\r\n    infoContent: 'Informação adicional',\r\n    placeholder: 'Text',\r\n    helperText: 'Mensagem',\r\n  },\r\n};\r\n\r\n// Com ícone de info\r\nexport const WithInfoText: Story = {\r\n  args: {\r\n    label: 'Campo com info',\r\n    infoContent: 'Informação sobre o campo',\r\n    showInfoIcon: true,\r\n    placeholder: 'Digite aqui',\r\n  },\r\n};\r\n\r\n// Com Prefix e Suffix (Addons)\r\nexport const WithPrefixAndSuffix: Story = {\r\n  render: (args) => html`\r\n<voa-input \r\n      type=\"search\" \r\n      placeholder=\"Buscar...\"\r\n      size=${ifDefined(args.size)}\r\n      ?disabled=${args.disabled}\r\n      ?readonly=${args.readonly}\r\n      ?error=${args.error}\r\n      ?valid=${args.valid}\r\n      ?warning=${args.warning}\r\n      ?fill=${args.fill}\r\n    >\r\n      <span slot=\"prefix\" style=\"display: flex; align-items: center; padding: 0 8px; box-sizing: border-box;\">🔍</span>\r\n      <div slot=\"suffix\" style=\"display: flex; align-items: center; gap: 4px; padding: 4px; margin-right: 8px; border: 1px solid var(--palette-gray-gray-2, #e9ecef); border-radius: 8px; font-size: 14px; color: var(--palette-gray-gray-6, #868e96); box-sizing: border-box;\">\r\n        ⌘ S\r\n      </div>\r\n    </voa-input>\r\n  `,\r\n};\r\n\r\n// Integração com voa-input-addon\r\nexport const IntegrationWithAddon: Story = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-direction: column; gap: 24px;\">\r\n      <!-- URL Input -->\r\n      <voa-input label=\"URL\" placeholder=\"exemplo.com\" value=\"https://exemplo.com\">\r\n        <voa-input-addon \r\n          slot=\"prefix\" \r\n          variant=\"label\" \r\n          prepend-content=\"http://\">\r\n        </voa-input-addon>\r\n        <voa-input-addon \r\n          slot=\"suffix\" \r\n          variant=\"clear\">\r\n        </voa-input-addon>\r\n      </voa-input>\r\n\r\n      <!-- Phone Input -->\r\n      <voa-input type=\"tel\" placeholder=\"(00) 0000 - 0000\">\r\n        <voa-input-addon \r\n          slot=\"prefix\" \r\n          variant=\"flags\" \r\n          country-code=\"BR +55\">\r\n        </voa-input-addon>\r\n      </voa-input>\r\n\r\n      <!-- Attachment Input -->\r\n      <voa-input placeholder=\"Anexar arquivo\">\r\n        <span slot=\"prefix\" style=\"display: flex; align-items: center; padding: 0 8px;\">📎</span>\r\n        <voa-input-addon \r\n          slot=\"suffix\" \r\n          variant=\"button\" \r\n          button-label=\"Procurar...\">\r\n        </voa-input-addon>\r\n      </voa-input>\r\n  </div>\r\n  `,\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: Story = {\r\n  parameters: {\r\n    docs: {\r\n      description: {\r\n        story: `\r\n## Uso do Componente\r\n\r\nEste componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n\r\n### HTML (Web Components)\r\n\r\n\\`\\`\\`html\r\n<!-- Input básico -->\r\n<voa-input\r\n  type=\"text\"\r\n  placeholder=\"Digite aqui\"\r\n  label=\"Nome\"\r\n></voa-input>\r\n\r\n<!-- Input com validação -->\r\n<voa-input\r\n  type=\"email\"\r\n  placeholder=\"seu@email.com\"\r\n  label=\"Email\"\r\n  valid\r\n></voa-input>\r\n\r\n<!-- Input com erro -->\r\n<voa-input\r\n  type=\"text\"\r\n  placeholder=\"Campo obrigatório\"\r\n  label=\"Campo de texto\"\r\n  error\r\n  helper-text=\"Este campo é obrigatório\"\r\n></voa-input>\r\n\r\n<!-- Input com prefix/suffix -->\r\n<voa-input\r\n  type=\"search\"\r\n  placeholder=\"Buscar...\"\r\n>\r\n  <span slot=\"prefix\">🔍</span>\r\n</voa-input>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaInput } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Input básico */}\r\n      <VoaInput\r\n        type=\"text\"\r\n        placeholder=\"Digite aqui\"\r\n        label=\"Nome\"\r\n      />\r\n\r\n      {/* Input com validação */}\r\n      <VoaInput\r\n        type=\"email\"\r\n        placeholder=\"seu@email.com\"\r\n        label=\"Email\"\r\n        valid\r\n      />\r\n\r\n      {/* Input com erro */}\r\n      <VoaInput\r\n        type=\"text\"\r\n        placeholder=\"Campo obrigatório\"\r\n        label=\"Campo de texto\"\r\n        error\r\n        helperText=\"Este campo é obrigatório\"\r\n      />\r\n\r\n      {/* Input com prefix/suffix */}\r\n      <VoaInput\r\n        type=\"search\"\r\n        placeholder=\"Buscar...\"\r\n      >\r\n        <span slot=\"prefix\">🔍</span>\r\n      </VoaInput>\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaInput } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Input básico -->\r\n    <voa-input\r\n      type=\"text\"\r\n      placeholder=\"Digite aqui\"\r\n      label=\"Nome\"\r\n    ></voa-input>\r\n\r\n    <!-- Input com validação -->\r\n    <voa-input\r\n      type=\"email\"\r\n      placeholder=\"seu@email.com\"\r\n      label=\"Email\"\r\n      [valid]=\"true\"\r\n    ></voa-input>\r\n\r\n    <!-- Input com erro -->\r\n    <voa-input\r\n      type=\"text\"\r\n      placeholder=\"Campo obrigatório\"\r\n      label=\"Campo de texto\"\r\n      [error]=\"true\"\r\n      helper-text=\"Este campo é obrigatório\"\r\n    ></voa-input>\r\n\r\n    <!-- Input com prefix/suffix -->\r\n    <voa-input\r\n      type=\"search\"\r\n      placeholder=\"Buscar...\"\r\n    >\r\n      <span slot=\"prefix\">🔍</span>\r\n    </voa-input>\r\n  \\`\r\n})\r\nexport class ExampleComponent {}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <!-- Input básico -->\r\n  <VoaInput\r\n    type=\"text\"\r\n    placeholder=\"Digite aqui\"\r\n    label=\"Nome\"\r\n  />\r\n\r\n  <!-- Input com validação -->\r\n  <VoaInput\r\n    type=\"email\"\r\n    placeholder=\"seu@email.com\"\r\n    label=\"Email\"\r\n    :valid=\"true\"\r\n  />\r\n\r\n  <!-- Input com erro -->\r\n  <VoaInput\r\n    type=\"text\"\r\n    placeholder=\"Campo obrigatório\"\r\n    label=\"Campo de texto\"\r\n    :error=\"true\"\r\n    helper-text=\"Este campo é obrigatório\"\r\n  />\r\n\r\n  <!-- Input com prefix/suffix -->\r\n  <VoaInput\r\n    type=\"search\"\r\n    placeholder=\"Buscar...\"\r\n  >\r\n    <span slot=\"prefix\">🔍</span>\r\n  </VoaInput>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaInput } from '@voa-ds/vue';\r\n</script>\r\n\\`\\`\\`\r\n\r\n## Instalação\r\n\r\n### HTML\r\n\\`\\`\\`bash\r\n# NPM\r\nnpm install @voa-ds/components\r\n\r\n# Importar no HTML\r\n<script type=\"module\" src=\"https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js\"></script>\r\n\\`\\`\\`\r\n\r\n### React\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/react\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/angular\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/vue\r\n\\`\\`\\`\r\n        `\r\n      }\r\n    }\r\n  },\r\n  render: () => html`\r\n    <div style=\"padding: 2rem; max-width: 100%;\">\r\n      <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">Uso do Componente</h2>\r\n      <p style=\"margin-bottom: 2rem; color: #666;\">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>\r\n      <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n      <voa-input type=\"text\" placeholder=\"Digite aqui\" label=\"Exemplo\" style=\"margin-bottom: 2rem;\"></voa-input>\r\n      <div style=\"margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;\">\r\n        <p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>\r\n        <p style=\"margin: 0; color: #666; font-size: 0.9rem;\">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href=\"?path=/docs/components-voainput--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.</p>\r\n      </div>\r\n    </div>\r\n  `\r\n};\r\n"]}

package/dist/collection/components/voa-input-addon/voa-input-addon.css

@@ -0,0 +1,58 @@
+/* 
+ * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).
+ * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally
+ * via CSS Parts API (::part() selectors) using design tokens.
+ */
+
+:host {
+  display: inline-flex;
+  box-sizing: border-box;
+}
+
+.voa-input-addon__base {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.voa-input-addon--interactive .voa-input-addon__base {
+  cursor: pointer;
+  user-select: none;
+}
+
+.voa-input-addon__content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-spacing-xxs, 2px);
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+.voa-input-addon__text {
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.voa-input-addon__icon,
+.voa-input-addon__flag-icon,
+.voa-input-addon__dropdown-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.voa-input-addon__flag-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 100px;
+}
+
+.voa-input-addon__button-text {
+  display: inline-block;
+  box-sizing: border-box;
+}
+