voa-ds-core 1.0.30 → 1.0.32

package/dist/custom-elements/p-DMLFTaAS.js.map

@@ -1 +0,0 @@
-{"file":"p-DMLFTaAS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-button/voa-button.css?tag=voa-button&encapsulation=shadow","src/components/voa-button/voa-button.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n * \r\n * IMPORTANT: NÃO incluir cores, fontes, espaçamentos ou valores hardcoded.\r\n * Apenas estrutura: display, position, flexbox, grid, box-sizing, cursor, etc.\r\n */\r\n\r\n:host {\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* Cursor must be on :host because pointer-events:none on button \r\n   causes cursor to \"pass through\" to parent element */\r\n:host([disabled]),\r\n:host([loading]) {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.voa-button {\r\n  /* APENAS estilos estruturais */\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  border: none; /* Remove borda padrão que afeta box-model */\r\n  background: transparent; /* Garante que não há fundo padrão */\r\n  padding: 0; /* Reset de padding */\r\n  margin: 0; /* Reset de margin */\r\n  \r\n  /* Interatividade básica */\r\n  cursor: pointer;\r\n  user-select: none;\r\n  \r\n  /* Layout Flex */\r\n  flex-direction: row;\r\n  flex-wrap: nowrap;\r\n  gap: 0; /* Gap padrão zerado, definido externamente */\r\n}\r\n\r\n.voa-button:disabled,\r\n.voa-button--loading {\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Containers para ícones - estrutura apenas */\r\n.voa-button__icon-leading,\r\n.voa-button__icon-trailing {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.voa-button__loader {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  /* Default size - can be overridden via ::part(loader) */\r\n  width: var(--voa-loader-size, 16px);\r\n  height: var(--voa-loader-size, 16px);\r\n  /* Structural animation - rotation is physics, not art */\r\n  animation: voa-spin var(--voa-loader-duration, 1s) linear infinite;\r\n}\r\n\r\n/* Keyframes must be inside Shadow DOM scope to be accessible */\r\n@keyframes voa-spin {\r\n  0% { transform: rotate(0deg); }\r\n  100% { transform: rotate(360deg); }\r\n}\r\n\r\n/* Ensure the default SVG fills the loader span */\r\n.voa-button__loader svg {\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.voa-button__label {\r\n  display: inline-block;\r\n  flex-shrink: 0;\r\n}\r\n\r\n/* Layout para slots de ícones */\r\n.voa-button ::slotted([slot=\"icon-leading\"]),\r\n.voa-button ::slotted([slot=\"icon-trailing\"]) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, Method } from '@stencil/core';\r\n\r\n/**\r\n * Botão principal do Voa Design System, baseado no design do Figma.\r\n * \r\n * O componente segue o padrão \"unstyled\" (headless), fornecendo apenas estrutura e lógica.\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 botão (elemento <button>)\r\n * @part label - O wrapper do texto do botão\r\n * @part icon-leading - Container do slot para ícone à esquerda\r\n * @part icon-trailing - Container do slot para ícone à direita\r\n */\r\n@Component({\r\n  tag: 'voa-button',\r\n  styleUrl: 'voa-button.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaButton {\r\n  @Element() host: HTMLVoaButtonElement;\r\n\r\n  /**\r\n   * Variante visual do botão.\r\n   * Mapeia as variantes do Figma: primary, secondary, tonal, ghost, link.\r\n   */\r\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tonal' | 'ghost' | 'link' = 'primary';\r\n\r\n  /**\r\n   * Tamanho do botão.\r\n   * Mapeia os tamanhos do Figma: sm (small), md (medium), lg (large).\r\n   */\r\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'lg';\r\n\r\n  /**\r\n   * Se verdadeiro, o botão estará desabilitado.\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Se verdadeiro, o botão exibe um estado de carregamento (spinner)\r\n   * e desabilita interações.\r\n   */\r\n  @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n  /**\r\n   * O texto exibido no botão.\r\n   * Pode ser fornecido via prop ou via slot padrão.\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * Rótulo ARIA para acessibilidade.\r\n   * Usado quando o botão não tem texto visível (apenas ícone).\r\n   */\r\n  @Prop() ariaLabel: string;\r\n\r\n  /**\r\n   * Tipo do botão HTML.\r\n   * Padrão é 'button' para evitar submissão de formulários.\r\n   */\r\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\r\n\r\n  /**\r\n   * Evento emitido ao clicar no botão.\r\n   * Segue o padrão kebab-case: dsClick.\r\n   */\r\n  @Event() dsClick: EventEmitter<void>;\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    const button = this.host.shadowRoot?.querySelector('button[part=\"base\"]') as HTMLButtonElement;\r\n    if (button) {\r\n      button.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler para clique no botão.\r\n   */\r\n  private handleClick = (ev?: MouseEvent) => {\r\n    if (this.disabled || this.loading) {\r\n      ev?.preventDefault();\r\n      ev?.stopPropagation();\r\n      return;\r\n    }\r\n    this.dsClick.emit();\r\n  };\r\n\r\n  /**\r\n   * Handler para navegação por teclado (WCAG 2.2 AA).\r\n   * Suporta Enter, Space para ativar, e Escape para cancelar (se aplicável).\r\n   */\r\n  private handleKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled || this.loading) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        event.preventDefault();\r\n        this.handleClick();\r\n        break;\r\n      case 'Escape':\r\n        // Para botões que abrem modais/dropdowns, Escape fecha\r\n        // Para botões simples, não faz nada (comportamento padrão)\r\n        break;\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          part=\"base\"\r\n          type={this.type}\r\n          class={{\r\n            'voa-button': true,\r\n            [`voa-button--${this.variant}`]: true,\r\n            [`voa-button--${this.size}`]: true,\r\n            'voa-button--disabled': this.disabled,\r\n            'voa-button--loading': this.loading,\r\n          }}\r\n          disabled={this.disabled || this.loading}\r\n          onClick={this.handleClick}\r\n          onKeyDown={this.handleKeyDown}\r\n          aria-disabled={this.disabled || this.loading ? 'true' : undefined}\r\n          aria-busy={this.loading ? 'true' : undefined}\r\n          aria-label={\r\n            this.loading \r\n              ? 'Loading' \r\n              : (this.ariaLabel || this.label)\r\n          }\r\n        >\r\n          {this.loading && (\r\n            <span part=\"loader\" class=\"voa-button__loader\">\r\n              <slot name=\"loader\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                   <path d=\"M12 2V6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M12 18V22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M4.93 4.93L7.76 7.76\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M16.24 16.24L19.07 19.07\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M2 12H6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M18 12H22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M4.93 19.07L7.76 16.24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                   <path d=\"M16.24 7.76L19.07 4.93\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n                </svg>\r\n              </slot>\r\n            </span>\r\n          )}\r\n          \r\n          {!this.loading && (\r\n            <span part=\"icon-leading\" class=\"voa-button__icon-leading\">\r\n              <slot name=\"icon-leading\"></slot>\r\n            </span>\r\n          )}\r\n          <span part=\"label\" class=\"voa-button__label\">\r\n            <slot>{this.label}</slot>\r\n          </span>\r\n          <span part=\"icon-trailing\" class=\"voa-button__icon-trailing\">\r\n            <slot name=\"icon-trailing\"></slot>\r\n          </span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n} "],"version":3}

