voa-ds-core 1.0.4

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

@@ -0,0 +1,347 @@
+import { html } from "lit";
+import "../../Stories/styles/voa-tag.external.css";
+/**
+ * **VoaTag**
+ * A static component for categorization labels and status indicators.
+ *
+ * CSS Parts:
+ * - `base`: The main container
+ * - `label`: Text wrapper
+ * - `icon-start`: Left icon wrapper
+ * - `icon-end`: Right icon wrapper
+ */
+const meta = {
+    title: "Componentes/Display/Tag",
+    component: 'voa-tag',
+    tags: ['autodocs'],
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1436-769',
+        },
+    },
+    argTypes: {
+        label: { control: 'text' },
+        variant: {
+            control: 'radio',
+            options: ['plain', 'icons'],
+            description: 'Controls layout for icons',
+        },
+        shape: {
+            control: 'radio',
+            options: ['default', 'pill'],
+            description: 'Corner radius style',
+        },
+        size: {
+            control: 'radio',
+            options: ['sm', 'md'],
+        },
+        iconLeft: { control: 'boolean' },
+        iconRight: { control: 'boolean' },
+    },
+    args: {
+        label: 'Design System',
+        variant: 'plain',
+        shape: 'default',
+        size: 'md',
+        iconLeft: false,
+        iconRight: false,
+    },
+    render: (args) => html `
+    <voa-tag
+      .label=${args.label}
+      .variant=${args.variant}
+      .shape=${args.shape}
+      .size=${args.size}
+      .iconLeft=${args.iconLeft}
+      .iconRight=${args.iconRight}
+    >
+      ${args.variant === 'icons' && args.iconLeft ? html `
+        <svg slot="icon-start" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+          <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
+        </svg>
+      ` : ''}
+      ${args.variant === 'icons' && args.iconRight ? html `
+        <svg slot="icon-end" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+          <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+        </svg>
+      ` : ''}
+    </voa-tag>
+  `,
+};
+export default meta;
+export const Default = {};
+export const PillShape = {
+    args: {
+        shape: 'pill',
+        label: 'Beta Feature',
+    },
+};
+export const WithStartIcon = {
+    args: {
+        variant: 'icons',
+        iconLeft: true,
+        label: 'Approved',
+    },
+    render: (args) => html `
+    <voa-tag
+      .label=${args.label}
+      .variant=${args.variant}
+      .shape=${args.shape}
+      .size=${args.size}
+        .iconLeft=${args.iconLeft}
+    >
+      <svg slot="icon-start" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+      </svg>
+    </voa-tag>
+  `,
+};
+export const WithEndIcon = {
+    args: {
+        variant: 'icons',
+        iconRight: true,
+        label: 'Filter',
+    },
+    render: (args) => html `
+    <voa-tag
+      .label=${args.label}
+      .variant=${args.variant}
+      .shape=${args.shape}
+      .size=${args.size}
+        .iconRight=${args.iconRight}
+    >
+      <svg slot="icon-end" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+      </svg>
+    </voa-tag>
+  `,
+};
+export const WithBothIcons = {
+    args: {
+        variant: 'icons',
+        iconLeft: true,
+        iconRight: true,
+        label: 'Complete',
+    },
+    render: (args) => html `
+    <voa-tag
+      .label=${args.label}
+      .variant=${args.variant}
+      .shape=${args.shape}
+      .size=${args.size}
+        .iconLeft=${args.iconLeft}
+        .iconRight=${args.iconRight}
+    >
+      <svg slot="icon-start" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
+      </svg>
+      <svg slot="icon-end" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+      </svg>
+    </voa-tag>
+  `,
+};
+export const Small = {
+    args: {
+        size: 'sm',
+        label: 'v1.0.0',
+        shape: 'pill',
+    },
+};
+export const AllVariants = {
+    render: () => html `
+    <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
+      <voa-tag label="Default MD"></voa-tag>
+      <voa-tag label="Default SM" size="sm"></voa-tag>
+      <voa-tag label="Pill MD" shape="pill"></voa-tag>
+      <voa-tag label="Pill SM" shape="pill" size="sm"></voa-tag>
+      <voa-tag variant="icons" label="Icons" ?iconLeft=${true} ?iconRight=${true}>
+        <voa-tag variant="icons" label="Icons" .iconLeft=${true} .iconRight=${true}>
+        <svg slot="icon-start" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+          <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2z" />
+        </svg>
+        <svg slot="icon-end" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+          <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+        </svg>
+      </voa-tag>
+    </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
+<!-- Tag básica -->
+<voa-tag label="Design System"></voa-tag>
+
+<!-- Tag com formato pill -->
+<voa-tag label="Beta Feature" shape="pill"></voa-tag>
+
+<!-- Tag pequena -->
+<voa-tag label="v1.0.0" size="sm" shape="pill"></voa-tag>
+
+<!-- Tag com ícone à esquerda -->
+<voa-tag variant="icons" label="Approved" icon-left>
+  <svg slot="icon-start" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+  </svg>
+</voa-tag>
+
+<!-- Tag com ícone à direita -->
+<voa-tag variant="icons" label="Filter" icon-right>
+  <svg slot="icon-end" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+  </svg>
+</voa-tag>
+\`\`\`
+
+### React
+
+\`\`\`tsx
+import { VoaTag } from '@voa-ds/react';
+
+function MyComponent() {
+  return (
+    <>
+      {/* Tag básica */}
+      <VoaTag label="Design System" />
+
+      {/* Tag com formato pill */}
+      <VoaTag label="Beta Feature" shape="pill" />
+
+      {/* Tag pequena */}
+      <VoaTag label="v1.0.0" size="sm" shape="pill" />
+
+      {/* Tag com ícone à esquerda */}
+      <VoaTag variant="icons" label="Approved" iconLeft>
+        <svg slot="icon-start" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+          <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+        </svg>
+      </VoaTag>
+
+      {/* Tag com ícone à direita */}
+      <VoaTag variant="icons" label="Filter" iconRight>
+        <svg slot="icon-end" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+          <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+        </svg>
+      </VoaTag>
+    </>
+  );
+}
+\`\`\`
+
+### Angular
+
+\`\`\`typescript
+import { VoaTag } from '@voa-ds/angular';
+
+@Component({
+  selector: 'app-example',
+  template: \`
+    <!-- Tag básica -->
+    <voa-tag label="Design System"></voa-tag>
+
+    <!-- Tag com formato pill -->
+    <voa-tag label="Beta Feature" shape="pill"></voa-tag>
+
+    <!-- Tag pequena -->
+    <voa-tag label="v1.0.0" size="sm" shape="pill"></voa-tag>
+
+    <!-- Tag com ícone à esquerda -->
+    <voa-tag variant="icons" label="Approved" [iconLeft]="true">
+      <svg slot="icon-start" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+      </svg>
+    </voa-tag>
+  \`
+})
+export class ExampleComponent {}
+\`\`\`
+
+### Vue
+
+\`\`\`vue
+<template>
+  <div>
+    <!-- Tag básica -->
+    <VoaTag label="Design System" />
+
+    <!-- Tag com formato pill -->
+    <VoaTag label="Beta Feature" shape="pill" />
+
+    <!-- Tag pequena -->
+    <VoaTag label="v1.0.0" size="sm" shape="pill" />
+
+    <!-- Tag com ícone à esquerda -->
+    <VoaTag variant="icons" label="Approved" :icon-left="true">
+      <svg slot="icon-start" viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%">
+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+      </svg>
+    </VoaTag>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { VoaTag } 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>
+      <div style="display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 2rem;">
+        <voa-tag label="Design System"></voa-tag>
+        <voa-tag label="Beta Feature" shape="pill"></voa-tag>
+        <voa-tag label="v1.0.0" size="sm" shape="pill"></voa-tag>
+      </div>
+      <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-voatag--docs#usage" style="color: #0064cb; text-decoration: none; font-weight: 600;">clique aqui para ir à página Docs</a>.</p>
+      </div>
+    </div>
+  `
+};
+//# sourceMappingURL=voa-tag.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"voa-tag.stories.js","sourceRoot":"","sources":["../../../src/components/voa-tag/voa-tag.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-tag.external.css';\r\n\r\n/**\r\n * **VoaTag**\r\n * A static component for categorization labels and status indicators.\r\n *\r\n * CSS Parts:\r\n * - `base`: The main container\r\n * - `label`: Text wrapper\r\n * - `icon-start`: Left icon wrapper\r\n * - `icon-end`: Right icon wrapper\r\n */\r\nconst meta = {\r\n  title: \"Componentes/Display/Tag\",\r\n  component: 'voa-tag',\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=1436-769',\r\n    },\r\n  },\r\n  argTypes: {\r\n    label: { control: 'text' },\r\n    variant: {\r\n      control: 'radio',\r\n      options: ['plain', 'icons'],\r\n      description: 'Controls layout for icons',\r\n    },\r\n    shape: {\r\n      control: 'radio',\r\n      options: ['default', 'pill'],\r\n      description: 'Corner radius style',\r\n    },\r\n    size: {\r\n      control: 'radio',\r\n      options: ['sm', 'md'],\r\n    },\r\n    iconLeft: { control: 'boolean' },\r\n    iconRight: { control: 'boolean' },\r\n  },\r\n  args: {\r\n    label: 'Design System',\r\n    variant: 'plain',\r\n    shape: 'default',\r\n    size: 'md',\r\n    iconLeft: false,\r\n    iconRight: false,\r\n  },\r\n  render: (args) => html`\r\n    <voa-tag\r\n      .label=${args.label}\r\n      .variant=${args.variant}\r\n      .shape=${args.shape}\r\n      .size=${args.size}\r\n      .iconLeft=${args.iconLeft}\r\n      .iconRight=${args.iconRight}\r\n    >\r\n      ${args.variant === 'icons' && args.iconLeft ? html`\r\n        <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n          <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n        </svg>\r\n      ` : ''}\r\n      ${args.variant === 'icons' && args.iconRight ? html`\r\n        <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n          <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n        </svg>\r\n      ` : ''}\r\n    </voa-tag>\r\n  `,\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\nexport const Default: StoryObj = {};\r\n\r\nexport const PillShape: StoryObj = {\r\n  args: {\r\n    shape: 'pill',\r\n    label: 'Beta Feature',\r\n  },\r\n};\r\n\r\nexport const WithStartIcon: StoryObj = {\r\n  args: {\r\n    variant: 'icons',\r\n    iconLeft: true,\r\n    label: 'Approved',\r\n  },\r\n  render: (args) => html`\r\n    <voa-tag\r\n      .label=${args.label}\r\n      .variant=${args.variant}\r\n      .shape=${args.shape}\r\n      .size=${args.size}\r\n        .iconLeft=${args.iconLeft}\r\n    >\r\n      <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </svg>\r\n    </voa-tag>\r\n  `,\r\n};\r\n\r\nexport const WithEndIcon: StoryObj = {\r\n  args: {\r\n    variant: 'icons',\r\n    iconRight: true,\r\n    label: 'Filter',\r\n  },\r\n  render: (args) => html`\r\n    <voa-tag\r\n      .label=${args.label}\r\n      .variant=${args.variant}\r\n      .shape=${args.shape}\r\n      .size=${args.size}\r\n        .iconRight=${args.iconRight}\r\n    >\r\n      <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n        <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n      </svg>\r\n    </voa-tag>\r\n  `,\r\n};\r\n\r\nexport const WithBothIcons: StoryObj = {\r\n  args: {\r\n    variant: 'icons',\r\n    iconLeft: true,\r\n    iconRight: true,\r\n    label: 'Complete',\r\n  },\r\n  render: (args) => html`\r\n    <voa-tag\r\n      .label=${args.label}\r\n      .variant=${args.variant}\r\n      .shape=${args.shape}\r\n      .size=${args.size}\r\n        .iconLeft=${args.iconLeft}\r\n        .iconRight=${args.iconRight}\r\n    >\r\n      <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n        <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n      </svg>\r\n      <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </svg>\r\n    </voa-tag>\r\n  `,\r\n};\r\n\r\nexport const Small: StoryObj = {\r\n  args: {\r\n    size: 'sm',\r\n    label: 'v1.0.0',\r\n    shape: 'pill',\r\n  },\r\n};\r\n\r\nexport const AllVariants: StoryObj = {\r\n  render: () => html`\r\n    <div style=\"display: flex; flex-wrap: wrap; gap: 16px; align-items: center;\">\r\n      <voa-tag label=\"Default MD\"></voa-tag>\r\n      <voa-tag label=\"Default SM\" size=\"sm\"></voa-tag>\r\n      <voa-tag label=\"Pill MD\" shape=\"pill\"></voa-tag>\r\n      <voa-tag label=\"Pill SM\" shape=\"pill\" size=\"sm\"></voa-tag>\r\n      <voa-tag variant=\"icons\" label=\"Icons\" ?iconLeft=${true} ?iconRight=${true}>\r\n        <voa-tag variant=\"icons\" label=\"Icons\" .iconLeft=${true} .iconRight=${true}>\r\n        <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n          <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2z\" />\r\n        </svg>\r\n        <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n          <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n        </svg>\r\n      </voa-tag>\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: StoryObj = {\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<!-- Tag básica -->\r\n<voa-tag label=\"Design System\"></voa-tag>\r\n\r\n<!-- Tag com formato pill -->\r\n<voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag pequena -->\r\n<voa-tag label=\"v1.0.0\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag com ícone à esquerda -->\r\n<voa-tag variant=\"icons\" label=\"Approved\" icon-left>\r\n  <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n    <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n  </svg>\r\n</voa-tag>\r\n\r\n<!-- Tag com ícone à direita -->\r\n<voa-tag variant=\"icons\" label=\"Filter\" icon-right>\r\n  <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n  </svg>\r\n</voa-tag>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaTag } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <>\r\n      {/* Tag básica */}\r\n      <VoaTag label=\"Design System\" />\r\n\r\n      {/* Tag com formato pill */}\r\n      <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n      {/* Tag pequena */}\r\n      <VoaTag label=\"v1.0.0\" size=\"sm\" shape=\"pill\" />\r\n\r\n      {/* Tag com ícone à esquerda */}\r\n      <VoaTag variant=\"icons\" label=\"Approved\" iconLeft>\r\n        <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n          <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n        </svg>\r\n      </VoaTag>\r\n\r\n      {/* Tag com ícone à direita */}\r\n      <VoaTag variant=\"icons\" label=\"Filter\" iconRight>\r\n        <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n        </svg>\r\n      </VoaTag>\r\n    </>\r\n  );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaTag } from '@voa-ds/angular';\r\n\r\n@Component({\r\n  selector: 'app-example',\r\n  template: \\`\r\n    <!-- Tag básica -->\r\n    <voa-tag label=\"Design System\"></voa-tag>\r\n\r\n    <!-- Tag com formato pill -->\r\n    <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n    <!-- Tag pequena -->\r\n    <voa-tag label=\"v1.0.0\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n    <!-- Tag com ícone à esquerda -->\r\n    <voa-tag variant=\"icons\" label=\"Approved\" [iconLeft]=\"true\">\r\n      <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </svg>\r\n    </voa-tag>\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  <div>\r\n    <!-- Tag básica -->\r\n    <VoaTag label=\"Design System\" />\r\n\r\n    <!-- Tag com formato pill -->\r\n    <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n    <!-- Tag pequena -->\r\n    <VoaTag label=\"v1.0.0\" size=\"sm\" shape=\"pill\" />\r\n\r\n    <!-- Tag com ícone à esquerda -->\r\n    <VoaTag variant=\"icons\" label=\"Approved\" :icon-left=\"true\">\r\n      <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n        <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n      </svg>\r\n    </VoaTag>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaTag } 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      <div style=\"display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 2rem;\">\r\n        <voa-tag label=\"Design System\"></voa-tag>\r\n        <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n        <voa-tag label=\"v1.0.0\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n      </div>\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-voatag--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-text-area/voa-text-area.css

@@ -0,0 +1,68 @@
+/* UNSTYLED PATTERN: Structural CSS only */
+
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+.label-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  box-sizing: border-box;
+}
+
+.label-text {
+  flex: 1;
+}
+
+.textarea-container {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  /* Needed for border-radius clipping */
+  display: flex;
+  /* Flex ensures child textarea fills height */
+  flex-direction: column;
+}
+
+textarea {
+  flex: 1;
+  /* Fills the container */
+  width: 100%;
+  /* Fills width */
+  height: 100%;
+  /* Fills height */
+  border: none;
+  outline: none;
+  background: transparent;
+  resize: none;
+  /* Disable native resize */
+  box-sizing: border-box;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+
+.resize-handle {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 12px;
+  height: 12px;
+  cursor: nwse-resize;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-top: 4px;
+}
+
+.character-counter {
+  margin-left: auto;
+  /* Push to right */
+}