voa-ds-core 1.0.4

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

@@ -0,0 +1,363 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "../../Stories/styles/voa-radio.external.css";
+/**
+ * Componente Radio Button do Voa Design System.
+ *
+ * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1182-56
+ *
+ * Este é o componente base do radio (apenas o indicador visual, 20px).
+ * Para opções com label, use o componente voa-option.
+ *
+ * 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/Radio",
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1182-56',
+        },
+    },
+    render: (args) => html `
+    <voa-radio
+      ?checked=${args.checked}
+      ?disabled=${args.disabled}
+      .name=${ifDefined(args.name)}
+      .value=${ifDefined(args.value)}
+      @radioChange=${() => console.log('Radio changed')}
+      ></voa-radio>
+    `,
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'Se verdadeiro, o radio button estará selecionado',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Se verdadeiro, o radio button estará desabilitado',
+        },
+        name: {
+            control: 'text',
+            description: 'Nome do grupo de radio buttons (usado para agrupamento)',
+        },
+        value: {
+            control: 'text',
+            description: 'Valor do radio button quando selecionado',
+        },
+    },
+    args: {
+        checked: false,
+        disabled: false,
+        name: 'exemplo',
+        value: 'opcao1',
+    },
+};
+export default meta;
+/**
+ * Estado padrão do radio (não selecionado, habilitado)
+ */
+export const Default = {
+    args: {
+        checked: false,
+        disabled: false,
+        name: 'default-group',
+        value: 'opcao1',
+    },
+};
+/**
+ * Radio selecionado
+ */
+export const Checked = {
+    args: {
+        checked: true,
+        disabled: false,
+        name: 'checked-group',
+        value: 'opcao2',
+    },
+};
+/**
+ * Radio desabilitado (não selecionado)
+ */
+export const Disabled = {
+    args: {
+        checked: false,
+        disabled: true,
+        name: 'disabled-group',
+        value: 'opcao3',
+    },
+};
+/**
+ * Radio desabilitado e selecionado
+ */
+export const DisabledChecked = {
+    args: {
+        checked: true,
+        disabled: true,
+        name: 'disabled-checked-group',
+        value: 'opcao4',
+    },
+};
+/**
+ * Todos os estados do radio conforme Figma
+ */
+export const AllStates = {
+    render: () => html `
+    <div style="display: grid; grid-template-columns: repeat(2, auto); gap: 24px; align-items: center;">
+      <div style="display:flex;flex-direction:column;gap:16px;">
+        <h4 style="margin:0 0 8px 0">Unchecked</h4>
+        <voa-radio name="all-states-unchecked" value="default"></voa-radio>
+        <voa-radio name="all-states-unchecked" value="hover" style="cursor:pointer"></voa-radio>
+        <voa-radio name="all-states-unchecked" value="focused" tabindex="0"></voa-radio>
+        <voa-radio name="all-states-unchecked" value="disabled" ?disabled=${true}></voa-radio>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:16px;">
+        <h4 style="margin:0 0 8px 0">Checked</h4>
+        <voa-radio name="all-states-checked" value="default" ?checked=${true}></voa-radio>
+        <voa-radio name="all-states-checked" value="hover" ?checked=${true} style="cursor:pointer"></voa-radio>
+        <voa-radio name="all-states-checked" value="focused" ?checked=${true} tabindex="0"></voa-radio>
+        <voa-radio name="all-states-checked" value="disabled" ?checked=${true} ?disabled=${true}></voa-radio>
+      </div>
+    </div>
+  `,
+};
+/**
+ * Grupo de radios interativos
+ */
+export const Group = {
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:12px;">
+      <voa-radio name="group" value="opcao1"></voa-radio>
+      <voa-radio name="group" value="opcao2" ?checked=${true}></voa-radio>
+      <voa-radio name="group" value="opcao3"></voa-radio>
+      <voa-radio name="group" value="opcao4" ?disabled=${true}></voa-radio>
+    </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
+<!-- Radio básico -->
+<voa-radio 
+  name="opcao"
+  value="opcao1"
+  checked
+  onradioChange={(e) => console.log('Changed', e.detail)}
+></voa-radio>
+
+<!-- Grupo de radios -->
+<voa-radio name="opcao" value="opcao1" checked></voa-radio>
+<voa-radio name="opcao" value="opcao2"></voa-radio>
+<voa-radio name="opcao" value="opcao3"></voa-radio>
+
+<!-- Radio desabilitado -->
+<voa-radio 
+  name="opcao"
+  value="opcao4"
+  disabled
+></voa-radio>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaRadio } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [selected, setSelected] = useState('opcao1');
+
+  const handleChange = (e: CustomEvent<{ checked: boolean; value: string; name: string }>) => {
+    if (e.detail.checked) {
+      setSelected(e.detail.value);
+    }
+    console.log('Changed', e.detail);
+  };
+
+  return (
+    <>
+      {/* Grupo de radios */}
+      <VoaRadio
+        name="opcao"
+        value="opcao1"
+        checked={selected === 'opcao1'}
+        onRadioChange={handleChange}
+      />
+      <VoaRadio
+        name="opcao"
+        value="opcao2"
+        checked={selected === 'opcao2'}
+        onRadioChange={handleChange}
+      />
+      <VoaRadio
+        name="opcao"
+        value="opcao3"
+        checked={selected === 'opcao3'}
+        onRadioChange={handleChange}
+      />
+
+      {/* Radio desabilitado */}
+      <VoaRadio
+        name="opcao"
+        value="opcao4"
+        disabled
+      />
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaRadio } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Grupo de radios -->
+    <voa-radio
+      [name]="'opcao'"
+      [value]="'opcao1'"
+      [checked]="selected === 'opcao1'"
+      (radioChange)="handleChange($event)"
+    ></voa-radio>
+    <voa-radio
+      [name]="'opcao'"
+      [value]="'opcao2'"
+      [checked]="selected === 'opcao2'"
+      (radioChange)="handleChange($event)"
+    ></voa-radio>
+    <voa-radio
+      [name]="'opcao'"
+      [value]="'opcao3'"
+      [checked]="selected === 'opcao3'"
+      (radioChange)="handleChange($event)"
+    ></voa-radio>
+
+    <!-- Radio desabilitado -->
+    <voa-radio
+      [name]="'opcao'"
+      [value]="'opcao4'"
+      [disabled]="true"
+    ></voa-radio>
+  \`
+})
+export class ExampleComponent {
+  selected = 'opcao1';
+
+  handleChange(event: CustomEvent<{ checked: boolean; value: string; name: string }>) {
+    if (event.detail.checked) {
+      this.selected = event.detail.value;
+    }
+    console.log('Changed', event.detail);
+  }
+}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Grupo de radios -->
+    <VoaRadio
+      name="opcao"
+      value="opcao1"
+      :checked="selected === 'opcao1'"
+      @radioChange="handleChange"
+    />
+    <VoaRadio
+      name="opcao"
+      value="opcao2"
+      :checked="selected === 'opcao2'"
+      @radioChange="handleChange"
+    />
+    <VoaRadio
+      name="opcao"
+      value="opcao3"
+      :checked="selected === 'opcao3'"
+      @radioChange="handleChange"
+    />
+
+    <!-- Radio desabilitado -->
+    <VoaRadio
+      name="opcao"
+      value="opcao4"
+      :disabled="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VoaRadio } from '@voa-ds/vue';
+
+const selected = ref('opcao1');
+
+const handleChange = (event: CustomEvent<{ checked: boolean; value: string; name: string }>) => {
+  if (event.detail.checked) {
+    selected.value = event.detail.value;
+  }
+  console.log('Changed', event.detail);
+};
+</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-radio name="example" value="opcao1" ?checked=${true} style="margin-bottom: 2rem;"></voa-radio>
+      <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-voaradio--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-radio.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-radio.stories.js","sourceRoot":"","sources":["../../../src/components/voa-radio/voa-radio.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 type { VoaRadio } from './voa-radio';\r\nimport '../../Stories/styles/voa-radio.external.css';\r\n\r\n/**\r\n * Componente Radio Button do Voa Design System.\r\n * \r\n * Baseado no design do Figma: https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1182-56\r\n * \r\n * Este é o componente base do radio (apenas o indicador visual, 20px).\r\n * Para opções com label, use o componente voa-option.\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/Radio\",\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=1182-56',\r\n    },\r\n  },\r\n  render: (args: VoaRadio) => html`\r\n    <voa-radio\r\n      ?checked=${args.checked}\r\n      ?disabled=${args.disabled}\r\n      .name=${ifDefined(args.name)}\r\n      .value=${ifDefined(args.value)}\r\n      @radioChange=${() => console.log('Radio changed')}\r\n      ></voa-radio>\r\n    `,\r\n  argTypes: {\r\n    checked: {\r\n      control: 'boolean',\r\n      description: 'Se verdadeiro, o radio button estará selecionado',\r\n    },\r\n    disabled: {\r\n      control: 'boolean',\r\n      description: 'Se verdadeiro, o radio button estará desabilitado',\r\n    },\r\n    name: {\r\n      control: 'text',\r\n      description: 'Nome do grupo de radio buttons (usado para agrupamento)',\r\n    },\r\n    value: {\r\n      control: 'text',\r\n      description: 'Valor do radio button quando selecionado',\r\n    },\r\n  },\r\n  args: {\r\n    checked: false,\r\n    disabled: false,\r\n    name: 'exemplo',\r\n    value: 'opcao1',\r\n  },\r\n} as Meta<VoaRadio>;\r\n\r\nexport default meta;\r\ntype Story = StoryObj<VoaRadio>;\r\n\r\n/**\r\n * Estado padrão do radio (não selecionado, habilitado)\r\n */\r\nexport const Default: Story = {\r\n  args: {\r\n    checked: false,\r\n    disabled: false,\r\n    name: 'default-group',\r\n    value: 'opcao1',\r\n  },\r\n};\r\n\r\n/**\r\n * Radio selecionado\r\n */\r\nexport const Checked: Story = {\r\n  args: {\r\n    checked: true,\r\n    disabled: false,\r\n    name: 'checked-group',\r\n    value: 'opcao2',\r\n  },\r\n};\r\n\r\n/**\r\n * Radio desabilitado (não selecionado)\r\n */\r\nexport const Disabled: Story = {\r\n  args: {\r\n    checked: false,\r\n    disabled: true,\r\n    name: 'disabled-group',\r\n    value: 'opcao3',\r\n  },\r\n};\r\n\r\n/**\r\n * Radio desabilitado e selecionado\r\n */\r\nexport const DisabledChecked: Story = {\r\n  args: {\r\n    checked: true,\r\n    disabled: true,\r\n    name: 'disabled-checked-group',\r\n    value: 'opcao4',\r\n  },\r\n};\r\n\r\n/**\r\n * Todos os estados do radio conforme Figma\r\n */\r\nexport const AllStates: Story = {\r\n  render: () => html`\r\n    <div style=\"display: grid; grid-template-columns: repeat(2, auto); gap: 24px; align-items: center;\">\r\n      <div style=\"display:flex;flex-direction:column;gap:16px;\">\r\n        <h4 style=\"margin:0 0 8px 0\">Unchecked</h4>\r\n        <voa-radio name=\"all-states-unchecked\" value=\"default\"></voa-radio>\r\n        <voa-radio name=\"all-states-unchecked\" value=\"hover\" style=\"cursor:pointer\"></voa-radio>\r\n        <voa-radio name=\"all-states-unchecked\" value=\"focused\" tabindex=\"0\"></voa-radio>\r\n        <voa-radio name=\"all-states-unchecked\" value=\"disabled\" ?disabled=${true}></voa-radio>\r\n      </div>\r\n      <div style=\"display:flex;flex-direction:column;gap:16px;\">\r\n        <h4 style=\"margin:0 0 8px 0\">Checked</h4>\r\n        <voa-radio name=\"all-states-checked\" value=\"default\" ?checked=${true}></voa-radio>\r\n        <voa-radio name=\"all-states-checked\" value=\"hover\" ?checked=${true} style=\"cursor:pointer\"></voa-radio>\r\n        <voa-radio name=\"all-states-checked\" value=\"focused\" ?checked=${true} tabindex=\"0\"></voa-radio>\r\n        <voa-radio name=\"all-states-checked\" value=\"disabled\" ?checked=${true} ?disabled=${true}></voa-radio>\r\n      </div>\r\n    </div>\r\n  `,\r\n};\r\n\r\n/**\r\n * Grupo de radios interativos\r\n */\r\nexport const Group: Story = {\r\n  render: () => html`\r\n    <div style=\"display:flex;flex-direction:column;gap:12px;\">\r\n      <voa-radio name=\"group\" value=\"opcao1\"></voa-radio>\r\n      <voa-radio name=\"group\" value=\"opcao2\" ?checked=${true}></voa-radio>\r\n      <voa-radio name=\"group\" value=\"opcao3\"></voa-radio>\r\n      <voa-radio name=\"group\" value=\"opcao4\" ?disabled=${true}></voa-radio>\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<!-- Radio básico -->\r\n<voa-radio \r\n  name=\"opcao\"\r\n  value=\"opcao1\"\r\n  checked\r\n  onradioChange={(e) => console.log('Changed', e.detail)}\r\n></voa-radio>\r\n\r\n<!-- Grupo de radios -->\r\n<voa-radio name=\"opcao\" value=\"opcao1\" checked></voa-radio>\r\n<voa-radio name=\"opcao\" value=\"opcao2\"></voa-radio>\r\n<voa-radio name=\"opcao\" value=\"opcao3\"></voa-radio>\r\n\r\n<!-- Radio desabilitado -->\r\n<voa-radio \r\n  name=\"opcao\"\r\n  value=\"opcao4\"\r\n  disabled\r\n></voa-radio>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaRadio } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MyComponent() {\r\n  const [selected, setSelected] = useState('opcao1');\r\n\r\n  const handleChange = (e: CustomEvent<{ checked: boolean; value: string; name: string }>) => {\r\n    if (e.detail.checked) {\r\n      setSelected(e.detail.value);\r\n    }\r\n    console.log('Changed', e.detail);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      {/* Grupo de radios */}\r\n      <VoaRadio\r\n        name=\"opcao\"\r\n        value=\"opcao1\"\r\n        checked={selected === 'opcao1'}\r\n        onRadioChange={handleChange}\r\n      />\r\n      <VoaRadio\r\n        name=\"opcao\"\r\n        value=\"opcao2\"\r\n        checked={selected === 'opcao2'}\r\n        onRadioChange={handleChange}\r\n      />\r\n      <VoaRadio\r\n        name=\"opcao\"\r\n        value=\"opcao3\"\r\n        checked={selected === 'opcao3'}\r\n        onRadioChange={handleChange}\r\n      />\r\n\r\n      {/* Radio desabilitado */}\r\n      <VoaRadio\r\n        name=\"opcao\"\r\n        value=\"opcao4\"\r\n        disabled\r\n      />\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaRadio } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Grupo de radios -->\r\n    <voa-radio\r\n      [name]=\"'opcao'\"\r\n      [value]=\"'opcao1'\"\r\n      [checked]=\"selected === 'opcao1'\"\r\n      (radioChange)=\"handleChange($event)\"\r\n    ></voa-radio>\r\n    <voa-radio\r\n      [name]=\"'opcao'\"\r\n      [value]=\"'opcao2'\"\r\n      [checked]=\"selected === 'opcao2'\"\r\n      (radioChange)=\"handleChange($event)\"\r\n    ></voa-radio>\r\n    <voa-radio\r\n      [name]=\"'opcao'\"\r\n      [value]=\"'opcao3'\"\r\n      [checked]=\"selected === 'opcao3'\"\r\n      (radioChange)=\"handleChange($event)\"\r\n    ></voa-radio>\r\n\r\n    <!-- Radio desabilitado -->\r\n    <voa-radio\r\n      [name]=\"'opcao'\"\r\n      [value]=\"'opcao4'\"\r\n      [disabled]=\"true\"\r\n    ></voa-radio>\r\n  \\`\r\n})\r\nexport class ExampleComponent {\r\n  selected = 'opcao1';\r\n\r\n  handleChange(event: CustomEvent<{ checked: boolean; value: string; name: string }>) {\r\n    if (event.detail.checked) {\r\n      this.selected = event.detail.value;\r\n    }\r\n    console.log('Changed', event.detail);\r\n  }\r\n}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n  <div>\r\n    <!-- Grupo de radios -->\r\n    <VoaRadio\r\n      name=\"opcao\"\r\n      value=\"opcao1\"\r\n      :checked=\"selected === 'opcao1'\"\r\n      @radioChange=\"handleChange\"\r\n    />\r\n    <VoaRadio\r\n      name=\"opcao\"\r\n      value=\"opcao2\"\r\n      :checked=\"selected === 'opcao2'\"\r\n      @radioChange=\"handleChange\"\r\n    />\r\n    <VoaRadio\r\n      name=\"opcao\"\r\n      value=\"opcao3\"\r\n      :checked=\"selected === 'opcao3'\"\r\n      @radioChange=\"handleChange\"\r\n    />\r\n\r\n    <!-- Radio desabilitado -->\r\n    <VoaRadio\r\n      name=\"opcao\"\r\n      value=\"opcao4\"\r\n      :disabled=\"true\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { VoaRadio } from '@voa-ds/vue';\r\n\r\nconst selected = ref('opcao1');\r\n\r\nconst handleChange = (event: CustomEvent<{ checked: boolean; value: string; name: string }>) => {\r\n  if (event.detail.checked) {\r\n    selected.value = event.detail.value;\r\n  }\r\n  console.log('Changed', event.detail);\r\n};\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-radio name=\"example\" value=\"opcao1\" ?checked=${true} style=\"margin-bottom: 2rem;\"></voa-radio>\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-voaradio--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}; "]}

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

