voa-ds-core 1.0.3

package/dist/collection/components/voa-select/voa-container-multi-select.js

@@ -0,0 +1,192 @@
+import { h } from "@stencil/core";
+/**
+ * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.
+ * Permite selecionar múltiplos itens dentro de um contêiner.
+ *
+ * @part base - The root container element
+ * @part inner - The inner container wrapper
+ * @part items - The items container wrapper
+ * @part item - Individual selectable item
+ * @part placeholder - The placeholder text element
+ */
+export class VoaContainerMultiSelect {
+    constructor() {
+        /**
+         * Lista de itens para seleção
+         */
+        this.items = [];
+        /**
+         * Se verdadeiro, o contêiner estará desabilitado.
+         */
+        this.disabled = false;
+        /**
+         * Texto de placeholder quando não há itens selecionados
+         */
+        this.placeholder = 'Selecione os itens';
+        /**
+         * Estado interno dos itens selecionados
+         */
+        this.selectedItems = [];
+        /**
+         * Manipula o clique no badge (remove o item da seleção quando clicado)
+         */
+        this.handleBadgeClick = (itemId) => {
+            if (!this.disabled) {
+                // Remove o item da seleção quando o badge é clicado (incluindo o ícone close)
+                this.selectedItems = this.selectedItems.filter(id => id !== itemId);
+                this.voaSelectionChange.emit(this.selectedItems);
+            }
+        };
+    }
+    componentWillLoad() {
+        // Inicializa os itens selecionados com base nos itens que já têm selected=true
+        this.syncSelectedItems();
+    }
+    componentDidUpdate() {
+        // Sincroniza quando items prop muda (chamado após cada render)
+        this.syncSelectedItems();
+    }
+    /**
+     * Sincroniza selectedItems quando items prop muda
+     * Usa componentDidUpdate porque @Watch pode não detectar mudanças em arrays por referência
+     */
+    syncSelectedItems() {
+        // Atualiza os itens selecionados com base nos itens que têm selected=true
+        const newSelectedItems = this.items
+            .filter(item => item.selected)
+            .map(item => item.id);
+        // Só atualiza se houver mudança para evitar loops infinitos
+        const currentSorted = [...this.selectedItems].sort().join(',');
+        const newSorted = [...newSelectedItems].sort().join(',');
+        if (currentSorted !== newSorted) {
+            this.selectedItems = newSelectedItems;
+        }
+    }
+    /**
+     * Verifica se um item está selecionado
+     */
+    isItemSelected(itemId) {
+        return this.selectedItems.includes(itemId);
+    }
+    render() {
+        return (h("div", { key: 'afd1061190b5007f2253972f12d4151c11127cd5', part: "base", class: {
+                'voa-container-multi-select': true,
+                'voa-container-multi-select--disabled': this.disabled
+            }, "aria-disabled": this.disabled ? 'true' : 'false', role: "listbox", "aria-multiselectable": "true" }, h("div", { key: '70e8a1423088e9b21172ffc10b3be69a63bb9e75', class: "voa-container-multi-select__inner", part: "inner" }, (() => {
+            // Filtrar apenas os itens selecionados para renderizar no campo
+            const selectedItems = this.items.filter(item => {
+                const isSelected = item.selected === true || this.isItemSelected(item.id);
+                return isSelected;
+            });
+            // Se não há itens selecionados, mostrar placeholder
+            if (selectedItems.length === 0) {
+                return (h("div", { class: "voa-container-multi-select__placeholder", part: "placeholder" }, this.placeholder));
+            }
+            // Renderizar apenas os itens selecionados como badges
+            return (h("div", { class: "voa-container-multi-select__items", part: "items" }, selectedItems.map(item => (h("div", { key: item.id, class: "voa-container-multi-select__badge-wrapper", onClick: () => this.handleBadgeClick(item.id), role: "option", "aria-selected": "true", tabIndex: this.disabled ? -1 : 0 }, h("voa-badge", { label: item.label, variant: "icons", size: "sm", shape: "pill" }, h("svg", { slot: "end", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        })())));
+    }
+    static get is() { return "voa-container-multi-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["voa-container-multi-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["voa-container-multi-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<{id: string, label: string, selected?: boolean}>",
+                    "resolved": "{ id: string; label: string; selected?: boolean; }[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lista de itens para sele\u00E7\u00E3o"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Se verdadeiro, o cont\u00EAiner estar\u00E1 desabilitado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto de placeholder quando n\u00E3o h\u00E1 itens selecionados"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Selecione os itens'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "voaSelectionChange",
+                "name": "voaSelectionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido quando a sele\u00E7\u00E3o \u00E9 alterada"
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=voa-container-multi-select.js.map

package/dist/collection/components/voa-select/voa-container-multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-container-multi-select.js","sourceRoot":"","sources":["../../../src/components/voa-select/voa-container-multi-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, State } from '@stencil/core';\r\n\r\n/**\r\n * Componente Container Multi-Select do Voa Design System, baseado no design do Figma.\r\n * Permite selecionar múltiplos itens dentro de um contêiner.\r\n * \r\n * @part base - The root container element\r\n * @part inner - The inner container wrapper\r\n * @part items - The items container wrapper\r\n * @part item - Individual selectable item\r\n * @part placeholder - The placeholder text element\r\n */\r\n@Component({\r\n  tag: 'voa-container-multi-select',\r\n  styleUrl: 'voa-container-multi-select.css',\r\n  shadow: true,\r\n  scoped: false // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaContainerMultiSelect {\r\n  /**\r\n   * Lista de itens para seleção\r\n   */\r\n  @Prop() items: Array<{id: string, label: string, selected?: boolean}> = [];\r\n\r\n  /**\r\n   * Se verdadeiro, o contêiner estará desabilitado.\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Texto de placeholder quando não há itens selecionados\r\n   */\r\n  @Prop() placeholder: string = 'Selecione os itens';\r\n\r\n  /**\r\n   * Estado interno dos itens selecionados\r\n   */\r\n  @State() selectedItems: string[] = [];\r\n\r\n  /**\r\n   * Evento emitido quando a seleção é alterada\r\n   */\r\n  @Event() voaSelectionChange: EventEmitter<string[]>;\r\n\r\n  componentWillLoad() {\r\n    // Inicializa os itens selecionados com base nos itens que já têm selected=true\r\n    this.syncSelectedItems();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    // Sincroniza quando items prop muda (chamado após cada render)\r\n    this.syncSelectedItems();\r\n  }\r\n\r\n  /**\r\n   * Sincroniza selectedItems quando items prop muda\r\n   * Usa componentDidUpdate porque @Watch pode não detectar mudanças em arrays por referência\r\n   */\r\n  private syncSelectedItems() {\r\n    // Atualiza os itens selecionados com base nos itens que têm selected=true\r\n    const newSelectedItems = this.items\r\n      .filter(item => item.selected)\r\n      .map(item => item.id);\r\n    \r\n    // Só atualiza se houver mudança para evitar loops infinitos\r\n    const currentSorted = [...this.selectedItems].sort().join(',');\r\n    const newSorted = [...newSelectedItems].sort().join(',');\r\n    \r\n    if (currentSorted !== newSorted) {\r\n      this.selectedItems = newSelectedItems;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Verifica se um item está selecionado\r\n   */\r\n  private isItemSelected(itemId: string): boolean {\r\n    return this.selectedItems.includes(itemId);\r\n  }\r\n\r\n  /**\r\n   * Manipula o clique no badge (remove o item da seleção quando clicado)\r\n   */\r\n  private handleBadgeClick = (itemId: string) => {\r\n    if (!this.disabled) {\r\n      // Remove o item da seleção quando o badge é clicado (incluindo o ícone close)\r\n      this.selectedItems = this.selectedItems.filter(id => id !== itemId);\r\n      this.voaSelectionChange.emit(this.selectedItems);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <div \r\n        part=\"base\"\r\n        class={{\r\n          'voa-container-multi-select': true,\r\n          'voa-container-multi-select--disabled': this.disabled\r\n        }}\r\n        aria-disabled={this.disabled ? 'true' : 'false'}\r\n        role=\"listbox\"\r\n        aria-multiselectable=\"true\"\r\n      >\r\n        <div class=\"voa-container-multi-select__inner\" part=\"inner\">\r\n          {(() => {\r\n            // Filtrar apenas os itens selecionados para renderizar no campo\r\n            const selectedItems = this.items.filter(item => {\r\n              const isSelected = item.selected === true || this.isItemSelected(item.id);\r\n              return isSelected;\r\n            });\r\n\r\n            // Se não há itens selecionados, mostrar placeholder\r\n            if (selectedItems.length === 0) {\r\n              return (\r\n                <div class=\"voa-container-multi-select__placeholder\" part=\"placeholder\">\r\n                  {this.placeholder}\r\n                </div>\r\n              );\r\n            }\r\n\r\n            // Renderizar apenas os itens selecionados como badges\r\n            return (\r\n              <div class=\"voa-container-multi-select__items\" part=\"items\">\r\n                {selectedItems.map(item => (\r\n                  <div\r\n                    key={item.id}\r\n                    class=\"voa-container-multi-select__badge-wrapper\"\r\n                    onClick={() => this.handleBadgeClick(item.id)}\r\n                    role=\"option\"\r\n                    aria-selected=\"true\"\r\n                    tabIndex={this.disabled ? -1 : 0}\r\n                  >\r\n                    <voa-badge\r\n                      label={item.label}\r\n                      variant=\"icons\"\r\n                      size=\"sm\"\r\n                      shape=\"pill\"\r\n                    >\r\n                      <svg slot=\"end\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                        <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                      </svg>\r\n                    </voa-badge>\r\n                  </div>\r\n                ))}\r\n              </div>\r\n            );\r\n          })()}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n} "]}

package/dist/collection/components/voa-select/voa-container-multi-select.stories.js

@@ -0,0 +1,218 @@
+import "../../Stories/styles/voa-select.external.css";
+export default {
+    title: "Componentes/Formulários/Multi Select",
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        disabled: {
+            control: 'boolean',
+            description: 'Define se o componente está desabilitado',
+            defaultValue: false,
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Texto de placeholder quando não há itens',
+            defaultValue: 'Selecione os itens',
+        },
+        items: {
+            control: 'object',
+            description: 'Lista de itens para seleção',
+            defaultValue: [
+                { id: '1', label: 'Item 1' },
+                { id: '2', label: 'Item 2' },
+                { id: '3', label: 'Item 3' },
+                { id: '4', label: 'Item 4' },
+                { id: '5', label: 'Item 5' },
+            ],
+        },
+    },
+};
+const Template = (args) => {
+    const containerStyle = {
+        width: '400px',
+        height: '200px',
+    };
+    // Criar o elemento dinamicamente para permitir manipulação via script
+    setTimeout(() => {
+        const component = document.querySelector('#voa-container-multi-select-example');
+        if (component) {
+            // Configurar os itens
+            component.items = args.items;
+            component.disabled = args.disabled;
+            component.placeholder = args.placeholder;
+            // Escutar eventos de mudança
+            component.addEventListener('voaSelectionChange', (event) => {
+                console.log('Itens selecionados:', event.detail);
+            });
+        }
+    }, 0);
+    return `
+    <div id="container-multi-select-story" style="width: ${containerStyle.width}; height: ${containerStyle.height};">
+      <voa-container-multi-select id="voa-container-multi-select-example"></voa-container-multi-select>
+    </div>
+  `;
+};
+export const Default = Template.bind({});
+Default.args = {
+    items: [
+        { id: '1', label: 'Item 1' },
+        { id: '2', label: 'Item 2' },
+        { id: '3', label: 'Item 3' },
+        { id: '4', label: 'Item 4' },
+        { id: '5', label: 'Item 5' },
+    ],
+    disabled: false,
+    placeholder: 'Selecione os itens',
+};
+export const WithPreselectedItems = Template.bind({});
+WithPreselectedItems.args = {
+    items: [
+        { id: '1', label: 'Item 1', selected: true },
+        { id: '2', label: 'Item 2' },
+        { id: '3', label: 'Item 3', selected: true },
+        { id: '4', label: 'Item 4' },
+        { id: '5', label: 'Item 5' },
+    ],
+    disabled: false,
+    placeholder: 'Selecione os itens',
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    items: [
+        { id: '1', label: 'Item 1' },
+        { id: '2', label: 'Item 2' },
+        { id: '3', label: 'Item 3' },
+        { id: '4', label: 'Item 4' },
+        { id: '5', label: 'Item 5' },
+    ],
+    disabled: true,
+    placeholder: 'Componente desabilitado',
+};
+export const Empty = Template.bind({});
+Empty.args = {
+    items: [],
+    disabled: false,
+    placeholder: 'Não há itens disponíveis',
+};
+// ============================================
+// Usage - Exemplos de Código
+// ============================================
+export const Usage = () => {
+    const container = document.createElement('div');
+    container.style.cssText = 'padding: 2rem; max-width: 100%;';
+    const title = document.createElement('h2');
+    title.textContent = 'Uso do Componente';
+    title.style.cssText = 'margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;';
+    container.appendChild(title);
+    const description = document.createElement('p');
+    description.textContent = 'Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:';
+    description.style.cssText = 'margin-bottom: 2rem; color: #666;';
+    container.appendChild(description);
+    const codeSection = document.createElement('div');
+    codeSection.innerHTML = `
+    <h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;">Exemplos de Código</h3>
+    
+    <h4 style="margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600;">HTML (Web Components)</h4>
+    <pre style="background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;voa-container-multi-select id="my-select"&gt;&lt;/voa-container-multi-select&gt;
+
+&lt;script&gt;
+  const select = document.getElementById('my-select');
+  select.items = [
+    { id: '1', label: 'Item 1' },
+    { id: '2', label: 'Item 2' },
+    { id: '3', label: 'Item 3' }
+  ];
+  
+  select.addEventListener('voaSelectionChange', (event) => {
+    console.log('Selecionados:', event.detail);
+  });
+&lt;/script&gt;</code></pre>
+
+    <h4 style="margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600;">React</h4>
+    <pre style="background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>import { VoaContainerMultiSelect } from '@voa-ds/react';
+import { useRef } from 'react';
+
+export function MyComponent() {
+  const selectRef = useRef(null);
+  
+  const items = [
+    { id: '1', label: 'Item 1' },
+    { id: '2', label: 'Item 2' },
+    { id: '3', label: 'Item 3' }
+  ];
+  
+  const handleSelectionChange = (event) => {
+    console.log('Selecionados:', event.detail);
+  };
+  
+  return (
+    &lt;VoaContainerMultiSelect 
+      ref={selectRef}
+      items={items}
+      onVoaSelectionChange={handleSelectionChange}
+    /&gt;
+  );
+}</code></pre>
+
+    <h4 style="margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600;">Angular</h4>
+    <pre style="background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>import { Component } from '@angular/core';
+import { VoaContainerMultiSelect } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    &lt;voa-container-multi-select 
+      [items]="items"
+      (voaSelectionChange)="onSelectionChange(\$event)"
+    &gt;&lt;/voa-container-multi-select&gt;
+  \`
+})
+export class ExampleComponent {
+  items = [
+    { id: '1', label: 'Item 1' },
+    { id: '2', label: 'Item 2' },
+    { id: '3', label: 'Item 3' }
+  ];
+  
+  onSelectionChange(event: CustomEvent&lt;string[]&gt;) {
+    console.log('Selecionados:', event.detail);
+  }
+}</code></pre>
+
+    <h4 style="margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600;">Vue</h4>
+    <pre style="background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>&lt;template&gt;
+  &lt;VoaContainerMultiSelect 
+    :items="items"
+    @voaSelectionChange="onSelectionChange"
+  /&gt;
+&lt;/template&gt;
+
+&lt;script setup lang="ts"&gt;
+import { VoaContainerMultiSelect } from '@voa-ds/vue';
+
+const items = [
+  { id: '1', label: 'Item 1' },
+  { id: '2', label: 'Item 2' },
+  { id: '3', label: 'Item 3' }
+];
+
+const onSelectionChange = (event) => {
+  console.log('Selecionados:', event.detail);
+};
+&lt;/script&gt;</code></pre>
+  `;
+    container.appendChild(codeSection);
+    const note = document.createElement('div');
+    note.style.cssText = 'margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;';
+    note.innerHTML = `
+    <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-containermultiselect--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.
+    </p>
+  `;
+    container.appendChild(note);
+    return container;
+};
+//# sourceMappingURL=voa-container-multi-select.stories.js.map

package/dist/collection/components/voa-select/voa-container-multi-select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"voa-container-multi-select.stories.js","sourceRoot":"","sources":["../../../src/components/voa-select/voa-container-multi-select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../../Stories/styles/voa-select.external.css';\r\n\r\nexport default {\r\n  title: \"Componentes/Formulários/Multi Select\",\r\n  parameters: {\r\n    layout: 'centered',\r\n  },\r\n  argTypes: {\r\n    disabled: {\r\n      control: 'boolean',\r\n      description: 'Define se o componente está desabilitado',\r\n      defaultValue: false,\r\n    },\r\n    placeholder: {\r\n      control: 'text',\r\n      description: 'Texto de placeholder quando não há itens',\r\n      defaultValue: 'Selecione os itens',\r\n    },\r\n    items: {\r\n      control: 'object',\r\n      description: 'Lista de itens para seleção',\r\n      defaultValue: [\r\n        { id: '1', label: 'Item 1' },\r\n        { id: '2', label: 'Item 2' },\r\n        { id: '3', label: 'Item 3' },\r\n        { id: '4', label: 'Item 4' },\r\n        { id: '5', label: 'Item 5' },\r\n      ],\r\n    },\r\n  },\r\n};\r\n\r\nconst Template = (args) => {\r\n  const containerStyle = {\r\n    width: '400px',\r\n    height: '200px',\r\n  };\r\n\r\n  // Criar o elemento dinamicamente para permitir manipulação via script\r\n  setTimeout(() => {\r\n    const component = document.querySelector('#voa-container-multi-select-example') as HTMLElement & {\r\n      items: Array<{id: string, label: string, selected?: boolean}>;\r\n      disabled: boolean;\r\n      placeholder: string;\r\n    };\r\n    \r\n    if (component) {\r\n      // Configurar os itens\r\n      component.items = args.items;\r\n      component.disabled = args.disabled;\r\n      component.placeholder = args.placeholder;\r\n      \r\n      // Escutar eventos de mudança\r\n      component.addEventListener('voaSelectionChange', (event: CustomEvent<string[]>) => {\r\n        console.log('Itens selecionados:', event.detail);\r\n      });\r\n    }\r\n  }, 0);\r\n\r\n  return `\r\n    <div id=\"container-multi-select-story\" style=\"width: ${containerStyle.width}; height: ${containerStyle.height};\">\r\n      <voa-container-multi-select id=\"voa-container-multi-select-example\"></voa-container-multi-select>\r\n    </div>\r\n  `;\r\n};\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n  items: [\r\n    { id: '1', label: 'Item 1' },\r\n    { id: '2', label: 'Item 2' },\r\n    { id: '3', label: 'Item 3' },\r\n    { id: '4', label: 'Item 4' },\r\n    { id: '5', label: 'Item 5' },\r\n  ],\r\n  disabled: false,\r\n  placeholder: 'Selecione os itens',\r\n};\r\n\r\nexport const WithPreselectedItems = Template.bind({});\r\nWithPreselectedItems.args = {\r\n  items: [\r\n    { id: '1', label: 'Item 1', selected: true },\r\n    { id: '2', label: 'Item 2' },\r\n    { id: '3', label: 'Item 3', selected: true },\r\n    { id: '4', label: 'Item 4' },\r\n    { id: '5', label: 'Item 5' },\r\n  ],\r\n  disabled: false,\r\n  placeholder: 'Selecione os itens',\r\n};\r\n\r\nexport const Disabled = Template.bind({});\r\nDisabled.args = {\r\n  items: [\r\n    { id: '1', label: 'Item 1' },\r\n    { id: '2', label: 'Item 2' },\r\n    { id: '3', label: 'Item 3' },\r\n    { id: '4', label: 'Item 4' },\r\n    { id: '5', label: 'Item 5' },\r\n  ],\r\n  disabled: true,\r\n  placeholder: 'Componente desabilitado',\r\n};\r\n\r\nexport const Empty = Template.bind({});\r\nEmpty.args = {\r\n  items: [],\r\n  disabled: false,\r\n  placeholder: 'Não há itens disponíveis',\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage = () => {\r\n  const container = document.createElement('div');\r\n  container.style.cssText = 'padding: 2rem; max-width: 100%;';\r\n  \r\n  const title = document.createElement('h2');\r\n  title.textContent = 'Uso do Componente';\r\n  title.style.cssText = 'margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;';\r\n  container.appendChild(title);\r\n  \r\n  const description = document.createElement('p');\r\n  description.textContent = 'Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:';\r\n  description.style.cssText = 'margin-bottom: 2rem; color: #666;';\r\n  container.appendChild(description);\r\n\r\n  const codeSection = document.createElement('div');\r\n  codeSection.innerHTML = `\r\n    <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplos de Código</h3>\r\n    \r\n    <h4 style=\"margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600;\">HTML (Web Components)</h4>\r\n    <pre style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto;\"><code>&lt;voa-container-multi-select id=\"my-select\"&gt;&lt;/voa-container-multi-select&gt;\r\n\r\n&lt;script&gt;\r\n  const select = document.getElementById('my-select');\r\n  select.items = [\r\n    { id: '1', label: 'Item 1' },\r\n    { id: '2', label: 'Item 2' },\r\n    { id: '3', label: 'Item 3' }\r\n  ];\r\n  \r\n  select.addEventListener('voaSelectionChange', (event) => {\r\n    console.log('Selecionados:', event.detail);\r\n  });\r\n&lt;/script&gt;</code></pre>\r\n\r\n    <h4 style=\"margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600;\">React</h4>\r\n    <pre style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto;\"><code>import { VoaContainerMultiSelect } from '@voa-ds/react';\r\nimport { useRef } from 'react';\r\n\r\nexport function MyComponent() {\r\n  const selectRef = useRef(null);\r\n  \r\n  const items = [\r\n    { id: '1', label: 'Item 1' },\r\n    { id: '2', label: 'Item 2' },\r\n    { id: '3', label: 'Item 3' }\r\n  ];\r\n  \r\n  const handleSelectionChange = (event) => {\r\n    console.log('Selecionados:', event.detail);\r\n  };\r\n  \r\n  return (\r\n    &lt;VoaContainerMultiSelect \r\n      ref={selectRef}\r\n      items={items}\r\n      onVoaSelectionChange={handleSelectionChange}\r\n    /&gt;\r\n  );\r\n}</code></pre>\r\n\r\n    <h4 style=\"margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600;\">Angular</h4>\r\n    <pre style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto;\"><code>import { Component } from '@angular/core';\r\nimport { VoaContainerMultiSelect } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    &lt;voa-container-multi-select \r\n      [items]=\"items\"\r\n      (voaSelectionChange)=\"onSelectionChange(\\$event)\"\r\n    &gt;&lt;/voa-container-multi-select&gt;\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  items = [\r\n    { id: '1', label: 'Item 1' },\r\n    { id: '2', label: 'Item 2' },\r\n    { id: '3', label: 'Item 3' }\r\n  ];\r\n  \r\n  onSelectionChange(event: CustomEvent&lt;string[]&gt;) {\r\n    console.log('Selecionados:', event.detail);\r\n  }\r\n}</code></pre>\r\n\r\n    <h4 style=\"margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600;\">Vue</h4>\r\n    <pre style=\"background: #f5f5f5; padding: 1rem; border-radius: 4px; overflow-x: auto;\"><code>&lt;template&gt;\r\n  &lt;VoaContainerMultiSelect \r\n    :items=\"items\"\r\n    @voaSelectionChange=\"onSelectionChange\"\r\n  /&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script setup lang=\"ts\"&gt;\r\nimport { VoaContainerMultiSelect } from '@voa-ds/vue';\r\n\r\nconst items = [\r\n  { id: '1', label: 'Item 1' },\r\n  { id: '2', label: 'Item 2' },\r\n  { id: '3', label: 'Item 3' }\r\n];\r\n\r\nconst onSelectionChange = (event) => {\r\n  console.log('Selecionados:', event.detail);\r\n};\r\n&lt;/script&gt;</code></pre>\r\n  `;\r\n  container.appendChild(codeSection);\r\n  \r\n  const note = document.createElement('div');\r\n  note.style.cssText = 'margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;';\r\n  note.innerHTML = `\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;\">\r\n      Para ver exemplos de código completos para HTML, React, Angular e Vue, \r\n      <a href=\"?path=/docs/components-containermultiselect--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.\r\n    </p>\r\n  `;\r\n  container.appendChild(note);\r\n  \r\n  return container;\r\n};"]}

package/dist/collection/components/voa-select/voa-select-base.css

@@ -0,0 +1,170 @@
+/* 
+ * 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: block;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  /* Garantir que o dropdown possa aparecer fora do container */
+  overflow: visible;
+}
+
+.voa-select {
+  position: relative;
+  width: 100%;
+  min-height: 48px;
+  box-sizing: border-box;
+  /* Garantir que o dropdown possa aparecer fora do container */
+  overflow: visible;
+}
+
+.voa-select__control {
+  /* Structural styles only - Reset button defaults */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 48px;
+  height: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+  
+  /* Reset button defaults */
+  border: none;
+  outline: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.voa-select--disabled .voa-select__control {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.voa-select__value {
+  /* Structural styles only */
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+}
+
+.voa-select__indicator {
+  /* Structural styles only */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  transition: transform 0.2s ease;
+}
+
+.voa-select--open .voa-select__indicator {
+  transform: rotate(180deg);
+}
+
+.voa-select__dropdown-icon {
+  pointer-events: none;
+  display: block;
+}
+
+.voa-select__dropdown {
+  /* Structural styles only */
+  position: absolute;
+  top: calc(100% + 4px); /* Posicionado logo abaixo do control com 4px de espaço */
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+  box-sizing: border-box;
+  display: block;
+
+  /* Visual styles - White background */
+  background-color: var(--colors-structure-bg-base, #ffffff);
+  
+  /* Outline - border using same token as input field */
+  border: 1.125px solid var(--colors-structure-border-color, #adb5bd);
+  border-radius: 15.75px;
+
+  /* Shadow for elevation */
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15), 
+              0px 0px 0px 0.5px var(--colors-structure-border-color, #adb5bd),
+              inset 0px 0px 0px 1px var(--colors-structure-border-color, #adb5bd);
+
+  /* Padding inside dropdown - vertical only */
+  padding: 8px 0;
+
+  /* Animation - entrance effect */
+  animation: dropdownEnter 0.2s ease-out forwards;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@keyframes dropdownEnter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dropdownExit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+/* Toggle logic handled by class in TSX */
+.voa-select__dropdown--hidden {
+  animation: dropdownExit 0.15s ease-in forwards;
+  display: none;
+  pointer-events: none;
+}
+
+.voa-select__option {
+  /* Structural styles only */
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  /* Padding to prevent text from touching borders */
+  padding: 8px 12px;
+}
+
+.voa-select__option--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Active state (keyboard navigation highlight) */
+.voa-select__option--active {
+  /* Minimal visual feedback for keyboard navigation - external CSS will enhance */
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Selected state */
+.voa-select__option--selected {
+  /* Minimal visual feedback for selected state - external CSS will enhance */
+  background-color: rgba(0, 100, 203, 0.1);
+}