package/dist/custom-elements/p-Dij6eiDm.js.map

@@ -1 +0,0 @@
-{"file":"p-Dij6eiDm.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/voa-badge/voa-badge.css?tag=voa-badge&encapsulation=shadow","src/components/voa-badge/voa-badge.tsx"],"sourcesContent":["/* \r\n * UNSTYLED PATTERN: This file contains ONLY structural CSS (layout, positioning).\r\n * All visual styles (colors, backgrounds, fonts, spacing) must be applied externally\r\n * via CSS Parts API (::part() selectors) using design tokens.\r\n */\r\n\r\n:host {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-badge__container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.voa-badge__label {\r\n  display: inline-block;\r\n}\r\n\r\n.voa-badge__counter {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.voa-badge__indicator {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  white-space: pre-wrap;\r\n}\r\n\r\n.voa-badge__indicator-only {\r\n  display: inline-block;\r\n}\r\n\r\n.voa-badge__icon,\r\n.voa-badge__icon-leading,\r\n.voa-badge__icon-trailing {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.voa-badge__icon svg,\r\n.voa-badge__icon-leading svg,\r\n.voa-badge__icon-trailing svg {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n","import { Component, Prop, h, Host, Element, Method } from '@stencil/core';\r\nimport { Icons } from '../../utils/icons';\r\n\r\nexport interface VoaBadge {\r\n  /**\r\n   * O texto a ser exibido no badge (mapeado do Figma como \"label\")\r\n   */\r\n  label?: string;\r\n\r\n  /**\r\n   * O número a ser exibido como contador (para variantes indicator e indicator-overlay)\r\n   */\r\n  count?: number;\r\n\r\n  /**\r\n   * O nome do ícone a ser exibido (para variantes icon-only e icons)\r\n   */\r\n  icon?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';\r\n\r\n  /**\r\n   * A variante do badge conforme design do Figma\r\n   * - plain: Badge com texto apenas\r\n   * - icons: Badge com texto e ícones (leading/trailing)\r\n   * - icon-only: Badge apenas com ícone\r\n   * - indicator: Badge numérico (contador)\r\n   * - indicator-overlay: Badge numérico com fundo vermelho (danger)\r\n   * - indicator-only: Badge apenas indicador (ponto vermelho)\r\n   */\r\n  variant?: 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only';\r\n\r\n  /**\r\n   * Forma do badge conforme design do Figma\r\n   * - default: Forma retangular com bordas arredondadas\r\n   * - pill: Forma completamente arredondada (pill-shaped)\r\n   */\r\n  shape?: 'default' | 'pill';\r\n\r\n  /**\r\n   * Tamanho do badge conforme design do Figma\r\n   * - sm: Tamanho pequeno\r\n   * - md: Tamanho médio (padrão)\r\n   */\r\n  size?: 'sm' | 'md';\r\n}\r\n\r\n/**\r\n * Badge component para exibir indicadores visuais como texto, contadores ou status.\r\n * Baseado no design do Figma (node-id: 397-3352).\r\n * \r\n * O componente segue o padrão \"unstyled\" - apenas estrutura e lógica.\r\n * Estilos visuais devem ser aplicados externamente via CSS Parts API usando design tokens.\r\n * \r\n * @part base - O container interno do badge (onde as classes são aplicadas)\r\n * @part label - O wrapper do texto (para variantes plain e icons)\r\n * @part counter - O wrapper do número (para variantes indicator e indicator-overlay)\r\n * @part icon-leading - Container do ícone à esquerda (para variante icons)\r\n * @part icon-trailing - Container do ícone à direita (para variante icons)\r\n * @part icon - Container do ícone (para variante icon-only)\r\n * @part indicator - O indicador numérico ou ponto (para variantes indicator, indicator-overlay, indicator-only)\r\n * \r\n * @slot start - Slot para ícone no início do badge (usado em variante icons)\r\n * @slot end - Slot para ícone no final do badge (usado em variante icons)\r\n */\r\n@Component({\r\n  tag: 'voa-badge',\r\n  styleUrl: 'voa-badge.css',\r\n  shadow: true,\r\n  scoped: false, // Permite herdar variáveis CSS do contexto pai\r\n})\r\nexport class VoaBadgeComponent implements VoaBadge {\r\n  @Element() host: HTMLVoaBadgeElement;\r\n\r\n  /**\r\n   * O texto a ser exibido no badge (mapeado do Figma como \"label\")\r\n   */\r\n  @Prop({ reflect: true }) label?: string;\r\n\r\n  /**\r\n   * O número a ser exibido como contador (para variantes indicator e indicator-overlay)\r\n   */\r\n  @Prop() count?: number;\r\n\r\n  /**\r\n   * O nome do ícone a ser exibido (para variantes icon-only e icons)\r\n   */\r\n  @Prop({ reflect: true }) icon?: 'success' | 'warning' | 'error' | 'info' | 'close' | 'check' | 'star' | 'heart' | 'bell';\r\n\r\n  /**\r\n   * A variante do badge conforme design do Figma\r\n   */\r\n  @Prop() variant: 'plain' | 'icons' | 'icon-only' | 'indicator' | 'indicator-overlay' | 'indicator-only' = 'plain';\r\n\r\n  /**\r\n   * Forma do badge conforme design do Figma\r\n   */\r\n  @Prop({ reflect: true }) shape: 'default' | 'pill' = 'default';\r\n\r\n  /**\r\n   * Tamanho do badge conforme design do Figma\r\n   */\r\n  @Prop() size: 'sm' | 'md' = 'md';\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    const focusable = this.host.shadowRoot?.querySelector('[tabindex]') as HTMLElement;\r\n    if (focusable) {\r\n      focusable.focus();\r\n    }\r\n  }\r\n\r\n  private renderIcon(iconName: string) {\r\n    const IconComponent = Icons[iconName];\r\n    if (!IconComponent) {\r\n      console.warn(`Ícone não encontrado: ${iconName}`);\r\n      return null;\r\n    }\r\n    return <IconComponent />;\r\n  }\r\n\r\n  private getAriaLabel(): string {\r\n    if (this.variant === 'indicator' || this.variant === 'indicator-overlay') {\r\n      return `${this.count || 0} items`;\r\n    }\r\n    if (this.variant === 'indicator-only') {\r\n      return 'Notification indicator';\r\n    }\r\n    if (this.variant === 'icon-only') {\r\n      return 'Icon badge';\r\n    }\r\n    return this.label || 'Badge';\r\n  }\r\n\r\n  private getRole(): string {\r\n    // All indicator variants use role=\"status\" for dynamic updates\r\n    // Non-indicator variants use role=\"status\" as 'badge' is not a valid ARIA role\r\n    return 'status';\r\n  }\r\n\r\n  private getAriaLive(): 'polite' | 'off' {\r\n    // Only indicator variants need live region announcements\r\n    if (this.variant === 'indicator' || this.variant === 'indicator-overlay' || this.variant === 'indicator-only') {\r\n      return 'polite';\r\n    }\r\n    return 'off';\r\n  }\r\n\r\n  render() {\r\n    const containerClasses = {\r\n      'voa-badge__container': true,\r\n      [`voa-badge--${this.variant}`]: true,\r\n      [`voa-badge--${this.shape}`]: true,\r\n      [`voa-badge--${this.size}`]: true,\r\n    };\r\n\r\n    const renderContent = () => {\r\n      switch (this.variant) {\r\n        case 'plain':\r\n          return <span part=\"label\" class=\"voa-badge__label\">{this.label}</span>;\r\n\r\n        case 'icons':\r\n          return (\r\n            <div>\r\n              <span part=\"icon-leading\" class=\"voa-badge__icon-leading\">\r\n                <slot name=\"start\">\r\n                  {this.icon && this.renderIcon(this.icon)}\r\n                </slot>\r\n              </span>\r\n              <span part=\"label\" class=\"voa-badge__label\">{this.label}</span>\r\n              <span part=\"icon-trailing\" class=\"voa-badge__icon-trailing\">\r\n                <slot name=\"end\">\r\n                  {this.icon && this.renderIcon(this.icon)}\r\n                </slot>\r\n              </span>\r\n            </div>\r\n          );\r\n\r\n        case 'icon-only':\r\n          return (\r\n            <span part=\"icon\" class=\"voa-badge__icon\">\r\n              {this.icon && this.renderIcon(this.icon)}\r\n            </span>\r\n          );\r\n\r\n        case 'indicator':\r\n          return (\r\n            <span part=\"indicator\" class=\"voa-badge__indicator\" role=\"status\" aria-live=\"polite\">\r\n              {this.count !== undefined ? this.count : 0}\r\n            </span>\r\n          );\r\n\r\n        case 'indicator-overlay':\r\n          return (\r\n            <span part=\"indicator\" class=\"voa-badge__indicator\" role=\"status\" aria-live=\"polite\">\r\n              {this.count !== undefined ? this.count : 0}\r\n            </span>\r\n          );\r\n\r\n        case 'indicator-only':\r\n          return <span part=\"indicator\" class=\"voa-badge__indicator-only\" aria-hidden=\"true\"></span>;\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    };\r\n\r\n    return (\r\n      <Host\r\n        role={this.getRole()}\r\n        aria-label={this.getAriaLabel()}\r\n        aria-live={this.getAriaLive()}\r\n      >\r\n        <div part=\"base\" class={containerClasses}>\r\n          {renderContent()}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}