@@ -0,0 +1,177 @@
+/* 
+ * 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%;
+  box-sizing: border-box;
+}
+
+.voa-container-multi-select {
+  position: relative;
+  width: 100%;
+  min-height: 48px; /* Altura mínima equivalente ao input */
+  box-sizing: border-box;
+}
+
+.voa-container-multi-select__inner {
+  position: relative;
+  width: 100%;
+  min-height: inherit;
+  box-sizing: border-box;
+}
+
+.voa-container-multi-select__items {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--structure-large-spacing-xs, 4px); /* Gap entre itens/badges - Figma: spacing/spacing-xs */
+  width: 100%;
+  min-height: inherit;
+  box-sizing: border-box;
+}
+
+.voa-container-multi-select__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/* ============================================
+   ESTILOS PARA BADGES ANINHADOS
+   ============================================ */
+/* 
+ * ⚠️ EXCEÇÃO AO PADRÃO "UNSTYLED":
+ * 
+ * Normalmente, estilos visuais devem ser aplicados externamente via CSS Parts API.
+ * Porém, quando um componente incorpora outro componente e ambos usam Shadow DOM,
+ * CSS externo NÃO pode atravessar os limites do Shadow DOM.
+ * 
+ * SOLUÇÃO (conforme documentação.md):
+ * Os estilos para o badge incorporado devem ser aplicados DENTRO deste CSS
+ * (mesmo contexto Shadow DOM), usando design tokens semânticos.
+ * 
+ * Referência: documentation.md - "⚠️ CRITICAL: Styling Embedded Components"
+ */
+
+/* Wrapper do badge para permitir clique */
+.voa-container-multi-select__badge-wrapper {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+/* Badge incorporado - estilos visuais usando design tokens */
+.voa-container-multi-select__badge-wrapper voa-badge {
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+/* Badge base - estilos visuais usando design tokens */
+/* Nota: Usamos seletores específicos para garantir que os estilos sejam aplicados
+   sobre os estilos padrão do badge, já que ambos os componentes usam Shadow DOM */
+.voa-container-multi-select__badge-wrapper voa-badge::part(base) {
+  /* Background - Figma: brand-base with 15% opacity */
+  background-color: var(--branding-coi-colors-light-primary-light-opacity-15, rgba(0, 100, 203, 0.15));
+  
+  /* Border - Figma: 1px dashed brand-base */
+  border: 1px dashed var(--branding-coi-colors-light-primary-light, #0064cb);
+  
+  /* Border-radius - Figma: pill shape (1024px from tokens) */
+  border-radius: var(--structure-large-radius-round, 1024px);
+  
+  /* Padding - Figma: 2px vertical, 4px horizontal */
+  padding-block: var(--structure-large-spacing-xxs, 2px);
+  padding-inline: var(--structure-large-spacing-xs, 4px);
+  
+  /* Tipografia - Figma: Lato Regular 16px / 24px */
+  font-family: var(--branding-coi-type-family-sans, 'Lato', sans-serif);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  font-style: normal;
+  
+  /* Cor do texto - Figma: brand-base */
+  color: var(--branding-coi-colors-light-primary-light, #0064cb);
+  
+  /* Box-sizing */
+  box-sizing: border-box;
+  
+  /* Transições */
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+  
+  /* Display e layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--structure-large-spacing-xxs, 2px);
+}
+
+/* Hover state do badge */
+.voa-container-multi-select__badge-wrapper:hover voa-badge::part(base) {
+  background-color: var(--branding-coi-colors-light-primary-light-opacity-25, rgba(0, 100, 203, 0.25));
+  border-color: var(--branding-coi-colors-light-primary-light-400, #0071c8);
+}
+
+/* Label do badge */
+.voa-container-multi-select__badge-wrapper voa-badge::part(label) {
+  color: var(--branding-coi-colors-light-primary-light, #0064cb);
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+/* Ícone leading - esconder quando não necessário */
+.voa-container-multi-select__badge-wrapper voa-badge::part(icon-leading) {
+  display: none;
+}
+
+/* Ícone trailing (close) do badge */
+.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--branding-coi-colors-light-primary-light, #0064cb);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin-left: var(--structure-large-spacing-xxs, 2px);
+}
+
+.voa-container-multi-select__badge-wrapper voa-badge::part(icon-trailing) svg {
+  width: 12px;
+  height: 12px;
+  display: block;
+  flex-shrink: 0;
+}
+
+/* Hover no ícone close */
+.voa-container-multi-select__badge-wrapper:hover voa-badge::part(icon-trailing) {
+  opacity: 0.8;
+}
+
+/* Disabled state */
+.voa-container-multi-select--disabled .voa-container-multi-select__badge-wrapper voa-badge::part(base) {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.voa-container-multi-select__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: inherit;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.voa-container-multi-select--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}